From 0cbbc3b93461da820e1c161fbebc035f2fd32f86 Mon Sep 17 00:00:00 2001
From: mind-one001 <mind-one001@mind-one.co.kr>
Date: Thu, 20 Aug 2026 14:57:20 +0900
Subject: [PATCH] =?UTF-8?q?feat(sn):=20CS=20=EA=B8=B0=EC=A4=80=20UI=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC=20=EB=B0=8F=20=EC=A7=80=EB=8F=84=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=20=ED=91=9C=EC=A4=80=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../map/components/InputSection.tsx           |   63 +-
 .../agedPipe/AgedPipeLayerSettingPanel.tsx    |   41 +-
 .../components/agedPipe/AgedPipePopupPage.tsx |  371 +-
 .../map/components/agedPipe/agedPipeUtils.ts  |   16 +-
 .../AgedPipeStatusByCtpvPopupPage.tsx         |  207 +-
 .../agedPipeStatusByCtpvUtils.ts              |   55 +-
 .../analysisMenu/AnalysisPopupMenu.tsx        |   53 +-
 .../map/components/common/table.ts            |   16 +-
 .../components/exmn/ExmnLayerSettingPanel.tsx |   21 +-
 .../exmn/ExmnSurveyResultSection.tsx          |   30 +-
 .../fldngHstry/FldngHstryDetailPanel.tsx      |  146 +-
 .../fldngHstry/FldngHstryPopupPage.tsx        |  343 +-
 .../components/fldngHstry/fldngHstryTypes.ts  |  114 +-
 .../floodDngrMap/FloodDngrMapPopupPage.tsx    |  325 +-
 .../floodDngrMap/floodDngrMapTypes.ts         |   73 +-
 .../gisEdit/GisEditPipeSessionPopup.tsx       |  253 +-
 .../gisEdit/GisEditSessionPanel.tsx           |  105 +-
 .../map/components/gisEdit/GisEditToolbar.tsx |   91 +-
 .../gisManagement/GisManagementPopupPage.tsx  |  529 ++-
 .../gisManagement/GisUploadPreviewMap.tsx     |  305 +-
 .../inftwtResult/InftwtResultPopupPage.tsx    |  358 +-
 .../inftwtResult/useInftwtResultMap.ts        |   10 +-
 .../PipeAnalysisDetailPopupPage.tsx           |  443 +-
 .../pipeAnalysis/PipeAnalysisPopupPage.tsx    |  877 ++--
 .../pipeAnalysis/pipeAnalysisUtils.ts         |  109 +-
 .../map/components/popupComponent/Ssc.tsx     |  272 +-
 .../components/popupComponent/SwtrmtFclt.tsx  |    2 +
 .../popupComponent/SwtrmtPrcsZoneAnalysis.tsx |  217 +-
 .../popupComponent/chart/infilChart.tsx       |  345 +-
 .../popupComponent/chart/rdiiChart.tsx        |  256 +-
 .../popupComponent/featureClickEventPopup.tsx |  605 ++-
 .../map/components/popupComponent/smh.tsx     |   12 +-
 .../rdiiResult/RdiiResultPopupPage.tsx        |  358 +-
 .../components/rdiiResult/useRdiiResultMap.ts |    8 +-
 .../repairHistory/RepairHistoryPopupPage.tsx  |  485 +-
 .../sbmrgDngrMap/SbmrgDngrMapPopupPage.tsx    |  259 +-
 .../sbmrgDngrMap/sbmrgDngrMapTypes.ts         |   61 +-
 .../sinkhole/SinkholeDetailPanel.tsx          |   48 +-
 .../sinkhole/SinkholeLayerSettingPanel.tsx    |   86 +-
 .../components/sinkhole/SinkholePopupPage.tsx |  410 +-
 .../map/components/sinkhole/sinkholeTypes.ts  |   67 +-
 .../waterRisk/WaterRiskPopupPage.tsx          |  663 +--
 apps/sn/app/(map-layout)/map/page.tsx         | 4049 +++++++++++------
 .../(map-layout)/map/searchModal/basicTab.tsx |   80 +-
 .../map/searchModal/fldngWtlvMap.tsx          |   96 +-
 .../map/searchModal/operationTab.tsx          |  100 +-
 .../map/searchModal/reportTab.tsx             |  503 +-
 .../map/searchModal/searchModal.tsx           |  414 +-
 .../(map-layout)/map/searchModal/stofcbr.tsx  |   72 +-
 .../(map-layout)/map/searchModal/swageMhl.tsx |  186 +-
 .../map/searchModal/swagePmstn.tsx            |  158 +-
 .../(map-layout)/map/searchModal/swagePpl.tsx |  194 +-
 .../map/searchModal/swagePrcsFclt.tsx         |  173 +-
 .../map/searchModal/swagePrcsZone.tsx         |  113 +-
 .../map/searchModal/useBasicTab.ts            |  488 +-
 .../map/searchModal/useOperationTab.ts        |  398 +-
 .../map/searchModal/useReportTab.ts           |    2 +
 .../map/searchModal/useSearchModal.ts         |  132 +-
 .../map/waterDepth/waterDepth.tsx             |  104 +-
 apps/sn/app/(popupLayout)/layout.tsx          |    4 +-
 .../(popupLayout)/popup/[popupKey]/page.tsx   |   13 +-
 .../app/(with-base-layout)/ii/BaseLayout.tsx  |  277 +-
 .../ii/analysisResultView.ts                  |   15 +-
 .../(with-base-layout)/ii/fileupload/page.tsx |  191 +-
 .../(with-base-layout)/ii/irsetting/page.tsx  |  553 ++-
 .../app/(with-base-layout)/ii/rdii/page.tsx   |  502 +-
 .../(with-base-layout)/ii/rdiiResult/page.tsx |  313 +-
 .../app/(with-base-layout)/ii/result/page.tsx |  314 +-
 .../ii/useAnalysisCompletionWatcher.tsx       |   84 +-
 apps/sn/app/(with-base-layout)/layout.tsx     |   22 +-
 .../components/DredgingDetailPopupPage.tsx    |  506 +-
 .../components/DredgingLocationMap.tsx        |   11 +-
 .../components/DredgingRegisterModal.tsx      |  706 +--
 .../oper/dredging/lib/client.ts               |    1 +
 .../oper/dredging/lib/types.ts                |    2 +
 .../(with-base-layout)/oper/dredging/page.tsx |  499 +-
 .../oper/floodPre/headMakeFloodPre.tsx        |   21 +-
 .../oper/floodPre/inputTableBody.tsx          |   37 +-
 .../(with-base-layout)/oper/floodPre/page.tsx |  466 +-
 .../oper/floodPre/tableModal.tsx              |  497 +-
 .../(with-base-layout)/oper/oldPp/page.tsx    |  544 ++-
 .../oper/oldPp/tableModal.tsx                 |  810 ++--
 .../oper/operStore/page.tsx                   |   30 +-
 .../selectionValidation.tsx                   |   57 +-
 .../sn/app/components/ui/LoadingBar/index.tsx |   11 +-
 .../app/components/ui/YearRangeSelectBox.tsx  |   40 +-
 .../ui/ctpvSggPrcsFcltSelectBox.tsx           |  118 +-
 apps/sn/app/components/ui/fileUploadForm.tsx  |  119 +-
 .../app/components/ui/operFileUploadForm.tsx  |   71 +-
 apps/sn/app/components/ui/toast.tsx           |   21 +-
 apps/sn/app/components/ui/verticalTable.tsx   |  178 +-
 apps/sn/app/store/useSearchModalStore.ts      |   30 +-
 .../001-fe-SFR-010-004~007-조사사업-통합구현기록.md |   80 +
 .../001-fe-SFR-010-012-준설관리-구현기록.md   |   56 +
 .../001-fe-SN-CS-UI통일-2차-구현기록.md       |  117 +
 .../002-fe-SN-전체화면-인벤토리-검증기록.md   |  127 +
 .../003-fe-2026-08-12-SN-CS-UI통일-작업내용.md |  113 +
 .../004-fe-2026-08-13-SN-CS-UI통일-작업내용.md |  149 +
 .../001-fe-SN-CS사용자메시지통일-구현기록.md  |   64 +
 .../001-fe-SN-노후하수관로정비사업-통합구현기록.md |   91 +
 apps/sn/scripts/audit-screen-inventory.mjs    |  102 +
 apps/sn/src/app/styles/components.css         |  160 +-
 .../cfmtnBgt/ui/CfmtnBgtPopupContent.tsx      |  857 ++--
 .../ui/CtyFldngPrvtnBizFormPage.tsx           |  400 +-
 .../ui/CtyFldngPrvtnBizListPage.tsx           |  598 ++-
 .../features/exmn/api/exmn-business-api.ts    |  136 +-
 .../src/features/exmn/model/trtdst-types.ts   |    2 +-
 .../exmn/ui/ExmnBusinessRegisterPopupPage.tsx |  508 ++-
 .../exmn/ui/ExmnPplUnitDetailTable.tsx        |  257 +-
 .../features/exmn/ui/ExmnRegistrationPage.tsx |  786 ++--
 .../exmn/ui/ExmnResultRegisterPopupPage.tsx   |  558 ++-
 .../exmn/ui/ExmnStandardDataTable.tsx         |  143 +
 .../exmn/ui/ExmnStatusDetailPanel.tsx         |  389 +-
 .../exmn/ui/ExmnSurveyDetailPopupPage.tsx     | 1075 ++---
 .../exmn/ui/PplFacilityDetailModal.tsx        |  182 +-
 .../src/features/exmn/ui/PplSummaryModal.tsx  |  500 +-
 .../features/exmn/ui/TrtdstManagementPage.tsx |  623 ++-
 .../features/obsltPpl/ui/ObsltPplFormPage.tsx |  416 +-
 .../features/obsltPpl/ui/ObsltPplListPage.tsx |  592 ++-
 .../windowPopup/model/popupDefinitions.ts     |   34 +-
 apps/sn/src/features/windowPopup/registry.tsx |  158 +-
 .../ui/DredgingEditPopupContent.tsx           |    2 +-
 .../ui/DredgingRegisterPopupContent.tsx       |    2 +-
 .../ui/ExmnBusinessRegisterPopupContent.tsx   |    8 +-
 .../ui/ExmnPipeReportPopupContent.tsx         |   41 +-
 .../ui/ExmnResultRegisterPopupContent.tsx     |   12 +-
 .../ui/ExmnSurveyDetailPopupContent.tsx       |    9 +-
 .../ui/FeaturePlaceholderPopupContent.tsx     |   23 +-
 .../ui/FloodPreTablePopupContent.tsx          |   27 +-
 .../ui/FloodPreUploadPopupContent.tsx         |   23 +-
 .../ui/GisEditSessionPopupContent.tsx         |   61 +-
 .../ui/InftwtResultPopupContent.tsx           |    4 +-
 .../windowPopup/ui/MapPopupDataTable.tsx      |  182 +
 .../windowPopup/ui/OldPpTablePopupContent.tsx |   27 +-
 .../ui/OldPpUploadPopupContent.tsx            |   23 +-
 .../windowPopup/ui/PopupMissingParams.tsx     |   23 +-
 .../windowPopup/ui/PopupSearchPanel.tsx       |   32 +
 .../windowPopup/ui/RdiiResultPopupContent.tsx |    4 +-
 .../ui/ReportFilesPopupContent.tsx            |   60 +-
 .../windowPopup/ui/ReportTabPopupContent.tsx  |   14 +-
 .../windowPopup/ui/WindowPopupRenderer.tsx    |   22 +
 ...opupContent.tsx => dredgingPopupRecord.ts} |   17 +-
 apps/sn/src/shared/lib/bbs-notice-menu.ts     |   14 +-
 apps/sn/src/shared/lib/statistics-menu-url.ts |  112 +-
 package.json                                  |    1 +
 .../common/business_components/package.json   |    3 +-
 .../src/ui/date_month_picker/mothPicker.tsx   |   47 +-
 .../src/ui/excel/excelStyle.tsx               |  160 +-
 .../src/ui/form_ui/index.tsx                  |    2 +
 .../business_components/src/ui/index.ts       |    5 +-
 .../src/ui/loadingBar/index.tsx               |    1 +
 .../src/ui/map/searchBar/SearchInputText.tsx  |   14 +-
 .../src/ui/map/searchBar/procSearchBar.tsx    |  144 +-
 .../src/ui/map/searchBar/searchBar.tsx        |   58 +-
 .../src/ui/sdmInsertForm/form.tsx             |  368 +-
 .../src/ui/sdmInsertForm/index.tsx            |  243 +-
 .../src/ui/sdmInsertForm/sdmNameBox.tsx       |   26 +-
 .../ui/search_address/SearchAddressModal.tsx  |   83 +-
 .../src/ui/search_input_address/index.tsx     |   10 +-
 .../src/ui/select/index.tsx                   |    2 +
 .../src/ui/select/lib/selectBox.tsx           |   72 +-
 .../src/ui/standard_data_table/index.tsx      |  316 ++
 .../standard-data-table.css                   |   23 +
 .../src/ui/standard_form/index.tsx            |  110 +
 .../src/ui/standard_popup/index.tsx           |   85 +
 .../src/ui/table/HeadMakeColSpan.tsx          |   12 +-
 .../src/ui/table/index.tsx                    |  119 +-
 167 files changed, 21191 insertions(+), 14161 deletions(-)
 create mode 100644 apps/sn/docs/작업내용/SN-CS-UI통일-2차/001-fe-SN-CS-UI통일-2차-구현기록.md
 create mode 100644 apps/sn/docs/작업내용/SN-CS-UI통일-2차/002-fe-SN-전체화면-인벤토리-검증기록.md
 create mode 100644 apps/sn/docs/작업내용/SN-CS-UI통일-2차/003-fe-2026-08-12-SN-CS-UI통일-작업내용.md
 create mode 100644 apps/sn/docs/작업내용/SN-CS-UI통일-2차/004-fe-2026-08-13-SN-CS-UI통일-작업내용.md
 create mode 100644 apps/sn/docs/작업내용/SN-CS사용자메시지통일/001-fe-SN-CS사용자메시지통일-구현기록.md
 create mode 100644 apps/sn/scripts/audit-screen-inventory.mjs
 create mode 100644 apps/sn/src/features/exmn/ui/ExmnStandardDataTable.tsx
 create mode 100644 apps/sn/src/features/windowPopup/ui/MapPopupDataTable.tsx
 create mode 100644 apps/sn/src/features/windowPopup/ui/PopupSearchPanel.tsx
 create mode 100644 apps/sn/src/features/windowPopup/ui/WindowPopupRenderer.tsx
 rename apps/sn/src/features/windowPopup/ui/{DredgingDetailPopupContent.tsx => dredgingPopupRecord.ts} (83%)
 create mode 100644 packages/common/business_components/src/ui/standard_data_table/index.tsx
 create mode 100644 packages/common/business_components/src/ui/standard_data_table/standard-data-table.css
 create mode 100644 packages/common/business_components/src/ui/standard_form/index.tsx
 create mode 100644 packages/common/business_components/src/ui/standard_popup/index.tsx

diff --git a/apps/sn/app/(map-layout)/map/components/InputSection.tsx b/apps/sn/app/(map-layout)/map/components/InputSection.tsx
index 1d45103a1..68c4a3a83 100644
--- a/apps/sn/app/(map-layout)/map/components/InputSection.tsx
+++ b/apps/sn/app/(map-layout)/map/components/InputSection.tsx
@@ -1,49 +1,78 @@
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@common/components/ui";
+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 }[];
+  data: { year: string; type: string; bizInfoNm: string; bizType: string }[];
   sectionKey: string;
-  onInputChange: (section: string, index: number, field: string, value: string) => void;
+  onInputChange: (
+    section: string,
+    index: number,
+    field: string,
+    value: string,
+  ) => void;
 }
 
-const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, onInputChange }) => {
+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>
+        <h3 className="mx-3 whitespace-nowrap text-2xl font-medium text-label">
+          {title}
+        </h3>
       </div>
       {/* 테이블 */}
-      <div className="card !m-[1.2rem] !p-0r">
+      <div className="card !p-0r !m-[1.2rem]">
         <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>
+              <TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
+                구분
+              </TableHead>
+              <TableHead className="w-[80px] whitespace-nowrap border border-border px-2 py-2 text-sm">
+                진단연도
+              </TableHead>
+              <TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
+                사업명
+              </TableHead>
+              <TableHead className="w-auto whitespace-nowrap border border-border px-2 py-2 text-sm">
+                유형
+              </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">
+                <TableCell className="w-auto whitespace-nowrap border border-border px-2 py-2 text-center text-sm leading-normal">
                   {row.type}
                 </TableCell>
-                <TableCell className="border border-gray-300 px-2 py-2 text-sm w-[80px] whitespace-nowrap">
+                <TableCell className="w-[80px] whitespace-nowrap border border-border px-2 py-2 text-sm">
                   <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"
+                    onChange={(e) =>
+                      onInputChange(sectionKey, index, "year", e.target.value)
+                    }
+                    className="border-radius-0 w-full px-3 py-2 text-center text-base text-xl leading-normal"
                   />
                 </TableCell>
-                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto">
+                <TableCell className="w-auto border border-border px-2 py-2 text-center text-sm leading-normal">
                   {row.bizInfoNm}
                 </TableCell>
-                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto whitespace-nowrap">
+                <TableCell className="w-auto whitespace-nowrap border border-border px-2 py-2 text-center text-sm leading-normal">
                   {row.bizType}
                 </TableCell>
               </TableRow>
@@ -55,4 +84,4 @@ const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, on
   );
 };
 
-export default InputSection;
\ No newline at end of file
+export default InputSection;
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx
index c4c3db13c..9a6174db1 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useAlertStore } from "@/shared/lib";
 import { validateElapsedYears, type AgedPipeFilters } from "./agedPipeUtils";
 
 type MaybePromise<T = void> = T | Promise<T>;
@@ -18,15 +19,19 @@ export default function AgedPipeLayerSettingPanel({
   onApply,
   compact = false,
 }: Props) {
+  const alert = useAlertStore((state) => state.setMessage);
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const [elapsedYearsText, setElapsedYearsText] = useState(String(filters.elapsedYears ?? ""));
+  const [elapsedYearsText, setElapsedYearsText] = useState(
+    String(filters.elapsedYears ?? ""),
+  );
 
   useEffect(() => {
     setElapsedYearsText(String(filters.elapsedYears ?? ""));
   }, [filters.elapsedYears]);
 
   const commitElapsedYears = async () => {
-    const elapsedYears = elapsedYearsText === "" ? NaN : Number(elapsedYearsText);
+    const elapsedYears =
+      elapsedYearsText === "" ? NaN : Number(elapsedYearsText);
     if (!validateElapsedYears(elapsedYears)) {
       alert("경과년도는 1년~100년 범위 내에서 입력해주세요.");
       return;
@@ -41,16 +46,22 @@ export default function AgedPipeLayerSettingPanel({
     alert(`노후관로 경과년도 ${elapsedYears}년으로 반영되었습니다.`);
   };
 
-  const inputClass = "h-[22px] border border-[#ccd6df] px-[2px] text-center text-[1rem] leading-none text-[#222]";
+  const inputClass =
+    "h-[22px] border border-input bg-background px-[2px] text-center text-[1rem] leading-none text-foreground";
   const numberInputClass = inputClass + " w-[40px]";
-  const applyButtonClass = "grid h-[20px] w-[20px] shrink-0 place-items-center rounded-full bg-[#31a83b] text-[0.95rem] font-bold leading-none text-white";
-  const indicator = <span className="h-2 w-2 shrink-0 rounded-full bg-[#243b93]" />;
+  const applyButtonClass =
+    "grid h-[20px] w-[20px] shrink-0 place-items-center rounded-full bg-primary text-[0.95rem] font-bold leading-none text-primary-foreground";
+  const indicator = (
+    <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
+  );
 
   const settingRow = (
-    <div className="flex min-h-[25px] items-center gap-1 whitespace-nowrap text-[1.05rem] font-medium text-slate-700">
+    <div className="flex min-h-[25px] items-center gap-1 whitespace-nowrap text-[1.05rem] font-medium text-label">
       <div className="flex min-w-0 items-center gap-1">
         {indicator}
-        <label htmlFor="aged-pipe-elapsed-years" className="shrink-0">노후관로 경과년도(년)</label>
+        <label htmlFor="aged-pipe-elapsed-years" className="shrink-0">
+          노후관로 경과년도(년)
+        </label>
       </div>
       <div className="ml-auto flex shrink-0 items-center gap-1">
         <input
@@ -85,7 +96,7 @@ export default function AgedPipeLayerSettingPanel({
 
   if (compact) {
     return (
-      <div className="w-full rounded-[6px] border border-[#dbe7f5] bg-white px-[6px] py-2 shadow-[0_2px_8px_rgba(15,23,42,0.05)]">
+      <div className="w-full rounded-[6px] border border-border bg-background px-[6px] py-2 shadow-blur">
         {settingRow}
       </div>
     );
@@ -93,23 +104,21 @@ export default function AgedPipeLayerSettingPanel({
 
   return (
     <div className="w-full 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">
+      <div className="relative flex min-h-[30px] items-center justify-center border-b border-red-100 bg-background 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]"
+          className="absolute left-2 top-1/2 h-[18px] w-[18px] -translate-y-1/2 bg-transparent text-[1.2rem] leading-none text-muted-foreground"
           onClick={() => setIsCollapsed((value) => !value)}
           title={isCollapsed ? "펼치기" : "접기"}
         >
           {isCollapsed ? "+" : "-"}
         </button>
-        <span className="text-[1.2rem] font-semibold text-red-700">노후관로 설정</span>
+        <span className="text-[1.2rem] font-semibold text-red-700">
+          노후관로 설정
+        </span>
       </div>
 
-      {!isCollapsed && (
-        <div className="px-2 py-2">
-          {settingRow}
-        </div>
-      )}
+      {!isCollapsed && <div className="px-2 py-2">{settingRow}</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
index 28a1e443d..e5a180fbc 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
@@ -3,9 +3,9 @@
 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 type { UiTableSort } from "@common/business_components/ui";
+import { StandardPopupLayout } from "@common/business_components";
 import { getData } from "@/components/lib/api";
+import { useAlertStore } from "@/shared/lib";
 import useStore from "@/store/useStore";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import {
@@ -21,38 +21,23 @@ import {
   type AgedPipeRow,
 } from "./agedPipeUtils";
 import { downloadAgedPipeCsv } from "./agedPipeExport";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
 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";
 
-const AGED_PIPE_API_SORT_KEYS: Record<string, string> = {
-  rowNumber: "rowNumber",
-  fcltMngNo: "fclt_mng_no",
-  instlYmd: "instl_ymd",
-  pdmtVl: "pdmt_vl",
-  prlgVl: "prlg_vl",
-  usgCd: "usg_cd",
-  mqltCd: "mqlt_cd",
-};
-
-const resolveAgedPipeApiSort = (sort?: UiTableSort) => {
-  if (!sort) return undefined;
-  if (sort.key === "elapsedYears") {
-    const installDateDirection = sort.direction === "asc" ? "desc" : "asc";
-    return `instl_ymd,${installDateDirection}`;
-  }
-
-  const apiKey = AGED_PIPE_API_SORT_KEYS[sort.key];
-  return apiKey ? `${apiKey},${sort.direction}` : undefined;
-};
-
 export default function AgedPipePopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   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),
+      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,
     }),
@@ -60,16 +45,16 @@ export default function AgedPipePopupPage() {
   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 [sort, setSort] = useState<UiTableSort>();
 
   const sggOptions = useMemo(
     () =>
       filters.ctpvCd === "0"
         ? sgg
-        : sgg.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2))),
+        : sgg.filter((item) =>
+            String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
+          ),
     [filters.ctpvCd, sgg],
   );
 
@@ -79,20 +64,13 @@ export default function AgedPipePopupPage() {
   }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
 
   const fetchRows = useCallback(
-    async (
-      page: number,
-      nextFilters: AgedPipeFilters,
-      size: number,
-      activeSort?: UiTableSort,
-    ) => {
+    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),
       });
-      const apiSort = resolveAgedPipeApiSort(activeSort);
-      if (apiSort) queryParams.set("sort", apiSort);
       const cqlFilters = buildAgedPipeCqlFilters(normalized);
       if (cqlFilters.length > 0) {
         queryParams.append("cqlFiter", cqlFilters.join(" and "));
@@ -102,15 +80,10 @@ export default function AgedPipePopupPage() {
       const responseRows = Array.isArray(response?.data) ? response.data : [];
 
       const total = Number(response?.count ?? 0);
-      const descendingSequence =
-        activeSort?.key === "rowNumber" && activeSort.direction === "desc";
-      const rows = responseRows.map((item: Record<string, unknown>, index: number) => {
-        const row = toDisplayPipeRow(item, index, page, ctpv, sgg);
-        if (descendingSequence) {
-          row.rowNumber = total - ((page - 1) * size + index);
-        }
-        return row;
-      });
+      const rows = responseRows.map(
+        (item: Record<string, unknown>, index: number) =>
+          toDisplayPipeRow(item, index, page, ctpv, sgg),
+      );
 
       return { rows, total };
     },
@@ -118,10 +91,14 @@ export default function AgedPipePopupPage() {
   );
 
   const loadRows = useCallback(
-    async (page = 1, nextFilters = filters, activeSort = sort) => {
+    async (page = 1, nextFilters = filters) => {
       setIsLoading(true);
       try {
-        const response = await fetchRows(page, nextFilters, AGED_PIPE_PAGE_SIZE, activeSort);
+        const response = await fetchRows(
+          page,
+          nextFilters,
+          AGED_PIPE_PAGE_SIZE,
+        );
         setRows(response.rows);
         setTotal(response.total);
         setCurrentPage(page);
@@ -133,7 +110,7 @@ export default function AgedPipePopupPage() {
         setIsLoading(false);
       }
     },
-    [fetchRows, filters, sort],
+    [fetchRows, filters],
   );
 
   useEffect(() => {
@@ -148,9 +125,10 @@ export default function AgedPipePopupPage() {
       if (event.data?.type !== POPUP_FILTER_SYNC_MESSAGE) return;
       if (!event.data?.filters) return;
 
-      const normalized = normalizeAgedPipeFilters(event.data.filters as AgedPipeFilters);
+      const normalized = normalizeAgedPipeFilters(
+        event.data.filters as AgedPipeFilters,
+      );
       setFilters(normalized);
-      setSelectedIndex(-1);
       loadRows(1, normalized);
     };
 
@@ -169,12 +147,7 @@ export default function AgedPipePopupPage() {
     await loadRows(page, normalized);
   };
 
-  const handleRowClick = (index?: number) => {
-    if (typeof index !== "number") return;
-    const row = rows[index];
-    if (!row) return;
-
-    setSelectedIndex(index);
+  const handleRowClick = (row: AgedPipeRow) => {
     window.opener?.postMessage(
       {
         type: POPUP_ROW_SELECT_MESSAGE,
@@ -184,12 +157,6 @@ export default function AgedPipePopupPage() {
     );
   };
 
-  const handleSortChange = (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setSelectedIndex(-1);
-    void loadRows(1, filters, nextSort);
-  };
-
   const handleDownload = async () => {
     if (total === 0) {
       alert("다운로드할 데이터가 없습니다.");
@@ -237,183 +204,133 @@ export default function AgedPipePopupPage() {
     window.close();
   };
 
-  const getCellClassName = (_row: AgedPipeRow, headId: string) => {
-    if (headId === "mqltCd") {
-      return "break-all whitespace-normal";
-    }
-
-    return "whitespace-normal";
-  };
-
   return (
-    <main className="sn-popup-page w-full max-w-full overflow-x-hidden overflow-y-hidden">
+    <StandardPopupLayout
+      title="노후관로 목록"
+      actions={
+        <Button type="button" color="white" onClick={handleMinimize}>
+          최소화
+        </Button>
+      }
+    >
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">노후관로 현황</h1>
-        <div className="flex items-center gap-2">
-          <Button
-            type="button"
-            color="white"
-            size="xs"
-            className="sn-popup-header-button"
-            onClick={handleMinimize}
-          >
-            최소화
-          </Button>
-        </div>
-      </header>
 
       {downloadProgressText ? (
-        <div className="sn-popup-success-bar">
+        <div className="rounded-sm border border-primary bg-primary-transparent px-4 py-3 text-[1.3rem] text-primary">
           {downloadProgressText}
         </div>
       ) : null}
 
-      <section className="flex min-h-0 flex-1 flex-col overflow-x-hidden px-4 pb-3 pt-3">
-        <div className="sn-popup-filter-panel-compact grid grid-cols-1 gap-3 md:grid-cols-[140px_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
-          <label className="sn-popup-field">
-            <div className="sn-popup-field-label">경과년도</div>
-            <Input
-              className="sn-popup-input !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="sn-popup-field">
-            <div className="sn-popup-field-label">시도</div>
-            <select
-              className="sn-popup-input !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="sn-popup-field">
-            <div className="sn-popup-field-label">시군구</div>
-            <select
-              className="sn-popup-input !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="sn-popup-actions">
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="sn-popup-primary-button !text-[1.1rem]"
-              onClick={() => void handleSearch(1)}
-            >
-              조회
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="sn-popup-primary-button !text-[1.1rem]"
-              onClick={handleDownload}
-            >
-              다운로드
-            </Button>
-          </div>
-        </div>
-
-        <div className="aged-pipe-popup-table min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-2">
-          <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)}
-            cellClassName={getCellClassName}
-            curPage={currentPage}
-            index={selectedIndex}
-            widthFixed={true}
-            isHideCount={true}
-            className="!m-0 overflow-x-hidden"
-            sort={sort}
-            onSortChange={handleSortChange}
+      <PopupSearchPanel contentClassName="flex flex-wrap items-end gap-x-5 gap-y-3">
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            경과년도
+          </span>
+          <Input
+            className="w-[12rem]"
+            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="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            시도
+          </span>
+          <select
+            className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            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="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            시군구
+          </span>
+          <select
+            className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            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="ml-auto flex items-center gap-2">
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void handleSearch(1)}
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => {
+              const resetFilters = normalizeAgedPipeFilters(
+                AGED_PIPE_DEFAULT_FILTERS,
+              );
+              setFilters(resetFilters);
+              void loadRows(1, resetFilters);
+            }}
+          >
+            초기화
+          </Button>
         </div>
-      </section>
-      <style jsx global>{`
-        .aged-pipe-popup-table .card-header {
-          margin-bottom: 0.6rem;
-        }
+      </PopupSearchPanel>
 
-        .aged-pipe-popup-table .card-header h3 {
-          font-size: 1.7rem;
-          line-height: 1.25;
+      <MapPopupDataTable
+        rows={rows as Array<AgedPipeRow & Record<string, unknown>>}
+        headlist={AGED_PIPE_LIST_HEADLIST}
+        title="노후관로 목록"
+        total={total}
+        page={currentPage}
+        pageSize={AGED_PIPE_PAGE_SIZE}
+        onPageChange={(page) => void handleSearch(page)}
+        onRowClick={handleRowClick}
+        rowId={(row, index) => String(row.fid ?? row.fcltMngNo ?? index)}
+        actions={
+          <Button type="button" onClick={handleDownload}>
+            엑셀다운로드
+          </Button>
         }
-
-        .aged-pipe-popup-table .card {
-          overflow-x: hidden;
-        }
-
-        .aged-pipe-popup-table .table-ui {
-          width: 100%;
-          max-width: 100%;
-          table-layout: fixed;
-        }
-
-        .aged-pipe-popup-table .table-ui th {
-          padding: 0.8rem 0.45rem;
-          font-size: 1.1rem;
-          line-height: 1.2;
-          word-break: keep-all;
-        }
-
-        .aged-pipe-popup-table .table-ui td {
-          padding: 0.85rem 0.4rem;
-          font-size: 1.1rem;
-          line-height: 1.25;
-          overflow-wrap: anywhere;
-          word-break: break-word;
-        }
-
-        .aged-pipe-popup-table .table-ui td:nth-child(2),
-        .aged-pipe-popup-table .table-ui td:nth-child(3),
-        .aged-pipe-popup-table .table-ui td:nth-child(8) {
-          word-break: keep-all;
-        }
-      `}</style>
-    </main>
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts
index 0c5763239..736bb9478 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts
@@ -54,14 +54,14 @@ const normalizeRegionFilterCode = (value: unknown, prefixLength: number) => {
 };
 
 export const AGED_PIPE_LIST_HEADLIST = [
-  { id: "rowNumber", title: "NO", widthPercent: 6, sortable: true },
-  { id: "fcltMngNo", title: "시설관리번호", widthPercent: 18, sortable: true },
-  { id: "instlYmd", title: "설치일자", widthPercent: 12, sortable: true },
-  { id: "pdmtVl", title: "관경(mm)", widthPercent: 10, sortable: true },
-  { id: "prlgVl", title: "연장(m)", widthPercent: 10, sortable: true },
-  { id: "usgCd", title: "용도", widthPercent: 12, sortable: true },
-  { id: "mqltCd", title: "재질", widthPercent: 18, sortable: true },
-  { id: "elapsedYears", title: "경과년도", widthPercent: 8, align: "right", sortable: true },
+  { id: "rowNumber", title: "순번", 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: 12 },
+  { id: "mqltCd", title: "재질", widthPercent: 18 },
+  { id: "elapsedYears", title: "경과년도", widthPercent: 8, align: "right" },
 ];
 
 export const AGED_PIPE_EXCEL_FIELDS = [
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx
index 7b4dcc924..e9ba16d7b 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/AgedPipeStatusByCtpvPopupPage.tsx
@@ -2,12 +2,13 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Input } from "@common/components";
-import { UiTable } from "@common/business_components/ui";
+import { StandardPopupLayout } from "@common/business_components";
 import { getRawJson } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import { useAlertStore } from "@/shared/lib";
+import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
 import {
   AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS,
-  AGED_PIPE_STATUS_BY_CTPV_PAGE_SIZE,
   buildAgedPipeStatusByCtpvHeadList,
   buildAgedPipeStatusYearOptions,
   normalizeAgedPipeStatusByCtpvResponse,
@@ -19,8 +20,14 @@ import {
   type AgedPipeStatusByCtpvRow,
 } from "./agedPipeStatusByCtpvUtils";
 import { downloadAgedPipeStatusByCtpvCsv } from "./agedPipeStatusByCtpvExport";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
+
+// CS 목록과 동일하게 한 페이지에는 최대 10개 시도만 표시한다.
+const AGED_PIPE_STATUS_PAGE_SIZE = 10;
 
 export default function AgedPipeStatusByCtpvPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   // 조회조건 입력 상태다. 기본값 30년, 최근 연도 기준 단년 조회로 시작한다.
   const [filters, setFilters] = useState<AgedPipeStatusByCtpvFilters>(() =>
     normalizeAgedPipeStatusByCtpvFilters({
@@ -35,33 +42,54 @@ export default function AgedPipeStatusByCtpvPopupPage() {
   const [isLoading, setIsLoading] = useState(false);
   // 사용자에게 현재 다운로드 상태를 보여주는 진행 문구다.
   const [downloadProgressText, setDownloadProgressText] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
 
   const yearOptions = useMemo(() => buildAgedPipeStatusYearOptions(), []);
-  const headList = useMemo(() => buildAgedPipeStatusByCtpvHeadList(years), [years]);
+  const headList = useMemo(
+    () => [
+      { id: "rowNumber", title: "순번", widthPercent: 7 },
+      ...buildAgedPipeStatusByCtpvHeadList(years),
+    ],
+    [years],
+  );
+  const pageRows = useMemo(
+    () =>
+      rows.slice(
+        (currentPage - 1) * AGED_PIPE_STATUS_PAGE_SIZE,
+        currentPage * AGED_PIPE_STATUS_PAGE_SIZE,
+      ),
+    [currentPage, rows],
+  );
 
-  const loadRows = useCallback(async (nextFilters: AgedPipeStatusByCtpvFilters) => {
-    setIsLoading(true);
-    try {
-      const normalized = normalizeAgedPipeStatusByCtpvFilters(nextFilters);
-      const queryParams = new URLSearchParams({
-        startYear: String(normalized.startYear),
-        endYear: String(normalized.endYear),
-        elapsedYears: String(normalized.elapsedYears),
-      });
-      const rawResponse = await getRawJson(
-        `v1/swagePpl/aged-status-by-ctpv?${queryParams.toString()}`,
-      );
-      const response = normalizeAgedPipeStatusByCtpvResponse(rawResponse) as AgedPipeStatusByCtpvResponse;
-      setYears(Array.isArray(response?.years) ? response.years : []);
-      setRows(toAgedPipeStatusByCtpvRows(response));
-    } catch (error) {
-      console.error("시도별 노후관로현황 조회 중 오류:", error);
-      setYears([]);
-      setRows([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
+  const loadRows = useCallback(
+    async (nextFilters: AgedPipeStatusByCtpvFilters) => {
+      setIsLoading(true);
+      try {
+        const normalized = normalizeAgedPipeStatusByCtpvFilters(nextFilters);
+        const queryParams = new URLSearchParams({
+          startYear: String(normalized.startYear),
+          endYear: String(normalized.endYear),
+          elapsedYears: String(normalized.elapsedYears),
+        });
+        const rawResponse = await getRawJson(
+          `v1/swagePpl/aged-status-by-ctpv?${queryParams.toString()}`,
+        );
+        const response = normalizeAgedPipeStatusByCtpvResponse(
+          rawResponse,
+        ) as AgedPipeStatusByCtpvResponse;
+        setYears(Array.isArray(response?.years) ? response.years : []);
+        setRows(toAgedPipeStatusByCtpvRows(response));
+        setCurrentPage(1);
+      } catch (error) {
+        console.error("시도별 노후관로현황 조회 중 오류:", error);
+        setYears([]);
+        setRows([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [],
+  );
 
   useEffect(() => {
     void loadRows(filters);
@@ -70,7 +98,9 @@ export default function AgedPipeStatusByCtpvPopupPage() {
   const handleSearch = async () => {
     const normalized = normalizeAgedPipeStatusByCtpvFilters(filters);
     if (!validateAgedPipeStatusByCtpvFilters(normalized)) {
-      alert("기준년도는 최대 3년 범위 내에서 선택하고, 경과년도는 1~100 사이로 입력해주세요.");
+      alert(
+        "기준년도는 최대 3년 범위 내에서 선택하고, 경과년도는 1~100 사이로 입력해주세요.",
+      );
       return;
     }
     setFilters(normalized);
@@ -97,25 +127,25 @@ export default function AgedPipeStatusByCtpvPopupPage() {
   };
 
   return (
-    <main className="sn-popup-page w-full max-w-full overflow-x-hidden overflow-y-hidden">
+    <StandardPopupLayout
+      title={windowPopupDefinitions.agedPipeStatusByCtpvPopup.title}
+      bodyClassName="overflow-x-hidden"
+    >
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">시도별 노후관로현황</h1>
-        <div />
-      </header>
 
       {downloadProgressText ? (
-        <div className="sn-popup-success-bar">
+        <div className="rounded-sm border border-primary bg-primary-transparent px-4 py-3 text-[1.3rem] text-primary">
           {downloadProgressText}
         </div>
       ) : null}
 
-      <section className="flex min-h-0 flex-1 flex-col overflow-x-hidden px-4 pb-3 pt-3">
-        <div className="sn-popup-filter-panel-compact grid grid-cols-1 gap-3 md:grid-cols-[160px_160px_160px_auto] md:items-end">
-          <label className="sn-popup-field">
-            <div className="sn-popup-field-label">기준년도 시작</div>
+      <PopupSearchPanel contentClassName="flex flex-wrap items-end gap-x-5 gap-y-3">
+        <label className="flex shrink-0 items-center gap-2">
+          <span className="whitespace-nowrap text-xl font-medium text-label">
+            기준년도 시작
+          </span>
           <select
-            className="sn-popup-input !text-[1.1rem]"
+            className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl"
             value={filters.startYear}
             onChange={(event) =>
               setFilters((current) =>
@@ -127,15 +157,19 @@ export default function AgedPipeStatusByCtpvPopupPage() {
             }
           >
             {yearOptions.map((year) => (
-              <option key={year} value={year}>{year}</option>
+              <option key={year} value={year}>
+                {year}
+              </option>
             ))}
           </select>
-          </label>
+        </label>
 
-          <label className="sn-popup-field">
-            <div className="sn-popup-field-label">기준년도 종료</div>
+        <label className="flex shrink-0 items-center gap-2">
+          <span className="whitespace-nowrap text-xl font-medium text-label">
+            기준년도 종료
+          </span>
           <select
-            className="sn-popup-input !text-[1.1rem]"
+            className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl"
             value={filters.endYear}
             onChange={(event) =>
               setFilters((current) => ({
@@ -145,13 +179,17 @@ export default function AgedPipeStatusByCtpvPopupPage() {
             }
           >
             {yearOptions.map((year) => (
-              <option key={year} value={year}>{year}</option>
+              <option key={year} value={year}>
+                {year}
+              </option>
             ))}
           </select>
-          </label>
+        </label>
 
-          <label className="sn-popup-field">
-            <div className="sn-popup-field-label">노후관로 기준(년)</div>
+        <label className="flex shrink-0 items-center gap-2">
+          <span className="whitespace-nowrap text-xl font-medium text-label">
+            노후관로 기준(년)
+          </span>
           <Input
             type="text"
             inputMode="numeric"
@@ -162,49 +200,50 @@ export default function AgedPipeStatusByCtpvPopupPage() {
                 elapsedYears: Number(event.target.value.replace(/[^0-9]/g, "")),
               }))
             }
-            className="sn-popup-input !text-[1.1rem]"
+            className="w-[12rem]"
             onKeyDown={(event) => {
               if (event.key === "Enter") void handleSearch();
             }}
           />
-          </label>
+        </label>
 
-          <div className="sn-popup-actions md:pr-3">
-            <Button
-              onClick={handleSearch}
-              color="primary"
-              className="sn-popup-primary-button !text-[1.1rem]"
-            >
-              조회
-            </Button>
-            <Button
-              onClick={handleDownload}
-              color="primary"
-              className="sn-popup-primary-button !text-[1.1rem]"
-            >
-              엑셀 다운로드
-            </Button>
-          </div>
+        <div className="flex min-w-fit flex-1 items-center justify-end gap-2">
+          <Button onClick={handleSearch} color="primary">
+            조회
+          </Button>
+          <Button
+            color="white"
+            onClick={() => {
+              const resetFilters = normalizeAgedPipeStatusByCtpvFilters({
+                elapsedYears: AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS,
+              });
+              setFilters(resetFilters);
+              void loadRows(resetFilters);
+            }}
+          >
+            초기화
+          </Button>
         </div>
+      </PopupSearchPanel>
 
-        <div className="min-h-0 min-w-0 flex-1 overflow-x-auto overflow-y-auto pt-2">
-        <UiTable<AgedPipeStatusByCtpvRow>
-          // 조회 결과 총 {rows.length.toLocaleString()}건
-          headName={<>시도별 노후관로현황 </>} 
-          tableData={rows}
-          headlist={headList}
-          pageSize={AGED_PIPE_STATUS_BY_CTPV_PAGE_SIZE}
-          total={rows.length}
-          cellClick={() => undefined}
-          onPageChange={() => undefined}
-          curPage={1}
-          index={-1}
-          widthFixed={true}
-          isHideCount={true}
-          cellClassName={() => "text-[1.2rem]"}
-        />
-        </div>
-      </section>
-    </main>
+      <MapPopupDataTable
+        rows={
+          pageRows as Array<AgedPipeStatusByCtpvRow & Record<string, unknown>>
+        }
+        headlist={headList}
+        title="시도별 노후관로 목록"
+        total={rows.length}
+        page={currentPage}
+        pageSize={AGED_PIPE_STATUS_PAGE_SIZE}
+        onPageChange={setCurrentPage}
+        scrollMode={years.length > 2 ? "horizontal" : "none"}
+        minTableWidth={years.length > 2 ? "120rem" : "100%"}
+        actions={
+          <Button type="button" onClick={handleDownload}>
+            엑셀다운로드
+          </Button>
+        }
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/agedPipeStatusByCtpvUtils.ts b/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/agedPipeStatusByCtpvUtils.ts
index d41f12d31..6a01cc9de 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/agedPipeStatusByCtpvUtils.ts
+++ b/apps/sn/app/(map-layout)/map/components/agedPipeStatusByCtpv/agedPipeStatusByCtpvUtils.ts
@@ -44,14 +44,21 @@ export const normalizeAgedPipeStatusByCtpvResponse = (
 ): AgedPipeStatusByCtpvResponse => ({
   startYear: Number(response?.startYear ?? 0),
   endYear: Number(response?.endYear ?? 0),
-  elapsedYears: Number(response?.elapsedYears ?? AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS),
-  years: Array.isArray(response?.years) ? response.years.map((year) => Number(year)) : [],
+  elapsedYears: Number(
+    response?.elapsedYears ?? AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS,
+  ),
+  years: Array.isArray(response?.years)
+    ? response.years.map((year) => Number(year))
+    : [],
   rows: Array.isArray(response?.rows) ? response.rows : [],
 });
 
 export const buildAgedPipeStatusYearOptions = () => {
   const currentYear = new Date().getFullYear();
-  return Array.from({ length: currentYear - 1900 + 1 }, (_, index) => currentYear - index);
+  return Array.from(
+    { length: currentYear - 1900 + 1 },
+    (_, index) => currentYear - index,
+  );
 };
 
 export const normalizeAgedPipeStatusByCtpvFilters = (
@@ -61,12 +68,18 @@ export const normalizeAgedPipeStatusByCtpvFilters = (
   let startYear = Math.trunc(Number(filters.startYear ?? currentYear));
   let endYear = Math.trunc(Number(filters.endYear ?? startYear));
   let elapsedYears = Math.trunc(
-    Number(filters.elapsedYears ?? AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS),
+    Number(
+      filters.elapsedYears ?? AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS,
+    ),
   );
 
   if (!Number.isFinite(startYear)) startYear = currentYear;
   if (!Number.isFinite(endYear)) endYear = startYear;
-  if (!Number.isFinite(elapsedYears) || elapsedYears < 1 || elapsedYears > 100) {
+  if (
+    !Number.isFinite(elapsedYears) ||
+    elapsedYears < 1 ||
+    elapsedYears > 100
+  ) {
     elapsedYears = AGED_PIPE_STATUS_BY_CTPV_DEFAULT_ELAPSED_YEARS;
   }
   if (startYear > endYear) {
@@ -85,9 +98,15 @@ export const normalizeAgedPipeStatusByCtpvFilters = (
   };
 };
 
-export const validateAgedPipeStatusByCtpvFilters = (filters: AgedPipeStatusByCtpvFilters) => {
+export const validateAgedPipeStatusByCtpvFilters = (
+  filters: AgedPipeStatusByCtpvFilters,
+) => {
   if (filters.startYear > filters.endYear) return false;
-  if (filters.endYear - filters.startYear + 1 > AGED_PIPE_STATUS_BY_CTPV_MAX_YEAR_SPAN) return false;
+  if (
+    filters.endYear - filters.startYear + 1 >
+    AGED_PIPE_STATUS_BY_CTPV_MAX_YEAR_SPAN
+  )
+    return false;
   return filters.elapsedYears >= 1 && filters.elapsedYears <= 100;
 };
 
@@ -109,18 +128,25 @@ export const toAgedPipeStatusByCtpvRows = (
     };
 
     (row.yearStats ?? []).forEach((yearStat) => {
-      displayRow[`year${yearStat.year}TotalLengthKm`] = formatMetric(Number(yearStat.totalLengthKm ?? 0));
-      displayRow[`year${yearStat.year}AgedLengthKm`] = formatMetric(Number(yearStat.agedLengthKm ?? 0));
-      displayRow[`year${yearStat.year}AgedRate`] = formatMetric(Number(yearStat.agedRate ?? 0));
+      displayRow[`year${yearStat.year}TotalLengthKm`] = formatMetric(
+        Number(yearStat.totalLengthKm ?? 0),
+      );
+      displayRow[`year${yearStat.year}AgedLengthKm`] = formatMetric(
+        Number(yearStat.agedLengthKm ?? 0),
+      );
+      displayRow[`year${yearStat.year}AgedRate`] = formatMetric(
+        Number(yearStat.agedRate ?? 0),
+      );
     });
 
     return displayRow;
   });
 
-export const buildAgedPipeStatusByCtpvHeadList = (years: number[]): UiHeadProps[] => {
+export const buildAgedPipeStatusByCtpvHeadList = (
+  years: number[],
+): UiHeadProps[] => {
   const heads: UiHeadProps[] = [
-    // { id: "rowNumber", title: "NO", widthPercent: 6, sortable: false },
-    { id: "ctpvNm", title: "시도", widthPercent: 14, sortable: false },
+    { id: "ctpvNm", title: "시도", widthPercent: 14 },
   ];
 
   years.forEach((year) => {
@@ -129,21 +155,18 @@ export const buildAgedPipeStatusByCtpvHeadList = (years: number[]): UiHeadProps[
         id: `year${year}TotalLengthKm`,
         title: `${year} 전체관로연장(km)`,
         widthPercent: 13,
-        sortable: false,
         align: "right",
       },
       {
         id: `year${year}AgedLengthKm`,
         title: `${year} 노후관로연장(km)`,
         widthPercent: 13,
-        sortable: false,
         align: "right",
       },
       {
         id: `year${year}AgedRate`,
         title: `${year} 노후화율(%)`,
         widthPercent: 11,
-        sortable: false,
         align: "right",
       },
     );
diff --git a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
index fe16774ba..b060b7564 100644
--- a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
+++ b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
@@ -12,7 +12,10 @@ import {
   TriangleAlert,
   Waves,
 } from "lucide-react";
-import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
+import {
+  windowPopupDefinitions,
+  type WindowPopupKey,
+} from "@/features/windowPopup/model/popupDefinitions";
 
 type Props = {
   onOpenPopup: (popupKey: WindowPopupKey) => Window | null;
@@ -58,23 +61,51 @@ const ANALYSIS_POPUP_ITEMS: Array<{
   icon?: ComponentType<{ className?: string }>;
   renderIcon?: (props: MenuIconProps) => ReactNode;
 }> = [
-  { key: "infoSearch", label: "정보검색", icon: Search },
-  { key: "pipeAnalysisPopup", label: "관로분석", icon: ChartColumnBig },
-  { key: "floodPredictionMapPopup", label: "침수예측현황", icon: Waves },
   {
-    key: "agedPipeStatusByCtpvPopup",
-    label: "시도별 노후관로현황",
+    key: "infoSearch",
+    label: windowPopupDefinitions.mapSearch.title,
+    icon: Search,
+  },
+  {
+    key: "pipeAnalysisPopup",
+    label: windowPopupDefinitions.pipeAnalysisPopup.title,
     icon: ChartColumnBig,
   },
-  { key: "gisEditPopup", label: "GIS 편집", icon: PencilRuler },
-  { key: "gisManagementPopup", label: "GIS 관리", icon: Settings2 },
-  { key: "flowRiskPopup", label: "통수 위험", icon: TriangleAlert },
+  {
+    key: "floodPredictionMapPopup",
+    label: windowPopupDefinitions.floodPredictionMapPopup.title,
+    icon: Waves,
+  },
+  {
+    key: "agedPipeStatusByCtpvPopup",
+    label: windowPopupDefinitions.agedPipeStatusByCtpvPopup.title,
+    icon: ChartColumnBig,
+  },
+  {
+    key: "gisEditPopup",
+    label: windowPopupDefinitions.gisEditPopup.title,
+    icon: PencilRuler,
+  },
+  {
+    key: "gisManagementPopup",
+    label: windowPopupDefinitions.gisManagementPopup.title,
+    icon: Settings2,
+  },
+  {
+    key: "flowRiskPopup",
+    label: windowPopupDefinitions.flowRiskPopup.title,
+    icon: TriangleAlert,
+  },
   {
     key: "inftwtResultPopup",
-    label: "침입수 분석결과",
+    label: windowPopupDefinitions.inftwtResultPopup.title,
     renderIcon: InftwtMenuIcon,
   },
-  { key: "rdiiResultPopup", label: "RDII 분석결과", icon: ChartColumnBig },
+  {
+    key: "rdiiResultPopup",
+    label: windowPopupDefinitions.rdiiResultPopup.title,
+    icon: ChartColumnBig,
+  },
 ];
 
 export default function AnalysisPopupMenu({
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 e65222ddf..bd3a44dbe 100644
--- a/apps/sn/app/(map-layout)/map/components/common/table.ts
+++ b/apps/sn/app/(map-layout)/map/components/common/table.ts
@@ -32,7 +32,7 @@ export const MsSwagePplCol = [
 ]
 // 하수관로 searchModal 기본정보tab
 export const MsSwagePplCol2 = [ 
-  { id: 'rowNumber', title: '일련\n번호' },
+  { id: 'rowNumber', title: '순번' },
   { id: 'fcltMngNo', title: '시설\n관리번호' },
   { id: 'instMngNo', title: '기관\n관리번호' },
   { id: 'flowDirectionBasis', title: '유하방향\n근거' },
@@ -398,7 +398,7 @@ export const SwtrmtFcltCol = [
   // { id: 'obsrvnSptCd', title: '관측지점코드' },
 ];
 export const SwtrmtFcltCol2 = [
-  { id: 'rowNumber', title: '일련\n번호' },
+  { id: 'rowNumber', title: '순번' },
   { id: 'swtrmtFcltNm', title: '하수처리\n시설명' },
   { id: 'fcltCpct', title: '시설\n용량\n(㎥/d)' },
   { id: 'rgnExpln', title: '지역설명' },
@@ -461,7 +461,7 @@ export const SwtrmtPrcsZoneCol = [
   { id: 'swtrmt_fclt_nm', title: '하수처리시설명' },
 ];
 export const SwtrmtPrcsZoneCol2 = [
-  { id: 'rowNumber', title: '일련번호' },
+  { id: 'rowNumber', title: '순번' },
   // { id: 'swtrmtZoneSn', title: '하수처리구역 일련번호' },
   { id: 'swtrmtZoneNm', title: '하수처리구역명' },
   // { id: 'swtrmt_fclt_cd', title: '하수처리시설코드' },
@@ -500,7 +500,7 @@ export const FldngWtlvMapCol = [
   { id: 'rain_str', title: '강우강도(mm/hr)' },
 ];
 export const FldngWtlvMapCol2 = [
-  { id: 'rowNumber', title: '일련번호' },
+  { id: 'rowNumber', title: '순번' },
   { id: 'fldngYr', title: '침수년도' },
   { id: 'fldngDstrNm', title: '침수재해명' },
   { id: 'ctpvNm', title: '시도' },
@@ -561,7 +561,7 @@ export const MsSwageMhlCol = [
   // { id: 'inst_mng_no', title: '기관관리번호' }
 ];
 export const MsSwageMhlCol2 = [
-  { id: 'rowNumber', title: '일련번호' },
+  { id: 'rowNumber', title: '순번' },
   // { id: 'fid', title: 'FID' },
   // { id: 'geom', title: 'geometry' },
   // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
@@ -683,7 +683,7 @@ export const ExclnSewagePumpCol = [
   // { id: 'instMngNo', title: '기관관리번호' },
 ]
 export const ExclnSewagePumpCol2 = [
-  { id: 'rowNumber', title: '일련번호' },
+  { id: 'rowNumber', title: '순번' },
   // { id: 'fid', title: 'FID' },
   // { id: 'geom', title: 'geometry' },
   // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
@@ -739,7 +739,7 @@ export const DrtwSewagePumpCol = [
   // { id: 'instMngNo', title: '기관관리번호' },
 ]
 export const DrtwSewagePumpCol2 = [
-  { id: 'rowNumber', title: '일련번호' },
+  { id: 'rowNumber', title: '순번' },
   // { id: 'fid', title: 'FID' },
   // { id: 'geom', title: 'geometry' },
   // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
@@ -788,7 +788,7 @@ export const stofcbrCol = [
   { id: 'drtn_angl', title: '방향각도(°)' },
 ]
 export const stofcbrCol2 = [
-  { id: 'rowNumber', title: '일련번호' },
+  { id: 'rowNumber', title: '순번' },
   // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
   { id: 'fcltMngNo', title: '시설관리번호' },
   // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
diff --git a/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx b/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx
index a600c9a2f..8d0907f5a 100644
--- a/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx
+++ b/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx
@@ -23,14 +23,17 @@ export default function ExmnLayerSettingPanel({
     });
   };
   const selectClass =
-    "h-[24px] w-[54px] rounded-[4px] border border-[#ccd6df] bg-white px-2 text-[1rem] text-[#222] outline-none focus:border-primary";
-  const labelClass = "shrink-0 text-[1.05rem] font-medium text-slate-700";
+    "h-[24px] w-[54px] rounded-[4px] border border-input bg-background px-2 text-[1rem] text-foreground outline-none focus:border-primary";
+  const labelClass = "shrink-0 text-[1.05rem] font-medium text-label";
 
   return (
-    <div className="w-full rounded-[6px] border border-[#dbe7f5] bg-white px-2 py-[9px] shadow-[0_2px_8px_rgba(15,23,42,0.05)]">
+    <div className="w-full rounded-[6px] border border-border bg-background px-2 py-[9px] shadow-blur">
       <div className="mb-2 flex items-center gap-1">
-        <span className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`} />
-        <span className="text-[1.1rem] font-semibold text-slate-700">
+        {/* 관로/맨홀 조사유형을 구분하는 지도 범례 의미색이므로 고정색을 유지한다. */}
+        <span
+          className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`}
+        />
+        <span className="text-[1.1rem] font-semibold text-label">
           {jobType === "PPL" ? "관로조사" : "맨홀조사"}
         </span>
       </div>
@@ -52,7 +55,9 @@ export default function ExmnLayerSettingPanel({
           <select
             className={selectClass}
             value={filters.structuralGrade}
-            onChange={(event) => updateFilter("structuralGrade", event.target.value)}
+            onChange={(event) =>
+              updateFilter("structuralGrade", event.target.value)
+            }
           >
             {GRADE_OPTIONS.map((grade) => (
               <option key={grade || "all"} value={grade}>
@@ -66,7 +71,9 @@ export default function ExmnLayerSettingPanel({
           <select
             className={selectClass}
             value={filters.operationalGrade}
-            onChange={(event) => updateFilter("operationalGrade", event.target.value)}
+            onChange={(event) =>
+              updateFilter("operationalGrade", event.target.value)
+            }
           >
             {GRADE_OPTIONS.map((grade) => (
               <option key={grade || "all"} value={grade}>
diff --git a/apps/sn/app/(map-layout)/map/components/exmn/ExmnSurveyResultSection.tsx b/apps/sn/app/(map-layout)/map/components/exmn/ExmnSurveyResultSection.tsx
index 9c0417de2..601d34a30 100644
--- a/apps/sn/app/(map-layout)/map/components/exmn/ExmnSurveyResultSection.tsx
+++ b/apps/sn/app/(map-layout)/map/components/exmn/ExmnSurveyResultSection.tsx
@@ -10,6 +10,7 @@ import {
 
 import { getExmnPipeReportAvailability } from "@/features/exmn";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { useAlertStore } from "@/shared/lib";
 
 type ExmnSurveyResultSectionProps = {
   featureData: any;
@@ -31,7 +32,12 @@ const readFeatureProperty = (featureData: any, keys: string[]) =>
 
 const readBooleanFeatureProperty = (featureData: any, keys: string[]) => {
   const value = readRawFeatureProperty(featureData, keys);
-  return value === true || String(value ?? "").trim().toLowerCase() === "true";
+  return (
+    value === true ||
+    String(value ?? "")
+      .trim()
+      .toLowerCase() === "true"
+  );
 };
 
 const displayValue = (value: string) => value || "-";
@@ -39,6 +45,7 @@ const displayValue = (value: string) => value || "-";
 export default function ExmnSurveyResultSection({
   featureData,
 }: ExmnSurveyResultSectionProps) {
+  const alert = useAlertStore((state) => state.setMessage);
   const exmnBizId = readFeatureProperty(featureData, ["exmnBizId"]);
   const jobType = readFeatureProperty(featureData, ["jobType"]);
   const pipeNumber = readFeatureProperty(featureData, [
@@ -49,7 +56,8 @@ export default function ExmnSurveyResultSection({
   const reportAvailable = readBooleanFeatureProperty(featureData, [
     "reportAvailable",
   ]);
-  const canOpenPipeReport = jobType === "PPL" && Boolean(exmnBizId && pipeNumber);
+  const canOpenPipeReport =
+    jobType === "PPL" && Boolean(exmnBizId && pipeNumber);
 
   const openPipeReport = async () => {
     if (!canOpenPipeReport) return;
@@ -65,8 +73,8 @@ export default function ExmnSurveyResultSection({
       );
       if (!availability.available) {
         alert(
-          availability.message?.trim()
-            || `선택한 관로번호의 조사보고서가 등록된 PDF에 없습니다: ${pipeNumber}`,
+          availability.message?.trim() ||
+            `선택한 관로번호의 조사보고서가 등록된 PDF에 없습니다: ${pipeNumber}`,
         );
         return;
       }
@@ -77,7 +85,9 @@ export default function ExmnSurveyResultSection({
         reportNo: readFeatureProperty(featureData, ["reportNo"]),
       });
       if (!reportWindow) {
-        alert("팝업이 차단되었습니다. 브라우저의 팝업 허용 설정을 확인해주세요.");
+        alert(
+          "팝업이 차단되었습니다. 브라우저의 팝업 허용 설정을 확인해주세요.",
+        );
       }
     } catch (error) {
       alert(
@@ -99,14 +109,14 @@ export default function ExmnSurveyResultSection({
   ];
 
   return (
-    <section className="border-b border-[#d9e2ec] bg-white">
+    <section className="border-b border-border bg-background">
       <div className="card-header flex items-center justify-between">
-        <h3 className="text-2xl mx-3 font-medium text-label">조사 결과</h3>
+        <h3 className="mx-3 text-2xl font-medium text-label">조사 결과</h3>
         {jobType === "PPL" && (
           <Button
             onClick={openPipeReport}
             disabled={!canOpenPipeReport}
-            className="px-4 mr-3 py-2 bg-[#16c784] text-white rounded-sm text-sm font-medium hover:bg-[#12ad72] disabled:cursor-not-allowed disabled:bg-[#a7d9c6]"
+            className="hover:bg-primary/90 mr-3 rounded-sm bg-primary px-4 py-2 text-sm font-medium text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50"
           >
             조사보고서 보기
           </Button>
@@ -118,11 +128,11 @@ export default function ExmnSurveyResultSection({
           <TableBody className="text-center">
             {rows.map(([label, value]) => (
               <TableRow key={label}>
-                <TableCell className="w-[120px] whitespace-nowrap bg-blue-100 text-xs font-bold">
+                <TableCell className="w-[120px] whitespace-nowrap bg-secondary text-xs font-bold text-label">
                   {label}
                 </TableCell>
                 <TableCell className="break-all text-left text-xs">
-                  {displayValue(value)}
+                  {displayValue(value ?? "")}
                 </TableCell>
               </TableRow>
             ))}
diff --git a/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryDetailPanel.tsx b/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryDetailPanel.tsx
index 86160149c..d0ad85a20 100644
--- a/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryDetailPanel.tsx
+++ b/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryDetailPanel.tsx
@@ -1,7 +1,11 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { formatFloodArea, formatFloodDepth, type FldngHstryItem } from "./fldngHstryTypes";
+import {
+  formatFloodArea,
+  formatFloodDepth,
+  type FldngHstryItem,
+} from "./fldngHstryTypes";
 
 type Props = {
   detail: FldngHstryItem;
@@ -23,10 +27,10 @@ const renderRows = (rows: Array<[string, string]>) => (
     <tbody>
       {rows.map(([label, value], index) => (
         <tr key={`${label}-${index}`}>
-          <th className="border border-[#d8e3ee] bg-[#f8fbfe] px-3 py-[7px] text-left text-[1.02rem] font-semibold text-[#36506b]">
+          <th className="border border-border bg-secondary px-3 py-[7px] text-left text-[1.02rem] font-semibold text-label">
             {label}
           </th>
-          <td className="border border-[#d8e3ee] bg-white px-3 py-[7px] text-[1.02rem] text-[#1f2937]">
+          <td className="border border-border bg-background px-3 py-[7px] text-[1.02rem] text-foreground">
             {value}
           </td>
         </tr>
@@ -35,105 +39,115 @@ const renderRows = (rows: Array<[string, string]>) => (
   </table>
 );
 
-export default function FldngHstryDetailPanel({ detail, onClose, position }: Props) {
+export default function FldngHstryDetailPanel({
+  detail,
+  onClose,
+  position,
+}: Props) {
   // 지도에서 침수흔적도 polygon을 클릭했을 때, 상세정보는 업무 의미 기준으로 3개 탭에 나눠 보여준다.
   const [activeTab, setActiveTab] = useState<DetailTab>("year");
 
   const yearRows = useMemo(
-    () => [
-      ["침수심", `${detail.floodDepthM.toFixed(2)} m`],
-      ["침수면적", formatFloodArea(detail.floodAreaHa)],
-      ["침수년도", `${detail.floodYear}년`],
-      ["등급", detail.gradeLabel],
-      ["침수구역", detail.districtName],
-    ] as Array<[string, string]>,
+    () =>
+      [
+        ["침수심", `${detail.floodDepthM.toFixed(2)} m`],
+        ["침수면적", formatFloodArea(detail.floodAreaHa)],
+        ["침수년도", `${detail.floodYear}년`],
+        ["등급", detail.gradeLabel],
+        ["침수구역", detail.districtName],
+      ] as Array<[string, string]>,
     [detail],
   );
 
   const disasterRows = useMemo(
-    () => [
-      ["침수재해명", detail.disasterName],
-      ["침수면적", formatFloodArea(detail.floodAreaHa)],
-      ["침수원인상세명", detail.causeDetailName],
-      ["침수시작년월일", detail.startDate],
-      ["침수종료년월일", detail.endDate],
-      ["침수시작시간", detail.startTime],
-    ] as Array<[string, string]>,
+    () =>
+      [
+        ["침수재해명", detail.disasterName],
+        ["침수면적", formatFloodArea(detail.floodAreaHa)],
+        ["침수원인상세명", detail.causeDetailName],
+        ["침수시작년월일", detail.startDate],
+        ["침수종료년월일", detail.endDate],
+        ["침수시작시간", detail.startTime],
+      ] as Array<[string, string]>,
     [detail],
   );
 
   const rainfallRows = useMemo(
-    () => [
-      ["침수시작일자", detail.startDate],
-      ["침수종료일자", detail.endDate],
-      ["침수시작시간", detail.startTime],
-      ["침수종료시간", detail.endTime],
-      ["침수시간", detail.floodHour],
-      ["강우시작시간", detail.rainStartTime],
-      ["강우종료시간", detail.rainEndTime],
-      ["총강우량(mm)", `${detail.totalRainfallMm.toFixed(0)}`],
-      ["강우강도(mm/hr)", `${detail.rainfallIntensityMmHr.toFixed(0)}`],
-      ["침수시간", detail.floodHour],
-      ["침수원인상세코드", detail.causeDetailCode],
-      ["피해금액", detail.damageAmount],
-    ] as Array<[string, string]>,
+    () =>
+      [
+        ["침수시작일자", detail.startDate],
+        ["침수종료일자", detail.endDate],
+        ["침수시작시간", detail.startTime],
+        ["침수종료시간", detail.endTime],
+        ["침수시간", detail.floodHour],
+        ["강우시작시간", detail.rainStartTime],
+        ["강우종료시간", detail.rainEndTime],
+        ["총강우량(mm)", `${detail.totalRainfallMm.toFixed(0)}`],
+        ["강우강도(mm/hr)", `${detail.rainfallIntensityMmHr.toFixed(0)}`],
+        ["침수시간", detail.floodHour],
+        ["침수원인상세코드", detail.causeDetailCode],
+        ["피해금액", detail.damageAmount],
+      ] as Array<[string, string]>,
     [detail],
   );
 
-  const currentRows = activeTab === "year"
-    ? yearRows
-    : activeTab === "disaster"
-      ? disasterRows
-      : rainfallRows;
+  const currentRows =
+    activeTab === "year"
+      ? yearRows
+      : activeTab === "disaster"
+        ? disasterRows
+        : rainfallRows;
 
   return (
     <div
-      className="absolute z-[70] w-[248px] overflow-hidden rounded-[8px] border border-[#cfdbe8] bg-[rgba(255,255,255,0.98)] shadow-[0_14px_28px_rgba(15,23,42,0.18)]"
+      className="absolute z-[70] w-[248px] overflow-hidden rounded-[8px] border border-border bg-background shadow-blur"
       style={{
         left: `${position.left}px`,
         top: `${position.top}px`,
       }}
     >
-      <div className="flex h-[28px] items-center justify-between border-b border-[#d8e3ee] bg-[linear-gradient(180deg,#ffffff_0%,#f6faff_100%)] px-[10px]">
-        <div className="text-[10px] font-bold tracking-[-0.01em] text-[#243b53]">상세정보</div>
+      <div className="flex h-[28px] items-center justify-between border-b border-border bg-secondary px-[10px]">
+        <div className="text-[10px] font-bold tracking-[-0.01em] text-label">
+          상세정보
+        </div>
         <button
           type="button"
-          className="rounded-[4px] px-[4px] text-[13px] leading-none text-[#7b8ba1] transition hover:bg-[#eef5fb] hover:text-[#35597d]"
+          className="rounded-[4px] px-[4px] text-[13px] leading-none text-muted-foreground transition hover:bg-accent hover:text-accent-foreground"
           onClick={onClose}
         >
           ×
         </button>
       </div>
 
-      <div className="border-b border-[#d8e3ee] bg-[#f8fbfe] px-[6px] pt-[6px]">
+      <div className="border-b border-border bg-secondary px-[6px] pt-[6px]">
         <div className="flex gap-[4px]">
-        {[
-          ["year", "년도탭"],
-          ["disaster", "재해명탭"],
-          ["rainfall", "침수발생강우탭"],
-        ].map(([tabId, label]) => {
-          const isActive = activeTab === tabId;
+          {[
+            ["year", "년도탭"],
+            ["disaster", "재해명탭"],
+            ["rainfall", "침수발생강우탭"],
+          ].map(([tabId, label]) => {
+            const isActive = activeTab === tabId;
 
-          return (
-            <button
-              key={tabId}
-              type="button"
-              className={`h-[24px] flex-1 rounded-t-[6px] border px-[6px] text-[9px] font-semibold leading-none transition ${
-                isActive
-                  ? "border-[#b8d4f0] border-b-white bg-white text-[#1f5d99]"
-                  : "border-[#d8e3ee] bg-[#f3f7fb] text-[#5f7388] hover:bg-[#eef5fb]"
-              }`}
-              onClick={() => setActiveTab(tabId as DetailTab)}
-            >
-              {label}
-            </button>
-          );
-        })}
+            return (
+              <button
+                key={tabId}
+                type="button"
+                className={`h-[24px] flex-1 rounded-t-[6px] border px-[6px] text-[9px] font-semibold leading-none transition ${
+                  isActive
+                    ? "border-primary border-b-background bg-background text-primary"
+                    : "border-border bg-secondary text-muted-foreground hover:bg-accent"
+                }`}
+                onClick={() => setActiveTab(tabId as DetailTab)}
+              >
+                {label}
+              </button>
+            );
+          })}
         </div>
       </div>
 
-      <div className="bg-white p-[6px]">
-        <div className="overflow-hidden rounded-[6px] border border-[#d8e3ee] bg-white">
+      <div className="bg-background p-[6px]">
+        <div className="overflow-hidden rounded-[6px] border border-border bg-background">
           {renderRows(currentRows)}
         </div>
       </div>
diff --git a/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryPopupPage.tsx
index 1b3159186..ee4789351 100644
--- a/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/fldngHstry/FldngHstryPopupPage.tsx
@@ -5,13 +5,15 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Input } from "@common/components";
-import { UiTable } from "@common/business_components/ui/table";
-import type { UiTableSort } from "@common/business_components/ui/table";
+import { StandardPopupLayout } from "@common/business_components";
 import { getRawJson } from "@/components/lib/api";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import { useAlertStore } from "@/shared/lib";
 import useStore from "@/store/useStore";
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import {
   FLOOD_HISTORY_LAYER_TYPE,
   FLDNG_HSTRY_DEFAULT_FILTERS,
@@ -44,11 +46,6 @@ const resolveOptionText = (
   return options.find((item) => String(item.val).trim() === lookup)?.text ?? "";
 };
 
-const resolveFldngHstryApiSort = (sort?: UiTableSort) => {
-  if (!sort?.key || !sort.direction) return undefined;
-  return { key: sort.key, direction: sort.direction } as UiTableSort;
-};
-
 const resolveFldngHstryMapFeatureFid = (row: FldngHstryTableRow) => {
   const fid = String(row.fid ?? "").trim();
   if (fid.startsWith(`${FLOOD_HISTORY_LAYER_TYPE}.`)) return fid;
@@ -90,16 +87,18 @@ const resolveRegionNames = (
 });
 
 export default function FldngHstryPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
-  const [filters, setFilters] = useState<FldngHstryFilters>(FLDNG_HSTRY_DEFAULT_FILTERS);
-  const [appliedFilters, setAppliedFilters] = useState<FldngHstryFilters>(FLDNG_HSTRY_DEFAULT_FILTERS);
+  const [filters, setFilters] = useState<FldngHstryFilters>(
+    FLDNG_HSTRY_DEFAULT_FILTERS,
+  );
+  const [appliedFilters, setAppliedFilters] = useState<FldngHstryFilters>(
+    FLDNG_HSTRY_DEFAULT_FILTERS,
+  );
   const [rows, setRows] = useState<FldngHstryTableRow[]>([]);
   const [total, setTotal] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
-  const [sort, setSort] = useState<UiTableSort>();
-  const [appliedSort, setAppliedSort] = useState<UiTableSort>();
 
   useEffect(() => {
     if (ctpv.length === 0) void fetchCtpv();
@@ -121,21 +120,27 @@ export default function FldngHstryPopupPage() {
     () =>
       filters.ctpvCd === "0"
         ? sgg
-        : sgg.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2))),
+        : sgg.filter((item) =>
+            String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
+          ),
     [filters.ctpvCd, sgg],
   );
 
   const fetchRows = useCallback(
-    async (page: number, nextFilters: FldngHstryFilters, size: number, nextSort?: UiTableSort) => {
+    async (page: number, nextFilters: FldngHstryFilters, size: number) => {
       const normalized = normalizeFldngHstryFilters(nextFilters);
       const queryString = buildFldngHstryListQueryString(
         normalized,
         page,
         size,
-        resolveFldngHstryApiSort(nextSort),
       );
-      const response = await getRawJson(`/sewerage-service/api/v1/fldng/hstry?${queryString}`);
-      const payload = unwrapPayload<{ items?: FldngHstryApiItem[]; total?: number }>(response);
+      const response = await getRawJson(
+        `/sewerage-service/api/v1/fldng/hstry?${queryString}`,
+      );
+      const payload = unwrapPayload<{
+        items?: FldngHstryApiItem[];
+        total?: number;
+      }>(response);
       const items = Array.isArray(payload?.items) ? payload.items : [];
 
       const displayItems = items.map((item) => {
@@ -156,32 +161,37 @@ export default function FldngHstryPopupPage() {
   );
 
   const loadRows = useCallback(
-    async (page: number, nextFilters: FldngHstryFilters, nextSort?: UiTableSort) => {
+    async (page: number, nextFilters: FldngHstryFilters) => {
       setIsLoading(true);
       try {
         const normalized = normalizeFldngHstryFilters(nextFilters);
-        const response = await fetchRows(page, normalized, FLDNG_HSTRY_PAGE_SIZE, nextSort);
+        const response = await fetchRows(
+          page,
+          normalized,
+          FLDNG_HSTRY_PAGE_SIZE,
+        );
         setRows(response.rows);
         setTotal(response.total);
         setCurrentPage(page);
         setAppliedFilters(normalized);
-        setSort(nextSort);
-        setAppliedSort(nextSort);
-        setSelectedIndex(-1);
       } catch (error) {
         console.error("침수발생이력 목록 조회 중 오류:", error);
         setRows([]);
         setTotal(0);
-        alert(error instanceof Error ? error.message : "침수발생이력 목록 조회 중 오류가 발생했습니다.");
+        alert(
+          error instanceof Error
+            ? error.message
+            : "침수발생이력 목록 조회 중 오류가 발생했습니다.",
+        );
       } finally {
         setIsLoading(false);
       }
     },
-    [fetchRows],
+    [alert, fetchRows],
   );
 
   useEffect(() => {
-    void loadRows(1, FLDNG_HSTRY_DEFAULT_FILTERS, undefined);
+    void loadRows(1, FLDNG_HSTRY_DEFAULT_FILTERS);
     // 최초 로딩은 한 번만 수행한다.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -195,24 +205,14 @@ export default function FldngHstryPopupPage() {
     }
 
     setFilters(normalized);
-    await loadRows(page, normalized, sort);
+    await loadRows(page, normalized);
   };
 
   const handlePageChange = async (page: number) => {
-    await loadRows(page, appliedFilters, appliedSort);
+    await loadRows(page, appliedFilters);
   };
 
-  const handleSortChange = async (nextSort?: UiTableSort) => {
-    await loadRows(1, appliedFilters, nextSort);
-  };
-
-  const handleRowClick = (index?: number) => {
-    if (typeof index !== "number") return;
-    const row = rows[index];
-    if (!row) return;
-
-    setSelectedIndex(index);
-
+  const handleRowClick = (row: FldngHstryTableRow) => {
     const mapFeatureFid = resolveFldngHstryMapFeatureFid(row);
     if (mapFeatureFid) {
       window.opener?.postMessage(
@@ -250,7 +250,6 @@ export default function FldngHstryPopupPage() {
         1,
         appliedFilters,
         Math.max(total, FLDNG_HSTRY_DOWNLOAD_BATCH_SIZE),
-        appliedSort,
       );
       await downloadExcelWithKoreanHeaders({
         data: buildDownloadRows(response.rows) as unknown as JSON[],
@@ -261,149 +260,155 @@ export default function FldngHstryPopupPage() {
       });
     } catch (error) {
       console.error("침수발생이력 다운로드 중 오류:", error);
-      alert(error instanceof Error ? error.message : "침수발생이력 다운로드 중 오류가 발생했습니다.");
+      alert(
+        error instanceof Error
+          ? error.message
+          : "침수발생이력 다운로드 중 오류가 발생했습니다.",
+      );
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <main className="sn-popup-page w-full max-w-full overflow-x-hidden overflow-y-hidden">
+    <StandardPopupLayout title="침수발생이력 목록">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">침수발생이력</h1>
-        <div />
-      </header>
 
-      <section className="flex min-h-0 flex-1 flex-col overflow-x-hidden px-4 pb-3 pt-3">
-        <div className="sn-popup-filter-panel-compact grid grid-cols-1 gap-3 md:grid-cols-[180px_180px_180px_minmax(0,1fr)_auto] md:items-end">
-          <label className="sn-popup-field">
-            <div className="sn-popup-field-label">시도</div>
-            <select
-              className="sn-popup-input !text-[1.1rem]"
-              value={filters.ctpvCd}
-              onChange={(event) =>
-                setFilters((current) => ({
-                  ...current,
-                  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>
+      <PopupSearchPanel contentClassName="flex flex-wrap items-end gap-x-5 gap-y-3">
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            시도
+          </span>
+          <select
+            className="h-[3.2rem] w-[16rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            value={filters.ctpvCd}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                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="sn-popup-field">
-            <div className="sn-popup-field-label">시군구</div>
-            <select
-              className="sn-popup-input !text-[1.1rem]"
-              value={filters.sggCd}
-              onChange={(event) =>
-                setFilters((current) => ({
-                  ...current,
-                  sggCd: event.target.value,
-                }))
-              }
-            >
-              <option value="0">전체</option>
-              {sggOptions.map((item) => (
-                <option key={item.val} value={String(item.val)}>
-                  {item.text}
-                </option>
-              ))}
-            </select>
-          </label>
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            시군구
+          </span>
+          <select
+            className="h-[3.2rem] w-[16rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            value={filters.sggCd}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                sggCd: event.target.value,
+              }))
+            }
+          >
+            <option value="0">전체</option>
+            {sggOptions.map((item) => (
+              <option key={item.val} value={String(item.val)}>
+                {item.text}
+              </option>
+            ))}
+          </select>
+        </label>
 
-          <label className="sn-popup-field">
-            <div className="sn-popup-field-label">침수발생년도</div>
-            <select
-              className="sn-popup-input !text-[1.1rem]"
-              value={filters.floodYear}
-              onChange={(event) =>
-                setFilters((current) => ({
-                  ...current,
-                  floodYear: event.target.value,
-                }))
-              }
-            >
-              <option value="">전체</option>
-              {fldngYearOptions.map((year) => (
-                <option key={year} value={year}>
-                  {year}년
-                </option>
-              ))}
-            </select>
-          </label>
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            침수발생년도
+          </span>
+          <select
+            className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            value={filters.floodYear}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                floodYear: event.target.value,
+              }))
+            }
+          >
+            <option value="">전체</option>
+            {fldngYearOptions.map((year) => (
+              <option key={year} value={year}>
+                {year}년
+              </option>
+            ))}
+          </select>
+        </label>
 
-          <label className="sn-popup-field">
-            <div className="sn-popup-field-label">침수재해명</div>
-            <Input
-              className="sn-popup-input !text-[1.1rem]"
-              type="text"
-              autoComplete="off"
-              value={filters.disasterName}
-              onChange={(event) =>
-                setFilters((current) => ({
-                  ...current,
-                  disasterName: event.target.value,
-                }))
-              }
-              onKeyDown={(event) => {
-                if (event.key === "Enter") void handleSearch(1);
-              }}
-            />
-          </label>
-
-          <div className="sn-popup-actions md:pr-3">
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="sn-popup-primary-button !text-[1.1rem]"
-              onClick={() => void handleSearch(1)}
-            >
-              조회
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="sn-popup-primary-button !text-[1.1rem]"
-              onClick={() => void handleDownload()}
-            >
-              다운로드
-            </Button>
-          </div>
-        </div>
-
-        <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-2">
-          <UiTable<FldngHstryTableRow>
-            headName={<>침수발생이력 조회 결과 총 {total.toLocaleString()}건</>}
-            tableData={rows}
-            headlist={FLDNG_HSTRY_LIST_HEADLIST}
-            pageSize={FLDNG_HSTRY_PAGE_SIZE}
-            total={total}
-            cellClick={(index) => handleRowClick(index)}
-            onPageChange={(page) => void handlePageChange(page)}
-            curPage={currentPage}
-            index={selectedIndex}
-            widthFixed={true}
-            isHideCount={true}
-            sort={sort}
-            onSortChange={(nextSort) => void handleSortChange(nextSort)}
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            침수재해명
+          </span>
+          <Input
+            className="w-[20rem]"
+            type="text"
+            autoComplete="off"
+            value={filters.disasterName}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                disasterName: event.target.value,
+              }))
+            }
+            onKeyDown={(event) => {
+              if (event.key === "Enter") void handleSearch(1);
+            }}
           />
-        </div>
+        </label>
 
-        <div className="sn-popup-help-text">
-          행 클릭 시 메인 지도에 미리 표시되고, 더블클릭하면 팝업을 닫습니다. 상세정보는 지도 위 침수흔적 영역을 클릭해 확인합니다.
+        <div className="ml-auto flex items-center gap-2">
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void handleSearch(1)}
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => {
+              setFilters(FLDNG_HSTRY_DEFAULT_FILTERS);
+              void loadRows(1, FLDNG_HSTRY_DEFAULT_FILTERS);
+            }}
+          >
+            초기화
+          </Button>
         </div>
-      </section>
-    </main>
+      </PopupSearchPanel>
+
+      <MapPopupDataTable
+        rows={rows as Array<FldngHstryTableRow & Record<string, unknown>>}
+        headlist={FLDNG_HSTRY_LIST_HEADLIST}
+        title="침수발생이력 목록"
+        total={total}
+        page={currentPage}
+        pageSize={FLDNG_HSTRY_PAGE_SIZE}
+        onPageChange={(page) => void handlePageChange(page)}
+        onRowClick={handleRowClick}
+        rowId={(row, index) => String(row.fid ?? index)}
+        scrollMode="horizontal"
+        minTableWidth="220rem"
+        actions={
+          <Button type="button" onClick={() => void handleDownload()}>
+            엑셀다운로드
+          </Button>
+        }
+      />
+
+      <div className="rounded-sm bg-secondary px-4 py-3 text-[1.2rem] text-muted-foreground">
+        행을 클릭하면 메인 지도에서 해당 침수흔적을 표시합니다.
+      </div>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/fldngHstry/fldngHstryTypes.ts b/apps/sn/app/(map-layout)/map/components/fldngHstry/fldngHstryTypes.ts
index 8940bdb3d..9c625791f 100644
--- a/apps/sn/app/(map-layout)/map/components/fldngHstry/fldngHstryTypes.ts
+++ b/apps/sn/app/(map-layout)/map/components/fldngHstry/fldngHstryTypes.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import type { UiHeadProps, UiTableSort } from "@common/business_components/ui";
+import type { UiHeadProps } from "@common/business_components/ui";
 
 export const FLOOD_HISTORY_POPUP_KEY = "fldngHstryPopup";
 export const FLDNG_HSTRY_ROW_SELECT_MESSAGE = "SN_FLOOD_HISTORY_ROW_SELECT";
@@ -119,27 +119,25 @@ export const FLDNG_HSTRY_DEPTH_LEGEND_ITEMS = [
 ] as const;
 
 export const FLDNG_HSTRY_LIST_HEADLIST: UiHeadProps[] = [
-  { id: "rowNo", title: "NO", widthPercent: 5, sortable: false },
-  { id: "floodYearDisplay", title: "침수\n년도", widthPercent: 6, sortable: true, sortKey: "fldngYr" },
-  { id: "ctpvNm", title: "시도", widthPercent: 7, sortable: true, sortKey: "ctpvCd" },
-  { id: "sggNm", title: "시군구", widthPercent: 8, sortable: true, sortKey: "sggCd" },
-  { id: "disasterName", title: "침수재해명", widthPercent: 14, sortable: true, sortKey: "fldngDstrNm" },
-  { id: "rainBgngTmDisplay", title: "강우\n시작일시", widthPercent: 10, sortable: true, sortKey: "rainBgngTm" },
-  { id: "rainEndTmDisplay", title: "강우\n종료일시", widthPercent: 10, sortable: true, sortKey: "rainEndTm" },
-  { id: "rainTotDisplay", title: "총강우량(mm)", widthPercent: 8, sortable: true, sortKey: "rainTot" },
-  { id: "rainStrDisplay", title: "강우강도(mm/hr)", widthPercent: 8, sortable: true, sortKey: "rainStr" },
-  { id: "floodHourDisplay", title: "침수시간", widthPercent: 7, sortable: true, sortKey: "fldngHr" },
-  { id: "districtName", title: "침수지구명", widthPercent: 10, sortable: true, sortKey: "fldngDstrctNm" },
-  //{ id: "causeDetailCode", title: "침수원인상세코드", widthPercent: 8, sortable: true, sortKey: "fldngCsDtlCd" },
-  //{ id: "causeDetailName", title: "침수원인상세", widthPercent: 12, sortable: false },
-  { id: "avgFloodDepthDisplay", title: "평균\n침수위", widthPercent: 7, sortable: true, sortKey: "avgFldngWtlv" },
-  { id: "floodAreaDisplay", title: "침수\n면적\(ha)", widthPercent: 7, sortable: true, sortKey: "fldngArea" },
-  { id: "exmnYearDisplay", title: "조사년도", widthPercent: 6, sortable: true, sortKey: "exmnYr" },
-  { id: "damageAmountDisplay", title: "피해금액", widthPercent: 9, sortable: true, sortKey: "damAmt" },
+  { id: "rowNo", title: "순번", widthPercent: 5 },
+  { id: "floodYearDisplay", title: "침수\n년도", widthPercent: 6 },
+  { id: "ctpvNm", title: "시도", widthPercent: 7 },
+  { id: "sggNm", title: "시군구", widthPercent: 8 },
+  { id: "disasterName", title: "침수재해명", widthPercent: 14 },
+  { id: "rainBgngTmDisplay", title: "강우\n시작일시", widthPercent: 10 },
+  { id: "rainEndTmDisplay", title: "강우\n종료일시", widthPercent: 10 },
+  { id: "rainTotDisplay", title: "총강우량(mm)", widthPercent: 8 },
+  { id: "rainStrDisplay", title: "강우강도(mm/hr)", widthPercent: 8 },
+  { id: "floodHourDisplay", title: "침수시간", widthPercent: 7 },
+  { id: "districtName", title: "침수지구명", widthPercent: 10 },
+  { id: "avgFloodDepthDisplay", title: "평균\n침수위", widthPercent: 7 },
+  { id: "floodAreaDisplay", title: "침수\n면적\(ha)", widthPercent: 7 },
+  { id: "exmnYearDisplay", title: "조사년도", widthPercent: 6 },
+  { id: "damageAmountDisplay", title: "피해금액", widthPercent: 9 },
 ];
 
 export const FLDNG_HSTRY_DOWNLOAD_HEADERS: Record<string, string> = {
-  rowNo: "NO",
+  rowNo: "순번",
   floodYearDisplay: "침수년도",
   ctpvNm: "시도",
   sggNm: "시군구",
@@ -183,11 +181,14 @@ const createIrregularRing = ({
     return [centerX + jitterX, centerY + jitterY] as [number, number];
   });
 
-  return [...points, points[0]];
+  return points.length > 0 ? [...points, points[0]!] : [];
 };
 
 const toNumericSeed = (value: string) =>
-  Array.from(value).reduce((sum, char, index) => sum + char.charCodeAt(0) * (index + 1), 0);
+  Array.from(value).reduce(
+    (sum, char, index) => sum + char.charCodeAt(0) * (index + 1),
+    0,
+  );
 
 const buildGeometrySeed = (fid: string) => {
   const seed = toNumericSeed(fid);
@@ -284,7 +285,8 @@ const normalizeHm = (value?: string | null) => {
   if (!digits) return "";
   if (digits.length === 1) return `0${digits}:00`;
   if (digits.length === 2) return `${digits}:00`;
-  if (digits.length === 3) return `0${digits.slice(0, 1)}:${digits.slice(1, 3)}`;
+  if (digits.length === 3)
+    return `0${digits.slice(0, 1)}:${digits.slice(1, 3)}`;
   return `${digits.slice(0, 2)}:${digits.slice(2, 4)}`;
 };
 
@@ -293,7 +295,8 @@ const normalizeDateTime = (value?: string | null) => {
   if (!source) return "";
   if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(source)) return source;
   const date = new Date(source);
-  if (Number.isNaN(date.getTime())) return source.slice(0, 16).replace("T", " ");
+  if (Number.isNaN(date.getTime()))
+    return source.slice(0, 16).replace("T", " ");
   const yyyy = date.getFullYear();
   const mm = `${date.getMonth() + 1}`.padStart(2, "0");
   const dd = `${date.getDate()}`.padStart(2, "0");
@@ -314,8 +317,12 @@ const formatInteger = (value?: number | null, suffix = "") => {
   return `${numeric.toLocaleString("ko-KR")}${suffix}`;
 };
 
-const formatOptionalNumber = (value?: number | null, digits = 1, suffix = "") => {
-  if (value === null || value === undefined || value === "") return "-";
+const formatOptionalNumber = (
+  value?: number | null,
+  digits = 1,
+  suffix = "",
+) => {
+  if (value === null || value === undefined) return "-";
   const numeric = Number(value);
   if (!Number.isFinite(numeric)) return "-";
   return `${numeric.toFixed(digits)}${suffix}`;
@@ -339,7 +346,9 @@ export const normalizeFldngHstryFilters = (
 ): FldngHstryFilters => ({
   ctpvCd: String(filters.ctpvCd ?? "0") || "0",
   sggCd: String(filters.sggCd ?? "0") || "0",
-  floodYear: String(filters.floodYear ?? "").replace(/[^0-9]/g, "").slice(0, 4),
+  floodYear: String(filters.floodYear ?? "")
+    .replace(/[^0-9]/g, "")
+    .slice(0, 4),
   disasterName: String(filters.disasterName ?? "").trim(),
 });
 
@@ -352,7 +361,6 @@ export const buildFldngHstryListQueryString = (
   filters: FldngHstryFilters,
   page: number,
   size: number,
-  sort?: UiTableSort,
 ) => {
   const normalized = normalizeFldngHstryFilters(filters);
   const params = new URLSearchParams({
@@ -360,23 +368,27 @@ export const buildFldngHstryListQueryString = (
     size: String(size),
   });
 
-  if (normalized.ctpvCd !== "0") params.set("ctpvCd", normalized.ctpvCd.slice(0, 2));
-  if (normalized.sggCd !== "0") params.set("sggCd", normalized.sggCd.slice(0, 5));
+  if (normalized.ctpvCd !== "0")
+    params.set("ctpvCd", normalized.ctpvCd.slice(0, 2));
+  if (normalized.sggCd !== "0")
+    params.set("sggCd", normalized.sggCd.slice(0, 5));
   if (normalized.floodYear) params.set("fldngYr", normalized.floodYear);
-  if (normalized.disasterName) params.set("fldngDstrNm", normalized.disasterName);
-  if (sort?.key && sort.direction) params.set("sort", `${sort.key},${sort.direction}`);
-
+  if (normalized.disasterName)
+    params.set("fldngDstrNm", normalized.disasterName);
   return params.toString();
 };
 
-export const formatFloodArea = (value: number) =>  Number(value ?? 0).toLocaleString("ko-KR", {
+export const formatFloodArea = (value: number) =>
+  Number(value ?? 0).toLocaleString("ko-KR", {
     minimumFractionDigits: 0,
     maximumFractionDigits: 2,
   });
 
 export const formatFloodDepth = (value: number) => value.toFixed(2);
 
-export const attachFldngHstryGeometry = (item: FldngHstryApiItem): FldngHstryItem => {
+export const attachFldngHstryGeometry = (
+  item: FldngHstryApiItem,
+): FldngHstryItem => {
   const historyId = String(item.fid ?? "");
   const geometrySeed = buildGeometrySeed(historyId);
   const startDate = normalizeDate(item.bgngYmd);
@@ -421,7 +433,11 @@ export const attachFldngHstryGeometry = (item: FldngHstryApiItem): FldngHstryIte
       rotationDeg: 9,
       scales: [1.08, 0.9, 1.04, 0.82, 0.98, 1.12, 0.88, 0.96, 1.03, 0.86],
     }),
-    depthZones: createFldngHstryDepthZones(historyId, geometrySeed.centerX, geometrySeed.centerY),
+    depthZones: createFldngHstryDepthZones(
+      historyId,
+      geometrySeed.centerX,
+      geometrySeed.centerY,
+    ),
   };
 };
 
@@ -446,20 +462,36 @@ export const toFldngHstryTableRows = (
   }));
 
 const resolveFldngHstryNodeName = (node: any) =>
-  String(node?.text ?? node?.data?.lyrNm ?? node?.data?.name ?? node?.lyrNm ?? node?.name ?? "").trim();
+  String(
+    node?.text ??
+      node?.data?.lyrNm ??
+      node?.data?.name ??
+      node?.lyrNm ??
+      node?.name ??
+      "",
+  ).trim();
 
 const resolveFldngHstryLayerType = (node: any) =>
-  String(node?.data?.lyrTyNm ?? node?.data?.lyrTypeNm ?? node?.lyrTyNm ?? node?.lyrTypeNm ?? "").trim();
+  String(
+    node?.data?.lyrTyNm ??
+      node?.data?.lyrTypeNm ??
+      node?.lyrTyNm ??
+      node?.lyrTypeNm ??
+      "",
+  ).trim();
 
 export const isFldngHstryNode = (node: any) => {
   const name = resolveFldngHstryNodeName(node);
   const layerType = resolveFldngHstryLayerType(node);
-  return name === FLOOD_HISTORY_LAYER_NAME
-    || layerType === FLOOD_HISTORY_LAYER_TYPE
-    || layerType === FLOOD_HISTORY_PREVIEW_LAYER_TYPE;
+  return (
+    name === FLOOD_HISTORY_LAYER_NAME ||
+    layerType === FLOOD_HISTORY_LAYER_TYPE ||
+    layerType === FLOOD_HISTORY_PREVIEW_LAYER_TYPE
+  );
 };
 
 export const isFloodHistoryNode = isFldngHstryNode;
 export const FLOOD_HISTORY_ROW_SELECT_MESSAGE = FLDNG_HSTRY_ROW_SELECT_MESSAGE;
 export const FLOOD_HISTORY_PAGE_SIZE = FLDNG_HSTRY_PAGE_SIZE;
-export const FLOOD_HISTORY_DOWNLOAD_BATCH_SIZE = FLDNG_HSTRY_DOWNLOAD_BATCH_SIZE;
+export const FLOOD_HISTORY_DOWNLOAD_BATCH_SIZE =
+  FLDNG_HSTRY_DOWNLOAD_BATCH_SIZE;
diff --git a/apps/sn/app/(map-layout)/map/components/floodDngrMap/FloodDngrMapPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/floodDngrMap/FloodDngrMapPopupPage.tsx
index e60f971e5..b65c7b38f 100644
--- a/apps/sn/app/(map-layout)/map/components/floodDngrMap/FloodDngrMapPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/floodDngrMap/FloodDngrMapPopupPage.tsx
@@ -2,11 +2,12 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button } from "@common/components";
-import { UiTable } from "@common/business_components/ui";
-import type { UiTableSort } from "@common/business_components/ui";
+import { StandardPopupLayout } from "@common/business_components";
 import { getData } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import useStore from "@/store/useStore";
 import {
   FLOOD_DNGR_MAP_DEFAULT_FILTERS,
@@ -30,7 +31,11 @@ const getFloodDngrMapJson = async (url: string) => {
   let timeoutId: number | undefined;
   const timeoutPromise = new Promise<never>((_, reject) => {
     timeoutId = window.setTimeout(() => {
-      reject(new Error("도시침수지도 조회 시간이 초과되었습니다. 검색조건을 좁혀 다시 조회해주세요."));
+      reject(
+        new Error(
+          "도시침수지도 조회 시간이 초과되었습니다. 검색조건을 좁혀 다시 조회해주세요.",
+        ),
+      );
     }, FLOOD_DNGR_MAP_REQUEST_TIMEOUT_MS);
   });
   try {
@@ -43,25 +48,38 @@ const getFloodDngrMapJson = async (url: string) => {
 /** 시설물 레이어의 정보제공포털 도시침수지도 피처를 조건별 목록으로 제공한다. */
 export default function FloodDngrMapPopupPage() {
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
-  const [filters, setFilters] = useState<FloodDngrMapFilters>(FLOOD_DNGR_MAP_DEFAULT_FILTERS);
-  const [appliedFilters, setAppliedFilters] = useState<FloodDngrMapFilters>(FLOOD_DNGR_MAP_DEFAULT_FILTERS);
+  const [filters, setFilters] = useState<FloodDngrMapFilters>(
+    FLOOD_DNGR_MAP_DEFAULT_FILTERS,
+  );
+  const [appliedFilters, setAppliedFilters] = useState<FloodDngrMapFilters>(
+    FLOOD_DNGR_MAP_DEFAULT_FILTERS,
+  );
   const [items, setItems] = useState<FloodDngrMapApiItem[]>([]);
-  const [administrativeScopeCodes, setAdministrativeScopeCodes] = useState<string[] | null>(null);
+  const [administrativeScopeCodes, setAdministrativeScopeCodes] = useState<
+    string[] | null
+  >(null);
   const [total, setTotal] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const [sort, setSort] = useState<UiTableSort>();
-  const [appliedSort, setAppliedSort] = useState<UiTableSort>();
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
   const availableCtpvCodes = useMemo(
-    () => new Set((administrativeScopeCodes ?? []).map((code) => code.slice(0, 2)).filter(Boolean)),
+    () =>
+      new Set(
+        (administrativeScopeCodes ?? [])
+          .map((code) => code.slice(0, 2))
+          .filter(Boolean),
+      ),
     [administrativeScopeCodes],
   );
 
   const availableSggCodes = useMemo(
-    () => new Set((administrativeScopeCodes ?? []).map((code) => code.slice(0, 5)).filter(Boolean)),
+    () =>
+      new Set(
+        (administrativeScopeCodes ?? [])
+          .map((code) => code.slice(0, 5))
+          .filter(Boolean),
+      ),
     [administrativeScopeCodes],
   );
 
@@ -69,7 +87,9 @@ export default function FloodDngrMapPopupPage() {
     () =>
       administrativeScopeCodes === null
         ? ctpv
-        : ctpv.filter((item) => availableCtpvCodes.has(String(item.val).trim().slice(0, 2))),
+        : ctpv.filter((item) =>
+            availableCtpvCodes.has(String(item.val).trim().slice(0, 2)),
+          ),
     [administrativeScopeCodes, availableCtpvCodes, ctpv],
   );
 
@@ -77,10 +97,14 @@ export default function FloodDngrMapPopupPage() {
     const scopedOptions =
       administrativeScopeCodes === null
         ? sgg
-        : sgg.filter((item) => availableSggCodes.has(String(item.val).trim().slice(0, 5)));
+        : sgg.filter((item) =>
+            availableSggCodes.has(String(item.val).trim().slice(0, 5)),
+          );
     return filters.ctpvCd === "0"
       ? scopedOptions
-      : scopedOptions.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2)));
+      : scopedOptions.filter((item) =>
+          String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
+        );
   }, [administrativeScopeCodes, availableSggCodes, filters.ctpvCd, sgg]);
 
   const rows = useMemo(
@@ -92,9 +116,8 @@ export default function FloodDngrMapPopupPage() {
         ctpv,
         sgg,
         total,
-        sort,
       ),
-    [ctpv, currentPage, items, sgg, sort, total],
+    [ctpv, currentPage, items, sgg, total],
   );
 
   useEffect(() => {
@@ -107,16 +130,18 @@ export default function FloodDngrMapPopupPage() {
     if (!isLoading) return;
     const watchdogId = window.setTimeout(() => {
       setIsLoading(false);
-      setErrorMessage((current) =>
-        current || "도시침수지도 조회가 지연되어 로딩을 종료했습니다. 검색조건을 좁혀 다시 조회해주세요.",
+      setErrorMessage(
+        (current) =>
+          current ||
+          "도시침수지도 조회가 지연되어 로딩을 종료했습니다. 검색조건을 좁혀 다시 조회해주세요.",
       );
     }, FLOOD_DNGR_MAP_LOADING_WATCHDOG_MS);
     return () => window.clearTimeout(watchdogId);
   }, [isLoading]);
 
-  /** 마지막 적용 조건과 정렬로 서버 페이지를 조회한다. */
+  /** 마지막 적용 조건으로 서버 페이지를 조회한다. */
   const loadRows = useCallback(
-    async (page: number, nextFilters: FloodDngrMapFilters, nextSort?: UiTableSort) => {
+    async (page: number, nextFilters: FloodDngrMapFilters) => {
       setIsLoading(true);
       setErrorMessage("");
       try {
@@ -124,7 +149,6 @@ export default function FloodDngrMapPopupPage() {
           nextFilters,
           page - 1,
           FLOOD_DNGR_MAP_PAGE_SIZE,
-          nextSort,
         );
         const response = await getFloodDngrMapJson(
           `/sewerage-service/api/v1/fldng/flood-dngr-map?${queryString}`,
@@ -134,21 +158,22 @@ export default function FloodDngrMapPopupPage() {
           total?: number;
         } | null;
         if (!payload || !Array.isArray(payload.items)) {
-          throw new Error("도시침수지도 목록 API 응답 형식이 올바르지 않습니다.");
+          throw new Error(
+            "도시침수지도 목록 API 응답 형식이 올바르지 않습니다.",
+          );
         }
         setItems(payload.items);
         setTotal(Number(payload?.total ?? 0));
         setCurrentPage(page);
         setAppliedFilters(nextFilters);
-        setSort(nextSort);
-        setAppliedSort(nextSort);
-        setSelectedIndex(-1);
       } catch (error) {
         console.error("도시침수지도 목록 조회 중 오류:", error);
         setItems([]);
         setTotal(0);
         setErrorMessage(
-          error instanceof Error ? error.message : "도시침수지도 목록 조회 중 오류가 발생했습니다.",
+          error instanceof Error
+            ? error.message
+            : "도시침수지도 목록 조회 중 오류가 발생했습니다.",
         );
       } finally {
         setIsLoading(false);
@@ -164,7 +189,9 @@ export default function FloodDngrMapPopupPage() {
         "/sewerage-service/api/v1/fldng/flood-dngr-map/scope",
       );
       if (!Array.isArray(response)) {
-        throw new Error("도시침수지도 행정구역 API 응답 형식이 올바르지 않습니다.");
+        throw new Error(
+          "도시침수지도 행정구역 API 응답 형식이 올바르지 않습니다.",
+        );
       }
       setAdministrativeScopeCodes(response);
     } catch (error) {
@@ -179,15 +206,12 @@ export default function FloodDngrMapPopupPage() {
   }, [loadAdministrativeScope, loadRows]);
 
   const handleSearch = () => {
-    void loadRows(1, filters, sort);
+    void loadRows(1, filters);
   };
 
   /** 시군구·침수빈도 그룹의 범위와 선택 조건을 부모 지도에 전달한다. */
-  const handleRowClick = async (index?: number) => {
-    if (typeof index !== "number") return;
-    const row = rows[index];
+  const handleRowClick = async (row: FloodDngrMapTableRow) => {
     if (!row?.sggCd || !row?.sbmrgFrqExpln) return;
-    setSelectedIndex(index);
     setIsLoading(true);
     setErrorMessage("");
     try {
@@ -199,8 +223,16 @@ export default function FloodDngrMapPopupPage() {
         `/sewerage-service/api/v1/fldng/flood-dngr-map/group/extent?${params.toString()}`,
       );
       const payload = response as FloodDngrMapExtent;
-      const extent = [payload?.minX, payload?.minY, payload?.maxX, payload?.maxY].map(Number);
-      if (extent.length !== 4 || extent.some((value) => !Number.isFinite(value))) {
+      const extent = [
+        payload?.minX,
+        payload?.minY,
+        payload?.maxX,
+        payload?.maxY,
+      ].map(Number);
+      if (
+        extent.length !== 4 ||
+        extent.some((value) => !Number.isFinite(value))
+      ) {
         throw new Error("해당 도시침수지도 피처의 위치 정보가 없습니다.");
       }
       window.opener?.postMessage(
@@ -229,105 +261,138 @@ export default function FloodDngrMapPopupPage() {
   };
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <StandardPopupLayout title="도시침수지도 목록">
       <LoadingOverlay isLoading={isLoading} />
-      <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">도시침수지도 목록</h1>
-      </header>
-
-      <section className="flex min-h-0 flex-1 flex-col p-4">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[200px_200px_220px_200px_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.ctpvCd}
-              onChange={(event) => setFilters({ ...filters, ctpvCd: event.target.value, sggCd: "0" })}
-            >
-              <option value="0">전체</option>
-              {ctpvOptions.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) => 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>
-
-          <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.sbmrgDpthlCd}
-              onChange={(event) => setFilters({ ...filters, sbmrgDpthlCd: event.target.value })}
-            >
-              <option value="0">전체</option>
-              {FLOOD_DNGR_MAP_DEPTH_OPTIONS.map((option) => (
-                <option key={option.value} value={option.value}>{option.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={filters.sbmrgFrqExpln}
-              onChange={(event) => setFilters({ ...filters, sbmrgFrqExpln: event.target.value })}
-            >
-              <option value="0">전체</option>
-              {FLOOD_DNGR_MAP_FREQUENCY_OPTIONS.map((value) => (
-                <option key={value} value={value}>{Number(value)}년</option>
-              ))}
-            </select>
-          </label>
-
-          <div className="flex justify-end md:pr-3">
-            <Button type="button" size="sm" color="primary" className="h-10 px-5 !text-[1.1rem]" onClick={handleSearch}>
-              조회
-            </Button>
+      <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            시도
           </div>
-        </div>
-
-        {errorMessage ? (
-          <div role="alert" className="mt-2 rounded border border-red-200 bg-red-50 px-3 py-2 text-[1rem] text-red-700">
-            {errorMessage}
-          </div>
-        ) : null}
-
-        <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-2">
-          <UiTable<FloodDngrMapTableRow>
-            headName={
-              <>
-                도시침수지도 조회 결과 총 {total.toLocaleString()}건
-              </>
+          <select
+            className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground"
+            value={filters.ctpvCd}
+            onChange={(event) =>
+              setFilters({
+                ...filters,
+                ctpvCd: event.target.value,
+                sggCd: "0",
+              })
             }
-            tableData={rows}
-            headlist={FLOOD_DNGR_MAP_HEADLIST}
-            pageSize={FLOOD_DNGR_MAP_PAGE_SIZE}
-            total={total}
-            cellClick={(index) => void handleRowClick(index)}
-            onPageChange={(page) => void loadRows(page, appliedFilters, appliedSort)}
-            curPage={currentPage}
-            index={selectedIndex}
-            widthFixed={true}
-            isHideCount={true}
-            sort={sort}
-            onSortChange={(nextSort) => void loadRows(1, appliedFilters, nextSort)}
-          />
+          >
+            <option value="0">전체</option>
+            {ctpvOptions.map((item) => (
+              <option key={item.val} value={String(item.val)}>
+                {item.text}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            시군구
+          </div>
+          <select
+            className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground"
+            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>
+
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            침수심도
+          </div>
+          <select
+            className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-xl text-foreground"
+            value={filters.sbmrgDpthlCd}
+            onChange={(event) =>
+              setFilters({ ...filters, sbmrgDpthlCd: event.target.value })
+            }
+          >
+            <option value="0">전체</option>
+            {FLOOD_DNGR_MAP_DEPTH_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            침수빈도
+          </div>
+          <select
+            className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground"
+            value={filters.sbmrgFrqExpln}
+            onChange={(event) =>
+              setFilters({ ...filters, sbmrgFrqExpln: event.target.value })
+            }
+          >
+            <option value="0">전체</option>
+            {FLOOD_DNGR_MAP_FREQUENCY_OPTIONS.map((value) => (
+              <option key={value} value={value}>
+                {Number(value)}년
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <div className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button
+            type="button"
+            size="default"
+            color="primary"
+            onClick={handleSearch}
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            size="default"
+            color="white"
+            onClick={() => {
+              setFilters(FLOOD_DNGR_MAP_DEFAULT_FILTERS);
+              void loadRows(1, FLOOD_DNGR_MAP_DEFAULT_FILTERS);
+            }}
+          >
+            초기화
+          </Button>
         </div>
-      </section>
-    </main>
+      </PopupSearchPanel>
+
+      {errorMessage ? (
+        <div
+          role="alert"
+          className="mt-2 rounded border border-red-200 bg-red-50 px-3 py-2 text-[1rem] text-red-700"
+        >
+          {errorMessage}
+        </div>
+      ) : null}
+
+      <MapPopupDataTable
+        rows={rows as Array<FloodDngrMapTableRow & Record<string, unknown>>}
+        headlist={FLOOD_DNGR_MAP_HEADLIST}
+        title="도시침수지도 목록"
+        total={total}
+        page={currentPage}
+        pageSize={FLOOD_DNGR_MAP_PAGE_SIZE}
+        onPageChange={(page) => void loadRows(page, appliedFilters)}
+        onRowClick={(row) => void handleRowClick(row)}
+        rowId={(row, index) => `${row.sggCd}-${row.sbmrgFrqExpln}-${index}`}
+        scrollMode="horizontal"
+        minTableWidth="120rem"
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/floodDngrMap/floodDngrMapTypes.ts b/apps/sn/app/(map-layout)/map/components/floodDngrMap/floodDngrMapTypes.ts
index 24a4187d7..fd5a335b1 100644
--- a/apps/sn/app/(map-layout)/map/components/floodDngrMap/floodDngrMapTypes.ts
+++ b/apps/sn/app/(map-layout)/map/components/floodDngrMap/floodDngrMapTypes.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import type { UiHeadProps, UiTableSort } from "@common/business_components/ui";
+import type { UiHeadProps } from "@common/business_components/ui";
 
 export const FLOOD_DNGR_MAP_POPUP_KEY = "floodDngrMapPopup";
 export const FLOOD_DNGR_MAP_LAYER_TYPE = "tb_ms_flood_dngr_map";
@@ -59,47 +59,46 @@ export const FLOOD_DNGR_MAP_DEPTH_LABELS: Record<string, string> = {
   N334: "5.0m 이상",
 };
 
-export const FLOOD_DNGR_MAP_DEPTH_OPTIONS = Object.entries(FLOOD_DNGR_MAP_DEPTH_LABELS).map(
-  ([value, label]) => ({ value, label }),
-);
+export const FLOOD_DNGR_MAP_DEPTH_OPTIONS = Object.entries(
+  FLOOD_DNGR_MAP_DEPTH_LABELS,
+).map(([value, label]) => ({ value, label }));
 
 export const FLOOD_DNGR_MAP_HEADLIST: UiHeadProps[] = [
-  { id: "rowNo", title: "NO", widthPercent: 8, sortable: true, sortKey: "rowNo" },
-  { id: "ctpvNm", title: "시도", widthPercent: 18, sortable: true, sortKey: "ctpvCd" },
-  { id: "sggNm", title: "시군구", widthPercent: 20, sortable: true, sortKey: "sggCd" },
+  { id: "rowNo", title: "순번", widthPercent: 8 },
+  { id: "ctpvNm", title: "시도", widthPercent: 18 },
+  { id: "sggNm", title: "시군구", widthPercent: 20 },
   {
     id: "sbmrgDpthlDisplay",
     title: "침수심도(최소~최대)",
     widthPercent: 31,
-    sortable: true,
-    sortKey: "sbmrgDpthlCd",
   },
   {
     id: "sbmrgFrqDisplay",
     title: "침수빈도",
     widthPercent: 23,
-    sortable: true,
-    sortKey: "sbmrgFrqExpln",
   },
 ];
 
-/** API가 허용하는 검색 조건과 페이징·정렬 파라미터만 쿼리 문자열로 만든다. */
+/** API가 허용하는 검색 조건과 페이징 파라미터만 쿼리 문자열로 만든다. */
 export const buildFloodDngrMapListQueryString = (
   filters: FloodDngrMapFilters,
   page: number,
   size: number,
-  sort?: UiTableSort,
 ) => {
-  const params = new URLSearchParams({ page: String(page), size: String(size) });
-  if (filters.ctpvCd && filters.ctpvCd !== "0") params.set("ctpvCd", filters.ctpvCd.slice(0, 2));
-  if (filters.sggCd && filters.sggCd !== "0") params.set("sggCd", filters.sggCd.slice(0, 5));
+  const params = new URLSearchParams({
+    page: String(page),
+    size: String(size),
+  });
+  if (filters.ctpvCd && filters.ctpvCd !== "0")
+    params.set("ctpvCd", filters.ctpvCd.slice(0, 2));
+  if (filters.sggCd && filters.sggCd !== "0")
+    params.set("sggCd", filters.sggCd.slice(0, 5));
   if (filters.sbmrgDpthlCd && filters.sbmrgDpthlCd !== "0") {
     params.set("sbmrgDpthlCd", filters.sbmrgDpthlCd);
   }
   if (filters.sbmrgFrqExpln && filters.sbmrgFrqExpln !== "0") {
     params.set("sbmrgFrqExpln", filters.sbmrgFrqExpln);
   }
-  if (sort?.key && sort.direction) params.set("sort", `${sort.key},${sort.direction}`);
   return params.toString();
 };
 
@@ -108,9 +107,14 @@ const resolveAdministrativeName = (
   options: AdministrativeOption[],
   codeLength: number,
 ) => {
-  const code = String(value ?? "").trim().slice(0, codeLength);
+  const code = String(value ?? "")
+    .trim()
+    .slice(0, codeLength);
   const matched = options.find(
-    (option) => String(option.val ?? "").trim().slice(0, codeLength) === code,
+    (option) =>
+      String(option.val ?? "")
+        .trim()
+        .slice(0, codeLength) === code,
   );
   return String(matched?.text ?? "").trim() || "-";
 };
@@ -122,7 +126,10 @@ const toFrequencyDisplay = (value: unknown) => {
   return Number.isFinite(numericValue) ? `${numericValue}년` : normalized;
 };
 
-const FLOOD_DNGR_MAP_DEPTH_BOUNDS: Record<string, { min: string; max: string; openEnded?: boolean }> = {
+const FLOOD_DNGR_MAP_DEPTH_BOUNDS: Record<
+  string,
+  { min: string; max: string; openEnded?: boolean }
+> = {
   N330: { min: "0.0", max: "0.5" },
   N331: { min: "0.5", max: "1.0" },
   N332: { min: "1.0", max: "2.0" },
@@ -133,7 +140,8 @@ const FLOOD_DNGR_MAP_DEPTH_BOUNDS: Record<string, { min: string; max: string; op
 /** 그룹의 최소·최대 침수심도 코드를 하나의 범위 문구로 표시한다. */
 const toDepthRangeDisplay = (minCode: string, maxCode: string) => {
   if (!minCode && !maxCode) return "-";
-  if (minCode === maxCode) return FLOOD_DNGR_MAP_DEPTH_LABELS[minCode] || minCode || "-";
+  if (minCode === maxCode)
+    return FLOOD_DNGR_MAP_DEPTH_LABELS[minCode] || minCode || "-";
   const minDepth = FLOOD_DNGR_MAP_DEPTH_BOUNDS[minCode];
   const maxDepth = FLOOD_DNGR_MAP_DEPTH_BOUNDS[maxCode];
   if (!minDepth || !maxDepth) return `${minCode || "-"} ~ ${maxCode || "-"}`;
@@ -150,23 +158,30 @@ export const toFloodDngrMapTableRows = (
   ctpvOptions: AdministrativeOption[] = [],
   sggOptions: AdministrativeOption[] = [],
   total = items.length,
-  sort?: UiTableSort,
 ): FloodDngrMapTableRow[] =>
   items.map((item, index) => ({
     ...item,
-    rowNo:
-      sort?.key === "rowNo" && sort.direction === "desc"
-        ? total - page * pageSize - index
-        : page * pageSize + index + 1,
+    rowNo: total - page * pageSize - index,
     ctpvNm: resolveAdministrativeName(item.ctpvCd, ctpvOptions, 2),
     sggNm: resolveAdministrativeName(item.sggCd, sggOptions, 5),
-    sbmrgDpthlDisplay: toDepthRangeDisplay(item.minSbmrgDpthlCd, item.maxSbmrgDpthlCd),
+    sbmrgDpthlDisplay: toDepthRangeDisplay(
+      item.minSbmrgDpthlCd,
+      item.maxSbmrgDpthlCd,
+    ),
     sbmrgFrqDisplay: toFrequencyDisplay(item.sbmrgFrqExpln),
   }));
 
 const resolveNodeName = (node: any) =>
-  String(node?.text ?? node?.data?.lyrNm ?? node?.data?.name ?? node?.lyrNm ?? node?.name ?? "").trim();
+  String(
+    node?.text ??
+      node?.data?.lyrNm ??
+      node?.data?.name ??
+      node?.lyrNm ??
+      node?.name ??
+      "",
+  ).trim();
 
 /** 빈도·침수심 자식 노드가 아니라 도시침수지도 루트만 목록보기 대상으로 판별한다. */
 export const isFloodDngrMapRootNode = (node: any) =>
-  resolveNodeName(node).replace(/\s/g, "") === FLOOD_DNGR_MAP_LAYER_NAME.replace(/\s/g, "");
+  resolveNodeName(node).replace(/\s/g, "") ===
+  FLOOD_DNGR_MAP_LAYER_NAME.replace(/\s/g, "");
diff --git a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx
index 591077005..2591591c6 100644
--- a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx
@@ -25,9 +25,27 @@ type MngInstOption = {
 const EMPTY_SELECT_OPTION = { value: "", label: "선택" };
 
 const PIPE_BASIC_INFO_FIELDS = [
-  { id: "mngInstCd", sourceId: "mng_inst_cd", title: "관리기관", type: "select", required: true },
-  { id: "fcltMngNo", sourceId: "fclt_mng_no", title: "시설관리번호", type: "input", required: true },
-  { id: "instMngNo", sourceId: "inst_mng_no", title: "기관관리번호", type: "input", required: true },
+  {
+    id: "mngInstCd",
+    sourceId: "mng_inst_cd",
+    title: "관리기관",
+    type: "select",
+    required: true,
+  },
+  {
+    id: "fcltMngNo",
+    sourceId: "fclt_mng_no",
+    title: "시설관리번호",
+    type: "input",
+    required: true,
+  },
+  {
+    id: "instMngNo",
+    sourceId: "inst_mng_no",
+    title: "기관관리번호",
+    type: "input",
+    required: true,
+  },
   { id: "instlYmd", sourceId: "instl_ymd", title: "설치일자", type: "date" },
   { id: "mapshtNo", sourceId: "mapsht_no", title: "도엽번호", type: "input" },
   { id: "pdmtVl", sourceId: "pdmt_vl", title: "관경(mm)", type: "input" },
@@ -40,7 +58,10 @@ const PIPE_BASIC_INFO_FIELDS = [
     required: true,
     options: [
       EMPTY_SELECT_OPTION,
-      ...MS_SWAGE_PPL_USE_CODES.map((item) => ({ value: item.val.trim(), label: item.text })),
+      ...MS_SWAGE_PPL_USE_CODES.map((item) => ({
+        value: item.val.trim(),
+        label: item.text,
+      })),
     ],
   },
   {
@@ -50,33 +71,95 @@ const PIPE_BASIC_INFO_FIELDS = [
     type: "select",
     options: [
       EMPTY_SELECT_OPTION,
-      ...MS_SWAGE_PPL_CODES.map((item) => ({ value: item.val.trim(), label: item.text })),
+      ...MS_SWAGE_PPL_CODES.map((item) => ({
+        value: item.val.trim(),
+        label: item.text,
+      })),
     ],
   },
-  { id: "avgGrdn", sourceId: "avg_grdn", title: "평균구배(m/m)", type: "input" },
-  { id: "drtwMltvArea", sourceId: "drtw_mltv_area", title: "오수배수면적(m²)", type: "input" },
-  { id: "exclnMltvArea", sourceId: "excln_mltv_area", title: "우수배수면적(m²)", type: "input" },
-  { id: "tmptDpth", sourceId: "tmpt_dpth", title: "시점깊이(m)", type: "input" },
-  { id: "tmptMhlMngNo", sourceId: "tmpt_mhl_mng_no", title: "시점맨홀관리번호", type: "input" },
-  { id: "scendDpth", sourceId: "scend_dpth", title: "종점깊이(m)", type: "input" },
-  { id: "scendMhlMngNo", sourceId: "scend_mhl_mng_no", title: "종점맨홀관리번호", type: "input" },
+  {
+    id: "avgGrdn",
+    sourceId: "avg_grdn",
+    title: "평균구배(m/m)",
+    type: "input",
+  },
+  {
+    id: "drtwMltvArea",
+    sourceId: "drtw_mltv_area",
+    title: "오수배수면적(m²)",
+    type: "input",
+  },
+  {
+    id: "exclnMltvArea",
+    sourceId: "excln_mltv_area",
+    title: "우수배수면적(m²)",
+    type: "input",
+  },
+  {
+    id: "tmptDpth",
+    sourceId: "tmpt_dpth",
+    title: "시점깊이(m)",
+    type: "input",
+  },
+  {
+    id: "tmptMhlMngNo",
+    sourceId: "tmpt_mhl_mng_no",
+    title: "시점맨홀관리번호",
+    type: "input",
+  },
+  {
+    id: "scendDpth",
+    sourceId: "scend_dpth",
+    title: "종점깊이(m)",
+    type: "input",
+  },
+  {
+    id: "scendMhlMngNo",
+    sourceId: "scend_mhl_mng_no",
+    title: "종점맨홀관리번호",
+    type: "input",
+  },
   { id: "trflnCnt", sourceId: "trfln_cnt", title: "차선수", type: "input" },
   { id: "vrtcLen", sourceId: "vrtc_len", title: "세로길이(m)", type: "input" },
   { id: "wdthLen", sourceId: "wdth_len", title: "가로길이(m)", type: "input" },
 ];
 
 const PIPE_INPUT_INFO_FIELDS = [
-  { id: "instlMbdyCd", title: "설치주체", type: "select", options: [EMPTY_SELECT_OPTION, "BTL", "재정사업"] },
+  {
+    id: "instlMbdyCd",
+    title: "설치주체",
+    type: "select",
+    options: [EMPTY_SELECT_OPTION, "BTL", "재정사업"],
+  },
   { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
   { id: "mltvZoneNm", title: "배수구역", type: "input" },
   { id: "mltvDtdvNm", title: "배수분구", type: "input" },
-  { id: "lineCd", title: "지선/간선", type: "select", options: [EMPTY_SELECT_OPTION, "지선", "간선"] },
-  { id: "floCd", title: "흐름방식", type: "select", options: [EMPTY_SELECT_OPTION, "자연유하", "압송"] },
-  { id: "layCd", title: "매설위치", type: "select", options: [EMPTY_SELECT_OPTION, "도로", "하상"] },
+  {
+    id: "lineCd",
+    title: "지선/간선",
+    type: "select",
+    options: [EMPTY_SELECT_OPTION, "지선", "간선"],
+  },
+  {
+    id: "floCd",
+    title: "흐름방식",
+    type: "select",
+    options: [EMPTY_SELECT_OPTION, "자연유하", "압송"],
+  },
+  {
+    id: "layCd",
+    title: "매설위치",
+    type: "select",
+    options: [EMPTY_SELECT_OPTION, "도로", "하상"],
+  },
 ];
 
-const PIPE_VISIBLE_BASIC_FIELD_IDS = PIPE_BASIC_INFO_FIELDS.map((field) => field.id);
-const PIPE_VISIBLE_INPUT_FIELD_IDS = PIPE_INPUT_INFO_FIELDS.map((field) => field.id);
+const PIPE_VISIBLE_BASIC_FIELD_IDS = PIPE_BASIC_INFO_FIELDS.map(
+  (field) => field.id,
+);
+const PIPE_VISIBLE_INPUT_FIELD_IDS = PIPE_INPUT_INFO_FIELDS.map(
+  (field) => field.id,
+);
 
 const toEditableText = (value: unknown) => {
   const text = String(value ?? "").trim();
@@ -84,7 +167,10 @@ const toEditableText = (value: unknown) => {
 };
 
 const isInvalidPipeLookupKey = (value: string) =>
-  !value || value === "-" || /^NEW-/i.test(value) || /^(null|undefined)$/i.test(value);
+  !value ||
+  value === "-" ||
+  /^NEW-/i.test(value) ||
+  /^(null|undefined)$/i.test(value);
 
 const toDateInputValue = (value: unknown) => {
   const text = toEditableText(value).replaceAll(".", "").replaceAll("-", "");
@@ -92,10 +178,13 @@ const toDateInputValue = (value: unknown) => {
   return `${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}`;
 };
 
-const toDbYmdValue = (value: unknown) => toEditableText(value).replaceAll("-", "");
+const toDbYmdValue = (value: unknown) =>
+  toEditableText(value).replaceAll("-", "");
 
-const getObjectValue = (values: Record<string, any>, field: { id: string; sourceId?: string }) =>
-  values[field.id] ?? (field.sourceId ? values[field.sourceId] : undefined);
+const getObjectValue = (
+  values: Record<string, any>,
+  field: { id: string; sourceId?: string },
+) => values[field.id] ?? (field.sourceId ? values[field.sourceId] : undefined);
 
 const pickFields = (values: Record<string, any>, fieldIds: string[]) =>
   fieldIds.reduce<Record<string, any>>((acc, fieldId) => {
@@ -116,13 +205,17 @@ const normalizeBasicFormValues = (values: Record<string, any>) => {
 const buildBaseFeatureValues = (featureData: any) => {
   const resolveUsageCode = (value: unknown) => {
     const raw = String(value ?? "").trim();
-    const matched = MS_SWAGE_PPL_USE_CODES.find((item) => item.val === raw || item.text === raw);
+    const matched = MS_SWAGE_PPL_USE_CODES.find(
+      (item) => item.val === raw || item.text === raw,
+    );
     return matched?.val.trim() ?? raw;
   };
 
   const resolveMaterialCode = (value: unknown) => {
     const raw = String(value ?? "").trim();
-    const matched = MS_SWAGE_PPL_CODES.find((item) => item.val === raw || item.text === raw);
+    const matched = MS_SWAGE_PPL_CODES.find(
+      (item) => item.val === raw || item.text === raw,
+    );
     return matched?.val.trim() ?? raw;
   };
 
@@ -149,7 +242,11 @@ const buildBaseFeatureValues = (featureData: any) => {
 const getPipeUsageLabel = (value: unknown) => {
   const raw = String(value ?? "").trim();
   if (!raw) return "";
-  return MS_SWAGE_PPL_USE_CODES.find((item) => item.val.trim() === raw || item.text === raw)?.text ?? raw;
+  return (
+    MS_SWAGE_PPL_USE_CODES.find(
+      (item) => item.val.trim() === raw || item.text === raw,
+    )?.text ?? raw
+  );
 };
 
 const buildInitialInputDraft = (change: GisEditChange) => ({
@@ -169,11 +266,16 @@ export default function GisEditPipeSessionPopup({
   onSave,
 }: Props) {
   const isNewPipe = change.editType === "ADD";
-  const baseFeatureValues = useMemo(() => buildBaseFeatureValues(featureData), [featureData]);
-  const [basicInfoTableData, setBasicInfoTableData] = useState<Record<string, any>>({});
-  const [inputInfoTableData, setInputInfoTableData] = useState<Record<string, any>>(
-    buildInitialInputDraft(change),
+  const baseFeatureValues = useMemo(
+    () => buildBaseFeatureValues(featureData),
+    [featureData],
   );
+  const [basicInfoTableData, setBasicInfoTableData] = useState<
+    Record<string, any>
+  >({});
+  const [inputInfoTableData, setInputInfoTableData] = useState<
+    Record<string, any>
+  >(buildInitialInputDraft(change));
   const [mngInstOptions, setMngInstOptions] = useState<MngInstOption[]>([]);
 
   useEffect(() => {
@@ -195,24 +297,21 @@ export default function GisEditPipeSessionPopup({
     };
   }, []);
 
-  const mngInstSelectOptions = useMemo(
-    () => {
-      const sortedOptions = [...mngInstOptions].sort((a, b) =>
-        String(a.lwrInstNm ?? a.mngInstCd ?? "").localeCompare(
-          String(b.lwrInstNm ?? b.mngInstCd ?? ""),
-          "ko",
-        ),
-      );
-      return [
-        EMPTY_SELECT_OPTION,
-        ...sortedOptions.map((option) => ({
-          value: String(option.mngInstCd ?? "").trim(),
-          label: option.lwrInstNm || String(option.mngInstCd ?? "").trim(),
-        })),
-      ];
-    },
-    [mngInstOptions],
-  );
+  const mngInstSelectOptions = useMemo(() => {
+    const sortedOptions = [...mngInstOptions].sort((a, b) =>
+      String(a.lwrInstNm ?? a.mngInstCd ?? "").localeCompare(
+        String(b.lwrInstNm ?? b.mngInstCd ?? ""),
+        "ko",
+      ),
+    );
+    return [
+      EMPTY_SELECT_OPTION,
+      ...sortedOptions.map((option) => ({
+        value: String(option.mngInstCd ?? "").trim(),
+        label: option.lwrInstNm || String(option.mngInstCd ?? "").trim(),
+      })),
+    ];
+  }, [mngInstOptions]);
 
   const basicInfoFields = useMemo(
     () =>
@@ -239,14 +338,17 @@ export default function GisEditPipeSessionPopup({
 
     const fcltMngNo = String(change.featureRef?.fcltMngNo ?? "").trim();
     const mngInstCd = String(change.featureRef?.mngInstCd ?? "").trim();
-    if (isInvalidPipeLookupKey(fcltMngNo) || isInvalidPipeLookupKey(mngInstCd)) return;
+    if (isInvalidPipeLookupKey(fcltMngNo) || isInvalidPipeLookupKey(mngInstCd))
+      return;
 
     let isMounted = true;
     const fetchPipeInputInfo = async () => {
       try {
         const safeFcltMngNo = encodeURIComponent(fcltMngNo);
         const safeMngInstCd = encodeURIComponent(mngInstCd);
-        const result = await getData(`v1/fcltppl/${safeFcltMngNo}/${safeMngInstCd}`);
+        const result = await getData(
+          `v1/fcltppl/${safeFcltMngNo}/${safeMngInstCd}`,
+        );
         if (!isMounted || !result) return;
 
         setInputInfoTableData((previous) => ({
@@ -263,14 +365,25 @@ export default function GisEditPipeSessionPopup({
     return () => {
       isMounted = false;
     };
-  }, [change.changeId, change.featureRef?.fcltMngNo, change.featureRef?.mngInstCd, isNewPipe]);
+  }, [
+    change.changeId,
+    change.featureRef?.fcltMngNo,
+    change.featureRef?.mngInstCd,
+    isNewPipe,
+  ]);
 
   const buildMergedDraft = (
     nextBasicInfoTableData: Record<string, any>,
     nextInputInfoTableData: Record<string, any>,
   ): GisEditPipeBasicInfo => {
-    const basicDraft = pickFields(nextBasicInfoTableData, PIPE_VISIBLE_BASIC_FIELD_IDS);
-    const inputDraft = pickFields(nextInputInfoTableData, PIPE_VISIBLE_INPUT_FIELD_IDS);
+    const basicDraft = pickFields(
+      nextBasicInfoTableData,
+      PIPE_VISIBLE_BASIC_FIELD_IDS,
+    );
+    const inputDraft = pickFields(
+      nextInputInfoTableData,
+      PIPE_VISIBLE_INPUT_FIELD_IDS,
+    );
     if (basicDraft.instlYmd) {
       basicDraft.instlYmd = toDbYmdValue(basicDraft.instlYmd);
     }
@@ -290,29 +403,43 @@ export default function GisEditPipeSessionPopup({
     onSave(change.changeId, buildMergedDraft(basicInfoTableData, nextFormData));
   };
 
-  const basicInfoTableRows = useMemo(() => [basicInfoTableData], [basicInfoTableData]);
-  const inputInfoTableRows = useMemo(() => [inputInfoTableData], [inputInfoTableData]);
-  const displayManagementNo = toEditableText(change.featureRef?.fcltMngNo ?? change.objectId ?? "");
+  const basicInfoTableRows = useMemo(
+    () => [basicInfoTableData],
+    [basicInfoTableData],
+  );
+  const inputInfoTableRows = useMemo(
+    () => [inputInfoTableData],
+    [inputInfoTableData],
+  );
+  const displayManagementNo = toEditableText(
+    change.featureRef?.fcltMngNo ?? change.objectId ?? "",
+  );
 
   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]">
-      <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">
+    <div
+      id="popup"
+      className="absolute right-0 top-0 z-[50] flex h-[calc(100vh-5rem)] w-[350px] flex-col overflow-hidden border-r border-border bg-background transition-all duration-300"
+    >
+      <div className="card-header relative flex items-center justify-between bg-primary p-4">
+        <div className="flex flex-1 items-center space-x-4">
+          <h3 className="whitespace-nowrap text-2xl font-medium text-primary-foreground">
             하수관로
-            {basicInfoTableData?.usgCd ? `(${getPipeUsageLabel(basicInfoTableData.usgCd)})` : ""}
-            {" "}정보 <br />관리번호 : {displayManagementNo || "신규"}
+            {basicInfoTableData?.usgCd
+              ? `(${getPipeUsageLabel(basicInfoTableData.usgCd)})`
+              : ""}{" "}
+            정보 <br />
+            관리번호 : {displayManagementNo || "신규"}
           </h3>
         </div>
         <Button
           onClick={onClose}
-          className="flex items-center space-x-4 text-white hover:text-gray-300 focus:outline-none"
+          className="text-primary-foreground/80 flex items-center space-x-4 hover:text-primary-foreground focus:outline-none"
           size="xs"
         >
           ✕
         </Button>
       </div>
-      <div className="overflow-y-auto overflow-x-hidden flex-1">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
         <VerticalTable
           headName="기본정보"
           tableData={basicInfoTableRows}
diff --git a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx
index 4978ce8bd..54a7c1b74 100644
--- a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Button } from "@common/components";
+
 import type { GisEditSessionSnapshot, GisEditTool } from "./gisEditTypes";
 
 type Props = GisEditSessionSnapshot & {
@@ -20,20 +22,23 @@ const TOOL_LABELS: Record<GisEditTool, string> = {
 };
 
 const buildChangeItemClassName = (isFocused: boolean) =>
-  `block w-full rounded border px-2 py-2 text-left text-[12px] transition ${
+  `block w-full rounded-md border px-3 py-2.5 text-left text-[1.1rem] transition ${
     isFocused
-      ? "border-[#5a9bd5] bg-[#eef7ff] shadow-[inset_0_0_0_1px_rgba(90,155,213,0.2)]"
-      : "border-[#d8dee8] bg-[#fbfcfe] hover:border-[#bfd2e5] hover:bg-white"
+      ? "border-primary bg-primary-transparent shadow-[inset_0_0_0_1px_var(--primary-transparent)]"
+      : "border-border bg-background hover:border-primary hover:bg-background"
   }`;
 
 const getChangeLabel = (change: GisEditSessionSnapshot["changes"][number]) =>
   change.attributeOnly ? "상세정보수정" : TOOL_LABELS[change.editType];
 
-const getChangeSummary = (change: GisEditSessionSnapshot["changes"][number]) => {
+const getChangeSummary = (
+  change: GisEditSessionSnapshot["changes"][number],
+) => {
   if (change.attributeOnly) return "변경한 상세정보를 확인하세요.";
   if (change.editType === "ADD") return "추가한 객체 위치를 확인하세요.";
   if (change.editType === "MOVE") return "객체를 드래그해 위치를 조정하세요.";
-  if (change.editType === "VERTEX_EDIT") return "점을 옮기거나 선분을 끌어 추가하세요.";
+  if (change.editType === "VERTEX_EDIT")
+    return "점을 옮기거나 선분을 끌어 추가하세요.";
   return "삭제할 객체가 맞는지 확인하세요.";
 };
 
@@ -43,33 +48,41 @@ type ChangeListProps = {
   onFocusChange: (changeId: string) => void;
 };
 
-const ChangeList = ({ changes, focusedChangeId, onFocusChange }: ChangeListProps) => (
+const ChangeList = ({
+  changes,
+  focusedChangeId,
+  onFocusChange,
+}: ChangeListProps) => (
   <>
     {changes.map((change, index) => (
       <button
         key={change.changeId}
         type="button"
-        className={buildChangeItemClassName(focusedChangeId === change.changeId)}
+        className={buildChangeItemClassName(
+          focusedChangeId === change.changeId,
+        )}
         onClick={() => onFocusChange(change.changeId)}
       >
         <div className="flex items-center gap-1">
-          <div className="shrink-0 whitespace-nowrap text-[11px] font-semibold leading-4 text-[#173f67]">
+          <div className="shrink-0 whitespace-nowrap text-[1.1rem] font-semibold leading-4 text-label">
             {index + 1}. {getChangeLabel(change)} / {change.objectLabel}
           </div>
           <div className="ml-auto flex shrink-0 items-center gap-1">
             {change.basicInfoSavedAt && focusedChangeId !== change.changeId ? (
-              <span className="whitespace-nowrap rounded-full border border-[#a9d9bd] bg-white px-1.5 py-0.5 text-[9px] font-semibold text-[#16834f]">
+              <span className="whitespace-nowrap rounded-full border border-emerald-200 bg-background px-1.5 py-0.5 text-[0.9rem] font-semibold text-emerald-700">
                 정보저장
               </span>
             ) : null}
             {focusedChangeId === change.changeId ? (
-              <span className="whitespace-nowrap rounded-full border border-[#b8d3ef] bg-white px-1.5 py-0.5 text-[9px] font-semibold text-[#176db8]">
-                지도 미리보기 선택
+              <span className="whitespace-nowrap rounded-full border border-primary bg-background px-1.5 py-0.5 text-[0.9rem] font-semibold text-primary">
+                선택됨
               </span>
             ) : null}
           </div>
         </div>
-        <div className="mt-1 truncate text-[11px] text-[#526173]">{getChangeSummary(change)}</div>
+        <div className="mt-1 truncate text-[1rem] text-muted-foreground">
+          {getChangeSummary(change)}
+        </div>
       </button>
     ))}
   </>
@@ -94,63 +107,81 @@ export default function GisEditSessionPanel({
 
   return (
     <div
-      className={`flex min-h-0 flex-col overflow-hidden rounded-lg border border-[#d8dee8] bg-[rgba(255,255,255,0.98)] text-sm text-[#304255] shadow-[0_10px_26px_rgba(23,42,70,0.14)] ${isCompactInline ? "h-[58px] p-2" : "p-4"} ${className}`.trim()}
+      className={`flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-[rgba(255,255,255,0.98)] text-label shadow-[0_10px_26px_rgba(23,42,70,0.16)] ${isCompactInline ? "min-h-[68px]" : "p-3"} ${className}`.trim()}
     >
-      <div className={`flex shrink-0 justify-between gap-3 ${isCompactInline ? "mb-0 items-center" : "mb-3 items-start"}`}>
+      <div
+        className={`flex shrink-0 justify-between gap-2 ${isCompactInline ? "items-center bg-container px-3 py-2.5" : "mb-3 items-start rounded-md bg-container px-3 py-2.5"}`}
+      >
         <div className="min-w-0">
           {variant === "inline" ? (
-            <div className="mb-1 text-[14px] font-bold text-[#173f67]">편집 세션</div>
+            <div className="mb-1 flex items-center gap-2 text-[1.3rem] font-semibold text-label">
+              <span>편집 세션</span>
+              <span className="rounded-full bg-primary px-2 py-0.5 text-[0.9rem] font-semibold text-primary-foreground">
+                {changes.length}건
+              </span>
+            </div>
           ) : null}
-          <div className="truncate text-[12px] text-[#667485]">
-            레이어: {selectedLayerName || "미선택"} / 모드: {isEditMode ? (activeTool ? TOOL_LABELS[activeTool] : "대기") : "편집 모드 종료"}
+          <div className="truncate text-[1.05rem] text-muted-foreground">
+            {selectedLayerName || "레이어 미선택"} ·{" "}
+            {isEditMode
+              ? activeTool
+                ? TOOL_LABELS[activeTool]
+                : "대기"
+              : "편집 모드 종료"}
           </div>
         </div>
         {onOpenPopup ? (
-          <button
+          <Button
             type="button"
-            className="flex shrink-0 items-center gap-1 rounded border border-[#b8d3ef] bg-white px-2.5 py-1.5 text-[11px] font-semibold text-[#176db8] transition hover:bg-[#eef7ff]"
+            color="white"
             onClick={onOpenPopup}
             title="편집 세션을 기존 윈도우 팝업으로 열기"
           >
-            <span aria-hidden="true" className="text-[12px] leading-none">↗</span>
+            <span aria-hidden="true" className="text-[1.1rem] leading-none">
+              ↗
+            </span>
             <span>팝업</span>
-          </button>
+          </Button>
         ) : null}
       </div>
 
-      <div className={`${isCompactInline ? "hidden" : "mb-3 flex"} shrink-0 flex-wrap items-center gap-2`}>
-        <button
+      <div
+        className={`${isCompactInline ? "hidden" : "mb-3 flex"} shrink-0 flex-wrap items-center gap-2 rounded-md border border-border bg-background p-2`}
+      >
+        <Button
           type="button"
-          className="rounded border border-[#d8dee8] bg-white px-3 py-1.5 text-[12px] font-semibold text-[#304255] transition hover:bg-[#f8fafc] disabled:cursor-not-allowed disabled:text-[#9aa8b7]"
+          color="white"
           disabled={!focusedChangeId}
           onClick={onRemoveFocusedChange}
         >
-          취소
-        </button>
-        <button
+          선택 취소
+        </Button>
+        <Button
           type="button"
-          className="rounded border border-[#d8dee8] bg-white px-3 py-1.5 text-[12px] font-semibold text-[#304255] transition hover:bg-[#f8fafc] disabled:cursor-not-allowed disabled:text-[#9aa8b7]"
+          color="white"
           disabled={!canUndo}
           onClick={onRemoveLastChange}
         >
-          뒤로가기
-        </button>
-        <button
+          최근 취소
+        </Button>
+        <Button
           type="button"
-          className="rounded border border-[#f3d0d0] bg-white px-3 py-1.5 text-[12px] font-semibold text-[#b42318] transition hover:bg-[#fff5f5] disabled:cursor-not-allowed disabled:text-[#d0a5a5]"
+          color="white"
           disabled={!canUndo}
           onClick={onClearChanges}
         >
-          초기화
-        </button>
-        <div className="ml-auto rounded-full border border-[#d8dee8] bg-white px-2.5 py-1 text-[11px] font-semibold text-[#526173]">
+          전체 초기화
+        </Button>
+        <div className="ml-auto rounded-full border border-border bg-background px-2.5 py-1 text-[1rem] font-semibold text-muted-foreground">
           총 {changes.length}건
         </div>
       </div>
 
-      <div className={`${isCompactInline ? "hidden" : "min-h-0 flex-1"} overflow-hidden`}>
+      <div
+        className={`${isCompactInline ? "hidden" : "min-h-0 flex-1"} overflow-hidden`}
+      >
         {changes.length === 0 ? (
-          <div className="rounded border border-dashed border-[#d8dee8] bg-[#fbfcfe] px-3 py-4 text-[12px] text-[#667485]">
+          <div className="rounded-md border border-dashed border-border bg-background px-3 py-5 text-center text-[1.1rem] text-muted-foreground">
             저장할 편집 변경분이 없습니다.
           </div>
         ) : (
diff --git a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditToolbar.tsx b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditToolbar.tsx
index 593e8eb02..003b01d5c 100644
--- a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditToolbar.tsx
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditToolbar.tsx
@@ -1,13 +1,6 @@
 "use client";
 
-import {
-  Check,
-  Move,
-  PenTool,
-  Plus,
-  Trash2,
-  X,
-} from "lucide-react";
+import { Check, Move, PenTool, Plus, Trash2, X } from "lucide-react";
 import { Button } from "@common/components/ui";
 
 import type { GisEditTool } from "./gisEditTypes";
@@ -45,7 +38,7 @@ export default function GisEditToolbar({
   canUseTools,
   canSave,
   isSaving = false,
-  statusMessage: _statusMessage,
+  statusMessage,
   allowedTools = [],
   onClose,
   onToggleSnap,
@@ -55,26 +48,41 @@ export default function GisEditToolbar({
   if (!isEditMode) return null;
 
   return (
-    <div data-testid="gis-edit-toolbar" className="absolute bottom-12 left-1/2 z-[60] flex w-[min(960px,calc(100%-2rem))] -translate-x-1/2 flex-col">
-      <div className="card card-border flex !bg-white py-[1px]">
-        <div className="flex w-full items-center gap-2 overflow-hidden">
-          <div className="flex w-[120px] shrink-0 items-center justify-start">
-            <span className="whitespace-nowrap text-[1.2rem] font-bold leading-5 text-[#123b62]">하수관로 편집</span>
+    <div
+      data-testid="gis-edit-toolbar"
+      className="absolute bottom-4 left-1/2 z-[60] flex w-[min(980px,calc(100%-2rem))] -translate-x-1/2 flex-col"
+    >
+      <div className="card card-border !m-0 flex !bg-background !p-[0.8rem] shadow-[0_8px_24px_rgba(23,42,70,0.18)]">
+        <div className="flex w-full items-center gap-3 overflow-hidden">
+          <div className="flex w-[168px] shrink-0 flex-col justify-center border-r border-border pr-3">
+            <span className="whitespace-nowrap text-[1.3rem] font-semibold leading-5 text-label">
+              하수관로 편집
+            </span>
+            <span
+              className="mt-0.5 truncate text-[1.05rem] text-muted-foreground"
+              title={statusMessage}
+            >
+              {statusMessage || "편집 도구를 선택하세요."}
+            </span>
           </div>
-          <div className="flex min-w-0 flex-1 justify-center">
-            <div className="flex items-center gap-1">
+          <div className="flex min-w-0 flex-1 items-center justify-center gap-3">
+            <div className="flex items-center gap-1 rounded-md bg-container p-1">
               {TOOL_BUTTONS.map(({ tool, label, icon: Icon }) => {
                 const isActive = activeTool === tool;
                 const isToolEnabled =
                   canUseTools && allowedTools.includes(tool);
                 if (tool === "VERTEX_EDIT") {
                   return (
-                    <div key="vertex-edit-with-snap" className="flex shrink-0 items-center">
+                    <div
+                      key="vertex-edit-with-snap"
+                      className="flex shrink-0 items-center"
+                    >
                       <Button
                         type="button"
-                        color={activeTool === "VERTEX_EDIT" ? "primary" : "white"}
-                        size="sm"
-                        className="mx-0.5 mt-1 min-w-[98px] px-2"
+                        color={
+                          activeTool === "VERTEX_EDIT" ? "primary" : "white"
+                        }
+                        className="min-w-[98px] px-2"
                         disabled={!isToolEnabled}
                         onClick={() => onSelectTool("VERTEX_EDIT")}
                       >
@@ -83,20 +91,6 @@ export default function GisEditToolbar({
                           <span>{label}</span>
                         </span>
                       </Button>
-                      <Button
-                        type="button"
-                        color={isSnapEnabled ? "primary" : "white"}
-                        size="sm"
-                        className="mx-0.5 mt-1 min-w-[82px] px-2"
-                        disabled={!canUseTools}
-                        onClick={onToggleSnap}
-                        title="이동과 꼭지점편집에 스냅핑 적용"
-                      >
-                        <span className="flex items-center justify-center gap-2 whitespace-nowrap">
-                          <Check className="h-4 w-4" />
-                          <span>스냅핑</span>
-                        </span>
-                      </Button>
                     </div>
                   );
                 }
@@ -105,8 +99,7 @@ export default function GisEditToolbar({
                     key={tool}
                     type="button"
                     color={isActive ? "primary" : "white"}
-                    size="sm"
-                    className="mx-0.5 mt-1 min-w-[74px] shrink-0 px-2"
+                    className="min-w-[74px] shrink-0 px-2"
                     disabled={!isToolEnabled}
                     onClick={() => onSelectTool(tool)}
                   >
@@ -118,14 +111,27 @@ export default function GisEditToolbar({
                 );
               })}
             </div>
+            <div className="h-8 w-px shrink-0 bg-border" />
+            <Button
+              type="button"
+              color={isSnapEnabled ? "primary" : "white"}
+              className="min-w-[82px] shrink-0 px-2"
+              disabled={!canUseTools}
+              onClick={onToggleSnap}
+              title="이동과 꼭지점편집에 스냅핑 적용"
+            >
+              <span className="flex items-center justify-center gap-2 whitespace-nowrap">
+                <Check className="h-4 w-4" />
+                <span>스냅핑</span>
+              </span>
+            </Button>
           </div>
 
-          <div className="flex w-[132px] shrink-0 items-center justify-end gap-1">
+          <div className="flex w-[140px] shrink-0 items-center justify-end gap-2 border-l border-border pl-3">
             <Button
               type="button"
               color="primary"
-              size="sm"
-              className="mt-1 min-w-[58px] shrink-0 px-2"
+              className="min-w-[64px] shrink-0 px-2"
               disabled={!canSave || isSaving}
               onClick={onSave}
             >
@@ -135,14 +141,13 @@ export default function GisEditToolbar({
             <Button
               type="button"
               color="white"
-              size="sm"
-              className="mt-1 min-w-[58px] shrink-0 px-2"
+              className="min-w-[64px] shrink-0 px-2"
               onClick={onClose}
-              title="하수관로 편집 닫기"
+              title="하수관로 편집 취소"
             >
               <span className="flex items-center justify-center gap-2 whitespace-nowrap">
                 <X className="h-4 w-4" />
-                <span>닫기</span>
+                <span>취소</span>
               </span>
             </Button>
           </div>
diff --git a/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
index 68c4de1e2..96c4ff666 100644
--- a/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
@@ -2,7 +2,10 @@
 
 import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import UiPageNations from "@common/business_components/ui/table/uiPageNations";
+import {
+  StandardPopupLayout,
+  type UiHeadProps,
+} from "@common/business_components";
 import {
   Button,
   Input,
@@ -21,9 +24,13 @@ import {
   postRawJson,
 } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import { useAlertStore } from "@/shared/lib";
 import { useUserStore } from "@/shared/lib/use-user-store";
 import GisUploadPreviewMap from "./GisUploadPreviewMap";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
 type UploadFacilityType = {
   facilityTypeCode: string;
@@ -55,6 +62,24 @@ type UploadHistoryItem = {
   message?: string | null;
 };
 
+type UploadHistoryRow = UploadHistoryItem &
+  Record<string, unknown> & {
+    rowNo: number;
+    managementLabel: string;
+    changeSummary: string;
+    registeredAtLabel: string;
+    registeredByLabel: string;
+  };
+
+const GIS_UPLOAD_HISTORY_HEADLIST: UiHeadProps[] = [
+  { id: "rowNo", title: "순번", widthPercent: 7 },
+  { id: "managementLabel", title: "관리기관", widthPercent: 13 },
+  { id: "fileName", title: "파일명", align: "left", widthPercent: 34 },
+  { id: "changeSummary", title: "변경/오류", widthPercent: 13 },
+  { id: "registeredAtLabel", title: "등록일자", widthPercent: 22 },
+  { id: "registeredByLabel", title: "등록자", widthPercent: 11 },
+];
+
 type GisUploadResponse = {
   uploadId: string;
   status: "COMPLETED" | "VALIDATION_FAILED" | string;
@@ -101,6 +126,38 @@ const DEFAULT_FACILITY: UploadFacilityType = {
   requiredDownloadFormat: "GPKG",
 };
 
+/** 백엔드 검증 코드를 사용자가 이해할 수 있는 한글 오류내용으로 변환한다. */
+const GIS_VALIDATION_ERROR_MESSAGES: Record<string, string> = {
+  GIS_UPLOAD_MNG_INST_MISMATCH:
+    "선택한 관리기관과 다른 관로가 포함되어 있습니다.",
+  GIS_UPLOAD_FID_DUPLICATED: "업로드 파일에 중복된 시설물 식별번호가 있습니다.",
+  GIS_UPLOAD_DELETE_LIMIT_EXCEEDED:
+    "삭제 대상 건수가 허용 범위를 초과했습니다.",
+};
+
+/** 형상 오류는 같은 오류코드 안에서도 누락과 형식 오류를 구분해 안내한다. */
+const getLocalizedValidationErrorMessage = (error: ValidationErrorItem) => {
+  const errorCode = String(error.errorCode ?? "").trim();
+  const errorMessage = String(error.errorMessage ?? "").trim();
+
+  if (errorCode === "GIS_UPLOAD_INVALID_GEOMETRY") {
+    return errorMessage.toLowerCase().includes("없는 feature")
+      ? "공간정보가 없는 시설물입니다."
+      : "하수관로는 선 또는 다중선 형식의 공간정보만 업로드할 수 있습니다.";
+  }
+
+  const localizedMessage = GIS_VALIDATION_ERROR_MESSAGES[errorCode];
+  if (localizedMessage) {
+    const count = errorMessage.match(/count\s*=\s*(\d+)/i)?.[1];
+    return count ? `${localizedMessage} (대상: ${count}건)` : localizedMessage;
+  }
+
+  // 서버가 완전한 한글 문구를 제공한 신규 오류만 보존하고 영문이 섞인 문구는 일반 안내로 대체한다.
+  return /[가-힣]/.test(errorMessage) && !/[A-Za-z]/.test(errorMessage)
+    ? errorMessage
+    : "업로드 파일 검증 중 오류가 발생했습니다.";
+};
+
 const getFileExtension = (fileName: string) => {
   const lastDotIndex = fileName.lastIndexOf(".");
   if (lastDotIndex < 0) return "";
@@ -114,7 +171,10 @@ const formatDateTime = (value?: string | null) => {
 
 const toScopeKey = (mngInstCd: string) => mngInstCd || "__UNSELECTED__";
 
-const buildManagementLabel = (mngInstCd?: string | null, mngInstNm?: string | null) => {
+const buildManagementLabel = (
+  mngInstCd?: string | null,
+  mngInstNm?: string | null,
+) => {
   if (!mngInstCd) return "-";
   return mngInstNm || mngInstCd;
 };
@@ -123,7 +183,9 @@ const buildManagementLabel = (mngInstCd?: string | null, mngInstNm?: string | nu
 const isDownloadNetworkError = (error: unknown) => {
   if (!(error instanceof TypeError)) return false;
   const message = error.message.toLowerCase();
-  return message.includes("failed to fetch") || message.includes("networkerror");
+  return (
+    message.includes("failed to fetch") || message.includes("networkerror")
+  );
 };
 
 // Retry only transport failures; HTTP validation and server errors must be shown immediately.
@@ -133,7 +195,9 @@ const downloadGeoPackage = async (url: string) => {
   } catch (error) {
     if (!isDownloadNetworkError(error)) throw error;
     console.warn("GIS 다운로드 연결이 중단되어 1회 재시도합니다.", error);
-    await new Promise((resolve) => window.setTimeout(resolve, DOWNLOAD_NETWORK_RETRY_DELAY_MS));
+    await new Promise((resolve) =>
+      window.setTimeout(resolve, DOWNLOAD_NETWORK_RETRY_DELAY_MS),
+    );
     return getBlobDataWithHeaders(url);
   }
 };
@@ -156,7 +220,9 @@ const waitForDownloadJob = async (jobId: string): Promise<DownloadJob> => {
     )) as DownloadJob;
     if (job?.status === "READY") return job;
     if (job?.status === "FAILED") {
-      throw new Error(job.message || "GeoPackage 다운로드 파일 생성에 실패했습니다.");
+      throw new Error(
+        job.message || "GeoPackage 다운로드 파일 생성에 실패했습니다.",
+      );
     }
     const retryAfter = Math.max(
       Number(job?.retryAfterMillis) || DOWNLOAD_JOB_POLL_INTERVAL_MS,
@@ -164,7 +230,9 @@ const waitForDownloadJob = async (jobId: string): Promise<DownloadJob> => {
     );
     await new Promise((resolve) => window.setTimeout(resolve, retryAfter));
   }
-  throw new Error("GeoPackage 파일 생성 대기 시간이 초과되었습니다. 다시 시도하세요.");
+  throw new Error(
+    "GeoPackage 파일 생성 대기 시간이 초과되었습니다. 다시 시도하세요.",
+  );
 };
 
 // Keep the object URL alive until Chrome has accepted the synthetic download click.
@@ -181,15 +249,21 @@ const saveBlob = (blob: Blob, fileName: string) => {
 
 const getErrorMessage = (error: unknown, fallback: string) => {
   const apiError = error as any;
-  return apiError?.response?.data?.message
-    ?? apiError?.response?.data?.data?.message
-    ?? apiError?.body?.message
-    ?? apiError?.message
-    ?? fallback;
+  return (
+    apiError?.response?.data?.message ??
+    apiError?.response?.data?.data?.message ??
+    apiError?.body?.message ??
+    apiError?.message ??
+    fallback
+  );
 };
 
 const postRefreshMessageToOpener = (response: GisUploadResponse) => {
-  if (!response.mapRefreshRequired || typeof window === "undefined" || !window.opener) {
+  if (
+    !response.mapRefreshRequired ||
+    typeof window === "undefined" ||
+    !window.opener
+  ) {
     return;
   }
 
@@ -197,7 +271,9 @@ const postRefreshMessageToOpener = (response: GisUploadResponse) => {
     {
       type: WINDOW_POPUP_MESSAGE_TYPE.GIS_UPLOAD_COMPLETED,
       payload: {
-        refreshLayerTypeNames: JSON.stringify(response.refreshLayerTypeNames ?? [LAYER_ID]),
+        refreshLayerTypeNames: JSON.stringify(
+          response.refreshLayerTypeNames ?? [LAYER_ID],
+        ),
       },
     },
     window.location.origin,
@@ -205,17 +281,25 @@ const postRefreshMessageToOpener = (response: GisUploadResponse) => {
 };
 
 export default function GisManagementPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   const userInfo = useUserStore((state) => state.userInfo);
   // 파일 input은 브라우저 보안 정책상 value 직접 제어가 제한돼 ref로 선택/초기화한다.
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
-  const [facility, setFacility] = useState<UploadFacilityType>(DEFAULT_FACILITY);
+  const [facility, setFacility] =
+    useState<UploadFacilityType>(DEFAULT_FACILITY);
   const [mngInstOptions, setMngInstOptions] = useState<MngInstOption[]>([]);
-  const [selectedMngInstCd, setSelectedMngInstCd] = useState(SELECT_MNG_INST_VALUE);
+  const [selectedMngInstCd, setSelectedMngInstCd] = useState(
+    SELECT_MNG_INST_VALUE,
+  );
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [downloadIdsByScope, setDownloadIdsByScope] = useState<Record<string, string>>({});
+  const [downloadIdsByScope, setDownloadIdsByScope] = useState<
+    Record<string, string>
+  >({});
   const [uploadHistory, setUploadHistory] = useState<UploadHistoryItem[]>([]);
-  const [validationErrors, setValidationErrors] = useState<ValidationErrorItem[]>([]);
+  const [validationErrors, setValidationErrors] = useState<
+    ValidationErrorItem[]
+  >([]);
   const [viewMode, setViewMode] = useState<ViewMode>("history");
   const [selectedUploadId, setSelectedUploadId] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
@@ -224,14 +308,38 @@ export default function GisManagementPopupPage() {
   const [notice, setNotice] = useState("");
 
   const selectedHistory = useMemo(
-    () => uploadHistory.find((history) => history.uploadId === selectedUploadId) ?? null,
+    () =>
+      uploadHistory.find((history) => history.uploadId === selectedUploadId) ??
+      null,
     [selectedUploadId, uploadHistory],
   );
+  const uploadHistoryRows = useMemo<UploadHistoryRow[]>(
+    () =>
+      uploadHistory.map((history) => ({
+        ...history,
+        rowNo: 0,
+        managementLabel: buildManagementLabel(
+          history.mngInstCd,
+          history.mngInstNm,
+        ),
+        changeSummary: `${(history.changedCount ?? 0).toLocaleString("ko-KR")} / ${(history.invalidCount ?? 0).toLocaleString("ko-KR")}`,
+        registeredAtLabel: formatDateTime(history.registeredAt),
+        registeredByLabel:
+          history.registeredByName ||
+          (history.registeredBy === userInfo?.userUnqId
+            ? userInfo.userName
+            : history.registeredBy) ||
+          "-",
+      })),
+    [uploadHistory, userInfo?.userName, userInfo?.userUnqId],
+  );
 
   const selectedScopeKey = toScopeKey(selectedMngInstCd);
   const selectedScopeLabel = useMemo(() => {
     if (!selectedMngInstCd) return "선택";
-    const matched = mngInstOptions.find((option) => option.mngInstCd === selectedMngInstCd);
+    const matched = mngInstOptions.find(
+      (option) => option.mngInstCd === selectedMngInstCd,
+    );
     return matched?.lwrInstNm || selectedMngInstCd;
   }, [mngInstOptions, selectedMngInstCd]);
 
@@ -265,7 +373,9 @@ export default function GisManagementPopupPage() {
       params.set("mngInstCd", mngInstCd);
 
       try {
-        const response = await getData(`v1/map/gisUploads?${params.toString()}`);
+        const response = await getData(
+          `v1/map/gisUploads?${params.toString()}`,
+        );
         const items = Array.isArray(response?.items) ? response.items : [];
         setUploadHistory(items);
         setTotal(Number(response?.total ?? 0));
@@ -298,7 +408,9 @@ export default function GisManagementPopupPage() {
         if (!mounted) return;
 
         const pplFacility = Array.isArray(facilityTypes)
-          ? facilityTypes.find((item) => item?.facilityTypeCode === FACILITY_TYPE_CODE)
+          ? facilityTypes.find(
+              (item) => item?.facilityTypeCode === FACILITY_TYPE_CODE,
+            )
           : null;
         if (pplFacility) {
           setFacility({
@@ -354,7 +466,7 @@ export default function GisManagementPopupPage() {
 
   const handleOpenFilePicker = () => {
     if (!isManagementSelected) {
-      window.alert("관리기관을 선택하세요.");
+      alert("관리기관을 선택하세요.");
       return;
     }
     fileInputRef.current?.click();
@@ -370,14 +482,18 @@ export default function GisManagementPopupPage() {
     const fileExtension = getFileExtension(nextFile.name);
     if (!facility.allowedExtensions.includes(fileExtension)) {
       resetSelectedFile();
-      window.alert(`업로드 가능한 파일 형식이 아닙니다. 허용 형식: ${allowedExtensionText}`);
+      alert(
+        `업로드 가능한 파일 형식이 아닙니다. 허용 형식: ${allowedExtensionText}`,
+      );
       return;
     }
 
     const maxFileSizeInBytes = facility.maxFileSizeMb * 1024 * 1024;
     if (nextFile.size > maxFileSizeInBytes) {
       resetSelectedFile();
-      window.alert(`파일 크기가 제한을 초과했습니다. 최대 ${facility.maxFileSizeMb}MB까지 업로드할 수 있습니다.`);
+      alert(
+        `파일 크기가 제한을 초과했습니다. 최대 ${facility.maxFileSizeMb}MB까지 업로드할 수 있습니다.`,
+      );
       return;
     }
 
@@ -386,7 +502,7 @@ export default function GisManagementPopupPage() {
 
   const handleDownloadCurrent = async () => {
     if (!isManagementSelected) {
-      window.alert("관리기관을 선택하세요.");
+      alert("관리기관을 선택하세요.");
       return;
     }
 
@@ -408,22 +524,32 @@ export default function GisManagementPopupPage() {
       const response = await downloadGeoPackage(
         `v1/map/gisDownloadJobs/${encodeURIComponent(job.jobId)}/file`,
       );
-      const downloadId = response.headers.get("X-Gis-Download-Id") ?? readyJob.downloadId ?? "";
+      const downloadId =
+        response.headers.get("X-Gis-Download-Id") ?? readyJob.downloadId ?? "";
       if (!downloadId) {
-        setNotice("다운로드 기준 정보를 확인하지 못했습니다. 다시 다운로드한 뒤 업로드하세요.");
+        setNotice(
+          "다운로드 기준 정보를 확인하지 못했습니다. 다시 다운로드한 뒤 업로드하세요.",
+        );
       } else {
-        setDownloadIdsByScope((current) => ({ ...current, [selectedScopeKey]: downloadId }));
+        setDownloadIdsByScope((current) => ({
+          ...current,
+          [selectedScopeKey]: downloadId,
+        }));
       }
       saveBlob(
         response.blob,
-        response.fileName ?? readyJob.fileName ?? `swage_ppl_${selectedScopeKey}.gpkg`,
+        response.fileName ??
+          readyJob.fileName ??
+          `swage_ppl_${selectedScopeKey}.gpkg`,
       );
       if (downloadId) {
         setNotice(`${selectedScopeLabel} 기준 GeoPackage를 다운로드했습니다.`);
       }
     } catch (error) {
       console.error("GIS 다운로드 실패:", error);
-      window.alert(getErrorMessage(error, "GeoPackage 다운로드 중 오류가 발생했습니다."));
+      alert(
+        getErrorMessage(error, "GeoPackage 다운로드 중 오류가 발생했습니다."),
+      );
     } finally {
       setIsLoading(false);
     }
@@ -431,12 +557,12 @@ export default function GisManagementPopupPage() {
 
   const handleUpload = async () => {
     if (!isManagementSelected) {
-      window.alert("관리기관을 선택하세요.");
+      alert("관리기관을 선택하세요.");
       return;
     }
 
     if (!selectedFile) {
-      window.alert("업로드할 파일을 선택하세요.");
+      alert("업로드할 파일을 선택하세요.");
       return;
     }
 
@@ -453,9 +579,16 @@ export default function GisManagementPopupPage() {
     setIsLoading(true);
     setNotice("");
     try {
-      const response = (await postMutiPart("/api/gis-upload", formData)) as GisUploadResponse;
+      const response = (await postMutiPart(
+        "/api/gis-upload",
+        formData,
+      )) as GisUploadResponse;
       if (response.status === "VALIDATION_FAILED") {
-        setValidationErrors(Array.isArray(response.validationErrors) ? response.validationErrors : []);
+        setValidationErrors(
+          Array.isArray(response.validationErrors)
+            ? response.validationErrors
+            : [],
+        );
         setViewMode("validationErrors");
         setNotice(response.message ?? "GeoPackage 검증 오류가 있습니다.");
         return;
@@ -469,7 +602,9 @@ export default function GisManagementPopupPage() {
       setNotice(response.message ?? "GIS 업로드가 완료되었습니다.");
     } catch (error) {
       console.error("GIS 업로드 실패:", error);
-      window.alert(getErrorMessage(error, "GeoPackage 업로드 중 오류가 발생했습니다."));
+      alert(
+        getErrorMessage(error, "GeoPackage 업로드 중 오류가 발생했습니다."),
+      );
     } finally {
       setIsLoading(false);
     }
@@ -478,7 +613,7 @@ export default function GisManagementPopupPage() {
   const handleDownloadSelectedHistory = async () => {
     if (viewMode !== "history") return;
     if (!selectedHistory) {
-      window.alert("다운로드할 업로드 현황 행을 선택하세요.");
+      alert("다운로드할 업로드 현황 행을 선택하세요.");
       return;
     }
 
@@ -495,12 +630,21 @@ export default function GisManagementPopupPage() {
       );
       saveBlob(
         response.blob,
-        response.fileName ?? readyJob.fileName ?? `${selectedHistory.uploadId}.gpkg`,
+        response.fileName ??
+          readyJob.fileName ??
+          `${selectedHistory.uploadId}.gpkg`,
+      );
+      setNotice(
+        `${buildManagementLabel(selectedHistory.mngInstCd, selectedHistory.mngInstNm)} 기준 GeoPackage를 다운로드했습니다.`,
       );
-      setNotice(`${buildManagementLabel(selectedHistory.mngInstCd, selectedHistory.mngInstNm)} 기준 GeoPackage를 다운로드했습니다.`);
     } catch (error) {
       console.error("GIS 이력 다운로드 실패:", error);
-      window.alert(getErrorMessage(error, "선택한 현황 기준 GeoPackage 다운로드 중 오류가 발생했습니다."));
+      alert(
+        getErrorMessage(
+          error,
+          "선택한 현황 기준 GeoPackage 다운로드 중 오류가 발생했습니다.",
+        ),
+      );
     } finally {
       setIsLoading(false);
     }
@@ -508,7 +652,7 @@ export default function GisManagementPopupPage() {
 
   const fetchValidationErrors = async (uploadId = selectedUploadId) => {
     if (!uploadId) {
-      window.alert("오류를 확인할 업로드 현황 행을 선택하세요.");
+      alert("오류를 확인할 업로드 현황 행을 선택하세요.");
       return;
     }
 
@@ -518,11 +662,13 @@ export default function GisManagementPopupPage() {
       const response = await getData(
         `v1/map/gisUploads/${encodeURIComponent(uploadId)}/validationErrors?page=0&size=500`,
       );
-      setValidationErrors(Array.isArray(response?.errors) ? response.errors : []);
+      setValidationErrors(
+        Array.isArray(response?.errors) ? response.errors : [],
+      );
       setViewMode("validationErrors");
     } catch (error) {
       console.error("GIS 업로드 오류 조회 실패:", error);
-      window.alert("업로드 오류 목록을 불러오지 못했습니다.");
+      alert("업로드 오류 목록을 불러오지 못했습니다.");
     } finally {
       setIsLoading(false);
     }
@@ -536,21 +682,20 @@ export default function GisManagementPopupPage() {
 
   const handleOpenPreview = () => {
     if (!selectedHistory) {
-      window.alert("미리보기할 업로드 현황 행을 선택하세요.");
+      alert("미리보기할 업로드 현황 행을 선택하세요.");
       return;
     }
     setViewMode("preview");
   };
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <StandardPopupLayout
+      title={windowPopupDefinitions.gisManagementPopup.title}
+    >
       <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">GIS 관리</h1>
-      </header>
 
       {notice ? (
-        <div className="border-b border-slate-200 bg-emerald-50 px-5 py-2 text-[1rem] text-emerald-700">
+        <div className="border-b border-border bg-secondary px-5 py-2 text-[1rem] text-label">
           {notice}
         </div>
       ) : null}
@@ -558,15 +703,20 @@ export default function GisManagementPopupPage() {
       <section
         className={
           viewMode === "preview"
-            ? "flex min-h-0 flex-1 flex-col overflow-hidden p-4 pb-2"
-            : "min-h-0 flex-1 overflow-y-auto p-4"
+            ? "flex min-h-0 flex-1 flex-col gap-[1.2rem] overflow-hidden p-4 pb-2"
+            : "flex min-h-0 flex-1 flex-col gap-[1.2rem] p-4"
         }
       >
-        <div className="grid shrink-0 grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[240px_minmax(0,1fr)_auto] md:items-end">
-          <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관리기관</div>
+        <PopupSearchPanel
+          className="shrink-0"
+          contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3"
+        >
+          <label className="flex shrink-0 items-center gap-2">
+            <div className="whitespace-nowrap text-xl font-medium text-label">
+              관리기관
+            </div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="h-[3.2rem] w-[20rem] rounded-md border border-input bg-field px-3 text-xl text-foreground"
               value={selectedMngInstCd}
               onChange={handleMngInstChange}
               disabled={isLoading}
@@ -584,8 +734,8 @@ export default function GisManagementPopupPage() {
             </select>
           </label>
 
-          <label className="block min-w-0">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">
+          <label className="flex min-w-[30rem] flex-1 items-center gap-2">
+            <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
               업로드 파일 ({facility.facilityTypeName}, {allowedExtensionText})
             </div>
             <Input
@@ -593,43 +743,37 @@ export default function GisManagementPopupPage() {
               placeholder="선택된 파일 없음"
               readOnly
               aria-label="선택 파일명"
-              className="h-10 !text-[1.1rem]"
+              className="!h-[3.2rem] min-w-0 flex-1 !text-xl"
             />
           </label>
 
-          <div className="flex flex-wrap justify-end gap-2 md:pr-3">
+          <div className="flex min-w-fit flex-wrap justify-end gap-2">
             <Button
               type="button"
-              size="sm"
-              color="green"
-              className="h-10 px-5 !text-[1.1rem]"
+              color="primary"
               disabled={!isManagementSelected || isLoading}
               onClick={() => void handleDownloadCurrent()}
             >
-              다운로드
+              GeoPackage 다운로드
             </Button>
             <Button
               type="button"
-              size="sm"
-              color="primary"
-              className="h-10 px-5 !text-[1.1rem]"
+              color="white"
               disabled={!isManagementSelected || isLoading}
               onClick={handleOpenFilePicker}
             >
-              찾기
+              파일찾기
             </Button>
             <Button
               type="button"
-              size="sm"
               color="primary"
-              className="h-10 px-5 !text-[1.1rem]"
               disabled={!isManagementSelected || !selectedFile || isLoading}
               onClick={() => void handleUpload()}
             >
               업로드
             </Button>
           </div>
-        </div>
+        </PopupSearchPanel>
 
         <input
           ref={fileInputRef}
@@ -639,53 +783,49 @@ export default function GisManagementPopupPage() {
           onChange={handleFileSelected}
         />
 
-        <div className="card-header mt-4 flex shrink-0 items-center justify-between">
-          <h3 className="text-2xl font-medium text-label">
-            {viewMode === "preview" ? "GIS 업로드 미리보기" : viewMode === "validationErrors" ? "GIS 업로드 오류 확인" : `GIS 업로드 현황 총 ${total.toLocaleString("ko-KR")}건`}
-          </h3>
-          <div className="flex flex-wrap justify-end gap-2">
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="h-9 px-4 !text-[1rem]"
-              disabled={!isManagementSelected || isLoading}
-              onClick={() => void handleRefreshHistories()}
-            >
-              조회
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="h-9 px-4 !text-[1rem]"
-              disabled={!selectedHistory || isLoading}
-              onClick={handleOpenPreview}
-            >
-              미리보기
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="h-9 px-4 !text-[1rem]"
-              disabled={!selectedHistory || isLoading}
-              onClick={() => void fetchValidationErrors()}
-            >
-              오류 확인
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="green"
-              className="h-9 px-4 !text-[1rem]"
-              disabled={viewMode !== "history" || !selectedHistory || isLoading}
-              onClick={() => void handleDownloadSelectedHistory()}
-            >
-              선택 다운로드
-            </Button>
+        {viewMode !== "history" ? (
+          <div className="card-header flex shrink-0 items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">
+              {viewMode === "preview"
+                ? "GIS 업로드 미리보기"
+                : "GIS 업로드 오류 목록"}
+            </h3>
+            <div className="flex flex-wrap justify-end gap-2">
+              <Button
+                type="button"
+                color="primary"
+                disabled={!isManagementSelected || isLoading}
+                onClick={() => void handleRefreshHistories()}
+              >
+                조회
+              </Button>
+              <Button
+                type="button"
+                color="primary"
+                disabled
+                onClick={() => void handleDownloadSelectedHistory()}
+              >
+                GeoPackage 다운로드
+              </Button>
+              <Button
+                type="button"
+                color="white"
+                disabled={!selectedHistory || isLoading}
+                onClick={handleOpenPreview}
+              >
+                미리보기
+              </Button>
+              <Button
+                type="button"
+                color="white"
+                disabled={!selectedHistory || isLoading}
+                onClick={() => void fetchValidationErrors()}
+              >
+                오류 확인
+              </Button>
+            </div>
           </div>
-        </div>
+        ) : null}
 
         {viewMode === "preview" && selectedHistory ? (
           <div className="flex min-h-0 flex-1 flex-col">
@@ -695,14 +835,17 @@ export default function GisManagementPopupPage() {
             />
           </div>
         ) : viewMode === "validationErrors" ? (
-          <div className="card !m-0 !p-0 overflow-x-auto">
-            <Table variant="secondary" className="w-full min-w-[760px] caption-bottom text-sm">
+          <div className="card !m-0 overflow-x-auto !p-0">
+            <Table
+              variant="secondary"
+              className="w-full min-w-[640px] caption-bottom text-sm"
+            >
               <TableHeader className="font-bold">
                 <TableRow>
-                  {["no", "행번호", "FID", "오류코드", "오류내용"].map((head) => (
+                  {["순번", "행번호", "FID", "오류내용"].map((head) => (
                     <TableHead
                       key={head}
-                      className="border border-border bg-[#eaf3fb] px-4 py-[1.1rem] text-center text-[1.2rem] font-medium text-[#647784]"
+                      className="border border-border !bg-primary px-4 py-[1.1rem] text-center text-[1.2rem] font-medium !text-primary-foreground"
                     >
                       {head}
                     </TableHead>
@@ -712,9 +855,11 @@ export default function GisManagementPopupPage() {
               <TableBody className="text-center">
                 {validationErrors.length > 0 ? (
                   validationErrors.map((error, index) => (
-                    <TableRow key={`${error.rowNo ?? index}-${error.fid ?? ""}-${error.errorCode ?? ""}`}>
+                    <TableRow
+                      key={`${error.rowNo ?? index}-${error.fid ?? ""}-${error.errorCode ?? ""}`}
+                    >
                       <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {index + 1}
+                        {validationErrors.length - index}
                       </TableCell>
                       <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
                         {error.rowNo ?? "-"}
@@ -722,17 +867,17 @@ export default function GisManagementPopupPage() {
                       <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
                         {error.fid || "-"}
                       </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {error.errorCode || "-"}
-                      </TableCell>
                       <TableCell className="border border-border px-3 py-[1rem] text-left text-[1.15rem]">
-                        {error.errorMessage || "-"}
+                        {getLocalizedValidationErrorMessage(error)}
                       </TableCell>
                     </TableRow>
                   ))
                 ) : (
                   <TableRow>
-                    <TableCell colSpan={5} className="h-24 border border-border text-center text-[1.2rem] text-gray-500">
+                    <TableCell
+                      colSpan={4}
+                      className="h-[calc(100dvh-28rem)] min-h-96 border border-border text-center text-[1.2rem] text-muted-foreground"
+                    >
                       표시할 오류가 없습니다.
                     </TableCell>
                   </TableRow>
@@ -741,84 +886,62 @@ export default function GisManagementPopupPage() {
             </Table>
           </div>
         ) : (
-        <>
-        <div className="card !m-0 !p-0 overflow-x-auto">
-          <Table variant="secondary" className="w-full min-w-[820px] caption-bottom text-sm">
-            <TableHeader className="font-bold">
-              <TableRow>
-                {["no", "관리기관", "파일명", "상태", "변경/오류", "등록일자", "등록자"].map((head) => (
-                  <TableHead
-                    key={head}
-                    className="border border-border bg-[#eaf3fb] px-4 py-[1.1rem] text-center text-[1.2rem] font-medium text-[#647784]"
-                  >
-                    {head}
-                  </TableHead>
-                ))}
-              </TableRow>
-            </TableHeader>
-            <TableBody className="text-center">
-              {uploadHistory.length > 0 ? (
-                uploadHistory.map((history, index) => {
-                  const rowNumber = (currentPage - 1) * GIS_UPLOAD_PAGE_SIZE + index + 1;
-                  const isSelected = history.uploadId === selectedUploadId;
-                  return (
-                    <TableRow
-                      key={history.uploadId}
-                      className={`cursor-pointer ${isSelected ? "bg-blue-50" : ""}`}
-                      onClick={() => setSelectedUploadId(history.uploadId)}
-                    >
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {rowNumber}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {buildManagementLabel(history.mngInstCd, history.mngInstNm)}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-left text-[1.15rem]">
-                        {history.fileName}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {history.status ?? "-"}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {(history.changedCount ?? 0).toLocaleString("ko-KR")} / {(history.invalidCount ?? 0).toLocaleString("ko-KR")}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {formatDateTime(history.registeredAt)}
-                      </TableCell>
-                      <TableCell className="border border-border px-3 py-[1rem] text-[1.15rem]">
-                        {history.registeredByName ||
-                          (history.registeredBy === userInfo?.userUnqId
-                            ? userInfo.userName
-                            : history.registeredBy) ||
-                          "-"}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })
-              ) : (
-                <TableRow>
-                  <TableCell colSpan={7} className="h-24 border border-border text-center text-[1.2rem] text-gray-500">
-                    조회 결과가 없습니다.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-
-        {total > GIS_UPLOAD_PAGE_SIZE ? (
-          <div className="mt-3 flex justify-center">
-            <UiPageNations
-              total={total}
-              cur={currentPage}
-              pageSize={GIS_UPLOAD_PAGE_SIZE}
-              onPageChange={(page) => void fetchHistories(page, selectedMngInstCd)}
-            />
-          </div>
-        ) : null}
-        </>
+          <MapPopupDataTable
+            rows={uploadHistoryRows}
+            headlist={GIS_UPLOAD_HISTORY_HEADLIST}
+            title="GIS 업로드 목록"
+            total={total}
+            page={currentPage}
+            pageSize={GIS_UPLOAD_PAGE_SIZE}
+            onPageChange={(page) =>
+              void fetchHistories(page, selectedMngInstCd)
+            }
+            actions={
+              <>
+                <Button
+                  type="button"
+                  color="primary"
+                  disabled={!isManagementSelected || isLoading}
+                  onClick={() => void handleRefreshHistories()}
+                >
+                  조회
+                </Button>
+                <Button
+                  type="button"
+                  color="primary"
+                  disabled={!selectedHistory || isLoading}
+                  onClick={() => void handleDownloadSelectedHistory()}
+                >
+                  GeoPackage 다운로드
+                </Button>
+                <Button
+                  type="button"
+                  color="white"
+                  disabled={!selectedHistory || isLoading}
+                  onClick={handleOpenPreview}
+                >
+                  미리보기
+                </Button>
+                <Button
+                  type="button"
+                  color="white"
+                  disabled={!selectedHistory || isLoading}
+                  onClick={() => void fetchValidationErrors()}
+                >
+                  오류 확인
+                </Button>
+              </>
+            }
+            scrollMode="horizontal"
+            minTableWidth="72rem"
+            emptyMessage="조회 결과가 없습니다."
+            fillAvailableHeight
+            rowId={(row) => row.uploadId}
+            selectedRowId={selectedUploadId}
+            onRowClick={(row) => setSelectedUploadId(row.uploadId)}
+          />
         )}
       </section>
-    </main>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/gisManagement/GisUploadPreviewMap.tsx b/apps/sn/app/(map-layout)/map/components/gisManagement/GisUploadPreviewMap.tsx
index e41bca8ea..95e60dff7 100644
--- a/apps/sn/app/(map-layout)/map/components/gisManagement/GisUploadPreviewMap.tsx
+++ b/apps/sn/app/(map-layout)/map/components/gisManagement/GisUploadPreviewMap.tsx
@@ -53,8 +53,25 @@ const MIN_ZOOM_VISIBILITY_OFFSET = 0.01;
 const NETWORK_LAYER_GROUP = "SN_NETWORK";
 const PIPE_LAYER_TYPE = "tb_ms_swage_ppl";
 const NGII_WMTS_URL = `/ngii-server/openapi/Gettile.do?apikey=${process.env.NEXT_PUBLIC_NGII_PARAM ?? ""}`;
-const NGII_RESOLUTIONS = [1044.48, 522.24, 261.12, 130.56, 65.28, 32.64, 16.32, 8.16, 4.08, 2.04, 1.02, 0.51, 0.255];
-const NGII_MATRIX_IDS = ["L06", "L07", "L08", "L09", "L10", "L11", "L12", "L13", "L14", "L15", "L16", "L17", "L18"];
+const NGII_RESOLUTIONS = [
+  1044.48, 522.24, 261.12, 130.56, 65.28, 32.64, 16.32, 8.16, 4.08, 2.04, 1.02,
+  0.51, 0.255,
+];
+const NGII_MATRIX_IDS = [
+  "L06",
+  "L07",
+  "L08",
+  "L09",
+  "L10",
+  "L11",
+  "L12",
+  "L13",
+  "L14",
+  "L15",
+  "L16",
+  "L17",
+  "L18",
+];
 
 let isProjectionRegistered = false;
 
@@ -74,7 +91,11 @@ const createNgiiBaseLayer = () => {
   registerMapProjection();
   const projection = getProjection(MAP_SRS);
   const tileGrid = new WMTSTileGrid({
-    origin: getTopLeft(projection?.getExtent() ?? [-200000.0, -28024123.62, 31824123.62, 4000000.0]),
+    origin: getTopLeft(
+      projection?.getExtent() ?? [
+        -200000.0, -28024123.62, 31824123.62, 4000000.0,
+      ],
+    ),
     resolutions: NGII_RESOLUTIONS,
     matrixIds: NGII_MATRIX_IDS,
     tileSize: [256, 256],
@@ -91,8 +112,10 @@ const createNgiiBaseLayer = () => {
   });
   source.setTileUrlFunction((tileCoord) => {
     const [z, x, y] = tileCoord;
-    return NGII_WMTS_URL
-      .replace("{z}", NGII_MATRIX_IDS[z ?? 0] ?? NGII_MATRIX_IDS[0] ?? "L06")
+    return NGII_WMTS_URL.replace(
+      "{z}",
+      NGII_MATRIX_IDS[z ?? 0] ?? NGII_MATRIX_IDS[0] ?? "L06",
+    )
       .replace("{x}", String(x))
       .replace("{y}", String(y));
   });
@@ -109,7 +132,8 @@ const getLayerTypeName = (layer: LayerSetting) =>
   String(layer.lyrTyNm ?? layer.lyrTypeNm ?? layer.lyr_type_nm ?? "").trim();
 
 const toFiniteNumber = (value: unknown, fallback: number) => {
-  if (value === null || value === undefined || String(value).trim() === "") return fallback;
+  if (value === null || value === undefined || String(value).trim() === "")
+    return fallback;
   const parsed = Number(value);
   return Number.isFinite(parsed) ? parsed : fallback;
 };
@@ -122,8 +146,10 @@ const normalizeColor = (value: unknown, fallback: string) => {
 const getLineColor = (layer?: LayerSetting | null) =>
   normalizeColor(layer?.lnColor ?? layer?.lineColr, "#f97316");
 
-const getLayerMinZoom = (layer: LayerSetting | null | undefined, fallback: number) =>
-  toFiniteNumber(layer?.minViewSize ?? layer?.minZoom, fallback);
+const getLayerMinZoom = (
+  layer: LayerSetting | null | undefined,
+  fallback: number,
+) => toFiniteNumber(layer?.minViewSize ?? layer?.minZoom, fallback);
 
 const getNetworkPipeLineWidth = (layer?: LayerSetting | null) =>
   Math.max(1, toFiniteNumber(layer?.lnWdth ?? layer?.lineWdth, 1));
@@ -131,34 +157,35 @@ const getNetworkPipeLineWidth = (layer?: LayerSetting | null) =>
 const getHighlightedPipeLineWidth = (layer?: LayerSetting | null) =>
   Math.max(3, getNetworkPipeLineWidth(layer) + 2) + 3;
 
-const pipePreviewStyle = (layerSetting?: LayerSetting | null) => (feature: FeatureLike) => {
-  const status = feature.get("previewStatus");
-  if (status !== "CREATED" && status !== "UPDATED") {
-    return new Style({
-      stroke: new Stroke({
-        color: getLineColor(layerSetting),
-        width: getNetworkPipeLineWidth(layerSetting),
-      }),
-    });
-  }
+const pipePreviewStyle =
+  (layerSetting?: LayerSetting | null) => (feature: FeatureLike) => {
+    const status = feature.get("previewStatus");
+    if (status !== "CREATED" && status !== "UPDATED") {
+      return new Style({
+        stroke: new Stroke({
+          color: getLineColor(layerSetting),
+          width: getNetworkPipeLineWidth(layerSetting),
+        }),
+      });
+    }
 
-  const baseColor = status === "CREATED" ? "#16a34a" : "#f97316";
-  const width = getHighlightedPipeLineWidth(layerSetting);
-  return [
-    new Style({
-      stroke: new Stroke({
-        color: "#ffffff",
-        width: width + 3,
+    const baseColor = status === "CREATED" ? "#16a34a" : "#f97316";
+    const width = getHighlightedPipeLineWidth(layerSetting);
+    return [
+      new Style({
+        stroke: new Stroke({
+          color: "#ffffff",
+          width: width + 3,
+        }),
       }),
-    }),
-    new Style({
-      stroke: new Stroke({
-        color: baseColor,
-        width,
+      new Style({
+        stroke: new Stroke({
+          color: baseColor,
+          width,
+        }),
       }),
-    }),
-  ];
-};
+    ];
+  };
 
 const unwrapFeatureCollection = (response: any) => response?.data ?? response;
 
@@ -190,10 +217,15 @@ const getFeatureExtent = (features: ReturnType<GeoJSON["readFeatures"]>) => {
   return [minX, minY, maxX, maxY] as [number, number, number, number];
 };
 
-const getFeatureExtentCenter = (features: ReturnType<GeoJSON["readFeatures"]>) => {
+const getFeatureExtentCenter = (
+  features: ReturnType<GeoJSON["readFeatures"]>,
+) => {
   const extent = getFeatureExtent(features);
   if (!extent) return null;
-  const targetCenter: [number, number] = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
+  const targetCenter: [number, number] = [
+    (extent[0] + extent[2]) / 2,
+    (extent[1] + extent[3]) / 2,
+  ];
   return features.reduce<[number, number] | null>((nearestCenter, feature) => {
     const featureExtent = feature.getGeometry()?.getExtent();
     if (!featureExtent) return nearestCenter;
@@ -202,15 +234,20 @@ const getFeatureExtentCenter = (features: ReturnType<GeoJSON["readFeatures"]>) =
       (featureExtent[1]! + featureExtent[3]!) / 2,
     ];
     if (!nearestCenter) return featureCenter;
-    const nearestDistance = ((nearestCenter[0] - targetCenter[0]) ** 2)
-      + ((nearestCenter[1] - targetCenter[1]) ** 2);
-    const featureDistance = ((featureCenter[0] - targetCenter[0]) ** 2)
-      + ((featureCenter[1] - targetCenter[1]) ** 2);
+    const nearestDistance =
+      (nearestCenter[0] - targetCenter[0]) ** 2 +
+      (nearestCenter[1] - targetCenter[1]) ** 2;
+    const featureDistance =
+      (featureCenter[0] - targetCenter[0]) ** 2 +
+      (featureCenter[1] - targetCenter[1]) ** 2;
     return featureDistance < nearestDistance ? featureCenter : nearestCenter;
   }, null);
 };
 
-export default function GisUploadPreviewMap({ uploadId, mngInstCd }: GisUploadPreviewMapProps) {
+export default function GisUploadPreviewMap({
+  uploadId,
+  mngInstCd,
+}: GisUploadPreviewMapProps) {
   const mapElementRef = useRef<HTMLDivElement | null>(null);
   const mapRef = useRef<Map | null>(null);
   const pipeSourceRef = useRef(new VectorSource());
@@ -226,9 +263,15 @@ export default function GisUploadPreviewMap({ uploadId, mngInstCd }: GisUploadPr
   const [truncated, setTruncated] = useState(false);
   const [message, setMessage] = useState("");
 
-  const flatLayerSettings = useMemo(() => flattenLayerSettings(layerSettings), [layerSettings]);
+  const flatLayerSettings = useMemo(
+    () => flattenLayerSettings(layerSettings),
+    [layerSettings],
+  );
   const pipeLayerSetting = useMemo(
-    () => flatLayerSettings.find((layer) => getLayerTypeName(layer) === PIPE_LAYER_TYPE) ?? null,
+    () =>
+      flatLayerSettings.find(
+        (layer) => getLayerTypeName(layer) === PIPE_LAYER_TYPE,
+      ) ?? null,
     [flatLayerSettings],
   );
   const pipeMinZoom = getLayerMinZoom(pipeLayerSetting, FALLBACK_PIPE_MIN_ZOOM);
@@ -237,10 +280,19 @@ export default function GisUploadPreviewMap({ uploadId, mngInstCd }: GisUploadPr
     let mounted = true;
     const loadLayerSettings = async () => {
       try {
-        const networkSettings = await getRawJson(`/sewerage-service/api/v1/map/lyrStngs/${NETWORK_LAYER_GROUP}`);
-        const filtered = flattenLayerSettings(Array.isArray(networkSettings) ? networkSettings : [])
+        const networkSettings = await getRawJson(
+          `/sewerage-service/api/v1/map/lyrStngs/${NETWORK_LAYER_GROUP}`,
+        );
+        const filtered = flattenLayerSettings(
+          Array.isArray(networkSettings) ? networkSettings : [],
+        )
           .filter((layer) => getLayerTypeName(layer) === PIPE_LAYER_TYPE)
-          .filter((layer) => (layer.useYn ?? "Y") === "Y" && (layer.exprsYn ?? "Y") === "Y" && (layer.actlLyrYn ?? "Y") === "Y");
+          .filter(
+            (layer) =>
+              (layer.useYn ?? "Y") === "Y" &&
+              (layer.exprsYn ?? "Y") === "Y" &&
+              (layer.actlLyrYn ?? "Y") === "Y",
+          );
         if (mounted) {
           setLayerSettings(filtered);
         }
@@ -264,7 +316,11 @@ export default function GisUploadPreviewMap({ uploadId, mngInstCd }: GisUploadPr
     const initializeMap = () => {
       const mapElement = mapElementRef.current;
       if (disposed || mapRef.current) return;
-      if (!mapElement || mapElement.clientWidth <= 0 || mapElement.clientHeight <= 0) {
+      if (
+        !mapElement ||
+        mapElement.clientWidth <= 0 ||
+        mapElement.clientHeight <= 0
+      ) {
         initializeTimer = window.setTimeout(initializeMap, 100);
         return;
       }
@@ -338,82 +394,89 @@ export default function GisUploadPreviewMap({ uploadId, mngInstCd }: GisUploadPr
     didFitPreviewRef.current = false;
   }, [mngInstCd, uploadId]);
 
-  const loadPreview = useCallback(async function loadPreviewRequest() {
-    const map = mapRef.current;
-    if (!map || !uploadId) return;
+  const loadPreview = useCallback(
+    async function loadPreviewRequest() {
+      const map = mapRef.current;
+      if (!map || !uploadId) return;
 
-    map.updateSize();
-    let size = map.getSize();
-    if (!size) {
       map.updateSize();
-      size = map.getSize();
-    }
-    if (!size || size[0]! <= 0 || size[1]! <= 0) {
-      if (loadTimerRef.current) {
-        window.clearTimeout(loadTimerRef.current);
+      let size = map.getSize();
+      if (!size) {
+        map.updateSize();
+        size = map.getSize();
+      }
+      if (!size || size[0]! <= 0 || size[1]! <= 0) {
+        if (loadTimerRef.current) {
+          window.clearTimeout(loadTimerRef.current);
+        }
+        loadTimerRef.current = window.setTimeout(() => {
+          void loadPreviewRequest();
+        }, 150);
+        return;
       }
-      loadTimerRef.current = window.setTimeout(() => {
-        void loadPreviewRequest();
-      }, 150);
-      return;
-    }
 
-    const extent = map.getView().calculateExtent(size);
-    const previewParams = new URLSearchParams({
-      bbox: extent.join(","),
-      srs: MAP_SRS,
-    });
-    if (mngInstCd) {
-      previewParams.set("mngInstCd", mngInstCd);
-    }
+      const extent = map.getView().calculateExtent(size);
+      const previewParams = new URLSearchParams({
+        bbox: extent.join(","),
+        srs: MAP_SRS,
+      });
+      if (mngInstCd) {
+        previewParams.set("mngInstCd", mngInstCd);
+      }
 
-    abortControllerRef.current?.abort();
-    const abortController = new AbortController();
-    abortControllerRef.current = abortController;
+      abortControllerRef.current?.abort();
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
 
-    setIsLoading(true);
-    setMessage("");
-    pipeSourceRef.current.clear();
-    setFeatureCount(0);
-    setDeletedCount(0);
-    setTruncated(false);
-    try {
-      const previewResponse = await getRawJson(
-        `v1/map/gisUploads/${encodeURIComponent(uploadId)}/preview?${previewParams.toString()}`,
-        { signal: abortController.signal },
-      );
+      setIsLoading(true);
+      setMessage("");
+      pipeSourceRef.current.clear();
+      setFeatureCount(0);
+      setDeletedCount(0);
+      setTruncated(false);
+      try {
+        const previewResponse = await getRawJson(
+          `v1/map/gisUploads/${encodeURIComponent(uploadId)}/preview?${previewParams.toString()}`,
+          { signal: abortController.signal },
+        );
 
-      const previewCollection = unwrapFeatureCollection(previewResponse);
-      const pipeFeatures = new GeoJSON({
-        dataProjection: MAP_SRS,
-        featureProjection: MAP_SRS,
-      }).readFeatures(previewCollection);
+        const previewCollection = unwrapFeatureCollection(previewResponse);
+        const pipeFeatures = new GeoJSON({
+          dataProjection: MAP_SRS,
+          featureProjection: MAP_SRS,
+        }).readFeatures(previewCollection);
 
-      pipeSourceRef.current.addFeatures(pipeFeatures);
+        pipeSourceRef.current.addFeatures(pipeFeatures);
 
-      if (!didFitPreviewRef.current && pipeFeatures.length > 0) {
-        const changedFeatures = pipeFeatures.filter((feature) => feature.get("previewStatus") !== "LATEST");
-        const center = getFeatureExtentCenter(changedFeatures.length > 0 ? changedFeatures : pipeFeatures);
-        if (center) {
-          map.getView().setCenter(center);
-          map.getView().setZoom(pipeMinZoom + MIN_ZOOM_VISIBILITY_OFFSET);
-          didFitPreviewRef.current = true;
+        if (!didFitPreviewRef.current && pipeFeatures.length > 0) {
+          const changedFeatures = pipeFeatures.filter(
+            (feature) => feature.get("previewStatus") !== "LATEST",
+          );
+          const center = getFeatureExtentCenter(
+            changedFeatures.length > 0 ? changedFeatures : pipeFeatures,
+          );
+          if (center) {
+            map.getView().setCenter(center);
+            map.getView().setZoom(pipeMinZoom + MIN_ZOOM_VISIBILITY_OFFSET);
+            didFitPreviewRef.current = true;
+          }
+        }
+
+        setFeatureCount(pipeFeatures.length);
+        setDeletedCount(Number(previewCollection?.meta?.deletedCount ?? 0));
+        setTruncated(Boolean(previewCollection?.meta?.truncated));
+      } catch (error: any) {
+        if (error?.name === "AbortError") return;
+        console.error("GIS 업로드 미리보기 조회 실패:", error);
+        setMessage("미리보기 데이터를 불러오지 못했습니다.");
+      } finally {
+        if (!abortController.signal.aborted) {
+          setIsLoading(false);
         }
       }
-
-      setFeatureCount(pipeFeatures.length);
-      setDeletedCount(Number(previewCollection?.meta?.deletedCount ?? 0));
-      setTruncated(Boolean(previewCollection?.meta?.truncated));
-    } catch (error: any) {
-      if (error?.name === "AbortError") return;
-      console.error("GIS 업로드 미리보기 조회 실패:", error);
-      setMessage("미리보기 데이터를 불러오지 못했습니다.");
-    } finally {
-      if (!abortController.signal.aborted) {
-        setIsLoading(false);
-      }
-    }
-  }, [mngInstCd, pipeMinZoom, uploadId]);
+    },
+    [mngInstCd, pipeMinZoom, uploadId],
+  );
 
   useEffect(() => {
     const map = mapRef.current;
@@ -439,22 +502,28 @@ export default function GisUploadPreviewMap({ uploadId, mngInstCd }: GisUploadPr
     <div className="flex min-h-0 flex-1 flex-col">
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
         <div>
-          <h3 className="text-2xl font-medium text-label">업로드 이력 미리보기</h3>
-          <p className="mt-1 text-[1rem] text-slate-600">
-            변경 관로는 업로드 이력 기준으로 강조하고, 변경 없는 관로는 관망도와 동일한 스타일로 표시합니다.
+          <h3 className="text-2xl font-medium text-label">
+            업로드 이력 미리보기
+          </h3>
+          <p className="mt-1 text-[1rem] text-label">
+            변경 관로는 업로드 이력 기준으로 강조하고, 변경 없는 관로는 관망도와
+            동일한 스타일로 표시합니다.
           </p>
         </div>
       </div>
 
-      <div className="mb-2 flex flex-wrap gap-3 text-[0.95rem] text-slate-700">
+      <div className="mb-2 flex flex-wrap gap-3 text-[0.95rem] text-label">
         <span>
-          <b className="text-green-600">신규</b> / <b className="text-orange-500">수정</b> /{" "}
+          <b className="text-green-600">신규</b> /{" "}
+          <b className="text-orange-500">수정</b> /{" "}
           <b style={{ color: getLineColor(pipeLayerSetting) }}>관망도 기본</b>
         </span>
         <span>관로 표출 줌 {pipeMinZoom} 이상</span>
         <span>관로 {featureCount.toLocaleString("ko-KR")}건</span>
         <span>삭제 미표시 {deletedCount.toLocaleString("ko-KR")}건</span>
-        {truncated ? <span className="text-red-600">조회 상한 초과</span> : null}
+        {truncated ? (
+          <span className="text-red-600">조회 상한 초과</span>
+        ) : null}
         {isLoading ? <span>불러오는 중...</span> : null}
       </div>
 
@@ -466,7 +535,7 @@ export default function GisUploadPreviewMap({ uploadId, mngInstCd }: GisUploadPr
 
       <div
         ref={mapElementRef}
-        className="gis-upload-preview-map min-h-0 flex-1 overflow-hidden rounded-md border border-slate-300 bg-slate-100"
+        className="gis-upload-preview-map min-h-0 flex-1 overflow-hidden rounded-md border border-border bg-secondary"
       />
 
       <style jsx global>{`
diff --git a/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
index 1c3fb1deb..680c2ba65 100644
--- a/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
@@ -2,19 +2,22 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { DateMonthPicker } from "@common/business_components/ui/date_month_picker";
-import { UiTable } from "@common/business_components/ui/table";
-import type {
-  UiHeadProps,
-  UiTableSort,
-} from "@common/business_components/ui/table";
+import {
+  StandardPopupLayout,
+  type UiHeadProps,
+} from "@common/business_components";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
+import { useAlertStore } from "@/shared/lib";
 import { Button } from "@common/components";
 
 import { getData } from "@/components/lib/api";
-import LoadingOverlay from "@/components/ui/LoadingBar";
 import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
 import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
 import useStore from "@/store/useStore";
+import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
+import LoadingOverlay from "@/components/ui/LoadingBar";
 
 import {
   INFTWT_RESULT_ROW_SELECT_MESSAGE,
@@ -24,8 +27,8 @@ import {
 
 const INFTWT_RESULT_PAGE_SIZE = 10;
 
-const INFTWT_RESULT_HEADLIST = [
-  { id: "rowNumber", title: "일련번호" },
+const INFTWT_RESULT_HEADLIST: UiHeadProps[] = [
+  { id: "rowNumber", title: "순번" },
   { id: "ctpvNm", title: "시도" },
   { id: "sggNm", title: "시군구" },
   { id: "swtrmtFcltNm", title: "하수처리시설" },
@@ -35,18 +38,7 @@ const INFTWT_RESULT_HEADLIST = [
   { id: "regDt", title: "분석일자" },
   { id: "rgtrNm", title: "분석자" },
   { id: "scsYn", title: "분석성공여부" },
-] as const;
-// 화면 표시명과 분석 Entity 필드가 다른 열은 서버 정렬 키를 명시한다.
-const INFTWT_RESULT_SORT_KEYS: Record<string, string> = {
-  ctpvNm: "ctpvCd",
-  sggNm: "sggCd",
-};
-const INFTWT_RESULT_SORTABLE_HEADLIST: UiHeadProps[] = INFTWT_RESULT_HEADLIST.map((head) => ({
-  ...head,
-  // 분석자명은 목록 조회 후 외부 사용자 서비스에서 보강되므로 전체 결과 정렬에서 제외한다.
-  sortable: head.id !== "rgtrNm",
-  sortKey: INFTWT_RESULT_SORT_KEYS[head.id] ?? head.id,
-}));
+];
 
 type InftwtResultFilters = {
   ctpvCd: string;
@@ -99,6 +91,7 @@ const postRowSelectMessage = (row: InftwtResultRow) => {
 };
 
 export default function InftwtResultPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   const [filters, setFilters] = useState<InftwtResultFilters>(DEFAULT_FILTERS);
   const [selectedSwagePrcsFclt, setSelectedSwagePrcsFclt] = useState("0");
@@ -106,9 +99,7 @@ export default function InftwtResultPopupPage() {
   const [rows, setRows] = useState<InftwtResultRow[]>([]);
   const [total, setTotal] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
-  const [sort, setSort] = useState<UiTableSort>();
 
   useEffect(() => {
     if (ctpv.length === 0) void fetchCtpv();
@@ -116,23 +107,24 @@ export default function InftwtResultPopupPage() {
   }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
 
   const fetchRows = useCallback(
-    async (page: number, nextFilters: InftwtResultFilters, nextSort?: UiTableSort) => {
+    async (page: number, nextFilters: InftwtResultFilters) => {
       const queryParams = new URLSearchParams({
         page: String(page - 1),
         size: String(INFTWT_RESULT_PAGE_SIZE),
         scsYn: "Y",
       });
-      const requestSort = nextSort?.key === "rowNumber"
-        ? { key: "inftwtAnlsSn", direction: nextSort.direction === "asc" ? "desc" : "asc" }
-        : nextSort;
-      if (requestSort) queryParams.append("sort", `${requestSort.key},${requestSort.direction}`);
-      if (requestSort?.key !== "inftwtAnlsSn") queryParams.append("sort", "inftwtAnlsSn,desc");
+      queryParams.append("sort", "inftwtAnlsSn,desc");
 
-      if (nextFilters.aplcnYmFrom) queryParams.set("aplcnYmFrom", nextFilters.aplcnYmFrom);
-      if (nextFilters.aplcnYmTo) queryParams.set("aplcnYmTo", nextFilters.aplcnYmTo);
-      if (nextFilters.ctpvCd !== "0") queryParams.set("ctpvCd", nextFilters.ctpvCd);
-      if (nextFilters.sggCd !== "0") queryParams.set("sggCd", nextFilters.sggCd);
-      if (nextFilters.swtrmtFcltNm.trim()) queryParams.set("swtrmtFcltNm", nextFilters.swtrmtFcltNm.trim());
+      if (nextFilters.aplcnYmFrom)
+        queryParams.set("aplcnYmFrom", nextFilters.aplcnYmFrom);
+      if (nextFilters.aplcnYmTo)
+        queryParams.set("aplcnYmTo", nextFilters.aplcnYmTo);
+      if (nextFilters.ctpvCd !== "0")
+        queryParams.set("ctpvCd", nextFilters.ctpvCd);
+      if (nextFilters.sggCd !== "0")
+        queryParams.set("sggCd", nextFilters.sggCd);
+      if (nextFilters.swtrmtFcltNm.trim())
+        queryParams.set("swtrmtFcltNm", nextFilters.swtrmtFcltNm.trim());
 
       const response = await getData(`v1/inftwtAnls?${queryParams.toString()}`);
       const content = Array.isArray(response?.content) ? response.content : [];
@@ -141,14 +133,17 @@ export default function InftwtResultPopupPage() {
       const nextRows = content
         .map((item: Record<string, unknown>, index: number) => {
           const formattedItem = formatDisplayData(item);
-          const ctpvOption = ctpv.find((code) => code.val.trim() === String(item?.ctpvCd ?? "").trim());
+          const ctpvOption = ctpv.find(
+            (code) => code.val.trim() === String(item?.ctpvCd ?? "").trim(),
+          );
           const sggOption = sgg.find((code) => code.val === item?.sggCd);
 
           return {
             ...(formattedItem as Record<string, unknown>),
-            rowNumber: nextSort?.key === "rowNumber" && nextSort.direction === "desc"
-              ? totalElements - ((page - 1) * INFTWT_RESULT_PAGE_SIZE + index)
-              : (page - 1) * INFTWT_RESULT_PAGE_SIZE + index + 1,
+            rowNumber: Math.max(
+              totalElements - ((page - 1) * INFTWT_RESULT_PAGE_SIZE + index),
+              0,
+            ),
             ctpvNm: ctpvOption ? ctpvOption.text : String(item?.ctpvCd ?? "-"),
             sggNm: sggOption ? sggOption.text : String(item?.sggCd ?? "-"),
             scsYn: String(item?.scsYn ?? "N"),
@@ -164,10 +159,10 @@ export default function InftwtResultPopupPage() {
   );
 
   const loadRows = useCallback(
-    async (page = 1, nextFilters = filters, nextSort = sort) => {
+    async (page = 1, nextFilters = filters) => {
       setIsLoading(true);
       try {
-        await fetchRows(page, nextFilters, nextSort);
+        await fetchRows(page, nextFilters);
       } catch (error) {
         console.error("침입수 분석결과 목록 조회 중 오류:", error);
         alert("침입수 분석결과 목록을 불러오지 못했습니다.");
@@ -177,7 +172,7 @@ export default function InftwtResultPopupPage() {
         setIsLoading(false);
       }
     },
-    [fetchRows, filters, sort],
+    [alert, fetchRows, filters],
   );
 
   useEffect(() => {
@@ -186,17 +181,16 @@ export default function InftwtResultPopupPage() {
   }, []);
 
   const handleSearch = async (page = 1) => {
-    setSelectedIndex(-1);
     setSelectedRow(null);
     await loadRows(page, filters);
   };
 
-  /** Applies server sorting while keeping the current search filters. */
-  const handleSortChange = async (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setSelectedIndex(-1);
+  /** CS 검색 카드와 동일하게 조건과 선택 결과를 기본값으로 되돌린다. */
+  const handleReset = async () => {
+    setFilters(DEFAULT_FILTERS);
+    setSelectedSwagePrcsFclt("0");
     setSelectedRow(null);
-    await loadRows(1, filters, nextSort);
+    await loadRows(1, DEFAULT_FILTERS);
   };
 
   const handleRowClick = (index?: number) => {
@@ -204,7 +198,6 @@ export default function InftwtResultPopupPage() {
     const row = rows[index];
     if (!row) return;
 
-    setSelectedIndex(index);
     setSelectedRow(row);
     postRowSelectMessage(row);
   };
@@ -217,8 +210,12 @@ export default function InftwtResultPopupPage() {
 
     try {
       setIsLoading(true);
-      const response = await getData(`v1/inftwtAnlsRslt/ppl/${selectedRow.inftwtAnlsSn}`);
-      const excelRows = Array.isArray(response?.content) ? response.content : [];
+      const response = await getData(
+        `v1/inftwtAnlsRslt/ppl/${selectedRow.inftwtAnlsSn}`,
+      );
+      const excelRows = Array.isArray(response?.content)
+        ? response.content
+        : [];
 
       await downloadExcelWithKoreanHeaders({
         data: excelRows as JSON[],
@@ -226,7 +223,7 @@ export default function InftwtResultPopupPage() {
         sheetNameArray: ["침입수 분석결과"],
         headerRange: "A1:D1",
         headerMapping: {
-          inftwtAnlsSn: "침입수분석\n일련번호",
+          inftwtAnlsSn: "침입수분석\n분석번호",
           pplMngNo: "관로\n관리번호",
           anlsTm: "분석시각",
           predcOilq: "예측유량\n(m³/h)",
@@ -241,141 +238,138 @@ export default function InftwtResultPopupPage() {
   };
 
   return (
-    <main className="sn-popup-page">
+    <StandardPopupLayout
+      title={windowPopupDefinitions.inftwtResultPopup.title}
+      bodyClassName="overflow-x-hidden"
+    >
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">침입수 분석결과</h1>
-      </header>
-
-      <section className="sn-popup-section overflow-y-auto">
-        <div className="rounded-md border border-border bg-secondary p-4">
-          <div className="flex flex-wrap items-center gap-3">
-            <div className="flex items-center gap-2">
-              <span className="whitespace-nowrap text-[1.05rem] font-medium text-label">상수사용기간</span>
-              <DateMonthPicker
-                field={{
-                  value: filters.aplcnYmFrom,
-                  onChange: (value: string) => {
-                    setFilters((current) => ({
-                      ...current,
-                      aplcnYmFrom: value,
-                    }));
-                  },
-                }}
-                selectClass="w-[145px]"
-                startYear={1900}
-              />
-              <span className="text-[1.1rem] font-semibold text-muted-foreground">~</span>
-              <DateMonthPicker
-                field={{
-                  value: filters.aplcnYmTo,
-                  onChange: (value: string) => {
-                    setFilters((current) => ({
-                      ...current,
-                      aplcnYmTo: value,
-                    }));
-                  },
-                }}
-                selectClass="w-[145px]"
-                startYear={1900}
-              />
-            </div>
-
-            <div className="min-w-0 flex-1 overflow-x-auto">
-              <CtpvSggPrcsFcltSelectBox
-                sido={filters.ctpvCd}
-                sigungu={filters.sggCd}
-                sggName={filters.sggName}
-                onSidoChange={(value) => {
-                  setSelectedSwagePrcsFclt("0");
-                  setFilters((current) => ({
-                    ...current,
-                    ctpvCd: value,
-                    sggCd: "0",
-                    sggName: "",
-                    swtrmtFcltNm: "",
-                  }));
-                }}
-                onSigunguChange={(value) => {
-                  setSelectedSwagePrcsFclt("0");
-                  setFilters((current) => ({
-                    ...current,
-                    sggCd: value,
-                    swtrmtFcltNm: "",
-                  }));
-                }}
-                setSggName={(value) => {
-                  setSelectedSwagePrcsFclt("0");
-                  setFilters((current) => ({
-                    ...current,
-                    sggName: value ?? "",
-                    swtrmtFcltNm: "",
-                  }));
-                }}
-                selectedSwagePrcsFclt={selectedSwagePrcsFclt}
-                onSwagePrcsFcltChange={setSelectedSwagePrcsFclt}
-                setSwtrmtFcltNm={(value) =>
-                  setFilters((current) => ({
-                    ...current,
-                    swtrmtFcltNm: value ?? "",
-                  }))
-                }
-                setIsLoading={setIsLoading}
-              />
-            </div>
-
-            <div className="ml-auto flex items-center gap-2">
-              <Button
-                type="button"
-                size="sm"
-                color="primary"
-                className="h-10 px-5 !text-[1.1rem]"
-                onClick={() => void handleSearch(1)}
-              >
-                조회
-              </Button>
-              <Button
-                type="button"
-                color="green"
-                size="sm"
-                className="h-10 px-5 !text-[1.1rem]"
-                onClick={() => void handleDownload()}
-              >
-                다운로드
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-4">
-          <UiTable<InftwtResultRow>
-            headName={<>{`분석이력 총 ${total.toLocaleString()}건`}</>}
-            tableData={rows}
-            headlist={INFTWT_RESULT_SORTABLE_HEADLIST}
-            pageSize={INFTWT_RESULT_PAGE_SIZE}
-            total={total}
-            cellClick={(index) => handleRowClick(index)}
-            cellClassName={(_, headId) =>
-              headId === "anlsInfo"
-                ? "whitespace-normal break-all leading-[1.35]"
-                : ""
-            }
-            onPageChange={(page) => void handleSearch(page)}
-            curPage={currentPage}
-            index={selectedIndex}
-            widthFixed={true}
-            sort={sort}
-            onSortChange={(nextSort) => void handleSortChange(nextSort)}
+      <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+        <div className="flex shrink-0 items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] font-medium text-label">
+            상수사용기간
+          </span>
+          <DateMonthPicker
+            field={{
+              value: filters.aplcnYmFrom,
+              onChange: (value: string) => {
+                setFilters((current) => ({
+                  ...current,
+                  aplcnYmFrom: value,
+                }));
+              },
+            }}
+            selectClass="w-[145px] !text-[1.3rem]"
+            startYear={1900}
+          />
+          <span className="text-[1.1rem] font-semibold text-muted-foreground">
+            ~
+          </span>
+          <DateMonthPicker
+            field={{
+              value: filters.aplcnYmTo,
+              onChange: (value: string) => {
+                setFilters((current) => ({
+                  ...current,
+                  aplcnYmTo: value,
+                }));
+              },
+            }}
+            selectClass="w-[145px] !text-[1.3rem]"
+            startYear={1900}
           />
         </div>
 
-        {selectedRow ? (
-          <div className="mt-3 rounded-md border border-border bg-secondary px-4 py-3 text-[1rem] text-label">
-            {"선택 분석: "}
-            <span className="font-semibold text-foreground">{selectedRow.anlsInfo}</span>
-          </div>
-        ) : null}
-      </section>
-    </main>
+        <div className="min-w-0 shrink-0">
+          <CtpvSggPrcsFcltSelectBox
+            compact
+            className="!justify-start"
+            selectValueClassName="!text-[1.3rem]"
+            sido={filters.ctpvCd}
+            sigungu={filters.sggCd}
+            sggName={filters.sggName}
+            onSidoChange={(value) => {
+              setSelectedSwagePrcsFclt("0");
+              setFilters((current) => ({
+                ...current,
+                ctpvCd: value,
+                sggCd: "0",
+                sggName: "",
+                swtrmtFcltNm: "",
+              }));
+            }}
+            onSigunguChange={(value) => {
+              setSelectedSwagePrcsFclt("0");
+              setFilters((current) => ({
+                ...current,
+                sggCd: value,
+                swtrmtFcltNm: "",
+              }));
+            }}
+            setSggName={(value) => {
+              setSelectedSwagePrcsFclt("0");
+              setFilters((current) => ({
+                ...current,
+                sggName: value ?? "",
+                swtrmtFcltNm: "",
+              }));
+            }}
+            selectedSwagePrcsFclt={selectedSwagePrcsFclt}
+            onSwagePrcsFcltChange={setSelectedSwagePrcsFclt}
+            setSwtrmtFcltNm={(value) =>
+              setFilters((current) => ({
+                ...current,
+                swtrmtFcltNm: value ?? "",
+              }))
+            }
+            setIsLoading={setIsLoading}
+          />
+        </div>
+
+        <div className="ml-auto flex shrink-0 items-center justify-end gap-2">
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void handleSearch(1)}
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => void handleReset()}
+          >
+            초기화
+          </Button>
+        </div>
+      </PopupSearchPanel>
+
+      <MapPopupDataTable
+        rows={rows as Array<InftwtResultRow & Record<string, unknown>>}
+        headlist={INFTWT_RESULT_HEADLIST}
+        title="침입수 분석결과 목록"
+        total={total}
+        page={currentPage}
+        pageSize={INFTWT_RESULT_PAGE_SIZE}
+        onPageChange={(page) => void handleSearch(page)}
+        onRowClick={(_, index) => handleRowClick(index)}
+        rowId={(row) => String(row.inftwtAnlsSn)}
+        scrollMode="horizontal"
+        minTableWidth="110rem"
+        actions={
+          <Button type="button" onClick={() => void handleDownload()}>
+            엑셀다운로드
+          </Button>
+        }
+      />
+
+      {selectedRow ? (
+        <div className="rounded-sm border border-border bg-secondary px-4 py-3 text-[1rem] text-label">
+          {"선택 분석: "}
+          <span className="font-semibold text-foreground">
+            {selectedRow.anlsInfo}
+          </span>
+        </div>
+      ) : null}
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts b/apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts
index 11984c8e1..c36e83898 100644
--- a/apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts
+++ b/apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts
@@ -11,6 +11,7 @@ import { intersects as intersectsExtent } from "ol/extent";
 
 import { getRawJson } from "@/components/lib/api";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { useAlertStore } from "@/shared/lib";
 
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
 import { getSigunguCenter, moveMapToCenter, sidoCenter } from "@common/business_components/ui/map/searchBar/utils";
@@ -194,6 +195,7 @@ export const useInftwtResultMap = ({
   setIsOpen,
   setIsSearchModalOpen,
 }: UseInftwtResultMapParams) => {
+  const alert = useAlertStore((state) => state.setMessage);
   const activeResultRowRef = useRef<InftwtResultRow | null>(null);
   const zoneLayerRef = useRef<VectorLayer<any> | null>(null);
   const zoneSourceRef = useRef<VectorSource | null>(null);
@@ -433,10 +435,10 @@ export const useInftwtResultMap = ({
         void renderMapView(mapView);
       } catch (error) {
         console.error("移⑥엯??遺꾩꽍寃곌낵 吏€???곌퀎 以??ㅻ쪟:", error);
-        alert("移⑥엯??遺꾩꽍寃곌낵瑜?吏€?꾩뿉 ?곌퀎?섏? 紐삵뻽?듬땲??");
+        alert("침입수 분석결과를 지도에 연계하지 못했습니다.");
       }
     },
-    [renderMapView, setFeatureData, setIsOpen, setIsSearchModalOpen],
+    [alert, renderMapView, setFeatureData, setIsOpen, setIsSearchModalOpen],
   );
 
   useEffect(() => {
@@ -494,11 +496,11 @@ export const useInftwtResultMap = ({
     });
 
     if (!popupWindow) {
-      alert("?앹뾽??李⑤떒?섏뿀?듬땲?? 釉뚮씪?곗? ?앹뾽 ?덉슜 ?ㅼ젙???뺤씤?댁＜?몄슂.");
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
     }
 
     return true;
-  }, [activeMapView]);
+  }, [activeMapView, alert]);
 
   return {
     activeMapView,
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
index c57dde03a..761f38ff1 100644
--- a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
@@ -3,13 +3,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Button, Input } from "@common/components";
-import { UiTable } from "@common/business_components/ui/table";
-import type { UiTableSort } from "@common/business_components/ui/table";
+import { StandardPopupLayout } from "@common/business_components";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
 import { getData } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import useStore from "@/store/useStore";
+import { useAlertStore } from "@/shared/lib";
 import { useUserStore } from "@/shared/lib/use-user-store";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import {
   PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS,
   PIPE_ANALYSIS_DETAIL_EXCEL_HEADERS,
@@ -44,21 +46,15 @@ const PIPE_ANALYSIS_DETAIL_EXPORT_KEYS = [
   "prlgVl",
   "materialName",
 ] as const;
-// 표시명 열은 원천 코드로, NO 열은 서버의 전체 순번 계약으로 정렬한다.
-const PIPE_ANALYSIS_DETAIL_SORT_KEYS: Record<string, string> = {
-  useNm: "useCd",
-  materialName: "materialCode",
-};
-const PIPE_ANALYSIS_DETAIL_SORTABLE_HEADLIST = PIPE_ANALYSIS_DETAIL_HEADLIST.map((head) => ({
-  ...head,
-  sortable: true,
-  sortKey: PIPE_ANALYSIS_DETAIL_SORT_KEYS[head.id] ?? head.id,
-}));
+const PIPE_ANALYSIS_DETAIL_STANDARD_HEADLIST = PIPE_ANALYSIS_DETAIL_HEADLIST;
 
 const resolveErrorMessage = (error: unknown, fallbackMessage: string) =>
-  error instanceof Error && error.message.trim() ? error.message : fallbackMessage;
+  error instanceof Error && error.message.trim()
+    ? error.message
+    : fallbackMessage;
 
 export default function PipeAnalysisDetailPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   const searchParams = useSearchParams();
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   const userInfo = useUserStore((state) => state.userInfo);
@@ -71,32 +67,42 @@ export default function PipeAnalysisDetailPopupPage() {
     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 [appliedFilters, setAppliedFilters] = 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,
+        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 [appliedFilters, setAppliedFilters] =
+    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 [sort, setSort] = useState<UiTableSort>();
-  const [appliedSort, setAppliedSort] = useState<UiTableSort>();
   const [isLoading, setIsLoading] = useState(false);
   const initializedRef = useRef(false);
 
@@ -111,7 +117,11 @@ export default function PipeAnalysisDetailPopupPage() {
   }, [scope]);
 
   const fetchRows = useCallback(
-    async (page: number, nextFilters: PipeAnalysisDetailFilters, size: number, nextSort?: UiTableSort) => {
+    async (
+      page: number,
+      nextFilters: PipeAnalysisDetailFilters,
+      size: number,
+    ) => {
       const params = new URLSearchParams({
         analysisType: baseAnalysisType,
         page: String(page - 1),
@@ -120,20 +130,30 @@ export default function PipeAnalysisDetailPopupPage() {
 
       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.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 (nextSort) params.set("sort", `${nextSort.key},${nextSort.direction}`);
+      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 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),
+        rows: toPipeAnalysisDetailViewRows(
+          responseRows as PipeAnalysisDetailRow[],
+          ctpv,
+          sgg,
+        ),
         total: Number(response?.count ?? 0),
       };
     },
@@ -141,25 +161,30 @@ export default function PipeAnalysisDetailPopupPage() {
   );
 
   const loadRows = useCallback(
-    async (page = 1, nextFilters = filters, nextSort = sort) => {
+    async (page = 1, nextFilters = filters) => {
       setIsLoading(true);
       try {
-        const response = await fetchRows(page, nextFilters, PIPE_ANALYSIS_DETAIL_PAGE_SIZE, nextSort);
+        const response = await fetchRows(
+          page,
+          nextFilters,
+          PIPE_ANALYSIS_DETAIL_PAGE_SIZE,
+        );
         setRows(response.rows);
         setTotal(response.total);
         setCurrentPage(page);
         setAppliedFilters(nextFilters);
-        setAppliedSort(nextSort);
       } catch (error) {
         console.error("관로현황 조회 중 오류:", error);
-        alert(resolveErrorMessage(error, "관로현황 조회 중 오류가 발생했습니다."));
+        alert(
+          resolveErrorMessage(error, "관로현황 조회 중 오류가 발생했습니다."),
+        );
         setRows([]);
         setTotal(0);
       } finally {
         setIsLoading(false);
       }
     },
-    [fetchRows, filters, sort],
+    [alert, fetchRows, filters],
   );
 
   useEffect(() => {
@@ -171,29 +196,16 @@ export default function PipeAnalysisDetailPopupPage() {
   }, [ctpv.length, filters, loadRows, scope, sgg.length]);
 
   const handleSearch = () => {
-    setSelectedIndex(-1);
     const nextFilters = applyScopeToDetailFilters(filters, scope);
-    void loadRows(1, nextFilters, sort);
+    void loadRows(1, nextFilters);
   };
 
-  /** Keeps the last searched filters and sort when the user moves pages. */
+  /** Keeps the last searched filters when the user moves pages. */
   const handlePageChange = (page: number) => {
-    setSelectedIndex(-1);
-    void loadRows(page, appliedFilters, appliedSort);
+    void loadRows(page, appliedFilters);
   };
 
-  /** Reloads the first server page with the selected grid sort. */
-  const handleSortChange = (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setSelectedIndex(-1);
-    void loadRows(1, appliedFilters, nextSort);
-  };
-  const handleRowClick = (index?: number) => {
-    if (typeof index !== "number") return;
-    const row = rows[index];
-    if (!row) return;
-
-    setSelectedIndex(index);
+  const handleRowClick = (row: DetailViewRow) => {
     const targetWindow = window.opener?.opener ?? window.opener;
     targetWindow?.postMessage(
       {
@@ -212,7 +224,11 @@ export default function PipeAnalysisDetailPopupPage() {
 
     try {
       setIsLoading(true);
-      const response = await fetchRows(1, appliedFilters, Math.max(total, 1000), appliedSort);
+      const response = await fetchRows(
+        1,
+        appliedFilters,
+        Math.max(total, 1000),
+      );
       const exportRows = response.rows.map((row) => ({
         rowNo: row.rowNo,
         ctpvNm: row.ctpvNm,
@@ -224,7 +240,8 @@ export default function PipeAnalysisDetailPopupPage() {
         useNm: row.useNm,
         pdmtVl: row.pdmtVl,
         prlgVl: row.prlgVl,
-        materialName: resolveMaterialKoreanName(row.materialCode) || row.materialName,
+        materialName:
+          resolveMaterialKoreanName(row.materialCode) || row.materialName,
       }));
       const detailHeaderRange = `A1:${String.fromCharCode(64 + PIPE_ANALYSIS_DETAIL_EXPORT_KEYS.length)}1`;
       await downloadExcelWithKoreanHeaders({
@@ -236,7 +253,9 @@ export default function PipeAnalysisDetailPopupPage() {
       });
     } catch (error) {
       console.error("관로현황 다운로드 중 오류:", error);
-      alert(resolveErrorMessage(error, "관로현황 다운로드 중 오류가 발생했습니다."));
+      alert(
+        resolveErrorMessage(error, "관로현황 다운로드 중 오류가 발생했습니다."),
+      );
     } finally {
       setIsLoading(false);
     }
@@ -273,147 +292,187 @@ export default function PipeAnalysisDetailPopupPage() {
 
   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 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) || "";
+      (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);
+    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));
+    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]);
+  }, [
+    baseAnalysisType,
+    baseElapsedYearBucket,
+    baseMaterialCode,
+    ctpv,
+    filters.ctpvCd,
+    filters.sggCd,
+    filters.swtrmtZoneNm,
+    rows,
+    sgg,
+  ]);
 
   return (
-    <main className="sn-popup-page">
+    <StandardPopupLayout
+      title={`관로현황 목록${titleSuffix}`}
+      bodyClassName="overflow-x-hidden"
+    >
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">관로현황{titleSuffix}</h1>
-      </header>
-
-      <section className="sn-popup-section overflow-y-hidden">
-        <div className="grid grid-cols-1 gap-3 border-b border-border bg-secondary 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-label">용도</div>
-            <select
-              className="sn-popup-input !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-label">관재질</div>
-            <select
-              className="sn-popup-input !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-label">관경 시작</div>
-            <Input
-              className="sn-popup-input !text-[1.1rem]"
-              value={filters.diameterFrom}
-              onChange={(event) =>
-                setFilters((current) => ({
-                  ...current,
-                  diameterFrom: normalizeNumberInput(event.target.value),
-                }))
-              }
-              onKeyDown={(event) => {
-                if (event.key === "Enter") handleSearch();
-              }}
-            />
-          </label>
-
-          <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-label">관경 종료</div>
-            <Input
-              className="sn-popup-input !text-[1.1rem]"
-              value={filters.diameterTo}
-              onChange={(event) =>
-                setFilters((current) => ({
-                  ...current,
-                  diameterTo: normalizeNumberInput(event.target.value),
-                }))
-              }
-              onKeyDown={(event) => {
-                if (event.key === "Enter") handleSearch();
-              }}
-            />
-          </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}
-            >
-              조회
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="green"
-              className="h-10 px-5 !text-[1.1rem]"
-              onClick={() => void handleDownload()}
-            >
-              다운로드
-            </Button>
+      <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            용도
           </div>
-        </div>
+          <select
+            className="sn-popup-input w-[14rem] !h-[3.2rem] !text-xl"
+            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>
 
-        <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-2">
-          <UiTable<DetailViewRow>
-            headName={<>관로현황 조회 결과 총 {total.toLocaleString()}건</>}
-            tableData={rows}
-            headlist={PIPE_ANALYSIS_DETAIL_SORTABLE_HEADLIST}
-            pageSize={PIPE_ANALYSIS_DETAIL_PAGE_SIZE}
-            total={total}
-            cellClick={(index) => handleRowClick(index)}
-            onPageChange={handlePageChange}
-            curPage={currentPage}
-            index={selectedIndex}
-            widthFixed={true}
-            className="!m-0 overflow-x-hidden"
-            sort={sort}
-            onSortChange={handleSortChange}
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            관재질
+          </div>
+          <select
+            className="sn-popup-input w-[14rem] !h-[3.2rem] !text-xl"
+            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="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            관경 시작
+          </div>
+          <Input
+            className="sn-popup-input w-[12rem] !h-[3.2rem] !text-xl"
+            value={filters.diameterFrom}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                diameterFrom: normalizeNumberInput(event.target.value),
+              }))
+            }
+            onKeyDown={(event) => {
+              if (event.key === "Enter") handleSearch();
+            }}
           />
+        </label>
+
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            관경 종료
+          </div>
+          <Input
+            className="sn-popup-input w-[12rem] !h-[3.2rem] !text-xl"
+            value={filters.diameterTo}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                diameterTo: normalizeNumberInput(event.target.value),
+              }))
+            }
+            onKeyDown={(event) => {
+              if (event.key === "Enter") handleSearch();
+            }}
+          />
+        </label>
+
+        <div className="flex min-w-fit flex-1 items-center justify-end gap-2">
+          <Button type="button" color="primary" onClick={handleSearch}>
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => {
+              const resetFilters = 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,
+              );
+              setFilters(resetFilters);
+              void loadRows(1, resetFilters);
+            }}
+          >
+            초기화
+          </Button>
         </div>
-      </section>
-    </main>
+      </PopupSearchPanel>
+
+      <MapPopupDataTable
+        rows={rows as Array<DetailViewRow & Record<string, unknown>>}
+        headlist={PIPE_ANALYSIS_DETAIL_STANDARD_HEADLIST}
+        title="관로현황 목록"
+        total={total}
+        page={currentPage}
+        pageSize={PIPE_ANALYSIS_DETAIL_PAGE_SIZE}
+        onPageChange={handlePageChange}
+        onRowClick={handleRowClick}
+        rowId={(row, index) => String(row.fid ?? row.fcltMngNo ?? index)}
+        scrollMode="horizontal"
+        minTableWidth="150rem"
+        actions={
+          <Button type="button" onClick={() => void handleDownload()}>
+            엑셀다운로드
+          </Button>
+        }
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
index 0d47ba116..a0df537f9 100644
--- a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
@@ -1,16 +1,27 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Table, TableBody, TableCell, TableHeader, TableHead, TableRow } from "@common/components";
-import { UiTable } from "@common/business_components/ui/table";
-import type { UiTableSort } from "@common/business_components/ui/table";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHead,
+  TableRow,
+} from "@common/components";
+import { StandardPopupLayout } from "@common/business_components";
 import UiPageNations from "@common/business_components/ui/table/uiPageNations";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
 import { getData } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import useStore from "@/store/useStore";
+import { useAlertStore } from "@/shared/lib";
 import { useUserStore } from "@/shared/lib/use-user-store";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import {
   PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS,
   PIPE_ANALYSIS_TYPE_OPTIONS,
@@ -36,13 +47,6 @@ const SUMMARY_FILE_PREFIX: Record<string, string> = {
   YEAR_MATERIAL: "관로분석_경과년도별_관재질별",
 };
 const PIPE_ANALYSIS_SUMMARY_PAGE_SIZE = 10;
-const YEAR_MATERIAL_SORTABLE_KEYS = new Set([
-  "rowNo",
-  "ctpvNm",
-  "sggNm",
-  "swtrmtZoneNm",
-  "totalLengthKm",
-]);
 
 const toExcelColumnName = (index: number) => {
   let current = index;
@@ -69,104 +73,31 @@ const formatGridNumber = (value: unknown) => {
 };
 
 const resolveErrorMessage = (error: unknown, fallbackMessage: string) =>
-  error instanceof Error && error.message.trim() ? error.message : fallbackMessage;
-const KOREAN_GRID_COLLATOR = new Intl.Collator("ko", {
-  numeric: true,
-  sensitivity: "base",
-});
-
-/** Sorts the complete summary result before client-side pagination. */
-const sortSummaryRows = (
-  sourceRows: PipeAnalysisSummaryViewRow[],
-  sort?: UiTableSort,
-) => {
-  if (!sort) return sourceRows;
-
-  const sortableRows = sourceRows.filter((row) => !row.__isNoZone && !row.__isSummaryTotal);
-  const pinnedRows = sourceRows.filter((row) => row.__isNoZone || row.__isSummaryTotal);
-
-  sortableRows.sort((left, right) => {
-    const leftValue = left[sort.key];
-    const rightValue = right[sort.key];
-    const leftEmpty = leftValue === null || leftValue === undefined || leftValue === "";
-    const rightEmpty = rightValue === null || rightValue === undefined || rightValue === "";
-
-    if (leftEmpty || rightEmpty) {
-      if (leftEmpty && rightEmpty) return 0;
-      return leftEmpty ? 1 : -1;
-    }
-
-    const leftNumber = typeof leftValue === "number" ? leftValue : Number.NaN;
-    const rightNumber = typeof rightValue === "number" ? rightValue : Number.NaN;
-    const compared = Number.isFinite(leftNumber) && Number.isFinite(rightNumber)
-      ? leftNumber - rightNumber
-      : KOREAN_GRID_COLLATOR.compare(String(leftValue), String(rightValue));
-
-    return sort.direction === "asc" ? compared : -compared;
-  });
-
-  return [...sortableRows, ...pinnedRows];
-};
-
-const getYearMaterialGroupSortValue = (
-  group: PipeAnalysisYearMaterialGroup,
-  key: string,
-) => {
-  switch (key) {
-    case "rowNo":
-      return group.rowNo;
-    case "ctpvNm":
-      return group.ctpvNm;
-    case "sggNm":
-      return group.sggNm;
-    case "swtrmtZoneNm":
-      return group.swtrmtZoneNm;
-    case "totalLengthKm":
-      return group.totalLengthKm;
-    default:
-      return group.rows.reduce((sum, row) => sum + Number(row.metrics[key] ?? 0), 0);
-  }
-};
-
-const sortYearMaterialGroups = (
-  groups: PipeAnalysisYearMaterialGroup[],
-  sort?: UiTableSort,
-) => {
-  if (!sort || !YEAR_MATERIAL_SORTABLE_KEYS.has(sort.key)) return groups;
-
-  const sortedGroups = [...groups];
-  sortedGroups.sort((left, right) => {
-    const leftValue = getYearMaterialGroupSortValue(left, sort.key);
-    const rightValue = getYearMaterialGroupSortValue(right, sort.key);
-    const compared = typeof leftValue === "number" && typeof rightValue === "number"
-      ? leftValue - rightValue
-      : KOREAN_GRID_COLLATOR.compare(String(leftValue), String(rightValue));
-
-    if (compared !== 0) {
-      return sort.direction === "asc" ? compared : -compared;
-    }
-
-    return KOREAN_GRID_COLLATOR.compare(left.swtrmtZoneNm, right.swtrmtZoneNm);
-  });
-
-  return sortedGroups;
-};
+  error instanceof Error && error.message.trim()
+    ? error.message
+    : fallbackMessage;
 
 export default function PipeAnalysisPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   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 [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 [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 [zoneOptions, setZoneOptions] = useState<
+    Array<{ value: string; label: string }>
+  >([]);
   const [summaryCurrentPage, setSummaryCurrentPage] = useState(1);
-  const [sort, setSort] = useState<UiTableSort>();
   const [isLoading, setIsLoading] = useState(false);
   const initializedRef = useRef(false);
 
@@ -212,8 +143,10 @@ export default function PipeAnalysisPopupPage() {
 
       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);
+      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()}`,
@@ -239,14 +172,19 @@ export default function PipeAnalysisPopupPage() {
         await fetchSummary(scopedFilters);
       } catch (error) {
         console.error("관로분석 집계 조회 중 오류:", error);
-        alert(resolveErrorMessage(error, "관로분석 집계 조회 중 오류가 발생했습니다."));
+        alert(
+          resolveErrorMessage(
+            error,
+            "관로분석 집계 조회 중 오류가 발생했습니다.",
+          ),
+        );
         setRows([]);
         setMaterialColumns([]);
       } finally {
         setIsLoading(false);
       }
     },
-    [draftFilters, fetchSummary, scope],
+    [alert, draftFilters, fetchSummary, scope],
   );
 
   useEffect(() => {
@@ -269,81 +207,98 @@ export default function PipeAnalysisPopupPage() {
         materialColumns,
       );
       const headerRange = `A1:${toExcelColumnName(exportHeadList.length)}1`;
-      const mergeRanges = appliedFilters.analysisType === "YEAR_MATERIAL"
-        ? (() => {
-          const ranges: string[] = [];
-          let currentRow = 2;
+      const mergeRanges =
+        appliedFilters.analysisType === "YEAR_MATERIAL"
+          ? (() => {
+              const ranges: string[] = [];
+              let currentRow = 2;
 
-          orderedYearMaterialGroups.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}`);
+              orderedYearMaterialGroups.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;
               });
-            }
-            currentRow += rowSpan;
-          });
 
-          return ranges;
-        })()
-        : [];
-      const exportRows = appliedFilters.analysisType === "YEAR_MATERIAL"
-        ? orderedYearMaterialGroups.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,
-            };
+              return ranges;
+            })()
+          : [];
+      const exportRows =
+        appliedFilters.analysisType === "YEAR_MATERIAL"
+          ? orderedYearMaterialGroups.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;
+                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;
             });
-
-            return exportRow;
-          }),
-        )
-        : sortedRows.map((row) => {
-          const exportRow: Record<string, unknown> = {};
-          exportHeadList.forEach((head) => {
-            exportRow[head.id] = row[head.id];
-          });
-          return exportRow;
-      });
       await downloadExcelWithKoreanHeaders({
         data: exportRows as unknown as JSON[],
         fileName: `${SUMMARY_FILE_PREFIX[appliedFilters.analysisType]}_${buildPipeAnalysisFileDate()}`,
         sheetNameArray: ["관로분석 현황"],
         headerRange,
-        headerMapping: buildPipeAnalysisSummaryDownloadHeaders(appliedFilters.analysisType, materialColumns),
+        headerMapping: buildPipeAnalysisSummaryDownloadHeaders(
+          appliedFilters.analysisType,
+          materialColumns,
+        ),
         mergeRanges,
       });
     } catch (error) {
       console.error("관로분석 집계 다운로드 중 오류:", error);
-      alert(resolveErrorMessage(error, "관로분석 집계 다운로드 중 오류가 발생했습니다."));
+      alert(
+        resolveErrorMessage(
+          error,
+          "관로분석 집계 다운로드 중 오류가 발생했습니다.",
+        ),
+      );
     }
   };
 
-  const handleCellClick = (index?: number, columnId?: string) => {
-    if (typeof index !== "number" || !columnId) return;
-    const row = pagedRows[index];
-    if (!row) return;
+  const handleCellClick = (
+    row: PipeAnalysisSummaryViewRow,
+    columnId: string,
+  ) => {
     if (row.__isNoZone || row.__isSummaryTotal) return;
     const cellFilter = row.__cellFilters[columnId];
     if (!cellFilter) return;
 
-    openWindowPopup("pipeAnalysisDetailPopup", {
+    const popup = 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),
+      swtrmtZoneNm: String(
+        row.__base.swtrmtZoneNm || appliedFilters.swtrmtZoneNm,
+      ),
       elapsedYearBucket: cellFilter.elapsedYearBucket ?? "",
       materialCode: cellFilter.materialCode ?? "",
       scopeRegionCode: scope.regionCode,
     });
+    if (!popup) {
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
+    }
   };
 
   const handleYearMaterialCellClick = (
@@ -354,55 +309,68 @@ export default function PipeAnalysisPopupPage() {
     const cellFilter = row.cellFilters[columnId];
     if (!cellFilter) return;
 
-    openWindowPopup("pipeAnalysisDetailPopup", {
+    const popup = 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),
+      swtrmtZoneNm: String(
+        group.base.swtrmtZoneNm || appliedFilters.swtrmtZoneNm,
+      ),
       elapsedYearBucket: cellFilter.elapsedYearBucket ?? "",
       materialCode: cellFilter.materialCode ?? "",
       scopeRegionCode: scope.regionCode,
     });
+    if (!popup) {
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
+    }
   };
 
   const headList = useMemo(
-    () => buildPipeAnalysisSummaryHeadList(appliedFilters.analysisType, materialColumns).map((head) => ({ ...head, sortable: true })),
+    () =>
+      buildPipeAnalysisSummaryHeadList(
+        appliedFilters.analysisType,
+        materialColumns,
+      ),
     [appliedFilters.analysisType, materialColumns],
   );
 
-  const sortedRows = useMemo(
-    () => sortSummaryRows(rows, sort),
-    [rows, sort],
-  );
-
   const yearMaterialGroups = useMemo(
-    () => appliedFilters.analysisType === "YEAR_MATERIAL"
-      ? buildPipeAnalysisYearMaterialGroups(rows, materialColumns)
-      : [],
+    () =>
+      appliedFilters.analysisType === "YEAR_MATERIAL"
+        ? buildPipeAnalysisYearMaterialGroups(rows, materialColumns)
+        : [],
     [appliedFilters.analysisType, materialColumns, rows],
   );
-  const sortedYearMaterialGroups = useMemo(
-    () => sortYearMaterialGroups(yearMaterialGroups, sort),
-    [sort, yearMaterialGroups],
-  );
   const orderedYearMaterialGroups = useMemo(
-    () => sortedYearMaterialGroups.map((group, index) => ({
-      ...group,
-      rowNo: sort?.key === "rowNo" && sort.direction === "desc"
-        ? sortedYearMaterialGroups.length - index
-        : index + 1,
-    })),
-    [sort, sortedYearMaterialGroups],
+    () =>
+      yearMaterialGroups.map((group, index) => ({
+        ...group,
+        rowNo: yearMaterialGroups.length - index,
+      })),
+    [yearMaterialGroups],
   );
 
   const useHorizontalScrollTable = appliedFilters.analysisType !== "YEAR";
-  const summaryPageOffset = (summaryCurrentPage - 1) * PIPE_ANALYSIS_SUMMARY_PAGE_SIZE;
+  const summaryPageOffset =
+    (summaryCurrentPage - 1) * PIPE_ANALYSIS_SUMMARY_PAGE_SIZE;
   const pagedRows = useMemo(
     () =>
       appliedFilters.analysisType === "YEAR_MATERIAL"
         ? rows
-        : sortedRows.slice(summaryPageOffset, summaryPageOffset + PIPE_ANALYSIS_SUMMARY_PAGE_SIZE),
-    [appliedFilters.analysisType, rows, sortedRows, summaryPageOffset],
+        : rows.slice(
+            summaryPageOffset,
+            summaryPageOffset + PIPE_ANALYSIS_SUMMARY_PAGE_SIZE,
+          ),
+    [appliedFilters.analysisType, rows, summaryPageOffset],
+  );
+  const clickableHeadIds = useMemo(
+    () =>
+      headList
+        .filter((head) =>
+          rows.some((row) => Boolean(row.__cellFilters[head.id])),
+        )
+        .map((head) => head.id),
+    [headList, rows],
   );
   const visibleYearMaterialGroups = useMemo(
     () =>
@@ -412,316 +380,303 @@ export default function PipeAnalysisPopupPage() {
       ),
     [orderedYearMaterialGroups, summaryPageOffset],
   );
-  const summaryTotalCount = appliedFilters.analysisType === "YEAR_MATERIAL"
-    ? orderedYearMaterialGroups.length
-    : rows.length;
-
   const sggOptions = useMemo(
     () =>
       draftFilters.ctpvCd === "0"
         ? sgg
-        : sgg.filter((item) => String(item.val).startsWith(draftFilters.ctpvCd.slice(0, 2))),
+        : sgg.filter((item) =>
+            String(item.val).startsWith(draftFilters.ctpvCd.slice(0, 2)),
+          ),
     [draftFilters.ctpvCd, sgg],
   );
 
   return (
-    <main className="sn-popup-page">
+    <StandardPopupLayout
+      title={windowPopupDefinitions.pipeAnalysisPopup.title}
+      bodyClassName="overflow-x-hidden"
+    >
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">관로분석</h1>
-      </header>
+      <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+        <label className="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            시도
+          </div>
+          <select
+            className="sn-popup-input !h-[3.2rem] w-[14rem] !text-xl"
+            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>
 
-      <section className="sn-popup-section overflow-y-auto">
-        <div className="grid grid-cols-1 gap-3 border-b border-border bg-secondary 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-label">시도</div>
-            <select
-              className="sn-popup-input !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="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            시군구
+          </div>
+          <select
+            className="sn-popup-input !h-[3.2rem] w-[14rem] !text-xl"
+            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-label">시군구</div>
-            <select
-              className="sn-popup-input !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="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            처리구역
+          </div>
+          <select
+            className="sn-popup-input !h-[3.2rem] w-[14rem] !text-xl"
+            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-label">처리구역</div>
-            <select
-              className="sn-popup-input !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="flex shrink-0 items-center gap-2">
+          <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+            분석구분
+          </div>
+          <select
+            className="sn-popup-input !h-[3.2rem] w-[18rem] !text-xl"
+            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>
 
-          <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-label">분석구분</div>
-            <select
-              className="sn-popup-input !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 min-w-fit flex-1 items-center justify-end gap-2">
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void handleSearch()}
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => {
+              const resetFilters = applyScopeToSummaryFilters(
+                PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS,
+                scope,
+              );
+              setDraftFilters(resetFilters);
+              void handleSearch(resetFilters);
+            }}
+          >
+            초기화
+          </Button>
+        </div>
+      </PopupSearchPanel>
 
-          <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()}
-            >
-              다운로드
+      {appliedFilters.analysisType === "YEAR_MATERIAL" ? (
+        <div className="card card-border !m-0 min-w-0 overflow-hidden !p-0">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              {resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 목록
+            </h3>
+            <Button type="button" onClick={() => void handleDownload()}>
+              엑셀다운로드
             </Button>
           </div>
-        </div>
-
-        {appliedFilters.analysisType === "YEAR_MATERIAL" ? (
-          <>
-            <div className="card-header">
-              <h3 className="text-2xl font-medium text-label">
-                {resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 관로현황 {summaryTotalCount.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-secondary px-4 py-[1.2rem] text-[1.3rem] font-medium text-label ${
-                          head.align === "right" ? "text-right" : "text-center"
-                        }`}
-                        aria-sort={
-                          head.id === "elapsedYearLabel"
-                            ? undefined
-                            : sort?.key === head.id
-                              ? sort.direction === "asc"
-                                ? "ascending"
-                                : "descending"
-                              : "none"
-                        }
+          <div className="card !m-[1.2rem] overflow-x-auto !p-0">
+            <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-primary px-4 py-[1.2rem] text-center text-[1.3rem] font-medium text-primary-foreground"
+                    >
+                      {head.id === "rowNo" ? "순번" : head.title}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody className="text-center">
+                {visibleYearMaterialGroups.length > 0 ? (
+                  visibleYearMaterialGroups.flatMap((group) =>
+                    group.rows.map((yearRow, rowIndex) => (
+                      <TableRow
+                        key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}`}
                       >
-                        {!YEAR_MATERIAL_SORTABLE_KEYS.has(head.id) ? (
-                          head.title
-                        ) : (
-                          <button
-                            type="button"
-                            className="inline-flex w-full items-center justify-center gap-1.5"
-                            aria-label={`${head.title} 정렬`}
-                            onClick={() => {
-                              if (sort?.key !== head.id) {
-                                setSort({ key: head.id, direction: "asc" });
-                                setSummaryCurrentPage(1);
-                                return;
-                              }
-                              if (sort.direction === "asc") {
-                                setSort({ key: head.id, direction: "desc" });
-                                setSummaryCurrentPage(1);
-                                return;
-                              }
-                              setSort(undefined);
-                              setSummaryCurrentPage(1);
-                            }}
-                          >
-                            <span>{head.title}</span>
-                            {sort?.key === head.id ? (
-                              <span
-                                className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
-                                aria-hidden="true"
-                              >
-                                {sort.direction === "asc" ? "▲" : "▼"}
-                              </span>
-                            ) : (
-                              <span
-                                className="inline-flex flex-col items-center gap-px text-[6px] leading-none text-[#475569]"
-                                aria-hidden="true"
-                              >
-                                <span>▲</span>
-                                <span>▼</span>
-                              </span>
-                            )}
-                          </button>
-                        )}
-                      </TableHead>
-                    ))}
+                        {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-primary 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-label"
+                    >
+                      조회 결과가 없습니다.
+                    </TableCell>
                   </TableRow>
-                </TableHeader>
-                <TableBody className="text-center">
-                  {visibleYearMaterialGroups.length > 0 ? (
-                    visibleYearMaterialGroups.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-primary 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-label">
-                        조회 결과가 없습니다.
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          {orderedYearMaterialGroups.length >
+          PIPE_ANALYSIS_SUMMARY_PAGE_SIZE ? (
+            <div className="mb-[1.2rem] flex justify-center">
+              <UiPageNations
+                total={orderedYearMaterialGroups.length}
+                cur={summaryCurrentPage}
+                pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
+                onPageChange={setSummaryCurrentPage}
+              />
             </div>
-            {orderedYearMaterialGroups.length > PIPE_ANALYSIS_SUMMARY_PAGE_SIZE ? (
-              <div className="flex justify-center">
-                <UiPageNations
-                  total={orderedYearMaterialGroups.length}
-                  cur={summaryCurrentPage}
-                  pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
-                  onPageChange={setSummaryCurrentPage}
-                />
-              </div>
-            ) : null}
-          </>
-        ) : null}
+          ) : null}
+        </div>
+      ) : null}
 
-        <UiTable<PipeAnalysisSummaryViewRow>
-          className={appliedFilters.analysisType === "YEAR_MATERIAL"
-            ? "hidden"
-            : useHorizontalScrollTable
-              ? "overflow-x-auto overflow-y-visible [&_table]:min-w-full [&_table]:w-max"
-              : ""}
-          headName={
-            appliedFilters.analysisType === "YEAR_MATERIAL"
-              ? `경과년도&재질 관로현황 ${summaryTotalCount.toLocaleString("ko-KR")}건`
-              : `관로분석현황 ${summaryTotalCount.toLocaleString("ko-KR")}건`
+      {appliedFilters.analysisType !== "YEAR_MATERIAL" ? (
+        <MapPopupDataTable
+          rows={
+            pagedRows as Array<
+              PipeAnalysisSummaryViewRow & Record<string, unknown>
+            >
           }
-          tableData={pagedRows}
           headlist={headList}
-          pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
+          title={`${resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 목록`}
           total={rows.length}
-          cellClick={(index, columnId) =>
-            handleCellClick(
-              typeof index === "number" ? index + summaryPageOffset : index,
-              columnId,
-            )}
+          page={summaryCurrentPage}
+          pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
           onPageChange={setSummaryCurrentPage}
-          curPage={summaryCurrentPage}
-          widthFixed={!useHorizontalScrollTable}
-          isHideCount={true}
-          sort={sort}
-          onSortChange={(nextSort) => {
-            setSort(nextSort);
-            setSummaryCurrentPage(1);
-          }}
-          cellClassName={(row, columnId) =>
-            !row.__isNoZone && row.__cellFilters[columnId]
-              ? "cursor-pointer font-semibold text-blue-700 underline underline-offset-2"
-              : ""
+          scrollMode={useHorizontalScrollTable ? "horizontal" : "none"}
+          minTableWidth={useHorizontalScrollTable ? "160rem" : "100%"}
+          clickableHeadIds={clickableHeadIds}
+          onCellClick={(row, _rowIndex, columnId) =>
+            handleCellClick(row, columnId)
+          }
+          rowId={(row, index) =>
+            `${String(row.__base.ctpvCd)}-${String(row.__base.sggCd)}-${String(row.__base.swtrmtZoneNm)}-${index}`
+          }
+          actions={
+            <Button type="button" onClick={() => void handleDownload()}>
+              엑셀다운로드
+            </Button>
           }
         />
-      </section>
-    </main>
+      ) : null}
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts
index fddb1717c..8f292878d 100644
--- a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/pipeAnalysisUtils.ts
@@ -2,12 +2,10 @@
 
 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";
+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 const PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE =
+  "SN_PIPE_ANALYSIS_DETAIL_ROW_SELECT";
 
 export type PipeAnalysisType = "YEAR" | "MATERIAL" | "YEAR_MATERIAL";
 
@@ -126,22 +124,30 @@ export type PipeAnalysisYearMaterialGroup = {
   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]));
+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 }> = [
+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_SUMMARY_DEFAULT_FILTERS: PipeAnalysisSummaryFilters =
+  {
+    analysisType: "YEAR",
+    ctpvCd: "0",
+    sggCd: "0",
+    swtrmtZoneNm: "0",
+    scopeRegionCode: "",
+  };
 
 export const PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS: PipeAnalysisDetailFilters = {
   ctpvCd: "0",
@@ -172,7 +178,7 @@ const elapsedYearBucketLabelMap: Record<string, string> = {
 const YEAR_MATERIAL_BASE_BUCKETS = ["LT10", "Y10_20", "Y20_30", "GE30"];
 
 export const PIPE_ANALYSIS_DETAIL_HEADLIST = [
-  { id: "rowNo", title: "NO", widthPercent: 6 },
+  { id: "rowNo", title: "순번", widthPercent: 6 },
   { id: "ctpvNm", title: "시도", widthPercent: 9 },
   { id: "sggNm", title: "시군구", widthPercent: 10 },
   { id: "fcltMngNo", title: "시설관리번호", widthPercent: 15 },
@@ -185,7 +191,9 @@ export const PIPE_ANALYSIS_DETAIL_HEADLIST = [
   { id: "materialName", title: "관재질", widthPercent: 12 },
 ];
 
-export const buildPipeAnalysisScope = (userInfo: IUserInfo | null): PipeAnalysisScope => {
+export const buildPipeAnalysisScope = (
+  userInfo: IUserInfo | null,
+): PipeAnalysisScope => {
   const admin = userInfo?.adminRoleYn === "Y";
   if (admin) {
     return {
@@ -263,11 +271,16 @@ export const buildPipeAnalysisSummaryHeadList = (
   materialColumns: PipeAnalysisMaterialColumn[],
 ) => {
   const common = [
-    { id: "rowNo", title: "NO", widthPercent: 6 },
+    { id: "rowNo", title: "순번", 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" },
+    {
+      id: "totalLengthKm",
+      title: "합계(km)",
+      widthPercent: 10,
+      align: "right",
+    },
   ];
 
   if (analysisType === "YEAR") {
@@ -309,12 +322,17 @@ export const buildPipeAnalysisSummaryViewRows = (
 
   return response.data.map((row) => {
     const isNoZone = String(row.swtrmtZoneNm ?? "").trim() === "NO_ZONE";
-    const isSummaryTotal = !String(row.ctpvCd ?? "").trim()
-      && String(row.swtrmtZoneNm ?? "").trim() === "-";
+    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),
+      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 ?? "",
@@ -357,16 +375,18 @@ export const buildPipeAnalysisSummaryViewRows = (
       return viewRow;
     }
 
-    const columns = response.analysisType === "YEAR_MATERIAL"
-      ? materialCodes
-      : materialCodes;
+    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,
+          elapsedYearBucket:
+            response.analysisType === "YEAR_MATERIAL"
+              ? row.elapsedYearBucket
+              : undefined,
           materialCode: columnKey === "OTHER" ? "" : columnKey,
         };
       }
@@ -416,14 +436,19 @@ export const buildPipeAnalysisYearMaterialGroups = (
 
     group.rows.push({
       elapsedYearBucket,
-      elapsedYearLabel: String(row.elapsedYearLabel ?? resolveElapsedYearBucketLabel(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 rowByBucket = new Map(
+      group.rows.map((row) => [row.elapsedYearBucket, row]),
+    );
     const orderedBuckets = [...YEAR_MATERIAL_BASE_BUCKETS];
 
     if (rowByBucket.has("UNKNOWN")) {
@@ -474,7 +499,7 @@ export const buildPipeAnalysisSummaryDownloadHeaders = (
   materialColumns: PipeAnalysisMaterialColumn[],
 ) => {
   const headers: Record<string, string> = {
-    rowNo: "NO",
+    rowNo: "순번",
     ctpvNm: "시도",
     sggNm: "시군구",
     swtrmtZoneNm: "처리구역",
@@ -499,7 +524,7 @@ export const buildPipeAnalysisSummaryDownloadHeaders = (
 };
 
 export const PIPE_ANALYSIS_DETAIL_EXCEL_HEADERS = {
-  rowNo: "NO",
+  rowNo: "순번",
   ctpvNm: "시도",
   sggNm: "시군구",
   fcltMngNo: "시설관리번호",
@@ -548,7 +573,9 @@ const toKoreanMaterialLabel = (value?: string) => {
   const parenthesisMatches = Array.from(normalized.matchAll(/\(([^)]*)\)/g))
     .map((match) => String(match[1] ?? "").trim())
     .filter(Boolean);
-  const koreanParenthesisText = parenthesisMatches.find((text) => /[가-힣]/.test(text));
+  const koreanParenthesisText = parenthesisMatches.find((text) =>
+    /[가-힣]/.test(text),
+  );
 
   if (koreanParenthesisText) {
     const simplifiedParenthesisText = koreanParenthesisText
@@ -561,7 +588,9 @@ const toKoreanMaterialLabel = (value?: string) => {
   return normalized;
 };
 
-export const resolveMaterialColumnName = (column: PipeAnalysisMaterialColumn) => {
+export const resolveMaterialColumnName = (
+  column: PipeAnalysisMaterialColumn,
+) => {
   const rawName = String(column.materialName ?? "").trim();
   const rawCode = String(column.materialCode ?? "").trim();
   const rawKey = String(column.key ?? "").trim();
@@ -592,8 +621,8 @@ export const resolveElapsedYearBucketLabel = (bucket?: string) => {
 export const resolvePipeAnalysisTypeLabel = (analysisType?: string) => {
   const normalized = String(analysisType ?? "").trim();
   return (
-    PIPE_ANALYSIS_TYPE_OPTIONS.find((option) => option.value === normalized)?.label
-    ?? normalized
+    PIPE_ANALYSIS_TYPE_OPTIONS.find((option) => option.value === normalized)
+      ?.label ?? normalized
   );
 };
 
@@ -611,12 +640,16 @@ export const resolveRegionName = (
   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;
+  return (
+    options.find((item) => String(item.val).trim() === prefix)?.text ?? prefix
+  );
 };
 
-export const normalizeNumberInput = (value: string) => value.replace(/[^0-9]/g, "");
+export const normalizeNumberInput = (value: string) =>
+  value.replace(/[^0-9]/g, "");
 
-export const buildPipeAnalysisFileDate = () => new Date().toISOString().slice(0, 10);
+export const buildPipeAnalysisFileDate = () =>
+  new Date().toISOString().slice(0, 10);
 
 export const fetchPipeAnalysisZoneOptions = async ({
   ctpvCd,
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 6a11df513..3a070cce1 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창 (우수토실)
- * 
+ *
  * 📄 Ssc
  * 우수토실 정보 컴포넌트
  *
@@ -8,53 +8,78 @@
  * - 중점우수토실 운영정보 모달 표시 (강우/측정 정보, 수량/수질측정 정보)
  * - VerticalTable을 통한 입력 폼 렌더링
  * - 저장 버튼을 통한 데이터 저장 기능
- * 
+ *
  * 🔗 사용 API
  * - 위경도로 강우시 미처리 하수 목록 조회: GET /api/v1/onsemiro/getSwgRainsByGeomety (sewerage-service)
  * - 강우시 월류 하수 관리 모니터링 조회: GET /api/v1/onsemiro/swgRain/{adstDstrCd}/{manageNo}/mntrngs (sewerage-service)
  */
-'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';
+"use client";
+import { StandardPopupLayout } from "@common/business_components/ui";
+import { Button } 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';
-import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
+import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { useAlertStore } from "@/shared/lib";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
 
 const inputColumn = [
-  { id: "prrtymngYn", title: "중점여부", type: "select", options: ["우수토실", "중점우수토실"] },
+  {
+    id: "prrtymngYn",
+    title: "중점여부",
+    type: "select",
+    options: ["우수토실", "중점우수토실"],
+  },
   { id: "swtrmtZoneNm", title: "처리구역", type: "input" },
 ];
 
-const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, renderMode = 'inline' }: {
-  featureData: any,
-  isMainSsc?: boolean,
-  chmbrXcnts?: string,
-  chmbrYdnts?: string,
-  onSaveClick?: () => void,
-  renderMode?: 'inline' | 'popup'
+const toStandardHeadList = (headlist: typeof untrtSwgRainCol3) =>
+  headlist.map((head) => ({
+    ...head,
+    title: ["no", "rowNo", "rowNumber"].includes(head.id) ? "순번" : head.title,
+  }));
+
+const Ssc = ({
+  featureData,
+  isMainSsc,
+  chmbrXcnts,
+  chmbrYdnts,
+  onSaveClick,
+  renderMode = "inline",
+}: {
+  featureData: any;
+  isMainSsc?: boolean;
+  chmbrXcnts?: string;
+  chmbrYdnts?: string;
+  onSaveClick?: () => void;
+  renderMode?: "inline" | "popup";
 }) => {
+  const alert = useAlertStore((state) => state.setMessage);
   const [formData, setFormData] = useState<any>({});
-  const [rainMeasureData, setRainMeasureData] = 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);
+  const fetchRainMeasureData = async (
+    chmbrXcnts: string,
+    chmbrYdnts: string,
+  ) => {
     if (!chmbrXcnts || !chmbrYdnts) {
-      console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { chmbrXcnts, chmbrYdnts });
+      console.warn("추가 데이터 호출 실패: 필수 매개변수 누락", {
+        chmbrXcnts,
+        chmbrYdnts,
+      });
       return [];
     }
 
@@ -63,17 +88,21 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
         chmbrXcnts: chmbrXcnts,
         chmbrYdnts: chmbrYdnts,
         page: `${curPage - 1}`,
-        size: '3',
+        size: "3",
       });
 
-      const result = await getRawJson(`/sewerage-service/api/v1/onsemiro/getSwgRainsByGeomety?${queryParams.toString()}`);
+      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})?$/);
+        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}`;
@@ -86,45 +115,70 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
       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 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) : '-', // 수질 측정종료일(채수종료일)
+          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);
+      console.error("추가 데이터 로딩 실패:", error);
       return [];
     }
   };
 
   // 수량/수질측정 정보 API 호출 함수
   const fetchMntrngsData = async (adstDstrCd: string, manageNo: string) => {
-    setIsResetDetailPage(true);
     if (!adstDstrCd || !manageNo) {
-      console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { adstDstrCd, manageNo });
+      console.warn("추가 데이터 호출 실패: 필수 매개변수 누락", {
+        adstDstrCd,
+        manageNo,
+      });
       return [];
     }
 
     try {
       const queryParams = new URLSearchParams({
         page: `${curDetailPage - 1}`,
-        size: '3',
+        size: "3",
       });
 
-      const result = await getRawJson(`/sewerage-service/api/v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
+      const result = await getRawJson(
+        `/sewerage-service/api/v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`,
+      );
 
       // 각 아이템 전처리
       const processedDataArray = result.content.map((data: any) => {
@@ -138,17 +192,16 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
       setMntrngsData(processedDataArray);
       setTotalDetailCount(result?.totalElements || 0);
     } catch (error) {
-      console.error('추가 데이터 로딩 실패:', error);
+      console.error("추가 데이터 로딩 실패:", error);
       return [];
     }
   };
 
-
   // 🎯 추가 데이터는 별도 useEffect로 비동기 로딩
   useEffect(() => {
     // 강우/측정 정보 데이터 호출
     if (isMainSsc && chmbrXcnts && chmbrYdnts) {
-      fetchRainMeasureData(chmbrXcnts, chmbrYdnts)
+      fetchRainMeasureData(chmbrXcnts, chmbrYdnts);
     }
   }, [chmbrXcnts, chmbrYdnts]);
 
@@ -160,7 +213,7 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
     });
 
     if (!popupWindow) {
-      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
     }
   };
 
@@ -175,14 +228,17 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
   // 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);
+    if (chmbrXcnts && chmbrYdnts && selectedRowIndex !== -1)
+      fetchMntrngsData(
+        rainMeasureData[selectedRowIndex].adstDstrCd,
+        rainMeasureData[selectedRowIndex].manageNo,
+      );
   }, [curDetailPage]);
 
   // 폼 데이터가 변경될 때 호출될 핸들러
@@ -199,86 +255,72 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
   };
 
   // 테이블 셀 클릭 핸들러 추가
-  const handleCellClick = async (index: number | undefined, headId: string) => {
-    if (index !== undefined && rainMeasureData) {
-      await fetchMntrngsData(rainMeasureData[index].adstDstrCd, rainMeasureData[index].manageNo);
+  const handleCellClick = async (
+    _row: Record<string, unknown>,
+    index: number,
+  ) => {
+    if (rainMeasureData[index]) {
+      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" />
+    <div className="grid grid-cols-1 gap-4">
+      <div className="space-y-4">
         {/* 강우정보 테이블 */}
-        <UiTable
-          headName=''
-          tableData={rainMeasureData}
-          headlist={untrtSwgRainCol3}
+        <MapPopupDataTable
+          title="강우정보 목록"
+          rows={rainMeasureData}
+          headlist={toStandardHeadList(untrtSwgRainCol3)}
           pageSize={3}
-          total={0}
-          cellClick={handleCellClick}
+          total={totalCount}
+          page={curPage}
+          onCellClick={handleCellClick}
           onPageChange={setCurPage}
-          resetPageNo={isResetPage}
-          resetSelection={isResetSelection}
-          index={selectedRowIndex}
+          viewPagination={false}
+          scrollMode="horizontal"
+          minTableWidth="72rem"
         />
 
         {/* 측정정보 테이블 */}
-        <UiTable
-          headName=''
-          tableData={rainMeasureData}
-          headlist={untrtSwgRainCol4}
+        <MapPopupDataTable
+          title="측정정보 목록"
+          rows={rainMeasureData}
+          headlist={toStandardHeadList(untrtSwgRainCol4)}
           pageSize={3}
           total={totalCount}
-          cellClick={handleCellClick}
+          page={curPage}
+          onCellClick={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>
+          scrollMode="horizontal"
+          minTableWidth="88rem"
+        />
       </div>
 
-      <div className='border rounded-lg pt-4 bg-white'>
+      <div>
         {/* 수량/수질측정 정보 테이블 */}
-        <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}
+        <MapPopupDataTable
+          title="수량·수질측정 목록"
+          rows={mntrngsData}
+          headlist={toStandardHeadList(untrtSwgRainCol5)}
           pageSize={3}
           total={totalDetailCount}
-          cellClick={undefined}
+          page={curDetailPage}
           onPageChange={setCurDetailPage}
-          resetPageNo={isResetDetailPage}
         />
       </div>
     </div>
-  )
+  );
 
   return (
     <div>
       {!isMainSsc && (
         <VerticalTable
-          headName='입력정보'
+          headName="입력정보"
           tableData={featureData ? [formData] : []}
           headlist={inputColumn}
           pageSize={0}
@@ -286,7 +328,7 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
           cellClick={undefined}
           isEditable={true}
           onPageChange={function (): void {
-            throw new Error('Function not implemented.');
+            throw new Error("Function not implemented.");
           }}
           showSaveButton={true}
           onSaveClick={handleSaveClick}
@@ -294,13 +336,16 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
         />
       )}
 
-      {isMainSsc && renderMode !== 'popup' && (
+      {isMainSsc && renderMode !== "popup" && (
         <div>
           <div className="card-header">
-            <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
+            <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'
+            className="mx-auto mt-3 block w-64"
+            color="white"
             onClick={openDetailPopup}
           >
             상세보기
@@ -308,14 +353,13 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick, rend
         </div>
       )}
 
-      {isMainSsc && renderMode === 'popup' && (
-        <div className="min-h-dvh bg-white p-4">
-          <h1 className="mb-3 text-2xl font-semibold text-gray-900">중점우수토실 운영정보</h1>
+      {isMainSsc && renderMode === "popup" && (
+        <StandardPopupLayout title="중점우수토실 운영정보">
           {renderModalBody()}
-        </div>
+        </StandardPopupLayout>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Ssc
+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 78e082414..aaee3f048 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtFclt.tsx
@@ -13,6 +13,7 @@ import React from 'react'
 import { VerticalTable } from '@/components/ui/verticalTable';
 import { Button } from '@common/components/ui';
 import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
+import { useAlertStore } from '@/shared/lib';
 
 // 하수처리시설
 const headList = [
@@ -20,6 +21,7 @@ const headList = [
 ];
 
 const SwtrmtFclt = ({ gisObject }: { gisObject: any }) => {
+  const alert = useAlertStore((state) => state.setMessage);
   const ctpvNm = gisObject?.ctpv_nm;
   const sggNm = gisObject?.sgg_nm;
 
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx
index 545fc4163..68ee568c1 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx
@@ -1,7 +1,19 @@
 "use client";
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Table, TableBody, TableCell, TableRow } from "@common/components";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@common/components";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
 import Feature from "ol/Feature.js";
 import GeoJSON from "ol/format/GeoJSON.js";
@@ -12,6 +24,7 @@ import Style from "ol/style/Style.js";
 
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import { useAlertStore } from "@/shared/lib";
 import {
   fetchSwtrmtPrcsZoneAnalysis,
   getSwtrmtPrcsZoneId,
@@ -22,7 +35,10 @@ import type {
   SwtrmtPrcsZoneAnalysisResponse,
 } from "./swtrmtPrcsZoneAnalysisApi";
 
-const analysisRows: { key: keyof NonNullable<SwtrmtPrcsZoneAnalysisResponse["analysis"]>; title: string }[] = [
+const analysisRows: {
+  key: keyof NonNullable<SwtrmtPrcsZoneAnalysisResponse["analysis"]>;
+  title: string;
+}[] = [
   { key: "total", title: "전체" },
   { key: "combined", title: "합류관" },
   { key: "rain", title: "우수관" },
@@ -40,11 +56,17 @@ const selectedRepairHistoryStyle = new Style({
 });
 
 const formatValue = (value: unknown, unit = "") => {
-  if (value === null || value === undefined || value === "") return "데이터 없음";
+  if (value === null || value === undefined || value === "")
+    return "데이터 없음";
 
-  const numberValue = typeof value === "number" ? value : Number(String(value).replaceAll(",", ""));
+  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 });
+    const formatted = numberValue.toLocaleString("ko-KR", {
+      maximumFractionDigits: 2,
+    });
     return unit ? `${formatted}${unit}` : formatted;
   }
 
@@ -69,26 +91,24 @@ 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>
+    <div className="mx-3 mb-2 mt-1 text-xl 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">
+              <TableCell className="w-[120px] whitespace-nowrap bg-secondary text-[13px] font-bold text-label">
                 {row.title}
               </TableCell>
               <TableCell className="text-[13px]">
-                {isLoading ? "조회 중" : formatValue(metric[field])}
+                {formatValue(metric[field])}
               </TableCell>
             </TableRow>
           );
@@ -106,9 +126,11 @@ const SwtrmtPrcsZoneAnalysis = ({
   featureData: any;
   rawFeatureData?: any;
 }) => {
+  const alert = useAlertStore((state) => state.setMessage);
   const { gisMap } = useGisContext() as unknown as { gisMap: any };
   // 기존 처리구역 관로분석 정보의 조회 상태다.
-  const [analysisData, setAnalysisData] = useState<SwtrmtPrcsZoneAnalysisResponse | null>(null);
+  const [analysisData, setAnalysisData] =
+    useState<SwtrmtPrcsZoneAnalysisResponse | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   // 보수이력 지도 레이어는 React 렌더링 대상이 아니므로 ref로 보관해 팝업 종료·구역 전환 때 제거한다.
@@ -127,7 +149,9 @@ const SwtrmtPrcsZoneAnalysis = ({
       rawValues?.swtrmtFcltCd,
       featureData?.swtrmt_fclt_cd,
       featureData?.swtrmtFcltCd,
-    ].filter(Boolean).join("|");
+    ]
+      .filter(Boolean)
+      .join("|");
   }, [featureData, rawFeatureData]);
 
   const zoneId = useMemo(
@@ -144,56 +168,69 @@ const SwtrmtPrcsZoneAnalysis = ({
   }, [gisMap]);
 
   /** 윈도우 팝업 조회 결과 전체를 청록색 관로 레이어로 교체한다. */
-  const replaceRepairLayer = useCallback((rows: RepairHistoryRow[]) => {
-    if (!gisMap) return;
-    clearRepairLayer();
+  const replaceRepairLayer = useCallback(
+    (rows: RepairHistoryRow[]) => {
+      if (!gisMap) return;
+      clearRepairLayer();
 
-    const format = new GeoJSON();
-    const projection = gisMap.getView()?.getProjection();
-    const features = rows.flatMap((row) => {
-      if (!row.geometryJson) return [];
-      try {
-        const geometry = format.readGeometry(JSON.parse(row.geometryJson), {
-          dataProjection: "EPSG:3857",
-          featureProjection: projection,
-        });
-        const feature = new Feature({ geometry, repairFid: row.fid });
-        feature.setId(`repair-history-${row.fid}`);
-        return [feature];
-      } catch (error) {
-        console.warn("보수이력 관로 도형을 읽지 못했습니다.", row.fid, error);
-        return [];
-      }
-    });
+      const format = new GeoJSON();
+      const projection = gisMap.getView()?.getProjection();
+      const features = rows.flatMap((row) => {
+        if (!row.geometryJson) return [];
+        try {
+          const geometry = format.readGeometry(JSON.parse(row.geometryJson), {
+            dataProjection: "EPSG:3857",
+            featureProjection: projection,
+          });
+          const feature = new Feature({ geometry, repairFid: row.fid });
+          feature.setId(`repair-history-${row.fid}`);
+          return [feature];
+        } catch (error) {
+          console.warn("보수이력 관로 도형을 읽지 못했습니다.", row.fid, error);
+          return [];
+        }
+      });
 
-    if (features.length === 0) return;
-    const layer = new VectorLayer({
-      source: new VectorSource({ features }),
-      style: (feature) => feature.get("repairSelected") ? selectedRepairHistoryStyle : repairHistoryStyle,
-    });
-    layer.set("repairHistoryLayer", true);
-    layer.setZIndex(10020);
-    gisMap.addLayer(layer);
-    repairLayerRef.current = layer;
-  }, [clearRepairLayer, gisMap]);
+      if (features.length === 0) return;
+      const layer = new VectorLayer({
+        source: new VectorSource({ features }),
+        style: (feature) =>
+          feature.get("repairSelected")
+            ? selectedRepairHistoryStyle
+            : repairHistoryStyle,
+      });
+      layer.set("repairHistoryLayer", true);
+      layer.setZIndex(10020);
+      gisMap.addLayer(layer);
+      repairLayerRef.current = layer;
+    },
+    [clearRepairLayer, gisMap],
+  );
 
   /** 팝업에서 클릭한 관로를 붉게 선택하고 부모 지도를 해당 범위로 이동한다. */
-  const focusRepairFeature = useCallback((fid: string) => {
-    const features = repairLayerRef.current?.getSource()?.getFeatures() ?? [];
-    const selectedFeature = features.find((feature) => String(feature.get("repairFid")) === String(fid));
-    if (!selectedFeature || !gisMap) return;
+  const focusRepairFeature = useCallback(
+    (fid: string) => {
+      const features = repairLayerRef.current?.getSource()?.getFeatures() ?? [];
+      const selectedFeature = features.find(
+        (feature) => String(feature.get("repairFid")) === String(fid),
+      );
+      if (!selectedFeature || !gisMap) return;
 
-    features.forEach((feature) => feature.set("repairSelected", feature === selectedFeature));
-    repairLayerRef.current?.changed();
-    const extent = selectedFeature.getGeometry()?.getExtent();
-    if (extent) {
-      gisMap.getView().fit(extent, {
-        padding: [100, 100, 100, 460],
-        duration: 350,
-        maxZoom: 18,
-      });
-    }
-  }, [gisMap]);
+      features.forEach((feature) =>
+        feature.set("repairSelected", feature === selectedFeature),
+      );
+      repairLayerRef.current?.changed();
+      const extent = selectedFeature.getGeometry()?.getExtent();
+      if (extent) {
+        gisMap.getView().fit(extent, {
+          padding: [100, 100, 100, 460],
+          duration: 350,
+          maxZoom: 18,
+        });
+      }
+    },
+    [gisMap],
+  );
 
   useEffect(() => {
     let isMounted = true;
@@ -202,18 +239,27 @@ const SwtrmtPrcsZoneAnalysis = ({
 
     const loadAnalysis = async () => {
       try {
-        const data = await fetchSwtrmtPrcsZoneAnalysis(rawFeatureData, featureData);
+        const data = await fetchSwtrmtPrcsZoneAnalysis(
+          rawFeatureData,
+          featureData,
+        );
         if (!isMounted) return;
         if (!data) {
           setAnalysisData(null);
-          setErrorMessage("처리구역 식별값이 없어 관로분석정보를 조회하지 못했습니다.");
+          setErrorMessage(
+            "처리구역 식별값이 없어 관로분석정보를 조회하지 못했습니다.",
+          );
           return;
         }
         setAnalysisData(data);
       } catch (error) {
         if (!isMounted) return;
         setAnalysisData(null);
-        setErrorMessage(error instanceof Error ? error.message : "관로분석정보를 불러오지 못했습니다.");
+        setErrorMessage(
+          error instanceof Error
+            ? error.message
+            : "관로분석정보를 불러오지 못했습니다.",
+        );
       } finally {
         if (isMounted) setIsLoading(false);
       }
@@ -232,8 +278,12 @@ const SwtrmtPrcsZoneAnalysis = ({
       const messageZoneId = String(data?.payload?.zoneId ?? "").trim();
       if (!messageZoneId || messageZoneId !== zoneId) return;
 
-      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SHOW_RESULTS) {
-        replaceRepairLayer(Array.isArray(data.payload?.rows) ? data.payload.rows : []);
+      if (
+        data?.type === WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SHOW_RESULTS
+      ) {
+        replaceRepairLayer(
+          Array.isArray(data.payload?.rows) ? data.payload.rows : [],
+        );
         return;
       }
       if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SELECT_PIPE) {
@@ -246,7 +296,8 @@ const SwtrmtPrcsZoneAnalysis = ({
     };
 
     window.addEventListener("message", handleRepairPopupMessage);
-    return () => window.removeEventListener("message", handleRepairPopupMessage);
+    return () =>
+      window.removeEventListener("message", handleRepairPopupMessage);
   }, [clearRepairLayer, focusRepairFeature, replaceRepairLayer, zoneId]);
 
   useEffect(() => {
@@ -276,7 +327,10 @@ const SwtrmtPrcsZoneAnalysis = ({
     clearRepairLayer();
     const popup = openWindowPopup("repairHistoryPopup", {
       zoneId,
-      zoneName: analysisData?.zone?.swtrmtZoneNm ?? featureData?.swtrmt_zone_nm ?? featureData?.swtrmtZoneNm,
+      zoneName:
+        analysisData?.zone?.swtrmtZoneNm ??
+        featureData?.swtrmt_zone_nm ??
+        featureData?.swtrmtZoneNm,
     });
     if (!popup) {
       alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
@@ -288,11 +342,12 @@ const SwtrmtPrcsZoneAnalysis = ({
   return (
     <>
       <div className="card-header flex items-center justify-between">
-        <h3 className="text-2xl mx-3 font-medium text-label">처리구역내 관로분석정보</h3>
+        <h3 className="mx-3 text-2xl font-medium text-label">
+          처리구역내 관로분석정보
+        </h3>
         <Button
           type="button"
-          size="sm"
-          className="mr-3 bg-blue-600 text-white hover:bg-blue-700"
+          className="hover:bg-primary/90 mr-3 bg-primary text-primary-foreground"
           onClick={handleOpenRepairHistory}
           data-testid="repair-history-open"
         >
@@ -306,15 +361,23 @@ const SwtrmtPrcsZoneAnalysis = ({
               {errorMessage}
             </div>
           ) : null}
-          {metricGroups.map((group) => (
-            <MetricVerticalGrid
-              key={group.title}
-              title={group.title}
-              field={group.field}
-              analysis={analysisData?.analysis}
-              isLoading={isLoading}
-            />
-          ))}
+          {isLoading ? (
+            <div
+              role="status"
+              className="flex min-h-[12rem] items-center justify-center rounded-md border border-border bg-background text-[1.2rem] text-muted-foreground"
+            >
+              관로분석정보를 조회하고 있습니다.
+            </div>
+          ) : (
+            metricGroups.map((group) => (
+              <MetricVerticalGrid
+                key={group.title}
+                title={group.title}
+                field={group.field}
+                analysis={analysisData?.analysis}
+              />
+            ))
+          )}
         </div>
       </div>
     </>
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 0cbd1e36c..c75fcdb5e 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
@@ -1,18 +1,21 @@
-'use client'
+"use client";
 
-import React, { useEffect, useMemo, useState } from 'react';
-import moment from 'moment';
+import React, { useEffect, useMemo, useState } from "react";
+import moment from "moment";
 
 import {
   CHART_FORM,
   type ChartConfig,
   MainChart,
-} from '@common/business_components';
-import { SelectBox } from '@common/business_components/ui';
-import { Button, Input, Label } from '@common/components';
+  StandardFormField,
+  StandardFormSection,
+  StandardPopupLayout,
+} from "@common/business_components";
+import { SelectBox } from "@common/business_components/ui";
+import { Button, Input } from "@common/components";
 
-import type { TInftwtAnls, TInftwtAnlsRslt, TOilqData } from './aplcnYms';
-import * as fn from './aplcnYms';
+import type { TInftwtAnls, TInftwtAnlsRslt, TOilqData } from "./aplcnYms";
+import * as fn from "./aplcnYms";
 
 type ModalOpenProp = {
   pplMngNo?: string;
@@ -27,43 +30,46 @@ type DataType = {
   val: number;
 };
 
-const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: "선택" }];
 
 const InfilChart = ({
-  pplMngNo = '',
+  pplMngNo = "",
   inftwtAnlsSn = 0,
-  aplcnYm = '',
-  analysisInfo = '',
+  aplcnYm = "",
+  analysisInfo = "",
   resultOnly = false,
 }: ModalOpenProp) => {
-  const [selectedAplcnYm, setSelectedAplcnYm] = useState('');
+  const [selectedAplcnYm, setSelectedAplcnYm] = useState("");
   const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
-  const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
-    INITIAL_ANALYSIS_OPTIONS,
-  );
+  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[] }>({
+  const [chartData, setChartData] = useState<{
+    chartData1: DataType[];
+    chartData2: DataType[];
+  }>({
     chartData1: [],
     chartData2: [],
   });
-  const [inftwtQty, setInftwtQty] = useState<string>('0');
+  const [inftwtQty, setInftwtQty] = useState<string>("0");
 
-  const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt');
-  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
-  const isResultOnlyMode = resultOnly && inftwtAnlsSn > 0 && Boolean(normalizedPplMngNo);
+  const aplcnYms = fn.useAplcnYms("inftwtAnlsRslt");
+  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : "";
+  const isResultOnlyMode =
+    resultOnly && inftwtAnlsSn > 0 && Boolean(normalizedPplMngNo);
 
   const chartForm = CHART_FORM.LINE;
   const chartConfig = {
-    chartData1: { label: '순오수량', color: 'red' },
-    chartData2: { label: '실측하수량', color: 'orange' },
+    chartData1: { label: "순오수량", color: "red" },
+    chartData2: { label: "실측하수량", color: "orange" },
   } as ChartConfig;
 
   const hasChartData = useMemo(() => {
     return chartData.chartData1.length > 0 || chartData.chartData2.length > 0;
   }, [chartData]);
 
-
   const calculateFallbackInftwtQty = (
     inftwtAnlsRslt: TInftwtAnlsRslt[],
     oilqRows: TOilqData[],
@@ -79,26 +85,28 @@ const InfilChart = ({
       return 0;
     }
 
-    const avgPredc = predcValues.reduce((sum, value) => sum + value, 0) / predcValues.length;
-    const avgOilq = oilqValues.reduce((sum, value) => sum + value, 0) / oilqValues.length;
+    const avgPredc =
+      predcValues.reduce((sum, value) => sum + value, 0) / predcValues.length;
+    const avgOilq =
+      oilqValues.reduce((sum, value) => sum + value, 0) / oilqValues.length;
     const dailyQty = (avgOilq - avgPredc) * 24;
     return Math.round(dailyQty / 10) * 10;
   };
 
   const resetState = () => {
-    setSelectedAplcnYm('');
+    setSelectedAplcnYm("");
     setInftwtAnlss([]);
     setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
     setInftwtAnls(null);
     setSelectedInftwtAnls(0);
     setChartData({ chartData1: [], chartData2: [] });
-    setInftwtQty('0');
+    setInftwtQty("0");
   };
 
   const loadResultChart = async (targetInftwtAnlsSn: number) => {
     if (!targetInftwtAnlsSn || !normalizedPplMngNo) {
       setChartData({ chartData1: [], chartData2: [] });
-      setInftwtQty('0');
+      setInftwtQty("0");
       return;
     }
 
@@ -106,13 +114,15 @@ const InfilChart = ({
       const [inftwtAnlsRslt, oilq, qty] = await Promise.all([
         fn.selectInftwtAnlsRslt(targetInftwtAnlsSn, normalizedPplMngNo),
         fn.selectOilq(targetInftwtAnlsSn, normalizedPplMngNo).catch((err) => {
-          console.error('selectOilq 에러:', err);
+          console.error("selectOilq 에러:", err);
           return [];
         }),
-        fn.selectPplInftwtQty(targetInftwtAnlsSn, normalizedPplMngNo).catch((err) => {
-          console.error('selectPplInftwtQty 에러:', err);
-          return 0;
-        }),
+        fn
+          .selectPplInftwtQty(targetInftwtAnlsSn, normalizedPplMngNo)
+          .catch((err) => {
+            console.error("selectPplInftwtQty 에러:", err);
+            return 0;
+          }),
       ]);
 
       setChartData({
@@ -120,26 +130,37 @@ const InfilChart = ({
         chartData2: fn.getChartDataOilq(oilq ?? []),
       });
 
-      const fallbackQty = calculateFallbackInftwtQty(inftwtAnlsRslt ?? [], oilq ?? []);
+      const fallbackQty = calculateFallbackInftwtQty(
+        inftwtAnlsRslt ?? [],
+        oilq ?? [],
+      );
       const normalizedQty = Number(qty ?? Number.NaN);
-      const resolvedQty = Number.isFinite(normalizedQty) && !(normalizedQty === 0 && fallbackQty !== 0)
-        ? normalizedQty
-        : fallbackQty;
+      const resolvedQty =
+        Number.isFinite(normalizedQty) &&
+        !(normalizedQty === 0 && fallbackQty !== 0)
+          ? normalizedQty
+          : fallbackQty;
 
-      if (!Number.isFinite(normalizedQty) || (normalizedQty === 0 && fallbackQty !== 0)) {
-        console.warn('Inftwt qty API returned empty or zero; using chart-data fallback qty.', {
-          apiQty: qty,
-          fallbackQty,
-          resultCount: inftwtAnlsRslt?.length ?? 0,
-          oilqCount: oilq?.length ?? 0,
-        });
+      if (
+        !Number.isFinite(normalizedQty) ||
+        (normalizedQty === 0 && fallbackQty !== 0)
+      ) {
+        console.warn(
+          "Inftwt qty API returned empty or zero; using chart-data fallback qty.",
+          {
+            apiQty: qty,
+            fallbackQty,
+            resultCount: inftwtAnlsRslt?.length ?? 0,
+            oilqCount: oilq?.length ?? 0,
+          },
+        );
       }
 
-      setInftwtQty(resolvedQty.toLocaleString('ko-KR'));
+      setInftwtQty(resolvedQty.toLocaleString("ko-KR"));
     } catch (error) {
-      console.error('침입수 분석결과 차트 조회 중 오류:', error);
+      console.error("침입수 분석결과 차트 조회 중 오류:", error);
       setChartData({ chartData1: [], chartData2: [] });
-      setInftwtQty('0');
+      setInftwtQty("0");
     }
   };
 
@@ -159,10 +180,10 @@ const InfilChart = ({
     setInftwtAnlss([]);
     setInftwtAnls(null);
     setSelectedInftwtAnls(0);
-    setInftwtQty('0');
+    setInftwtQty("0");
     setChartData({ chartData1: [], chartData2: [] });
 
-    if (!selectedValue || selectedValue === '0') {
+    if (!selectedValue || selectedValue === "0") {
       setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
       return;
     }
@@ -173,7 +194,7 @@ const InfilChart = ({
       setInftwtAnlss(list);
       setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(list));
     } catch (error) {
-      console.error('selectInftwtAnls 에러:', error);
+      console.error("selectInftwtAnls 에러:", error);
       setInftwtAnlss([]);
       setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
     }
@@ -184,37 +205,37 @@ const InfilChart = ({
 
     setSelectedInftwtAnls(selectedValue);
     setChartData({ chartData1: [], chartData2: [] });
-    setInftwtQty('0');
+    setInftwtQty("0");
 
     if (selectedValue === 0) {
       setInftwtAnls(null);
       return;
     }
 
-    const selectedAnls = inftwtAnlss.find((anls) => anls.inftwtAnlsSn === selectedValue) ?? null;
+    const selectedAnls =
+      inftwtAnlss.find((anls) => anls.inftwtAnlsSn === selectedValue) ?? null;
     setInftwtAnls(selectedAnls);
   };
 
   const infilRsltChart = async () => {
     if (!selectedAplcnYm || selectedInftwtAnls === 0 || !normalizedPplMngNo) {
       setChartData({ chartData1: [], chartData2: [] });
-      setInftwtQty('0');
+      setInftwtQty("0");
       return;
     }
 
     await loadResultChart(selectedInftwtAnls);
   };
 
-  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 renderInfoField = (
+    label: string,
+    value?: string | number | null,
+    span: 1 | 2 = 1,
+  ) => (
+    <StandardFormField label={label} columns={2} span={span}>
+      <Input className="w-full" value={value ?? ""} readOnly />
+    </StandardFormField>
   );
 
   const handleReset = () => {
@@ -222,116 +243,122 @@ const InfilChart = ({
   };
 
   const renderResultPanel = () => (
-    <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-4">
-      <h3 className="mb-4 text-[20px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
-      <div className="mb-4 grid grid-cols-2 gap-4">
-        <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>상수사용량 적용연월</span>
+    <section className="card card-border !m-0 min-w-0 overflow-hidden !p-[1.2rem]">
+      <StandardFormSection title="침입수 분석결과" columns={2}>
+        <StandardFormField label="상수사용량 적용연월" columns={2}>
+          <div className="flex min-h-[3.2rem] items-center justify-end text-[1.35rem] font-semibold tabular-nums text-foreground">
+            {selectedAplcnYm
+              ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM")
+              : "-"}
           </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>침입수량 산정결과</span>
-          </div>
-          <div className="flex items-end gap-3 whitespace-nowrap text-[#222]">
-            <span className="text-[16px] text-[#666]">침입수량</span>
-            <div className="flex items-end justify-start gap-2 whitespace-nowrap">
-              <span className="text-[20px] font-extrabold">{inftwtQty}</span>
-              <span className="pb-[2px] text-[16px]">m³/d</span>
+        </StandardFormField>
+        <StandardFormField label="침입수량 산정결과" columns={2}>
+          <div className="flex min-h-[3.2rem] items-center justify-end gap-3 whitespace-nowrap text-foreground">
+            <span className="text-[1.15rem] text-muted-foreground">
+              침입수량
+            </span>
+            <div className="flex items-baseline gap-2">
+              <strong className="text-[1.5rem] font-semibold tabular-nums">
+                {inftwtQty}
+              </strong>
+              <span className="text-[1.1rem]">m³/d</span>
             </div>
           </div>
-        </div>
-      </div>
+        </StandardFormField>
+      </StandardFormSection>
 
-      <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 className="mt-[1.2rem] overflow-hidden rounded-sm border border-border bg-background">
+        <h4 className="border-b border-border bg-container px-4 py-3 text-[1.4rem] font-semibold text-label">
+          침입수량 그래프
+        </h4>
+        <div className="min-h-[30rem] p-3">
+          {hasChartData ? (
+            <MainChart
+              chartConfig={chartConfig}
+              chartForm={chartForm}
+              chartData={chartData}
+              chartTitle=""
+              yFieldText="유량(m³/h)"
+              yFieldText2=""
+            />
+          ) : (
+            <div
+              className="flex min-h-[30rem] items-center justify-center text-[1.3rem] text-muted-foreground"
+              role="status"
+            >
+              조회된 데이터가 없습니다.
+            </div>
+          )}
+        </div>
+      </section>
     </section>
   );
 
   const renderDefaultBody = () => (
-    <div className="text-black">
-      <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="flex min-h-0 flex-1 flex-col gap-[1.2rem]">
+      <StandardFormSection title="침입수 분석 조건" columns={2}>
+        <StandardFormField label="상수사용월" columns={2}>
+          <SelectBox
+            className="w-full"
+            selectClass="w-full"
+            label=""
+            selectArray={aplcnYms}
+            value={selectedAplcnYm}
+            onSelectValue={handleAplcnYmChange}
+          />
+        </StandardFormField>
+        <StandardFormField label="분석정보" columns={2}>
+          <SelectBox
+            className="w-full"
+            selectClass="w-full"
+            label=""
+            selectArray={inftwtAnlsInfos}
+            value={selectedInftwtAnls}
+            onSelectValue={handleInftwtAnlsSnChange}
+          />
+        </StandardFormField>
+        {renderInfoField("오수전환율", inftwtAnls?.drtwSwtcRt ?? "")}
+        {renderInfoField(
+          "시간패턴 파일명",
+          inftwtAnls?.atflHrPttnNm ?? "",
+        )}
+        {renderInfoField("수용가-맨홀 매칭", inftwtAnls?.atflMpngNm ?? "")}
+        {renderInfoField("관망도 파일명", inftwtAnls?.atflInpNm ?? "")}
+        {renderInfoField("유량 파일명", inftwtAnls?.atflOilqNm ?? "", 2)}
+      </StandardFormSection>
 
-          <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>
+      {renderResultPanel()}
+    </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>
-
-        {renderResultPanel()}
-      </div>
+  /** 조회·초기화 뒤에 창 닫기 성격의 취소 액션을 항상 마지막에 배치한다. */
+  const renderFooterActions = () => (
+    <div className="flex w-full items-center justify-center gap-2">
+      {!isResultOnlyMode ? (
+        <>
+          <Button type="button" onClick={infilRsltChart}>
+            조회
+          </Button>
+          <Button type="button" color="white" onClick={handleReset}>
+            초기화
+          </Button>
+        </>
+      ) : null}
+      <Button type="button" color="white" onClick={() => window.close()}>
+        취소
+      </Button>
     </div>
   );
 
   return (
-    <div className="min-h-dvh bg-white p-3">
+    <StandardPopupLayout
+      title={isResultOnlyMode ? "침입수 분석결과" : "침입수 분석"}
+      bodyClassName="overflow-x-hidden"
+      footer={renderFooterActions()}
+      showDefaultCancelAction={false}
+    >
       {isResultOnlyMode ? renderResultPanel() : renderDefaultBody()}
-    </div>
+    </StandardPopupLayout>
   );
 };
 
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 3b9d412d1..5c9b09683 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,9 +7,12 @@ import {
   CHART_FORM,
   type ChartConfig,
   MainChart,
+  StandardFormField,
+  StandardFormSection,
+  StandardPopupLayout,
 } from "@common/business_components";
 import { SelectBox } from "@common/business_components/ui";
-import { Button, Input, Label } from "@common/components";
+import { Button, Input } from "@common/components";
 
 import type { TRdiiAnls } from "./aplcnYms";
 import * as fn from "./aplcnYms";
@@ -45,18 +48,20 @@ const RdiiChart = ({
 }: ModalOpenProp) => {
   const [selectedAplcnYm, setSelectedAplcnYm] = useState("");
   const [rdiiAnlss, setRdiiAnlss] = useState<TRdiiAnls[]>([]);
-  const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
-    INITIAL_ANALYSIS_OPTIONS,
-  );
+  const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<
+    { text: string; val: number; hidden?: boolean }[]
+  >(INITIAL_ANALYSIS_OPTIONS);
   const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null);
-  const [selectedRainInfwtAnlsSn, setSelectedRainInfwtAnlsSn] = useState<number>(0);
+  const [selectedRainInfwtAnlsSn, setSelectedRainInfwtAnlsSn] =
+    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");
 
   const normalizedPplMngNo = normalizePplMngNo(pplMngNo);
-  const isResultOnlyMode = resultOnly && rainInfwtAnlsSn > 0 && Boolean(normalizedPplMngNo);
+  const isResultOnlyMode =
+    resultOnly && rainInfwtAnlsSn > 0 && Boolean(normalizedPplMngNo);
   const aplcnYms = fn.useAplcnYms(isResultOnlyMode ? "" : "rdiiAnlsRslt");
 
   const chartForm = CHART_FORM.LINEBAR2;
@@ -103,7 +108,9 @@ const RdiiChart = ({
 
       const rsltDataFormatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []);
       const rainDataFormatted = fn.getChartDataRainData(rainData ?? []);
-      const rainMap = new Map(rainDataFormatted.map((item) => [item.label, item.barVal0]));
+      const rainMap = new Map(
+        rainDataFormatted.map((item) => [item.label, item.barVal0]),
+      );
 
       rsltDataFormatted.forEach((item) => {
         const matchedVal = rainMap.get(item.label);
@@ -118,7 +125,9 @@ const RdiiChart = ({
       const appliedRainfall = Number(qtyData?.raintotal ?? 0);
       const rdiiPerRainfall =
         qtyData?.raintotal && qtyData?.raintotal !== 0
-          ? Math.round(avgRdii * Number(qtyData?.sustaintime ?? 0) / qtyData.raintotal)
+          ? Math.round(
+              (avgRdii * Number(qtyData?.sustaintime ?? 0)) / qtyData.raintotal,
+            )
           : 0;
 
       setRdiiQty(Math.round(avgRdii * 24).toLocaleString("ko-KR"));
@@ -179,7 +188,8 @@ const RdiiChart = ({
       return;
     }
 
-    const selectedAnls = rdiiAnlss.find((anls) => anls.rainInfwtAnlsSn === selectedValue) ?? null;
+    const selectedAnls =
+      rdiiAnlss.find((anls) => anls.rainInfwtAnlsSn === selectedValue) ?? null;
     setRdiiAnls(selectedAnls);
   };
 
@@ -195,136 +205,140 @@ const RdiiChart = ({
     await loadResultChart(selectedRainInfwtAnlsSn);
   };
 
-  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 renderInfoField = (
+    label: string,
+    value?: string | number | null,
+    span: 1 | 2 = 1,
+  ) => (
+    <StandardFormField label={label} columns={2} span={span}>
+      <Input className="w-full" value={value ?? ""} readOnly />
+    </StandardFormField>
   );
 
   const renderResultPanel = () => (
-    <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-4">
-      <h3 className="mb-4 text-[20px] font-extrabold tracking-[-0.02em] text-black">RDII 분석 결과</h3>
-      <div className="mb-4 grid grid-cols-2 gap-4">
-        <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>상수사용 적용연월</span>
+    <section className="card card-border !m-0 min-w-0 overflow-hidden !p-[1.2rem]">
+      <StandardFormSection title="RDII 분석결과" columns={2}>
+        <StandardFormField label="상수사용 적용연월" columns={2}>
+          <div className="flex min-h-[3.2rem] items-center justify-end text-[1.35rem] font-semibold tabular-nums text-foreground">
+            {selectedAplcnYm
+              ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM")
+              : "-"}
           </div>
-          <div className="text-[20px] font-extrabold text-[#222]">
-            {selectedAplcnYm ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM") : "-"}
+        </StandardFormField>
+        <StandardFormField label="강우유입수량 분석결과" columns={2}>
+          <div className="grid min-h-[3.2rem] grid-cols-[minmax(0,1fr)_7rem_5rem] items-center gap-x-3 gap-y-1 text-[1.1rem] text-foreground">
+            <span className="text-right text-muted-foreground">평균 RDII</span>
+            <strong className="text-right text-[1.35rem] font-semibold tabular-nums">
+              {rdiiQty}
+            </strong>
+            <span>m³/d</span>
+            <span className="text-right text-muted-foreground">적용 강우량</span>
+            <strong className="text-right text-[1.35rem] font-semibold tabular-nums">
+              {rainTotal}
+            </strong>
+            <span>mm</span>
+            <span className="text-right text-muted-foreground">
+              강우량 대비 RDII
+            </span>
+            <strong className="text-right text-[1.35rem] font-semibold tabular-nums">
+              {totalVolume}
+            </strong>
+            <span>m³/mm</span>
           </div>
-        </div>
+        </StandardFormField>
+      </StandardFormSection>
 
-        <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
-          <div className="shrink-0 whitespace-nowrap text-[14px] font-extrabold text-[#ef4444]">
-            <span>강우유입수량 분석결과</span>
-          </div>
-          <div className="ml-4 flex min-w-0 basis-[60%] 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>
+      <section className="mt-[1.2rem] overflow-hidden rounded-sm border border-border bg-background">
+        <h4 className="border-b border-border bg-container px-4 py-3 text-[1.4rem] font-semibold text-label">
+          RDII 그래프
+        </h4>
+        <div className="min-h-[30rem] p-3">
+          {hasChartData ? (
+            <MainChart
+              chartConfig={chartConfig}
+              chartForm={chartForm}
+              chartData={chartData}
+              chartTitle=""
+              yFieldText2="강수량(mm)"
+              yFieldText="유량(m³/h)"
+            />
+          ) : (
+            <div
+              className="flex min-h-[30rem] items-center justify-center text-[1.3rem] text-muted-foreground"
+              role="status"
+            >
+              조회된 데이터가 없습니다.
             </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>
     </section>
   );
 
   const renderDefaultBody = () => (
-    <div className="text-black">
-      <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="flex min-h-0 flex-1 flex-col gap-[1.2rem]">
+      <StandardFormSection title="RDII 분석 조건" columns={2}>
+        <StandardFormField label="상수사용월" columns={2}>
+          <SelectBox
+            className="w-full"
+            selectClass="w-full"
+            label=""
+            selectArray={aplcnYms}
+            value={selectedAplcnYm}
+            onSelectValue={handleAplcnYmChange}
+          />
+        </StandardFormField>
+        <StandardFormField label="분석정보" columns={2}>
+          <SelectBox
+            className="w-full"
+            selectClass="w-full"
+            label=""
+            selectArray={rdiiAnlsInfos}
+            value={selectedRainInfwtAnlsSn}
+            onSelectValue={handleRdiiAnlsSnChange}
+          />
+        </StandardFormField>
+        {renderInfoField("오수전환율", rdiiAnls?.drtwSwtcRt ?? "")}
+        {renderInfoField("수용가-맨홀 매칭", rdiiAnls?.atflMpngNm ?? "")}
+        {renderInfoField("관망도 파일명", rdiiAnls?.atflInpNm ?? "")}
+        {renderInfoField("강우 파일명", rdiiAnls?.atflRainNm ?? "")}
+        {renderInfoField("RTK계수 출처", rdiiAnls?.srcNm ?? "", 2)}
+      </StandardFormSection>
 
-          <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={selectedAplcnYm}
-                  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={selectedRainInfwtAnlsSn}
-                  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>
-
-        {renderResultPanel()}
-      </div>
+      {renderResultPanel()}
     </div>
   );
 
-  if (isResultOnlyMode) {
-    return <div className="min-h-dvh bg-white p-3">{renderResultPanel()}</div>;
-  }
+  /** 조회·초기화 뒤에 창 닫기 성격의 취소 액션을 항상 마지막에 배치한다. */
+  const renderFooterActions = () => (
+    <div className="flex w-full items-center justify-center gap-2">
+      {!isResultOnlyMode ? (
+        <>
+          <Button type="button" onClick={fetchFilteredData}>
+            조회
+          </Button>
+          <Button type="button" color="white" onClick={resetState}>
+            초기화
+          </Button>
+        </>
+      ) : null}
+      <Button type="button" color="white" onClick={() => window.close()}>
+        취소
+      </Button>
+    </div>
+  );
 
   return (
-    <div className="min-h-dvh bg-white p-4">
-      <h1 className="mb-3 text-2xl font-semibold text-gray-900">RDII 분석</h1>
-      {renderDefaultBody()}
-    </div>
+    <StandardPopupLayout
+      title={isResultOnlyMode ? "RDII 분석결과" : "RDII 분석"}
+      bodyClassName="overflow-x-hidden"
+      footer={renderFooterActions()}
+      showDefaultCancelAction={false}
+    >
+      {isResultOnlyMode ? renderResultPanel() : renderDefaultBody()}
+    </StandardPopupLayout>
   );
 };
 
-export default React.memo(RdiiChart);
\ No newline at end of file
+export default React.memo(RdiiChart);
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 71b256cf3..9ac20b8db 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창
- * 
+ *
  * 📄 FeatureClickEventPopup
  * 시설물(피처) 클릭시 오른쪽 팝업창 컴포넌트
  *
@@ -10,7 +10,7 @@
  * - 코드 매핑 및 데이터 포맷팅 처리
  * - 상류관로 검색, 침입수/RDII 분석 차트 표시
  * - 모달을 통한 저장 확인 및 API 연동
- * 
+ *
  * 🔗 사용 API
  * - 하수관로 자체입력정보 조회: GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd} (sewerage-service)
  * - 우수토실 자체입력정보 조회: GET /api/v1/fcltstofcbr/{fcltMngNo}/{mngInstCd} (sewerage-service)
@@ -21,7 +21,7 @@
  * - 하수펌프장 자체입력정보 저장: POST /api/v1/fcltpump (sewerage-service)
  * - 하수맨홀 자체입력정보 저장: POST /api/v1/fcltmhl (sewerage-service)
  */
-'use client'
+"use client";
 import { getData, postData } from "@/components/lib/api";
 import { VerticalTable } from "@/components/ui/verticalTable";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
@@ -32,22 +32,39 @@ 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 { FldngWtlvMapCol, FldngWtlvMapCol2
-  , 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 { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
+import {
+  FldngWtlvMapCol,
+  FldngWtlvMapCol2,
+  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 { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
 import { codeMapper } from "../common/codeMapper";
-import LoadingOverlay from '@/components/ui/LoadingBar';
+import LoadingOverlay from "@/components/ui/LoadingBar";
 import { searchUpperPpls } from "./smh";
-import { getElapsedYearsDisplayText, isInvalidInstallYmd } from "../agedPipe/agedPipeUtils";
-import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
+import {
+  getElapsedYearsDisplayText,
+  isInvalidInstallYmd,
+} from "../agedPipe/agedPipeUtils";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { useAlertStore } from "@/shared/lib";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import useStore from "@/store/useStore";
 import ExmnSurveyResultSection from "../exmn/ExmnSurveyResultSection";
 
@@ -55,18 +72,18 @@ const linkedFacilityHighlightStyle = new Style({
   image: new CircleStyle({
     radius: 18,
     fill: new Fill({
-      color: 'rgba(255, 235, 59, 0.35)',
+      color: "rgba(255, 235, 59, 0.35)",
     }),
     stroke: new Stroke({
-      color: 'rgba(255, 193, 7, 0.45)',
+      color: "rgba(255, 193, 7, 0.45)",
       width: 2,
     }),
   }),
   fill: new Fill({
-    color: 'rgba(255, 235, 59, 0.2)',
+    color: "rgba(255, 235, 59, 0.2)",
   }),
   stroke: new Stroke({
-    color: 'rgba(255, 193, 7, 0.35)',
+    color: "rgba(255, 193, 7, 0.35)",
     width: 2.5,
   }),
   zIndex: 9999,
@@ -75,7 +92,9 @@ const linkedFacilityHighlightStyle = new Style({
 const normalizeFldngWtlvMapDisplayId = (value: unknown) => {
   const normalized = String(value ?? "").trim();
   const prefix = "tb_ms_fldng_wtlv_map.";
-  return normalized.startsWith(prefix) ? normalized.slice(prefix.length) : normalized;
+  return normalized.startsWith(prefix)
+    ? normalized.slice(prefix.length)
+    : normalized;
 };
 
 const normalizeFldngWtlvMapApiFid = (value: unknown) => {
@@ -131,13 +150,22 @@ const FeatureClickEventPopup = ({
   featureData: any;
   surveyMode?: boolean;
 }) => {
-  const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
+  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 [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); // 중점우수토실 여부
@@ -145,23 +173,25 @@ const FeatureClickEventPopup = ({
   // 🎯 InfilChart 및 RdiiChart 관련 상태 추가
   const [isClicked, setIsClicked] = useState(true); // 클릭 여부 상태
   const [isLoading, setIsLoading] = useState(false); // 로딩 상태
-  const [chmbrXcnts, setChmbrXcnts] = useState<string>(''); // 로딩 상태
-  const [chmbrYdnts, setChmbrYdnts] = useState<string>(''); // 로딩 상태
+  const [chmbrXcnts, setChmbrXcnts] = useState<string>(""); // 로딩 상태
+  const [chmbrYdnts, setChmbrYdnts] = useState<string>(""); // 로딩 상태
   const linkedFacilityFeatureRef = useRef<any>(null);
   const linkedFacilityOriginalStyleRef = useRef<any>(null);
   const [mngInstOptions, setMngInstOptions] = useState<MngInstOption[]>([]);
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
 
   // 🎯 관로관리번호 추출
-  const pplMngNo = featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || "";
+  const pplMngNo =
+    featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || "";
 
-  const featureId = typeof featureData.getId === 'function'
-    ? featureData.getId()
-    : featureData.fid;
+  const featureId =
+    typeof featureData.getId === "function"
+      ? featureData.getId()
+      : featureData.fid;
   const selectedLayerTypeName = featureData?.values_
-    ? featureData?.id_?.split('.')?.[0]
+    ? featureData?.id_?.split(".")?.[0]
     : featureData?.lyrTypeNm;
-  const isPipeFeature = selectedLayerTypeName === 'tb_ms_swage_ppl';
+  const isPipeFeature = selectedLayerTypeName === "tb_ms_swage_ppl";
 
   // 🎯 데이터 전처리 메모이제이션
   const processedData = useMemo(() => {
@@ -169,7 +199,7 @@ const FeatureClickEventPopup = ({
 
     return {
       ...featureData.values_,
-      discharge_pipe_spec: `직경: ${featureData.values_.pipe_diameter || '-'} / 높이: ${featureData.values_.pipe_hg || '-'} / 길이: ${featureData.values_.pipe_lt || '-'}`
+      discharge_pipe_spec: `직경: ${featureData.values_.pipe_diameter || "-"} / 높이: ${featureData.values_.pipe_hg || "-"} / 길이: ${featureData.values_.pipe_lt || "-"}`,
     };
   }, [featureData?.values_]);
 
@@ -229,7 +259,11 @@ const FeatureClickEventPopup = ({
     if (!mngInstCd) return data;
     return {
       ...data,
-      mngInstNm: mngInstNameMap.get(mngInstCd) ?? data.mngInstNm ?? data.mng_inst_nm ?? mngInstCd,
+      mngInstNm:
+        mngInstNameMap.get(mngInstCd) ??
+        data.mngInstNm ??
+        data.mng_inst_nm ??
+        mngInstCd,
     };
   };
 
@@ -237,10 +271,16 @@ const FeatureClickEventPopup = ({
     if (!data || typeof data !== "object") return data;
 
     const stdgCd = String(data.stdg_cd ?? data.stdgCd ?? "").trim();
-    const ctpvCd = String(data.ctpv_cd ?? data.ctpvCd ?? stdgCd.slice(0, 2)).trim();
-    const sggCd = String(data.sgg_cd ?? data.sggCd ?? stdgCd.slice(0, 5)).trim();
-    const resolvedCtpvNm = ctpv.find((item) => String(item.val).trim() === ctpvCd)?.text ?? "";
-    const resolvedSggNm = sgg.find((item) => String(item.val).trim() === sggCd)?.text ?? "";
+    const ctpvCd = String(
+      data.ctpv_cd ?? data.ctpvCd ?? stdgCd.slice(0, 2),
+    ).trim();
+    const sggCd = String(
+      data.sgg_cd ?? data.sggCd ?? stdgCd.slice(0, 5),
+    ).trim();
+    const resolvedCtpvNm =
+      ctpv.find((item) => String(item.val).trim() === ctpvCd)?.text ?? "";
+    const resolvedSggNm =
+      sgg.find((item) => String(item.val).trim() === sggCd)?.text ?? "";
 
     return {
       ...data,
@@ -269,7 +309,9 @@ const FeatureClickEventPopup = ({
   const mergeDetailData = (baseData: any, detailData: any) => {
     if (!detailData || typeof detailData !== "object") return baseData;
 
-    const meaningfulDetailData = Object.entries(detailData).reduce<Record<string, unknown>>((acc, [key, value]) => {
+    const meaningfulDetailData = Object.entries(detailData).reduce<
+      Record<string, unknown>
+    >((acc, [key, value]) => {
       if (hasDetailValue(value)) acc[key] = value;
       return acc;
     }, {});
@@ -282,7 +324,9 @@ const FeatureClickEventPopup = ({
 
   const clearLinkedFacilityHighlight = () => {
     if (linkedFacilityFeatureRef.current) {
-      linkedFacilityFeatureRef.current.setStyle(linkedFacilityOriginalStyleRef.current ?? undefined);
+      linkedFacilityFeatureRef.current.setStyle(
+        linkedFacilityOriginalStyleRef.current ?? undefined,
+      );
       linkedFacilityFeatureRef.current.changed?.();
     }
 
@@ -306,10 +350,15 @@ const FeatureClickEventPopup = ({
       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');
+        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;
+        return (
+          isFacilityLayer &&
+          String(featureFacilityCode ?? "").trim() === normalizedFacilityCode
+        );
       });
 
       if (targetFeature) {
@@ -322,12 +371,13 @@ const FeatureClickEventPopup = ({
         targetFeature.setStyle((feature: any, resolution: number) => {
           let styles: any[] = [];
 
-          if (typeof originalFeatureStyle === 'function') {
+          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);
+            if (Array.isArray(originalFeatureStyle))
+              styles.push(...originalFeatureStyle);
             else styles.push(originalFeatureStyle);
           } else if (layerStyleFn) {
             const layerStyles = layerStyleFn(feature, resolution);
@@ -354,136 +404,149 @@ const FeatureClickEventPopup = ({
       // if (source && featureData && featureData.fid) {
       //   featureLayer = layer; // 피처가 속한 레이어 찾기
       // }
-      if (source && source.hasFeature && featureData
-        && typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
+      if (
+        source &&
+        source.hasFeature &&
+        featureData &&
+        typeof featureData.getId === "function" &&
+        source.hasFeature(featureData)
+      ) {
         featureLayer = layer; // 피처가 속한 레이어 찾기
         return true; // 반복 종료
       }
       return false;
     });
 
-    if (featureData['ol_uid']) {
+    if (featureData["ol_uid"]) {
       // Gis 레이어 클릭 이벤트
       setIsClicked(true);
-      const lyrTyNm = featureData.id_.split('.')[0];
+      const lyrTyNm = featureData.id_.split(".")[0];
 
       switch (lyrTyNm) {
-        case 'tb_ms_swage_ppl': {
-          result = '하수관로';
+        case "tb_ms_swage_ppl": {
+          result = "하수관로";
           setHeadlist(MsSwagePplCol);
           setLayerSpecificNm(featureData.values_.fclt_mng_no);
           break;
         }
-        case 'tb_ms_swage_mhl': {
-          result = '하수맨홀';
+        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) {
+        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 {
+          } else {
             setIsDrtwSewagePump(false);
             setHeadlist(ExclnSewagePumpCol);
           }
           setLayerSpecificNm(featureData.values_.fclt_mng_no);
-          result = '하수펌프장';
+          result = "하수펌프장";
           break;
         }
-        case 'tb_il_swage_prcs_fclt': {
-          result = '하수처리시설';
+        case "tb_il_swage_prcs_fclt": {
+          result = "하수처리시설";
           setHeadlist(SwtrmtFcltCol);
           setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd);
           break;
         }
-        case 'tb_ms_swage_prcs_zone': {
-          result = '하수처리구역';
+        case "tb_ms_swage_prcs_zone": {
+          result = "하수처리구역";
           setHeadlist(SwtrmtPrcsZoneCol);
           setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd);
           break;
         }
-        case 'tb_ms_fldng_wtlv_map': {
-          result = '침수흔적도';
+        case "tb_ms_fldng_wtlv_map": {
+          result = "침수흔적도";
           setHeadlist(FldngWtlvMapCol);
-          setLayerSpecificNm(normalizeFldngWtlvMapDisplayId(featureData.values_.fid ?? featureId));
+          setLayerSpecificNm(
+            normalizeFldngWtlvMapDisplayId(
+              featureData.values_.fid ?? featureId,
+            ),
+          );
           break;
         }
-        case 'tb_ms_stofcbr': {
-          result = '우수토실';
+        case "tb_ms_stofcbr": {
+          result = "우수토실";
           setHeadlist(stofcbrCol);
           setLayerSpecificNm(featureData.values_.fclt_mng_no);
           break;
         }
-        case 'om_dt_untrt_swg_rain': {
-          result = '중점우수토실';
+        case "om_dt_untrt_swg_rain": {
+          result = "중점우수토실";
           setHeadlist(untrtSwgRainCol1);
           setHeadlist2(untrtSwgRainCol2);
           setLayerSpecificNm(featureData.values_.manage_no);
           break;
         }
         default: {
-          result = featureLayer ? featureLayer.get('lyrNm') : null;
+          result = featureLayer ? featureLayer.get("lyrNm") : null;
           break;
         }
       }
-    }
-    else {
+    } else {
       // SearchModal 클릭 이벤트
       setIsClicked(false);
       const lyrTyNm = featureData.lyrTypeNm;
 
       switch (lyrTyNm) {
-        case 'tb_ms_swage_ppl': {
-          result = '하수관로';
-          setHeadlist(MsSwagePplCol2)
+        case "tb_ms_swage_ppl": {
+          result = "하수관로";
+          setHeadlist(MsSwagePplCol2);
           setLayerSpecificNm(featureData.fcltMngNo ?? featureData.swtrmtFcltCd);
           break;
         }
-        case 'tb_ms_swage_mhl': {
-          result = '하수맨홀';
-          setHeadlist(MsSwageMhlCol2)
+        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 === '오수펌프장');
+        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 {
+            setHeadlist(ExclnSewagePumpCol2);
+          } else {
             setIsDrtwSewagePump(true);
-            setHeadlist(DrtwSewagePumpCol2)
+            setHeadlist(DrtwSewagePumpCol2);
           }
           setLayerSpecificNm(featureData.fcltMngNo);
-          result = '하수펌프장';
+          result = "하수펌프장";
           break;
         }
-        case 'tb_il_swage_prcs_fclt': {
-          result = '하수처리시설';
-          setHeadlist(SwtrmtFcltCol2)
+        case "tb_il_swage_prcs_fclt": {
+          result = "하수처리시설";
+          setHeadlist(SwtrmtFcltCol2);
           setLayerSpecificNm(featureData.swtrmtFcltCd);
           break;
         }
-        case 'tb_ms_swage_prcs_zone': {
-          result = '하수처리구역';
+        case "tb_ms_swage_prcs_zone": {
+          result = "하수처리구역";
           setHeadlist(SwtrmtPrcsZoneCol2);
           setLayerSpecificNm(featureData.swtrmtFcltCd);
           break;
         }
-        case 'tb_ms_fldng_wtlv_map': {
-          result = '침수흔적도';
+        case "tb_ms_fldng_wtlv_map": {
+          result = "침수흔적도";
           setHeadlist(FldngWtlvMapCol2);
           setLayerSpecificNm(normalizeFldngWtlvMapDisplayId(featureData.fid));
           break;
         }
-        case 'tb_ms_stofcbr': {
-          result = '우수토실';
-          setHeadlist(stofcbrCol2)
+        case "tb_ms_stofcbr": {
+          result = "우수토실";
+          setHeadlist(stofcbrCol2);
           setLayerSpecificNm(featureData.fcltMngNo);
           break;
         }
@@ -502,25 +565,29 @@ const FeatureClickEventPopup = ({
         setLayerNm(selectedLayerName); // 상태 업데이트
 
         let data;
-        if (featureData['ol_uid']) data = featureData.values_;  // Gis 레이어 클릭 이벤트일 때
-        else data = featureData;  // SearchModal 클릭 이벤트일 때
+        if (featureData["ol_uid"])
+          data = featureData.values_; // Gis 레이어 클릭 이벤트일 때
+        else data = featureData; // SearchModal 클릭 이벤트일 때
 
         // 하수맨홀인 경우 용도코드를 텍스트로 변환
-        if (selectedLayerName === '하수맨홀' && data) {
+        if (selectedLayerName === "하수맨홀" && data) {
           // mqlt_cd 값 변환 (재질코드)
           if (data.mqlt_cd) {
             const materialCodeItem = MS_SWAGE_MHL_CODES.find(
-              code => code.val === data.mqlt_cd.trim()
+              (code) => code.val === data.mqlt_cd.trim(),
             );
             if (materialCodeItem) data.mqlt_cd = `${materialCodeItem.text}`;
           }
         } else {
           // 중점우수토실인 경우 구분 값
-          if (selectedLayerName === '중점우수토실' && data) {
+          if (selectedLayerName === "중점우수토실" && data) {
             if (data.mesure_spot_se) {
-              const mesureSpotSe = [{id:'0', text: '합류식'}, {id:'1', text: '분류식'}]
+              const mesureSpotSe = [
+                { id: "0", text: "합류식" },
+                { id: "1", text: "분류식" },
+              ];
               const mesureSpotSeItem = mesureSpotSe.find(
-                code => code.id === data.mesure_spot_se.trim()
+                (code) => code.id === data.mesure_spot_se.trim(),
               );
               if (mesureSpotSeItem) data.mesure_spot_se = mesureSpotSeItem.text;
             }
@@ -528,18 +595,33 @@ const FeatureClickEventPopup = ({
         }
 
         // 🎯 기본 데이터 포맷팅
-        const normalizedRegionData = selectedLayerName === '침수흔적도'
-          ? withResolvedRegionNames(data)
-          : data;
-        const formattedData = withMngInstName(formatDisplayData(normalizedRegionData));
-        if (selectedLayerName === '침수흔적도') {
+        const normalizedRegionData =
+          selectedLayerName === "침수흔적도"
+            ? withResolvedRegionNames(data)
+            : data;
+        const formattedData = withMngInstName(
+          formatDisplayData(normalizedRegionData),
+        );
+        if (selectedLayerName === "침수흔적도") {
           const fldngBgngDtm = formatFldngWtlvDateTime(
-            formattedData.bgngYmd ?? formattedData.bgng_ymd ?? data.bgngYmd ?? data.bgng_ymd,
-            formattedData.fldngBgngHm ?? formattedData.fldng_bgng_hm ?? data.fldngBgngHm ?? data.fldng_bgng_hm,
+            formattedData.bgngYmd ??
+              formattedData.bgng_ymd ??
+              data.bgngYmd ??
+              data.bgng_ymd,
+            formattedData.fldngBgngHm ??
+              formattedData.fldng_bgng_hm ??
+              data.fldngBgngHm ??
+              data.fldng_bgng_hm,
           );
           const fldngEndDtm = formatFldngWtlvDateTime(
-            formattedData.endYmd ?? formattedData.end_ymd ?? data.endYmd ?? data.end_ymd,
-            formattedData.fldngEndHm ?? formattedData.fldng_end_hm ?? data.fldngEndHm ?? data.fldng_end_hm,
+            formattedData.endYmd ??
+              formattedData.end_ymd ??
+              data.endYmd ??
+              data.end_ymd,
+            formattedData.fldngEndHm ??
+              formattedData.fldng_end_hm ??
+              data.fldngEndHm ??
+              data.fldng_end_hm,
           );
 
           formattedData.fldng_bgng_dtm = fldngBgngDtm;
@@ -547,7 +629,7 @@ const FeatureClickEventPopup = ({
           formattedData.fldng_end_dtm = fldngEndDtm;
           formattedData.fldngEndDtm = fldngEndDtm;
         }
-        if (selectedLayerName === '하수관로') {
+        if (selectedLayerName === "하수관로") {
           const installYmd = data.instl_ymd ?? data.instlYmd;
           formattedData.elapsedYears = getElapsedYearsDisplayText(installYmd);
           if (isInvalidInstallYmd(installYmd)) {
@@ -560,63 +642,71 @@ const FeatureClickEventPopup = ({
         setTableData(formattedData);
 
         switch (selectedLayerName) {
-          case '하수관로':
-            setButtonChk(true)
+          case "하수관로":
+            setButtonChk(true);
 
             // ✅ codeMapper 사용하여 API 결과도 변환
             {
-              const initialPipeData = withMngInstName(codeMapper({
-                layerName: selectedLayerName,
-                data: { ...formattedData }
-              }));
+              const initialPipeData = withMngInstName(
+                codeMapper({
+                  layerName: selectedLayerName,
+                  data: { ...formattedData },
+                }),
+              );
               setFetchData(initialPipeData);
               setTableData(initialPipeData);
             }
             break;
-          case '하수맨홀':
-            setButtonChk(true)
+          case "하수맨홀":
+            setButtonChk(true);
 
             // ✅ codeMapper 사용하여 API 결과도 변환
-            setTableData(codeMapper({
-              layerName: selectedLayerName,
-              data: { ...formattedData }
-            }));
+            setTableData(
+              codeMapper({
+                layerName: selectedLayerName,
+                data: { ...formattedData },
+              }),
+            );
             break;
-          case '하수펌프장':
-            setButtonChk(true)
+          case "하수펌프장":
+            setButtonChk(true);
 
-            setTableData(codeMapper({
-              layerName: selectedLayerName,
-              data: { ...formattedData }
-            }));
+            setTableData(
+              codeMapper({
+                layerName: selectedLayerName,
+                data: { ...formattedData },
+              }),
+            );
             break;
-          case '하수처리시설':
-            setButtonChk(false)
+          case "하수처리시설":
+            setButtonChk(false);
             break;
-          case '하수처리구역':
-            setButtonChk(false)
+          case "하수처리구역":
+            setButtonChk(false);
             break;
-          case '침수흔적도':
-            setButtonChk(false)
+          case "침수흔적도":
+            setButtonChk(false);
             break;
-          case '우수토실':
-            setButtonChk(true)
-            setIsMainSsc(false)
+          case "우수토실":
+            setButtonChk(true);
+            setIsMainSsc(false);
             break;
-          case '중점우수토실':
-            setButtonChk(false)
-            setIsMainSsc(true)
+          case "중점우수토실":
+            setButtonChk(false);
+            setIsMainSsc(true);
             // 🎯 processedData도 포맷팅하여 설정
             const processedFormattedData = formatDisplayData(processedData);
 
-            setFetchData([processedFormattedData])
+            setFetchData([processedFormattedData]);
             setTableData(processedFormattedData);
             // setIsLoading(false); // 기본 렌더링 완료
 
-            setTableData(codeMapper({
-              layerName: selectedLayerName,
-              data: { ...processedFormattedData }
-            }));
+            setTableData(
+              codeMapper({
+                layerName: selectedLayerName,
+                data: { ...processedFormattedData },
+              }),
+            );
 
             setChmbrXcnts(data.chmbr_xcnts);
             setChmbrYdnts(data.chmbr_ydnts);
@@ -627,14 +717,24 @@ const FeatureClickEventPopup = ({
         }
 
         // 자체입력정보 API 엔드포인트 선택
-        let apiEndpoint = '';
-        const fcltMngNo = String(featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || "").trim();
-        const mngInstCd = String(featureData?.values_?.mng_inst_cd || featureData?.mngInstCd || "").trim();
-        const canRequestDetail = isValidDetailIdentifier(fcltMngNo) && isValidDetailIdentifier(mngInstCd);
-        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}`;
+        let apiEndpoint = "";
+        const fcltMngNo = String(
+          featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || "",
+        ).trim();
+        const mngInstCd = String(
+          featureData?.values_?.mng_inst_cd || featureData?.mngInstCd || "",
+        ).trim();
+        const canRequestDetail =
+          isValidDetailIdentifier(fcltMngNo) &&
+          isValidDetailIdentifier(mngInstCd);
+        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 && canRequestDetail) {
@@ -643,10 +743,12 @@ const FeatureClickEventPopup = ({
 
             if (result) {
               const mergedData = mergeDetailData(formattedData, result);
-              const processedApiData = withMngInstName(codeMapper({
-                layerName: selectedLayerName,
-                data: mergedData
-              }));
+              const processedApiData = withMngInstName(
+                codeMapper({
+                  layerName: selectedLayerName,
+                  data: mergedData,
+                }),
+              );
 
               setFetchData(processedApiData);
               setTableData(processedApiData);
@@ -657,13 +759,16 @@ const FeatureClickEventPopup = ({
           }
         }
 
-        if (selectedLayerName === '침수흔적도' && featureId) {
+        if (selectedLayerName === "침수흔적도" && featureId) {
           try {
-            const normalizedFloodMapFid = normalizeFldngWtlvMapApiFid(featureId);
+            const normalizedFloodMapFid =
+              normalizeFldngWtlvMapApiFid(featureId);
             if (!normalizedFloodMapFid) {
               throw new Error("침수흔적도 fid가 비어 있습니다.");
             }
-            const rainAnalysis = await getData(`v1/fldng/hstry/rain-anls/${encodeURIComponent(normalizedFloodMapFid)}`);
+            const rainAnalysis = await getData(
+              `v1/fldng/hstry/rain-anls/${encodeURIComponent(normalizedFloodMapFid)}`,
+            );
             if (rainAnalysis) {
               const mergedData = {
                 ...formattedData,
@@ -677,7 +782,7 @@ const FeatureClickEventPopup = ({
           }
         }
       } catch (error) {
-        console.error('데이터 로딩 중 오류:', error);
+        console.error("데이터 로딩 중 오류:", error);
       }
     };
 
@@ -686,11 +791,12 @@ const FeatureClickEventPopup = ({
 
   useEffect(() => {
     const layerTypeNm = featureData?.values_
-      ? featureData?.id_?.split('.')?.[0]
+      ? featureData?.id_?.split(".")?.[0]
       : featureData?.lyrTypeNm;
 
-    if (layerTypeNm === 'tb_ms_swage_prcs_zone') {
-      const facilityCode = featureData?.values_?.swtrmt_fclt_cd ?? featureData?.swtrmtFcltCd;
+    if (layerTypeNm === "tb_ms_swage_prcs_zone") {
+      const facilityCode =
+        featureData?.values_?.swtrmt_fclt_cd ?? featureData?.swtrmtFcltCd;
       highlightLinkedFacility(facilityCode);
       return () => {
         clearLinkedFacilityHighlight();
@@ -705,19 +811,19 @@ const FeatureClickEventPopup = ({
   }, [featureData, gisMap]);
 
   // 저장 시 모달 띄우기
-  const handleSaveClick = () => {
-    const shouldSave = window.confirm('정보를 저장하시겠습니까?');
+  const handleSaveClick = async () => {
+    const shouldSave = await confirm("정보를 저장하시겠습니까?");
     if (!shouldSave) return;
     btnClickEvent();
   };
 
   // 저장 버튼 이벤트
   const btnClickEvent = async () => {
-    const bodyData: Record<string, any> = {}
+    const bodyData: Record<string, any> = {};
 
     if (buttonChk && contentRef.current) {
-      const inputElements = contentRef.current.querySelectorAll('input');
-      const selectElements = contentRef.current.querySelectorAll('select');
+      const inputElements = contentRef.current.querySelectorAll("input");
+      const selectElements = contentRef.current.querySelectorAll("select");
 
       // 카멜케이스 변환 함수
       const toCamelCase = (str: string) =>
@@ -736,25 +842,27 @@ const FeatureClickEventPopup = ({
       });
 
       // 레이어명에 따라 API 엔드포인트 분기처리
-      let apiEndpoint = '';
+      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';
+      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;
+      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';
+      if (layerNm === "우수토실" && bodyData.prrtymngYn) {
+        if (bodyData.prrtymngYn === "중점우수토실") {
+          bodyData.prrtymngYn = "Y";
+        } else if (bodyData.prrtymngYn === "우수토실") {
+          bodyData.prrtymngYn = "N";
         }
       }
 
@@ -762,86 +870,93 @@ const FeatureClickEventPopup = ({
         result = await postData(apiEndpoint, bodyData);
 
         if (result) {
-          alert('저장되었습니다');
+          alert("저장되었습니다");
           setFetchData(result.data || result);
         } else {
-          alert('저장에 실패했습니다');
-          console.error('API 응답 오류:', result);
+          alert("저장에 실패했습니다");
+          console.error("API 응답 오류:", result);
         }
       } catch (error) {
-        alert('저장 중 오류가 발생했습니다');
-        console.error('API 요청 오류:', 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]">
+    <div
+      id="popup"
+      className="absolute right-0 top-0 z-[50] flex h-[calc(100vh-5rem)] w-[350px] flex-col overflow-hidden border-r border-border bg-background transition-all duration-300"
+    >
       <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">
+      <div className="card-header relative flex items-center justify-between bg-primary p-4">
+        <div className="flex flex-1 items-center space-x-4">
           {surveyMode && (
-            <h3 className="text-2xl font-medium text-white text-label whitespace-nowrap">
+            <h3 className="whitespace-nowrap text-2xl font-medium text-primary-foreground">
               조사관리 <br />
-              관로번호 : {
-                featureData?.get?.("gisManagementNo")
-                ?? featureData?.values_?.gisManagementNo
-                ?? featureData?.gisManagementNo
-                ?? layerSpecificNm
-              }
+              관로번호 :{" "}
+              {featureData?.get?.("gisManagementNo") ??
+                featureData?.values_?.gisManagementNo ??
+                featureData?.gisManagementNo ??
+                layerSpecificNm}
             </h3>
           )}
-          <h3 className={`${surveyMode ? "hidden" : ""} text-2xl font-medium text-white text-label whitespace-nowrap`}>{layerNm}
-            {tableData?.usg_cd && (
-              <>
-                ({tableData.usg_cd})
-              </>
-            )} 정보 <br />관리번호 : {layerSpecificNm}
+          <h3
+            className={`${surveyMode ? "hidden" : ""} whitespace-nowrap text-2xl font-medium text-primary-foreground`}
+          >
+            {layerNm}
+            {tableData?.usg_cd && <>({tableData.usg_cd})</>} 정보 <br />
+            관리번호 : {layerSpecificNm}
           </h3>
         </div>
         <div className="flex items-center space-x-3">
           {/* 하수관로일 때만 Infil/RDII 버튼 표시 */}
-          {layerNm === '하수관로' && (
+          {layerNm === "하수관로" && (
             <>
               <Button
                 onClick={() => {
-                  const popupWindow = openWindowPopup("infilChart", { pplMngNo });
+                  const popupWindow = openWindowPopup("infilChart", {
+                    pplMngNo,
+                  });
                   if (!popupWindow) {
-                    alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+                    alert(
+                      "팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.",
+                    );
                   }
                 }}
-                className="py-1 text-xl text-blue-600 border border-blue-600 rounded hover:bg-gray-700"
-                color="white"
-                size="sm"
+                color="primary"
               >
                 침입수분석
               </Button>
               <Button
                 onClick={() => {
-                  const popupWindow = openWindowPopup("rdiiChart", { pplMngNo });
+                  const popupWindow = openWindowPopup("rdiiChart", {
+                    pplMngNo,
+                  });
                   if (!popupWindow) {
-                    alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+                    alert(
+                      "팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.",
+                    );
                   }
                 }}
-                className="py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700 mr-4"
-                color="white"
-                size="sm"
+                color="primary"
               >
                 RDII분석
               </Button>
             </>
           )}
-          {layerNm === '하수맨홀' && (
+          {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));
+                  searchUpperPpls(gisMap, layerSpecificNm, alert).finally(() =>
+                    setIsLoading(false),
+                  );
                 }}
               >
                 상류관로 보기
@@ -851,20 +966,30 @@ const FeatureClickEventPopup = ({
         </div>
         <Button
           onClick={onClose}
-          className="flex items-center space-x-4 text-white hover:text-gray-300 focus:outline-none"
+          className="text-primary-foreground/80 flex items-center space-x-4 hover:text-primary-foreground focus:outline-none"
           size="xs"
         >
           ✕
         </Button>
       </div>
-      <div className="overflow-y-auto overflow-x-hidden flex-1" ref={contentRef}>
+      <div
+        className="flex-1 overflow-y-auto overflow-x-hidden"
+        ref={contentRef}
+      >
         <VerticalTable
           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></>
-              : '기본정보'
+            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}
+          tableName1={layerNm === "중점우수토실" ? "측정지점" : undefined}
           tableData={[tableData]}
           headlist={headlist}
           pageSize={20}
@@ -874,15 +999,17 @@ const FeatureClickEventPopup = ({
             throw new Error("Function not implemented.");
           }}
           // 두 번째 테이블 조건부 props
-          showSecondTable={layerNm === '중점우수토실' ? true : false}
-          tableName2={layerNm === '중점우수토실' ? "시설현황" : undefined}
-          tableData2={layerNm === '중점우수토실' && tableData ? [tableData] : []}
-          headlist2={layerNm === '중점우수토실' ? headlist2 : undefined}
+          showSecondTable={layerNm === "중점우수토실" ? true : false}
+          tableName2={layerNm === "중점우수토실" ? "시설현황" : undefined}
+          tableData2={
+            layerNm === "중점우수토실" && tableData ? [tableData] : []
+          }
+          headlist2={layerNm === "중점우수토실" ? headlist2 : undefined}
           pageSize2={20}
           total2={0}
           isEditable2={buttonChk}
         />
-        {ContentComponent &&
+        {ContentComponent && (
           <ContentComponent
             featureData={fetchData}
             isMainSsc={isMainSsc}
@@ -893,14 +1020,14 @@ const FeatureClickEventPopup = ({
             gisObject={featureData?.values_ ?? featureData}
             rawFeatureData={featureData}
             surveyResultContent={
-              surveyMode
-                ? <ExmnSurveyResultSection featureData={featureData} />
-                : undefined
+              surveyMode ? (
+                <ExmnSurveyResultSection featureData={featureData} />
+              ) : undefined
             }
           />
-        }
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 export default FeatureClickEventPopup;
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 68e191d1e..e4a8fa0ba 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
@@ -18,18 +18,22 @@ 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) {
+export async function searchUpperPpls(
+  gisMap: any,
+  fcltMngNo: any,
+  notify: (message: string) => void,
+) {
   let data: any = null;
   try {
     data = await getData(`v1/fcltmhl/upperPpls/${fcltMngNo}`);
   } catch (error) {
     console.error("JSON parsing error:", error);
-    alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
+    notify(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
     return;
   }
 
   if (!data) {
-    alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
+    notify(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
     return;
   }
 
@@ -59,7 +63,7 @@ export async function searchUpperPpls(gisMap: any, fcltMngNo: any) {
     if (foundFeature) select?.selectMultiFeature?.(foundFeature, true);
   });
 
-  if (!foundFeature) alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
+  if (!foundFeature) notify(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
 
   const geometry = foundFeature?.getGeometry();
   if (geometry) {
diff --git a/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
index 76d55fd28..1e052cfad 100644
--- a/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
@@ -2,19 +2,22 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { DateMonthPicker } from "@common/business_components/ui/date_month_picker";
-import { UiTable } from "@common/business_components/ui/table";
-import type {
-  UiHeadProps,
-  UiTableSort,
-} from "@common/business_components/ui/table";
+import {
+  StandardPopupLayout,
+  type UiHeadProps,
+} from "@common/business_components";
 import { Button } from "@common/components";
 
 import { getData } from "@/components/lib/api";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
-import LoadingOverlay from "@/components/ui/LoadingBar";
+import { useAlertStore } from "@/shared/lib";
 import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
 import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
 import useStore from "@/store/useStore";
+import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
+import LoadingOverlay from "@/components/ui/LoadingBar";
 
 import {
   RDII_RESULT_ROW_SELECT_MESSAGE,
@@ -24,8 +27,8 @@ import {
 
 const RDII_RESULT_PAGE_SIZE = 10;
 
-const RDII_RESULT_HEADLIST = [
-  { id: "rowNumber", title: "일련번호" },
+const RDII_RESULT_HEADLIST: UiHeadProps[] = [
+  { id: "rowNumber", title: "순번" },
   { id: "ctpvNm", title: "시도" },
   { id: "sggNm", title: "시군구" },
   { id: "swtrmtFcltNm", title: "하수처리시설" },
@@ -37,18 +40,7 @@ const RDII_RESULT_HEADLIST = [
   { id: "regDt", title: "분석일자" },
   { id: "rgtrNm", title: "분석자" },
   { id: "scsYn", title: "분석성공여부" },
-] as const;
-// 화면 표시명과 분석 Entity 필드가 다른 열은 서버 정렬 키를 명시한다.
-const RDII_RESULT_SORT_KEYS: Record<string, string> = {
-  ctpvNm: "ctpvCd",
-  sggNm: "sggCd",
-};
-const RDII_RESULT_SORTABLE_HEADLIST: UiHeadProps[] = RDII_RESULT_HEADLIST.map((head) => ({
-  ...head,
-  // 분석자명은 목록 조회 후 외부 사용자 서비스에서 보강되므로 전체 결과 정렬에서 제외한다.
-  sortable: head.id !== "rgtrNm",
-  sortKey: RDII_RESULT_SORT_KEYS[head.id] ?? head.id,
-}));
+];
 
 type RdiiResultFilters = {
   ctpvCd: string;
@@ -101,6 +93,7 @@ const postRowSelectMessage = (row: RdiiResultRow) => {
 };
 
 export default function RdiiResultPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   const [filters, setFilters] = useState<RdiiResultFilters>(DEFAULT_FILTERS);
   const [selectedSwagePrcsFclt, setSelectedSwagePrcsFclt] = useState("0");
@@ -108,9 +101,7 @@ export default function RdiiResultPopupPage() {
   const [rows, setRows] = useState<RdiiResultRow[]>([]);
   const [total, setTotal] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
-  const [sort, setSort] = useState<UiTableSort>();
 
   useEffect(() => {
     if (ctpv.length === 0) void fetchCtpv();
@@ -118,23 +109,24 @@ export default function RdiiResultPopupPage() {
   }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
 
   const fetchRows = useCallback(
-    async (page: number, nextFilters: RdiiResultFilters, nextSort?: UiTableSort) => {
+    async (page: number, nextFilters: RdiiResultFilters) => {
       const queryParams = new URLSearchParams({
         page: String(page - 1),
         size: String(RDII_RESULT_PAGE_SIZE),
         scsYn: "Y",
       });
-      const requestSort = nextSort?.key === "rowNumber"
-        ? { key: "rainInfwtAnlsSn", direction: nextSort.direction === "asc" ? "desc" : "asc" }
-        : nextSort;
-      if (requestSort) queryParams.append("sort", `${requestSort.key},${requestSort.direction}`);
-      if (requestSort?.key !== "rainInfwtAnlsSn") queryParams.append("sort", "rainInfwtAnlsSn,desc");
+      queryParams.append("sort", "rainInfwtAnlsSn,desc");
 
-      if (nextFilters.aplcnYmFrom) queryParams.set("aplcnYmFrom", nextFilters.aplcnYmFrom);
-      if (nextFilters.aplcnYmTo) queryParams.set("aplcnYmTo", nextFilters.aplcnYmTo);
-      if (nextFilters.ctpvCd !== "0") queryParams.set("ctpvCd", nextFilters.ctpvCd);
-      if (nextFilters.sggCd !== "0") queryParams.set("sggCd", nextFilters.sggCd);
-      if (nextFilters.swtrmtFcltNm.trim()) queryParams.set("swtrmtFcltNm", nextFilters.swtrmtFcltNm.trim());
+      if (nextFilters.aplcnYmFrom)
+        queryParams.set("aplcnYmFrom", nextFilters.aplcnYmFrom);
+      if (nextFilters.aplcnYmTo)
+        queryParams.set("aplcnYmTo", nextFilters.aplcnYmTo);
+      if (nextFilters.ctpvCd !== "0")
+        queryParams.set("ctpvCd", nextFilters.ctpvCd);
+      if (nextFilters.sggCd !== "0")
+        queryParams.set("sggCd", nextFilters.sggCd);
+      if (nextFilters.swtrmtFcltNm.trim())
+        queryParams.set("swtrmtFcltNm", nextFilters.swtrmtFcltNm.trim());
 
       const response = await getData(`v1/rdiiAnls?${queryParams.toString()}`);
       const content = Array.isArray(response?.content) ? response.content : [];
@@ -143,14 +135,17 @@ export default function RdiiResultPopupPage() {
       const nextRows = content
         .map((item: Record<string, unknown>, index: number) => {
           const formattedItem = formatDisplayData(item);
-          const ctpvOption = ctpv.find((code) => code.val.trim() === String(item?.ctpvCd ?? "").trim());
+          const ctpvOption = ctpv.find(
+            (code) => code.val.trim() === String(item?.ctpvCd ?? "").trim(),
+          );
           const sggOption = sgg.find((code) => code.val === item?.sggCd);
 
           return {
             ...(formattedItem as Record<string, unknown>),
-            rowNumber: nextSort?.key === "rowNumber" && nextSort.direction === "desc"
-              ? totalElements - ((page - 1) * RDII_RESULT_PAGE_SIZE + index)
-              : (page - 1) * RDII_RESULT_PAGE_SIZE + index + 1,
+            rowNumber: Math.max(
+              totalElements - ((page - 1) * RDII_RESULT_PAGE_SIZE + index),
+              0,
+            ),
             ctpvNm: ctpvOption ? ctpvOption.text : String(item?.ctpvCd ?? "-"),
             sggNm: sggOption ? sggOption.text : String(item?.sggCd ?? "-"),
             scsYn: String(item?.scsYn ?? "N"),
@@ -166,10 +161,10 @@ export default function RdiiResultPopupPage() {
   );
 
   const loadRows = useCallback(
-    async (page = 1, nextFilters = filters, nextSort = sort) => {
+    async (page = 1, nextFilters = filters) => {
       setIsLoading(true);
       try {
-        await fetchRows(page, nextFilters, nextSort);
+        await fetchRows(page, nextFilters);
       } catch (error) {
         console.error("RDII 분석결과 목록 조회 중 오류:", error);
         alert("RDII 분석결과 목록을 불러오지 못했습니다.");
@@ -179,7 +174,7 @@ export default function RdiiResultPopupPage() {
         setIsLoading(false);
       }
     },
-    [fetchRows, filters, sort],
+    [alert, fetchRows, filters],
   );
 
   useEffect(() => {
@@ -188,17 +183,16 @@ export default function RdiiResultPopupPage() {
   }, []);
 
   const handleSearch = async (page = 1) => {
-    setSelectedIndex(-1);
     setSelectedRow(null);
     await loadRows(page, filters);
   };
 
-  /** Applies server sorting while keeping the current search filters. */
-  const handleSortChange = async (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setSelectedIndex(-1);
+  /** CS 검색 카드와 동일하게 조건과 선택 결과를 기본값으로 되돌린다. */
+  const handleReset = async () => {
+    setFilters(DEFAULT_FILTERS);
+    setSelectedSwagePrcsFclt("0");
     setSelectedRow(null);
-    await loadRows(1, filters, nextSort);
+    await loadRows(1, DEFAULT_FILTERS);
   };
 
   const handleRowClick = (index?: number) => {
@@ -206,7 +200,6 @@ export default function RdiiResultPopupPage() {
     const row = rows[index];
     if (!row) return;
 
-    setSelectedIndex(index);
     setSelectedRow(row);
     postRowSelectMessage(row);
   };
@@ -219,8 +212,12 @@ export default function RdiiResultPopupPage() {
 
     try {
       setIsLoading(true);
-      const response = await getData(`v1/rdiiAnlsRslt/ppl/${selectedRow.rainInfwtAnlsSn}`);
-      const excelRows = Array.isArray(response?.content) ? response.content : [];
+      const response = await getData(
+        `v1/rdiiAnlsRslt/ppl/${selectedRow.rainInfwtAnlsSn}`,
+      );
+      const excelRows = Array.isArray(response?.content)
+        ? response.content
+        : [];
 
       await downloadExcelWithKoreanHeaders({
         data: excelRows as JSON[],
@@ -228,7 +225,7 @@ export default function RdiiResultPopupPage() {
         sheetNameArray: ["RDII 분석결과"],
         headerRange: "A1:D1",
         headerMapping: {
-          rainInfwtAnlsSn: "RDII분석\n일련번호",
+          rainInfwtAnlsSn: "RDII분석\n분석번호",
           pplMngNo: "관로\n관리번호",
           anlsTm: "분석시각",
           predcOilq: "예측유량\n(m³/h)",
@@ -243,141 +240,138 @@ export default function RdiiResultPopupPage() {
   };
 
   return (
-    <main className="sn-popup-page">
+    <StandardPopupLayout
+      title={windowPopupDefinitions.rdiiResultPopup.title}
+      bodyClassName="overflow-x-hidden"
+    >
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">RDII 분석결과</h1>
-      </header>
-
-      <section className="sn-popup-section overflow-y-auto">
-        <div className="rounded-md border border-border bg-secondary p-4">
-          <div className="flex flex-wrap items-center gap-3">
-            <div className="flex items-center gap-2">
-              <span className="whitespace-nowrap text-[1.05rem] font-medium text-label">상수사용기간</span>
-              <DateMonthPicker
-                field={{
-                  value: filters.aplcnYmFrom,
-                  onChange: (value: string) => {
-                    setFilters((current) => ({
-                      ...current,
-                      aplcnYmFrom: value,
-                    }));
-                  },
-                }}
-                selectClass="w-[145px]"
-                startYear={1900}
-              />
-              <span className="text-[1.1rem] font-semibold text-muted-foreground">~</span>
-              <DateMonthPicker
-                field={{
-                  value: filters.aplcnYmTo,
-                  onChange: (value: string) => {
-                    setFilters((current) => ({
-                      ...current,
-                      aplcnYmTo: value,
-                    }));
-                  },
-                }}
-                selectClass="w-[145px]"
-                startYear={1900}
-              />
-            </div>
-
-            <div className="min-w-0 flex-1 overflow-x-auto">
-              <CtpvSggPrcsFcltSelectBox
-                sido={filters.ctpvCd}
-                sigungu={filters.sggCd}
-                sggName={filters.sggName}
-                onSidoChange={(value) => {
-                  setSelectedSwagePrcsFclt("0");
-                  setFilters((current) => ({
-                    ...current,
-                    ctpvCd: value,
-                    sggCd: "0",
-                    sggName: "",
-                    swtrmtFcltNm: "",
-                  }));
-                }}
-                onSigunguChange={(value) => {
-                  setSelectedSwagePrcsFclt("0");
-                  setFilters((current) => ({
-                    ...current,
-                    sggCd: value,
-                    swtrmtFcltNm: "",
-                  }));
-                }}
-                setSggName={(value) => {
-                  setSelectedSwagePrcsFclt("0");
-                  setFilters((current) => ({
-                    ...current,
-                    sggName: value ?? "",
-                    swtrmtFcltNm: "",
-                  }));
-                }}
-                selectedSwagePrcsFclt={selectedSwagePrcsFclt}
-                onSwagePrcsFcltChange={setSelectedSwagePrcsFclt}
-                setSwtrmtFcltNm={(value) =>
-                  setFilters((current) => ({
-                    ...current,
-                    swtrmtFcltNm: value ?? "",
-                  }))
-                }
-                setIsLoading={setIsLoading}
-              />
-            </div>
-
-            <div className="ml-auto flex items-center gap-2">
-              <Button
-                type="button"
-                size="sm"
-                color="primary"
-                className="h-10 px-5 !text-[1.1rem]"
-                onClick={() => void handleSearch(1)}
-              >
-                조회
-              </Button>
-              <Button
-                type="button"
-                color="green"
-                size="sm"
-                className="h-10 px-5 !text-[1.1rem]"
-                onClick={() => void handleDownload()}
-              >
-                다운로드
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-4">
-          <UiTable<RdiiResultRow>
-            headName={<>{`분석이력 총 ${total.toLocaleString()}건`}</>}
-            tableData={rows}
-            headlist={RDII_RESULT_SORTABLE_HEADLIST}
-            pageSize={RDII_RESULT_PAGE_SIZE}
-            total={total}
-            cellClick={(index) => handleRowClick(index)}
-            cellClassName={(_, headId) =>
-              headId === "anlsInfo"
-                ? "whitespace-normal break-all leading-[1.35]"
-                : ""
-            }
-            onPageChange={(page) => void handleSearch(page)}
-            curPage={currentPage}
-            index={selectedIndex}
-            widthFixed={true}
-            sort={sort}
-            onSortChange={(nextSort) => void handleSortChange(nextSort)}
+      <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+        <div className="flex shrink-0 items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] font-medium text-label">
+            상수사용기간
+          </span>
+          <DateMonthPicker
+            field={{
+              value: filters.aplcnYmFrom,
+              onChange: (value: string) => {
+                setFilters((current) => ({
+                  ...current,
+                  aplcnYmFrom: value,
+                }));
+              },
+            }}
+            selectClass="w-[145px] !text-[1.3rem]"
+            startYear={1900}
+          />
+          <span className="text-[1.1rem] font-semibold text-muted-foreground">
+            ~
+          </span>
+          <DateMonthPicker
+            field={{
+              value: filters.aplcnYmTo,
+              onChange: (value: string) => {
+                setFilters((current) => ({
+                  ...current,
+                  aplcnYmTo: value,
+                }));
+              },
+            }}
+            selectClass="w-[145px] !text-[1.3rem]"
+            startYear={1900}
           />
         </div>
 
-        {selectedRow ? (
-          <div className="mt-3 rounded-md border border-border bg-secondary px-4 py-3 text-[1rem] text-label">
-            {"선택 분석: "}
-            <span className="font-semibold text-foreground">{selectedRow.anlsInfo}</span>
-          </div>
-        ) : null}
-      </section>
-    </main>
+        <div className="min-w-0 shrink-0">
+          <CtpvSggPrcsFcltSelectBox
+            compact
+            className="!justify-start"
+            selectValueClassName="!text-[1.3rem]"
+            sido={filters.ctpvCd}
+            sigungu={filters.sggCd}
+            sggName={filters.sggName}
+            onSidoChange={(value) => {
+              setSelectedSwagePrcsFclt("0");
+              setFilters((current) => ({
+                ...current,
+                ctpvCd: value,
+                sggCd: "0",
+                sggName: "",
+                swtrmtFcltNm: "",
+              }));
+            }}
+            onSigunguChange={(value) => {
+              setSelectedSwagePrcsFclt("0");
+              setFilters((current) => ({
+                ...current,
+                sggCd: value,
+                swtrmtFcltNm: "",
+              }));
+            }}
+            setSggName={(value) => {
+              setSelectedSwagePrcsFclt("0");
+              setFilters((current) => ({
+                ...current,
+                sggName: value ?? "",
+                swtrmtFcltNm: "",
+              }));
+            }}
+            selectedSwagePrcsFclt={selectedSwagePrcsFclt}
+            onSwagePrcsFcltChange={setSelectedSwagePrcsFclt}
+            setSwtrmtFcltNm={(value) =>
+              setFilters((current) => ({
+                ...current,
+                swtrmtFcltNm: value ?? "",
+              }))
+            }
+            setIsLoading={setIsLoading}
+          />
+        </div>
+
+        <div className="ml-auto flex shrink-0 items-center justify-end gap-2">
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void handleSearch(1)}
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => void handleReset()}
+          >
+            초기화
+          </Button>
+        </div>
+      </PopupSearchPanel>
+
+      <MapPopupDataTable
+        rows={rows as Array<RdiiResultRow & Record<string, unknown>>}
+        headlist={RDII_RESULT_HEADLIST}
+        title="RDII 분석결과 목록"
+        total={total}
+        page={currentPage}
+        pageSize={RDII_RESULT_PAGE_SIZE}
+        onPageChange={(page) => void handleSearch(page)}
+        onRowClick={(_, index) => handleRowClick(index)}
+        rowId={(row) => String(row.rainInfwtAnlsSn)}
+        scrollMode="horizontal"
+        minTableWidth="125rem"
+        actions={
+          <Button type="button" onClick={() => void handleDownload()}>
+            엑셀다운로드
+          </Button>
+        }
+      />
+
+      {selectedRow ? (
+        <div className="rounded-sm border border-border bg-secondary px-4 py-3 text-[1rem] text-label">
+          {"선택 분석: "}
+          <span className="font-semibold text-foreground">
+            {selectedRow.anlsInfo}
+          </span>
+        </div>
+      ) : null}
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts b/apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts
index 91b7efcdc..6369daa08 100644
--- a/apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts
+++ b/apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts
@@ -9,6 +9,7 @@ import Style from "ol/style/Style.js";
 
 import { getRawJson } from "@/components/lib/api";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { useAlertStore } from "@/shared/lib";
 
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
 import { getSigunguCenter, moveMapToCenter, sidoCenter } from "@common/business_components/ui/map/searchBar/utils";
@@ -138,6 +139,7 @@ export const useRdiiResultMap = ({
   setIsOpen,
   setIsSearchModalOpen,
 }: UseRdiiResultMapParams) => {
+  const alert = useAlertStore((state) => state.setMessage);
   const activeResultRowRef = useRef<RdiiResultRow | null>(null);
   const pipeLayerRef = useRef<VectorLayer<any> | null>(null);
   const pipeSourceRef = useRef<VectorSource | null>(null);
@@ -294,7 +296,7 @@ export const useRdiiResultMap = ({
         alert("RDII 분석결과를 지도에 연계하지 못했습니다.");
       }
     },
-    [renderMapView, setFeatureData, setIsOpen, setIsSearchModalOpen],
+    [alert, renderMapView, setFeatureData, setIsOpen, setIsSearchModalOpen],
   );
 
   useEffect(() => {
@@ -356,11 +358,11 @@ export const useRdiiResultMap = ({
     }
 
     return true;
-  }, [activeMapView]);
+  }, [activeMapView, alert]);
 
   return {
     activeMapView,
     clearLayers,
     handleOverlayFeatureSelect,
   };
-};
\ No newline at end of file
+};
diff --git a/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx
index b9d3b8ddb..6b7c2ad33 100644
--- a/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/repairHistory/RepairHistoryPopupPage.tsx
@@ -1,11 +1,15 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button } from "@common/components";
-import { UiTable } from "@common/business_components/ui/table";
-import type { UiHeadProps } from "@common/business_components/ui/table";
+import { Button, Input } from "@common/components";
+import {
+  StandardPopupLayout,
+  type UiHeadProps,
+} from "@common/business_components";
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import { getRawJson } from "@/components/lib/api";
 import {
   WINDOW_POPUP_MESSAGE_TYPE,
@@ -21,7 +25,8 @@ import {
 } from "../popupComponent/swtrmtPrcsZoneAnalysisApi";
 
 const REPAIR_HISTORY_PAGE_SIZE = 10;
-const MAP_LAYER_SETTING_PATH = "/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK";
+const MAP_LAYER_SETTING_PATH =
+  "/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK";
 
 type PipeUseOption = {
   val: string;
@@ -36,14 +41,19 @@ type MapLayerSettingRow = {
 };
 
 /** 관망도 트리의 하수관로 노드에서 용도코드·명칭·표시순서를 그대로 추출한다. */
-const resolvePipeUseOptions = (rows: MapLayerSettingRow[]): PipeUseOption[] => rows
-  .filter((row) => row.lyrTyNm === "tb_ms_swage_ppl")
-  .sort((left, right) => Number(left.sortOrdr ?? 0) - Number(right.sortOrdr ?? 0))
-  .flatMap((row) => {
-    const code = String(row.flterSql ?? "").match(/\busg_cd\s*=\s*['\"]([^'\"]+)['\"]/i)?.[1]?.trim();
-    const text = String(row.lyrNm ?? "").trim();
-    return code && text ? [{ val: code, text }] : [];
-  });
+const resolvePipeUseOptions = (rows: MapLayerSettingRow[]): PipeUseOption[] =>
+  rows
+    .filter((row) => row.lyrTyNm === "tb_ms_swage_ppl")
+    .sort(
+      (left, right) => Number(left.sortOrdr ?? 0) - Number(right.sortOrdr ?? 0),
+    )
+    .flatMap((row) => {
+      const code = String(row.flterSql ?? "")
+        .match(/\busg_cd\s*=\s*['\"]([^'\"]+)['\"]/i)?.[1]
+        ?.trim();
+      const text = String(row.lyrNm ?? "").trim();
+      return code && text ? [{ val: code, text }] : [];
+    });
 
 type RepairHistoryTableRow = {
   fid: string;
@@ -58,16 +68,37 @@ type RepairHistoryTableRow = {
   burialDepth: string;
 };
 
-/** 부모 업무화면과 동일한 공통 UiTable 헤더·열 정렬 규격이다. */
+/** 부모 업무화면과 동일한 공통 표 헤더·열 규격이다. */
 const REPAIR_HISTORY_HEADLIST: UiHeadProps[] = [
+  { id: "rowNo", title: "순번", align: "center", widthPercent: 7 },
   { id: "fcltMngNo", title: "시설관리번호", align: "center", widthPercent: 17 },
   { id: "useName", title: "용도", align: "center", widthPercent: 10 },
-  { id: "repairCount", title: "보수이력(건)", align: "right", widthPercent: 10 },
-  { id: "latestRepairYear", title: "최근보수년도", align: "center", widthPercent: 11 },
-  { id: "elapsedYearsSinceRepair", title: "보수후 경과년도", align: "right", widthPercent: 12 },
+  {
+    id: "repairCount",
+    title: "보수이력(건)",
+    align: "right",
+    widthPercent: 10,
+  },
+  {
+    id: "latestRepairYear",
+    title: "최근보수년도",
+    align: "center",
+    widthPercent: 11,
+  },
+  {
+    id: "elapsedYearsSinceRepair",
+    title: "보수후 경과년도",
+    align: "right",
+    widthPercent: 12,
+  },
   { id: "materialName", title: "재질", align: "center", widthPercent: 13 },
   { id: "diameter", title: "관경(mm)", align: "right", widthPercent: 9 },
-  { id: "installationYear", title: "설치년도", align: "center", widthPercent: 8 },
+  {
+    id: "installationYear",
+    title: "설치년도",
+    align: "center",
+    widthPercent: 8,
+  },
   { id: "burialDepth", title: "매설심도(m)", align: "right", widthPercent: 10 },
 ];
 
@@ -81,7 +112,9 @@ const buildEmptyFilters = (): RepairHistoryFilters => ({
 
 /** Next searchParams의 단일 값을 안전하게 읽는다. */
 const firstSearchParam = (value: string | string[] | undefined) =>
-  Array.isArray(value) ? String(value[0] ?? "").trim() : String(value ?? "").trim();
+  Array.isArray(value)
+    ? String(value[0] ?? "").trim()
+    : String(value ?? "").trim();
 
 /** 팝업의 조회·선택·정리 이벤트를 동일 출처의 부모 지도에 전달한다. */
 const postRepairMessage = (
@@ -122,52 +155,76 @@ const formatYear = (value: unknown) => {
 };
 
 /** SFR-011-006 관로별 보수이력 조회·다운로드와 부모 지도 연계를 제공한다. */
-export default function RepairHistoryPopupPage({ searchParams }: WindowPopupContentProps) {
-  const zoneId = useMemo(() => firstSearchParam(searchParams.zoneId), [searchParams.zoneId]);
-  const zoneName = useMemo(() => firstSearchParam(searchParams.zoneName), [searchParams.zoneName]);
+export default function RepairHistoryPopupPage({
+  searchParams,
+}: WindowPopupContentProps) {
+  const zoneId = useMemo(
+    () => firstSearchParam(searchParams.zoneId),
+    [searchParams.zoneId],
+  );
+  const zoneName = useMemo(
+    () => firstSearchParam(searchParams.zoneName),
+    [searchParams.zoneName],
+  );
   // 입력조건과 마지막 조회조건을 분리해 다운로드가 현재 표와 동일한 범위를 사용한다.
-  const [filters, setFilters] = useState<RepairHistoryFilters>(buildEmptyFilters);
-  const [appliedFilters, setAppliedFilters] = useState<RepairHistoryFilters>(buildEmptyFilters);
+  const [filters, setFilters] =
+    useState<RepairHistoryFilters>(buildEmptyFilters);
+  const [appliedFilters, setAppliedFilters] =
+    useState<RepairHistoryFilters>(buildEmptyFilters);
   // 전체 조회 결과는 부모 지도 강조와 팝업 내 10건 페이지 표가 함께 사용한다.
   const [rows, setRows] = useState<RepairHistoryRow[]>([]);
   // 용도 선택지는 별도 하드코딩하지 않고 관망도 트리 설정 API의 sortOrdr를 따른다.
   const [pipeUseOptions, setPipeUseOptions] = useState<PipeUseOption[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedFid, setSelectedFid] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
   /** 조회 결과 전체를 부모 지도 레이어와 팝업 표에 동시에 반영한다. */
-  const searchRepairHistories = useCallback(async (nextFilters: RepairHistoryFilters) => {
-    if (!zoneId) {
-      setErrorMessage("처리구역 식별값이 없습니다.");
-      return;
-    }
+  const searchRepairHistories = useCallback(
+    async (nextFilters: RepairHistoryFilters) => {
+      if (!zoneId) {
+        setErrorMessage("처리구역 식별값이 없습니다.");
+        return;
+      }
 
-    setIsLoading(true);
-    setErrorMessage("");
-    setSelectedFid("");
-    try {
-      const response = await fetchAllRepairHistoriesByZoneId(zoneId, nextFilters);
-      const nextRows = response.data ?? [];
-      setRows(nextRows);
-      setAppliedFilters({ ...nextFilters });
-      setCurrentPage(1);
-      postRepairMessage(WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SHOW_RESULTS, {
-        zoneId,
-        rows: nextRows,
-      });
-    } catch (error) {
-      setRows([]);
-      postRepairMessage(WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SHOW_RESULTS, {
-        zoneId,
-        rows: [],
-      });
-      setErrorMessage(error instanceof Error ? error.message : "보수이력을 불러오지 못했습니다.");
-    } finally {
-      setIsLoading(false);
-    }
-  }, [zoneId]);
+      setIsLoading(true);
+      setErrorMessage("");
+      try {
+        const response = await fetchAllRepairHistoriesByZoneId(
+          zoneId,
+          nextFilters,
+        );
+        const nextRows = response.data ?? [];
+        setRows(nextRows);
+        setAppliedFilters({ ...nextFilters });
+        setCurrentPage(1);
+        postRepairMessage(
+          WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SHOW_RESULTS,
+          {
+            zoneId,
+            rows: nextRows,
+          },
+        );
+      } catch (error) {
+        setRows([]);
+        postRepairMessage(
+          WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SHOW_RESULTS,
+          {
+            zoneId,
+            rows: [],
+          },
+        );
+        setErrorMessage(
+          error instanceof Error
+            ? error.message
+            : "보수이력을 불러오지 못했습니다.",
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [zoneId],
+  );
 
   useEffect(() => {
     const initialFilters = buildEmptyFilters();
@@ -181,8 +238,15 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont
 
     const loadPipeUseOptions = async () => {
       try {
-        const layerSettings = await getRawJson(MAP_LAYER_SETTING_PATH) as MapLayerSettingRow[];
-        if (isMounted) setPipeUseOptions(resolvePipeUseOptions(Array.isArray(layerSettings) ? layerSettings : []));
+        const layerSettings = (await getRawJson(
+          MAP_LAYER_SETTING_PATH,
+        )) as MapLayerSettingRow[];
+        if (isMounted)
+          setPipeUseOptions(
+            resolvePipeUseOptions(
+              Array.isArray(layerSettings) ? layerSettings : [],
+            ),
+          );
       } catch {
         if (isMounted) setPipeUseOptions([]);
       }
@@ -196,7 +260,9 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont
 
   useEffect(() => {
     const clearParentLayer = () => {
-      postRepairMessage(WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_CLEAR, { zoneId });
+      postRepairMessage(WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_CLEAR, {
+        zoneId,
+      });
     };
     window.addEventListener("beforeunload", clearParentLayer);
     return () => {
@@ -211,10 +277,18 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont
     setIsLoading(true);
     setErrorMessage("");
     try {
-      const { blob } = await downloadRepairHistoriesByZoneId(zoneId, appliedFilters, zoneName);
+      const { blob } = await downloadRepairHistoriesByZoneId(
+        zoneId,
+        appliedFilters,
+        zoneName,
+      );
       saveBlob(blob, buildRepairHistoryFileName(zoneName));
     } catch (error) {
-      setErrorMessage(error instanceof Error ? error.message : "보수이력 Excel 다운로드에 실패했습니다.");
+      setErrorMessage(
+        error instanceof Error
+          ? error.message
+          : "보수이력 Excel 다운로드에 실패했습니다.",
+      );
     } finally {
       setIsLoading(false);
     }
@@ -222,7 +296,6 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont
 
   /** 행을 한 번 클릭하면 부모 지도에서 해당 관로를 선택하고 범위로 이동한다. */
   const handleRowClick = (row: RepairHistoryRow) => {
-    setSelectedFid(row.fid);
     postRepairMessage(WINDOW_POPUP_MESSAGE_TYPE.REPAIR_HISTORY_SELECT_PIPE, {
       zoneId,
       fid: row.fid,
@@ -230,148 +303,182 @@ export default function RepairHistoryPopupPage({ searchParams }: WindowPopupCont
   };
 
   const visibleRows = useMemo(
-    () => rows.slice(
-      (currentPage - 1) * REPAIR_HISTORY_PAGE_SIZE,
-      currentPage * REPAIR_HISTORY_PAGE_SIZE,
-    ),
+    () =>
+      rows.slice(
+        (currentPage - 1) * REPAIR_HISTORY_PAGE_SIZE,
+        currentPage * REPAIR_HISTORY_PAGE_SIZE,
+      ),
     [currentPage, rows],
   );
-  // 공통 UiTable에 전달할 표시값은 원본 API 행과 분리해 지도 연계 식별값을 보존한다.
+  // 공통 표에 전달할 표시값은 원본 API 행과 분리해 지도 연계 식별값을 보존한다.
   const tableRows = useMemo<RepairHistoryTableRow[]>(
-    () => visibleRows.map((row) => ({
-      fid: row.fid,
-      fcltMngNo: formatCellValue(row.fcltMngNo),
-      useName: formatCellValue(row.useNm),
-      repairCount: formatCellValue(row.repairCount),
-      latestRepairYear: formatYear(row.latestRepairYear),
-      elapsedYearsSinceRepair: formatCellValue(row.elapsedYearsSinceRepair),
-      materialName: formatCellValue(row.materialName),
-      diameter: formatCellValue(row.pdmtVl),
-      installationYear: formatYear(row.installationYear),
-      burialDepth: formatCellValue(row.burialDepth),
-    })),
+    () =>
+      visibleRows.map((row) => ({
+        fid: row.fid,
+        fcltMngNo: formatCellValue(row.fcltMngNo),
+        useName: formatCellValue(row.useNm),
+        repairCount: formatCellValue(row.repairCount),
+        latestRepairYear: formatYear(row.latestRepairYear),
+        elapsedYearsSinceRepair: formatCellValue(row.elapsedYearsSinceRepair),
+        materialName: formatCellValue(row.materialName),
+        diameter: formatCellValue(row.pdmtVl),
+        installationYear: formatYear(row.installationYear),
+        burialDepth: formatCellValue(row.burialDepth),
+      })),
     [visibleRows],
   );
-  const selectedRowIndex = visibleRows.findIndex((row) => row.fid === selectedFid);
-
   return (
-    <main className="sn-popup-page w-full max-w-full overflow-x-hidden overflow-y-hidden">
+    <StandardPopupLayout title="보수이력 목록">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">보수이력</h1>
-      </header>
 
-      <section className="flex min-h-0 flex-1 flex-col overflow-x-hidden px-4 pb-3 pt-3">
-        <div className="sn-popup-filter-panel-compact flex w-full flex-wrap items-center gap-x-8 gap-y-3 px-4 py-3">
-          <label className="flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
-            <span>용도</span>
-            <select
-              className="h-[3.2rem] w-[150px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
-              value={filters.useCd}
-              onChange={(event) => setFilters((current) => ({ ...current, useCd: event.target.value }))}
-              data-testid="repair-use-filter"
-            >
-              <option value="">전체</option>
-              {pipeUseOptions.map((code) => (
-                <option key={code.val} value={code.val}>{code.text}</option>
-              ))}
-            </select>
-          </label>
+      <PopupSearchPanel contentClassName="flex w-full flex-wrap items-center gap-x-5 gap-y-3">
+        <label className="flex items-center gap-2 whitespace-nowrap text-[1.3rem] text-label">
+          <span>용도</span>
+          <select
+            className="h-[3.2rem] w-[15rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            value={filters.useCd}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                useCd: event.target.value,
+              }))
+            }
+            data-testid="repair-use-filter"
+          >
+            <option value="">전체</option>
+            {pipeUseOptions.map((code) => (
+              <option key={code.val} value={code.val}>
+                {code.text}
+              </option>
+            ))}
+          </select>
+        </label>
 
-          <label className="flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
-            <span>재질</span>
-            <select
-              className="h-[3.2rem] w-[180px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
-              value={filters.materialCode}
-              onChange={(event) => setFilters((current) => ({ ...current, materialCode: event.target.value }))}
-              data-testid="repair-material-filter"
-            >
-              <option value="">전체</option>
-              {MS_SWAGE_PPL_CODES.map((code) => (
-                <option key={code.val} value={code.val}>{code.text}</option>
-              ))}
-            </select>
-          </label>
+        <label className="flex items-center gap-2 whitespace-nowrap text-[1.3rem] text-label">
+          <span>재질</span>
+          <select
+            className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            value={filters.materialCode}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                materialCode: event.target.value,
+              }))
+            }
+            data-testid="repair-material-filter"
+          >
+            <option value="">전체</option>
+            {MS_SWAGE_PPL_CODES.map((code) => (
+              <option key={code.val} value={code.val}>
+                {code.text}
+              </option>
+            ))}
+          </select>
+        </label>
 
-          <div className="flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
-            <span>관경(mm)</span>
-            <input
-              type="number"
-              min="0"
-              aria-label="최소 관경(mm)"
-              className="h-[3.2rem] w-[100px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
-              value={filters.diameterFrom}
-              onChange={(event) => setFilters((current) => ({ ...current, diameterFrom: event.target.value }))}
-              data-testid="repair-diameter-from"
-            />
-            <span aria-hidden="true">~</span>
-            <input
-              type="number"
-              min="0"
-              aria-label="최대 관경(mm)"
-              className="h-[3.2rem] w-[100px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
-              value={filters.diameterTo}
-              onChange={(event) => setFilters((current) => ({ ...current, diameterTo: event.target.value }))}
-              data-testid="repair-diameter-to"
-            />
-          </div>
-
-          <div className="ml-auto flex shrink-0 items-center gap-2">
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white"
-              onClick={() => void searchRepairHistories({ ...filters })}
-              disabled={isLoading}
-              data-testid="repair-history-search"
-            >
-              조회
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="primary"
-              className="rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white"
-              onClick={() => void handleDownload()}
-              disabled={isLoading || rows.length === 0}
-              data-testid="repair-history-download"
-            >
-              다운로드
-            </Button>
-          </div>
-        </div>
-
-        {errorMessage ? (
-          <div role="alert" className="mb-2 mt-2 border border-destructive bg-secondary px-4 py-2 text-base text-destructive">
-            {errorMessage}
-          </div>
-        ) : null}
-
-        <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-2" aria-busy={isLoading}>
-          <UiTable<RepairHistoryTableRow>
-            headName={<>{zoneName || "처리구역"} 총 {rows.length.toLocaleString("ko-KR")}건</>}
-            tableData={isLoading ? [] : tableRows}
-            headlist={REPAIR_HISTORY_HEADLIST}
-            pageSize={REPAIR_HISTORY_PAGE_SIZE}
-            total={rows.length}
-            cellClick={(index) => {
-              if (index === undefined) return;
-              const row = visibleRows[index];
-              if (row) handleRowClick(row);
-            }}
-            onPageChange={setCurrentPage}
-            curPage={currentPage}
-            index={selectedRowIndex}
-            widthFixed={true}
-            isHideCount={true}
-            className="!m-0 overflow-x-hidden"
-            cellClassName={(_, headId) => headId === "fcltMngNo" ? "break-all whitespace-normal" : "whitespace-normal"}
+        <div className="flex items-center gap-2 whitespace-nowrap text-[1.3rem] text-label">
+          <span>관경(mm)</span>
+          <Input
+            type="number"
+            min="0"
+            aria-label="최소 관경(mm)"
+            className="w-[10rem]"
+            value={filters.diameterFrom}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                diameterFrom: event.target.value,
+              }))
+            }
+            data-testid="repair-diameter-from"
+          />
+          <span aria-hidden="true">~</span>
+          <Input
+            type="number"
+            min="0"
+            aria-label="최대 관경(mm)"
+            className="w-[10rem]"
+            value={filters.diameterTo}
+            onChange={(event) =>
+              setFilters((current) => ({
+                ...current,
+                diameterTo: event.target.value,
+              }))
+            }
+            data-testid="repair-diameter-to"
           />
         </div>
 
-        <div className="sn-popup-help-text">행을 클릭하면 부모 지도의 해당 관로로 이동합니다.</div>
-      </section>
-    </main>
+        <div className="ml-auto flex shrink-0 items-center gap-2">
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void searchRepairHistories({ ...filters })}
+            disabled={isLoading}
+            data-testid="repair-history-search"
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => {
+              const resetFilters: RepairHistoryFilters = {
+                useCd: "",
+                materialCode: "",
+                diameterFrom: "",
+                diameterTo: "",
+              };
+              setFilters(resetFilters);
+              void searchRepairHistories(resetFilters);
+            }}
+          >
+            초기화
+          </Button>
+        </div>
+      </PopupSearchPanel>
+
+      {errorMessage ? (
+        <div
+          role="alert"
+          className="mb-2 mt-2 border border-destructive bg-secondary px-4 py-2 text-base text-destructive"
+        >
+          {errorMessage}
+        </div>
+      ) : null}
+
+      <MapPopupDataTable
+        rows={
+          (isLoading ? [] : tableRows) as Array<
+            RepairHistoryTableRow & Record<string, unknown>
+          >
+        }
+        headlist={REPAIR_HISTORY_HEADLIST}
+        title={`${zoneName || "처리구역"} 보수이력 목록`}
+        total={rows.length}
+        page={currentPage}
+        pageSize={REPAIR_HISTORY_PAGE_SIZE}
+        onPageChange={setCurrentPage}
+        onRowClick={(_, index) => {
+          const row = visibleRows[index];
+          if (row) handleRowClick(row);
+        }}
+        rowId={(row, index) => String(row.fid ?? index)}
+        actions={
+          <Button
+            type="button"
+            onClick={() => void handleDownload()}
+            disabled={isLoading || rows.length === 0}
+            data-testid="repair-history-download"
+          >
+            엑셀다운로드
+          </Button>
+        }
+      />
+
+      <div className="rounded-sm bg-secondary px-4 py-3 text-[1.2rem] text-muted-foreground">
+        행을 클릭하면 부모 지도의 해당 관로로 이동합니다.
+      </div>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/SbmrgDngrMapPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/SbmrgDngrMapPopupPage.tsx
index 592a86ba3..e8e8ace66 100644
--- a/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/SbmrgDngrMapPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/SbmrgDngrMapPopupPage.tsx
@@ -2,11 +2,13 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button } from "@common/components";
-import { UiTable } from "@common/business_components/ui";
-import type { UiTableSort } from "@common/business_components/ui";
+import { StandardPopupLayout } from "@common/business_components";
 import { getRawJson } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import { useAlertStore } from "@/shared/lib";
 import useStore from "@/store/useStore";
 import {
   SBMRG_DNGR_MAP_DEFAULT_FILTERS,
@@ -23,21 +25,26 @@ import {
   type SbmrgDngrMapTableRow,
 } from "./sbmrgDngrMapTypes";
 
-const unwrapPayload = <T,>(response: any): T => (response?.data ?? response) as T;
+const unwrapPayload = <T,>(response: any): T =>
+  (response?.data ?? response) as T;
 
 /** 시설물 레이어의 중점관리지역 침수위험지도 피처를 조건별 목록으로 제공한다. */
 export default function SbmrgDngrMapPopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   // 입력 중인 조건과 실제 조회에 적용된 조건을 분리해 페이지 이동 시 조건이 흔들리지 않게 한다.
-  const [filters, setFilters] = useState<SbmrgDngrMapFilters>(SBMRG_DNGR_MAP_DEFAULT_FILTERS);
-  const [appliedFilters, setAppliedFilters] = useState<SbmrgDngrMapFilters>(SBMRG_DNGR_MAP_DEFAULT_FILTERS);
+  const [filters, setFilters] = useState<SbmrgDngrMapFilters>(
+    SBMRG_DNGR_MAP_DEFAULT_FILTERS,
+  );
+  const [appliedFilters, setAppliedFilters] = useState<SbmrgDngrMapFilters>(
+    SBMRG_DNGR_MAP_DEFAULT_FILTERS,
+  );
   const [items, setItems] = useState<SbmrgDngrMapApiItem[]>([]);
-  const [administrativeScopeItems, setAdministrativeScopeItems] = useState<SbmrgDngrMapApiItem[] | null>(null);
+  const [administrativeScopeItems, setAdministrativeScopeItems] = useState<
+    SbmrgDngrMapApiItem[] | null
+  >(null);
   const [total, setTotal] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const [sort, setSort] = useState<UiTableSort>();
-  const [appliedSort, setAppliedSort] = useState<UiTableSort>();
   const [isLoading, setIsLoading] = useState(false);
 
   const availableCtpvCodes = useMemo(
@@ -64,24 +71,25 @@ export default function SbmrgDngrMapPopupPage() {
     () =>
       administrativeScopeItems === null
         ? ctpv
-        : ctpv.filter((item) => availableCtpvCodes.has(String(item.val).trim().slice(0, 2))),
+        : ctpv.filter((item) =>
+            availableCtpvCodes.has(String(item.val).trim().slice(0, 2)),
+          ),
     [administrativeScopeItems, availableCtpvCodes, ctpv],
   );
 
-  const sggOptions = useMemo(
-    () => {
-      const scopedOptions =
-        administrativeScopeItems === null
-          ? sgg
-          : sgg.filter((item) => availableSggCodes.has(String(item.val).trim().slice(0, 5)));
-      return filters.ctpvCd === "0"
-        ? scopedOptions
-        : scopedOptions.filter((item) =>
-            String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
+  const sggOptions = useMemo(() => {
+    const scopedOptions =
+      administrativeScopeItems === null
+        ? sgg
+        : sgg.filter((item) =>
+            availableSggCodes.has(String(item.val).trim().slice(0, 5)),
           );
-    },
-    [administrativeScopeItems, availableSggCodes, filters.ctpvCd, sgg],
-  );
+    return filters.ctpvCd === "0"
+      ? scopedOptions
+      : scopedOptions.filter((item) =>
+          String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
+        );
+  }, [administrativeScopeItems, availableSggCodes, filters.ctpvCd, sgg]);
 
   const rows = useMemo(
     () =>
@@ -92,9 +100,8 @@ export default function SbmrgDngrMapPopupPage() {
         ctpv,
         sgg,
         total,
-        sort,
       ),
-    [ctpv, currentPage, items, sgg, sort, total],
+    [ctpv, currentPage, items, sgg, total],
   );
 
   useEffect(() => {
@@ -102,39 +109,42 @@ export default function SbmrgDngrMapPopupPage() {
     if (sgg.length === 0) void fetchSgg();
   }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
 
-  /** 마지막 적용 조건과 정렬로 서버 페이지를 조회한다. */
+  /** 마지막 적용 조건으로 서버 페이지를 조회한다. */
   const loadRows = useCallback(
-    async (page: number, nextFilters: SbmrgDngrMapFilters, nextSort?: UiTableSort) => {
+    async (page: number, nextFilters: SbmrgDngrMapFilters) => {
       setIsLoading(true);
       try {
         const queryString = buildSbmrgDngrMapListQueryString(
           nextFilters,
           page - 1,
           SBMRG_DNGR_MAP_PAGE_SIZE,
-          nextSort,
         );
         const response = await getRawJson(
           `/sewerage-service/api/v1/fldng/sbmrg-dngr-map?${queryString}`,
         );
-        const payload = unwrapPayload<{ items?: SbmrgDngrMapApiItem[]; total?: number }>(response);
+        const payload = unwrapPayload<{
+          items?: SbmrgDngrMapApiItem[];
+          total?: number;
+        }>(response);
         const items = Array.isArray(payload?.items) ? payload.items : [];
         setItems(items);
         setTotal(Number(payload?.total ?? 0));
         setCurrentPage(page);
         setAppliedFilters(nextFilters);
-        setSort(nextSort);
-        setAppliedSort(nextSort);
-        setSelectedIndex(-1);
       } catch (error) {
         console.error("침수위험지도 목록 조회 중 오류:", error);
         setItems([]);
         setTotal(0);
-        alert(error instanceof Error ? error.message : "침수위험지도 목록 조회 중 오류가 발생했습니다.");
+        alert(
+          error instanceof Error
+            ? error.message
+            : "침수위험지도 목록 조회 중 오류가 발생했습니다.",
+        );
       } finally {
         setIsLoading(false);
       }
     },
-    [],
+    [alert],
   );
 
   /** 전체 50개 그룹에서 실제 존재하는 행정구역 코드만 검색 선택지로 제한한다. */
@@ -148,8 +158,12 @@ export default function SbmrgDngrMapPopupPage() {
       const response = await getRawJson(
         `/sewerage-service/api/v1/fldng/sbmrg-dngr-map?${queryString}`,
       );
-      const payload = unwrapPayload<{ items?: SbmrgDngrMapApiItem[] }>(response);
-      setAdministrativeScopeItems(Array.isArray(payload?.items) ? payload.items : []);
+      const payload = unwrapPayload<{ items?: SbmrgDngrMapApiItem[] }>(
+        response,
+      );
+      setAdministrativeScopeItems(
+        Array.isArray(payload?.items) ? payload.items : [],
+      );
     } catch (error) {
       console.error("침수위험지도 행정구역 범위 조회 중 오류:", error);
       setAdministrativeScopeItems(null);
@@ -163,15 +177,12 @@ export default function SbmrgDngrMapPopupPage() {
 
   /** 현재 입력 조건을 적용하고 첫 페이지부터 다시 조회한다. */
   const handleSearch = () => {
-    void loadRows(1, filters, sort);
+    void loadRows(1, filters);
   };
 
   /** 선택한 지역·빈도 그룹의 전체 fid를 부모 지도에 전달해 전체 범위 이동·강조를 실행한다. */
-  const handleRowClick = (index?: number) => {
-    if (typeof index !== "number") return;
-    const row = rows[index];
-    if (!Array.isArray(row?.fids) || row.fids.length === 0) return;
-    setSelectedIndex(index);
+  const handleRowClick = (row: SbmrgDngrMapTableRow) => {
+    if (!Array.isArray(row.fids) || row.fids.length === 0) return;
     const featureIds = row.fids.map((fid) =>
       String(fid).startsWith(`${SBMRG_DNGR_MAP_LAYER_TYPE}.`)
         ? String(fid)
@@ -180,88 +191,112 @@ export default function SbmrgDngrMapPopupPage() {
     window.opener?.postMessage(
       {
         type: WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SHOW_MULTIPLE,
-        payload: { layerNm: SBMRG_DNGR_MAP_LAYER_TYPE, fids: JSON.stringify(featureIds) },
+        payload: {
+          layerNm: SBMRG_DNGR_MAP_LAYER_TYPE,
+          fids: JSON.stringify(featureIds),
+        },
       },
       window.location.origin,
     );
   };
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <StandardPopupLayout title="침수위험지도 목록">
       <LoadingOverlay isLoading={isLoading} />
-      <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">침수위험지도 목록</h1>
-      </header>
 
-      <section className="flex min-h-0 flex-1 flex-col p-4">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[220px_220px_220px_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.ctpvCd}
-              onChange={(event) => setFilters({ ...filters, ctpvCd: event.target.value, sggCd: "0" })}
-            >
-              <option value="0">전체</option>
-              {ctpvOptions.map((item) => (
-                <option key={item.val} value={String(item.val)}>{item.text}</option>
-              ))}
-            </select>
-          </label>
+      <PopupSearchPanel contentClassName="flex flex-wrap items-end gap-x-5 gap-y-3">
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            시도
+          </span>
+          <select
+            className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            value={filters.ctpvCd}
+            onChange={(event) =>
+              setFilters({
+                ...filters,
+                ctpvCd: event.target.value,
+                sggCd: "0",
+              })
+            }
+          >
+            <option value="0">전체</option>
+            {ctpvOptions.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) => 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>
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            시군구
+          </span>
+          <select
+            className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            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>
 
-          <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.floodWtlvFrqVl}
-              onChange={(event) => setFilters({ ...filters, floodWtlvFrqVl: event.target.value })}
-            >
-              <option value="0">전체</option>
-              {SBMRG_DNGR_MAP_FREQUENCY_OPTIONS.map((value) => (
-                <option key={value} value={String(value)}>{value}년</option>
-              ))}
-            </select>
-          </label>
+        <label className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-[1.3rem] text-label">
+            홍수수위빈도값
+          </span>
+          <select
+            className="h-[3.2rem] w-[16rem] rounded-md border border-input bg-field px-3 text-[1.3rem]"
+            value={filters.floodWtlvFrqVl}
+            onChange={(event) =>
+              setFilters({ ...filters, floodWtlvFrqVl: event.target.value })
+            }
+          >
+            <option value="0">전체</option>
+            {SBMRG_DNGR_MAP_FREQUENCY_OPTIONS.map((value) => (
+              <option key={value} value={String(value)}>
+                {value}년
+              </option>
+            ))}
+          </select>
+        </label>
 
-          <div className="flex justify-end md:pr-3">
-            <Button type="button" size="sm" color="primary" className="h-10 px-5 !text-[1.1rem]" onClick={handleSearch}>
-              조회
-            </Button>
-          </div>
+        <div className="ml-auto flex justify-end gap-2">
+          <Button type="button" color="primary" onClick={handleSearch}>
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => {
+              setFilters(SBMRG_DNGR_MAP_DEFAULT_FILTERS);
+              void loadRows(1, SBMRG_DNGR_MAP_DEFAULT_FILTERS);
+            }}
+          >
+            초기화
+          </Button>
         </div>
+      </PopupSearchPanel>
 
-        <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-2">
-          <UiTable<SbmrgDngrMapTableRow>
-            headName={<>침수위험지도 조회 결과 총 {total.toLocaleString()}건</>}
-            tableData={rows}
-            headlist={SBMRG_DNGR_MAP_HEADLIST}
-            pageSize={SBMRG_DNGR_MAP_PAGE_SIZE}
-            total={total}
-            cellClick={(index) => handleRowClick(index)}
-            onPageChange={(page) => void loadRows(page, appliedFilters, appliedSort)}
-            curPage={currentPage}
-            index={selectedIndex}
-            widthFixed={true}
-            isHideCount={true}
-            sort={sort}
-            onSortChange={(nextSort) => void loadRows(1, appliedFilters, nextSort)}
-          />
-        </div>
-      </section>
-    </main>
+      <MapPopupDataTable
+        rows={rows as Array<SbmrgDngrMapTableRow & Record<string, unknown>>}
+        headlist={SBMRG_DNGR_MAP_HEADLIST}
+        title="침수위험지도 목록"
+        total={total}
+        page={currentPage}
+        pageSize={SBMRG_DNGR_MAP_PAGE_SIZE}
+        onPageChange={(page) => void loadRows(page, appliedFilters)}
+        onRowClick={handleRowClick}
+        rowId={(row, index) => String(row.emphsMngRgnMngNo ?? index)}
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/sbmrgDngrMapTypes.ts b/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/sbmrgDngrMapTypes.ts
index 44e4d71c3..342f54eff 100644
--- a/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/sbmrgDngrMapTypes.ts
+++ b/apps/sn/app/(map-layout)/map/components/sbmrgDngrMap/sbmrgDngrMapTypes.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import type { UiHeadProps, UiTableSort } from "@common/business_components/ui";
+import type { UiHeadProps } from "@common/business_components/ui";
 
 export const SBMRG_DNGR_MAP_POPUP_KEY = "sbmrgDngrMapPopup";
 export const SBMRG_DNGR_MAP_LAYER_TYPE = "tb_ms_sbmrg_dngr_map";
@@ -47,41 +47,40 @@ export const SBMRG_DNGR_MAP_DEFAULT_FILTERS: SbmrgDngrMapFilters = {
 export const SBMRG_DNGR_MAP_FREQUENCY_OPTIONS = [30, 50, 80, 100];
 
 export const SBMRG_DNGR_MAP_HEADLIST: UiHeadProps[] = [
-  { id: "rowNo", title: "NO", widthPercent: 7, sortable: true, sortKey: "rowNo" },
-  { id: "ctpvNm", title: "시도", widthPercent: 11, sortable: true, sortKey: "ctpvCd" },
-  { id: "sggNm", title: "시군구", widthPercent: 12, sortable: true, sortKey: "sggCd" },
-  { id: "emphsMngRgnNm", title: "중점관리지역명", widthPercent: 23, sortable: true },
-  { id: "emphsMngRgnMngNo", title: "중점관리지역번호", widthPercent: 15, sortable: true },
+  { id: "rowNo", title: "순번", widthPercent: 7 },
+  { id: "ctpvNm", title: "시도", widthPercent: 11 },
+  { id: "sggNm", title: "시군구", widthPercent: 12 },
+  { id: "emphsMngRgnNm", title: "중점관리지역명", widthPercent: 23 },
+  { id: "emphsMngRgnMngNo", title: "중점관리지역번호", widthPercent: 15 },
   {
     id: "floodWtlvFrqVlDisplay",
     title: "홍수수위빈도값",
     widthPercent: 17,
-    sortable: true,
-    sortKey: "floodWtlvFrqVl",
   },
   {
     id: "elvtVlDisplay",
     title: "해발값(최소~최대)",
     widthPercent: 15,
-    sortable: true,
-    sortKey: "elvtVl",
   },
 ];
 
-/** API가 허용하는 검색 조건과 페이징·정렬 파라미터만 쿼리 문자열로 만든다. */
+/** API가 허용하는 검색 조건과 페이징 파라미터만 쿼리 문자열로 만든다. */
 export const buildSbmrgDngrMapListQueryString = (
   filters: SbmrgDngrMapFilters,
   page: number,
   size: number,
-  sort?: UiTableSort,
 ) => {
-  const params = new URLSearchParams({ page: String(page), size: String(size) });
-  if (filters.ctpvCd && filters.ctpvCd !== "0") params.set("ctpvCd", filters.ctpvCd.slice(0, 2));
-  if (filters.sggCd && filters.sggCd !== "0") params.set("sggCd", filters.sggCd.slice(0, 5));
+  const params = new URLSearchParams({
+    page: String(page),
+    size: String(size),
+  });
+  if (filters.ctpvCd && filters.ctpvCd !== "0")
+    params.set("ctpvCd", filters.ctpvCd.slice(0, 2));
+  if (filters.sggCd && filters.sggCd !== "0")
+    params.set("sggCd", filters.sggCd.slice(0, 5));
   if (filters.floodWtlvFrqVl && filters.floodWtlvFrqVl !== "0") {
     params.set("floodWtlvFrqVl", filters.floodWtlvFrqVl);
   }
-  if (sort?.key && sort.direction) params.set("sort", `${sort.key},${sort.direction}`);
   return params.toString();
 };
 
@@ -99,7 +98,10 @@ const toRangeDisplay = (minValue: unknown, maxValue: unknown) => {
 };
 
 /** 집계 응답에서 쉼표로 묶일 수 있는 행정구역 코드를 정규화한다. */
-export const extractAdministrativeCodes = (value: unknown, codeLength: number) =>
+export const extractAdministrativeCodes = (
+  value: unknown,
+  codeLength: number,
+) =>
   String(value ?? "")
     .split(",")
     .map((code) => code.trim().slice(0, codeLength))
@@ -114,7 +116,10 @@ const resolveAdministrativeNames = (
   const names = extractAdministrativeCodes(value, codeLength)
     .map((code) => {
       const matched = options.find(
-        (option) => String(option.val ?? "").trim().slice(0, codeLength) === code,
+        (option) =>
+          String(option.val ?? "")
+            .trim()
+            .slice(0, codeLength) === code,
       );
       return String(matched?.text ?? "").trim();
     })
@@ -123,7 +128,7 @@ const resolveAdministrativeNames = (
   return names.length > 0 ? [...new Set(names)].join(", ") : "-";
 };
 
-/** 서버 페이지 번호를 화면 NO에 반영하고 숫자 표시값을 보정한다. */
+/** 서버 페이지 번호를 화면 순번에 반영하고 숫자 표시값을 보정한다. */
 export const toSbmrgDngrMapTableRows = (
   items: SbmrgDngrMapApiItem[],
   page: number,
@@ -131,14 +136,10 @@ export const toSbmrgDngrMapTableRows = (
   ctpvOptions: AdministrativeOption[] = [],
   sggOptions: AdministrativeOption[] = [],
   total = items.length,
-  sort?: UiTableSort,
 ): SbmrgDngrMapTableRow[] =>
   items.map((item, index) => ({
     ...item,
-    rowNo:
-      sort?.key === "rowNo" && sort.direction === "desc"
-        ? total - page * pageSize - index
-        : page * pageSize + index + 1,
+    rowNo: total - page * pageSize - index,
     ctpvNm: resolveAdministrativeNames(item.ctpvCd, ctpvOptions, 2),
     sggNm: resolveAdministrativeNames(item.sggCd, sggOptions, 5),
     floodWtlvFrqVlDisplay: toDisplay(item.floodWtlvFrqVl),
@@ -146,8 +147,16 @@ export const toSbmrgDngrMapTableRows = (
   }));
 
 const resolveNodeName = (node: any) =>
-  String(node?.text ?? node?.data?.lyrNm ?? node?.data?.name ?? node?.lyrNm ?? node?.name ?? "").trim();
+  String(
+    node?.text ??
+      node?.data?.lyrNm ??
+      node?.data?.name ??
+      node?.lyrNm ??
+      node?.name ??
+      "",
+  ).trim();
 
 /** 빈도·침수심 자식 노드가 아니라 중점관리지역 위험지도 루트만 목록보기 대상으로 판별한다. */
 export const isSbmrgDngrMapRootNode = (node: any) =>
-  resolveNodeName(node).replace(/\s/g, "") === SBMRG_DNGR_MAP_LAYER_NAME.replace(/\s/g, "");
+  resolveNodeName(node).replace(/\s/g, "") ===
+  SBMRG_DNGR_MAP_LAYER_NAME.replace(/\s/g, "");
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx
index a660d0c7e..359a362bd 100644
--- a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx
@@ -74,7 +74,9 @@ export default function SinkholeDetailPanel({
   onClose,
   onSelectPipe,
 }: Props) {
-  const [pipeUseCodeMap, setPipeUseCodeMap] = useState<Map<string, string>>(new Map());
+  const [pipeUseCodeMap, setPipeUseCodeMap] = useState<Map<string, string>>(
+    new Map(),
+  );
   const canShowNearby = String(detail.coordStatus ?? "").trim() === "SUCCESS";
 
   useEffect(() => {
@@ -83,7 +85,9 @@ export default function SinkholeDetailPanel({
     loadPipeUseCodes()
       .then((codes) => {
         if (cancelled) return;
-        setPipeUseCodeMap(new Map(codes.map((item) => [item.lwpoCd, item.lwpoCdNm])));
+        setPipeUseCodeMap(
+          new Map(codes.map((item) => [item.lwpoCd, item.lwpoCdNm])),
+        );
       })
       .catch((error) => {
         console.error("Failed to load OGC011 pipe use codes:", error);
@@ -148,11 +152,11 @@ export default function SinkholeDetailPanel({
   return (
     <div
       id="popup"
-      className="absolute top-0 right-0 z-[50] flex h-[calc(100vh-5rem)] w-[350px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300"
+      className="absolute right-0 top-0 z-[50] flex h-[calc(100vh-5rem)] w-[350px] flex-col overflow-hidden border-r border-border bg-background transition-all duration-300"
     >
       <div className="card-header relative flex items-center justify-between bg-primary p-4">
         <div className="flex-1">
-          <h3 className="text-2xl font-medium text-white">
+          <h3 className="text-2xl font-medium text-primary-foreground">
             지반침하정보
             <br />
             사고번호 : {display(detail.acdntNo)}
@@ -160,7 +164,7 @@ export default function SinkholeDetailPanel({
         </div>
         <Button
           onClick={onClose}
-          className="flex items-center space-x-4 text-white hover:text-gray-300 focus:outline-none"
+          className="text-primary-foreground/80 flex items-center space-x-4 hover:text-primary-foreground focus:outline-none"
           size="xs"
         >
           ✕
@@ -186,15 +190,17 @@ export default function SinkholeDetailPanel({
               침하발생 반경내 관로정보
             </h3>
             {canShowNearby ? (
-              <div className="mx-3 mt-2 whitespace-nowrap text-left text-[0.95rem] leading-5 text-slate-500">
+              <div className="mx-3 mt-2 whitespace-nowrap text-left text-[0.95rem] leading-5 text-muted-foreground">
                 <span>반경 {radiusMeters}m · </span>
-                <span className="font-bold text-[#1d4ed8]">{nearbyPipes.length.toLocaleString()}건</span>
+                <span className="font-bold text-primary">
+                  {nearbyPipes.length.toLocaleString()}건
+                </span>
                 <span>, 평균경과 </span>
-                <span className="font-bold text-[#1d4ed8]">
+                <span className="font-bold text-primary">
                   {displayElapsedYears(nearbyPipeElapsedSummary.average)}
                 </span>
                 <span>, 최장경과 </span>
-                <span className="font-bold text-[#1d4ed8]">
+                <span className="font-bold text-primary">
                   {displayElapsedYears(nearbyPipeElapsedSummary.oldest)}
                 </span>
               </div>
@@ -210,7 +216,7 @@ export default function SinkholeDetailPanel({
               ) : null}
             </div>
           ) : nearbyPipes.length === 0 ? (
-            <div className="card !m-[1.2rem] !mt-0 rounded-sm border border-slate-200 bg-slate-50 px-3 py-3 text-[1.05rem] text-slate-600">
+            <div className="card !m-[1.2rem] !mt-0 rounded-sm border border-border bg-secondary px-3 py-3 text-[1.05rem] text-label">
               반경 내 하수관로 정보가 없습니다.
             </div>
           ) : (
@@ -225,19 +231,19 @@ export default function SinkholeDetailPanel({
                 </colgroup>
                 <thead>
                   <tr>
-                    <th className="border border-gray-300 bg-blue-100 px-1 py-2 text-center text-[0.95rem] font-bold text-slate-900 whitespace-nowrap">
+                    <th className="whitespace-nowrap border border-border bg-secondary px-1 py-2 text-center text-[0.95rem] font-bold text-label">
                       NO
                     </th>
-                    <th className="border border-gray-300 bg-blue-100 px-1 py-2 text-center text-[0.95rem] font-bold text-slate-900 whitespace-nowrap">
+                    <th className="whitespace-nowrap border border-border bg-secondary px-1 py-2 text-center text-[0.95rem] font-bold text-label">
                       관로 ID
                     </th>
-                    <th className="border border-gray-300 bg-blue-100 px-1 py-2 text-center text-[0.95rem] font-bold text-slate-900 whitespace-nowrap">
+                    <th className="whitespace-nowrap border border-border bg-secondary px-1 py-2 text-center text-[0.95rem] font-bold text-label">
                       용도
                     </th>
-                    <th className="border border-gray-300 bg-blue-100 px-1 py-2 text-center text-[0.95rem] font-bold text-slate-900 whitespace-nowrap">
+                    <th className="whitespace-nowrap border border-border bg-secondary px-1 py-2 text-center text-[0.95rem] font-bold text-label">
                       경과년도
                     </th>
-                    <th className="border border-gray-300 bg-blue-100 px-1 py-2 text-center text-[0.95rem] font-bold text-slate-900 whitespace-nowrap">
+                    <th className="whitespace-nowrap border border-border bg-secondary px-1 py-2 text-center text-[0.95rem] font-bold text-label">
                       거리(m)
                     </th>
                   </tr>
@@ -246,22 +252,22 @@ export default function SinkholeDetailPanel({
                   {nearbyPipes.map((pipe, index) => (
                     <tr
                       key={`${pipe.fid}-${index}`}
-                      className="cursor-pointer hover:bg-blue-50"
+                      className="cursor-pointer hover:bg-accent"
                       onClick={() => onSelectPipe(pipe)}
                     >
-                      <td className="border border-gray-300 px-1 py-2 text-center text-[0.95rem] text-slate-900">
+                      <td className="border border-border px-1 py-2 text-center text-[0.95rem] text-foreground">
                         {index + 1}
                       </td>
-                      <td className="border border-gray-300 px-1 py-2 text-left text-[0.95rem] font-semibold text-[#1d4ed8] underline underline-offset-2">
+                      <td className="border border-border px-1 py-2 text-left text-[0.95rem] font-semibold text-primary underline underline-offset-2">
                         {display(pipe.pipeId)}
                       </td>
-                      <td className="border border-gray-300 px-1 py-2 text-center text-[0.95rem] text-slate-900 whitespace-nowrap">
+                      <td className="whitespace-nowrap border border-border px-1 py-2 text-center text-[0.95rem] text-foreground">
                         {getPipeUseName(pipe)}
                       </td>
-                      <td className="border border-gray-300 px-1 py-2 text-right text-[0.95rem] text-slate-900">
+                      <td className="border border-border px-1 py-2 text-right text-[0.95rem] text-foreground">
                         {displayElapsedYears(pipe.elapsedYears)}
                       </td>
-                      <td className="border border-gray-300 px-1 py-2 text-right text-[0.95rem] text-slate-900">
+                      <td className="border border-border px-1 py-2 text-right text-[0.95rem] text-foreground">
                         {displayNumber(pipe.distanceMeters)}
                       </td>
                     </tr>
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx
index b2935032a..d928a653e 100644
--- a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { SelectBox } from "@common/business_components/ui";
+import { useAlertStore } from "@/shared/lib";
 import {
   normalizeSinkholeYearRange,
   SINKHOLE_MIN_SEARCH_YEAR,
@@ -31,6 +32,7 @@ export default function SinkholeLayerSettingPanel({
   isAdmin = false,
   compact = false,
 }: Props) {
+  const alert = useAlertStore((state) => state.setMessage);
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [radiusText, setRadiusText] = useState(String(radiusMeters));
   const [yearRangeDraft, setYearRangeDraft] = useState<SinkholeYearRange>(() =>
@@ -70,45 +72,67 @@ export default function SinkholeLayerSettingPanel({
 
     try {
       await onApplyYearRange(normalized);
-      alert(`시작년도 ${normalized.startYear} ~ 종료년도 ${normalized.endYear} 반영되었습니다.`);
+      alert(
+        `시작년도 ${normalized.startYear} ~ 종료년도 ${normalized.endYear} 반영되었습니다.`,
+      );
     } catch {
       alert("반영 중 오류가 발생했습니다.");
     }
   };
 
-  const updateYearRangeDraft = (key: keyof SinkholeYearRange, value: string) => {
+  const updateYearRangeDraft = (
+    key: keyof SinkholeYearRange,
+    value: string,
+  ) => {
     setYearRangeDraft((current) => ({
       ...current,
-      [key]: String(value).replace(/[^0-9]/g, "").slice(0, 4),
+      [key]: String(value)
+        .replace(/[^0-9]/g, "")
+        .slice(0, 4),
     }));
   };
 
   const currentYear = new Date().getFullYear();
-  const yearSelectClass = "h-[22px] w-[62px] rounded-none border border-[#ccd6df] bg-white px-[4px] text-center text-[1rem] leading-none text-[#222]";
+  const yearSelectClass =
+    "h-[22px] w-[62px] rounded-none border border-input bg-background px-[4px] text-center text-[1rem] leading-none text-foreground";
   const startYearOptions = Array.from(
     { length: currentYear - SINKHOLE_MIN_SEARCH_YEAR + 1 },
     (_, index) => String(currentYear - index),
   )
-    .filter((year) => !yearRangeDraft.endYear || Number(year) <= Number(yearRangeDraft.endYear))
+    .filter(
+      (year) =>
+        !yearRangeDraft.endYear ||
+        Number(year) <= Number(yearRangeDraft.endYear),
+    )
     .map((year) => ({ val: year, text: year }));
   const endYearOptions = Array.from(
     { length: currentYear - SINKHOLE_MIN_SEARCH_YEAR + 1 },
     (_, index) => String(currentYear - index),
   )
-    .filter((year) => !yearRangeDraft.startYear || Number(year) >= Number(yearRangeDraft.startYear))
+    .filter(
+      (year) =>
+        !yearRangeDraft.startYear ||
+        Number(year) >= Number(yearRangeDraft.startYear),
+    )
     .map((year) => ({ val: year, text: year }));
 
-  const inputClass = "h-[22px] border border-[#ccd6df] px-[2px] text-center text-[1rem] leading-none text-[#222]";
+  const inputClass =
+    "h-[22px] border border-input bg-background px-[2px] text-center text-[1rem] leading-none text-foreground";
   const numberInputClass = inputClass + " w-[40px]";
-  const applyButtonClass = "grid h-[20px] w-[20px] shrink-0 place-items-center rounded-full bg-[#31a83b] text-[0.95rem] font-bold leading-none text-white";
-  const indicator = <span className="h-2 w-2 shrink-0 rounded-full bg-[#243b93]" />;
+  const applyButtonClass =
+    "grid h-[20px] w-[20px] shrink-0 place-items-center rounded-full bg-primary text-[0.95rem] font-bold leading-none text-primary-foreground";
+  const indicator = (
+    <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
+  );
 
   const settingRows = (
-    <div className="space-y-1.5 text-[1.05rem] font-medium text-slate-700">
+    <div className="space-y-1.5 text-[1.05rem] font-medium text-label">
       <div className="flex min-h-[25px] items-center gap-1.5 whitespace-nowrap">
         <div className="flex min-w-0 items-center gap-1">
           {indicator}
-          <label htmlFor="sinkhole-radius" className="shrink-0">지반침하반경(m)</label>
+          <label htmlFor="sinkhole-radius" className="shrink-0">
+            지반침하반경(m)
+          </label>
         </div>
         <div className="ml-auto flex shrink-0 items-center gap-1">
           <input
@@ -120,7 +144,9 @@ export default function SinkholeLayerSettingPanel({
             autoComplete="off"
             value={radiusText}
             onFocus={(event) => event.currentTarget.select()}
-            onChange={(event) => setRadiusText(event.target.value.replace(/[^0-9]/g, ""))}
+            onChange={(event) =>
+              setRadiusText(event.target.value.replace(/[^0-9]/g, ""))
+            }
             onKeyDown={(event) => {
               if (event.key === "Enter") void commitRadius();
             }}
@@ -139,7 +165,9 @@ export default function SinkholeLayerSettingPanel({
       <div className="flex min-h-[25px] items-center gap-1.5 whitespace-nowrap">
         <div className="flex min-w-0 items-center gap-1">
           {indicator}
-          <label htmlFor="sinkhole-start-year" className="shrink-0">년도설정</label>
+          <label htmlFor="sinkhole-start-year" className="shrink-0">
+            년도설정
+          </label>
         </div>
         <div className="ml-auto flex shrink-0 items-center gap-1.5">
           <div id="sinkhole-start-year" className="w-[62px]">
@@ -149,12 +177,16 @@ export default function SinkholeLayerSettingPanel({
               label=""
               selectArray={startYearOptions}
               value={yearRangeDraft.startYear}
-              onSelectValue={(value) => updateYearRangeDraft("startYear", String(value))}
+              onSelectValue={(value) =>
+                updateYearRangeDraft("startYear", String(value))
+              }
               selectContentClass="z-[101]"
               labelClass="hidden"
             />
           </div>
-          <span className="px-[1px] text-[0.95rem] font-normal text-slate-500">~</span>
+          <span className="px-[1px] text-[0.95rem] font-normal text-muted-foreground">
+            ~
+          </span>
           <div id="sinkhole-end-year" className="w-[62px]">
             <SelectBox
               className="w-full"
@@ -162,7 +194,9 @@ export default function SinkholeLayerSettingPanel({
               label=""
               selectArray={endYearOptions}
               value={yearRangeDraft.endYear}
-              onSelectValue={(value) => updateYearRangeDraft("endYear", String(value))}
+              onSelectValue={(value) =>
+                updateYearRangeDraft("endYear", String(value))
+              }
               selectContentClass="z-[101]"
               labelClass="hidden"
             />
@@ -183,7 +217,7 @@ export default function SinkholeLayerSettingPanel({
 
   if (compact) {
     return (
-      <div className="w-full rounded-[6px] border border-[#dbe7f5] bg-white px-2 py-[10px] shadow-[0_2px_8px_rgba(15,23,42,0.05)]">
+      <div className="w-full rounded-[6px] border border-border bg-background px-2 py-[10px] shadow-blur">
         <div className="overflow-visible">{settingRows}</div>
       </div>
     );
@@ -191,16 +225,19 @@ export default function SinkholeLayerSettingPanel({
 
   return (
     <div className="w-full overflow-hidden rounded-sm border border-[#f0d7b0] bg-[#fff8ef]">
-      <div className="relative flex min-h-[30px] items-center justify-center border-b border-[#f2dfc3] bg-white px-8">
+      {/* 지반침하 상세는 지도 위험정보 경고영역이므로 주황 의미색을 유지한다. */}
+      <div className="relative flex min-h-[30px] items-center justify-center border-b border-[#f2dfc3] bg-background 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]"
+          className="absolute left-2 top-1/2 h-[18px] w-[18px] -translate-y-1/2 bg-transparent text-[1.2rem] leading-none text-muted-foreground"
           onClick={() => setIsCollapsed((value) => !value)}
           title={isCollapsed ? "펼치기" : "접기"}
         >
           {isCollapsed ? "+" : "-"}
         </button>
-        <span className="text-[1.2rem] font-semibold text-[#d97706]">지반침하정보</span>
+        <span className="text-[1.2rem] font-semibold text-[#d97706]">
+          지반침하정보
+        </span>
       </div>
 
       {!isCollapsed && (
@@ -208,11 +245,14 @@ export default function SinkholeLayerSettingPanel({
           <div className="overflow-visible">{settingRows}</div>
 
           {isAdmin && lastSyncSummary ? (
-            <div className="mt-2 rounded-sm border border-[#f2dfc3] bg-white px-2 py-2 text-[1rem] text-[#7c5b2f]">
+            <div className="mt-2 rounded-sm border border-[#f2dfc3] bg-background px-2 py-2 text-[1rem] text-[#7c5b2f]">
               <div className="font-semibold">최근 동기화</div>
-              <div className="mt-1">완료시각: {lastSyncSummary.finishedAt || "-"}</div>
               <div className="mt-1">
-                성공 {lastSyncSummary.successCount}건 / 실패 {lastSyncSummary.failedCount}건
+                완료시각: {lastSyncSummary.finishedAt || "-"}
+              </div>
+              <div className="mt-1">
+                성공 {lastSyncSummary.successCount}건 / 실패{" "}
+                {lastSyncSummary.failedCount}건
               </div>
             </div>
           ) : null}
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx
index e24e3a26a..3738f1e69 100644
--- a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx
@@ -3,15 +3,17 @@
 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/table";
-import type {
-  UiHeadProps,
-  UiTableSort,
-} from "@common/business_components/ui/table";
+import {
+  StandardPopupLayout,
+  type UiHeadProps,
+} from "@common/business_components";
 import { getRawJson } from "@/components/lib/api";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
+import { useAlertStore } from "@/shared/lib";
 import useStore from "@/store/useStore";
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 import type { SelectDataType } from "@common/business_components";
 import {
   buildSinkholeDefaultFilters,
@@ -29,7 +31,7 @@ import {
   type SinkholeListItem,
 } from "./sinkholeTypes";
 
-const PAGE_SIZE = 20;
+const PAGE_SIZE = 10;
 const DOWNLOAD_BATCH_SIZE = 2000;
 
 type SinkholeTableRow = SinkholeListItem & {
@@ -43,16 +45,17 @@ type SinkholeTableRow = SinkholeListItem & {
 };
 
 const HEADLIST: UiHeadProps[] = [
-  { id: "acdntNo", title: "사고번호", widthPercent: 15, sortable: true },
-  { id: "ocrnYmd", title: "발생일자", widthPercent: 10, sortable: true },
-  { id: "fullAddress", title: "주소", widthPercent: 20, sortable: true },
-  { id: "sizeWidthDisplay", title: "발생규모폭", widthPercent: 8, sortable: true, sortKey: "sizeWidth" },
-  { id: "sizeLengthDisplay", title: "발생규모연장", widthPercent: 9, sortable: true, sortKey: "sizeLength" },
-  { id: "sizeDepthDisplay", title: "발생규모깊이", widthPercent: 9, sortable: true, sortKey: "sizeDepth" },
-  { id: "detailCauseDisplay", title: "상세발생원인", widthPercent: 11, sortable: true, sortKey: "detailCause" },
-  { id: "restoreStatus", title: "복구상태", widthPercent: 8, sortable: true },
-  { id: "coordStatusDisplay", title: "좌표보정상태", widthPercent: 9, sortable: true, sortKey: "coordStatus" },
-  { id: "restoreCompletedYmdDisplay", title: "복구완료일자", widthPercent: 11, sortable: true, sortKey: "restoreCompletedYmd" },
+  { id: "rowNo", title: "순번", widthPercent: 6 },
+  { id: "acdntNo", title: "사고번호", widthPercent: 15 },
+  { id: "ocrnYmd", title: "발생일자", widthPercent: 10 },
+  { id: "fullAddress", title: "주소", widthPercent: 20 },
+  { id: "sizeWidthDisplay", title: "발생규모폭", widthPercent: 8 },
+  { id: "sizeLengthDisplay", title: "발생규모연장", widthPercent: 9 },
+  { id: "sizeDepthDisplay", title: "발생규모깊이", widthPercent: 9 },
+  { id: "detailCauseDisplay", title: "상세발생원인", widthPercent: 11 },
+  { id: "restoreStatus", title: "복구상태", widthPercent: 8 },
+  { id: "coordStatusDisplay", title: "좌표보정상태", widthPercent: 9 },
+  { id: "restoreCompletedYmdDisplay", title: "복구완료일자", widthPercent: 11 },
 ];
 
 const toDisplay = (value: unknown) => {
@@ -61,14 +64,20 @@ const toDisplay = (value: unknown) => {
 };
 
 const toCoordStatusDisplay = (value: unknown) => {
-  const normalized = String(value ?? "").trim().toUpperCase();
+  const normalized = String(value ?? "")
+    .trim()
+    .toUpperCase();
   if (normalized === "SUCCESS") return "성공";
   if (normalized === "NO_ADDRESS") return "주소없음";
   if (normalized === "FAILED") return "실패";
   return normalized || "-";
 };
 
-const toTableRows = (items: SinkholeListItem[], page: number, pageSize = PAGE_SIZE) =>
+const toTableRows = (
+  items: SinkholeListItem[],
+  page: number,
+  pageSize = PAGE_SIZE,
+) =>
   items.map((item, index) => ({
     ...item,
     rowNo: page * pageSize + index + 1,
@@ -97,6 +106,7 @@ const unwrapPayload = <T,>(response: any): T =>
   (response?.data ?? response) as T;
 
 export default function SinkholePopupPage() {
+  const alert = useAlertStore((state) => state.setMessage);
   const searchParams = useSearchParams();
   const hasInitialFilterParams =
     searchParams.has("startYmd") ||
@@ -145,15 +155,14 @@ export default function SinkholePopupPage() {
   const [rows, setRows] = useState<SinkholeTableRow[]>([]);
   const [total, setTotal] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
-  const [sort, setSort] = useState<UiTableSort>();
-  const [appliedSort, setAppliedSort] = useState<UiTableSort>();
   const sggOptions = useMemo(
     () =>
       filters.ctpvCd === "0"
         ? sgg
-        : sgg.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2))),
+        : sgg.filter((item) =>
+            String(item.val).startsWith(filters.ctpvCd.slice(0, 2)),
+          ),
     [filters.ctpvCd, sgg],
   );
 
@@ -169,7 +178,6 @@ export default function SinkholePopupPage() {
       pageSize = PAGE_SIZE,
       options?: {
         includeCoordStatus?: boolean;
-        sort?: UiTableSort;
       },
     ) => {
       const queryString = buildSinkholeListQueryString(
@@ -180,8 +188,13 @@ export default function SinkholePopupPage() {
         pageSize,
         options,
       );
-      const response = await getRawJson(`/sewerage-service/api/v1/sinkholes?${queryString}`);
-      const payload = unwrapPayload<{ items?: SinkholeListItem[]; total?: number }>(response);
+      const response = await getRawJson(
+        `/sewerage-service/api/v1/sinkholes?${queryString}`,
+      );
+      const payload = unwrapPayload<{
+        items?: SinkholeListItem[];
+        total?: number;
+      }>(response);
       const items = Array.isArray(payload?.items) ? payload.items : [];
       return {
         rows: toTableRows(items, page - 1, pageSize),
@@ -193,18 +206,15 @@ export default function SinkholePopupPage() {
   );
 
   const loadRows = useCallback(
-    async (page: number, nextFilters: SinkholeFilters, nextSort?: UiTableSort) => {
+    async (page: number, nextFilters: SinkholeFilters) => {
       setIsLoading(true);
       try {
         const normalized = normalizeSinkholeFilters(nextFilters);
-        const response = await fetchRows(page, normalized, PAGE_SIZE, { sort: nextSort });
+        const response = await fetchRows(page, normalized, PAGE_SIZE);
         setRows(response.rows);
         setTotal(response.total);
         setCurrentPage(page);
         setAppliedFilters(normalized);
-        setSort(nextSort);
-        setAppliedSort(nextSort);
-        setSelectedIndex(-1);
         window.opener?.postMessage(
           {
             type: SINKHOLE_FILTER_SYNC_MESSAGE,
@@ -216,16 +226,20 @@ export default function SinkholePopupPage() {
         console.error("지반침하 목록 조회 중 오류:", error);
         setRows([]);
         setTotal(0);
-        alert(error instanceof Error ? error.message : "지반침하 목록 조회 중 오류가 발생했습니다.");
+        alert(
+          error instanceof Error
+            ? error.message
+            : "지반침하 목록 조회 중 오류가 발생했습니다.",
+        );
       } finally {
         setIsLoading(false);
       }
     },
-    [fetchRows],
+    [alert, fetchRows],
   );
 
   useEffect(() => {
-    void loadRows(1, filters, undefined);
+    void loadRows(1, filters);
     // 최초 로딩은 한 번만 수행한다.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -233,25 +247,15 @@ export default function SinkholePopupPage() {
   const handleSearch = async (page = 1) => {
     const normalized = normalizeSinkholeFilters(filters);
     setFilters(normalized);
-    await loadRows(page, normalized, sort);
+    await loadRows(page, normalized);
   };
 
-  /** 현재 적용된 검색 조건을 유지한 채 서버 정렬 후 첫 페이지를 조회한다. */
-  const handleSortChange = async (nextSort?: UiTableSort) => {
-    await loadRows(1, appliedFilters, nextSort);
-  };
-
-  /** 페이지 이동은 입력 중인 조건이 아니라 마지막 적용 조건과 정렬을 사용한다. */
+  /** 페이지 이동은 입력 중인 조건이 아니라 마지막 적용 조건을 사용한다. */
   const handlePageChange = async (page: number) => {
-    await loadRows(page, appliedFilters, appliedSort);
+    await loadRows(page, appliedFilters);
   };
 
-  const handleRowClick = (index?: number) => {
-    if (typeof index !== "number") return;
-    const row = rows[index];
-    if (!row) return;
-
-    setSelectedIndex(index);
+  const handleRowClick = (row: SinkholeTableRow) => {
     window.opener?.postMessage(
       {
         type: SINKHOLE_ROW_SELECT_MESSAGE,
@@ -274,10 +278,14 @@ export default function SinkholePopupPage() {
       const totalPages = Math.max(1, Math.ceil(total / DOWNLOAD_BATCH_SIZE));
 
       for (let page = 1; page <= totalPages; page += 1) {
-        const response = await fetchRows(page, normalized, DOWNLOAD_BATCH_SIZE, {
-          includeCoordStatus: false,
-          sort: appliedSort,
-        });
+        const response = await fetchRows(
+          page,
+          normalized,
+          DOWNLOAD_BATCH_SIZE,
+          {
+            includeCoordStatus: false,
+          },
+        );
         downloadItems.push(...response.items);
       }
 
@@ -296,150 +304,180 @@ export default function SinkholePopupPage() {
       });
     } catch (error) {
       console.error("지반침하 다운로드 중 오류:", error);
-      alert(error instanceof Error ? error.message : "지반침하 다운로드 중 오류가 발생했습니다.");
+      alert(
+        error instanceof Error
+          ? error.message
+          : "지반침하 다운로드 중 오류가 발생했습니다.",
+      );
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <StandardPopupLayout title="지반침하 목록">
       <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 />
-      </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-[170px_170px_220px_220px_180px_180px_auto] md:items-end md:justify-between">
-          <label className="block md:max-w-[170px]">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">발생기간(시작)</div>
-            <Input
-              className="h-10 !text-[1.1rem]"
-              type="date"
-              min={formatYmdToDateInput(SINKHOLE_MIN_SEARCH_YMD)}
-              value={formatYmdToDateInput(filters.startYmd)}
-              onChange={(event) => setFilters({ ...filters, startYmd: formatDateInputToYmd(event.target.value) })}
-            />
-          </label>
-
-          <label className="block md:max-w-[170px]">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">발생기간(종료)</div>
-            <Input
-              className="h-10 !text-[1.1rem]"
-              type="date"
-              min={formatYmdToDateInput(SINKHOLE_MIN_SEARCH_YMD)}
-              value={formatYmdToDateInput(filters.endYmd)}
-              onChange={(event) => setFilters({ ...filters, endYmd: formatDateInputToYmd(event.target.value) })}
-            />
-          </label>
-
-          <label className="block md:max-w-[220px]">
-            <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-[220px]">
-            <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>
-
-          <label className="block md:max-w-[180px]">
-            <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.restoreStatus}
-              onChange={(event) => setFilters({ ...filters, restoreStatus: event.target.value })}
-            >
-              {SINKHOLE_RESTORE_STATUS_OPTIONS.map((option) => (
-                <option key={option.value} value={option.value}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
-          </label>
-
-          <label className="block md:max-w-[180px]">
-            <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.coordStatus}
-              onChange={(event) => setFilters({ ...filters, coordStatus: event.target.value })}
-            >
-              {SINKHOLE_COORD_STATUS_OPTIONS.map((option) => (
-                <option key={option.value} value={option.value}>
-                  {option.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(1)}
-            >
-              조회
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              color="green"
-              className="h-10 px-5 !text-[1.1rem]"
-              onClick={handleDownload}
-            >
-              다운로드
-            </Button>
+      <PopupSearchPanel contentClassName="flex flex-wrap items-end gap-x-5 gap-y-3">
+        <label className="block md:max-w-[170px]">
+          <div className="mb-1 text-[1.05rem] font-medium text-label">
+            발생기간(시작)
           </div>
-        </div>
+          <Input
+            className="h-[3.2rem] !text-[1.3rem]"
+            type="date"
+            min={formatYmdToDateInput(SINKHOLE_MIN_SEARCH_YMD)}
+            value={formatYmdToDateInput(filters.startYmd)}
+            onChange={(event) =>
+              setFilters({
+                ...filters,
+                startYmd: formatDateInputToYmd(event.target.value),
+              })
+            }
+          />
+        </label>
 
-        <UiTable<SinkholeTableRow>
-          headName={<>지반침하 조회 결과 총 {total.toLocaleString()}건</>}
-          tableData={rows}
-          headlist={HEADLIST}
-          pageSize={PAGE_SIZE}
-          total={total}
-          cellClick={(index) => handleRowClick(index)}
-          onPageChange={(page) => void handlePageChange(page)}
-          curPage={currentPage}
-          index={selectedIndex}
-          widthFixed={true}
-          isHideCount={true}
-          sort={sort}
-          onSortChange={(nextSort) => void handleSortChange(nextSort)}
-        />
-      </section>
-    </main>
+        <label className="block md:max-w-[170px]">
+          <div className="mb-1 text-[1.05rem] font-medium text-label">
+            발생기간(종료)
+          </div>
+          <Input
+            className="h-[3.2rem] !text-[1.3rem]"
+            type="date"
+            min={formatYmdToDateInput(SINKHOLE_MIN_SEARCH_YMD)}
+            value={formatYmdToDateInput(filters.endYmd)}
+            onChange={(event) =>
+              setFilters({
+                ...filters,
+                endYmd: formatDateInputToYmd(event.target.value),
+              })
+            }
+          />
+        </label>
+
+        <label className="block md:max-w-[220px]">
+          <div className="mb-1 text-[1.05rem] font-medium text-label">시도</div>
+          <select
+            className="h-[3.2rem] w-full rounded-md border border-border px-3 text-[1.3rem]"
+            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-[220px]">
+          <div className="mb-1 text-[1.05rem] font-medium text-label">
+            시군구
+          </div>
+          <select
+            className="h-[3.2rem] w-full rounded-md border border-border px-3 text-[1.3rem]"
+            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>
+
+        <label className="block md:max-w-[180px]">
+          <div className="mb-1 text-[1.05rem] font-medium text-label">
+            복구상태
+          </div>
+          <select
+            className="h-[3.2rem] w-full rounded-md border border-border px-3 text-[1.3rem]"
+            value={filters.restoreStatus}
+            onChange={(event) =>
+              setFilters({ ...filters, restoreStatus: event.target.value })
+            }
+          >
+            {SINKHOLE_RESTORE_STATUS_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="block md:max-w-[180px]">
+          <div className="mb-1 text-[1.05rem] font-medium text-label">
+            좌표보정상태
+          </div>
+          <select
+            className="h-[3.2rem] w-full rounded-md border border-border px-3 text-[1.3rem]"
+            value={filters.coordStatus}
+            onChange={(event) =>
+              setFilters({ ...filters, coordStatus: event.target.value })
+            }
+          >
+            {SINKHOLE_COORD_STATUS_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <div className="ml-auto flex flex-wrap justify-end gap-2">
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void handleSearch(1)}
+          >
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            onClick={() => {
+              const resetFilters = normalizeSinkholeFilters(
+                buildSinkholeDefaultFilters(),
+                undefined,
+              );
+              setFilters(resetFilters);
+              void loadRows(1, resetFilters);
+            }}
+          >
+            초기화
+          </Button>
+        </div>
+      </PopupSearchPanel>
+
+      <MapPopupDataTable
+        rows={rows as Array<SinkholeTableRow & Record<string, unknown>>}
+        headlist={HEADLIST}
+        title="지반침하 목록"
+        total={total}
+        page={currentPage}
+        pageSize={PAGE_SIZE}
+        onPageChange={(page) => void handlePageChange(page)}
+        onRowClick={handleRowClick}
+        rowId={(row, index) => String(row.fid ?? row.acdntNo ?? index)}
+        scrollMode="horizontal"
+        minTableWidth="150rem"
+        actions={
+          <Button type="button" onClick={handleDownload}>
+            엑셀다운로드
+          </Button>
+        }
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts b/apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts
index f70c87593..401029745 100644
--- a/apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts
@@ -1,7 +1,6 @@
 "use client";
 
 import type { SelectDataType } from "@common/business_components";
-import type { UiTableSort } from "@common/business_components/ui";
 import type { IUserInfo } from "@/shared/store";
 
 export const SINKHOLE_CONTROL_NODE_ID = "SN_SINKHOLE";
@@ -15,7 +14,9 @@ export const SINKHOLE_DEFAULT_RADIUS = 100;
 export const SINKHOLE_LAYER_ID = "SN_SINKHOLE_LAYER";
 export const SINKHOLE_SELECTED_LAYER_ID = "SN_SINKHOLE_SELECTED_LAYER";
 export const SINKHOLE_MIN_SEARCH_YMD = "20160101";
-export const SINKHOLE_MIN_SEARCH_YEAR = Number(SINKHOLE_MIN_SEARCH_YMD.slice(0, 4));
+export const SINKHOLE_MIN_SEARCH_YEAR = Number(
+  SINKHOLE_MIN_SEARCH_YMD.slice(0, 4),
+);
 
 export type SinkholeFilters = {
   startYmd: string;
@@ -94,7 +95,9 @@ export type SinkholeYearRange = {
 const toYmd = (date: Date) =>
   `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, "0")}${String(date.getDate()).padStart(2, "0")}`;
 
-export const buildSinkholeDefaultYearRange = (baseDate = new Date()): SinkholeYearRange => {
+export const buildSinkholeDefaultYearRange = (
+  baseDate = new Date(),
+): SinkholeYearRange => {
   const currentYear = baseDate.getFullYear();
   return {
     startYear: String(currentYear - 1),
@@ -106,8 +109,12 @@ export const normalizeSinkholeYearRange = (
   range?: Partial<SinkholeYearRange> | null,
   fallback: SinkholeYearRange = buildSinkholeDefaultYearRange(),
 ): SinkholeYearRange => ({
-  startYear: String(range?.startYear ?? fallback.startYear).replace(/[^0-9]/g, "").slice(0, 4),
-  endYear: String(range?.endYear ?? fallback.endYear).replace(/[^0-9]/g, "").slice(0, 4),
+  startYear: String(range?.startYear ?? fallback.startYear)
+    .replace(/[^0-9]/g, "")
+    .slice(0, 4),
+  endYear: String(range?.endYear ?? fallback.endYear)
+    .replace(/[^0-9]/g, "")
+    .slice(0, 4),
 });
 
 export const validateSinkholeYearRange = (
@@ -120,7 +127,10 @@ export const validateSinkholeYearRange = (
   if (!/^\d{4}$/.test(range.startYear) || !/^\d{4}$/.test(range.endYear)) {
     return "시작년도와 종료년도는 4자리 숫자로 입력해야 합니다.";
   }
-  if (startYear < SINKHOLE_MIN_SEARCH_YEAR || endYear < SINKHOLE_MIN_SEARCH_YEAR) {
+  if (
+    startYear < SINKHOLE_MIN_SEARCH_YEAR ||
+    endYear < SINKHOLE_MIN_SEARCH_YEAR
+  ) {
     return `${SINKHOLE_MIN_SEARCH_YEAR}년 이후 범위로 입력해야 합니다.`;
   }
   if (startYear > endYear) {
@@ -148,7 +158,9 @@ export const buildSinkholeFiltersFromYearRange = (
   };
 };
 
-export const buildSinkholeDefaultFilters = (scope?: SinkholeScope): SinkholeFilters => {
+export const buildSinkholeDefaultFilters = (
+  scope?: SinkholeScope,
+): SinkholeFilters => {
   const today = new Date();
   const oneYearAgo = new Date(today);
   oneYearAgo.setFullYear(today.getFullYear() - 1);
@@ -163,7 +175,9 @@ export const buildSinkholeDefaultFilters = (scope?: SinkholeScope): SinkholeFilt
   };
 };
 
-export const buildSinkholeScope = (userInfo: IUserInfo | null): SinkholeScope => {
+export const buildSinkholeScope = (
+  userInfo: IUserInfo | null,
+): SinkholeScope => {
   const admin = userInfo?.adminRoleYn === "Y";
   if (admin) {
     return {
@@ -205,8 +219,12 @@ export const normalizeSinkholeFilters = (
   scope?: SinkholeScope,
 ): SinkholeFilters => {
   const next = {
-    startYmd: String(filters.startYmd ?? "").replace(/[^0-9]/g, "").slice(0, 8),
-    endYmd: String(filters.endYmd ?? "").replace(/[^0-9]/g, "").slice(0, 8),
+    startYmd: String(filters.startYmd ?? "")
+      .replace(/[^0-9]/g, "")
+      .slice(0, 8),
+    endYmd: String(filters.endYmd ?? "")
+      .replace(/[^0-9]/g, "")
+      .slice(0, 8),
     ctpvCd: String(filters.ctpvCd ?? "0") || "0",
     sggCd: String(filters.sggCd ?? "0") || "0",
     restoreStatus: String(filters.restoreStatus ?? "0") || "0",
@@ -218,7 +236,11 @@ export const normalizeSinkholeFilters = (
   }
   if (scope?.sggCd && scope.sggCd !== "0") {
     next.sggCd = scope.sggCd;
-  } else if (next.ctpvCd !== "0" && next.sggCd !== "0" && !next.sggCd.startsWith(next.ctpvCd)) {
+  } else if (
+    next.ctpvCd !== "0" &&
+    next.sggCd !== "0" &&
+    !next.sggCd.startsWith(next.ctpvCd)
+  ) {
     next.sggCd = "0";
   }
 
@@ -231,7 +253,10 @@ export const formatYmdToDateInput = (value?: string) => {
   return `${normalized.slice(0, 4)}-${normalized.slice(4, 6)}-${normalized.slice(6, 8)}`;
 };
 
-export const formatDateInputToYmd = (value?: string) => String(value ?? "").replace(/[^0-9]/g, "").slice(0, 8);
+export const formatDateInputToYmd = (value?: string) =>
+  String(value ?? "")
+    .replace(/[^0-9]/g, "")
+    .slice(0, 8);
 
 export const resolveRegionNameByCode = (
   code: string,
@@ -252,7 +277,6 @@ export const buildSinkholeListQueryString = (
   size = 20,
   options?: {
     includeCoordStatus?: boolean;
-    sort?: UiTableSort;
   },
 ) => {
   const params = new URLSearchParams({
@@ -276,10 +300,6 @@ export const buildSinkholeListQueryString = (
   if (options?.includeCoordStatus === false) {
     params.set("includeCoordStatus", "false");
   }
-  if (options?.sort) {
-    params.set("sort", `${options.sort.key},${options.sort.direction}`);
-  }
-
   return params.toString();
 };
 
@@ -287,7 +307,9 @@ export const isSinkholeLayerNode = (node: any) => {
   const data = node?.data ?? node;
   const nodeId = String(node?.id ?? data?.lyrSn ?? "");
   const layerName = String(data?.lyrNm ?? data?.name ?? "").trim();
-  const layerTypeName = String(data?.lyrTyNm ?? data?.lyrTypeNm ?? data?.lyr_type_nm ?? "").trim();
+  const layerTypeName = String(
+    data?.lyrTyNm ?? data?.lyrTypeNm ?? data?.lyr_type_nm ?? "",
+  ).trim();
 
   return (
     nodeId === SINKHOLE_CONTROL_NODE_ID ||
@@ -300,10 +322,11 @@ export const isSinkholeRootNode = (node: any) => {
   const data = node?.data ?? node;
   const nodeId = String(node?.id ?? data?.lyrSn ?? "");
   const layerName = String(data?.lyrNm ?? data?.name ?? "").trim();
-  return nodeId === SINKHOLE_CONTROL_NODE_ID || layerName === SINKHOLE_LAYER_NAME;
+  return (
+    nodeId === SINKHOLE_CONTROL_NODE_ID || layerName === SINKHOLE_LAYER_NAME
+  );
 };
 
-
 export const SINKHOLE_RESTORE_STATUS_OPTIONS = [
   { value: "0", label: "전체" },
   { value: "복구완료", label: "복구완료" },
@@ -318,7 +341,7 @@ export const SINKHOLE_COORD_STATUS_OPTIONS = [
 ] as const;
 
 export const SINKHOLE_EXCEL_HEADERS: Record<string, string> = {
-  rowNo: "NO",
+  rowNo: "순번",
   ocrnYmd: "발생일자",
   fullAddress: "주소",
   sizeWidth: "발생규모폭",
@@ -331,7 +354,7 @@ export const SINKHOLE_EXCEL_HEADERS: Record<string, string> = {
 };
 
 export const SINKHOLE_DOWNLOAD_EXCEL_HEADERS: Record<string, string> = {
-  rowNo: "NO",
+  rowNo: "순번",
   ocrnYmd: "발생일자",
   fullAddress: "주소",
   sizeWidth: "발생규모폭",
diff --git a/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
index 108a3a549..a1d76a322 100644
--- a/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
@@ -1,9 +1,17 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import UiPageNations from "@common/business_components/ui/table/uiPageNations";
+import {
+  StandardPopupLayout,
+  UITab,
+  type UiHeadProps,
+} from "@common/business_components";
 
 import { Button } from "@common/components";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
 import {
   WINDOW_POPUP_MESSAGE_TYPE,
@@ -43,6 +51,86 @@ const EMPTY_RESULT_PAGE: WaterRiskResultPage = {
   totalPages: 0,
 };
 
+type WaterRiskTableRow = Record<string, unknown> & {
+  sourceRow: WaterRiskResultRow;
+  rowNo: number;
+  sidoName: string;
+  sggName: string;
+  areaName: string;
+  currentAccumRainQty: string;
+  forecastRainQty: string;
+  maxRainIntensity: string;
+  runoffFlowQty: string;
+  conveyQty: string;
+  analysisDisplay: string;
+  riskStatus: WaterRiskResultRow["riskStatus"];
+};
+
+const CURRENT_RESULT_HEADLIST: UiHeadProps[] = [
+  { id: "rowNo", title: "순번", widthPercent: 6 },
+  { id: "sidoName", title: "시도", widthPercent: 9 },
+  { id: "sggName", title: "시군구", widthPercent: 9 },
+  { id: "areaName", title: "중점관리지역", widthPercent: 14 },
+  {
+    id: "currentAccumRainQty",
+    title: "현재누적강우량(mm)",
+    widthPercent: 13,
+    align: "right",
+  },
+  {
+    id: "forecastRainQty",
+    title: "예측강우량(mm)",
+    widthPercent: 12,
+    align: "right",
+  },
+  {
+    id: "runoffFlowQty",
+    title: "유출유량(㎥/s)",
+    widthPercent: 11,
+    align: "right",
+  },
+  {
+    id: "conveyQty",
+    title: "통수량(㎥/s)",
+    widthPercent: 10,
+    align: "right",
+  },
+  { id: "analysisDisplay", title: "분석일", widthPercent: 10 },
+  { id: "riskStatus", title: "통수위험", widthPercent: 7 },
+];
+
+const HISTORY_RESULT_HEADLIST: UiHeadProps[] = [
+  { id: "rowNo", title: "순번", widthPercent: 6 },
+  { id: "sidoName", title: "시도", widthPercent: 9 },
+  { id: "sggName", title: "시군구", widthPercent: 9 },
+  { id: "areaName", title: "중점관리지역", widthPercent: 15 },
+  {
+    id: "maxRainIntensity",
+    title: "최대강우강도(mm/hr)",
+    widthPercent: 15,
+    align: "right",
+  },
+  {
+    id: "runoffFlowQty",
+    title: "유출유량(㎥/s)",
+    widthPercent: 12,
+    align: "right",
+  },
+  {
+    id: "conveyQty",
+    title: "통수량(㎥/s)",
+    widthPercent: 11,
+    align: "right",
+  },
+  { id: "analysisDisplay", title: "분석일", widthPercent: 12 },
+  { id: "riskStatus", title: "통수위험", widthPercent: 11 },
+];
+
+const formatOptionalNumber = (
+  value: number | null | undefined,
+  digits: number,
+) => (value == null ? "-" : value.toFixed(digits));
+
 /** 브라우저 로컬 날짜를 API의 yyyy-MM-dd 형식으로 변환한다. */
 const formatLocalDate = (date: Date) => {
   const year = date.getFullYear();
@@ -149,7 +237,9 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
         if (!active) return;
         setResultPage(page);
         if (page.items.length > 0) {
-          setSelectedResultKey((current) => current || buildResultRowKey(page.items[0]!));
+          setSelectedResultKey(
+            (current) => current || buildResultRowKey(page.items[0]!),
+          );
         }
       })
       .catch((error) => {
@@ -172,7 +262,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) return;
-      if (event.data?.type !== WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SYNC) return;
+      if (event.data?.type !== WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SYNC)
+        return;
 
       const nextSnapshot = (event.data.payload ??
         EMPTY_WATER_RISK_SESSION_SNAPSHOT) as WaterRiskSessionSnapshot;
@@ -199,7 +290,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
   const ctpvOptions = useMemo(() => {
     const unique = new Map<string, string>();
     areaOptions.forEach((option) => {
-      if (option.ctpvCd) unique.set(option.ctpvCd, option.ctpvName || option.ctpvCd);
+      if (option.ctpvCd)
+        unique.set(option.ctpvCd, option.ctpvName || option.ctpvCd);
     });
     return Array.from(unique, ([code, name]) => ({ code, name })).sort((a, b) =>
       a.name.localeCompare(b.name, "ko"),
@@ -215,7 +307,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
           option.ctpvCd === draftResultFilters.ctpvCd,
       )
       .forEach((option) => {
-        if (option.sggCd) unique.set(option.sggCd, option.sggName || option.sggCd);
+        if (option.sggCd)
+          unique.set(option.sggCd, option.sggName || option.sggCd);
       });
     return Array.from(unique, ([code, name]) => ({ code, name })).sort((a, b) =>
       a.name.localeCompare(b.name, "ko"),
@@ -234,7 +327,37 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
     [areaOptions, draftResultFilters.ctpvCd, draftResultFilters.sggCd],
   );
 
-  const resultTableMinWidth = resultMode === "current" ? 1140 : 1060;
+  const resultListTitle =
+    resultMode === "current"
+      ? "통수위험 분석 결과 목록"
+      : "통수위험 과거 이력 목록";
+  const tableRows = useMemo<WaterRiskTableRow[]>(
+    () =>
+      resultPage.items.map((row) => {
+        const representativePipe =
+          row.pipeSummaries.find((pipe) => pipe.riskStatus === "DANGER") ??
+          row.pipeSummaries[0];
+
+        return {
+          sourceRow: row,
+          rowNo: 0,
+          sidoName: row.sidoName || "-",
+          sggName: row.sggName || "-",
+          areaName: row.areaName,
+          currentAccumRainQty: formatOptionalNumber(row.currentAccumRainQty, 1),
+          forecastRainQty: formatOptionalNumber(row.forecastRainQty, 1),
+          maxRainIntensity: formatOptionalNumber(row.maxRainIntensity, 1),
+          runoffFlowQty: formatOptionalNumber(
+            representativePipe?.runoffFlowQty,
+            2,
+          ),
+          conveyQty: formatOptionalNumber(representativePipe?.conveyQty, 3),
+          analysisDisplay: row.maxFloodingAt || row.analysisDate || "-",
+          riskStatus: row.riskStatus,
+        };
+      }),
+    [resultPage.items],
+  );
 
   /** 검증된 검색조건을 적용하고 첫 페이지를 새로 조회한다. */
   const handleApplyResultFilters = () => {
@@ -285,322 +408,228 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
   };
 
   return (
-    <main className="sn-popup-page">
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">통수위험분석 결과조회</h1>
-      </header>
+    <StandardPopupLayout title={windowPopupDefinitions.flowRiskPopup.title}>
+      <section
+        className={`relative flex min-h-0 flex-1 flex-col gap-[1.2rem] ${
+          tableRows.length === 0
+            ? "[&_.standard-data-table>.card]:!flex [&_.standard-data-table>.card]:!min-h-0 [&_.standard-data-table>.card]:!flex-1 [&_.standard-data-table>.card]:!flex-col [&_.standard-data-table]:!flex [&_.standard-data-table]:!min-h-0 [&_.standard-data-table]:!flex-1 [&_.standard-data-table]:!flex-col [&_.standard-data-table__scroll>div]:!h-full [&_.standard-data-table__scroll]:!min-h-96 [&_.standard-data-table__scroll]:!flex-1"
+            : ""
+        }`}
+      >
+        <LoadingOverlay isLoading={isLoading || isMapLoading} />
+        <UITab
+          variant="underline"
+          defaultValue="current"
+          tabList={[
+            { value: "current", label: "현재 위험" },
+            { value: "history", label: "과거 이력" },
+          ]}
+          onValueChange={(value) =>
+            handleChangeResultMode(value as WaterRiskResultMode)
+          }
+        />
 
-      <section className="sn-popup-section">
-        <section className="flex h-full min-h-0 flex-col gap-4">
-          <div className="flex items-end border-b border-border bg-background">
-            <button
-              type="button"
-              className={`min-w-[112px] border-b-2 px-4 py-3 text-xl font-semibold ${
-                resultMode === "current"
-                  ? "border-primary text-primary"
-                  : "border-transparent text-label hover:text-foreground"
-              }`}
-              onClick={() => handleChangeResultMode("current")}
-            >
-              현재 위험
-            </button>
-            <button
-              type="button"
-              className={`min-w-[112px] border-b-2 px-4 py-3 text-xl font-semibold ${
-                resultMode === "history"
-                  ? "border-primary text-primary"
-                  : "border-transparent text-label hover:text-foreground"
-              }`}
-              onClick={() => handleChangeResultMode("history")}
-            >
-              과거 이력
-            </button>
-          </div>
-
-          <div className="overflow-x-auto rounded-md border border-border bg-secondary p-4">
-            <div className="grid min-w-[1080px] grid-cols-[300px_140px_140px_180px_140px_auto] items-end gap-3">
-              <label className="block min-w-0">
-                <div className="mb-1 text-xl font-medium text-label">
-                  {resultMode === "current" ? "조회기간" : "강우발생일"}
-                </div>
-                <span className="flex items-center gap-2">
-                  <input
-                    type="date"
-                    value={draftResultFilters.startDate}
-                    onChange={(event) =>
-                      setDraftResultFilters((current) => ({
-                        ...current,
-                        startDate: event.target.value,
-                      }))
-                    }
-                    aria-label="조회 시작일"
-                    className="h-14 min-w-[138px] flex-1 rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
-                  />
-                  <span className="text-xl font-medium text-label">~</span>
-                  <input
-                    type="date"
-                    value={draftResultFilters.endDate}
-                    onChange={(event) =>
-                      setDraftResultFilters((current) => ({
-                        ...current,
-                        endDate: event.target.value,
-                      }))
-                    }
-                    aria-label="조회 종료일"
-                    className="h-14 min-w-[138px] flex-1 rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
-                  />
-                </span>
-              </label>
-
-              <label className="block min-w-0">
-                <div className="mb-1 text-xl font-medium text-label">시도</div>
-                <select
-                  value={draftResultFilters.ctpvCd}
-                  onChange={(event) =>
-                    setDraftResultFilters((current) => ({
-                      ...current,
-                      ctpvCd: event.target.value,
-                      sggCd: "ALL",
-                      areaId: "ALL",
-                    }))
-                  }
-                  aria-label="시도"
-                  className="h-14 w-full rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
-                >
-                  <option value="ALL">전체</option>
-                  {ctpvOptions.map((option) => (
-                    <option key={option.code} value={option.code}>
-                      {option.name}
-                    </option>
-                  ))}
-                </select>
-              </label>
-
-              <label className="block min-w-0">
-                <div className="mb-1 text-xl font-medium text-label">시군구</div>
-                <select
-                  value={draftResultFilters.sggCd}
-                  onChange={(event) =>
-                    setDraftResultFilters((current) => ({
-                      ...current,
-                      sggCd: event.target.value,
-                      areaId: "ALL",
-                    }))
-                  }
-                  aria-label="시군구"
-                  className="h-14 w-full rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
-                >
-                  <option value="ALL">전체</option>
-                  {sggOptions.map((option) => (
-                    <option key={option.code} value={option.code}>
-                      {option.name}
-                    </option>
-                  ))}
-                </select>
-              </label>
-
-              <label className="block min-w-0">
-                <div className="mb-1 text-xl font-medium text-label">중점관리지역</div>
-                <select
-                  value={draftResultFilters.areaId}
-                  onChange={(event) =>
-                    setDraftResultFilters((current) => ({
-                      ...current,
-                      areaId: event.target.value,
-                    }))
-                  }
-                  aria-label="중점관리지역"
-                  className="h-14 w-full rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
-                >
-                  <option value="ALL">전체</option>
-                  {filteredAreaOptions.map((option) => (
-                    <option
-                      key={`${option.ctpvCd}:${option.sggCd}:${option.areaId}`}
-                      value={option.areaId}
-                    >
-                      {option.areaName}
-                    </option>
-                  ))}
-                </select>
-              </label>
-
-              <label className="block min-w-0">
-                <div className="mb-1 text-xl font-medium text-label">위험상태</div>
-                <select
-                  value={draftResultFilters.riskStatus}
-                  onChange={(event) =>
-                    setDraftResultFilters((current) => ({
-                      ...current,
-                      riskStatus: event.target.value as ResultFilters["riskStatus"],
-                    }))
-                  }
-                  aria-label="위험상태"
-                  className="h-14 w-full rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
-                >
-                  <option value="ALL">전체</option>
-                  <option value="DANGER">위험</option>
-                  <option value="NORMAL">정상</option>
-                </select>
-              </label>
-
-              <div className="flex items-center justify-end">
-                <Button
-                  type="button"
-                  size="sm"
-                  color="primary"
-                  className="h-14 min-w-[72px] px-6 !text-xl"
-                  onClick={handleApplyResultFilters}
-                  disabled={isLoading}
-                >
-                  조회
-                </Button>
-              </div>
+        <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+          <label className="flex shrink-0 items-center gap-2">
+            <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+              {resultMode === "current" ? "조회기간" : "강우발생일"}
             </div>
-          </div>
+            <span className="flex shrink-0 items-center gap-2">
+              <input
+                type="date"
+                value={draftResultFilters.startDate}
+                onChange={(event) =>
+                  setDraftResultFilters((current) => ({
+                    ...current,
+                    startDate: event.target.value,
+                  }))
+                }
+                aria-label="조회 시작일"
+                className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
+              />
+              <span className="text-xl font-medium text-label">~</span>
+              <input
+                type="date"
+                value={draftResultFilters.endDate}
+                onChange={(event) =>
+                  setDraftResultFilters((current) => ({
+                    ...current,
+                    endDate: event.target.value,
+                  }))
+                }
+                aria-label="조회 종료일"
+                className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
+              />
+            </span>
+          </label>
 
-          <div className="flex items-center justify-between gap-4">
-            <h2 className="sn-popup-modal-title">
-              {resultMode === "current" ? "통수위험 분석 결과" : "통수위험 과거 이력"}{" "}
-              <span className="text-primary">{resultPage.total.toLocaleString()}건</span>
-            </h2>
-            <span className="text-xl text-label">
+          <label className="flex shrink-0 items-center gap-2">
+            <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+              시도
+            </div>
+            <select
+              value={draftResultFilters.ctpvCd}
+              onChange={(event) =>
+                setDraftResultFilters((current) => ({
+                  ...current,
+                  ctpvCd: event.target.value,
+                  sggCd: "ALL",
+                  areaId: "ALL",
+                }))
+              }
+              aria-label="시도"
+              className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
+            >
+              <option value="ALL">전체</option>
+              {ctpvOptions.map((option) => (
+                <option key={option.code} value={option.code}>
+                  {option.name}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="flex shrink-0 items-center gap-2">
+            <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+              시군구
+            </div>
+            <select
+              value={draftResultFilters.sggCd}
+              onChange={(event) =>
+                setDraftResultFilters((current) => ({
+                  ...current,
+                  sggCd: event.target.value,
+                  areaId: "ALL",
+                }))
+              }
+              aria-label="시군구"
+              className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
+            >
+              <option value="ALL">전체</option>
+              {sggOptions.map((option) => (
+                <option key={option.code} value={option.code}>
+                  {option.name}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="flex shrink-0 items-center gap-2">
+            <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+              중점관리지역
+            </div>
+            <select
+              value={draftResultFilters.areaId}
+              onChange={(event) =>
+                setDraftResultFilters((current) => ({
+                  ...current,
+                  areaId: event.target.value,
+                }))
+              }
+              aria-label="중점관리지역"
+              className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
+            >
+              <option value="ALL">전체</option>
+              {filteredAreaOptions.map((option) => (
+                <option
+                  key={`${option.ctpvCd}:${option.sggCd}:${option.areaId}`}
+                  value={option.areaId}
+                >
+                  {option.areaName}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="flex shrink-0 items-center gap-2">
+            <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
+              위험상태
+            </div>
+            <select
+              value={draftResultFilters.riskStatus}
+              onChange={(event) =>
+                setDraftResultFilters((current) => ({
+                  ...current,
+                  riskStatus: event.target.value as ResultFilters["riskStatus"],
+                }))
+              }
+              aria-label="위험상태"
+              className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
+            >
+              <option value="ALL">전체</option>
+              <option value="DANGER">위험</option>
+              <option value="NORMAL">정상</option>
+            </select>
+          </label>
+
+          <div className="flex min-w-fit flex-1 items-center justify-end gap-2">
+            <Button
+              type="button"
+              color="primary"
+              onClick={handleApplyResultFilters}
+              disabled={isLoading}
+            >
+              조회
+            </Button>
+            <Button
+              type="button"
+              color="white"
+              onClick={() => {
+                setDraftResultFilters(initialFilters);
+                setAppliedResultFilters(initialFilters);
+                setResultCurrentPage(1);
+                setSelectedResultKey("");
+              }}
+            >
+              초기화
+            </Button>
+          </div>
+        </PopupSearchPanel>
+
+        <MapPopupDataTable
+          rows={tableRows}
+          headlist={
+            resultMode === "current"
+              ? CURRENT_RESULT_HEADLIST
+              : HISTORY_RESULT_HEADLIST
+          }
+          title={resultListTitle}
+          total={resultPage.total}
+          page={resultCurrentPage}
+          pageSize={WATER_RISK_PAGE_SIZE}
+          onPageChange={setResultCurrentPage}
+          rowId={(row) => buildResultRowKey(row.sourceRow)}
+          selectedRowId={selectedResultKey}
+          onRowClick={(row) => void handleSelectResultRow(row.sourceRow)}
+          renderCell={(row, headId) =>
+            headId === "riskStatus" ? (
+              <span
+                className={`sn-popup-badge min-w-[5.6rem] ${getRiskBadgeClassName(row.riskStatus)}`}
+              >
+                {buildWaterRiskStatusLabel(row.riskStatus)}
+              </span>
+            ) : undefined
+          }
+          scrollMode="horizontal"
+          minTableWidth={resultMode === "current" ? "114rem" : "106rem"}
+          emptyMessage="조회 조건에 해당하는 통수위험 결과가 없습니다."
+          actions={
+            <span className="text-xl font-normal text-muted-foreground">
               합리식 유출유량과 Manning 통수량 비교 결과
             </span>
-          </div>
-
-          <div className="sn-popup-card min-h-0 flex-1 overflow-auto" aria-busy={isLoading || isMapLoading}>
-            <div className="overflow-auto">
-              <table
-                className="sn-popup-grid-table !text-xl"
-                style={{ minWidth: `${resultTableMinWidth}px`, width: "100%" }}
-              >
-                <thead>
-                  <tr className="sn-popup-grid-head-row">
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">No.</th>
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">시도</th>
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">시군구</th>
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">중점관리지역</th>
-                    {resultMode === "current" ? (
-                      <>
-                        <th className="sn-popup-grid-head-cell whitespace-nowrap">현재누적강우량(mm)</th>
-                        <th className="sn-popup-grid-head-cell whitespace-nowrap">예측강우량(mm)</th>
-                      </>
-                    ) : (
-                      <th className="sn-popup-grid-head-cell whitespace-nowrap">최대강우강도(mm/hr)</th>
-                    )}
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">유출유량(㎥/s)</th>
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">통수량(㎥/s)</th>
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">분석일</th>
-                    <th className="sn-popup-grid-head-cell whitespace-nowrap">통수위험</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {resultPage.items.map((row, index) => {
-                    const rowKey = buildResultRowKey(row);
-                    const isSelected = rowKey === selectedResultKey;
-                    const representativePipe =
-                      row.pipeSummaries.find((pipe) => pipe.riskStatus === "DANGER") ??
-                      row.pipeSummaries[0];
-                    const rowNumber =
-                      (resultCurrentPage - 1) * WATER_RISK_PAGE_SIZE + index + 1;
-                    return (
-                      <tr
-                        key={rowKey}
-                        aria-selected={isSelected}
-                        className={`sn-popup-grid-row-hover cursor-pointer ${
-                          isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row"
-                        }`}
-                        onClick={() => void handleSelectResultRow(row)}
-                      >
-                        <td className="sn-popup-grid-cell text-center">{rowNumber}</td>
-                        <td className="sn-popup-grid-cell">{row.sidoName || "-"}</td>
-                        <td className="sn-popup-grid-cell">{row.sggName || "-"}</td>
-                        <td className="sn-popup-grid-cell font-semibold">{row.areaName}</td>
-                        {resultMode === "current" ? (
-                          <>
-                            <td className="sn-popup-grid-cell text-right">
-                              {row.currentAccumRainQty == null
-                                ? "-"
-                                : row.currentAccumRainQty.toFixed(1)}
-                            </td>
-                            <td className="sn-popup-grid-cell text-right">
-                              {row.forecastRainQty == null ? "-" : row.forecastRainQty.toFixed(1)}
-                            </td>
-                          </>
-                        ) : (
-                          <td className="sn-popup-grid-cell text-right">
-                            {row.maxRainIntensity == null ? "-" : row.maxRainIntensity.toFixed(1)}
-                          </td>
-                        )}
-                        <td className="sn-popup-grid-cell text-right">
-                          {representativePipe?.runoffFlowQty == null
-                            ? "-"
-                            : representativePipe.runoffFlowQty.toFixed(2)}
-                        </td>
-                        <td className="sn-popup-grid-cell text-right">
-                          {representativePipe?.conveyQty == null
-                            ? "-"
-                            : representativePipe.conveyQty.toFixed(3)}
-                        </td>
-                        <td className="sn-popup-grid-cell text-center">
-                          {row.maxFloodingAt || row.analysisDate || "-"}
-                        </td>
-                        <td className="sn-popup-grid-cell text-center">
-                          <span
-                            className={`sn-popup-badge min-w-[56px] ${getRiskBadgeClassName(row.riskStatus)}`}
-                          >
-                            {buildWaterRiskStatusLabel(row.riskStatus)}
-                          </span>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                  {isLoading ? (
-                    <tr>
-                      <td
-                        colSpan={resultMode === "current" ? 10 : 9}
-                        className="sn-popup-empty-cell sn-popup-grid-cell px-3 py-10 text-center"
-                      >
-                        통수위험 결과를 조회하고 있습니다.
-                      </td>
-                    </tr>
-                  ) : null}
-                  {!isLoading && resultPage.items.length === 0 ? (
-                    <tr>
-                      <td
-                        colSpan={resultMode === "current" ? 10 : 9}
-                        className="sn-popup-empty-cell sn-popup-grid-cell px-3 py-10 text-center"
-                      >
-                        조회 조건에 해당하는 통수위험 결과가 없습니다.
-                      </td>
-                    </tr>
-                  ) : null}
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          {resultPage.total > WATER_RISK_PAGE_SIZE ? (
-            <div className="flex justify-center">
-              <UiPageNations
-                total={resultPage.total}
-                cur={resultCurrentPage}
-                pageSize={WATER_RISK_PAGE_SIZE}
-                onPageChange={setResultCurrentPage}
-              />
-            </div>
-          ) : null}
-          <div aria-live="polite" className="min-h-[20px] px-1 text-xl text-label">
-            {errorMessage ? (
-              <span className="text-destructive">{errorMessage}</span>
-            ) : isMapLoading ? (
-              "선택한 결과의 지도 도형을 조회하고 있습니다."
-            ) : (
-              noticeMessage
-            )}
-          </div>
-        </section>
+          }
+        />
+        <div
+          aria-live="polite"
+          className="min-h-[20px] px-1 text-xl text-label"
+        >
+          {errorMessage ? (
+            <span className="text-destructive">{errorMessage}</span>
+          ) : (
+            noticeMessage
+          )}
+        </div>
       </section>
-    </main>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx
index c5963e0ba..934e20eeb 100644
--- a/apps/sn/app/(map-layout)/map/page.tsx
+++ b/apps/sn/app/(map-layout)/map/page.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지
- * 
+ *
  * 📄 Map Page
  * 지도 페이지 컴포넌트
  *
@@ -10,7 +10,7 @@
  * - 피처 클릭 이벤트 처리 및 상세 정보 팝업 표시
  * - 수심(WaterDepth) 레이어 애니메이션 재생 기능
  * - Zustand를 통한 검색 모달 상태 관리
- * 
+ *
  * 🔗 사용 API
  * - 레이어 설정 조회: GET /api/v1/map/lyrStngs/{lyrGrp} (sewerage-service)
  */
@@ -51,7 +51,10 @@ import Style from "ol/style/Style.js";
 import Text from "ol/style/Text.js";
 
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
-import { isWindowPopupKey, type WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
+import {
+  isWindowPopupKey,
+  type WindowPopupKey,
+} from "@/features/windowPopup/model/popupDefinitions";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
 import Gis from "@common/business_components/ui/map/Gis";
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
@@ -61,6 +64,7 @@ import { Button } from "@common/components";
 import { getData, getRawJson, postRawJson } from "../../components/lib/api";
 import useSearchModalStore from "@/store/useSearchModalStore";
 import useStore from "@/store/useStore";
+import { useAlertStore } from "@/shared/lib";
 import { useUserStore } from "@/shared/lib/use-user-store";
 
 import AgedPipeLayerSettingPanel from "./components/agedPipe/AgedPipeLayerSettingPanel";
@@ -68,7 +72,10 @@ import GisEditSessionPanel from "./components/gisEdit/GisEditSessionPanel";
 import GisEditToolbar from "./components/gisEdit/GisEditToolbar";
 import GisEditPipeSessionPopup from "./components/gisEdit/GisEditPipeSessionPopup";
 import { useGisEdit } from "./components/gisEdit/useGisEdit";
-import type { GisEditPipeBasicInfo, GisEditSessionSnapshot } from "./components/gisEdit/gisEditTypes";
+import type {
+  GisEditPipeBasicInfo,
+  GisEditSessionSnapshot,
+} from "./components/gisEdit/gisEditTypes";
 import {
   PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE,
   type PipeAnalysisDetailRow,
@@ -154,7 +161,10 @@ import {
 } from "./components/floodDngrMap/floodDngrMapTypes";
 import FeatureClickEventPopup from "./components/popupComponent/featureClickEventPopup";
 import SearchModal from "./searchModal/searchModal";
-import { WATER_DEPTH_LAYER_TYPES, extractWaterDepthLegendItems } from "./waterDepth/waterDepth";
+import {
+  WATER_DEPTH_LAYER_TYPES,
+  extractWaterDepthLegendItems,
+} from "./waterDepth/waterDepth";
 import {
   buildWaterRiskStatusLabel,
   EMPTY_WATER_RISK_SESSION_SNAPSHOT,
@@ -184,10 +194,7 @@ const EXMN_PROC_SEARCH_EVENT = "SN_INFTWT_PROC_SEARCH";
 // 지반침하 지도 포인트와 같은 파란 계열의 기존 레이어 트리 심볼 자산을 재사용한다.
 const SINKHOLE_TREE_ICON_NAME = "SN_SINKHOLE_SPOT_BLUE.png";
 const SOUTH_KOREA_VIEW_EXTENT: [number, number, number, number] = [
-  600000,
-  1300000,
-  1500000,
-  2500000,
+  600000, 1300000, 1500000, 2500000,
 ];
 
 const EXMN_GRADE_COLORS: Record<number, string> = {
@@ -239,10 +246,13 @@ const GIS_EDIT_VERTEX_LAYER_ID = "SN_GIS_EDIT_VERTEX_HANDLES";
 const WATER_RISK_AREA_LAYER_ID = "SN_WATER_RISK_AREA";
 const WATER_RISK_GRID_LAYER_ID = "SN_WATER_RISK_GRID";
 const WATER_RISK_PIPE_LAYER_ID = "SN_WATER_RISK_PIPE";
-const FLOOD_HISTORY_SELECTION_PADDING: [number, number, number, number] = [100, 380, 120, 120];
+const FLOOD_HISTORY_SELECTION_PADDING: [number, number, number, number] = [
+  100, 380, 120, 120,
+];
 const RIGHT_PANEL_TAB_LIMIT = 5;
 // Only pipes opened from sinkhole details share one slot within the parent-return flow.
-const RIGHT_PANEL_SINKHOLE_PIPE_TAB_ID = "feature:tb_ms_swage_ppl:sinkhole-singleton";
+const RIGHT_PANEL_SINKHOLE_PIPE_TAB_ID =
+  "feature:tb_ms_swage_ppl:sinkhole-singleton";
 
 type RightPanelTabKind = "feature" | "sinkhole" | "gisEdit";
 type RightPanelTabCategory =
@@ -280,7 +290,7 @@ type RightPanelBookmarkTabsProps = {
   onBack: (tabId: string) => void;
 };
 
-// 유형별 의미가 색상과 탭 이름에 함께 드러나도록 정적 class를 사용한다.
+// 지도 객체 유형과 조사구분을 식별하는 범례 의미색이므로 테마와 무관한 정적 class를 유지한다.
 const RIGHT_PANEL_TAB_STYLE_BY_CATEGORY: Record<
   RightPanelTabCategory,
   RightPanelTabStyle
@@ -338,7 +348,10 @@ const findRightPanelTabOverflowCandidate = (
 };
 
 // 부모 지반침하가 제거되면 그 부모에서 열린 연계 관로도 같은 탭 그룹으로 제거한다.
-const removeRightPanelTabGroup = (tabs: RightPanelTab[], removedTabId: string) =>
+const removeRightPanelTabGroup = (
+  tabs: RightPanelTab[],
+  removedTabId: string,
+) =>
   tabs.filter(
     (tab) => tab.id !== removedTabId && tab.parentTabId !== removedTabId,
   );
@@ -375,7 +388,7 @@ const RightPanelBookmarkTabs = ({
             {tab.category === "pipe" && parentTab ? (
               <button
                 type="button"
-                className="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-sm font-bold transition-colors hover:bg-black/10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
+                className="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-sm font-bold transition-colors hover:bg-accent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
                 title={parentTab.displayLabel + "로 돌아가기"}
                 aria-label={parentTab.displayLabel + "로 돌아가기"}
                 onClick={() => onBack(parentTab.id)}
@@ -385,12 +398,14 @@ const RightPanelBookmarkTabs = ({
             ) : null}
             <button
               type="button"
-              className="inline-flex min-w-0 flex-1 self-stretch items-center justify-center px-1 text-center text-[0.82rem] font-semibold leading-tight"
+              className="inline-flex min-w-0 flex-1 items-center justify-center self-stretch px-1 text-center text-[0.82rem] font-semibold leading-tight"
               title={tab.displayLabel}
               aria-pressed={isActive}
               onClick={() => onActivate(tab.id)}
             >
-              <span className="block max-h-[2.5rem] overflow-hidden break-all">{tab.displayLabel}</span>
+              <span className="block max-h-[2.5rem] overflow-hidden break-all">
+                {tab.displayLabel}
+              </span>
             </button>
           </div>
         );
@@ -407,14 +422,20 @@ type FlowDirectionUsageStyle = {
 type FlowDirectionMode = "PIPE_START_END" | "PIPE_DEPTH";
 
 // /map은 관로 깊이 기준, /map2는 관로 원천 geometry 시점->종점 기준만 유지한다. 두 화면 모두 BBOX 조회만 사용한다.
-const getFlowDirectionModeByPathname = (pathname: string | null): FlowDirectionMode => {
+const getFlowDirectionModeByPathname = (
+  pathname: string | null,
+): FlowDirectionMode => {
   const normalizedPathname = String(pathname ?? "").replace(/\/$/, "");
   if (normalizedPathname.endsWith("/map2")) return "PIPE_START_END";
   return "PIPE_DEPTH";
 };
 
-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];
+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,
+];
 const SWAGE_PRCS_FCLT_LAYER_TYPE = "tb_il_swage_prcs_fclt";
 
 type SwagePrcsFcltLayerMode = "all" | "gte500" | "lt500" | "none";
@@ -422,38 +443,51 @@ type SwagePrcsFcltLayerMode = "all" | "gte500" | "lt500" | "none";
 // 레이어 설정 응답이 lyrTyNm/lyrTypeNm/lyr_type_nm처럼 혼재되어 내려오는 경우를 단일 기준으로 정규화한다.
 const getLayerTypeName = (layerInfo: any) =>
   String(
-    layerInfo?.lyrTyNm ??
-    layerInfo?.lyrTypeNm ??
-    layerInfo?.lyr_type_nm ??
-    "",
+    layerInfo?.lyrTyNm ?? layerInfo?.lyrTypeNm ?? layerInfo?.lyr_type_nm ?? "",
   ).trim();
 
 const getLayerFilterSql = (layerInfo: any) =>
   String(
     layerInfo?.filtrSql ??
-    layerInfo?.filtr_sql ??
-    layerInfo?.flterSql ??
-    layerInfo?.filterSql ??
-    layerInfo?.filter_sql ??
-    "",
+      layerInfo?.filtr_sql ??
+      layerInfo?.flterSql ??
+      layerInfo?.filterSql ??
+      layerInfo?.filter_sql ??
+      "",
   )
     .replace(/\s+/g, "")
     .toLowerCase();
 
-const getSwagePrcsFcltCapacityKind = (layerInfo: any): Exclude<SwagePrcsFcltLayerMode, "all" | "none"> | null => {
+const getSwagePrcsFcltCapacityKind = (
+  layerInfo: any,
+): Exclude<SwagePrcsFcltLayerMode, "all" | "none"> | null => {
   if (getLayerTypeName(layerInfo) !== SWAGE_PRCS_FCLT_LAYER_TYPE) return null;
 
-  const layerName = String(layerInfo?.lyrNm ?? layerInfo?.name ?? "").replace(/\s+/g, "");
+  const layerName = String(layerInfo?.lyrNm ?? layerInfo?.name ?? "").replace(
+    /\s+/g,
+    "",
+  );
   const filterSql = getLayerFilterSql(layerInfo);
 
-  if (filterSql.includes("fclt_cpct>=500") || layerName.includes("500이상") || layerName.includes("500톤이상")) return "gte500";
-  if (filterSql.includes("fclt_cpct<500") || layerName.includes("500미만") || layerName.includes("500톤미만")) return "lt500";
+  if (
+    filterSql.includes("fclt_cpct>=500") ||
+    layerName.includes("500이상") ||
+    layerName.includes("500톤이상")
+  )
+    return "gte500";
+  if (
+    filterSql.includes("fclt_cpct<500") ||
+    layerName.includes("500미만") ||
+    layerName.includes("500톤미만")
+  )
+    return "lt500";
 
   return null;
 };
 
-
-const getSwagePrcsFcltLayerMode = (checkedNodesData: any[]): SwagePrcsFcltLayerMode => {
+const getSwagePrcsFcltLayerMode = (
+  checkedNodesData: any[],
+): SwagePrcsFcltLayerMode => {
   const checkedKinds = new Set(
     checkedNodesData
       .map((node) => getSwagePrcsFcltCapacityKind(node?.data ?? node))
@@ -473,7 +507,10 @@ 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;
+  return (
+    layerTypeName === FLOW_DIRECTION_LAYER_TYPE ||
+    layerName === FLOW_DIRECTION_LAYER_NAME
+  );
 };
 
 // 유하방향 노드를 일반 레이어 토글 대상에서 제외하고, 앱 전용 API vector layer로 처리하도록 속성을 보정한다.
@@ -492,7 +529,11 @@ const normalizeFlowDirectionLayerInfos = (data: any[]): any[] => {
     return {
       ...item,
       children,
-      lyrTyNm: item.lyrTyNm || item.lyrTypeNm || item.lyr_type_nm || FLOW_DIRECTION_LAYER_TYPE,
+      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",
@@ -500,20 +541,27 @@ const normalizeFlowDirectionLayerInfos = (data: any[]): any[] => {
       actlLyrYn: "N",
       clickPsblYn: "N",
       initEprssYn: "N",
-      minViewSize: item.minViewSize ?? item.minZoom ?? String(FLOW_DIRECTION_DEFAULT_MIN_ZOOM),
+      minViewSize:
+        item.minViewSize ??
+        item.minZoom ??
+        String(FLOW_DIRECTION_DEFAULT_MIN_ZOOM),
     };
   });
 };
 
 // 레이어 설정의 최소 표출 줌을 읽되, 값이 없으면 유하방향 기본 줌 기준을 적용한다.
 const getFiniteNumber = (value: unknown) => {
-  if (value === null || value === undefined || String(value).trim() === "") return null;
+  if (value === null || value === undefined || String(value).trim() === "")
+    return null;
   const parsed = Number(value);
   return Number.isFinite(parsed) ? parsed : null;
 };
 
 const getFlowDirectionMinZoom = (layerInfo: any) => {
-  return getFiniteNumber(layerInfo?.minViewSize ?? layerInfo?.minZoom) ?? FLOW_DIRECTION_DEFAULT_MIN_ZOOM;
+  return (
+    getFiniteNumber(layerInfo?.minViewSize ?? layerInfo?.minZoom) ??
+    FLOW_DIRECTION_DEFAULT_MIN_ZOOM
+  );
 };
 
 // 유하방향 화살표는 관로 위에 얹는 보조 레이어라 레이어 설정의 drawOrdr를 우선 사용하고 없으면 높은 zIndex를 준다.
@@ -529,7 +577,9 @@ const getFeatureCollection = (payload: any) => {
 };
 
 // 지반침하 목록 API가 정상일 때는 x/y를 바로 Point feature로 바꿔 geometry 전용 API 장애를 우회할 수 있다.
-const buildSinkholeFeatureCollectionFromItems = (items: SinkholeListItem[]) => ({
+const buildSinkholeFeatureCollectionFromItems = (
+  items: SinkholeListItem[],
+) => ({
   type: "FeatureCollection",
   features: items
     .map((item) => {
@@ -578,7 +628,9 @@ const SINKHOLE_POINT_PALETTE = {
 
 type SinkholePointVariant = keyof typeof SINKHOLE_POINT_PALETTE;
 
-const resolveSinkholePointVariant = (_ocrnYmd?: string | null): SinkholePointVariant => "blue";
+const resolveSinkholePointVariant = (
+  _ocrnYmd?: string | null,
+): SinkholePointVariant => "blue";
 
 // 현재 지도 화면 BBOX 주변을 함께 조회해 이동 직후 가장자리 유하방향이 비어 보이는 현상을 줄인다.
 const expandFlowDirectionExtent = (extent: number[]) => {
@@ -625,16 +677,25 @@ const getGisEditPreviewLabelGeometry = (geometry: any) => {
   }
 
   if (geometryType === "Polygon") {
-    return geometry.getInteriorPoint?.() ?? getGeometryExtentCenterPoint(geometry);
+    return (
+      geometry.getInteriorPoint?.() ?? getGeometryExtentCenterPoint(geometry)
+    );
   }
 
   if (geometryType === "MultiPolygon") {
     const polygons = geometry.getPolygons?.() ?? [];
     if (polygons.length > 0) {
-      const representativePolygon = polygons.reduce((largest: any, current: any) =>
-        (current?.getArea?.() ?? 0) > (largest?.getArea?.() ?? 0) ? current : largest,
-      polygons[0]);
-      return representativePolygon?.getInteriorPoint?.() ?? getGeometryExtentCenterPoint(representativePolygon);
+      const representativePolygon = polygons.reduce(
+        (largest: any, current: any) =>
+          (current?.getArea?.() ?? 0) > (largest?.getArea?.() ?? 0)
+            ? current
+            : largest,
+        polygons[0],
+      );
+      return (
+        representativePolygon?.getInteriorPoint?.() ??
+        getGeometryExtentCenterPoint(representativePolygon)
+      );
     }
     return getGeometryExtentCenterPoint(geometry);
   }
@@ -652,39 +713,48 @@ const createGisEditPreviewStyle = (feature: any) => {
   const layerPointColor = String(feature.get("layerPointColor") ?? "").trim();
   const layerLineColor = String(feature.get("layerLineColor") ?? "").trim();
   const layerFillColor = String(feature.get("layerFillColor") ?? "").trim();
-  const pointColor = editType === "DELETE"
-    ? "rgba(220, 38, 38, 0.85)"
-    : editType === "VERTEX_EDIT"
-      ? "rgba(245, 158, 11, 0.92)"
-      : editType === "MOVE"
-        ? layerPointColor || "rgba(37, 99, 235, 0.92)"
-        : editType === "ADD"
-          ? "rgba(15, 23, 42, 0.96)"
-          : layerPointColor || "rgba(22, 163, 74, 0.92)";
-  const lineColor = editType === "DELETE"
-    ? "rgba(220, 38, 38, 0.9)"
-    : editType === "VERTEX_EDIT"
-      ? "rgba(245, 158, 11, 0.95)"
-      : editType === "MOVE"
-        ? layerLineColor || "rgba(37, 99, 235, 0.95)"
-        : editType === "ADD"
-          ? "rgba(15, 23, 42, 0.96)"
-          : layerLineColor || "rgba(22, 163, 74, 0.95)";
-  const fillColor = editType === "DELETE"
-    ? "rgba(220, 38, 38, 0.18)"
-    : editType === "VERTEX_EDIT"
-      ? "rgba(245, 158, 11, 0.2)"
-      : editType === "MOVE"
-        ? layerFillColor || "rgba(37, 99, 235, 0.18)"
-        : editType === "ADD"
-          ? "rgba(15, 23, 42, 0.2)"
-          : layerFillColor || "rgba(22, 163, 74, 0.18)";
+  const pointColor =
+    editType === "DELETE"
+      ? "rgba(220, 38, 38, 0.85)"
+      : editType === "VERTEX_EDIT"
+        ? "rgba(245, 158, 11, 0.92)"
+        : editType === "MOVE"
+          ? layerPointColor || "rgba(37, 99, 235, 0.92)"
+          : editType === "ADD"
+            ? "rgba(15, 23, 42, 0.96)"
+            : layerPointColor || "rgba(22, 163, 74, 0.92)";
+  const lineColor =
+    editType === "DELETE"
+      ? "rgba(220, 38, 38, 0.9)"
+      : editType === "VERTEX_EDIT"
+        ? "rgba(245, 158, 11, 0.95)"
+        : editType === "MOVE"
+          ? layerLineColor || "rgba(37, 99, 235, 0.95)"
+          : editType === "ADD"
+            ? "rgba(15, 23, 42, 0.96)"
+            : layerLineColor || "rgba(22, 163, 74, 0.95)";
+  const fillColor =
+    editType === "DELETE"
+      ? "rgba(220, 38, 38, 0.18)"
+      : editType === "VERTEX_EDIT"
+        ? "rgba(245, 158, 11, 0.2)"
+        : editType === "MOVE"
+          ? layerFillColor || "rgba(37, 99, 235, 0.18)"
+          : editType === "ADD"
+            ? "rgba(15, 23, 42, 0.2)"
+            : layerFillColor || "rgba(22, 163, 74, 0.18)";
   const highlightColor = isDragging
     ? "rgba(14, 116, 144, 0.98)"
     : isInteractionTarget
       ? "rgba(15, 23, 42, 0.9)"
       : lineColor;
-  const emphasisWidth = isDragging ? 7 : isInteractionTarget ? 6 : editType === "ADD" ? 6 : 4;
+  const emphasisWidth = isDragging
+    ? 7
+    : isInteractionTarget
+      ? 6
+      : editType === "ADD"
+        ? 6
+        : 4;
   const textStyle = previewLabel
     ? new Text({
         text: previewLabel,
@@ -696,7 +766,9 @@ const createGisEditPreviewStyle = (feature: any) => {
         overflow: true,
       })
     : undefined;
-  const labelGeometry = previewLabel ? getGisEditPreviewLabelGeometry(geometry) : null;
+  const labelGeometry = previewLabel
+    ? getGisEditPreviewLabelGeometry(geometry)
+    : null;
 
   if (geometryType === "Point") {
     return new Style({
@@ -717,9 +789,10 @@ const createGisEditPreviewStyle = (feature: any) => {
     const polygonStyles: Style[] = [
       new Style({
         fill: new Fill({
-          color: isInteractionTarget && editType !== "DELETE"
-            ? fillColor.replace(/0\.\d+\)$/, "0.28)")
-            : fillColor,
+          color:
+            isInteractionTarget && editType !== "DELETE"
+              ? fillColor.replace(/0\.\d+\)$/, "0.28)")
+              : fillColor,
         }),
         stroke: new Stroke({
           color: highlightColor,
@@ -743,33 +816,34 @@ const createGisEditPreviewStyle = (feature: any) => {
     return polygonStyles;
   }
 
-  const lineStyles: Style[] = editType === "ADD"
-    ? [
-        new Style({
-          stroke: new Stroke({
-            color: "rgba(255, 255, 255, 0.98)",
-            width: emphasisWidth + 4,
+  const lineStyles: Style[] =
+    editType === "ADD"
+      ? [
+          new Style({
+            stroke: new Stroke({
+              color: "rgba(255, 255, 255, 0.98)",
+              width: emphasisWidth + 4,
+            }),
+            zIndex: 10000,
           }),
-          zIndex: 10000,
-        }),
-        new Style({
-          stroke: new Stroke({
-            color: highlightColor,
-            width: emphasisWidth,
+          new Style({
+            stroke: new Stroke({
+              color: highlightColor,
+              width: emphasisWidth,
+            }),
+            zIndex: 10003,
           }),
-          zIndex: 10003,
-        }),
-      ]
-    : [
-    new Style({
-      stroke: new Stroke({
-        color: highlightColor,
-        width: emphasisWidth,
-        lineDash: editType === "DELETE" ? [10, 6] : undefined,
-      }),
-      zIndex: 10001,
-    }),
-  ];
+        ]
+      : [
+          new Style({
+            stroke: new Stroke({
+              color: highlightColor,
+              width: emphasisWidth,
+              lineDash: editType === "DELETE" ? [10, 6] : undefined,
+            }),
+            zIndex: 10001,
+          }),
+        ];
 
   if (textStyle && labelGeometry) {
     lineStyles.push(
@@ -820,11 +894,16 @@ const GIS_EDIT_VERTEX_SELECTED_STYLE = new Style({
   zIndex: 10007,
 });
 
-const getGisEditVertexHandleStyle = (kind: VertexHandleMeta["kind"], isSelected = false) => {
+const getGisEditVertexHandleStyle = (
+  kind: VertexHandleMeta["kind"],
+  isSelected = false,
+) => {
   if (isSelected && kind === "vertex") {
     return GIS_EDIT_VERTEX_SELECTED_STYLE;
   }
-  return kind === "midpoint" ? GIS_EDIT_VERTEX_MIDPOINT_STYLE : GIS_EDIT_VERTEX_HANDLE_STYLE;
+  return kind === "midpoint"
+    ? GIS_EDIT_VERTEX_MIDPOINT_STYLE
+    : GIS_EDIT_VERTEX_HANDLE_STYLE;
 };
 
 const expandGisEditPipeSnapExtent = (extent: number[]) => {
@@ -856,10 +935,14 @@ const buildWaterRiskInfoAnchor = (areaId: string | null) => {
 };
 
 const buildWaterRiskStatusFillColor = (riskStatus: "DANGER" | "NORMAL") =>
-  riskStatus === "DANGER" ? "rgba(198, 40, 40, 0.24)" : "rgba(21, 101, 192, 0.2)";
+  riskStatus === "DANGER"
+    ? "rgba(198, 40, 40, 0.24)"
+    : "rgba(21, 101, 192, 0.2)";
 
 const buildWaterRiskStatusStrokeColor = (riskStatus: "DANGER" | "NORMAL") =>
-  riskStatus === "DANGER" ? "rgba(198, 40, 40, 0.92)" : "rgba(21, 101, 192, 0.92)";
+  riskStatus === "DANGER"
+    ? "rgba(198, 40, 40, 0.92)"
+    : "rgba(21, 101, 192, 0.92)";
 
 const buildWaterRiskGridFillColor = (colorLevel: string) => {
   switch (colorLevel) {
@@ -876,7 +959,9 @@ const buildWaterRiskGridFillColor = (colorLevel: string) => {
 
 const createWaterRiskAreaStyle = (feature: any) => {
   const areaName = String(feature.get("areaName") ?? "");
-  const riskStatus = String(feature.get("riskStatus") ?? "NORMAL") as "DANGER" | "NORMAL";
+  const riskStatus = String(feature.get("riskStatus") ?? "NORMAL") as
+    | "DANGER"
+    | "NORMAL";
   return new Style({
     fill: new Fill({ color: buildWaterRiskStatusFillColor(riskStatus) }),
     stroke: new Stroke({
@@ -887,7 +972,9 @@ const createWaterRiskAreaStyle = (feature: any) => {
       text: `${areaName}\n${buildWaterRiskStatusLabel(riskStatus)}`,
       font: "700 13px sans-serif",
       fill: new Fill({ color: "#ffffff" }),
-      backgroundFill: new Fill({ color: buildWaterRiskStatusStrokeColor(riskStatus) }),
+      backgroundFill: new Fill({
+        color: buildWaterRiskStatusStrokeColor(riskStatus),
+      }),
       padding: [5, 8, 5, 8],
       overflow: true,
     }),
@@ -992,16 +1079,18 @@ const getRightPanelFeatureTitle = (data: any) => {
       return "펌프장";
     case "tb_ms_stofcbr":
       return "우수토실";
-      case "tb_il_swage_prcs_fclt":
-        return "처리시설";
-      case "tb_ms_swage_prcs_zone":
-        return "처리구역";
-      case "tb_ms_fldng_wtlv_map":
-        return "침수흔적도";
-      case "om_dt_untrt_swg_rain":
-        return "중점우수";
+    case "tb_il_swage_prcs_fclt":
+      return "처리시설";
+    case "tb_ms_swage_prcs_zone":
+      return "처리구역";
+    case "tb_ms_fldng_wtlv_map":
+      return "침수흔적도";
+    case "om_dt_untrt_swg_rain":
+      return "중점우수";
     default:
-      return String(data?.lyrNm ?? data?.values_?.lyrNm ?? "상세").trim() || "상세";
+      return (
+        String(data?.lyrNm ?? data?.values_?.lyrNm ?? "상세").trim() || "상세"
+      );
   }
 };
 
@@ -1016,7 +1105,9 @@ const getRightPanelFeatureProperty = (data: any, keys: string[]) => {
 };
 
 const getRightPanelTabCategory = (data: any): RightPanelTabCategory => {
-  const surveyOverlayType = getRightPanelFeatureProperty(data, ["surveyOverlayType"]);
+  const surveyOverlayType = getRightPanelFeatureProperty(data, [
+    "surveyOverlayType",
+  ]);
   if (surveyOverlayType === "EXMN_RESULT") return "exmnSurvey";
   const layerTypeName = getSelectedFeatureLayerTypeName(data);
   if (layerTypeName === "tb_ms_swage_ppl") return "pipe";
@@ -1025,20 +1116,35 @@ const getRightPanelTabCategory = (data: any): RightPanelTabCategory => {
   return "defaultFeature";
 };
 
-const getRightPanelFeatureDisplayLabel = (data: any, category: RightPanelTabCategory) => {
+const getRightPanelFeatureDisplayLabel = (
+  data: any,
+  category: RightPanelTabCategory,
+) => {
   if (category === "exmnSurvey") {
     const managementNo =
-      getRightPanelFeatureProperty(data, ["gisManagementNo", "fclt_mng_no", "fcltMngNo"]) ||
-      "-";
+      getRightPanelFeatureProperty(data, [
+        "gisManagementNo",
+        "fclt_mng_no",
+        "fcltMngNo",
+      ]) || "-";
     const jobType = getRightPanelFeatureProperty(data, ["jobType"]);
     const surveyLabel =
-      jobType === "PPL" ? "관로조사" : jobType === "MNHL" ? "맨홀조사" : "조사관리";
+      jobType === "PPL"
+        ? "관로조사"
+        : jobType === "MNHL"
+          ? "맨홀조사"
+          : "조사관리";
     return `${surveyLabel}(${managementNo})`;
   }
 
   if (category === "pipe") {
     const managementNo =
-      getRightPanelFeatureProperty(data, ["fclt_mng_no", "fcltMngNo", "pipeId", "fid"]) ||
+      getRightPanelFeatureProperty(data, [
+        "fclt_mng_no",
+        "fcltMngNo",
+        "pipeId",
+        "fid",
+      ]) ||
       getRightPanelFeatureIdentifier(data) ||
       "-";
     return `관로(${managementNo})`;
@@ -1109,7 +1215,9 @@ const createFldngHstryDepthStyle = (label: string, color: string) =>
 const normalizeGisEditFid = (value: unknown) => {
   const raw = String(value ?? "").trim();
   if (!raw) return "";
-  const withoutNamespace = raw.includes(":") ? raw.split(":").pop() ?? raw : raw;
+  const withoutNamespace = raw.includes(":")
+    ? (raw.split(":").pop() ?? raw)
+    : raw;
   return withoutNamespace.startsWith("tb_ms_swage_ppl.")
     ? withoutNamespace.slice("tb_ms_swage_ppl.".length)
     : withoutNamespace;
@@ -1141,8 +1249,9 @@ const highlightGisEditSelectedFeature = (featureData: any) => {
   select?.selectFeature?.(featureData, true);
 };
 
-const isVisibleGisEditSessionChange = (change: GisEditSessionSnapshot["changes"][number]) =>
-  !change.attributeOnly || Boolean(change.basicInfoSavedAt);
+const isVisibleGisEditSessionChange = (
+  change: GisEditSessionSnapshot["changes"][number],
+) => !change.attributeOnly || Boolean(change.basicInfoSavedAt);
 
 const getLatestNumericEditSn = (histories: any[]) =>
   histories.reduce<number | null>((latest, history) => {
@@ -1152,7 +1261,10 @@ const getLatestNumericEditSn = (histories: any[]) =>
     return latest === null || value > latest ? value : latest;
   }, null);
 
-const getGisEditAttributeText = (attributes: Record<string, unknown> | null | undefined, keys: string[]) => {
+const getGisEditAttributeText = (
+  attributes: Record<string, unknown> | null | undefined,
+  keys: string[],
+) => {
   for (const key of keys) {
     const value = String(attributes?.[key] ?? "").trim();
     if (value) return value;
@@ -1172,7 +1284,14 @@ const buildGisEditHiddenPipeFilter = (fids: string[]) => {
   return `fid NOT IN (${normalizedFids.join(",")})`;
 };
 
-const findInvalidPipeRequiredChange = (changes: Array<{ changeId: string; editType: string; clientTempId?: string; attributes?: Record<string, unknown> | null }>) =>
+const findInvalidPipeRequiredChange = (
+  changes: Array<{
+    changeId: string;
+    editType: string;
+    clientTempId?: string;
+    attributes?: Record<string, unknown> | null;
+  }>,
+) =>
   changes.find((change) => {
     const attributes = change.attributes ?? {};
     const hasAttributePayload = Object.keys(attributes).length > 0;
@@ -1182,16 +1301,28 @@ const findInvalidPipeRequiredChange = (changes: Array<{ changeId: string; editTy
     const fcltMngNo = getGisEditAttributeText(attributes, ["fcltMngNo"]);
     const instMngNo = getGisEditAttributeText(attributes, ["instMngNo"]);
     const usgCd = getGisEditAttributeText(attributes, ["usgCd"]);
-    return !mngInstCd || !fcltMngNo || /^NEW-/i.test(fcltMngNo) || !instMngNo || /^NEW-/i.test(instMngNo) || !usgCd;
+    return (
+      !mngInstCd ||
+      !fcltMngNo ||
+      /^NEW-/i.test(fcltMngNo) ||
+      !instMngNo ||
+      /^NEW-/i.test(instMngNo) ||
+      !usgCd
+    );
   });
 
 const getSinkholeSelectionValue = (data: any, key: string) =>
-  data?.[key] ?? data?.values_?.[key] ?? data?.get?.(key) ?? data?.properties?.[key];
+  data?.[key] ??
+  data?.values_?.[key] ??
+  data?.get?.(key) ??
+  data?.properties?.[key];
 
 const getSinkholeAccidentId = (data: any) =>
   String(getSinkholeSelectionValue(data, "acdntNo") ?? "").trim();
 
-const getSinkholeFallbackDetailFromSelection = (data: any): Partial<SinkholeDetail> | null => {
+const getSinkholeFallbackDetailFromSelection = (
+  data: any,
+): Partial<SinkholeDetail> | null => {
   const acdntNo = getSinkholeAccidentId(data);
   if (!acdntNo) return null;
 
@@ -1202,14 +1333,34 @@ const getSinkholeFallbackDetailFromSelection = (data: any): Partial<SinkholeDeta
     sggNm: String(getSinkholeSelectionValue(data, "sggNm") ?? ""),
     emdNm: String(getSinkholeSelectionValue(data, "emdNm") ?? ""),
     daddr: String(getSinkholeSelectionValue(data, "daddr") ?? ""),
-    fullAddress: String(getSinkholeSelectionValue(data, "fullAddress") ?? getSinkholeSelectionValue(data, "daddr") ?? ""),
+    fullAddress: String(
+      getSinkholeSelectionValue(data, "fullAddress") ??
+        getSinkholeSelectionValue(data, "daddr") ??
+        "",
+    ),
     ocrnYmd: String(getSinkholeSelectionValue(data, "ocrnYmd") ?? ""),
-    restoreStatus: String(getSinkholeSelectionValue(data, "restoreStatus") ?? ""),
-    restoreCompletedYmd: String(getSinkholeSelectionValue(data, "restoreCompletedYmd") ?? ""),
-    coordStatus: String(getSinkholeSelectionValue(data, "coordStatus") ?? getSinkholeSelectionValue(data, "geocodeStatus") ?? ""),
-    geocodeStatus: String(getSinkholeSelectionValue(data, "geocodeStatus") ?? getSinkholeSelectionValue(data, "coordStatus") ?? ""),
-    geocodeSource: String(getSinkholeSelectionValue(data, "geocodeSource") ?? ""),
-    geocodeErrorMessage: String(getSinkholeSelectionValue(data, "geocodeErrorMessage") ?? ""),
+    restoreStatus: String(
+      getSinkholeSelectionValue(data, "restoreStatus") ?? "",
+    ),
+    restoreCompletedYmd: String(
+      getSinkholeSelectionValue(data, "restoreCompletedYmd") ?? "",
+    ),
+    coordStatus: String(
+      getSinkholeSelectionValue(data, "coordStatus") ??
+        getSinkholeSelectionValue(data, "geocodeStatus") ??
+        "",
+    ),
+    geocodeStatus: String(
+      getSinkholeSelectionValue(data, "geocodeStatus") ??
+        getSinkholeSelectionValue(data, "coordStatus") ??
+        "",
+    ),
+    geocodeSource: String(
+      getSinkholeSelectionValue(data, "geocodeSource") ?? "",
+    ),
+    geocodeErrorMessage: String(
+      getSinkholeSelectionValue(data, "geocodeErrorMessage") ?? "",
+    ),
     latitude: getSinkholeSelectionValue(data, "latitude") ?? null,
     longitude: getSinkholeSelectionValue(data, "longitude") ?? null,
     x: point?.x ?? getSinkholeSelectionValue(data, "x") ?? null,
@@ -1220,17 +1371,16 @@ const getSinkholeFallbackDetailFromSelection = (data: any): Partial<SinkholeDeta
     detailCause: getSinkholeSelectionValue(data, "detailCause") ?? null,
     deathCount: getSinkholeSelectionValue(data, "deathCount") ?? null,
     injuryCount: getSinkholeSelectionValue(data, "injuryCount") ?? null,
-    vehicleDamageCount: getSinkholeSelectionValue(data, "vehicleDamageCount") ?? null,
+    vehicleDamageCount:
+      getSinkholeSelectionValue(data, "vehicleDamageCount") ?? null,
   };
 };
 
-const getSinkholePointFromSelection = (data: any): { x: number; y: number } | null => {
-  const directX = Number(
-    getSinkholeSelectionValue(data, "x"),
-  );
-  const directY = Number(
-    getSinkholeSelectionValue(data, "y"),
-  );
+const getSinkholePointFromSelection = (
+  data: any,
+): { x: number; y: number } | null => {
+  const directX = Number(getSinkholeSelectionValue(data, "x"));
+  const directY = Number(getSinkholeSelectionValue(data, "y"));
   if (Number.isFinite(directX) && Number.isFinite(directY)) {
     return { x: directX, y: directY };
   }
@@ -1297,12 +1447,14 @@ const createSinkholeRadiusLabelStyle = (
       fill: new Fill({ color: SINKHOLE_POINT_PALETTE[variant].strokeSelected }),
       stroke: new Stroke({ color: "rgba(255, 255, 255, 0.98)", width: 3 }),
       backgroundFill: new Fill({ color: "rgba(255, 255, 255, 0.9)" }),
-      backgroundStroke: new Stroke({ color: SINKHOLE_POINT_PALETTE[variant].radiusStroke, width: 1.5 }),
+      backgroundStroke: new Stroke({
+        color: SINKHOLE_POINT_PALETTE[variant].radiusStroke,
+        width: 1.5,
+      }),
     }),
     zIndex: 9998,
   });
 
-
 const createSinkholeFocusedPipeStyle = () => [
   new Style({
     stroke: new Stroke({
@@ -1352,7 +1504,8 @@ type VertexDeleteResult = {
   message?: string;
 };
 
-const cloneCoordinates = <T,>(value: T): T => JSON.parse(JSON.stringify(value)) as T;
+const cloneCoordinates = <T,>(value: T): T =>
+  JSON.parse(JSON.stringify(value)) as T;
 
 const getMidpoint = (start: number[], end: number[]) => [
   (Number(start?.[0] ?? 0) + Number(end?.[0] ?? 0)) / 2,
@@ -1373,18 +1526,17 @@ const buildVertexHandleMetaKey = (meta: VertexHandleMeta) =>
   ].join(":");
 
 const buildVertexHandleSelectionKey = (metaList: VertexHandleMeta[]) =>
-  metaList
-    .map(buildVertexHandleMetaKey)
-    .sort()
-    .join("|");
+  metaList.map(buildVertexHandleMetaKey).sort().join("|");
 
 const getSquaredPixelDistance = (
   map: any,
   startCoordinate: number[],
   endCoordinate: number[],
 ) => {
-  const [startX = 0, startY = 0] = map?.getPixelFromCoordinate?.(startCoordinate) ?? [];
-  const [endX = 0, endY = 0] = map?.getPixelFromCoordinate?.(endCoordinate) ?? [];
+  const [startX = 0, startY = 0] =
+    map?.getPixelFromCoordinate?.(startCoordinate) ?? [];
+  const [endX = 0, endY = 0] =
+    map?.getPixelFromCoordinate?.(endCoordinate) ?? [];
   return (endX - startX) ** 2 + (endY - startY) ** 2;
 };
 
@@ -1407,9 +1559,12 @@ const getPixelDistanceToSegment = (
   startCoordinate: number[],
   endCoordinate: number[],
 ) => {
-  const [pointX = 0, pointY = 0] = map?.getPixelFromCoordinate?.(coordinate) ?? [];
-  const [startX = 0, startY = 0] = map?.getPixelFromCoordinate?.(startCoordinate) ?? [];
-  const [endX = 0, endY = 0] = map?.getPixelFromCoordinate?.(endCoordinate) ?? [];
+  const [pointX = 0, pointY = 0] =
+    map?.getPixelFromCoordinate?.(coordinate) ?? [];
+  const [startX = 0, startY = 0] =
+    map?.getPixelFromCoordinate?.(startCoordinate) ?? [];
+  const [endX = 0, endY = 0] =
+    map?.getPixelFromCoordinate?.(endCoordinate) ?? [];
   const deltaX = endX - startX;
   const deltaY = endY - startY;
   const segmentLengthSquared = deltaX ** 2 + deltaY ** 2;
@@ -1422,7 +1577,8 @@ const getPixelDistanceToSegment = (
     0,
     Math.min(
       1,
-      ((pointX - startX) * deltaX + (pointY - startY) * deltaY) / segmentLengthSquared,
+      ((pointX - startX) * deltaX + (pointY - startY) * deltaY) /
+        segmentLengthSquared,
     ),
   );
   const projectedX = startX + deltaX * ratio;
@@ -1441,7 +1597,10 @@ const createVertexHandleFeature = (
   handleFeature.set("handleKind", meta.kind);
   handleFeature.set("handleMeta", meta);
   handleFeature.set("handleMetaList", metaList);
-  handleFeature.set("handleSelectionKey", buildVertexHandleSelectionKey(metaList));
+  handleFeature.set(
+    "handleSelectionKey",
+    buildVertexHandleSelectionKey(metaList),
+  );
   handleFeature.setStyle(getGisEditVertexHandleStyle(meta.kind));
   return handleFeature;
 };
@@ -1476,7 +1635,8 @@ const collectPolygonRingVertexHandleCandidates = (
   const logicalVertexCount = Math.max(0, coordinates.length - 1);
   for (let coordIndex = 0; coordIndex < logicalVertexCount; coordIndex += 1) {
     const coordinate = coordinates[coordIndex];
-    const nextCoordinate = coordinates[(coordIndex + 1) % logicalVertexCount] ?? coordinate;
+    const nextCoordinate =
+      coordinates[(coordIndex + 1) % logicalVertexCount] ?? coordinate;
     if (!coordinate || !nextCoordinate) continue;
     candidates.push({
       coordinate,
@@ -1497,7 +1657,10 @@ const collectVertexHandleCandidates = (geometry: any) => {
   if (!geometryType) return [];
 
   if (geometryType === "LineString") {
-    return collectLineVertexHandleCandidates(geometry.getCoordinates?.() ?? [], geometryType);
+    return collectLineVertexHandleCandidates(
+      geometry.getCoordinates?.() ?? [],
+      geometryType,
+    );
   }
 
   if (geometryType === "MultiLineString") {
@@ -1510,7 +1673,12 @@ const collectVertexHandleCandidates = (geometry: any) => {
   if (geometryType === "Polygon") {
     const rings = geometry.getCoordinates?.() ?? [];
     return rings.flatMap((ring: number[][], ringIndex: number) =>
-      collectPolygonRingVertexHandleCandidates(ring, geometryType, undefined, ringIndex),
+      collectPolygonRingVertexHandleCandidates(
+        ring,
+        geometryType,
+        undefined,
+        ringIndex,
+      ),
     );
   }
 
@@ -1518,7 +1686,12 @@ const collectVertexHandleCandidates = (geometry: any) => {
     const polygons = geometry.getCoordinates?.() ?? [];
     return polygons.flatMap((polygon: number[][][], polygonIndex: number) =>
       polygon.flatMap((ring: number[][], ringIndex: number) =>
-        collectPolygonRingVertexHandleCandidates(ring, geometryType, polygonIndex, ringIndex),
+        collectPolygonRingVertexHandleCandidates(
+          ring,
+          geometryType,
+          polygonIndex,
+          ringIndex,
+        ),
       ),
     );
   }
@@ -1533,31 +1706,40 @@ const buildVertexHandleFeatures = (geometry: any, map?: any): Feature[] => {
     sourceCoordinates: number[][];
   }> = [];
 
-  collectVertexHandleCandidates(geometry).forEach((candidate: VertexHandleCandidate) => {
-    const existing = groupedCandidates.find((group) => {
-      if (!map) {
-        return buildVertexCoordinateKey(group.coordinate) === buildVertexCoordinateKey(candidate.coordinate);
+  collectVertexHandleCandidates(geometry).forEach(
+    (candidate: VertexHandleCandidate) => {
+      const existing = groupedCandidates.find((group) => {
+        if (!map) {
+          return (
+            buildVertexCoordinateKey(group.coordinate) ===
+            buildVertexCoordinateKey(candidate.coordinate)
+          );
+        }
+
+        return (
+          getSquaredPixelDistance(
+            map,
+            group.coordinate,
+            candidate.coordinate,
+          ) <=
+          GIS_EDIT_VERTEX_CLUSTER_PIXEL_THRESHOLD ** 2
+        );
+      });
+
+      if (existing) {
+        existing.metaList.push(candidate.meta);
+        existing.sourceCoordinates.push(candidate.coordinate);
+        existing.coordinate = getAverageCoordinate(existing.sourceCoordinates);
+        return;
       }
 
-      return (
-        getSquaredPixelDistance(map, group.coordinate, candidate.coordinate) <=
-        GIS_EDIT_VERTEX_CLUSTER_PIXEL_THRESHOLD ** 2
-      );
-    });
-
-    if (existing) {
-      existing.metaList.push(candidate.meta);
-      existing.sourceCoordinates.push(candidate.coordinate);
-      existing.coordinate = getAverageCoordinate(existing.sourceCoordinates);
-      return;
-    }
-
-    groupedCandidates.push({
-      coordinate: candidate.coordinate,
-      metaList: [candidate.meta],
-      sourceCoordinates: [candidate.coordinate],
-    });
-  });
+      groupedCandidates.push({
+        coordinate: candidate.coordinate,
+        metaList: [candidate.meta],
+        sourceCoordinates: [candidate.coordinate],
+      });
+    },
+  );
 
   return groupedCandidates.map(({ coordinate, metaList }) =>
     createVertexHandleFeature(coordinate, metaList[0]!, metaList),
@@ -1570,7 +1752,11 @@ const collectLineMidpointCandidates = (
   partIndex?: number,
 ) => {
   const candidates: VertexHandleCandidate[] = [];
-  for (let coordIndex = 0; coordIndex < coordinates.length - 1; coordIndex += 1) {
+  for (
+    let coordIndex = 0;
+    coordIndex < coordinates.length - 1;
+    coordIndex += 1
+  ) {
     const startCoordinate = coordinates[coordIndex];
     const endCoordinate = coordinates[coordIndex + 1];
     if (!startCoordinate || !endCoordinate) continue;
@@ -1618,7 +1804,10 @@ const collectMidpointCandidates = (geometry: any) => {
   if (!geometryType) return [];
 
   if (geometryType === "LineString") {
-    return collectLineMidpointCandidates(geometry.getCoordinates?.() ?? [], geometryType);
+    return collectLineMidpointCandidates(
+      geometry.getCoordinates?.() ?? [],
+      geometryType,
+    );
   }
 
   if (geometryType === "MultiLineString") {
@@ -1631,7 +1820,12 @@ const collectMidpointCandidates = (geometry: any) => {
   if (geometryType === "Polygon") {
     const rings = geometry.getCoordinates?.() ?? [];
     return rings.flatMap((ring: number[][], ringIndex: number) =>
-      collectPolygonRingMidpointCandidates(ring, geometryType, undefined, ringIndex),
+      collectPolygonRingMidpointCandidates(
+        ring,
+        geometryType,
+        undefined,
+        ringIndex,
+      ),
     );
   }
 
@@ -1639,7 +1833,12 @@ const collectMidpointCandidates = (geometry: any) => {
     const polygons = geometry.getCoordinates?.() ?? [];
     return polygons.flatMap((polygon: number[][][], polygonIndex: number) =>
       polygon.flatMap((ring: number[][], ringIndex: number) =>
-        collectPolygonRingMidpointCandidates(ring, geometryType, polygonIndex, ringIndex),
+        collectPolygonRingMidpointCandidates(
+          ring,
+          geometryType,
+          polygonIndex,
+          ringIndex,
+        ),
       ),
     );
   }
@@ -1652,14 +1851,19 @@ const getNearestVertexPixelDistance = (
   geometry: any,
   coordinate: number[],
 ): number => {
-  return buildVertexHandleFeatures(geometry, map).reduce((minimumDistance: number, feature: Feature) => {
-    const vertexCoordinate = (feature.getGeometry?.() as any)?.getCoordinates?.();
-    if (!Array.isArray(vertexCoordinate)) return minimumDistance;
-    return Math.min(
-      minimumDistance,
-      Math.sqrt(getSquaredPixelDistance(map, coordinate, vertexCoordinate)),
-    );
-  }, Number.POSITIVE_INFINITY);
+  return buildVertexHandleFeatures(geometry, map).reduce(
+    (minimumDistance: number, feature: Feature) => {
+      const vertexCoordinate = (
+        feature.getGeometry?.() as any
+      )?.getCoordinates?.();
+      if (!Array.isArray(vertexCoordinate)) return minimumDistance;
+      return Math.min(
+        minimumDistance,
+        Math.sqrt(getSquaredPixelDistance(map, coordinate, vertexCoordinate)),
+      );
+    },
+    Number.POSITIVE_INFINITY,
+  );
 };
 
 const getSegmentCoordinatesFromMeta = (
@@ -1685,7 +1889,10 @@ const getSegmentCoordinatesFromMeta = (
     const targetRing = rings[meta.ringIndex ?? 0] ?? [];
     const logicalVertexCount = Math.max(0, targetRing.length - 1);
     if (logicalVertexCount === 0) return null;
-    return [targetRing[meta.coordIndex], targetRing[(meta.coordIndex + 1) % logicalVertexCount]];
+    return [
+      targetRing[meta.coordIndex],
+      targetRing[(meta.coordIndex + 1) % logicalVertexCount],
+    ];
   }
 
   if (geometryType === "MultiPolygon") {
@@ -1694,7 +1901,10 @@ const getSegmentCoordinatesFromMeta = (
     const targetRing = targetPolygon[meta.ringIndex ?? 0] ?? [];
     const logicalVertexCount = Math.max(0, targetRing.length - 1);
     if (logicalVertexCount === 0) return null;
-    return [targetRing[meta.coordIndex], targetRing[(meta.coordIndex + 1) % logicalVertexCount]];
+    return [
+      targetRing[meta.coordIndex],
+      targetRing[(meta.coordIndex + 1) % logicalVertexCount],
+    ];
   }
 
   return null;
@@ -1706,7 +1916,11 @@ const findHoveredMidpointCandidate = (
   coordinate: number[],
   tolerancePx = 18,
 ): VertexHandleCandidate | null => {
-  const nearestVertexDistance = getNearestVertexPixelDistance(map, geometry, coordinate);
+  const nearestVertexDistance = getNearestVertexPixelDistance(
+    map,
+    geometry,
+    coordinate,
+  );
   if (nearestVertexDistance <= 14) {
     return null;
   }
@@ -1716,10 +1930,14 @@ const findHoveredMidpointCandidate = (
   let minimumDistance = Number.POSITIVE_INFINITY;
 
   midpointCandidates.forEach((candidate: VertexHandleCandidate) => {
-    const segmentCoordinates = getSegmentCoordinatesFromMeta(geometry, candidate.meta);
+    const segmentCoordinates = getSegmentCoordinatesFromMeta(
+      geometry,
+      candidate.meta,
+    );
     if (!segmentCoordinates) return;
     const [startCoordinate, endCoordinate] = segmentCoordinates;
-    if (!Array.isArray(startCoordinate) || !Array.isArray(endCoordinate)) return;
+    if (!Array.isArray(startCoordinate) || !Array.isArray(endCoordinate))
+      return;
 
     const segmentDistance = getPixelDistanceToSegment(
       map,
@@ -1765,9 +1983,10 @@ const updatePolygonRingCoordinates = (
       nextCoordinates[logicalVertexCount] = nextCoordinate;
     }
   } else {
-    const insertIndex = meta.coordIndex === logicalVertexCount - 1
-      ? logicalVertexCount
-      : meta.coordIndex + 1;
+    const insertIndex =
+      meta.coordIndex === logicalVertexCount - 1
+        ? logicalVertexCount
+        : meta.coordIndex + 1;
     nextCoordinates.splice(insertIndex, 0, nextCoordinate);
   }
 
@@ -1784,7 +2003,11 @@ const applyVertexHandleMove = (
 
   if (geometryType === "LineString") {
     geometry.setCoordinates(
-      updateLineCoordinates(geometry.getCoordinates?.() ?? [], meta, nextCoordinate),
+      updateLineCoordinates(
+        geometry.getCoordinates?.() ?? [],
+        meta,
+        nextCoordinate,
+      ),
     );
     return;
   }
@@ -1792,7 +2015,11 @@ const applyVertexHandleMove = (
   if (geometryType === "MultiLineString") {
     const parts = cloneCoordinates(geometry.getCoordinates?.() ?? []);
     const targetPartIndex = meta.partIndex ?? 0;
-    parts[targetPartIndex] = updateLineCoordinates(parts[targetPartIndex] ?? [], meta, nextCoordinate);
+    parts[targetPartIndex] = updateLineCoordinates(
+      parts[targetPartIndex] ?? [],
+      meta,
+      nextCoordinate,
+    );
     geometry.setCoordinates(parts);
     return;
   }
@@ -1800,7 +2027,11 @@ const applyVertexHandleMove = (
   if (geometryType === "Polygon") {
     const rings = cloneCoordinates(geometry.getCoordinates?.() ?? []);
     const targetRingIndex = meta.ringIndex ?? 0;
-    rings[targetRingIndex] = updatePolygonRingCoordinates(rings[targetRingIndex] ?? [], meta, nextCoordinate);
+    rings[targetRingIndex] = updatePolygonRingCoordinates(
+      rings[targetRingIndex] ?? [],
+      meta,
+      nextCoordinate,
+    );
     geometry.setCoordinates(rings);
     return;
   }
@@ -1809,18 +2040,24 @@ const applyVertexHandleMove = (
     const polygons = cloneCoordinates(geometry.getCoordinates?.() ?? []);
     const targetPolygonIndex = meta.polygonIndex ?? 0;
     const targetRingIndex = meta.ringIndex ?? 0;
-    polygons[targetPolygonIndex][targetRingIndex] = updatePolygonRingCoordinates(
-      polygons[targetPolygonIndex][targetRingIndex] ?? [],
-      meta,
-      nextCoordinate,
-    );
+    polygons[targetPolygonIndex][targetRingIndex] =
+      updatePolygonRingCoordinates(
+        polygons[targetPolygonIndex][targetRingIndex] ?? [],
+        meta,
+        nextCoordinate,
+      );
     geometry.setCoordinates(polygons);
   }
 };
 
-const deleteLineVertices = (coordinates: number[][], coordIndexes: number[]) => {
+const deleteLineVertices = (
+  coordinates: number[][],
+  coordIndexes: number[],
+) => {
   const nextCoordinates = cloneCoordinates(coordinates);
-  const uniqueIndexes = Array.from(new Set(coordIndexes)).sort((left, right) => right - left);
+  const uniqueIndexes = Array.from(new Set(coordIndexes)).sort(
+    (left, right) => right - left,
+  );
   if (nextCoordinates.length - uniqueIndexes.length < 2) {
     return null;
   }
@@ -1830,14 +2067,21 @@ const deleteLineVertices = (coordinates: number[][], coordIndexes: number[]) =>
   return nextCoordinates;
 };
 
-const deletePolygonVertices = (coordinates: number[][], coordIndexes: number[]) => {
+const deletePolygonVertices = (
+  coordinates: number[][],
+  coordIndexes: number[],
+) => {
   const logicalVertexCount = Math.max(0, coordinates.length - 1);
-  const uniqueIndexes = Array.from(new Set(coordIndexes)).sort((left, right) => right - left);
+  const uniqueIndexes = Array.from(new Set(coordIndexes)).sort(
+    (left, right) => right - left,
+  );
   if (logicalVertexCount - uniqueIndexes.length < 3) {
     return null;
   }
 
-  const logicalCoordinates = cloneCoordinates(coordinates.slice(0, logicalVertexCount));
+  const logicalCoordinates = cloneCoordinates(
+    coordinates.slice(0, logicalVertexCount),
+  );
   uniqueIndexes.forEach((coordIndex) => {
     logicalCoordinates.splice(coordIndex, 1);
   });
@@ -1855,12 +2099,19 @@ const deleteSelectedVertexHandles = (
   }
 
   if (metaList.some((meta) => meta.kind !== "vertex")) {
-    return { ok: false, message: "흰색 midpoint는 삭제 대상이 아닙니다. 주황색 실꼭지점을 선택하세요." };
+    return {
+      ok: false,
+      message:
+        "흰색 midpoint는 삭제 대상이 아닙니다. 주황색 실꼭지점을 선택하세요.",
+    };
   }
 
   const geometryType = geometry?.getType?.();
   if (!geometryType) {
-    return { ok: false, message: "꼭지점 삭제 대상 geometry를 찾지 못했습니다." };
+    return {
+      ok: false,
+      message: "꼭지점 삭제 대상 geometry를 찾지 못했습니다.",
+    };
   }
 
   if (geometryType === "LineString") {
@@ -1869,7 +2120,11 @@ const deleteSelectedVertexHandles = (
       metaList.map((meta) => meta.coordIndex),
     );
     if (!nextCoordinates) {
-      return { ok: false, message: "하수관로는 최소 2개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다." };
+      return {
+        ok: false,
+        message:
+          "하수관로는 최소 2개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다.",
+      };
     }
     geometry.setCoordinates(nextCoordinates);
     return { ok: true };
@@ -1877,18 +2132,27 @@ const deleteSelectedVertexHandles = (
 
   if (geometryType === "MultiLineString") {
     const nextParts = cloneCoordinates(geometry.getCoordinates?.() ?? []);
-    const metaGroups = metaList.reduce<Record<number, number[]>>((acc, meta) => {
-      const partIndex = meta.partIndex ?? 0;
-      if (!acc[partIndex]) acc[partIndex] = [];
-      acc[partIndex]!.push(meta.coordIndex);
-      return acc;
-    }, {});
+    const metaGroups = metaList.reduce<Record<number, number[]>>(
+      (acc, meta) => {
+        const partIndex = meta.partIndex ?? 0;
+        if (!acc[partIndex]) acc[partIndex] = [];
+        acc[partIndex]!.push(meta.coordIndex);
+        return acc;
+      },
+      {},
+    );
 
     for (const [partIndexRaw, coordIndexes] of Object.entries(metaGroups)) {
       const partIndex = Number(partIndexRaw);
-      const nextCoordinates = deleteLineVertices(nextParts[partIndex] ?? [], coordIndexes);
+      const nextCoordinates = deleteLineVertices(
+        nextParts[partIndex] ?? [],
+        coordIndexes,
+      );
       if (!nextCoordinates) {
-        return { ok: false, message: "하수관로는 각 선형마다 최소 2개의 꼭지점이 필요합니다." };
+        return {
+          ok: false,
+          message: "하수관로는 각 선형마다 최소 2개의 꼭지점이 필요합니다.",
+        };
       }
       nextParts[partIndex] = nextCoordinates;
     }
@@ -1899,18 +2163,28 @@ const deleteSelectedVertexHandles = (
 
   if (geometryType === "Polygon") {
     const nextRings = cloneCoordinates(geometry.getCoordinates?.() ?? []);
-    const metaGroups = metaList.reduce<Record<number, number[]>>((acc, meta) => {
-      const ringIndex = meta.ringIndex ?? 0;
-      if (!acc[ringIndex]) acc[ringIndex] = [];
-      acc[ringIndex]!.push(meta.coordIndex);
-      return acc;
-    }, {});
+    const metaGroups = metaList.reduce<Record<number, number[]>>(
+      (acc, meta) => {
+        const ringIndex = meta.ringIndex ?? 0;
+        if (!acc[ringIndex]) acc[ringIndex] = [];
+        acc[ringIndex]!.push(meta.coordIndex);
+        return acc;
+      },
+      {},
+    );
 
     for (const [ringIndexRaw, coordIndexes] of Object.entries(metaGroups)) {
       const ringIndex = Number(ringIndexRaw);
-      const nextCoordinates = deletePolygonVertices(nextRings[ringIndex] ?? [], coordIndexes);
+      const nextCoordinates = deletePolygonVertices(
+        nextRings[ringIndex] ?? [],
+        coordIndexes,
+      );
       if (!nextCoordinates) {
-        return { ok: false, message: "폴리곤은 최소 3개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다." };
+        return {
+          ok: false,
+          message:
+            "폴리곤은 최소 3개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다.",
+        };
       }
       nextRings[ringIndex] = nextCoordinates;
     }
@@ -1921,14 +2195,17 @@ const deleteSelectedVertexHandles = (
 
   if (geometryType === "MultiPolygon") {
     const nextPolygons = cloneCoordinates(geometry.getCoordinates?.() ?? []);
-    const metaGroups = metaList.reduce<Record<string, number[]>>((acc, meta) => {
-      const polygonIndex = meta.polygonIndex ?? 0;
-      const ringIndex = meta.ringIndex ?? 0;
-      const groupKey = `${polygonIndex}:${ringIndex}`;
-      if (!acc[groupKey]) acc[groupKey] = [];
-      acc[groupKey]!.push(meta.coordIndex);
-      return acc;
-    }, {});
+    const metaGroups = metaList.reduce<Record<string, number[]>>(
+      (acc, meta) => {
+        const polygonIndex = meta.polygonIndex ?? 0;
+        const ringIndex = meta.ringIndex ?? 0;
+        const groupKey = `${polygonIndex}:${ringIndex}`;
+        if (!acc[groupKey]) acc[groupKey] = [];
+        acc[groupKey]!.push(meta.coordIndex);
+        return acc;
+      },
+      {},
+    );
 
     for (const [groupKey, coordIndexes] of Object.entries(metaGroups)) {
       const [polygonIndexText, ringIndexText] = groupKey.split(":");
@@ -1939,7 +2216,11 @@ const deleteSelectedVertexHandles = (
         coordIndexes,
       );
       if (!nextCoordinates) {
-        return { ok: false, message: "폴리곤은 최소 3개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다." };
+        return {
+          ok: false,
+          message:
+            "폴리곤은 최소 3개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다.",
+        };
       }
       nextPolygons[polygonIndex][ringIndex] = nextCoordinates;
     }
@@ -1948,7 +2229,10 @@ const deleteSelectedVertexHandles = (
     return { ok: true };
   }
 
-  return { ok: false, message: "현재 geometry 유형은 꼭지점 삭제를 지원하지 않습니다." };
+  return {
+    ok: false,
+    message: "현재 geometry 유형은 꼭지점 삭제를 지원하지 않습니다.",
+  };
 };
 
 const getClosestSnapCoordinateFromSource = (
@@ -1965,7 +2249,9 @@ const getClosestSnapCoordinateFromSource = (
   const closestCoordinate = nearestGeometry.getClosestPoint(coordinate);
   if (!Array.isArray(closestCoordinate)) return null;
 
-  const distance = Math.sqrt(getSquaredPixelDistance(map, coordinate, closestCoordinate));
+  const distance = Math.sqrt(
+    getSquaredPixelDistance(map, coordinate, closestCoordinate),
+  );
   if (!Number.isFinite(distance) || distance > tolerancePx) return null;
 
   return {
@@ -1988,7 +2274,12 @@ const applyGeometryVertexSnaps = (
   let changed = false;
 
   vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
-    const snapResult = getClosestSnapCoordinateFromSource(source, map, candidate.coordinate, tolerancePx);
+    const snapResult = getClosestSnapCoordinateFromSource(
+      source,
+      map,
+      candidate.coordinate,
+      tolerancePx,
+    );
     if (!snapResult) return;
 
     const currentKey = buildVertexCoordinateKey(candidate.coordinate);
@@ -2009,13 +2300,23 @@ const applyGeometryMoveSnap = (
   anchorCoordinate?: number[] | null,
   tolerancePx = 18,
 ) => {
-  if (!geometry || !source || !map || typeof geometry.translate !== "function") return false;
+  if (!geometry || !source || !map || typeof geometry.translate !== "function")
+    return false;
 
   if (Array.isArray(anchorCoordinate)) {
-    const snapResult = getClosestSnapCoordinateFromSource(source, map, anchorCoordinate, tolerancePx);
+    const snapResult = getClosestSnapCoordinateFromSource(
+      source,
+      map,
+      anchorCoordinate,
+      tolerancePx,
+    );
     if (snapResult) {
-      const deltaX = Number(snapResult.coordinate[0] ?? 0) - Number(anchorCoordinate[0] ?? 0);
-      const deltaY = Number(snapResult.coordinate[1] ?? 0) - Number(anchorCoordinate[1] ?? 0);
+      const deltaX =
+        Number(snapResult.coordinate[0] ?? 0) -
+        Number(anchorCoordinate[0] ?? 0);
+      const deltaY =
+        Number(snapResult.coordinate[1] ?? 0) -
+        Number(anchorCoordinate[1] ?? 0);
       if (deltaX !== 0 || deltaY !== 0) {
         geometry.translate(deltaX, deltaY);
         return true;
@@ -2034,7 +2335,12 @@ const applyGeometryMoveSnap = (
   let bestCandidate: GeometryMoveSnapCandidate | null = null;
 
   vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
-    const snapResult = getClosestSnapCoordinateFromSource(source, map, candidate.coordinate, tolerancePx);
+    const snapResult = getClosestSnapCoordinateFromSource(
+      source,
+      map,
+      candidate.coordinate,
+      tolerancePx,
+    );
     if (!snapResult) return;
 
     if (!bestCandidate || snapResult.distance < bestCandidate.distance) {
@@ -2049,8 +2355,12 @@ const applyGeometryMoveSnap = (
   if (!bestCandidate) return false;
   const resolvedBestCandidate = bestCandidate as GeometryMoveSnapCandidate;
 
-  const deltaX = Number(resolvedBestCandidate.snapped[0] ?? 0) - Number(resolvedBestCandidate.original[0] ?? 0);
-  const deltaY = Number(resolvedBestCandidate.snapped[1] ?? 0) - Number(resolvedBestCandidate.original[1] ?? 0);
+  const deltaX =
+    Number(resolvedBestCandidate.snapped[0] ?? 0) -
+    Number(resolvedBestCandidate.original[0] ?? 0);
+  const deltaY =
+    Number(resolvedBestCandidate.snapped[1] ?? 0) -
+    Number(resolvedBestCandidate.original[1] ?? 0);
   if (deltaX === 0 && deltaY === 0) return false;
 
   geometry.translate(deltaX, deltaY);
@@ -2071,7 +2381,11 @@ const getClosestGeometryVertexCoordinate = (
   let minimumDistance = Number.POSITIVE_INFINITY;
 
   vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
-    const distance = getSquaredPixelDistance(map, coordinate, candidate.coordinate);
+    const distance = getSquaredPixelDistance(
+      map,
+      coordinate,
+      candidate.coordinate,
+    );
     if (distance < minimumDistance) {
       minimumDistance = distance;
       bestCandidate = candidate;
@@ -2095,7 +2409,11 @@ const getClosestGeometryVertexMeta = (
   let minimumDistance = Number.POSITIVE_INFINITY;
 
   vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
-    const distance = getSquaredPixelDistance(map, coordinate, candidate.coordinate);
+    const distance = getSquaredPixelDistance(
+      map,
+      coordinate,
+      candidate.coordinate,
+    );
     if (distance < minimumDistance) {
       minimumDistance = distance;
       bestCandidate = candidate;
@@ -2118,15 +2436,25 @@ const getGeometryVertexCoordinateByMeta = (
   }
 
   if (geometryType === "MultiLineString") {
-    return geometry.getCoordinates?.()?.[meta.partIndex ?? 0]?.[meta.coordIndex] ?? null;
+    return (
+      geometry.getCoordinates?.()?.[meta.partIndex ?? 0]?.[meta.coordIndex] ??
+      null
+    );
   }
 
   if (geometryType === "Polygon") {
-    return geometry.getCoordinates?.()?.[meta.ringIndex ?? 0]?.[meta.coordIndex] ?? null;
+    return (
+      geometry.getCoordinates?.()?.[meta.ringIndex ?? 0]?.[meta.coordIndex] ??
+      null
+    );
   }
 
   if (geometryType === "MultiPolygon") {
-    return geometry.getCoordinates?.()?.[meta.polygonIndex ?? 0]?.[meta.ringIndex ?? 0]?.[meta.coordIndex] ?? null;
+    return (
+      geometry.getCoordinates?.()?.[meta.polygonIndex ?? 0]?.[
+        meta.ringIndex ?? 0
+      ]?.[meta.coordIndex] ?? null
+    );
   }
 
   return null;
@@ -2135,7 +2463,12 @@ const getGeometryVertexCoordinateByMeta = (
 const isTypingElement = (target: EventTarget | null) => {
   if (!(target instanceof HTMLElement)) return false;
   const tagName = target.tagName.toLowerCase();
-  return tagName === "input" || tagName === "textarea" || tagName === "select" || target.isContentEditable;
+  return (
+    tagName === "input" ||
+    tagName === "textarea" ||
+    tagName === "select" ||
+    target.isContentEditable
+  );
 };
 
 // 관종별 원본 레이어 색을 유하방향 선/화살표에 재사용할 때 투명도만 조정한다.
@@ -2154,9 +2487,13 @@ const withAlpha = (color: string | null | undefined, alpha: number) => {
   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 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);
@@ -2188,8 +2525,11 @@ const getRepresentativeLineCoordinates = (geometry: any): number[][] => {
 
   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 coordinates.reduce(
+      (longest: number[][], current: number[][]) =>
+        estimateLineLength(current) > estimateLineLength(longest)
+          ? current
+          : longest,
       [],
     );
   }
@@ -2222,13 +2562,17 @@ const getArrowPlacementAtHalfLength = (coordinates: number[][]) => {
 
     const [previousX = 0, previousY = 0] = previous;
     const [currentX = 0, currentY = 0] = current;
-    const segmentLength = Math.hypot(currentX - previousX, currentY - previousY);
+    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;
+      const ratio =
+        segmentLength === 0 ? 0 : (targetLength - accumulated) / segmentLength;
       return {
         coordinate: [
           previousX + (currentX - previousX) * ratio,
@@ -2246,9 +2590,15 @@ const getArrowPlacementAtHalfLength = (coordinates: number[][]) => {
 };
 
 // SVG 없이 Canvas renderer로 짧은 꼬리선과 화살촉을 직접 그려 방향성을 분명하게 만든다.
-const createFlowDirectionArrowRenderer = (color: string, angle: number, scale: number) => {
+const createFlowDirectionArrowRenderer = (
+  color: string,
+  angle: number,
+  scale: number,
+) => {
   return (coordinates: any, state: any) => {
-    const pixel = Array.isArray(coordinates?.[0]) ? coordinates[0] : coordinates;
+    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;
@@ -2262,7 +2612,8 @@ const createFlowDirectionArrowRenderer = (color: string, angle: number, scale: n
     context.save();
     context.translate(x, y);
     const viewRotation = Number(state?.rotation ?? 0);
-    const screenAngle = (Number.isFinite(viewRotation) ? viewRotation : 0) - angle;
+    const screenAngle =
+      (Number.isFinite(viewRotation) ? viewRotation : 0) - angle;
 
     context.rotate(screenAngle);
     context.lineCap = "round";
@@ -2309,22 +2660,34 @@ const createFlowDirectionStyle = (
 ) => {
   const confidence = String(
     feature.get("directionConfidence") ??
-    feature.get("direction_confidence") ??
-    "",
+      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 usageCode = String(
+    feature.get("usgCd") ?? feature.get("usg_cd") ?? "",
+  ).trim();
   const usageStyle = usageStyleMap[usageCode];
   const baseColor = usageStyle?.color ?? FLOW_DIRECTION_DEFAULT_COLOR;
-  const isNetworkCorrected = String(
-    feature.get("networkCorrectionYn") ??
-    feature.get("network_correction_yn") ??
-    "",
-  ).toUpperCase() === "Y";
+  const isNetworkCorrected =
+    String(
+      feature.get("networkCorrectionYn") ??
+        feature.get("network_correction_yn") ??
+        "",
+    ).toUpperCase() === "Y";
 
-  const styleByConfidence: Record<string, { color: string; lineColor: string; scale: number; width: number; lineDash?: number[] }> = {
+  const styleByConfidence: Record<
+    string,
+    {
+      color: string;
+      lineColor: string;
+      scale: number;
+      width: number;
+      lineDash?: number[];
+    }
+  > = {
     HIGH: {
       color: baseColor,
       lineColor: usageStyle?.lineColor ?? withAlpha(baseColor, 0.42),
@@ -2352,7 +2715,7 @@ const createFlowDirectionStyle = (
         width: 2,
         lineDash: [8, 4],
       }
-    : styleByConfidence[confidence] ?? styleByConfidence.LOW!;
+    : (styleByConfidence[confidence] ?? styleByConfidence.LOW!);
   const styles = [
     new Style({
       stroke: new Stroke({
@@ -2369,7 +2732,11 @@ const createFlowDirectionStyle = (
     styles.push(
       new Style({
         geometry: new Point(arrowPlacement.coordinate),
-        renderer: createFlowDirectionArrowRenderer(style.color, arrowPlacement.angle, style.scale),
+        renderer: createFlowDirectionArrowRenderer(
+          style.color,
+          arrowPlacement.angle,
+          style.scale,
+        ),
       }),
     );
   }
@@ -2412,7 +2779,10 @@ const isLayerVisibleAtZoom = (layerInfo: any, zoom: number) => {
 };
 
 // 현재 체크되어 화면에 보이는 관로 레이어의 관종 코드와 선 색상을 유하방향 조회/스타일 기준으로 변환한다.
-const extractCheckedPipeUsageStyles = (checkedNodesData: any[], zoom: number) => {
+const extractCheckedPipeUsageStyles = (
+  checkedNodesData: any[],
+  zoom: number,
+) => {
   const usageStyleMap: Record<string, FlowDirectionUsageStyle> = {};
 
   checkedNodesData.forEach((node) => {
@@ -2424,7 +2794,9 @@ const extractCheckedPipeUsageStyles = (checkedNodesData: any[], zoom: number) =>
     const usageCodes = extractUsageCodesFromLayerInfo(data);
     if (usageCodes.length === 0) return;
 
-    const layerColor = String(data.lnColor ?? data.lineColor ?? FLOW_DIRECTION_DEFAULT_COLOR).trim();
+    const layerColor = String(
+      data.lnColor ?? data.lineColor ?? FLOW_DIRECTION_DEFAULT_COLOR,
+    ).trim();
     usageCodes.forEach((code) => {
       usageStyleMap[code] = {
         color: layerColor,
@@ -2513,16 +2885,25 @@ const appendSinkholeControlNode = (data: any[]) => {
   const existingRoot = data.find((item) => {
     const nodeId = String(item?.lyrSn ?? item?.id ?? "");
     const layerName = String(item?.lyrNm ?? item?.name ?? "").trim();
-    const layerTypeName = String(item?.lyrTyNm ?? item?.lyrTypeNm ?? item?.lyr_type_nm ?? "").trim();
-    return nodeId === SINKHOLE_CONTROL_NODE_ID || layerName === SINKHOLE_LAYER_NAME || layerTypeName === SINKHOLE_LAYER_TYPE;
+    const layerTypeName = String(
+      item?.lyrTyNm ?? item?.lyrTypeNm ?? item?.lyr_type_nm ?? "",
+    ).trim();
+    return (
+      nodeId === SINKHOLE_CONTROL_NODE_ID ||
+      layerName === SINKHOLE_LAYER_NAME ||
+      layerTypeName === SINKHOLE_LAYER_TYPE
+    );
   });
 
-  const existingRootId = existingRoot?.lyrSn ?? existingRoot?.id ?? SINKHOLE_CONTROL_NODE_ID;
+  const existingRootId =
+    existingRoot?.lyrSn ?? existingRoot?.id ?? SINKHOLE_CONTROL_NODE_ID;
   const filtered = data.filter((item) => {
     const nodeId = String(item?.lyrSn ?? item?.id ?? "");
     const upperId = String(item?.upperLyrSn ?? item?.upId ?? "");
     const layerName = String(item?.lyrNm ?? item?.name ?? "").trim();
-    const layerTypeName = String(item?.lyrTyNm ?? item?.lyrTypeNm ?? item?.lyr_type_nm ?? "").trim();
+    const layerTypeName = String(
+      item?.lyrTyNm ?? item?.lyrTypeNm ?? item?.lyr_type_nm ?? "",
+    ).trim();
 
     if (nodeId === String(existingRootId)) return false;
     if (upperId === String(existingRootId)) return false;
@@ -2583,6 +2964,7 @@ const appendSinkholeControlNode = (data: any[]) => {
 const Map = () => {
   const searchParams = useSearchParams();
   const pathname = usePathname();
+  const alert = useAlertStore((state) => state.setMessage);
   const exmnMapEntryContext = useMemo(
     () => buildExmnMapEntryContext(searchParams),
     [searchParams],
@@ -2590,10 +2972,14 @@ const Map = () => {
   const initialAnalysisPopupKey = useMemo(() => {
     const popupKey = searchParams.get("analysisPopupKey");
     if (!popupKey || !isWindowPopupKey(popupKey)) return null;
-    if (popupKey !== "inftwtResultPopup" && popupKey !== "rdiiResultPopup") return null;
+    if (popupKey !== "inftwtResultPopup" && popupKey !== "rdiiResultPopup")
+      return null;
     return popupKey;
   }, [searchParams]);
-  const flowDirectionMode = useMemo(() => getFlowDirectionModeByPathname(pathname), [pathname]);
+  const flowDirectionMode = useMemo(
+    () => getFlowDirectionModeByPathname(pathname),
+    [pathname],
+  );
   const { isSearchModalOpen, setIsSearchModalOpen } = useSearchModalStore();
   const userInfo = useUserStore((state) => state.userInfo);
   const sinkholeScope = useMemo(() => buildSinkholeScope(userInfo), [userInfo]);
@@ -2605,7 +2991,9 @@ const Map = () => {
   const [featureData, setFeatureData] = useState<any>(null); // 선택된 피쳐 데이터
   // 오른쪽 상세 패널에 열린 상세 컴포넌트를 책갈피 탭 단위로 보관한다.
   const [rightPanelTabs, setRightPanelTabs] = useState<RightPanelTab[]>([]);
-  const [activeRightPanelTabId, setActiveRightPanelTabId] = useState<string | null>(null);
+  const [activeRightPanelTabId, setActiveRightPanelTabId] = useState<
+    string | null
+  >(null);
   // 단일 관로 탭이 어느 지반침하 상세에서 열렸는지 비동기 피처 조회 사이에 보관한다.
   const pipeParentTabIdRef = useRef<string | null>(null);
   const [isWaterDepthLayerActive, setIsWaterDepthLayerActive] = useState(false); // 침수심 레이어 활성 여부
@@ -2621,29 +3009,49 @@ const Map = () => {
     ...EMPTY_EXMN_MAP_FILTERS,
     bizCycl: exmnMapEntryContext.bizCycl,
   }));
-  const [exmnMnhlFilters, setExmnMnhlFilters] = useState<ExmnMapFilters>(() => ({
-    ...EMPTY_EXMN_MAP_FILTERS,
-    bizCycl: exmnMapEntryContext.bizCycl,
-  }));
-  const [swagePrcsFcltLayerMode, setSwagePrcsFcltLayerMode] = useState<SwagePrcsFcltLayerMode>("all");
-  const [activeLayerSettingOrder, setActiveLayerSettingOrder] = useState<string[]>([]);
+  const [exmnMnhlFilters, setExmnMnhlFilters] = useState<ExmnMapFilters>(
+    () => ({
+      ...EMPTY_EXMN_MAP_FILTERS,
+      bizCycl: exmnMapEntryContext.bizCycl,
+    }),
+  );
+  const [swagePrcsFcltLayerMode, setSwagePrcsFcltLayerMode] =
+    useState<SwagePrcsFcltLayerMode>("all");
+  const [activeLayerSettingOrder, setActiveLayerSettingOrder] = useState<
+    string[]
+  >([]);
   const [draftAgedPipeFilters, setDraftAgedPipeFilters] =
     useState<AgedPipeFilters>(AGED_PIPE_DEFAULT_FILTERS);
   const [appliedAgedPipeFilters, setAppliedAgedPipeFilters] =
     useState<AgedPipeFilters>(AGED_PIPE_DEFAULT_FILTERS);
-  const [sinkholeYearRange, setSinkholeYearRange] = useState<SinkholeYearRange>(() =>
-    buildSinkholeDefaultYearRange(),
+  const [sinkholeYearRange, setSinkholeYearRange] = useState<SinkholeYearRange>(
+    () => buildSinkholeDefaultYearRange(),
   );
-  const [appliedSinkholeFilters, setAppliedSinkholeFilters] = useState<SinkholeFilters>(() =>
-    normalizeSinkholeFilters(buildSinkholeFiltersFromYearRange(buildSinkholeDefaultYearRange(), sinkholeScope), sinkholeScope),
+  const [appliedSinkholeFilters, setAppliedSinkholeFilters] =
+    useState<SinkholeFilters>(() =>
+      normalizeSinkholeFilters(
+        buildSinkholeFiltersFromYearRange(
+          buildSinkholeDefaultYearRange(),
+          sinkholeScope,
+        ),
+        sinkholeScope,
+      ),
+    );
+  const [isSinkholePopupFilterActive, setIsSinkholePopupFilterActive] =
+    useState(false);
+  const [sinkholeRadiusMeters, setSinkholeRadiusMeters] = useState(
+    SINKHOLE_DEFAULT_RADIUS,
   );
-  const [isSinkholePopupFilterActive, setIsSinkholePopupFilterActive] = useState(false);
-  const [sinkholeRadiusMeters, setSinkholeRadiusMeters] = useState(SINKHOLE_DEFAULT_RADIUS);
-  const [selectedFldngHstryDetail, setSelectedFldngHstryDetail] = useState<FldngHstryItem | null>(null);
-  const [fldngHstryDetailPopupPosition, setFldngHstryDetailPopupPosition] = useState<{ left: number; top: number } | null>(null);
-  const [selectedSinkholeDetail, setSelectedSinkholeDetail] = useState<SinkholeDetail | null>(null);
-  const [selectedSinkholeNearbyPipes, setSelectedSinkholeNearbyPipes] = useState<SinkholeNearbyPipe[]>([]);
-  const [lastSinkholeSyncSummary, setLastSinkholeSyncSummary] = useState<SinkholeSyncSummary | null>(null);
+  const [selectedFldngHstryDetail, setSelectedFldngHstryDetail] =
+    useState<FldngHstryItem | null>(null);
+  const [fldngHstryDetailPopupPosition, setFldngHstryDetailPopupPosition] =
+    useState<{ left: number; top: number } | null>(null);
+  const [selectedSinkholeDetail, setSelectedSinkholeDetail] =
+    useState<SinkholeDetail | null>(null);
+  const [selectedSinkholeNearbyPipes, setSelectedSinkholeNearbyPipes] =
+    useState<SinkholeNearbyPipe[]>([]);
+  const [lastSinkholeSyncSummary, setLastSinkholeSyncSummary] =
+    useState<SinkholeSyncSummary | null>(null);
   const [sinkholeSelectionVersion, setSinkholeSelectionVersion] = useState(0);
   const [isAgedPipeListOpen, setIsAgedPipeListOpen] = useState(false);
   const [isAgedPipeListMinimized, setIsAgedPipeListMinimized] = useState(false);
@@ -2651,13 +3059,15 @@ const Map = () => {
   const [agedPipeTotalCount, setAgedPipeTotalCount] = useState(0);
   const [agedPipeCurrentPage, setAgedPipeCurrentPage] = useState(1);
   const [isAgedPipeListLoading, setIsAgedPipeListLoading] = useState(false);
-  const [agedPipeDownloadProgressText, setAgedPipeDownloadProgressText] = useState("");
+  const [agedPipeDownloadProgressText, setAgedPipeDownloadProgressText] =
+    useState("");
   const [isGisEditSaving, setIsGisEditSaving] = useState(false);
   const { ctpv, sgg } = useStore();
   // 조사시설 관로번호는 전국에서 중복될 수 있어 시군구코드 앞 5자리와 함께 GIS 원천을 조회한다.
   const exmnMapRegionCodes = useMemo(() => {
     const ctpvOption = ctpv.find(
-      (option) => String(option.text ?? "").trim() === exmnMapEntryContext.ctpvNm,
+      (option) =>
+        String(option.text ?? "").trim() === exmnMapEntryContext.ctpvNm,
     );
     const ctpvCd = String(ctpvOption?.val ?? "0").trim() || "0";
     const sggOption = sgg.find((option) => {
@@ -2672,12 +3082,7 @@ const Map = () => {
       ctpvCd,
       sggCd: String(sggOption?.val ?? "0").trim() || "0",
     };
-  }, [
-    ctpv,
-    exmnMapEntryContext.ctpvNm,
-    exmnMapEntryContext.sggNm,
-    sgg,
-  ]);
+  }, [ctpv, exmnMapEntryContext.ctpvNm, exmnMapEntryContext.sggNm, sgg]);
   // GIS 편집은 map/page.tsx 내부 기존 지도 상태를 재사용하되, 세부 상태와 payload 조립은 별도 hook으로 분리한다.
   const gisEdit = useGisEdit(treeData);
   // 침입수 분석결과 popup과 지도 highlight 흐름은 별도 hook으로 묶어 기존 지도 로직과 충돌을 줄인다.
@@ -2698,20 +3103,31 @@ const Map = () => {
   const sinkholePopupWindowRef = useRef<Window | null>(null);
   // 침수발생이력 overlay layer는 지도 드래그 중에도 유지돼야 하므로 React state 대신 ref로 보관한다.
   const fldngHstryAreaLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
-  const fldngHstryDepthLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
+  const fldngHstryDepthLayerRef = useRef<VectorLayer<VectorSource> | null>(
+    null,
+  );
   const sinkholePopupCloseWatcherRef = useRef<number | null>(null);
   const pipeAnalysisPopupWindowRef = useRef<Window | null>(null);
   const gisEditSessionPopupWindowRef = useRef<Window | null>(null);
   const gisEditSessionPopupCloseWatcherRef = useRef<number | null>(null);
-  const [gisEditSessionView, setGisEditSessionView] = useState<"inline" | "popup">("inline");
-  const [gisEditDetailChangeId, setGisEditDetailChangeId] = useState<string | null>(null);
+  const [gisEditSessionView, setGisEditSessionView] = useState<
+    "inline" | "popup"
+  >("inline");
+  const [gisEditDetailChangeId, setGisEditDetailChangeId] = useState<
+    string | null
+  >(null);
   const gisEditDetailChangeRef = useRef<any>(null);
   const gisEditDetailFeatureDataRef = useRef<any>(null);
   const gisEditIsEditModeRef = useRef(false);
   // vertex Delete는 현재 선택된 주황색 실꼭지점 묶음을 ref로 기억해 키보드 이벤트에서 즉시 사용한다.
   const gisEditSelectedVertexHandleKeyRef = useRef("");
-  const gisEditSelectedVertexMetaListRef = useRef<VertexHandleMeta[] | null>(null);
-  const gisEditMoveGripMetaRef = useRef<{ changeId: string; meta: VertexHandleMeta | null } | null>(null);
+  const gisEditSelectedVertexMetaListRef = useRef<VertexHandleMeta[] | null>(
+    null,
+  );
+  const gisEditMoveGripMetaRef = useRef<{
+    changeId: string;
+    meta: VertexHandleMeta | null;
+  } | null>(null);
   const waterRiskPopupWindowRef = useRef<Window | null>(null);
   const waterRiskPopupCloseWatcherRef = useRef<number | null>(null);
   const sinkholeLayerRef = useRef<VectorLayer<any> | null>(null);
@@ -2732,9 +3148,12 @@ const Map = () => {
   // 유하방향 레이어 체크 여부를 React 렌더링 흐름에 반영하기 위한 state이다.
   const [isFlowDirectionChecked, setIsFlowDirectionChecked] = useState(false);
   // 체크된 유하방향 트리 노드의 레이어 설정을 보관해 API 조회와 vector layer 스타일에 사용한다.
-  const [flowDirectionLayerInfo, setFlowDirectionLayerInfo] = useState<any | null>(null);
+  const [flowDirectionLayerInfo, setFlowDirectionLayerInfo] = useState<
+    any | null
+  >(null);
   // 관종 레이어 체크 변경도 유하방향 재조회 조건이므로 별도 버전 state로 effect를 다시 실행한다.
-  const [flowDirectionSelectionVersion, setFlowDirectionSelectionVersion] = useState(0);
+  const [flowDirectionSelectionVersion, setFlowDirectionSelectionVersion] =
+    useState(0);
   // 줌레벨 컨트롤에 현재 체크된 특수 레이어의 최소 표출 기준을 안내한다.
   const zoomGuide = useMemo(() => {
     const flowDirectionGuideZoom = flowDirectionLayerInfo
@@ -2779,7 +3198,9 @@ const Map = () => {
   // 관종 체크 변경 시 다른 관종 유하방향을 유지하기 위해 현재 source에 남겨둘 관종 코드를 별도로 추적한다.
   const flowDirectionVisibleUsageCodesRef = useRef<Set<string>>(new Set());
   // 관종 체크 변경으로 새로 켜진 usgCd만 다음 조회 대상으로 넘겨 기존 관종 재요청을 막는다.
-  const flowDirectionSelectionRequestUsageCodesRef = useRef<string[] | null>(null);
+  const flowDirectionSelectionRequestUsageCodesRef = useRef<string[] | null>(
+    null,
+  );
   // 체크 해제나 재조회 중 늦게 도착한 이전 API 응답이 레이어를 다시 그리지 못하도록 요청 순번을 관리한다.
   const flowDirectionRequestSeqRef = useRef(0);
   // 지도 이동이 연속으로 발생하면 이전 유하방향 요청을 중단해 늦은 응답과 불필요한 네트워크 대기를 줄인다.
@@ -2789,10 +3210,16 @@ const Map = () => {
   const gisEditPreviewLayerRef = useRef<any | null>(null);
   const gisEditPreviewSourceRef = useRef<VectorSource | null>(null);
   const gisEditPipeSnapSourceRef = useRef<VectorSource | null>(null);
-  const gisEditPipeSnapAbortControllerRef = useRef<AbortController | null>(null);
+  const gisEditPipeSnapAbortControllerRef = useRef<AbortController | null>(
+    null,
+  );
   const gisEditPipeSnapRequestSeqRef = useRef(0);
-  const gisEditOriginalLayerFilterRef = useRef<globalThis.Map<any, string | null>>(new globalThis.Map());
-  const gisEditOriginalFeatureStyleRef = useRef<globalThis.Map<any, any>>(new globalThis.Map());
+  const gisEditOriginalLayerFilterRef = useRef<
+    globalThis.Map<any, string | null>
+  >(new globalThis.Map());
+  const gisEditOriginalFeatureStyleRef = useRef<globalThis.Map<any, any>>(
+    new globalThis.Map(),
+  );
   const gisEditVertexLayerRef = useRef<VectorLayer<any> | null>(null);
   const gisEditVertexSourceRef = useRef<VectorSource | null>(null);
   const waterRiskAreaLayerRef = useRef<VectorLayer<any> | null>(null);
@@ -2807,48 +3234,60 @@ const Map = () => {
   const gisEditModifyRef = useRef<any | null>(null);
   // 스냅 interaction은 MOVE/VERTEX_EDIT 진입마다 다시 붙이므로 별도 ref로 정리한다.
   const gisEditSnapRef = useRef<any | null>(null);
-  const [waterRiskSession, setWaterRiskSession] = useState<WaterRiskSessionSnapshot>(
-    EMPTY_WATER_RISK_SESSION_SNAPSHOT,
-  );
+  const [waterRiskSession, setWaterRiskSession] =
+    useState<WaterRiskSessionSnapshot>(EMPTY_WATER_RISK_SESSION_SNAPSHOT);
   // 팝업에서 실제 API로 조회한 결과 행과 GeoJSON을 지도·정보카드의 단일 원본으로 보관한다.
   const [selectedWaterRiskApiResult, setSelectedWaterRiskApiResult] =
     useState<WaterRiskResultRow | null>(null);
   const [selectedWaterRiskMapView, setSelectedWaterRiskMapView] =
     useState<WaterRiskMapView | null>(null);
-  const [waterRiskInfoAnchor, setWaterRiskInfoAnchor] = useState<[number, number] | null>(null);
-  const [waterRiskInfoCardStyle, setWaterRiskInfoCardStyle] = useState<Record<string, number> | null>(null);
+  const [waterRiskInfoAnchor, setWaterRiskInfoAnchor] = useState<
+    [number, number] | null
+  >(null);
+  const [waterRiskInfoCardStyle, setWaterRiskInfoCardStyle] = useState<Record<
+    string,
+    number
+  > | null>(null);
   const gisEditVisibleSessionChanges = useMemo(
     () => gisEdit.changes.filter(isVisibleGisEditSessionChange),
     [gisEdit.changes],
   );
   const shouldShowGisEditSession = gisEdit.isEditMode;
-  const isGisEditSessionInlineVisible = shouldShowGisEditSession && gisEditSessionView === "inline";
-  const gisEditSessionSnapshot = useMemo<GisEditSessionSnapshot>(() => ({
-    isEditMode: gisEdit.isEditMode,
-    selectedLayerName: gisEdit.selectedLayer?.layerName ?? "",
-    activeTool: gisEdit.activeTool,
-    isSnapEnabled: gisEdit.isSnapEnabled,
-    changes: gisEditVisibleSessionChanges,
-    lastSavedPayload: gisEdit.lastSavedPayload,
-    canUndo: gisEdit.canUndo,
-    focusedChangeId: gisEdit.focusedChangeId,
-  }), [
-    gisEdit.activeTool,
-    gisEdit.canUndo,
-    gisEdit.focusedChangeId,
-    gisEdit.isEditMode,
-    gisEdit.isSnapEnabled,
-    gisEdit.lastSavedPayload,
-    gisEdit.selectedLayer,
-    gisEditVisibleSessionChanges,
-  ]);
+  const isGisEditSessionInlineVisible =
+    shouldShowGisEditSession && gisEditSessionView === "inline";
+  const gisEditSessionSnapshot = useMemo<GisEditSessionSnapshot>(
+    () => ({
+      isEditMode: gisEdit.isEditMode,
+      selectedLayerName: gisEdit.selectedLayer?.layerName ?? "",
+      activeTool: gisEdit.activeTool,
+      isSnapEnabled: gisEdit.isSnapEnabled,
+      changes: gisEditVisibleSessionChanges,
+      lastSavedPayload: gisEdit.lastSavedPayload,
+      canUndo: gisEdit.canUndo,
+      focusedChangeId: gisEdit.focusedChangeId,
+    }),
+    [
+      gisEdit.activeTool,
+      gisEdit.canUndo,
+      gisEdit.focusedChangeId,
+      gisEdit.isEditMode,
+      gisEdit.isSnapEnabled,
+      gisEdit.lastSavedPayload,
+      gisEdit.selectedLayer,
+      gisEditVisibleSessionChanges,
+    ],
+  );
   const gisEditDetailChange = useMemo(
-    () => gisEdit.changes.find((change) => change.changeId === gisEditDetailChangeId) ?? null,
+    () =>
+      gisEdit.changes.find(
+        (change) => change.changeId === gisEditDetailChangeId,
+      ) ?? null,
     [gisEdit.changes, gisEditDetailChangeId],
   );
   const gisEditDetailFeatureData = useMemo(() => {
     if (!gisEditDetailChange) return null;
-    if (featureData && !isGisEditPreviewFeatureData(featureData)) return featureData;
+    if (featureData && !isGisEditPreviewFeatureData(featureData))
+      return featureData;
 
     if (gisEditDetailChange.layerId !== "tb_ms_swage_ppl") return null;
 
@@ -2914,12 +3353,15 @@ const Map = () => {
     setGisEditSessionView("inline");
   }, []);
 
-  useEffect(() => () => {
-    if (gisEditSessionPopupCloseWatcherRef.current) {
-      window.clearInterval(gisEditSessionPopupCloseWatcherRef.current);
-      gisEditSessionPopupCloseWatcherRef.current = null;
-    }
-  }, []);
+  useEffect(
+    () => () => {
+      if (gisEditSessionPopupCloseWatcherRef.current) {
+        window.clearInterval(gisEditSessionPopupCloseWatcherRef.current);
+        gisEditSessionPopupCloseWatcherRef.current = null;
+      }
+    },
+    [],
+  );
 
   const openGisEditPipeDetail = useCallback((changeId: string | null) => {
     if (!changeId) {
@@ -2929,49 +3371,64 @@ const Map = () => {
     setGisEditDetailChangeId(changeId);
   }, []);
 
-  const focusGisEditChangeOnMap = useCallback((changeId: string) => {
-    const map = gisMaps.current;
-    const change = gisEdit.changes.find((item) => item.changeId === changeId);
-    const geometryObject = change?.editType === "DELETE" ? change?.beforeGeometry : change?.afterGeometry;
-    if (!map || !geometryObject) return;
+  const focusGisEditChangeOnMap = useCallback(
+    (changeId: string) => {
+      const map = gisMaps.current;
+      const change = gisEdit.changes.find((item) => item.changeId === changeId);
+      const geometryObject =
+        change?.editType === "DELETE"
+          ? change?.beforeGeometry
+          : change?.afterGeometry;
+      if (!map || !geometryObject) return;
 
-    try {
-      const geometry = new GeoJSON().readGeometry(geometryObject, {
-        dataProjection: FLOW_DIRECTION_SRS,
-        featureProjection: GisApp.TO_PROJ,
-      });
-      const extent = geometry?.getExtent?.();
-      if (
-        !extent ||
-        extent.length < 4 ||
-        extent.some((value: number) => !Number.isFinite(value))
-      ) {
-        return;
+      try {
+        const geometry = new GeoJSON().readGeometry(geometryObject, {
+          dataProjection: FLOW_DIRECTION_SRS,
+          featureProjection: GisApp.TO_PROJ,
+        });
+        const extent = geometry?.getExtent?.();
+        if (
+          !extent ||
+          extent.length < 4 ||
+          extent.some((value: number) => !Number.isFinite(value))
+        ) {
+          return;
+        }
+
+        const view = map.getView?.();
+        const currentZoom = Number(view?.getZoom?.());
+        const maxZoom =
+          Number.isFinite(currentZoom) && currentZoom > 18 ? currentZoom : 18;
+        view?.fit?.(extent, {
+          duration: 350,
+          padding: [80, 420, 80, 80],
+          maxZoom,
+        });
+      } catch (error) {
+        console.warn("GIS edit change focus failed:", error);
       }
-
-      const view = map.getView?.();
-      const currentZoom = Number(view?.getZoom?.());
-      const maxZoom = Number.isFinite(currentZoom) && currentZoom > 18 ? currentZoom : 18;
-      view?.fit?.(extent, {
-        duration: 350,
-        padding: [80, 420, 80, 80],
-        maxZoom,
-      });
-    } catch (error) {
-      console.warn("GIS edit change focus failed:", error);
-    }
-  }, [gisEdit.changes]);
+    },
+    [gisEdit.changes],
+  );
 
   // 인라인 세션과 윈도우 팝업이 동일한 지도 focus/상세 열기 흐름을 공유한다.
-  const handleFocusGisEditSessionChange = useCallback((changeId: string) => {
-    if (!changeId) return;
-    gisEdit.focusChange(changeId);
-    focusGisEditChangeOnMap(changeId);
-    setFeatureData(null);
-    openGisEditPipeDetail(changeId);
-    setIsOpen(true);
-    setIsSearchModalOpen(false);
-  }, [focusGisEditChangeOnMap, gisEdit, openGisEditPipeDetail, setIsSearchModalOpen]);
+  const handleFocusGisEditSessionChange = useCallback(
+    (changeId: string) => {
+      if (!changeId) return;
+      gisEdit.focusChange(changeId);
+      focusGisEditChangeOnMap(changeId);
+      setFeatureData(null);
+      openGisEditPipeDetail(changeId);
+      setIsOpen(true);
+      setIsSearchModalOpen(false);
+    },
+    [
+      focusGisEditChangeOnMap,
+      gisEdit,
+      openGisEditPipeDetail,
+      setIsSearchModalOpen,
+    ],
+  );
 
   const syncWaterRiskPopup = useCallback(() => {
     const popup = waterRiskPopupWindowRef.current;
@@ -2990,7 +3447,9 @@ const Map = () => {
   }, [waterRiskSessionSnapshot]);
 
   const selectedWaterRiskResultRow = useMemo(
-    () => selectedWaterRiskApiResult ?? getWaterRiskResultRow(waterRiskSession.selectedAreaId),
+    () =>
+      selectedWaterRiskApiResult ??
+      getWaterRiskResultRow(waterRiskSession.selectedAreaId),
     [selectedWaterRiskApiResult, waterRiskSession.selectedAreaId],
   );
 
@@ -3002,7 +3461,8 @@ const Map = () => {
     }
 
     const [mapWidth = 0, mapHeight = 0] = map.getSize?.() ?? [];
-    const [pixelX = 0, pixelY = 0] = map.getPixelFromCoordinate?.(waterRiskInfoAnchor) ?? [];
+    const [pixelX = 0, pixelY = 0] =
+      map.getPixelFromCoordinate?.(waterRiskInfoAnchor) ?? [];
     const cardWidth = 244;
     const cardHeight = 236;
     const left = pixelX + 22;
@@ -3078,7 +3538,10 @@ const Map = () => {
       if (isSinkholePopupFilterActive) {
         return normalizeSinkholeFilters(currentFilters, sinkholeScope);
       }
-      return normalizeSinkholeFilters(buildSinkholeFiltersFromYearRange(sinkholeYearRange, sinkholeScope), sinkholeScope);
+      return normalizeSinkholeFilters(
+        buildSinkholeFiltersFromYearRange(sinkholeYearRange, sinkholeScope),
+        sinkholeScope,
+      );
     });
   }, [isSinkholePopupFilterActive, sinkholeScope, sinkholeYearRange]);
 
@@ -3108,7 +3571,8 @@ const Map = () => {
       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;
+        if (!layerNm || !fidsRaw || !core?.showMultipleSearchResultsFromGeoJSON)
+          return;
 
         let fids: string[] = [];
         try {
@@ -3127,7 +3591,11 @@ const Map = () => {
           ? data.payload.extent.map(Number)
           : [];
         const map = gisMaps.current;
-        if (extent.length !== 4 || extent.some((value: number) => !Number.isFinite(value)) || !map?.getView) {
+        if (
+          extent.length !== 4 ||
+          extent.some((value: number) => !Number.isFinite(value)) ||
+          !map?.getView
+        ) {
           return;
         }
         map.getView().fit(extent, {
@@ -3138,7 +3606,9 @@ const Map = () => {
         return;
       }
 
-      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SHOW_FLOOD_GROUP) {
+      if (
+        data?.type === WINDOW_POPUP_MESSAGE_TYPE.MAP_SEARCH_SHOW_FLOOD_GROUP
+      ) {
         const extent = Array.isArray(data.payload?.extent)
           ? data.payload.extent.map(Number)
           : [];
@@ -3147,12 +3617,12 @@ const Map = () => {
         const map = gisMaps.current;
         const select = GisApp.Module.select as any;
         if (
-          extent.length !== 4
-          || extent.some((value: number) => !Number.isFinite(value))
-          || !/^\d{5}$/.test(sggCd)
-          || !/^(030|050|080|100)$/.test(frequency)
-          || !map?.getView
-          || !select?.selectFocusedBoundaryFeature
+          extent.length !== 4 ||
+          extent.some((value: number) => !Number.isFinite(value)) ||
+          !/^\d{5}$/.test(sggCd) ||
+          !/^(030|050|080|100)$/.test(frequency) ||
+          !map?.getView ||
+          !select?.selectFocusedBoundaryFeature
         ) {
           return;
         }
@@ -3163,22 +3633,36 @@ const Map = () => {
           const features = source?.getFeatures?.() ?? [];
           features.forEach((feature: any) => {
             const featureSggCd = String(feature.get?.("sgg_cd") ?? "").trim();
-            const featureFrequency = String(feature.get?.("sbmrg_frq_expln") ?? "").trim();
-            if (featureSggCd !== sggCd || featureFrequency !== frequency) return;
-            const featureId = String(feature.getId?.() ?? feature.get?.("fid") ?? "");
+            const featureFrequency = String(
+              feature.get?.("sbmrg_frq_expln") ?? "",
+            ).trim();
+            if (featureSggCd !== sggCd || featureFrequency !== frequency)
+              return;
+            const featureId = String(
+              feature.getId?.() ?? feature.get?.("fid") ?? "",
+            );
             if (featureId && selectedFeatureIds.has(featureId)) return;
             if (featureId) selectedFeatureIds.add(featureId);
             select.selectFocusedBoundaryFeature(feature, true);
           });
         };
 
-        map.getLayers().getArray().forEach((layer: any) => {
-          if (String(layer.get?.("lyrTyNm") ?? "").trim() !== FLOOD_DNGR_MAP_LAYER_TYPE) return;
-          const source = layer.getSource?.();
-          if (!source?.getFeatures) return;
-          selectLoadedGroupFeatures(source);
-          source.once?.("featuresloadend", () => selectLoadedGroupFeatures(source));
-        });
+        map
+          .getLayers()
+          .getArray()
+          .forEach((layer: any) => {
+            if (
+              String(layer.get?.("lyrTyNm") ?? "").trim() !==
+              FLOOD_DNGR_MAP_LAYER_TYPE
+            )
+              return;
+            const source = layer.getSource?.();
+            if (!source?.getFeatures) return;
+            selectLoadedGroupFeatures(source);
+            source.once?.("featuresloadend", () =>
+              selectLoadedGroupFeatures(source),
+            );
+          });
         map.getView().fit(extent, {
           duration: 300,
           padding: [50, 50, 50, 50],
@@ -3194,7 +3678,9 @@ const Map = () => {
           try {
             const parsed = JSON.parse(rawLayerTypeNames);
             if (Array.isArray(parsed) && parsed.length > 0) {
-              layerTypeNames = parsed.map((item) => String(item ?? "").trim()).filter(Boolean);
+              layerTypeNames = parsed
+                .map((item) => String(item ?? "").trim())
+                .filter(Boolean);
             }
           } catch (error) {
             console.error("GIS 업로드 레이어 refresh 메시지 파싱 실패:", error);
@@ -3261,7 +3747,10 @@ const Map = () => {
       return;
     }
 
-    if (gisEditDetailChange.layerId !== "tb_ms_swage_ppl" || gisEditDetailChange.editType === "DELETE") {
+    if (
+      gisEditDetailChange.layerId !== "tb_ms_swage_ppl" ||
+      gisEditDetailChange.editType === "DELETE"
+    ) {
       setGisEditDetailChangeId(null);
     }
   }, [gisEdit.isEditMode, gisEditDetailChange, gisEditDetailChangeId]);
@@ -3269,7 +3758,11 @@ const Map = () => {
   useEffect(() => {
     if (!gisEdit.isEditMode) return;
     syncGisEditSessionPopup();
-  }, [gisEdit.isEditMode, gisEditVisibleSessionChanges.length, syncGisEditSessionPopup]);
+  }, [
+    gisEdit.isEditMode,
+    gisEditVisibleSessionChanges.length,
+    syncGisEditSessionPopup,
+  ]);
 
   useEffect(() => {
     const handleGisEditSessionPopupMessage = (event: MessageEvent) => {
@@ -3281,28 +3774,40 @@ const Map = () => {
         return;
       }
 
-      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_SHOW_INLINE) {
+      if (
+        data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_SHOW_INLINE
+      ) {
         closeGisEditSessionPopup();
         return;
       }
 
-      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_FOCUS_CHANGE) {
+      if (
+        data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_FOCUS_CHANGE
+      ) {
         const changeId = String(data.payload?.changeId ?? "").trim();
         handleFocusGisEditSessionChange(changeId);
         return;
       }
 
-      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_FOCUSED_CHANGE) {
+      if (
+        data?.type ===
+        WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_FOCUSED_CHANGE
+      ) {
         gisEdit.removeFocusedChange();
         return;
       }
 
-      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_LAST_CHANGE) {
+      if (
+        data?.type ===
+        WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_LAST_CHANGE
+      ) {
         gisEdit.removeLastChange();
         return;
       }
 
-      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_CLEAR_CHANGES) {
+      if (
+        data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_CLEAR_CHANGES
+      ) {
         gisEdit.clearChanges();
       }
     };
@@ -3311,11 +3816,18 @@ const Map = () => {
     return () => {
       window.removeEventListener("message", handleGisEditSessionPopupMessage);
     };
-  }, [closeGisEditSessionPopup, gisEdit, handleFocusGisEditSessionChange, syncGisEditSessionPopup]);
+  }, [
+    closeGisEditSessionPopup,
+    gisEdit,
+    handleFocusGisEditSessionChange,
+    syncGisEditSessionPopup,
+  ]);
 
   const fetchData = async () => {
     try {
-      const data = await getRawJson("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK");
+      const data = await getRawJson(
+        "/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK",
+      );
       setTreeData(
         appendExmnResultControlNodes(
           appendAgedPipeControlNode(
@@ -3329,7 +3841,9 @@ const Map = () => {
       setLayerLoadError(null);
     } catch (error) {
       const message =
-        error instanceof Error ? error.message : "레이어 설정 조회 중 알 수 없는 오류가 발생했습니다.";
+        error instanceof Error
+          ? error.message
+          : "레이어 설정 조회 중 알 수 없는 오류가 발생했습니다.";
       console.error("레이어 설정 조회 실패:", error);
       setTreeData([]);
       setLayerLoadError(message);
@@ -3425,122 +3939,126 @@ const Map = () => {
     waterRiskPipeSourceRef.current?.clear();
   }, []);
 
-  const renderWaterRiskSelection = useCallback((
-    areaId: string | null,
-    mapView: WaterRiskMapView | null,
-  ) => {
-    const map = gisMaps.current;
-    if (!map) return;
+  const renderWaterRiskSelection = useCallback(
+    (areaId: string | null, mapView: WaterRiskMapView | null) => {
+      const map = gisMaps.current;
+      if (!map) return;
 
-    const areaSource = ensureWaterRiskAreaLayer();
-    const gridSource = ensureWaterRiskGridLayer();
-    if (!areaSource || !gridSource) return;
+      const areaSource = ensureWaterRiskAreaLayer();
+      const gridSource = ensureWaterRiskGridLayer();
+      if (!areaSource || !gridSource) return;
 
-    areaSource.clear();
-    gridSource.clear();
-    const pipeSource = ensureWaterRiskPipeLayer();
-    pipeSource?.clear();
+      areaSource.clear();
+      gridSource.clear();
+      const pipeSource = ensureWaterRiskPipeLayer();
+      pipeSource?.clear();
 
-    if (!areaId) return;
+      if (!areaId) return;
 
-    if (mapView && mapView.areaId === areaId) {
-      const geoJson = new GeoJSON();
-      const projection = mapView.projection || "EPSG:5179";
-      let focusGeometry: any | null = null;
+      if (mapView && mapView.areaId === areaId) {
+        const geoJson = new GeoJSON();
+        const projection = mapView.projection || "EPSG:5179";
+        let focusGeometry: any | null = null;
 
-      if (mapView.areaGeometry) {
-        const geometry = geoJson.readGeometry(mapView.areaGeometry as any, {
-          dataProjection: projection,
-          featureProjection: "EPSG:5179",
+        if (mapView.areaGeometry) {
+          const geometry = geoJson.readGeometry(mapView.areaGeometry as any, {
+            dataProjection: projection,
+            featureProjection: "EPSG:5179",
+          });
+          const areaFeature = new Feature({
+            geometry,
+            areaId: mapView.areaId,
+            areaName: mapView.areaName,
+            riskStatus: mapView.riskStatus,
+          });
+          areaFeature.setStyle(createWaterRiskAreaStyle(areaFeature));
+          areaSource.addFeature(areaFeature);
+          focusGeometry = geometry;
+        }
+
+        mapView.pipes.forEach((pipe) => {
+          if (!pipeSource || !pipe.geometry) return;
+          const geometry = geoJson.readGeometry(pipe.geometry as any, {
+            dataProjection: projection,
+            featureProjection: "EPSG:5179",
+          });
+          const pipeFeature = new Feature({
+            geometry,
+            pipeId: pipe.pipeId,
+            displayLabel: pipe.displayLabel || pipe.pipeId,
+          });
+          pipeFeature.setStyle(createWaterRiskPipeStyle(pipeFeature));
+          pipeSource.addFeature(pipeFeature);
+          if (!focusGeometry) focusGeometry = geometry;
         });
-        const areaFeature = new Feature({
-          geometry,
-          areaId: mapView.areaId,
-          areaName: mapView.areaName,
-          riskStatus: mapView.riskStatus,
+
+        if (!focusGeometry) return;
+        const extent = focusGeometry.getExtent();
+        const [, minY = 0, maxX = 0, maxY = 0] = extent;
+        setWaterRiskInfoAnchor([maxX, (minY + maxY) / 2]);
+        map.getView().fit(extent, {
+          duration: 300,
+          padding: [120, 120, 120, 120],
+          maxZoom: 15,
+          constrainResolution: true,
+          nearest: true,
         });
-        areaFeature.setStyle(createWaterRiskAreaStyle(areaFeature));
-        areaSource.addFeature(areaFeature);
-        focusGeometry = geometry;
+        return;
       }
 
-      mapView.pipes.forEach((pipe) => {
-        if (!pipeSource || !pipe.geometry) return;
-        const geometry = geoJson.readGeometry(pipe.geometry as any, {
-          dataProjection: projection,
-          featureProjection: "EPSG:5179",
+      const areaData = getWaterRiskAreaMapData(areaId);
+      const resultRow = getWaterRiskResultRow(areaId);
+      if (!areaData || !resultRow) return;
+
+      const areaFeature = new Feature({
+        geometry: new Polygon(areaData.polygonCoordinates),
+        areaId: areaData.areaId,
+        areaName: areaData.areaName,
+        riskStatus: resultRow.riskStatus,
+      });
+      areaFeature.setStyle(createWaterRiskAreaStyle(areaFeature));
+      areaSource.addFeature(areaFeature);
+
+      areaData.gridCells.forEach((cell) => {
+        const cellFeature = new Feature({
+          geometry: new Polygon(cell.polygonCoordinates),
+          gridId: cell.gridId,
+          rainQty: cell.rainQty,
+          colorLevel: cell.colorLevel,
         });
+        cellFeature.setStyle(createWaterRiskGridStyle(cellFeature));
+        gridSource.addFeature(cellFeature);
+      });
+
+      const pipes = WATER_RISK_MAP_PIPES_BY_AREA[areaId] ?? [];
+      pipes.forEach((pipe) => {
+        if (!pipeSource) return;
         const pipeFeature = new Feature({
-          geometry,
+          geometry: new LineString(pipe.lineCoordinates),
           pipeId: pipe.pipeId,
-          displayLabel: pipe.displayLabel || pipe.pipeId,
+          displayLabel: pipe.displayLabel,
         });
         pipeFeature.setStyle(createWaterRiskPipeStyle(pipeFeature));
         pipeSource.addFeature(pipeFeature);
-        if (!focusGeometry) focusGeometry = geometry;
       });
 
-      if (!focusGeometry) return;
-      const extent = focusGeometry.getExtent();
-      const [, minY = 0, maxX = 0, maxY = 0] = extent;
-      setWaterRiskInfoAnchor([maxX, (minY + maxY) / 2]);
-      map.getView().fit(extent, {
+      const areaGeometry = areaFeature.getGeometry();
+      if (!areaGeometry) return;
+
+      map.getView().fit(areaGeometry.getExtent(), {
         duration: 300,
         padding: [120, 120, 120, 120],
         maxZoom: 15,
         constrainResolution: true,
         nearest: true,
       });
-      return;
-    }
-
-    const areaData = getWaterRiskAreaMapData(areaId);
-    const resultRow = getWaterRiskResultRow(areaId);
-    if (!areaData || !resultRow) return;
-
-    const areaFeature = new Feature({
-      geometry: new Polygon(areaData.polygonCoordinates),
-      areaId: areaData.areaId,
-      areaName: areaData.areaName,
-      riskStatus: resultRow.riskStatus,
-    });
-    areaFeature.setStyle(createWaterRiskAreaStyle(areaFeature));
-    areaSource.addFeature(areaFeature);
-
-    areaData.gridCells.forEach((cell) => {
-      const cellFeature = new Feature({
-        geometry: new Polygon(cell.polygonCoordinates),
-        gridId: cell.gridId,
-        rainQty: cell.rainQty,
-        colorLevel: cell.colorLevel,
-      });
-      cellFeature.setStyle(createWaterRiskGridStyle(cellFeature));
-      gridSource.addFeature(cellFeature);
-    });
-
-    const pipes = WATER_RISK_MAP_PIPES_BY_AREA[areaId] ?? [];
-    pipes.forEach((pipe) => {
-      if (!pipeSource) return;
-      const pipeFeature = new Feature({
-        geometry: new LineString(pipe.lineCoordinates),
-        pipeId: pipe.pipeId,
-        displayLabel: pipe.displayLabel,
-      });
-      pipeFeature.setStyle(createWaterRiskPipeStyle(pipeFeature));
-      pipeSource.addFeature(pipeFeature);
-    });
-
-    const areaGeometry = areaFeature.getGeometry();
-    if (!areaGeometry) return;
-
-    map.getView().fit(areaGeometry.getExtent(), {
-      duration: 300,
-      padding: [120, 120, 120, 120],
-      maxZoom: 15,
-      constrainResolution: true,
-      nearest: true,
-    });
-  }, [ensureWaterRiskAreaLayer, ensureWaterRiskGridLayer, ensureWaterRiskPipeLayer]);
+    },
+    [
+      ensureWaterRiskAreaLayer,
+      ensureWaterRiskGridLayer,
+      ensureWaterRiskPipeLayer,
+    ],
+  );
 
   useEffect(() => {
     if (!mapReady || !gisMaps.current) return;
@@ -3551,7 +4069,10 @@ const Map = () => {
       return;
     }
 
-    renderWaterRiskSelection(waterRiskSession.selectedAreaId, selectedWaterRiskMapView);
+    renderWaterRiskSelection(
+      waterRiskSession.selectedAreaId,
+      selectedWaterRiskMapView,
+    );
   }, [
     clearWaterRiskLayers,
     mapReady,
@@ -3562,7 +4083,9 @@ const Map = () => {
 
   useEffect(() => {
     if (selectedWaterRiskMapView) return;
-    setWaterRiskInfoAnchor(buildWaterRiskInfoAnchor(waterRiskSession.selectedAreaId));
+    setWaterRiskInfoAnchor(
+      buildWaterRiskInfoAnchor(waterRiskSession.selectedAreaId),
+    );
   }, [selectedWaterRiskMapView, waterRiskSession.selectedAreaId]);
 
   useEffect(() => {
@@ -3602,7 +4125,9 @@ const Map = () => {
       if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT) {
         const areaId = String(data.payload?.areaId ?? "").trim();
         if (!areaId) return;
-        const resultRow = data.payload?.resultRow as WaterRiskResultRow | undefined;
+        const resultRow = data.payload?.resultRow as
+          | WaterRiskResultRow
+          | undefined;
         const mapView = data.payload?.mapView as WaterRiskMapView | undefined;
         if (!resultRow || !mapView || mapView.areaId !== areaId) return;
         setSelectedWaterRiskApiResult(resultRow);
@@ -3615,7 +4140,6 @@ const Map = () => {
         setFeatureData(null);
         return;
       }
-
     };
 
     window.addEventListener("message", handleWaterRiskPopupMessage);
@@ -3657,13 +4181,15 @@ const Map = () => {
   // 체크 해제된 관종의 유하방향 feature/cache만 제거하고, 새로 체크된 관종 코드만 다음 요청 대상으로 돌려준다.
   const retainFlowDirectionUsageCodes = useCallback((usageCodes: string[]) => {
     const nextUsageCodes = new Set(usageCodes);
-    const addedUsageCodes = usageCodes.filter((usageCode) =>
-      !flowDirectionVisibleUsageCodesRef.current.has(usageCode),
+    const addedUsageCodes = usageCodes.filter(
+      (usageCode) => !flowDirectionVisibleUsageCodesRef.current.has(usageCode),
     );
     const source = flowDirectionSourceRef.current;
     if (source) {
       source.getFeatures().forEach((feature: any) => {
-        const usageCode = String(feature.get("usgCd") ?? feature.get("usg_cd") ?? "").trim();
+        const usageCode = String(
+          feature.get("usgCd") ?? feature.get("usg_cd") ?? "",
+        ).trim();
         if (nextUsageCodes.has(usageCode)) return;
 
         const featureKey = feature.get("flowDirectionCacheKey");
@@ -3672,13 +4198,14 @@ const Map = () => {
         }
         source.removeFeature(feature);
       });
-      flowDirectionFeatureKeyQueueRef.current = flowDirectionFeatureKeyQueueRef.current.filter((featureKey) =>
-        flowDirectionFeatureKeySetRef.current.has(featureKey),
-      );
+      flowDirectionFeatureKeyQueueRef.current =
+        flowDirectionFeatureKeyQueueRef.current.filter((featureKey) =>
+          flowDirectionFeatureKeySetRef.current.has(featureKey),
+        );
     }
     flowDirectionVisibleUsageCodesRef.current = new Set(
-      Array.from(flowDirectionVisibleUsageCodesRef.current).filter((usageCode) =>
-        nextUsageCodes.has(usageCode),
+      Array.from(flowDirectionVisibleUsageCodesRef.current).filter(
+        (usageCode) => nextUsageCodes.has(usageCode),
       ),
     );
     return addedUsageCodes;
@@ -3697,8 +4224,12 @@ const Map = () => {
     if (!map) return null;
 
     if (flowDirectionLayerRef.current && flowDirectionSourceRef.current) {
-      flowDirectionLayerRef.current.setMinZoom?.(getFlowDirectionMinZoom(layerInfo));
-      flowDirectionLayerRef.current.setZIndex?.(getFlowDirectionZIndex(layerInfo));
+      flowDirectionLayerRef.current.setMinZoom?.(
+        getFlowDirectionMinZoom(layerInfo),
+      );
+      flowDirectionLayerRef.current.setZIndex?.(
+        getFlowDirectionZIndex(layerInfo),
+      );
       return flowDirectionSourceRef.current;
     }
 
@@ -3727,36 +4258,38 @@ const Map = () => {
   }, []);
 
   // BE에서 받은 보정 GeoJSON을 OpenLayers feature로 변환해 기존 유하방향 source에 중복 없이 병합한다.
-  const renderFlowDirectionLayer = useCallback((
-    featureCollection: any,
-    layerInfo: any,
-    usageStyleMap: Record<string, FlowDirectionUsageStyle>,
-  ) => {
-    const source = ensureFlowDirectionLayer(layerInfo);
-    if (!source) return;
+  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 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;
+      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;
-    });
+        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);
-    }
-
-  }, [ensureFlowDirectionLayer]);
+      if (nextFeatures.length > 0) {
+        source.addFeatures(nextFeatures);
+      }
+    },
+    [ensureFlowDirectionLayer],
+  );
 
   // 현재 지도 BBOX와 체크된 관종별 필터로 유하방향 GeoJSON을 각각 조회하고, 최신 요청만 지도에 반영한다.
   const loadFlowDirectionLayer = useCallback(
@@ -3782,7 +4315,10 @@ const Map = () => {
       const size = map.getSize();
       if (!size) return;
 
-      const usageStyleMap = extractCheckedPipeUsageStyles(checkedNodesDataRef.current, zoom);
+      const usageStyleMap = extractCheckedPipeUsageStyles(
+        checkedNodesDataRef.current,
+        zoom,
+      );
       const usageCodes = Object.keys(usageStyleMap);
       if (usageCodes.length === 0) {
         removeFlowDirectionLayer();
@@ -3792,7 +4328,9 @@ const Map = () => {
 
       const usageCodeSet = new Set(usageCodes);
       const requestUsageCodes = requestOnlyUsageCodes
-        ? requestOnlyUsageCodes.filter((usageCode) => usageCodeSet.has(usageCode))
+        ? requestOnlyUsageCodes.filter((usageCode) =>
+            usageCodeSet.has(usageCode),
+          )
         : usageCodes;
       const isPartialUsageRequest = Array.isArray(requestOnlyUsageCodes);
       if (requestUsageCodes.length === 0) {
@@ -3814,34 +4352,52 @@ const Map = () => {
       });
 
       try {
-        const settledResponses = await Promise.allSettled(requestUsageCodes.map(async (usageCode) => {
-          const params = new URLSearchParams(baseParams);
-          params.set("usgCd", usageCode);
-          const payload = await getRawJson(
-            `/sewerage-service/api/v1/map/flowDirectionGeometry?${params.toString()}`,
-            { signal: abortController.signal },
-          );
-          return { usageCode, featureCollection: getFeatureCollection(payload) };
-        }));
+        const settledResponses = await Promise.allSettled(
+          requestUsageCodes.map(async (usageCode) => {
+            const params = new URLSearchParams(baseParams);
+            params.set("usgCd", usageCode);
+            const payload = await getRawJson(
+              `/sewerage-service/api/v1/map/flowDirectionGeometry?${params.toString()}`,
+              { signal: abortController.signal },
+            );
+            return {
+              usageCode,
+              featureCollection: getFeatureCollection(payload),
+            };
+          }),
+        );
         if (requestSeq !== flowDirectionRequestSeqRef.current) return;
         if (abortController.signal.aborted) return;
 
         const responses = settledResponses
-          .filter((result): result is PromiseFulfilledResult<{ usageCode: string; featureCollection: any }> =>
-            result.status === "fulfilled",
+          .filter(
+            (
+              result,
+            ): result is PromiseFulfilledResult<{
+              usageCode: string;
+              featureCollection: any;
+            }> => result.status === "fulfilled",
           )
           .map((result) => result.value);
-        const failedResponses = settledResponses.filter((result) => result.status === "rejected");
+        const failedResponses = settledResponses.filter(
+          (result) => result.status === "rejected",
+        );
 
         if (responses.length === 0) {
           if (!isPartialUsageRequest) {
             removeFlowDirectionLayer();
           }
-          throw failedResponses[0]?.reason ?? new Error("유하방향 관종별 조회 결과가 없습니다.");
+          throw (
+            failedResponses[0]?.reason ??
+            new Error("유하방향 관종별 조회 결과가 없습니다.")
+          );
         }
 
         if (failedResponses.length > 0) {
-          console.error("유하방향 일부 관종 조회 실패:", failedResponses.map((result) => result.reason));
+          console.error(
+            "유하방향 일부 관종 조회 실패:",
+            failedResponses.map((result) => result.reason),
+          );
           if (!flowDirectionFailureAlertedRef.current) {
             flowDirectionFailureAlertedRef.current = true;
           }
@@ -3851,23 +4407,27 @@ const Map = () => {
           renderFlowDirectionLayer(featureCollection, layerInfo, usageStyleMap);
           flowDirectionVisibleUsageCodesRef.current.add(usageCode);
         });
-        const returnedFeaturesByUsage = responses.reduce<Record<string, number>>(
-          (acc, { usageCode, featureCollection }) => {
-            acc[usageCode] = featureCollection.features?.length ?? 0;
-            return acc;
+        const returnedFeaturesByUsage = responses.reduce<
+          Record<string, number>
+        >((acc, { usageCode, featureCollection }) => {
+          acc[usageCode] = featureCollection.features?.length ?? 0;
+          return acc;
+        }, {});
+        const networkCorrectedFeatures = responses.reduce(
+          (count, { featureCollection }) => {
+            const correctedCount =
+              featureCollection.features?.filter(
+                (feature: any) =>
+                  String(
+                    feature?.properties?.networkCorrectionYn ??
+                      feature?.properties?.network_correction_yn ??
+                      "",
+                  ).toUpperCase() === "Y",
+              ).length ?? 0;
+            return count + correctedCount;
           },
-          {},
+          0,
         );
-        const networkCorrectedFeatures = responses.reduce((count, { featureCollection }) => {
-          const correctedCount = featureCollection.features?.filter((feature: any) =>
-            String(
-              feature?.properties?.networkCorrectionYn ??
-              feature?.properties?.network_correction_yn ??
-              "",
-            ).toUpperCase() === "Y",
-          ).length ?? 0;
-          return count + correctedCount;
-        }, 0);
         (window as any).__SN_FLOW_DIRECTION_DEBUG__ = {
           screenBbox,
           requestBbox,
@@ -3879,16 +4439,26 @@ const Map = () => {
           requestUsageCodes,
           requestCount: responses.length,
           returnedFeaturesByUsage,
-          returnedFeatures: Object.values(returnedFeaturesByUsage).reduce((sum, count) => sum + count, 0),
+          returnedFeatures: Object.values(returnedFeaturesByUsage).reduce(
+            (sum, count) => sum + count,
+            0,
+          ),
           networkCorrectedFeatures,
-          cachedFeatures: flowDirectionSourceRef.current?.getFeatures?.().length ?? 0,
+          cachedFeatures:
+            flowDirectionSourceRef.current?.getFeatures?.().length ?? 0,
         };
         if (failedResponses.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;
+        if (
+          typeof error === "object" &&
+          error !== null &&
+          "name" in error &&
+          error.name === "AbortError"
+        )
+          return;
 
         console.error("유하방향 레이어 조회 실패:", error);
         if (!isPartialUsageRequest) {
@@ -3903,7 +4473,12 @@ const Map = () => {
         }
       }
     },
-    [flowDirectionMode, removeFlowDirectionLayer, renderFlowDirectionLayer, retainFlowDirectionUsageCodes],
+    [
+      flowDirectionMode,
+      removeFlowDirectionLayer,
+      renderFlowDirectionLayer,
+      retainFlowDirectionUsageCodes,
+    ],
   );
 
   // SearchModal, GisContent 등에서 호출
@@ -3944,7 +4519,12 @@ const Map = () => {
     if (clickedLayerTypeName === SINKHOLE_LAYER_TYPE) {
       const acdntNo = getSinkholeAccidentId(data);
       if (acdntNo) {
-        void loadSinkholeDetail(acdntNo, false, getSinkholePointFromSelection(data), getSinkholeFallbackDetailFromSelection(data));
+        void loadSinkholeDetail(
+          acdntNo,
+          false,
+          getSinkholePointFromSelection(data),
+          getSinkholeFallbackDetailFromSelection(data),
+        );
       }
       return;
     }
@@ -3970,18 +4550,27 @@ const Map = () => {
         setIsSearchModalOpen(false);
       };
       const loadLatestEditSn = (changeId: string) => {
-        const fid = editSelection.isPreviewSelection === true ? "" : getGisEditFeatureFid(data);
+        const fid =
+          editSelection.isPreviewSelection === true
+            ? ""
+            : getGisEditFeatureFid(data);
         if (!fid) return;
-        getRawJson(`/sewerage-service/api/v1/map/gisEdit/swagePpl/histories?fid=${encodeURIComponent(fid)}`)
+        getRawJson(
+          `/sewerage-service/api/v1/map/gisEdit/swagePpl/histories?fid=${encodeURIComponent(fid)}`,
+        )
           .then((historyResponse) => {
-            const latestEditSn = getLatestNumericEditSn(historyResponse?.histories ?? []);
+            const latestEditSn = getLatestNumericEditSn(
+              historyResponse?.histories ?? [],
+            );
             if (latestEditSn !== null) {
               gisEdit.updateChangeBaseEditSn(changeId, String(latestEditSn));
             }
           })
           .catch((error) => {
             console.error("GIS 편집 관로 이력 조회 실패:", error);
-            gisEdit.announceStatus("관로 이력 정보를 확인하지 못했습니다. 저장 시 충돌 검증이 제한될 수 있습니다.");
+            gisEdit.announceStatus(
+              "관로 이력 정보를 확인하지 못했습니다. 저장 시 충돌 검증이 제한될 수 있습니다.",
+            );
           });
       };
 
@@ -3995,7 +4584,10 @@ const Map = () => {
         (gisEdit.activeTool === "MOVE" || gisEdit.activeTool === "VERTEX_EDIT");
 
       if (isGeometryEditTargetSelection) {
-        if (typeof editSelection.changeId === "string" && editSelection.changeId) {
+        if (
+          typeof editSelection.changeId === "string" &&
+          editSelection.changeId
+        ) {
           loadLatestEditSn(String(editSelection.changeId));
         }
         closeGisEditDetail();
@@ -4015,7 +4607,10 @@ const Map = () => {
       if (shouldOpenPipeDetail) {
         openGisEditPipeDetail(String(editSelection.changeId));
         loadLatestEditSn(String(editSelection.changeId));
-        if (editSelection.isPreviewSelection !== true && !isGeometryEditTargetSelection) {
+        if (
+          editSelection.isPreviewSelection !== true &&
+          !isGeometryEditTargetSelection
+        ) {
           highlightGisEditSelectedFeature(data);
         }
         setFeatureData(data);
@@ -4076,15 +4671,19 @@ const Map = () => {
       if (geometry) {
         let extent = geometry.getExtent();
 
-        const layerTypeName = typeof foundFeature.getId === "function"
-          ? String(foundFeature.getId()).split(".")[0]
-          : data?.lyrTypeNm;
+        const layerTypeName =
+          typeof foundFeature.getId === "function"
+            ? String(foundFeature.getId()).split(".")[0]
+            : data?.lyrTypeNm;
         const shouldUseAgedPipeFocus =
-          shouldFocusAgedPipeOnNextSelectRef.current && layerTypeName === AGED_PIPE_LAYER_TYPE;
+          shouldFocusAgedPipeOnNextSelectRef.current &&
+          layerTypeName === AGED_PIPE_LAYER_TYPE;
 
         map.getView().fit(extent, {
           duration: 300,
-          padding: shouldUseAgedPipeFocus ? AGED_PIPE_FOCUS_PADDING : DEFAULT_FEATURE_FIT_PADDING,
+          padding: shouldUseAgedPipeFocus
+            ? AGED_PIPE_FOCUS_PADDING
+            : DEFAULT_FEATURE_FIT_PADDING,
           maxZoom: shouldUseAgedPipeFocus ? 18 : 16,
           constrainResolution: true,
           nearest: true,
@@ -4099,7 +4698,6 @@ const Map = () => {
       console.warn("OpenLayers Feature를 찾을 수 없습니다:", data);
     }
 
-
     setFeatureData(data);
     setIsOpen(true);
     setIsSearchModalOpen(false);
@@ -4108,9 +4706,15 @@ const Map = () => {
   const swagePrcsFcltSearchFilter = useMemo(() => {
     switch (swagePrcsFcltLayerMode) {
       case "gte500":
-        return { label: "하수처리시설(500톤 이상)", cqlFilter: "fclt_cpct >= 500" };
+        return {
+          label: "하수처리시설(500톤 이상)",
+          cqlFilter: "fclt_cpct >= 500",
+        };
       case "lt500":
-        return { label: "하수처리시설(500톤 미만)", cqlFilter: "fclt_cpct < 500" };
+        return {
+          label: "하수처리시설(500톤 미만)",
+          cqlFilter: "fclt_cpct < 500",
+        };
       case "none":
         return { label: "하수처리시설(레이어 꺼짐)", disabled: true };
       case "all":
@@ -4119,7 +4723,9 @@ const Map = () => {
     }
   }, [swagePrcsFcltLayerMode]);
 
-  const facilityTypes = [{ text: "하수처리시설", val: SWAGE_PRCS_FCLT_LAYER_TYPE }];
+  const facilityTypes = [
+    { text: "하수처리시설", val: SWAGE_PRCS_FCLT_LAYER_TYPE },
+  ];
 
   const fetchAgedPipeRows = useCallback(
     async (page: number, filters: AgedPipeFilters, size: number) => {
@@ -4153,7 +4759,11 @@ const Map = () => {
     async (page = 1, filters = appliedAgedPipeFilters) => {
       setIsAgedPipeListLoading(true);
       try {
-        const response = await fetchAgedPipeRows(page, filters, AGED_PIPE_PAGE_SIZE);
+        const response = await fetchAgedPipeRows(
+          page,
+          filters,
+          AGED_PIPE_PAGE_SIZE,
+        );
         setAgedPipeRows(response.rows);
         setAgedPipeTotalCount(response.total);
         setAgedPipeCurrentPage(page);
@@ -4184,21 +4794,29 @@ const Map = () => {
     );
   }, []);
 
-  const handleApplyAgedPipeFilters = useCallback((filters = draftAgedPipeFilters) => {
-    if (!validateElapsedYears(Number(filters.elapsedYears))) {
-      alert("경과년도는 1년~100년 범위 내에서 입력해주세요.");
-      return;
-    }
+  const handleApplyAgedPipeFilters = useCallback(
+    (filters = draftAgedPipeFilters) => {
+      if (!validateElapsedYears(Number(filters.elapsedYears))) {
+        alert("경과년도는 1년~100년 범위 내에서 입력해주세요.");
+        return;
+      }
 
-    const normalized = normalizeAgedPipeFilters(filters);
-    setDraftAgedPipeFilters(normalized);
-    setAppliedAgedPipeFilters(normalized);
-    syncAgedPipePopupFilters(normalized);
+      const normalized = normalizeAgedPipeFilters(filters);
+      setDraftAgedPipeFilters(normalized);
+      setAppliedAgedPipeFilters(normalized);
+      syncAgedPipePopupFilters(normalized);
 
-    if (isAgedPipeListOpen) {
-      loadAgedPipeList(1, normalized);
-    }
-  }, [draftAgedPipeFilters, isAgedPipeListOpen, loadAgedPipeList, syncAgedPipePopupFilters]);
+      if (isAgedPipeListOpen) {
+        loadAgedPipeList(1, normalized);
+      }
+    },
+    [
+      draftAgedPipeFilters,
+      isAgedPipeListOpen,
+      loadAgedPipeList,
+      syncAgedPipePopupFilters,
+    ],
+  );
 
   const openAgedPipePopupWindow = useCallback(() => {
     const popup = openWindowPopup("agedPipePopup", {
@@ -4223,14 +4841,12 @@ const Map = () => {
   }, [openAgedPipePopupWindow]);
 
   const removeExmnResultLayer = useCallback((jobType: ExmnMapJobType) => {
-    const layerId = jobType === "PPL"
-      ? EXMN_RESULT_PPL_LAYER_ID
-      : EXMN_RESULT_MNHL_LAYER_ID;
+    const layerId =
+      jobType === "PPL" ? EXMN_RESULT_PPL_LAYER_ID : EXMN_RESULT_MNHL_LAYER_ID;
     const layerRef = jobType === "PPL" ? exmnPplLayerRef : exmnMnhlLayerRef;
     const sourceRef = jobType === "PPL" ? exmnPplSourceRef : exmnMnhlSourceRef;
-    const requestSeqRef = jobType === "PPL"
-      ? exmnPplRequestSeqRef
-      : exmnMnhlRequestSeqRef;
+    const requestSeqRef =
+      jobType === "PPL" ? exmnPplRequestSeqRef : exmnMnhlRequestSeqRef;
 
     requestSeqRef.current += 1;
     if (layerRef.current) {
@@ -4249,9 +4865,8 @@ const Map = () => {
     const sourceRef = jobType === "PPL" ? exmnPplSourceRef : exmnMnhlSourceRef;
     if (layerRef.current && sourceRef.current) return sourceRef.current;
 
-    const layerId = jobType === "PPL"
-      ? EXMN_RESULT_PPL_LAYER_ID
-      : EXMN_RESULT_MNHL_LAYER_ID;
+    const layerId =
+      jobType === "PPL" ? EXMN_RESULT_PPL_LAYER_ID : EXMN_RESULT_MNHL_LAYER_ID;
     const source = new VectorSource();
     const layer = new VectorLayer({
       source,
@@ -4262,7 +4877,10 @@ const Map = () => {
     });
     layer.set("id", layerId);
     layer.set("lyrNm", jobType === "PPL" ? "관로조사" : "맨홀조사");
-    layer.set("lyrTyNm", jobType === "PPL" ? "tb_ms_swage_ppl" : "tb_ms_swage_mhl");
+    layer.set(
+      "lyrTyNm",
+      jobType === "PPL" ? "tb_ms_swage_ppl" : "tb_ms_swage_mhl",
+    );
     layer.set("clickPsblYn", "Y");
     layer.set("chcYn", "Y");
 
@@ -4276,7 +4894,8 @@ const Map = () => {
 
   const loadExmnResultLayer = useCallback(
     async (jobType: ExmnMapJobType, filters: ExmnMapFilters) => {
-      const isChecked = jobType === "PPL" ? isExmnPplChecked : isExmnMnhlChecked;
+      const isChecked =
+        jobType === "PPL" ? isExmnPplChecked : isExmnMnhlChecked;
       if (!mapReady || !gisMaps.current || !isChecked) return;
 
       const source = ensureExmnResultLayer(jobType);
@@ -4289,9 +4908,8 @@ const Map = () => {
         source.clear();
         return;
       }
-      const requestSeqRef = jobType === "PPL"
-        ? exmnPplRequestSeqRef
-        : exmnMnhlRequestSeqRef;
+      const requestSeqRef =
+        jobType === "PPL" ? exmnPplRequestSeqRef : exmnMnhlRequestSeqRef;
       const requestSeq = requestSeqRef.current + 1;
       requestSeqRef.current = requestSeq;
 
@@ -4302,9 +4920,10 @@ const Map = () => {
           sggNm: exmnMapEntryContext.sggNm,
         });
         if (requestSeqRef.current !== requestSeq) return;
-        const featureCollection = response?.data?.type === "FeatureCollection"
-          ? response.data
-          : response;
+        const featureCollection =
+          response?.data?.type === "FeatureCollection"
+            ? response.data
+            : response;
         const features = new GeoJSON().readFeatures(featureCollection, {
           dataProjection: "EPSG:5179",
           featureProjection: GisApp.TO_PROJ,
@@ -4338,7 +4957,10 @@ const Map = () => {
       } catch (error) {
         if (requestSeqRef.current !== requestSeq) return;
         source.clear();
-        console.error(`${jobType === "PPL" ? "관로조사" : "맨홀조사"} 레이어 조회 실패:`, error);
+        console.error(
+          `${jobType === "PPL" ? "관로조사" : "맨홀조사"} 레이어 조회 실패:`,
+          error,
+        );
       }
     },
     [
@@ -4438,7 +5060,10 @@ const Map = () => {
     const map = gisMaps.current;
     if (!map) return null;
 
-    if (sinkholeFocusedPipeLayerRef.current && sinkholeFocusedPipeSourceRef.current) {
+    if (
+      sinkholeFocusedPipeLayerRef.current &&
+      sinkholeFocusedPipeSourceRef.current
+    ) {
       return sinkholeFocusedPipeSourceRef.current;
     }
 
@@ -4490,25 +5115,30 @@ const Map = () => {
         geometry: new Point([detail.x, detail.y + radiusMeters]),
       });
       radiusLabelFeature.set("sinkholeRadiusLabel", true);
-      radiusLabelFeature.setStyle(createSinkholeRadiusLabelStyle(radiusMeters, pointVariant));
+      radiusLabelFeature.setStyle(
+        createSinkholeRadiusLabelStyle(radiusMeters, pointVariant),
+      );
 
       source.addFeatures([radiusFeature, radiusLabelFeature, pointFeature]);
     },
     [clearSinkholeSelectionLayer, ensureSinkholeSelectionLayer],
   );
 
-  const focusSinkholeOnMap = useCallback((detail: SinkholeDetail, radiusMeters: number) => {
-    if (!gisMaps.current || detail.x == null || detail.y == null) return;
+  const focusSinkholeOnMap = useCallback(
+    (detail: SinkholeDetail, radiusMeters: number) => {
+      if (!gisMaps.current || detail.x == null || detail.y == null) return;
 
-    const radiusGeometry = new CircleGeom([detail.x, detail.y], radiusMeters);
-    gisMaps.current.getView?.().fit?.(radiusGeometry.getExtent(), {
-      duration: 350,
-      padding: [100, 380, 100, 120],
-      maxZoom: 17,
-      constrainResolution: true,
-      nearest: true,
-    });
-  }, []);
+      const radiusGeometry = new CircleGeom([detail.x, detail.y], radiusMeters);
+      gisMaps.current.getView?.().fit?.(radiusGeometry.getExtent(), {
+        duration: 350,
+        padding: [100, 380, 100, 120],
+        maxZoom: 17,
+        constrainResolution: true,
+        nearest: true,
+      });
+    },
+    [],
+  );
 
   // 우측 상세 탭 전환 시 패널의 활성 대상과 지도 선택/강조 상태를 맞춘다.
   const syncRightPanelFeatureSelectionOnMap = useCallback(
@@ -4534,8 +5164,12 @@ const Map = () => {
         if (!source) return;
 
         source.clear();
-        const focusedFeature = typeof data.clone === "function" ? data.clone() : data;
-        if (typeof focusedFeature.setId === "function" && typeof data.getId === "function") {
+        const focusedFeature =
+          typeof data.clone === "function" ? data.clone() : data;
+        if (
+          typeof focusedFeature.setId === "function" &&
+          typeof data.getId === "function"
+        ) {
           focusedFeature.setId(data.getId());
         }
         focusedFeature.setStyle(createSinkholeFocusedPipeStyle());
@@ -4610,14 +5244,20 @@ const Map = () => {
       const areaFeature = new Feature({
         geometry: new Polygon([detail.areaRing]),
       });
-      areaFeature.setStyle(createFldngHstryAreaStyle(`${detail.floodYear}년 ${detail.districtName}`));
+      areaFeature.setStyle(
+        createFldngHstryAreaStyle(
+          `${detail.floodYear}년 ${detail.districtName}`,
+        ),
+      );
       areaSource.addFeature(areaFeature);
 
       detail.depthZones.forEach((zone) => {
         const zoneFeature = new Feature({
           geometry: new Polygon([zone.ring]),
         });
-        zoneFeature.setStyle(createFldngHstryDepthStyle(zone.depthLabel, zone.color));
+        zoneFeature.setStyle(
+          createFldngHstryDepthStyle(zone.depthLabel, zone.color),
+        );
         depthSource.addFeature(zoneFeature);
       });
     },
@@ -4681,7 +5321,13 @@ const Map = () => {
 
       const effectiveFilters = normalizeSinkholeFilters(filters, sinkholeScope);
       try {
-        const params = new URLSearchParams(buildSinkholeQueryString(effectiveFilters, 0, SINKHOLE_DEFAULT_POINT_LIMIT));
+        const params = new URLSearchParams(
+          buildSinkholeQueryString(
+            effectiveFilters,
+            0,
+            SINKHOLE_DEFAULT_POINT_LIMIT,
+          ),
+        );
         const rawResponse = await getRawJson(
           `/sewerage-service/api/v1/sinkholes?${params.toString()}`,
         );
@@ -4690,10 +5336,14 @@ const Map = () => {
           : Array.isArray(rawResponse?.items)
             ? (rawResponse.items as SinkholeListItem[])
             : [];
-        const featureCollection = buildSinkholeFeatureCollectionFromItems(items);
+        const featureCollection =
+          buildSinkholeFeatureCollectionFromItems(items);
 
         if (!featureCollection) {
-          console.warn("지반침하 목록 응답을 feature collection으로 변환하지 못했습니다.", rawResponse);
+          console.warn(
+            "지반침하 목록 응답을 feature collection으로 변환하지 못했습니다.",
+            rawResponse,
+          );
           source.clear();
           return;
         }
@@ -4715,7 +5365,14 @@ const Map = () => {
         source.clear();
       }
     },
-    [appliedSinkholeFilters, buildSinkholeQueryString, ensureSinkholeLayer, isSinkholeChecked, mapReady, sinkholeScope],
+    [
+      appliedSinkholeFilters,
+      buildSinkholeQueryString,
+      ensureSinkholeLayer,
+      isSinkholeChecked,
+      mapReady,
+      sinkholeScope,
+    ],
   );
 
   const closeSinkholeDetail = useCallback(() => {
@@ -4763,14 +5420,24 @@ const Map = () => {
             sggNm: String(fallbackDetail.sggNm ?? ""),
             emdNm: String(fallbackDetail.emdNm ?? ""),
             daddr: String(fallbackDetail.daddr ?? ""),
-            fullAddress: String(fallbackDetail.fullAddress ?? fallbackDetail.daddr ?? ""),
+            fullAddress: String(
+              fallbackDetail.fullAddress ?? fallbackDetail.daddr ?? "",
+            ),
             ocrnYmd: String(fallbackDetail.ocrnYmd ?? ""),
             restoreStatus: String(fallbackDetail.restoreStatus ?? ""),
-            restoreCompletedYmd: String(fallbackDetail.restoreCompletedYmd ?? ""),
-            coordStatus: String(fallbackDetail.coordStatus ?? fallbackDetail.geocodeStatus ?? ""),
-            geocodeStatus: String(fallbackDetail.geocodeStatus ?? fallbackDetail.coordStatus ?? ""),
+            restoreCompletedYmd: String(
+              fallbackDetail.restoreCompletedYmd ?? "",
+            ),
+            coordStatus: String(
+              fallbackDetail.coordStatus ?? fallbackDetail.geocodeStatus ?? "",
+            ),
+            geocodeStatus: String(
+              fallbackDetail.geocodeStatus ?? fallbackDetail.coordStatus ?? "",
+            ),
             geocodeSource: String(fallbackDetail.geocodeSource ?? ""),
-            geocodeErrorMessage: String(fallbackDetail.geocodeErrorMessage ?? ""),
+            geocodeErrorMessage: String(
+              fallbackDetail.geocodeErrorMessage ?? "",
+            ),
             latitude: fallbackDetail.latitude ?? null,
             longitude: fallbackDetail.longitude ?? null,
             x: fallbackDetail.x ?? null,
@@ -4801,26 +5468,37 @@ const Map = () => {
           const detailResponse = await getRawJson(
             `/sewerage-service/api/v1/sinkholes/${encodeURIComponent(acdntNo)}`,
           );
-          detail = ((detailResponse?.data ?? detailResponse) as SinkholeDetail);
+          detail = (detailResponse?.data ?? detailResponse) as SinkholeDetail;
         } catch (detailError) {
           if (!fallbackDetail) {
             throw detailError;
           }
-          console.warn("지반침하 상세 API 실패, 목록 데이터로 대체합니다.", detailError);
+          console.warn(
+            "지반침하 상세 API 실패, 목록 데이터로 대체합니다.",
+            detailError,
+          );
           detail = {
             acdntNo,
             ctpvNm: String(fallbackDetail.ctpvNm ?? ""),
             sggNm: String(fallbackDetail.sggNm ?? ""),
             emdNm: String(fallbackDetail.emdNm ?? ""),
             daddr: String(fallbackDetail.daddr ?? ""),
-            fullAddress: String(fallbackDetail.fullAddress ?? fallbackDetail.daddr ?? ""),
+            fullAddress: String(
+              fallbackDetail.fullAddress ?? fallbackDetail.daddr ?? "",
+            ),
             ocrnYmd: String(fallbackDetail.ocrnYmd ?? ""),
             restoreStatus: String(fallbackDetail.restoreStatus ?? ""),
-            restoreCompletedYmd: String(fallbackDetail.restoreCompletedYmd ?? ""),
+            restoreCompletedYmd: String(
+              fallbackDetail.restoreCompletedYmd ?? "",
+            ),
             coordStatus: String(fallbackDetail.coordStatus ?? ""),
-            geocodeStatus: String(fallbackDetail.geocodeStatus ?? fallbackDetail.coordStatus ?? ""),
+            geocodeStatus: String(
+              fallbackDetail.geocodeStatus ?? fallbackDetail.coordStatus ?? "",
+            ),
             geocodeSource: String(fallbackDetail.geocodeSource ?? ""),
-            geocodeErrorMessage: String(fallbackDetail.geocodeErrorMessage ?? ""),
+            geocodeErrorMessage: String(
+              fallbackDetail.geocodeErrorMessage ?? "",
+            ),
             latitude: fallbackDetail.latitude ?? null,
             longitude: fallbackDetail.longitude ?? null,
             x: fallbackDetail.x ?? null,
@@ -4837,7 +5515,9 @@ const Map = () => {
         const resolvedPoint =
           detail.x != null && detail.y != null
             ? { x: detail.x, y: detail.y }
-            : fallbackPoint && Number.isFinite(fallbackPoint.x) && Number.isFinite(fallbackPoint.y)
+            : fallbackPoint &&
+                Number.isFinite(fallbackPoint.x) &&
+                Number.isFinite(fallbackPoint.y)
               ? fallbackPoint
               : null;
 
@@ -4855,7 +5535,10 @@ const Map = () => {
             ? (nearbyResponse.items as SinkholeNearbyPipe[])
             : [];
         } catch (nearbyError) {
-          console.warn("지반침하 반경 내 관로 조회 실패, 상세는 계속 표시합니다.", nearbyError);
+          console.warn(
+            "지반침하 반경 내 관로 조회 실패, 상세는 계속 표시합니다.",
+            nearbyError,
+          );
         }
         const normalizedDetail = resolvedPoint
           ? {
@@ -4876,7 +5559,11 @@ const Map = () => {
         setIsOpen(true);
         setIsSearchModalOpen(false);
 
-        if (focusMap && normalizedDetail.x != null && normalizedDetail.y != null) {
+        if (
+          focusMap &&
+          normalizedDetail.x != null &&
+          normalizedDetail.y != null
+        ) {
           focusSinkholeOnMap(normalizedDetail, sinkholeRadiusMeters);
         }
       } catch (error) {
@@ -4884,7 +5571,12 @@ const Map = () => {
         alert("지반침하 상세 정보를 불러오지 못했습니다.");
       }
     },
-    [focusSinkholeOnMap, renderSelectedSinkhole, setIsSearchModalOpen, sinkholeRadiusMeters],
+    [
+      focusSinkholeOnMap,
+      renderSelectedSinkhole,
+      setIsSearchModalOpen,
+      sinkholeRadiusMeters,
+    ],
   );
 
   const applySinkholeRadius = useCallback(
@@ -4896,20 +5588,28 @@ const Map = () => {
 
       const selectedPoint =
         selectedSinkholeDetail.x != null && selectedSinkholeDetail.y != null
-          ? { x: Number(selectedSinkholeDetail.x), y: Number(selectedSinkholeDetail.y) }
+          ? {
+              x: Number(selectedSinkholeDetail.x),
+              y: Number(selectedSinkholeDetail.y),
+            }
           : null;
 
       try {
-        const nearbyRawResponse = selectedPoint && Number.isFinite(selectedPoint.x) && Number.isFinite(selectedPoint.y)
-          ? await getRawJson(
-              `/sewerage-service/api/v1/sinkholes/nearbyPipesByPoint?x=${selectedPoint.x}&y=${selectedPoint.y}&radiusMeters=${radiusMeters}`,
-            )
-          : await getRawJson(
-              `/sewerage-service/api/v1/sinkholes/${encodeURIComponent(selectedSinkholeDetail.acdntNo)}/nearbyPipes?radiusMeters=${radiusMeters}`,
-            );
+        const nearbyRawResponse =
+          selectedPoint &&
+          Number.isFinite(selectedPoint.x) &&
+          Number.isFinite(selectedPoint.y)
+            ? await getRawJson(
+                `/sewerage-service/api/v1/sinkholes/nearbyPipesByPoint?x=${selectedPoint.x}&y=${selectedPoint.y}&radiusMeters=${radiusMeters}`,
+              )
+            : await getRawJson(
+                `/sewerage-service/api/v1/sinkholes/${encodeURIComponent(selectedSinkholeDetail.acdntNo)}/nearbyPipes?radiusMeters=${radiusMeters}`,
+              );
         const nearbyResponse = nearbyRawResponse?.data ?? nearbyRawResponse;
         setSelectedSinkholeNearbyPipes(
-          Array.isArray(nearbyResponse?.items) ? (nearbyResponse.items as SinkholeNearbyPipe[]) : [],
+          Array.isArray(nearbyResponse?.items)
+            ? (nearbyResponse.items as SinkholeNearbyPipe[])
+            : [],
         );
         renderSelectedSinkhole(selectedSinkholeDetail, radiusMeters);
         focusSinkholeOnMap(selectedSinkholeDetail, radiusMeters);
@@ -4922,55 +5622,65 @@ const Map = () => {
     [focusSinkholeOnMap, renderSelectedSinkhole, selectedSinkholeDetail],
   );
 
-  const focusSinkholeNearbyPipe = useCallback(async (pipe: SinkholeNearbyPipe) => {
-    const fid = String(pipe?.fid ?? "").trim();
-    if (!fid) {
-      alert("표시할 관로 식별값이 없습니다.");
-      return;
-    }
-
-    const activeSinkholeTab = rightPanelTabs.find(
-      (tab) => tab.id === activeRightPanelTabId && tab.category === "sinkhole",
-    );
-    pipeParentTabIdRef.current = activeSinkholeTab?.id ?? null;
-
-    try {
-      const layerTypeName = String(pipe?.lyrTypeNm ?? "tb_ms_swage_ppl");
-      const storageNm = String(GisApp.Module.layer?.storageNm ?? "").trim();
-      if (!storageNm) throw new Error("GeoServer 저장소 이름을 확인할 수 없습니다.");
-      const params = new URLSearchParams({
-        SERVICE: "WFS",
-        VERSION: "1.1.0",
-        REQUEST: "GetFeature",
-        TYPENAME: `${storageNm}${layerTypeName}`,
-        SRSNAME: GisApp.TO_PROJ,
-        OUTPUTFORMAT: "application/json",
-        FEATUREID: fid,
-      });
-      const response = await getRawJson(`${GisApp.GEOSERVER_URL}?${params.toString()}`);
-      const featureCollection = getFeatureCollection(response);
-      const features = new GeoJSON().readFeatures(featureCollection, {
-        dataProjection: GisApp.TO_PROJ,
-        featureProjection: GisApp.TO_PROJ,
-      });
-
-      const firstFeature = features[0];
-      if (firstFeature) {
-        syncRightPanelFeatureSelectionOnMap(firstFeature);
-        setFeatureData(firstFeature);
-        setIsOpen(true);
-        setIsSearchModalOpen(false);
+  const focusSinkholeNearbyPipe = useCallback(
+    async (pipe: SinkholeNearbyPipe) => {
+      const fid = String(pipe?.fid ?? "").trim();
+      if (!fid) {
+        alert("표시할 관로 식별값이 없습니다.");
+        return;
       }
-    } catch (error) {
-      console.error("지반침하 반경 내 관로 지도 표시 실패:", error);
-      alert("선택한 관로를 지도에서 표시하지 못했습니다.");
-    }
-  }, [
-    activeRightPanelTabId,
-    rightPanelTabs,
-    setIsSearchModalOpen,
-    syncRightPanelFeatureSelectionOnMap,
-  ]);
+
+      const activeSinkholeTab = rightPanelTabs.find(
+        (tab) =>
+          tab.id === activeRightPanelTabId && tab.category === "sinkhole",
+      );
+      pipeParentTabIdRef.current = activeSinkholeTab?.id ?? null;
+
+      try {
+        const layerTypeName = String(pipe?.lyrTypeNm ?? "tb_ms_swage_ppl");
+        const layerModule = GisApp.Module.layer as {
+          storageNm?: string;
+        } | null;
+        const storageNm = String(layerModule?.storageNm ?? "").trim();
+        if (!storageNm)
+          throw new Error("GeoServer 저장소 이름을 확인할 수 없습니다.");
+        const params = new URLSearchParams({
+          SERVICE: "WFS",
+          VERSION: "1.1.0",
+          REQUEST: "GetFeature",
+          TYPENAME: `${storageNm}${layerTypeName}`,
+          SRSNAME: GisApp.TO_PROJ,
+          OUTPUTFORMAT: "application/json",
+          FEATUREID: fid,
+        });
+        const response = await getRawJson(
+          `${GisApp.GEOSERVER_URL}?${params.toString()}`,
+        );
+        const featureCollection = getFeatureCollection(response);
+        const features = new GeoJSON().readFeatures(featureCollection, {
+          dataProjection: GisApp.TO_PROJ,
+          featureProjection: GisApp.TO_PROJ,
+        });
+
+        const firstFeature = features[0];
+        if (firstFeature) {
+          syncRightPanelFeatureSelectionOnMap(firstFeature);
+          setFeatureData(firstFeature);
+          setIsOpen(true);
+          setIsSearchModalOpen(false);
+        }
+      } catch (error) {
+        console.error("지반침하 반경 내 관로 지도 표시 실패:", error);
+        alert("선택한 관로를 지도에서 표시하지 못했습니다.");
+      }
+    },
+    [
+      activeRightPanelTabId,
+      rightPanelTabs,
+      setIsSearchModalOpen,
+      syncRightPanelFeatureSelectionOnMap,
+    ],
+  );
 
   const buildRightPanelTab = useCallback(
     (data: any): RightPanelTab | null => {
@@ -4981,7 +5691,9 @@ const Map = () => {
 
       if (layerTypeName === SINKHOLE_LAYER_TYPE) {
         const detail = selectedSinkholeDetail;
-        const acdntNo = String(detail?.acdntNo ?? getSinkholeAccidentId(data) ?? "").trim();
+        const acdntNo = String(
+          detail?.acdntNo ?? getSinkholeAccidentId(data) ?? "",
+        ).trim();
         if (!acdntNo) return null;
 
         return {
@@ -5014,21 +5726,26 @@ const Map = () => {
       }
 
       const category = getRightPanelTabCategory(data);
-      const surveyJobTypeValue = getRightPanelFeatureProperty(data, ["jobType"]);
+      const surveyJobTypeValue = getRightPanelFeatureProperty(data, [
+        "jobType",
+      ]);
       const surveyJobType =
         surveyJobTypeValue === "PPL" || surveyJobTypeValue === "MNHL"
           ? surveyJobTypeValue
           : undefined;
-      const featureId = getRightPanelFeatureIdentifier(data) || `${layerTypeName || "feature"}:${now}`;
+      const featureId =
+        getRightPanelFeatureIdentifier(data) ||
+        `${layerTypeName || "feature"}:${now}`;
       // Direct map selections accumulate per pipe; only a pipe with a sinkhole parent replaces the linked slot.
-      const pipeParentTabId = category === "pipe" ? pipeParentTabIdRef.current : null;
+      const pipeParentTabId =
+        category === "pipe" ? pipeParentTabIdRef.current : null;
       return {
         id:
           category === "exmnSurvey"
             ? `exmnSurvey:${getRightPanelFeatureProperty(data, ["exmnFacilityId"])}:${getRightPanelFeatureProperty(data, ["manholePosition"])}`
             : category === "pipe" && pipeParentTabId
-            ? RIGHT_PANEL_SINKHOLE_PIPE_TAB_ID
-            : `feature:${layerTypeName || "unknown"}:${featureId}`,
+              ? RIGHT_PANEL_SINKHOLE_PIPE_TAB_ID
+              : `feature:${layerTypeName || "unknown"}:${featureId}`,
         kind: "feature",
         category,
         displayLabel: getRightPanelFeatureDisplayLabel(data, category),
@@ -5038,16 +5755,23 @@ const Map = () => {
         lastActiveAt: now,
       };
     },
-    [gisEditDetailChangeId, selectedSinkholeDetail, selectedSinkholeNearbyPipes],
+    [
+      gisEditDetailChangeId,
+      selectedSinkholeDetail,
+      selectedSinkholeNearbyPipes,
+    ],
   );
 
   const upsertRightPanelTab = useCallback((tab: RightPanelTab) => {
     setRightPanelTabs((currentTabs) => {
       const nextTab = { ...tab, lastActiveAt: Date.now() };
       const existingIndex = currentTabs.findIndex((item) => item.id === tab.id);
-      const mergedTabs = existingIndex < 0
-        ? [...currentTabs, nextTab]
-        : currentTabs.map((item, index) => (index === existingIndex ? { ...item, ...nextTab } : item));
+      const mergedTabs =
+        existingIndex < 0
+          ? [...currentTabs, nextTab]
+          : currentTabs.map((item, index) =>
+              index === existingIndex ? { ...item, ...nextTab } : item,
+            );
 
       if (mergedTabs.length <= RIGHT_PANEL_TAB_LIMIT) return mergedTabs;
 
@@ -5068,7 +5792,9 @@ const Map = () => {
       if (!targetTab) return;
 
       setRightPanelTabs((currentTabs) =>
-        currentTabs.map((tab) => (tab.id === tabId ? { ...tab, lastActiveAt: Date.now() } : tab)),
+        currentTabs.map((tab) =>
+          tab.id === tabId ? { ...tab, lastActiveAt: Date.now() } : tab,
+        ),
       );
       setActiveRightPanelTabId(tabId);
       if (targetTab.category === "pipe") {
@@ -5123,7 +5849,10 @@ const Map = () => {
       if (closingTab?.kind === "gisEdit") {
         setGisEditDetailChangeId(null);
       }
-      if (closingTab?.category === "pipe" || pipeParentTabIdRef.current === tabId) {
+      if (
+        closingTab?.category === "pipe" ||
+        pipeParentTabIdRef.current === tabId
+      ) {
         pipeParentTabIdRef.current = null;
       }
 
@@ -5142,10 +5871,16 @@ const Map = () => {
           ? remainingTabs.find((tab) => tab.id === closingTab.parentTabId)
           : null;
       const fallbackTab =
-        parentFallbackTab ?? [...remainingTabs].sort((a, b) => b.lastActiveAt - a.lastActiveAt)[0]!;
+        parentFallbackTab ??
+        [...remainingTabs].sort((a, b) => b.lastActiveAt - a.lastActiveAt)[0]!;
       activateRightPanelTab(fallbackTab.id);
     },
-    [activateRightPanelTab, clearSinkholeFocusedPipeLayer, clearSinkholeSelectionLayer, rightPanelTabs],
+    [
+      activateRightPanelTab,
+      clearSinkholeFocusedPipeLayer,
+      clearSinkholeSelectionLayer,
+      rightPanelTabs,
+    ],
   );
 
   // 선택 피처가 없는 지도 본체 클릭을 기존 지반침하 상세 닫기 흐름과 연결한다.
@@ -5153,7 +5888,9 @@ const Map = () => {
     if (gisEdit.isEditMode || !selectedSinkholeDetail?.acdntNo) return;
 
     const sinkholeTabId = `sinkhole:${selectedSinkholeDetail.acdntNo}`;
-    const hasSinkholeTab = rightPanelTabs.some((tab) => tab.id === sinkholeTabId);
+    const hasSinkholeTab = rightPanelTabs.some(
+      (tab) => tab.id === sinkholeTabId,
+    );
 
     if (hasSinkholeTab && activeRightPanelTabId === sinkholeTabId) {
       closeRightPanelTab(sinkholeTabId);
@@ -5168,7 +5905,10 @@ const Map = () => {
       if (pipeParentTabIdRef.current === sinkholeTabId) {
         pipeParentTabIdRef.current = null;
       }
-      if (!hasSinkholeTab && getSelectedFeatureLayerTypeName(featureData) === SINKHOLE_LAYER_TYPE) {
+      if (
+        !hasSinkholeTab &&
+        getSelectedFeatureLayerTypeName(featureData) === SINKHOLE_LAYER_TYPE
+      ) {
         setFeatureData(null);
         setIsOpen(false);
       }
@@ -5202,8 +5942,14 @@ const Map = () => {
   }, [isOpen]);
 
   const openSinkholePopupWindow = useCallback(() => {
-    const effectiveFilters = normalizeSinkholeFilters(appliedSinkholeFilters, sinkholeScope);
-    const popup = openWindowPopup(SINKHOLE_POPUP_KEY as WindowPopupKey, effectiveFilters as Record<string, string>);
+    const effectiveFilters = normalizeSinkholeFilters(
+      appliedSinkholeFilters,
+      sinkholeScope,
+    );
+    const popup = openWindowPopup(
+      SINKHOLE_POPUP_KEY as WindowPopupKey,
+      effectiveFilters as Record<string, string>,
+    );
     if (!popup) {
       alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
       return null;
@@ -5226,18 +5972,26 @@ const Map = () => {
       }
       sinkholePopupWindowRef.current = null;
       setIsSinkholePopupFilterActive(false);
-      setAppliedSinkholeFilters(normalizeSinkholeFilters(buildSinkholeFiltersFromYearRange(sinkholeYearRange, sinkholeScope), sinkholeScope));
+      setAppliedSinkholeFilters(
+        normalizeSinkholeFilters(
+          buildSinkholeFiltersFromYearRange(sinkholeYearRange, sinkholeScope),
+          sinkholeScope,
+        ),
+      );
       setSinkholeSelectionVersion((version) => version + 1);
     }, 300);
     return popup;
   }, [appliedSinkholeFilters, sinkholeScope, sinkholeYearRange]);
 
-  useEffect(() => () => {
-    if (sinkholePopupCloseWatcherRef.current) {
-      window.clearInterval(sinkholePopupCloseWatcherRef.current);
-      sinkholePopupCloseWatcherRef.current = null;
-    }
-  }, []);
+  useEffect(
+    () => () => {
+      if (sinkholePopupCloseWatcherRef.current) {
+        window.clearInterval(sinkholePopupCloseWatcherRef.current);
+        sinkholePopupCloseWatcherRef.current = null;
+      }
+    },
+    [],
+  );
 
   const handleAgedPipeRowDoubleClick = useCallback(
     async (row: AgedPipeRow) => {
@@ -5323,7 +6077,9 @@ const Map = () => {
       if (event.data?.type === AGED_PIPE_POPUP_MINIMIZE_MESSAGE) {
         agedPipePopupWindowRef.current = null;
         if (event.data?.filters) {
-          const normalized = normalizeAgedPipeFilters(event.data.filters as AgedPipeFilters);
+          const normalized = normalizeAgedPipeFilters(
+            event.data.filters as AgedPipeFilters,
+          );
           setDraftAgedPipeFilters(normalized);
           setAppliedAgedPipeFilters(normalized);
         }
@@ -5339,15 +6095,26 @@ const Map = () => {
     };
 
     window.addEventListener("message", handleAgedPipePopupMessage);
-    return () => window.removeEventListener("message", handleAgedPipePopupMessage);
-  }, [agedPipeTotalCount, handleAgedPipeRowDoubleClick, handlePipeAnalysisRowSelect]);
+    return () =>
+      window.removeEventListener("message", handleAgedPipePopupMessage);
+  }, [
+    agedPipeTotalCount,
+    handleAgedPipeRowDoubleClick,
+    handlePipeAnalysisRowSelect,
+  ]);
 
   useEffect(() => {
     const handleSinkholePopupMessage = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) return;
 
-      if (event.data?.type === SINKHOLE_FILTER_SYNC_MESSAGE && event.data?.filters) {
-        const normalized = normalizeSinkholeFilters(event.data.filters as SinkholeFilters, sinkholeScope);
+      if (
+        event.data?.type === SINKHOLE_FILTER_SYNC_MESSAGE &&
+        event.data?.filters
+      ) {
+        const normalized = normalizeSinkholeFilters(
+          event.data.filters as SinkholeFilters,
+          sinkholeScope,
+        );
         setIsSinkholePopupFilterActive(true);
         setAppliedSinkholeFilters(normalized);
         setSinkholeSelectionVersion((version) => version + 1);
@@ -5360,140 +6127,189 @@ const Map = () => {
           row.x != null && row.y != null
             ? { x: Number(row.x), y: Number(row.y) }
             : null;
-        void loadSinkholeDetail(String(row.acdntNo ?? ""), true, fallbackPoint, row);
+        void loadSinkholeDetail(
+          String(row.acdntNo ?? ""),
+          true,
+          fallbackPoint,
+          row,
+        );
         return;
       }
 
-      if (event.data?.type === SINKHOLE_SYNC_COMPLETED_MESSAGE && event.data?.payload) {
+      if (
+        event.data?.type === SINKHOLE_SYNC_COMPLETED_MESSAGE &&
+        event.data?.payload
+      ) {
         setLastSinkholeSyncSummary(event.data.payload as SinkholeSyncSummary);
         setSinkholeSelectionVersion((version) => version + 1);
       }
     };
 
     window.addEventListener("message", handleSinkholePopupMessage);
-    return () => window.removeEventListener("message", handleSinkholePopupMessage);
+    return () =>
+      window.removeEventListener("message", handleSinkholePopupMessage);
   }, [loadSinkholeDetail, sinkholeScope]);
 
   useEffect(() => {
     const handleFldngHstryPopupMessage = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) return;
-      if (event.data?.type !== FLDNG_HSTRY_ROW_SELECT_MESSAGE || !event.data?.row) return;
+      if (
+        event.data?.type !== FLDNG_HSTRY_ROW_SELECT_MESSAGE ||
+        !event.data?.row
+      )
+        return;
 
       handleFldngHstryRowSelect(event.data.row as FldngHstryItem);
     };
 
     window.addEventListener("message", handleFldngHstryPopupMessage);
-    return () => window.removeEventListener("message", handleFldngHstryPopupMessage);
+    return () =>
+      window.removeEventListener("message", handleFldngHstryPopupMessage);
   }, [handleFldngHstryRowSelect]);
 
   // WaterDepth 표시 여부를 결정하는 함수
-  const handleWaterDepthVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
-    const waterDepthLayers = checkedNodesData.filter(node =>
-      WATER_DEPTH_LAYER_TYPES.includes(node.data?.lyrTyNm)
-    );
+  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;
-    setIsWaterDepthLayerActive(hasWaterDepthLayer);
-  }, []);
+      const hasWaterDepthLayer = waterDepthLayers.length > 0;
+      setIsWaterDepthLayerActive(hasWaterDepthLayer);
+    },
+    [],
+  );
 
   // 체크된 레이어 변경 처리 함수
-  const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
-    checkedNodesDataRef.current = checkedNodesData;
-    setCheckedLayerLegendVersion((version) => version + 1);
-    setSwagePrcsFcltLayerMode(getSwagePrcsFcltLayerMode(checkedNodesData));
+  const handleCheckedLayersChange = useCallback(
+    (checkedIds: string[], checkedNodesData: any[]) => {
+      checkedNodesDataRef.current = checkedNodesData;
+      setCheckedLayerLegendVersion((version) => version + 1);
+      setSwagePrcsFcltLayerMode(getSwagePrcsFcltLayerMode(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) {
-      const map = gisMaps.current;
-      const zoom = map?.getView?.()?.getZoom?.() ?? 0;
-      const nextUsageStyleMap = extractCheckedPipeUsageStyles(checkedNodesData, zoom);
-      const requestUsageCodes = retainFlowDirectionUsageCodes(Object.keys(nextUsageStyleMap));
-      flowDirectionSelectionRequestUsageCodesRef.current = requestUsageCodes;
-      if (requestUsageCodes.length === 0) {
+      // 유하방향은 일반 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) {
+        const map = gisMaps.current;
+        const zoom = map?.getView?.()?.getZoom?.() ?? 0;
+        const nextUsageStyleMap = extractCheckedPipeUsageStyles(
+          checkedNodesData,
+          zoom,
+        );
+        const requestUsageCodes = retainFlowDirectionUsageCodes(
+          Object.keys(nextUsageStyleMap),
+        );
+        flowDirectionSelectionRequestUsageCodesRef.current = requestUsageCodes;
+        if (requestUsageCodes.length === 0) {
+          flowDirectionRequestSeqRef.current += 1;
+          flowDirectionAbortControllerRef.current?.abort();
+          flowDirectionAbortControllerRef.current = null;
+        }
+        setFlowDirectionSelectionVersion((version) => version + 1);
+      }
+
+      if (!nextFlowDirectionLayerInfo) {
+        // 해제 직후 pending API 응답이 늦게 도착해도 renderFlowDirectionLayer가 실행되지 않도록 순번을 무효화한다.
+        flowDirectionSelectionRequestUsageCodesRef.current = null;
         flowDirectionRequestSeqRef.current += 1;
         flowDirectionAbortControllerRef.current?.abort();
         flowDirectionAbortControllerRef.current = null;
+        flowDirectionFailureAlertedRef.current = false;
+        removeFlowDirectionLayer();
       }
-      setFlowDirectionSelectionVersion((version) => version + 1);
-    }
 
-    if (!nextFlowDirectionLayerInfo) {
-      // 해제 직후 pending API 응답이 늦게 도착해도 renderFlowDirectionLayer가 실행되지 않도록 순번을 무효화한다.
-      flowDirectionSelectionRequestUsageCodesRef.current = null;
-      flowDirectionRequestSeqRef.current += 1;
-      flowDirectionAbortControllerRef.current?.abort();
-      flowDirectionAbortControllerRef.current = null;
-      flowDirectionFailureAlertedRef.current = false;
-      removeFlowDirectionLayer();
-    }
+      handleWaterDepthVisibility(checkedIds, checkedNodesData);
+      const agedPipeChecked = checkedNodesData.some((node) =>
+        isAgedPipeLayerNode(node),
+      );
+      const waterDepthChecked = checkedNodesData.some((node) =>
+        WATER_DEPTH_LAYER_TYPES.includes(String(node?.data?.lyrTyNm ?? "")),
+      );
+      setIsAgedPipeChecked(agedPipeChecked);
+      const fldngHstryChecked = checkedNodesData.some((node) =>
+        isFldngHstryNode(node),
+      );
+      setIsFldngHstryChecked(fldngHstryChecked);
+      if (!fldngHstryChecked) {
+        clearFldngHstrySelection();
+      }
+      const sinkholeChecked = checkedNodesData.some((node) =>
+        isSinkholeLayerNode(node),
+      );
+      setIsSinkholeChecked(sinkholeChecked);
+      const exmnPplChecked = checkedNodesData.some((node) =>
+        isExmnResultPplNode(node),
+      );
+      const exmnMnhlChecked = checkedNodesData.some((node) =>
+        isExmnResultMnhlNode(node),
+      );
+      setIsExmnPplChecked(exmnPplChecked);
+      setIsExmnMnhlChecked(exmnMnhlChecked);
+      setActiveLayerSettingOrder((currentOrder) => {
+        const activeKeys = [
+          waterDepthChecked ? "waterDepthLegend" : null,
+          sinkholeChecked ? "sinkhole" : null,
+          agedPipeChecked ? "agedPipe" : null,
+          exmnPplChecked ? "exmnPpl" : null,
+          exmnMnhlChecked ? "exmnMnhl" : null,
+        ].filter((key): key is string => Boolean(key));
 
-    handleWaterDepthVisibility(checkedIds, checkedNodesData);
-    const agedPipeChecked = checkedNodesData.some((node) => isAgedPipeLayerNode(node));
-    const waterDepthChecked = checkedNodesData.some((node) =>
-      WATER_DEPTH_LAYER_TYPES.includes(String(node?.data?.lyrTyNm ?? "")),
-    );
-    setIsAgedPipeChecked(agedPipeChecked);
-    const fldngHstryChecked = checkedNodesData.some((node) => isFldngHstryNode(node));
-    setIsFldngHstryChecked(fldngHstryChecked);
-    if (!fldngHstryChecked) {
-      clearFldngHstrySelection();
-    }
-    const sinkholeChecked = checkedNodesData.some((node) => isSinkholeLayerNode(node));
-    setIsSinkholeChecked(sinkholeChecked);
-    const exmnPplChecked = checkedNodesData.some((node) => isExmnResultPplNode(node));
-    const exmnMnhlChecked = checkedNodesData.some((node) => isExmnResultMnhlNode(node));
-    setIsExmnPplChecked(exmnPplChecked);
-    setIsExmnMnhlChecked(exmnMnhlChecked);
-    setActiveLayerSettingOrder((currentOrder) => {
-      const activeKeys = [
-        waterDepthChecked ? "waterDepthLegend" : null,
-        sinkholeChecked ? "sinkhole" : null,
-        agedPipeChecked ? "agedPipe" : null,
-        exmnPplChecked ? "exmnPpl" : null,
-        exmnMnhlChecked ? "exmnMnhl" : null,
-      ].filter((key): key is string => Boolean(key));
-
-      return [
-        ...currentOrder.filter((key) => activeKeys.includes(key)),
-        ...activeKeys.filter((key) => !currentOrder.includes(key)),
-      ];
-    });
-    if (sinkholeChecked) {
-      setSinkholeSelectionVersion((version) => version + 1);
-    }
-    if (!sinkholeChecked) {
-      removeSinkholeLayer();
-      closeSinkholeDetail();
-    }
-    if (!exmnPplChecked) {
-      removeExmnResultLayer("PPL");
-    }
-    if (!exmnMnhlChecked) {
-      removeExmnResultLayer("MNHL");
-    }
-  }, [clearFldngHstrySelection, closeSinkholeDetail, handleWaterDepthVisibility, removeExmnResultLayer, removeFlowDirectionLayer, removeSinkholeLayer, retainFlowDirectionUsageCodes]);
+        return [
+          ...currentOrder.filter((key) => activeKeys.includes(key)),
+          ...activeKeys.filter((key) => !currentOrder.includes(key)),
+        ];
+      });
+      if (sinkholeChecked) {
+        setSinkholeSelectionVersion((version) => version + 1);
+      }
+      if (!sinkholeChecked) {
+        removeSinkholeLayer();
+        closeSinkholeDetail();
+      }
+      if (!exmnPplChecked) {
+        removeExmnResultLayer("PPL");
+      }
+      if (!exmnMnhlChecked) {
+        removeExmnResultLayer("MNHL");
+      }
+    },
+    [
+      clearFldngHstrySelection,
+      closeSinkholeDetail,
+      handleWaterDepthVisibility,
+      removeExmnResultLayer,
+      removeFlowDirectionLayer,
+      removeSinkholeLayer,
+      retainFlowDirectionUsageCodes,
+    ],
+  );
 
   const waterDepthLegendItems = useMemo(
     () => extractWaterDepthLegendItems(checkedNodesDataRef.current ?? []),
     [checkedLayerLegendVersion],
   );
 
-
   const applySinkholeYearRange = useCallback(
     (nextRange: SinkholeYearRange) => {
-      const normalizedRange = normalizeSinkholeYearRange(nextRange, sinkholeYearRange);
+      const normalizedRange = normalizeSinkholeYearRange(
+        nextRange,
+        sinkholeYearRange,
+      );
       setSinkholeYearRange(normalizedRange);
       setIsSinkholePopupFilterActive(false);
       setAppliedSinkholeFilters(
-        normalizeSinkholeFilters(buildSinkholeFiltersFromYearRange(normalizedRange, sinkholeScope), sinkholeScope),
+        normalizeSinkholeFilters(
+          buildSinkholeFiltersFromYearRange(normalizedRange, sinkholeScope),
+          sinkholeScope,
+        ),
       );
       setSinkholeSelectionVersion((version) => version + 1);
     },
@@ -5553,8 +6369,15 @@ const Map = () => {
   );
 
   // 현재 체크된 특수 레이어만 하단 설정영역에 모아 렌더링하기 위한 패널 목록이다.
-  const activeLayerSettingItems = useMemo<{ key: string; label: string; content: ReactNode }[]>(() => {
-    const nextItems: { key: string; label: string; content: ReactNode; order: number }[] = [];
+  const activeLayerSettingItems = useMemo<
+    { key: string; label: string; content: ReactNode }[]
+  >(() => {
+    const nextItems: {
+      key: string;
+      label: string;
+      content: ReactNode;
+      order: number;
+    }[] = [];
     const resolveSettingOrder = (key: string, fallback: number) => {
       const index = activeLayerSettingOrder.indexOf(key);
       return index >= 0 ? index : fallback;
@@ -5647,7 +6470,9 @@ const Map = () => {
                           border: `1px solid ${item.borderColor}`,
                         }}
                       />
-                      <span className="text-[1rem] font-medium text-label">{item.label}</span>
+                      <span className="text-[1rem] font-medium text-label">
+                        {item.label}
+                      </span>
                     </div>
                   ))}
                 </div>
@@ -5689,23 +6514,36 @@ const Map = () => {
     },
     [],
   );
-  const restoreActiveLayerSettingScroll = useCallback((element: HTMLDivElement | null) => {
-    if (!element) return;
+  const restoreActiveLayerSettingScroll = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (!element) return;
 
-    const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
-    element.scrollTop = Math.min(activeLayerSettingScrollTopRef.current, maxScrollTop);
-  }, []);
+      const maxScrollTop = Math.max(
+        0,
+        element.scrollHeight - element.clientHeight,
+      );
+      element.scrollTop = Math.min(
+        activeLayerSettingScrollTopRef.current,
+        maxScrollTop,
+      );
+    },
+    [],
+  );
 
   // 선택된 설정이 있을 때만 하단 전용 섹션을 노출하고, 세로 공간이 부족하면 내부 스크롤로 처리한다.
   const ActiveLayerSettingView = useCallback(() => {
     if (activeLayerSettingItems.length === 0) return null;
 
     return (
-      <div className="mt-3 flex h-[34vh] min-h-[24rem] max-h-[32rem] flex-col overflow-hidden rounded-sm border border-border bg-background shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
+      <div className="mt-3 flex h-[34vh] max-h-[32rem] min-h-[24rem] flex-col overflow-hidden rounded-sm border border-border bg-background shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
         <div className="border-b border-border bg-secondary px-3 py-2">
           <div className="flex items-center justify-between gap-2">
-            <span className="text-[1.2rem] font-semibold text-label">선택 레이어 설정</span>
-            <span className="text-[1rem] text-muted-foreground">{activeLayerSettingItems.length}건</span>
+            <span className="text-[1.2rem] font-semibold text-label">
+              선택 레이어 설정
+            </span>
+            <span className="text-[1rem] text-muted-foreground">
+              {activeLayerSettingItems.length}건
+            </span>
           </div>
           <div className="mt-1 flex flex-wrap gap-1">
             {activeLayerSettingItems.map((item) => (
@@ -5746,7 +6584,8 @@ const Map = () => {
     if (!isAgedPipeChecked) return;
 
     const baseLayerCode = Object.values(GisApp.layerCode ?? {}).find(
-      (item: any) => item?.lyrTyNm === AGED_PIPE_LAYER_TYPE && item?.actlLyrYn === "Y",
+      (item: any) =>
+        item?.lyrTyNm === AGED_PIPE_LAYER_TYPE && item?.actlLyrYn === "Y",
     ) as any;
 
     if (!baseLayerCode) return;
@@ -5789,7 +6628,8 @@ const Map = () => {
     if (!isFldngHstryChecked) return;
 
     const baseLayerCode = Object.values(GisApp.layerCode ?? {}).find(
-      (item: any) => item?.lyrTyNm === FLOOD_HISTORY_LAYER_TYPE && item?.actlLyrYn === "Y",
+      (item: any) =>
+        item?.lyrTyNm === FLOOD_HISTORY_LAYER_TYPE && item?.actlLyrYn === "Y",
     ) as any;
 
     if (!baseLayerCode) return;
@@ -5817,29 +6657,34 @@ const Map = () => {
     };
   }, [isFldngHstryChecked, mapReady]);
 
-  const openAnalysisPopup = useCallback((popupKey: WindowPopupKey) => {
-    const popup = openWindowPopup(popupKey);
-    if (!popup) {
-      alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
-      return null;
-    }
+  const openAnalysisPopup = useCallback(
+    (popupKey: WindowPopupKey) => {
+      const popup = openWindowPopup(popupKey);
+      if (!popup) {
+        alert(
+          "브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.",
+        );
+        return null;
+      }
 
-    if (popupKey === "pipeAnalysisPopup") {
-      pipeAnalysisPopupWindowRef.current = popup;
-    }
+      if (popupKey === "pipeAnalysisPopup") {
+        pipeAnalysisPopupWindowRef.current = popup;
+      }
 
-    if (popupKey === "flowRiskPopup") {
-      clearWaterRiskPopupCloseWatcher();
-      waterRiskPopupWindowRef.current = popup;
-      waterRiskPopupCloseWatcherRef.current = window.setInterval(() => {
-        if (!popup.closed) return;
+      if (popupKey === "flowRiskPopup") {
         clearWaterRiskPopupCloseWatcher();
-        waterRiskPopupWindowRef.current = null;
-      }, 300);
-    }
+        waterRiskPopupWindowRef.current = popup;
+        waterRiskPopupCloseWatcherRef.current = window.setInterval(() => {
+          if (!popup.closed) return;
+          clearWaterRiskPopupCloseWatcher();
+          waterRiskPopupWindowRef.current = null;
+        }, 300);
+      }
 
-    return popup;
-  }, [clearWaterRiskPopupCloseWatcher]);
+      return popup;
+    },
+    [clearWaterRiskPopupCloseWatcher],
+  );
 
   const openGisEditSessionPopup = useCallback(() => {
     const existingPopup = gisEditSessionPopupWindowRef.current;
@@ -5925,117 +6770,159 @@ const Map = () => {
     gisEditPipeSnapSourceRef.current?.clear();
   }, []);
 
-  const buildGisEditPipeSnapPreviewFeatures = useCallback((excludedChangeId?: string | null) => {
-    const normalizedExcludedChangeId = String(excludedChangeId ?? "").trim();
-    const geoJson = new GeoJSON();
+  const buildGisEditPipeSnapPreviewFeatures = useCallback(
+    (excludedChangeId?: string | null) => {
+      const normalizedExcludedChangeId = String(excludedChangeId ?? "").trim();
+      const geoJson = new GeoJSON();
 
-    return gisEdit.changes
-      .filter((change) => change.layerId === "tb_ms_swage_ppl")
-      .filter((change) => !change.attributeOnly && change.editType !== "DELETE" && Boolean(change.afterGeometry))
-      .filter((change) => change.changeId !== normalizedExcludedChangeId)
-      .map((change) => {
-        const feature = geoJson.readFeature(
-          {
-            type: "Feature",
-            geometry: change.afterGeometry,
-            properties: {
-              fid: change.fid ?? change.featureRef?.fid ?? change.objectId ?? change.changeId,
-              layerId: change.layerId,
-              changeId: change.changeId,
+      return gisEdit.changes
+        .filter((change) => change.layerId === "tb_ms_swage_ppl")
+        .filter(
+          (change) =>
+            !change.attributeOnly &&
+            change.editType !== "DELETE" &&
+            Boolean(change.afterGeometry),
+        )
+        .filter((change) => change.changeId !== normalizedExcludedChangeId)
+        .map((change) => {
+          const feature = geoJson.readFeature(
+            {
+              type: "Feature",
+              geometry: change.afterGeometry,
+              properties: {
+                fid:
+                  change.fid ??
+                  change.featureRef?.fid ??
+                  change.objectId ??
+                  change.changeId,
+                layerId: change.layerId,
+                changeId: change.changeId,
+              },
             },
-          },
+            {
+              dataProjection: FLOW_DIRECTION_SRS,
+              featureProjection: GisApp.TO_PROJ,
+            },
+          );
+          feature.setId(`gis-edit-snap:${change.changeId}`);
+          return feature;
+        });
+    },
+    [gisEdit.changes],
+  );
+
+  const loadGisEditPipeSnapSource = useCallback(
+    async (options?: {
+      excludedFid?: string | null;
+      excludedChangeId?: string | null;
+    }) => {
+      const map = gisMaps.current;
+      const source = ensureGisEditPipeSnapSource();
+      if (!map || !source) return;
+
+      const size = map.getSize?.();
+      const view = map.getView?.();
+      if (!size || !view?.calculateExtent) return;
+
+      const normalizedExcludedFid = normalizeGisEditFid(
+        options?.excludedFid ?? "",
+      );
+      const normalizedExcludedChangeId = String(
+        options?.excludedChangeId ?? "",
+      ).trim();
+      const hiddenPipeFidSet = new Set(
+        gisEdit.changes
+          .filter((change) => change.layerId === "tb_ms_swage_ppl")
+          .filter(
+            (change) => !change.attributeOnly && change.editType !== "DELETE",
+          )
+          .map((change) =>
+            normalizeGisEditFid(
+              change.fid ?? change.featureRef?.fid ?? change.objectId,
+            ),
+          )
+          .filter((fid) => /^\d+$/.test(fid)),
+      );
+      if (/^\d+$/.test(normalizedExcludedFid)) {
+        hiddenPipeFidSet.add(normalizedExcludedFid);
+      }
+
+      const previewSnapFeatures = buildGisEditPipeSnapPreviewFeatures(
+        normalizedExcludedChangeId,
+      );
+      source.clear();
+      if (previewSnapFeatures.length > 0) {
+        source.addFeatures(previewSnapFeatures);
+      }
+
+      const screenExtent = view.calculateExtent(size);
+      const requestExtent = expandGisEditPipeSnapExtent(screenExtent);
+      const [minX, minY, maxX, maxY] = requestExtent;
+      const bboxFilter = `BBOX(geom, ${minX}, ${minY}, ${maxX}, ${maxY}, '${GisApp.TO_PROJ}')`;
+      const cqlFilter = bboxFilter;
+
+      const requestSeq = gisEditPipeSnapRequestSeqRef.current + 1;
+      gisEditPipeSnapRequestSeqRef.current = requestSeq;
+      gisEditPipeSnapAbortControllerRef.current?.abort();
+      const abortController = new AbortController();
+      gisEditPipeSnapAbortControllerRef.current = abortController;
+
+      try {
+        const layerModule = GisApp.Module.layer as any;
+        const storageName = String(layerModule?.storageNm ?? "hasudo:");
+        const params = new URLSearchParams({
+          SERVICE: "WFS",
+          VERSION: "1.1.0",
+          REQUEST: "GetFeature",
+          TYPENAME: `${storageName}tb_ms_swage_ppl`,
+          SRSNAME: GisApp.TO_PROJ,
+          OUTPUTFORMAT: "application/json",
+          CQL_FILTER: cqlFilter,
+        });
+        const response = await getRawJson(
+          `${GisApp.GEOSERVER_URL}?${params.toString()}`,
           {
-            dataProjection: FLOW_DIRECTION_SRS,
-            featureProjection: GisApp.TO_PROJ,
+            signal: abortController.signal,
           },
         );
-        feature.setId(`gis-edit-snap:${change.changeId}`);
-        return feature;
-      });
-  }, [gisEdit.changes]);
+        if (requestSeq !== gisEditPipeSnapRequestSeqRef.current) return;
+        if (abortController.signal.aborted) return;
 
-  const loadGisEditPipeSnapSource = useCallback(async (options?: { excludedFid?: string | null; excludedChangeId?: string | null }) => {
-    const map = gisMaps.current;
-    const source = ensureGisEditPipeSnapSource();
-    if (!map || !source) return;
+        const featureCollection = getFeatureCollection(response);
+        const features = new GeoJSON()
+          .readFeatures(featureCollection, {
+            dataProjection: GisApp.TO_PROJ,
+            featureProjection: GisApp.TO_PROJ,
+          })
+          .filter(
+            (feature: any) =>
+              !hiddenPipeFidSet.has(getGisEditFeatureFid(feature)),
+          );
 
-    const size = map.getSize?.();
-    const view = map.getView?.();
-    if (!size || !view?.calculateExtent) return;
-
-    const normalizedExcludedFid = normalizeGisEditFid(options?.excludedFid ?? "");
-    const normalizedExcludedChangeId = String(options?.excludedChangeId ?? "").trim();
-    const hiddenPipeFidSet = new Set(
-      gisEdit.changes
-        .filter((change) => change.layerId === "tb_ms_swage_ppl")
-        .filter((change) => !change.attributeOnly && change.editType !== "DELETE")
-        .map((change) => normalizeGisEditFid(change.fid ?? change.featureRef?.fid ?? change.objectId))
-        .filter((fid) => /^\d+$/.test(fid)),
-    );
-    if (/^\d+$/.test(normalizedExcludedFid)) {
-      hiddenPipeFidSet.add(normalizedExcludedFid);
-    }
-
-    const previewSnapFeatures = buildGisEditPipeSnapPreviewFeatures(normalizedExcludedChangeId);
-    source.clear();
-    if (previewSnapFeatures.length > 0) {
-      source.addFeatures(previewSnapFeatures);
-    }
-
-    const screenExtent = view.calculateExtent(size);
-    const requestExtent = expandGisEditPipeSnapExtent(screenExtent);
-    const [minX, minY, maxX, maxY] = requestExtent;
-    const bboxFilter = `BBOX(geom, ${minX}, ${minY}, ${maxX}, ${maxY}, '${GisApp.TO_PROJ}')`;
-    const cqlFilter = bboxFilter;
-
-    const requestSeq = gisEditPipeSnapRequestSeqRef.current + 1;
-    gisEditPipeSnapRequestSeqRef.current = requestSeq;
-    gisEditPipeSnapAbortControllerRef.current?.abort();
-    const abortController = new AbortController();
-    gisEditPipeSnapAbortControllerRef.current = abortController;
-
-    try {
-      const layerModule = GisApp.Module.layer as any;
-      const storageName = String(layerModule?.storageNm ?? "hasudo:");
-      const params = new URLSearchParams({
-        SERVICE: "WFS",
-        VERSION: "1.1.0",
-        REQUEST: "GetFeature",
-        TYPENAME: `${storageName}tb_ms_swage_ppl`,
-        SRSNAME: GisApp.TO_PROJ,
-        OUTPUTFORMAT: "application/json",
-        CQL_FILTER: cqlFilter,
-      });
-      const response = await getRawJson(`${GisApp.GEOSERVER_URL}?${params.toString()}`, {
-        signal: abortController.signal,
-      });
-      if (requestSeq !== gisEditPipeSnapRequestSeqRef.current) return;
-      if (abortController.signal.aborted) return;
-
-      const featureCollection = getFeatureCollection(response);
-      const features = new GeoJSON().readFeatures(featureCollection, {
-        dataProjection: GisApp.TO_PROJ,
-        featureProjection: GisApp.TO_PROJ,
-      }).filter((feature: any) => !hiddenPipeFidSet.has(getGisEditFeatureFid(feature)));
-
-      source.clear();
-      source.addFeatures(features);
-      if (previewSnapFeatures.length > 0) {
-        source.addFeatures(previewSnapFeatures);
+        source.clear();
+        source.addFeatures(features);
+        if (previewSnapFeatures.length > 0) {
+          source.addFeatures(previewSnapFeatures);
+        }
+      } catch (error) {
+        if ((error as Error)?.name === "AbortError") return;
+        console.error("GIS ?? ???? ?? source ?? ??:", error);
+        source.clear();
+        if (previewSnapFeatures.length > 0) {
+          source.addFeatures(previewSnapFeatures);
+        }
+      } finally {
+        if (gisEditPipeSnapAbortControllerRef.current === abortController) {
+          gisEditPipeSnapAbortControllerRef.current = null;
+        }
       }
-    } catch (error) {
-      if ((error as Error)?.name === "AbortError") return;
-      console.error("GIS ?? ???? ?? source ?? ??:", error);
-      source.clear();
-      if (previewSnapFeatures.length > 0) {
-        source.addFeatures(previewSnapFeatures);
-      }
-    } finally {
-      if (gisEditPipeSnapAbortControllerRef.current === abortController) {
-        gisEditPipeSnapAbortControllerRef.current = null;
-      }
-    }
-  }, [buildGisEditPipeSnapPreviewFeatures, ensureGisEditPipeSnapSource, gisEdit.changes]);
+    },
+    [
+      buildGisEditPipeSnapPreviewFeatures,
+      ensureGisEditPipeSnapSource,
+      gisEdit.changes,
+    ],
+  );
 
   const restoreGisEditOriginalPipeMask = useCallback(() => {
     gisEditOriginalLayerFilterRef.current.forEach((originalFilter, layer) => {
@@ -6062,59 +6949,77 @@ const Map = () => {
     gisMaps.current?.renderSync?.();
   }, []);
 
-  const applyGisEditOriginalPipeMask = useCallback((hiddenFids: string[]) => {
-    const hiddenFidSet = new Set(
-      hiddenFids
-        .map((fid) => normalizeGisEditFid(fid))
-        .filter(Boolean),
-    );
+  const applyGisEditOriginalPipeMask = useCallback(
+    (hiddenFids: string[]) => {
+      const hiddenFidSet = new Set(
+        hiddenFids.map((fid) => normalizeGisEditFid(fid)).filter(Boolean),
+      );
 
-    if (hiddenFidSet.size === 0) {
-      restoreGisEditOriginalPipeMask();
-      return;
-    }
-
-    const map = gisMaps.current;
-    if (!map) return;
-
-    const filter = buildGisEditHiddenPipeFilter(Array.from(hiddenFidSet));
-    map.getAllLayers?.().forEach((layer: any) => {
-      const layerTypeName = String(layer?.get?.("lyrTyNm") ?? "").trim();
-      if (layerTypeName !== "tb_ms_swage_ppl") return;
-
-      const source = layer.getSource?.();
-      if (source?.updateParams && filter) {
-        const params = { ...(source.getParams?.() ?? {}) };
-        if (!gisEditOriginalLayerFilterRef.current.has(layer)) {
-          gisEditOriginalLayerFilterRef.current.set(layer, String(params.CQL_FILTER ?? "").trim() || null);
-        }
-        const originalFilter = gisEditOriginalLayerFilterRef.current.get(layer);
-        params.CQL_FILTER = originalFilter ? `(${originalFilter}) AND (${filter})` : filter;
-        params._t = Date.now();
-        source.updateParams(params);
-        source.refresh?.();
-        source.changed?.();
-        layer.changed?.();
+      if (hiddenFidSet.size === 0) {
+        restoreGisEditOriginalPipeMask();
+        return;
       }
 
-      source?.getFeatures?.().forEach((feature: any) => {
-        const fid = getGisEditFeatureFid(feature);
-        const shouldHide = hiddenFidSet.has(fid);
-        if (shouldHide && !gisEditOriginalFeatureStyleRef.current.has(feature)) {
-          gisEditOriginalFeatureStyleRef.current.set(feature, feature.getStyle?.());
-          feature.setStyle?.(() => []);
-          feature.changed?.();
-        }
-        if (!shouldHide && gisEditOriginalFeatureStyleRef.current.has(feature)) {
-          feature.setStyle?.(gisEditOriginalFeatureStyleRef.current.get(feature));
-          gisEditOriginalFeatureStyleRef.current.delete(feature);
-          feature.changed?.();
-        }
-      });
-    });
+      const map = gisMaps.current;
+      if (!map) return;
 
-    gisMaps.current?.renderSync?.();
-  }, [restoreGisEditOriginalPipeMask]);
+      const filter = buildGisEditHiddenPipeFilter(Array.from(hiddenFidSet));
+      map.getAllLayers?.().forEach((layer: any) => {
+        const layerTypeName = String(layer?.get?.("lyrTyNm") ?? "").trim();
+        if (layerTypeName !== "tb_ms_swage_ppl") return;
+
+        const source = layer.getSource?.();
+        if (source?.updateParams && filter) {
+          const params = { ...(source.getParams?.() ?? {}) };
+          if (!gisEditOriginalLayerFilterRef.current.has(layer)) {
+            gisEditOriginalLayerFilterRef.current.set(
+              layer,
+              String(params.CQL_FILTER ?? "").trim() || null,
+            );
+          }
+          const originalFilter =
+            gisEditOriginalLayerFilterRef.current.get(layer);
+          params.CQL_FILTER = originalFilter
+            ? `(${originalFilter}) AND (${filter})`
+            : filter;
+          params._t = Date.now();
+          source.updateParams(params);
+          source.refresh?.();
+          source.changed?.();
+          layer.changed?.();
+        }
+
+        source?.getFeatures?.().forEach((feature: any) => {
+          const fid = getGisEditFeatureFid(feature);
+          const shouldHide = hiddenFidSet.has(fid);
+          if (
+            shouldHide &&
+            !gisEditOriginalFeatureStyleRef.current.has(feature)
+          ) {
+            gisEditOriginalFeatureStyleRef.current.set(
+              feature,
+              feature.getStyle?.(),
+            );
+            feature.setStyle?.(() => []);
+            feature.changed?.();
+          }
+          if (
+            !shouldHide &&
+            gisEditOriginalFeatureStyleRef.current.has(feature)
+          ) {
+            feature.setStyle?.(
+              gisEditOriginalFeatureStyleRef.current.get(feature),
+            );
+            gisEditOriginalFeatureStyleRef.current.delete(feature);
+            feature.changed?.();
+          }
+        });
+      });
+
+      gisMaps.current?.renderSync?.();
+    },
+    [restoreGisEditOriginalPipeMask],
+  );
 
   const ensureGisEditVertexLayer = useCallback(() => {
     const map = gisMaps.current;
@@ -6157,9 +7062,14 @@ const Map = () => {
     if (!vertexSource) return;
 
     vertexSource.getFeatures().forEach((feature: any) => {
-      const handleKind = String(feature?.get?.("handleKind") ?? "") as VertexHandleMeta["kind"];
-      const handleSelectionKey = String(feature?.get?.("handleSelectionKey") ?? "");
-      const isSelected = Boolean(selectedHandleKey) && handleSelectionKey === selectedHandleKey;
+      const handleKind = String(
+        feature?.get?.("handleKind") ?? "",
+      ) as VertexHandleMeta["kind"];
+      const handleSelectionKey = String(
+        feature?.get?.("handleSelectionKey") ?? "",
+      );
+      const isSelected =
+        Boolean(selectedHandleKey) && handleSelectionKey === selectedHandleKey;
       feature.setStyle(getGisEditVertexHandleStyle(handleKind, isSelected));
     });
     vertexSource.changed?.();
@@ -6176,52 +7086,69 @@ const Map = () => {
     gisEdit.isSnapEnabled &&
     gisEdit.selectedLayer?.layerId === "tb_ms_swage_ppl";
 
-  const collectGisEditSnapFeatures = useCallback((targetFeature: any) => {
-    const map = gisMaps.current;
-    const previewSource = gisEditPreviewSourceRef.current;
-    const selectedLayerId = gisEdit.selectedLayer?.layerId;
-    if (!map || !previewSource || !selectedLayerId) return [] as any[];
+  const collectGisEditSnapFeatures = useCallback(
+    (targetFeature: any) => {
+      const map = gisMaps.current;
+      const previewSource = gisEditPreviewSourceRef.current;
+      const selectedLayerId = gisEdit.selectedLayer?.layerId;
+      if (!map || !previewSource || !selectedLayerId) return [] as any[];
 
-    const hiddenFidSet = new Set(
-      gisEdit.changes
-        .filter((change) => change.editType === "DELETE")
-        .map((change) => normalizeGisEditFid(change.fid ?? change.featureRef?.fid ?? change.objectId))
-        .filter(Boolean),
-    );
-    const seen = new Set<string>();
-    const snapFeatures: any[] = [];
-    const targetChangeId = String(targetFeature?.get?.("changeId") ?? "").trim();
+      const hiddenFidSet = new Set(
+        gisEdit.changes
+          .filter((change) => change.editType === "DELETE")
+          .map((change) =>
+            normalizeGisEditFid(
+              change.fid ?? change.featureRef?.fid ?? change.objectId,
+            ),
+          )
+          .filter(Boolean),
+      );
+      const seen = new Set<string>();
+      const snapFeatures: any[] = [];
+      const targetChangeId = String(
+        targetFeature?.get?.("changeId") ?? "",
+      ).trim();
 
-    const registerFeature = (feature: any) => {
-      if (!feature || feature === targetFeature) return;
-      if (!feature.getGeometry?.()) return;
-      if (getSelectedFeatureLayerTypeName(feature) !== selectedLayerId) return;
+      const registerFeature = (feature: any) => {
+        if (!feature || feature === targetFeature) return;
+        if (!feature.getGeometry?.()) return;
+        if (getSelectedFeatureLayerTypeName(feature) !== selectedLayerId)
+          return;
 
-      const changeId = String(feature.get?.("changeId") ?? "").trim();
-      if (changeId && changeId === targetChangeId) return;
-      if (String(feature.get?.("editType") ?? "").trim() === "DELETE") return;
+        const changeId = String(feature.get?.("changeId") ?? "").trim();
+        if (changeId && changeId === targetChangeId) return;
+        if (String(feature.get?.("editType") ?? "").trim() === "DELETE") return;
 
-      const fid = getGisEditFeatureFid(feature);
-      if (fid && hiddenFidSet.has(fid)) return;
+        const fid = getGisEditFeatureFid(feature);
+        if (fid && hiddenFidSet.has(fid)) return;
 
-      const objectKey = changeId || fid || String(feature.get?.("objectId") ?? feature.getId?.() ?? "");
-      const featureKey = `${selectedLayerId}:${objectKey}`;
-      if (!objectKey || seen.has(featureKey)) return;
+        const objectKey =
+          changeId ||
+          fid ||
+          String(feature.get?.("objectId") ?? feature.getId?.() ?? "");
+        const featureKey = `${selectedLayerId}:${objectKey}`;
+        if (!objectKey || seen.has(featureKey)) return;
 
-      seen.add(featureKey);
-      snapFeatures.push(feature);
-    };
+        seen.add(featureKey);
+        snapFeatures.push(feature);
+      };
 
-    previewSource.getFeatures().forEach(registerFeature);
-    map.getAllLayers?.().forEach((layer: any) => {
-      if (layer === gisEditPreviewLayerRef.current || layer === gisEditVertexLayerRef.current) return;
-      const layerTypeName = String(layer?.get?.("lyrTyNm") ?? "").trim();
-      if (layerTypeName !== selectedLayerId) return;
-      layer.getSource?.()?.getFeatures?.().forEach(registerFeature);
-    });
+      previewSource.getFeatures().forEach(registerFeature);
+      map.getAllLayers?.().forEach((layer: any) => {
+        if (
+          layer === gisEditPreviewLayerRef.current ||
+          layer === gisEditVertexLayerRef.current
+        )
+          return;
+        const layerTypeName = String(layer?.get?.("lyrTyNm") ?? "").trim();
+        if (layerTypeName !== selectedLayerId) return;
+        layer.getSource?.()?.getFeatures?.().forEach(registerFeature);
+      });
 
-    return snapFeatures;
-  }, [gisEdit.changes, gisEdit.selectedLayer?.layerId]);
+      return snapFeatures;
+    },
+    [gisEdit.changes, gisEdit.selectedLayer?.layerId],
+  );
 
   const removeGisEditDrawInteraction = useCallback(() => {
     const map = gisMaps.current;
@@ -6264,29 +7191,32 @@ const Map = () => {
     setGisEditPreviewCursor("");
   }, [clearGisEditVertexLayer, setGisEditPreviewCursor]);
 
-  const refreshGisEditTargetLayers = useCallback((layerTypeNames: string[], focusFid?: string | null) => {
-    const refreshTargetNames = new Set(
-      (layerTypeNames.length > 0 ? layerTypeNames : ["tb_ms_swage_ppl"])
-        .map((layerTypeName) => String(layerTypeName ?? "").trim())
-        .filter(Boolean),
-    );
-    const map = gisMaps.current;
-    map?.getAllLayers?.().forEach((layer: any) => {
-      const layerTypeName = String(layer?.get?.("lyrTyNm") ?? "").trim();
-      if (!refreshTargetNames.has(layerTypeName)) return;
+  const refreshGisEditTargetLayers = useCallback(
+    (layerTypeNames: string[], focusFid?: string | null) => {
+      const refreshTargetNames = new Set(
+        (layerTypeNames.length > 0 ? layerTypeNames : ["tb_ms_swage_ppl"])
+          .map((layerTypeName) => String(layerTypeName ?? "").trim())
+          .filter(Boolean),
+      );
+      const map = gisMaps.current;
+      map?.getAllLayers?.().forEach((layer: any) => {
+        const layerTypeName = String(layer?.get?.("lyrTyNm") ?? "").trim();
+        if (!refreshTargetNames.has(layerTypeName)) return;
 
-      const source = layer.getSource?.();
-      source?.updateParams?.({ _t: Date.now() });
-      source?.refresh?.();
-      source?.changed?.();
-      layer.changed?.();
-    });
+        const source = layer.getSource?.();
+        source?.updateParams?.({ _t: Date.now() });
+        source?.refresh?.();
+        source?.changed?.();
+        layer.changed?.();
+      });
 
-    if (focusFid) {
-      const core = GisApp.Module.layer as any;
-      core?.showSearchResultsFromGeoJSON?.("tb_ms_swage_ppl", focusFid);
-    }
-  }, []);
+      if (focusFid) {
+        const core = GisApp.Module.layer as any;
+        core?.showSearchResultsFromGeoJSON?.("tb_ms_swage_ppl", focusFid);
+      }
+    },
+    [],
+  );
 
   // GIS 편집 진입 시에는 화면 안 인라인 세션을 우선 표시하고, 윈도우 팝업은 사용자가 명시적으로 연다.
   const handleToggleGisEdit = useCallback(() => {
@@ -6310,19 +7240,22 @@ const Map = () => {
   }, [openGisEditSessionPopup, syncGisEditSessionPopup]);
 
   // 툴바 버튼은 현재 지도 중심 또는 다음 피처 선택을 기준으로 로컬 변경분을 만든다.
-  const handleSelectGisEditTool = useCallback((tool: "ADD" | "MOVE" | "VERTEX_EDIT" | "DELETE") => {
-    if (gisEdit.activeTool === tool) {
-      gisEdit.deactivateTool();
+  const handleSelectGisEditTool = useCallback(
+    (tool: "ADD" | "MOVE" | "VERTEX_EDIT" | "DELETE") => {
+      if (gisEdit.activeTool === tool) {
+        gisEdit.deactivateTool();
+        removeGisEditDrawInteraction();
+        removeGisEditInteractions();
+        return;
+      }
+
       removeGisEditDrawInteraction();
       removeGisEditInteractions();
-      return;
-    }
-
-    removeGisEditDrawInteraction();
-    removeGisEditInteractions();
-    gisEdit.activateTool(tool, gisMaps.current);
-    setIsOpen(false);
-  }, [gisEdit, removeGisEditDrawInteraction, removeGisEditInteractions]);
+      gisEdit.activateTool(tool, gisMaps.current);
+      setIsOpen(false);
+    },
+    [gisEdit, removeGisEditDrawInteraction, removeGisEditInteractions],
+  );
 
   const handleCloseGisEdit = useCallback(() => {
     removeGisEditInteractions();
@@ -6349,9 +7282,12 @@ const Map = () => {
     const payload = gisEdit.save(gisMaps.current);
     if (!payload) return;
 
-    const invalidRequiredChange = findInvalidPipeRequiredChange(payload.changes);
+    const invalidRequiredChange = findInvalidPipeRequiredChange(
+      payload.changes,
+    );
     if (invalidRequiredChange) {
-      const message = "관리기관코드, 시설관리번호, 기관관리번호, 용도는 필수 입력 항목입니다.";
+      const message =
+        "관리기관코드, 시설관리번호, 기관관리번호, 용도는 필수 입력 항목입니다.";
       alert(message);
       gisEdit.announceStatus(message);
       setGisEditDetailChangeId(invalidRequiredChange.changeId);
@@ -6362,12 +7298,20 @@ const Map = () => {
     setIsGisEditSaving(true);
     gisEdit.announceStatus("관로 편집 변경분을 저장 중입니다.");
     try {
-      const response = await postRawJson("/sewerage-service/api/v1/map/gisEditSessions/save", payload);
+      const response = await postRawJson(
+        "/sewerage-service/api/v1/map/gisEditSessions/save",
+        payload,
+      );
       const results = Array.isArray(response?.results) ? response.results : [];
-      const refreshLayerTypeNames = Array.isArray(response?.refreshLayerTypeNames)
+      const refreshLayerTypeNames = Array.isArray(
+        response?.refreshLayerTypeNames,
+      )
         ? response.refreshLayerTypeNames
         : results.flatMap((result: any) => result?.refreshLayerTypeNames ?? []);
-      const focusFid = results.find((result: any) => result?.fid && result?.editType !== "DELETE")?.fid ?? null;
+      const focusFid =
+        results.find(
+          (result: any) => result?.fid && result?.editType !== "DELETE",
+        )?.fid ?? null;
 
       removeGisEditInteractions();
       removeGisEditDrawInteraction();
@@ -6378,11 +7322,15 @@ const Map = () => {
       setGisEditDetailChangeId(null);
       setIsOpen(false);
       closeGisEditSessionPopup();
-      gisEdit.announceStatus(response?.message ?? "하수관로 편집 저장이 완료되었습니다.");
+      gisEdit.announceStatus(
+        response?.message ?? "하수관로 편집 저장이 완료되었습니다.",
+      );
     } catch (error) {
       console.error("GIS 편집 저장 실패:", error);
       const apiError = error as Error & { body?: any };
-      gisEdit.announceStatus(`하수관로 편집 저장 실패: ${apiError.body?.message ?? apiError.message}`);
+      gisEdit.announceStatus(
+        `하수관로 편집 저장 실패: ${apiError.body?.message ?? apiError.message}`,
+      );
     } finally {
       setIsGisEditSaving(false);
     }
@@ -6397,109 +7345,131 @@ const Map = () => {
     removeGisEditInteractions,
   ]);
 
-  const handleApplyGisEditPipeBasicInfo = useCallback((changeId: string, basicInfo: GisEditPipeBasicInfo) => {
-    gisEdit.updateChangeBasicInfo(changeId, basicInfo);
-  }, [gisEdit.updateChangeBasicInfo]);
+  const handleApplyGisEditPipeBasicInfo = useCallback(
+    (changeId: string, basicInfo: GisEditPipeBasicInfo) => {
+      gisEdit.updateChangeBasicInfo(changeId, basicInfo);
+    },
+    [gisEdit.updateChangeBasicInfo],
+  );
 
-  const canSelectFeatureDuringGisEdit = useCallback((feature: any) => {
-    if (!gisEdit.isEditMode) return true;
-    if (!gisEdit.activeTool) return true;
+  const canSelectFeatureDuringGisEdit = useCallback(
+    (feature: any) => {
+      if (!gisEdit.isEditMode) return true;
+      if (!gisEdit.activeTool) return true;
 
-    if (
-      gisEdit.selectedLayer?.layerId === "tb_ms_swage_ppl" &&
-      getSelectedFeatureLayerTypeName(feature) !== "tb_ms_swage_ppl"
-    ) {
-      gisEdit.announceStatus("하수관로를 선택해주세요.");
-    }
-    return false;
-  }, [gisEdit]);
-
-  const GisEditAwareDetailView = useCallback((props: any) => {
-    const activeRightPanelTab = rightPanelTabs.find((tab) => tab.id === activeRightPanelTabId) ?? null;
-    const panelFeatureData = activeRightPanelTab?.featureData ?? props.featureData;
-    const currentChange = gisEditDetailChangeRef.current;
-    const currentFeatureData = gisEditDetailFeatureDataRef.current;
-    const isEditMode = gisEditIsEditModeRef.current;
-    const selectedLayerTypeName = getSelectedFeatureLayerTypeName(panelFeatureData);
-    const panelSinkholeDetail = activeRightPanelTab?.kind === "sinkhole"
-      ? activeRightPanelTab.sinkholeDetail ?? selectedSinkholeDetail
-      : selectedSinkholeDetail;
-    const panelSinkholeNearbyPipes = activeRightPanelTab?.kind === "sinkhole"
-      ? activeRightPanelTab.nearbyPipes ?? selectedSinkholeNearbyPipes
-      : selectedSinkholeNearbyPipes;
-    const tabsView = (
-      <RightPanelBookmarkTabs
-        tabs={rightPanelTabs}
-        activeTabId={activeRightPanelTabId}
-        onActivate={activateRightPanelTab}
-        onBack={activateRightPanelTab}
-      />
-    );
-    const closeActiveTab = () => {
-      if (activeRightPanelTabId) {
-        closeRightPanelTab(activeRightPanelTabId);
-        return;
+      if (
+        gisEdit.selectedLayer?.layerId === "tb_ms_swage_ppl" &&
+        getSelectedFeatureLayerTypeName(feature) !== "tb_ms_swage_ppl"
+      ) {
+        gisEdit.announceStatus("하수관로를 선택해주세요.");
+      }
+      return false;
+    },
+    [gisEdit],
+  );
+
+  const GisEditAwareDetailView = useCallback(
+    (props: any) => {
+      const activeRightPanelTab =
+        rightPanelTabs.find((tab) => tab.id === activeRightPanelTabId) ?? null;
+      const panelFeatureData =
+        activeRightPanelTab?.featureData ?? props.featureData;
+      const currentChange = gisEditDetailChangeRef.current;
+      const currentFeatureData = gisEditDetailFeatureDataRef.current;
+      const isEditMode = gisEditIsEditModeRef.current;
+      const selectedLayerTypeName =
+        getSelectedFeatureLayerTypeName(panelFeatureData);
+      const panelSinkholeDetail =
+        activeRightPanelTab?.kind === "sinkhole"
+          ? (activeRightPanelTab.sinkholeDetail ?? selectedSinkholeDetail)
+          : selectedSinkholeDetail;
+      const panelSinkholeNearbyPipes =
+        activeRightPanelTab?.kind === "sinkhole"
+          ? (activeRightPanelTab.nearbyPipes ?? selectedSinkholeNearbyPipes)
+          : selectedSinkholeNearbyPipes;
+      const tabsView = (
+        <RightPanelBookmarkTabs
+          tabs={rightPanelTabs}
+          activeTabId={activeRightPanelTabId}
+          onActivate={activateRightPanelTab}
+          onBack={activateRightPanelTab}
+        />
+      );
+      const closeActiveTab = () => {
+        if (activeRightPanelTabId) {
+          closeRightPanelTab(activeRightPanelTabId);
+          return;
+        }
+        props.onClose?.();
+      };
+
+      if (
+        isEditMode &&
+        currentChange &&
+        currentChange.layerId === "tb_ms_swage_ppl" &&
+        currentChange.editType !== "DELETE"
+      ) {
+        return (
+          <>
+            {tabsView}
+            <GisEditPipeSessionPopup
+              change={currentChange}
+              featureData={currentFeatureData ?? panelFeatureData}
+              onClose={() => {
+                setGisEditDetailChangeId(null);
+                closeActiveTab();
+              }}
+              onSave={handleApplyGisEditPipeBasicInfo}
+            />
+          </>
+        );
+      }
+
+      if (
+        selectedLayerTypeName === SINKHOLE_LAYER_TYPE &&
+        panelSinkholeDetail
+      ) {
+        return (
+          <>
+            {tabsView}
+            <SinkholeDetailPanel
+              detail={panelSinkholeDetail}
+              nearbyPipes={panelSinkholeNearbyPipes}
+              radiusMeters={sinkholeRadiusMeters}
+              onSelectPipe={focusSinkholeNearbyPipe}
+              onClose={closeActiveTab}
+            />
+          </>
+        );
       }
-      props.onClose?.();
-    };
 
-    if (isEditMode && currentChange && currentChange.layerId === "tb_ms_swage_ppl" && currentChange.editType !== "DELETE") {
       return (
         <>
           {tabsView}
-          <GisEditPipeSessionPopup
-            change={currentChange}
-            featureData={currentFeatureData ?? panelFeatureData}
+          <FeatureClickEventPopup
+            {...props}
+            featureData={panelFeatureData}
+            surveyMode={activeRightPanelTab?.category === "exmnSurvey"}
             onClose={() => {
               setGisEditDetailChangeId(null);
               closeActiveTab();
             }}
-            onSave={handleApplyGisEditPipeBasicInfo}
           />
         </>
       );
-    }
-
-    if (selectedLayerTypeName === SINKHOLE_LAYER_TYPE && panelSinkholeDetail) {
-      return (
-        <>
-          {tabsView}
-          <SinkholeDetailPanel
-            detail={panelSinkholeDetail}
-            nearbyPipes={panelSinkholeNearbyPipes}
-            radiusMeters={sinkholeRadiusMeters}
-            onSelectPipe={focusSinkholeNearbyPipe}
-            onClose={closeActiveTab}
-          />
-        </>
-      );
-    }
-
-    return (
-      <>
-        {tabsView}
-        <FeatureClickEventPopup
-          {...props}
-          featureData={panelFeatureData}
-          surveyMode={activeRightPanelTab?.category === "exmnSurvey"}
-          onClose={() => {
-            setGisEditDetailChangeId(null);
-            closeActiveTab();
-          }}
-        />
-      </>
-    );
-  }, [
-    activateRightPanelTab,
-    activeRightPanelTabId,
-    closeRightPanelTab,
-    focusSinkholeNearbyPipe,
-    handleApplyGisEditPipeBasicInfo,
-    rightPanelTabs,
-    selectedSinkholeDetail,
-    selectedSinkholeNearbyPipes,
-    sinkholeRadiusMeters,
-  ]);
+    },
+    [
+      activateRightPanelTab,
+      activeRightPanelTabId,
+      closeRightPanelTab,
+      focusSinkholeNearbyPipe,
+      handleApplyGisEditPipeBasicInfo,
+      rightPanelTabs,
+      selectedSinkholeDetail,
+      selectedSinkholeNearbyPipes,
+      sinkholeRadiusMeters,
+    ],
+  );
   useEffect(() => {
     if (!mapReady || !gisMaps.current || !gisEdit.isEditMode) return;
 
@@ -6516,10 +7486,14 @@ const Map = () => {
           : null;
       if (vertexHandleFeature) {
         event.preventDefault?.();
-        const handleKind = String(vertexHandleFeature.get?.("handleKind") ?? "");
+        const handleKind = String(
+          vertexHandleFeature.get?.("handleKind") ?? "",
+        );
         if (handleKind !== "vertex") {
           clearSelectedVertexHandle();
-          gisEdit.announceStatus("흰색 midpoint는 드래그해서 새 꼭지점을 추가할 수 있습니다. Delete 삭제 대상은 주황색 실꼭지점입니다.");
+          gisEdit.announceStatus(
+            "흰색 midpoint는 드래그해서 새 꼭지점을 추가할 수 있습니다. Delete 삭제 대상은 주황색 실꼭지점입니다.",
+          );
           return;
         }
 
@@ -6527,15 +7501,20 @@ const Map = () => {
           vertexHandleFeature.get?.("handleSelectionKey") ?? "",
         );
         gisEditSelectedVertexMetaListRef.current =
-          (vertexHandleFeature.get?.("handleMetaList") as VertexHandleMeta[] | undefined) ?? null;
+          (vertexHandleFeature.get?.("handleMetaList") as
+            | VertexHandleMeta[]
+            | undefined) ?? null;
         applySelectedVertexHandleStyle();
-        gisEdit.announceStatus("주황색 실꼭지점을 선택했습니다. Delete 키를 누르면 해당 꼭지점을 삭제합니다.");
+        gisEdit.announceStatus(
+          "주황색 실꼭지점을 선택했습니다. Delete 키를 누르면 해당 꼭지점을 삭제합니다.",
+        );
         return;
       }
 
       const previewFeature = map.forEachFeatureAtPixel(
         event.pixel,
-        (feature: any) => String(feature?.get?.("changeId") ?? "").trim() ? feature : null,
+        (feature: any) =>
+          String(feature?.get?.("changeId") ?? "").trim() ? feature : null,
         { hitTolerance: 12 },
       );
       // 편집 도구가 켜진 동안에는 공통 Select를 우회하므로 원본 WFS 피처도 여기서 직접 판정한다.
@@ -6545,8 +7524,10 @@ const Map = () => {
           ? map.forEachFeatureAtPixel(
               event.pixel,
               (feature: any) => {
-                if (String(feature?.get?.("changeId") ?? "").trim()) return null;
-                return getSelectedFeatureLayerTypeName(feature) === gisEdit.selectedLayer?.layerId
+                if (String(feature?.get?.("changeId") ?? "").trim())
+                  return null;
+                return getSelectedFeatureLayerTypeName(feature) ===
+                  gisEdit.selectedLayer?.layerId
                   ? feature
                   : null;
               },
@@ -6572,11 +7553,22 @@ const Map = () => {
         return;
       }
 
-      if (gisEdit.activeTool === "MOVE" || gisEdit.activeTool === "VERTEX_EDIT") {
-        if (gisEdit.activeTool === "MOVE" && typeof editSelection.changeId === "string" && editSelection.changeId) {
+      if (
+        gisEdit.activeTool === "MOVE" ||
+        gisEdit.activeTool === "VERTEX_EDIT"
+      ) {
+        if (
+          gisEdit.activeTool === "MOVE" &&
+          typeof editSelection.changeId === "string" &&
+          editSelection.changeId
+        ) {
           gisEditMoveGripMetaRef.current = {
             changeId: String(editSelection.changeId),
-            meta: getClosestGeometryVertexMeta(selectedFeature.getGeometry?.(), map, event.coordinate),
+            meta: getClosestGeometryVertexMeta(
+              selectedFeature.getGeometry?.(),
+              map,
+              event.coordinate,
+            ),
           };
         }
         setGisEditDetailChangeId(null);
@@ -6587,11 +7579,14 @@ const Map = () => {
       }
 
       const selectedChangeId =
-        typeof editSelection.changeId === "string" ? editSelection.changeId : "";
-      const selectedChange = gisEdit.changes.find((change) => change.changeId === selectedChangeId);
+        typeof editSelection.changeId === "string"
+          ? editSelection.changeId
+          : "";
+      const selectedChange = gisEdit.changes.find(
+        (change) => change.changeId === selectedChangeId,
+      );
       const canOpenPipeDetail =
-        selectedChangeId &&
-        editSelection.editType !== "DELETE";
+        selectedChangeId && editSelection.editType !== "DELETE";
 
       if (canOpenPipeDetail) {
         openGisEditPipeDetail(selectedChangeId);
@@ -6632,15 +7627,21 @@ const Map = () => {
   ]);
 
   const gisEditSelectedLayerId = gisEdit.selectedLayer?.layerId ?? "";
-  const gisEditSelectedLayerGeometryType = gisEdit.selectedLayer?.geometryType ?? null;
-  const gisEditSelectedLayerPreviewColors = gisEdit.selectedLayer?.previewColors ?? null;
+  const gisEditSelectedLayerGeometryType =
+    gisEdit.selectedLayer?.geometryType ?? null;
+  const gisEditSelectedLayerPreviewColors =
+    gisEdit.selectedLayer?.previewColors ?? null;
 
   useEffect(() => {
     if (!mapReady || !gisMaps.current || !gisEdit.isEditMode) return;
 
     const map = gisMaps.current;
 
-    if (gisEdit.activeTool !== "ADD" || !gisEditSelectedLayerId || !gisEditSelectedLayerGeometryType) {
+    if (
+      gisEdit.activeTool !== "ADD" ||
+      !gisEditSelectedLayerId ||
+      !gisEditSelectedLayerGeometryType
+    ) {
       removeGisEditDrawInteraction();
       return;
     }
@@ -6661,7 +7662,9 @@ const Map = () => {
       source: drawSource,
       type: drawType,
     });
-    const pipeSnapSource = shouldUsePipeSnapSource ? ensureGisEditPipeSnapSource() : null;
+    const pipeSnapSource = shouldUsePipeSnapSource
+      ? ensureGisEditPipeSnapSource()
+      : null;
 
     draw.on("drawstart", () => {
       setGisEditPreviewCursor("crosshair");
@@ -6669,14 +7672,24 @@ const Map = () => {
 
     draw.on("drawend", (event: any) => {
       try {
-        const pipeSnapSource = shouldUsePipeSnapSource ? ensureGisEditPipeSnapSource() : null;
+        const pipeSnapSource = shouldUsePipeSnapSource
+          ? ensureGisEditPipeSnapSource()
+          : null;
         if (pipeSnapSource?.getFeatures?.().length) {
-          applyGeometryVertexSnaps(event.feature.getGeometry(), pipeSnapSource, map, 20);
+          applyGeometryVertexSnaps(
+            event.feature.getGeometry(),
+            pipeSnapSource,
+            map,
+            20,
+          );
         }
-        const geometryObject = new GeoJSON().writeGeometryObject(event.feature.getGeometry(), {
-          featureProjection: GisApp.TO_PROJ,
-          dataProjection: FLOW_DIRECTION_SRS,
-        }) as Record<string, unknown>;
+        const geometryObject = new GeoJSON().writeGeometryObject(
+          event.feature.getGeometry(),
+          {
+            featureProjection: GisApp.TO_PROJ,
+            dataProjection: FLOW_DIRECTION_SRS,
+          },
+        ) as Record<string, unknown>;
         const changeId = gisEdit.registerAddGeometry(geometryObject);
         if (changeId) {
           event.feature.setId(`gis-edit:${changeId}`);
@@ -6685,9 +7698,18 @@ const Map = () => {
           event.feature.set("objectId", changeId);
           event.feature.set("layerId", gisEditSelectedLayerId);
           event.feature.set("changeId", changeId);
-          event.feature.set("layerPointColor", gisEditSelectedLayerPreviewColors?.pointColor ?? "");
-          event.feature.set("layerLineColor", gisEditSelectedLayerPreviewColors?.lineColor ?? "");
-          event.feature.set("layerFillColor", gisEditSelectedLayerPreviewColors?.fillColor ?? "");
+          event.feature.set(
+            "layerPointColor",
+            gisEditSelectedLayerPreviewColors?.pointColor ?? "",
+          );
+          event.feature.set(
+            "layerLineColor",
+            gisEditSelectedLayerPreviewColors?.lineColor ?? "",
+          );
+          event.feature.set(
+            "layerFillColor",
+            gisEditSelectedLayerPreviewColors?.fillColor ?? "",
+          );
           event.feature.set("isInteractionTarget", false);
           event.feature.set("isDragging", false);
           event.feature.set("previewLabel", "신규 추가");
@@ -6727,11 +7749,15 @@ const Map = () => {
             gisEdit.deactivateTool();
             removeGisEditDrawInteraction();
           }, 0);
-          gisEdit.announceStatus("하수관로 신규 객체를 지도에 추가했습니다. 우측 상세정보를 입력한 뒤 저장하세요.");
+          gisEdit.announceStatus(
+            "하수관로 신규 객체를 지도에 추가했습니다. 우측 상세정보를 입력한 뒤 저장하세요.",
+          );
         }
       } catch (error) {
         console.error("GIS 편집 ADD geometry 변환 실패:", error);
-        gisEdit.announceStatus("신규 geometry를 추가하지 못했습니다. 다시 시도해 주세요.");
+        gisEdit.announceStatus(
+          "신규 geometry를 추가하지 못했습니다. 다시 시도해 주세요.",
+        );
       } finally {
         setGisEditPreviewCursor("crosshair");
       }
@@ -6778,10 +7804,14 @@ const Map = () => {
 
     // 트리 체크 상태나 관종 레이어 선택이 바뀌면 유하방향 API vector layer를 추가/갱신/제거한다.
     if (isFlowDirectionChecked) {
-      const requestUsageCodes = flowDirectionSelectionRequestUsageCodesRef.current;
+      const requestUsageCodes =
+        flowDirectionSelectionRequestUsageCodesRef.current;
       flowDirectionSelectionRequestUsageCodesRef.current = null;
       if (requestUsageCodes && requestUsageCodes.length === 0) return;
-      loadFlowDirectionLayer(flowDirectionLayerInfo, requestUsageCodes ?? undefined);
+      loadFlowDirectionLayer(
+        flowDirectionLayerInfo,
+        requestUsageCodes ?? undefined,
+      );
     } else {
       removeFlowDirectionLayer();
     }
@@ -6799,7 +7829,11 @@ const Map = () => {
 
     // 유하방향이 켜진 상태에서 지도 이동/확대축소가 끝나면 현재 BBOX 기준으로 다시 조회한다.
     const key = gisMaps.current.on("moveend", () => {
-      if (!flowDirectionCheckedRef.current || !flowDirectionLayerInfoRef.current) return;
+      if (
+        !flowDirectionCheckedRef.current ||
+        !flowDirectionLayerInfoRef.current
+      )
+        return;
       loadFlowDirectionLayer(flowDirectionLayerInfoRef.current);
     });
 
@@ -6821,17 +7855,27 @@ const Map = () => {
 
     const geoJson = new GeoJSON();
     const layerPreviewColorMap = new globalThis.Map<string, any>(
-      gisEdit.editableLayers.map((layer) => [layer.layerId, layer.previewColors] as const),
+      gisEdit.editableLayers.map(
+        (layer) => [layer.layerId, layer.previewColors] as const,
+      ),
     );
     const existingFeatureMap = new globalThis.Map<string, any>(
-      source.getFeatures().map((feature: any) => [String(feature.get("changeId") ?? ""), feature] as const),
+      source
+        .getFeatures()
+        .map(
+          (feature: any) =>
+            [String(feature.get("changeId") ?? ""), feature] as const,
+        ),
     );
     const nextChangeIdSet = new Set<string>();
 
     gisEdit.changes.forEach((change) => {
       if (change.attributeOnly) return;
 
-      const geometry = change.editType === "DELETE" ? change.beforeGeometry : change.afterGeometry;
+      const geometry =
+        change.editType === "DELETE"
+          ? change.beforeGeometry
+          : change.afterGeometry;
       if (!geometry) return;
 
       const previewEditType =
@@ -6839,9 +7883,11 @@ const Map = () => {
           ? gisEdit.pendingInteraction.editType
           : change.editType;
       const previewLabel =
-        gisEdit.focusedChangeId === change.changeId && previewEditType === "MOVE"
+        gisEdit.focusedChangeId === change.changeId &&
+        previewEditType === "MOVE"
           ? "드래그 이동"
-          : gisEdit.focusedChangeId === change.changeId && previewEditType === "VERTEX_EDIT"
+          : gisEdit.focusedChangeId === change.changeId &&
+              previewEditType === "VERTEX_EDIT"
             ? "꼭지점 편집"
             : previewEditType === "DELETE"
               ? "삭제 예정"
@@ -6902,7 +7948,10 @@ const Map = () => {
       feature.set("layerPointColor", previewColors?.pointColor ?? "");
       feature.set("layerLineColor", previewColors?.lineColor ?? "");
       feature.set("layerFillColor", previewColors?.fillColor ?? "");
-      feature.set("isInteractionTarget", gisEdit.focusedChangeId === change.changeId);
+      feature.set(
+        "isInteractionTarget",
+        gisEdit.focusedChangeId === change.changeId,
+      );
       feature.set("isDragging", Boolean(feature.get("isDragging")));
       feature.set("previewLabel", previewLabel);
       feature.setStyle(createGisEditPreviewStyle(feature));
@@ -6917,7 +7966,6 @@ const Map = () => {
     source.changed?.();
     gisEditPreviewLayerRef.current?.changed?.();
     gisMaps.current?.renderSync?.();
-
   }, [
     clearGisEditPreviewLayer,
     ensureGisEditPreviewLayer,
@@ -6930,7 +7978,8 @@ const Map = () => {
   ]);
 
   useEffect(() => {
-    if (!mapReady || !gisEdit.isEditMode || gisEdit.changes.length === 0) return;
+    if (!mapReady || !gisEdit.isEditMode || gisEdit.changes.length === 0)
+      return;
     ensureGisEditPreviewLayer();
     gisEditPreviewSourceRef.current?.changed?.();
     gisEditPreviewLayerRef.current?.changed?.();
@@ -6946,8 +7995,14 @@ const Map = () => {
     const fids = gisEdit.changes
       .filter((change) => change.layerId === "tb_ms_swage_ppl")
       .filter((change) => !change.attributeOnly)
-      .filter((change) => change.editType !== "ADD" && change.editType !== "DELETE")
-      .map((change) => normalizeGisEditFid(change.fid ?? change.featureRef?.fid ?? change.objectId))
+      .filter(
+        (change) => change.editType !== "ADD" && change.editType !== "DELETE",
+      )
+      .map((change) =>
+        normalizeGisEditFid(
+          change.fid ?? change.featureRef?.fid ?? change.objectId,
+        ),
+      )
       .filter((fid) => /^\d+$/.test(fid));
     return Array.from(new Set(fids)).sort().join(",");
   }, [gisEdit.changes]);
@@ -6958,7 +8013,9 @@ const Map = () => {
       return;
     }
 
-    applyGisEditOriginalPipeMask(gisEditMaskedPipeFidKey ? gisEditMaskedPipeFidKey.split(",") : []);
+    applyGisEditOriginalPipeMask(
+      gisEditMaskedPipeFidKey ? gisEditMaskedPipeFidKey.split(",") : [],
+    );
   }, [
     applyGisEditOriginalPipeMask,
     gisEdit.isEditMode,
@@ -6967,13 +8024,19 @@ const Map = () => {
     restoreGisEditOriginalPipeMask,
   ]);
 
-  useEffect(() => () => {
-    restoreGisEditOriginalPipeMask();
-  }, [restoreGisEditOriginalPipeMask]);
+  useEffect(
+    () => () => {
+      restoreGisEditOriginalPipeMask();
+    },
+    [restoreGisEditOriginalPipeMask],
+  );
 
-  useEffect(() => () => {
-    clearGisEditPipeSnapSource();
-  }, [clearGisEditPipeSnapSource]);
+  useEffect(
+    () => () => {
+      clearGisEditPipeSnapSource();
+    },
+    [clearGisEditPipeSnapSource],
+  );
 
   useEffect(() => {
     if (!mapReady || !gisMaps.current) return;
@@ -6986,8 +8049,10 @@ const Map = () => {
       gisEdit.pendingInteraction?.editType === "VERTEX_EDIT" ||
       gisEdit.pendingInteraction?.editType === "MOVE"
         ? normalizeGisEditFid(
-            gisEdit.changes.find((change) => change.changeId === gisEdit.pendingInteraction?.changeId)?.fid ??
-            "",
+            gisEdit.changes.find(
+              (change) =>
+                change.changeId === gisEdit.pendingInteraction?.changeId,
+            )?.fid ?? "",
           )
         : "";
 
@@ -7013,8 +8078,10 @@ const Map = () => {
         gisEdit.pendingInteraction?.editType === "VERTEX_EDIT" ||
         gisEdit.pendingInteraction?.editType === "MOVE"
           ? normalizeGisEditFid(
-              gisEdit.changes.find((change) => change.changeId === gisEdit.pendingInteraction?.changeId)?.fid ??
-              "",
+              gisEdit.changes.find(
+                (change) =>
+                  change.changeId === gisEdit.pendingInteraction?.changeId,
+              )?.fid ?? "",
             )
           : "";
       void loadGisEditPipeSnapSource({
@@ -7035,7 +8102,13 @@ const Map = () => {
   ]);
 
   useEffect(() => {
-    if (!mapReady || !gisMaps.current || !gisEdit.isEditMode || !gisEdit.pendingInteraction) return;
+    if (
+      !mapReady ||
+      !gisMaps.current ||
+      !gisEdit.isEditMode ||
+      !gisEdit.pendingInteraction
+    )
+      return;
 
     const source = ensureGisEditPreviewLayer();
     const map = gisMaps.current;
@@ -7043,7 +8116,10 @@ const Map = () => {
 
     const targetFeature = source
       .getFeatures()
-      .find((feature: any) => feature.get("changeId") === gisEdit.pendingInteraction?.changeId);
+      .find(
+        (feature: any) =>
+          feature.get("changeId") === gisEdit.pendingInteraction?.changeId,
+      );
     if (!targetFeature) {
       gisEdit.clearPendingInteraction();
       return;
@@ -7062,11 +8138,17 @@ const Map = () => {
     };
     const usePipeSnapSource =
       shouldUsePipeSnapSource &&
-      (gisEdit.pendingInteraction.editType === "MOVE" || gisEdit.pendingInteraction.editType === "VERTEX_EDIT");
-    const pipeSnapSource = usePipeSnapSource ? ensureGisEditPipeSnapSource() : null;
-    const pipeSnapSourceHasFeatures = Boolean(pipeSnapSource?.getFeatures?.().length);
+      (gisEdit.pendingInteraction.editType === "MOVE" ||
+        gisEdit.pendingInteraction.editType === "VERTEX_EDIT");
+    const pipeSnapSource = usePipeSnapSource
+      ? ensureGisEditPipeSnapSource()
+      : null;
+    const pipeSnapSourceHasFeatures = Boolean(
+      pipeSnapSource?.getFeatures?.().length,
+    );
     const snapFeatures =
-      (!usePipeSnapSource || !pipeSnapSourceHasFeatures) && gisEdit.isSnapEnabled
+      (!usePipeSnapSource || !pipeSnapSourceHasFeatures) &&
+      gisEdit.isSnapEnabled
         ? collectGisEditSnapFeatures(targetFeature)
         : [];
 
@@ -7074,19 +8156,33 @@ const Map = () => {
       const translate = new Translate({ features, hitTolerance: 10 });
       let lastTranslateCoordinate: number[] | null = null;
       let translateStartCoordinate: number[] | null = null;
-      let originalMoveGeometrySnapshot = targetFeature.getGeometry?.()?.clone?.() ?? null;
+      let originalMoveGeometrySnapshot =
+        targetFeature.getGeometry?.()?.clone?.() ?? null;
       let moveGripCoordinate: number[] | null = null;
       const moveGripMeta =
-        gisEditMoveGripMetaRef.current?.changeId === gisEdit.pendingInteraction.changeId
+        gisEditMoveGripMetaRef.current?.changeId ===
+        gisEdit.pendingInteraction.changeId
           ? gisEditMoveGripMetaRef.current.meta
           : null;
       translate.on("translatestart", (event: any) => {
-        lastTranslateCoordinate = Array.isArray(event?.coordinate) ? event.coordinate : null;
-        translateStartCoordinate = Array.isArray(event?.coordinate) ? event.coordinate : null;
-        originalMoveGeometrySnapshot = targetFeature.getGeometry?.()?.clone?.() ?? null;
+        lastTranslateCoordinate = Array.isArray(event?.coordinate)
+          ? event.coordinate
+          : null;
+        translateStartCoordinate = Array.isArray(event?.coordinate)
+          ? event.coordinate
+          : null;
+        originalMoveGeometrySnapshot =
+          targetFeature.getGeometry?.()?.clone?.() ?? null;
         moveGripCoordinate =
-          getGeometryVertexCoordinateByMeta(originalMoveGeometrySnapshot, moveGripMeta) ??
-          getClosestGeometryVertexCoordinate(originalMoveGeometrySnapshot, map, translateStartCoordinate);
+          getGeometryVertexCoordinateByMeta(
+            originalMoveGeometrySnapshot,
+            moveGripMeta,
+          ) ??
+          getClosestGeometryVertexCoordinate(
+            originalMoveGeometrySnapshot,
+            map,
+            translateStartCoordinate,
+          );
         targetFeature.set("isDragging", true);
         targetFeature.set("previewLabel", "이동 중");
         targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
@@ -7096,21 +8192,36 @@ const Map = () => {
         map.renderSync?.();
       });
       translate.on("translating", (event: any) => {
-        lastTranslateCoordinate = Array.isArray(event?.coordinate) ? event.coordinate : lastTranslateCoordinate;
-        if (originalMoveGeometrySnapshot?.clone && Array.isArray(lastTranslateCoordinate) && Array.isArray(translateStartCoordinate)) {
+        lastTranslateCoordinate = Array.isArray(event?.coordinate)
+          ? event.coordinate
+          : lastTranslateCoordinate;
+        if (
+          originalMoveGeometrySnapshot?.clone &&
+          Array.isArray(lastTranslateCoordinate) &&
+          Array.isArray(translateStartCoordinate)
+        ) {
           const geometry = originalMoveGeometrySnapshot.clone();
-          const deltaX = Number(lastTranslateCoordinate[0] ?? 0) - Number(translateStartCoordinate[0] ?? 0);
-          const deltaY = Number(lastTranslateCoordinate[1] ?? 0) - Number(translateStartCoordinate[1] ?? 0);
+          const deltaX =
+            Number(lastTranslateCoordinate[0] ?? 0) -
+            Number(translateStartCoordinate[0] ?? 0);
+          const deltaY =
+            Number(lastTranslateCoordinate[1] ?? 0) -
+            Number(translateStartCoordinate[1] ?? 0);
           geometry.translate(deltaX, deltaY);
           if (pipeSnapSource && pipeSnapSourceHasFeatures) {
-            const movedGripCoordinate =
-              Array.isArray(moveGripCoordinate)
-                ? [
-                    Number(moveGripCoordinate[0] ?? 0) + deltaX,
-                    Number(moveGripCoordinate[1] ?? 0) + deltaY,
-                  ]
-                : lastTranslateCoordinate;
-            applyGeometryMoveSnap(geometry, pipeSnapSource, map, movedGripCoordinate, 28);
+            const movedGripCoordinate = Array.isArray(moveGripCoordinate)
+              ? [
+                  Number(moveGripCoordinate[0] ?? 0) + deltaX,
+                  Number(moveGripCoordinate[1] ?? 0) + deltaY,
+                ]
+              : lastTranslateCoordinate;
+            applyGeometryMoveSnap(
+              geometry,
+              pipeSnapSource,
+              map,
+              movedGripCoordinate,
+              28,
+            );
           }
           targetFeature.setGeometry(geometry);
         }
@@ -7121,25 +8232,40 @@ const Map = () => {
       translate.on("translateend", (event: any) => {
         const objectId = String(targetFeature.get("objectId") ?? "");
         const layerName = gisEdit.selectedLayer?.layerName ?? "선택 레이어";
-        lastTranslateCoordinate = Array.isArray(event?.coordinate) ? event.coordinate : lastTranslateCoordinate;
+        lastTranslateCoordinate = Array.isArray(event?.coordinate)
+          ? event.coordinate
+          : lastTranslateCoordinate;
         targetFeature.set("isDragging", false);
         targetFeature.set("previewLabel", "드래그 이동");
         targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
         setGisEditPreviewCursor("grab");
-        if (originalMoveGeometrySnapshot?.clone && Array.isArray(lastTranslateCoordinate) && Array.isArray(translateStartCoordinate)) {
+        if (
+          originalMoveGeometrySnapshot?.clone &&
+          Array.isArray(lastTranslateCoordinate) &&
+          Array.isArray(translateStartCoordinate)
+        ) {
           const geometry = originalMoveGeometrySnapshot.clone();
-          const deltaX = Number(lastTranslateCoordinate[0] ?? 0) - Number(translateStartCoordinate[0] ?? 0);
-          const deltaY = Number(lastTranslateCoordinate[1] ?? 0) - Number(translateStartCoordinate[1] ?? 0);
+          const deltaX =
+            Number(lastTranslateCoordinate[0] ?? 0) -
+            Number(translateStartCoordinate[0] ?? 0);
+          const deltaY =
+            Number(lastTranslateCoordinate[1] ?? 0) -
+            Number(translateStartCoordinate[1] ?? 0);
           geometry.translate(deltaX, deltaY);
           if (pipeSnapSource && pipeSnapSourceHasFeatures) {
-            const movedGripCoordinate =
-              Array.isArray(moveGripCoordinate)
-                ? [
-                    Number(moveGripCoordinate[0] ?? 0) + deltaX,
-                    Number(moveGripCoordinate[1] ?? 0) + deltaY,
-                  ]
-                : lastTranslateCoordinate;
-            applyGeometryMoveSnap(geometry, pipeSnapSource, map, movedGripCoordinate, 28);
+            const movedGripCoordinate = Array.isArray(moveGripCoordinate)
+              ? [
+                  Number(moveGripCoordinate[0] ?? 0) + deltaX,
+                  Number(moveGripCoordinate[1] ?? 0) + deltaY,
+                ]
+              : lastTranslateCoordinate;
+            applyGeometryMoveSnap(
+              geometry,
+              pipeSnapSource,
+              map,
+              movedGripCoordinate,
+              28,
+            );
           }
           targetFeature.setGeometry(geometry);
         }
@@ -7184,8 +8310,15 @@ const Map = () => {
       const objectId = String(targetFeature.get("objectId") ?? "");
       const layerName = gisEdit.selectedLayer?.layerName ?? "선택 레이어";
 
-      if (!geometry || !geometryType || geometryType === "Point" || geometryType === "MultiPoint") {
-        gisEdit.announceStatus(`${layerName} ${objectId} 객체는 꼭지점편집 대상 geometry가 아닙니다.`);
+      if (
+        !geometry ||
+        !geometryType ||
+        geometryType === "Point" ||
+        geometryType === "MultiPoint"
+      ) {
+        gisEdit.announceStatus(
+          `${layerName} ${objectId} 객체는 꼭지점편집 대상 geometry가 아닙니다.`,
+        );
         gisEdit.clearPendingInteraction();
         return;
       }
@@ -7198,14 +8331,21 @@ const Map = () => {
         return;
       }
 
-      const renderVertexHandles = (hoveredMidpoint: VertexHandleCandidate | null = null) => {
+      const renderVertexHandles = (
+        hoveredMidpoint: VertexHandleCandidate | null = null,
+      ) => {
         vertexSource.clear();
-        buildVertexHandleFeatures(targetFeature.getGeometry?.(), map).forEach((handleFeature: Feature) => {
-          vertexSource.addFeature(handleFeature);
-        });
+        buildVertexHandleFeatures(targetFeature.getGeometry?.(), map).forEach(
+          (handleFeature: Feature) => {
+            vertexSource.addFeature(handleFeature);
+          },
+        );
         if (hoveredMidpoint) {
           vertexSource.addFeature(
-            createVertexHandleFeature(hoveredMidpoint.coordinate, hoveredMidpoint.meta),
+            createVertexHandleFeature(
+              hoveredMidpoint.coordinate,
+              hoveredMidpoint.meta,
+            ),
           );
         }
         vertexSource.changed?.();
@@ -7215,7 +8355,8 @@ const Map = () => {
       let geometryBeforeModifyKey = geometryObjectToKey(writeGeometryObject());
       let activeMidpointKey = "";
       let isDraggingHandle = false;
-      let originalGeometrySnapshot = targetFeature.getGeometry?.()?.clone?.() ?? null;
+      let originalGeometrySnapshot =
+        targetFeature.getGeometry?.()?.clone?.() ?? null;
       renderVertexHandles();
       targetFeature.set("previewLabel", "꼭지점 편집");
       targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
@@ -7249,7 +8390,8 @@ const Map = () => {
       vertexTranslate.on("translatestart", (event: any) => {
         isDraggingHandle = true;
         geometryBeforeModifyKey = geometryObjectToKey(writeGeometryObject());
-        originalGeometrySnapshot = targetFeature.getGeometry?.()?.clone?.() ?? null;
+        originalGeometrySnapshot =
+          targetFeature.getGeometry?.()?.clone?.() ?? null;
         clearSelectedVertexHandle();
         const handleFeature = event.features?.item?.(0);
         if (handleFeature) {
@@ -7265,18 +8407,29 @@ const Map = () => {
         const handleFeature = event.features?.item?.(0);
         const handleGeometry = handleFeature?.getGeometry?.();
         const nextCoordinate = handleGeometry?.getCoordinates?.();
-        const handleMeta = handleFeature?.get?.("handleMeta") as VertexHandleMeta | undefined;
+        const handleMeta = handleFeature?.get?.("handleMeta") as
+          | VertexHandleMeta
+          | undefined;
         const handleMetaList =
-          (handleFeature?.get?.("handleMetaList") as VertexHandleMeta[] | undefined) ??
-          (handleMeta ? [handleMeta] : []);
+          (handleFeature?.get?.("handleMetaList") as
+            | VertexHandleMeta[]
+            | undefined) ?? (handleMeta ? [handleMeta] : []);
 
-        if (handleMetaList.length === 0 || !Array.isArray(nextCoordinate) || !originalGeometrySnapshot?.clone) {
+        if (
+          handleMetaList.length === 0 ||
+          !Array.isArray(nextCoordinate) ||
+          !originalGeometrySnapshot?.clone
+        ) {
           return;
         }
 
         targetFeature.setGeometry(originalGeometrySnapshot.clone());
         handleMetaList.forEach((meta) => {
-          applyVertexHandleMove(targetFeature.getGeometry?.(), meta, nextCoordinate);
+          applyVertexHandleMove(
+            targetFeature.getGeometry?.(),
+            meta,
+            nextCoordinate,
+          );
         });
         targetFeature.changed?.();
         source.changed?.();
@@ -7288,10 +8441,13 @@ const Map = () => {
         const handleFeature = event.features?.item?.(0);
         const handleGeometry = handleFeature?.getGeometry?.();
         const nextCoordinate = handleGeometry?.getCoordinates?.();
-        const handleMeta = handleFeature?.get?.("handleMeta") as VertexHandleMeta | undefined;
+        const handleMeta = handleFeature?.get?.("handleMeta") as
+          | VertexHandleMeta
+          | undefined;
         const handleMetaList =
-          (handleFeature?.get?.("handleMetaList") as VertexHandleMeta[] | undefined) ??
-          (handleMeta ? [handleMeta] : []);
+          (handleFeature?.get?.("handleMetaList") as
+            | VertexHandleMeta[]
+            | undefined) ?? (handleMeta ? [handleMeta] : []);
 
         targetFeature.set("previewLabel", "꼭지점 편집");
         targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
@@ -7305,10 +8461,15 @@ const Map = () => {
         }
 
         handleMetaList.forEach((meta) => {
-          applyVertexHandleMove(targetFeature.getGeometry?.(), meta, nextCoordinate);
+          applyVertexHandleMove(
+            targetFeature.getGeometry?.(),
+            meta,
+            nextCoordinate,
+          );
         });
         const nextGeometry = writeGeometryObject();
-        const geometryChanged = geometryBeforeModifyKey !== geometryObjectToKey(nextGeometry);
+        const geometryChanged =
+          geometryBeforeModifyKey !== geometryObjectToKey(nextGeometry);
         renderVertexHandles();
         if (!geometryChanged) {
           gisEdit.announceStatus(
@@ -7391,7 +8552,11 @@ const Map = () => {
     const pendingInteraction = gisEdit.pendingInteraction;
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Delete") return;
-      if (isTypingElement(event.target) || isTypingElement(document.activeElement)) return;
+      if (
+        isTypingElement(event.target) ||
+        isTypingElement(document.activeElement)
+      )
+        return;
 
       const source = ensureGisEditPreviewLayer();
       const map = gisMaps.current;
@@ -7399,18 +8564,28 @@ const Map = () => {
 
       const targetFeature = source
         .getFeatures()
-        .find((feature: any) => feature.get("changeId") === gisEdit.pendingInteraction?.changeId);
+        .find(
+          (feature: any) =>
+            feature.get("changeId") === gisEdit.pendingInteraction?.changeId,
+        );
       if (!targetFeature) return;
 
       const selectedMetaList = gisEditSelectedVertexMetaListRef.current ?? [];
       if (selectedMetaList.length === 0) {
-        gisEdit.announceStatus("Delete로 삭제할 주황색 실꼭지점을 먼저 클릭하세요.");
+        gisEdit.announceStatus(
+          "Delete로 삭제할 주황색 실꼭지점을 먼저 클릭하세요.",
+        );
         return;
       }
 
-      const deleteResult = deleteSelectedVertexHandles(targetFeature.getGeometry?.(), selectedMetaList);
+      const deleteResult = deleteSelectedVertexHandles(
+        targetFeature.getGeometry?.(),
+        selectedMetaList,
+      );
       if (!deleteResult.ok) {
-        gisEdit.announceStatus(deleteResult.message ?? "꼭지점을 삭제하지 못했습니다.");
+        gisEdit.announceStatus(
+          deleteResult.message ?? "꼭지점을 삭제하지 못했습니다.",
+        );
         return;
       }
 
@@ -7421,7 +8596,9 @@ const Map = () => {
       const layerName = gisEdit.selectedLayer?.layerName ?? "선택 레이어";
       const geometry = targetFeature.getGeometry();
       if (!geometry) {
-        gisEdit.announceStatus("꼭지점 삭제 후 geometry를 확인하지 못했습니다.");
+        gisEdit.announceStatus(
+          "꼭지점 삭제 후 geometry를 확인하지 못했습니다.",
+        );
         return;
       }
       targetFeature.set("previewLabel", "꼭지점 편집");
@@ -7456,7 +8633,10 @@ const Map = () => {
   ]);
 
   useEffect(() => {
-    if (!gisEdit.isEditMode || (gisEdit.activeTool !== "MOVE" && gisEdit.activeTool !== "VERTEX_EDIT")) {
+    if (
+      !gisEdit.isEditMode ||
+      (gisEdit.activeTool !== "MOVE" && gisEdit.activeTool !== "VERTEX_EDIT")
+    ) {
       removeGisEditInteractions();
     }
   }, [gisEdit.activeTool, gisEdit.isEditMode, removeGisEditInteractions]);
@@ -7531,7 +8711,10 @@ const Map = () => {
       return;
     }
 
-    const effectiveFilters = normalizeSinkholeFilters(appliedSinkholeFilters, sinkholeScope);
+    const effectiveFilters = normalizeSinkholeFilters(
+      appliedSinkholeFilters,
+      sinkholeScope,
+    );
     popup.postMessage(
       {
         type: SINKHOLE_FILTER_SYNC_MESSAGE,
@@ -7577,8 +8760,14 @@ const Map = () => {
       const size = map.getSize?.() ?? [1200, 800];
       const popupWidth = 220;
       const popupHeight = 210;
-      const nextLeft = Math.min(Math.max(event.pixel[0] + 12, 12), size[0] - popupWidth - 12);
-      const nextTop = Math.min(Math.max(event.pixel[1] - 12, 12), size[1] - popupHeight - 12);
+      const nextLeft = Math.min(
+        Math.max(event.pixel[0] + 12, 12),
+        size[0] - popupWidth - 12,
+      );
+      const nextTop = Math.min(
+        Math.max(event.pixel[1] - 12, 12),
+        size[1] - popupHeight - 12,
+      );
       setFldngHstryDetailPopupPosition({
         left: nextLeft,
         top: nextTop,
@@ -7589,7 +8778,12 @@ const Map = () => {
     return () => {
       unByKey(clickKey);
     };
-  }, [isFldngHstryChecked, mapReady, selectedFldngHstryDetail, setIsSearchModalOpen]);
+  }, [
+    isFldngHstryChecked,
+    mapReady,
+    selectedFldngHstryDetail,
+    setIsSearchModalOpen,
+  ]);
 
   useEffect(() => {
     return () => {
@@ -7597,29 +8791,31 @@ const Map = () => {
     };
   }, [clearFldngHstryLayers]);
 
-
   return (
     <>
-      <div className="sn-map-control-layout bg-container relative h-[calc(100dvh-5rem)] overflow-hidden">
+      <div className="sn-map-control-layout relative h-[calc(100dvh-5rem)] overflow-hidden bg-container">
         {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">
+          <div className="absolute left-4 top-4 z-[60] max-w-[520px] rounded border border-red-200 bg-background 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">
+          <div className="absolute left-4 top-20 z-[60] max-w-[520px] rounded border border-emerald-200 bg-background px-4 py-3 text-sm text-emerald-700 shadow">
             {agedPipeDownloadProgressText}
           </div>
         ) : null}
         {selectedWaterRiskResultRow && waterRiskInfoCardStyle ? (
+          // 위험/정상 배지는 통수위험 상태를 즉시 구분하는 업무 의미색이므로 고정색을 유지한다.
           <div
             style={waterRiskInfoCardStyle}
-            className="absolute z-[61] w-[244px] overflow-hidden rounded-[12px] border border-[#d8dee8] bg-[rgba(255,255,255,0.98)] shadow-[0_14px_28px_rgba(15,23,42,0.16)]"
+            className="absolute z-[61] w-[244px] overflow-hidden rounded-[12px] border border-border bg-background shadow-blur"
           >
-            <div className="flex items-center justify-between border-b border-[#e5eaf1] bg-[#f8fafc] px-[9px] py-[7px]">
+            <div className="flex items-center justify-between border-b border-border bg-secondary px-[9px] py-[7px]">
               <div>
-                <div className="text-[10px] font-semibold text-[#64748b]">중점관리지역</div>
-                <div className="mt-[2px] text-[13px] font-bold text-[#1f2937]">
+                <div className="text-[10px] font-semibold text-muted-foreground">
+                  중점관리지역
+                </div>
+                <div className="mt-[2px] text-[13px] font-bold text-foreground">
                   {selectedWaterRiskResultRow.areaName}
                 </div>
               </div>
@@ -7630,12 +8826,14 @@ const Map = () => {
                     : "bg-[#e8f6f4] text-[#0f766e]"
                 }`}
               >
-                {buildWaterRiskStatusLabel(selectedWaterRiskResultRow.riskStatus)}
+                {buildWaterRiskStatusLabel(
+                  selectedWaterRiskResultRow.riskStatus,
+                )}
               </span>
             </div>
 
             <div className="px-[8px] py-[8px]">
-              <div className="overflow-hidden rounded-[10px] border border-[#d8dee8] bg-white shadow-[0_6px_14px_rgba(15,23,42,0.05)]">
+              <div className="overflow-hidden rounded-[10px] border border-border bg-background shadow-blur">
                 <table className="w-full table-fixed border-collapse">
                   <colgroup>
                     <col className="w-[46%]" />
@@ -7643,72 +8841,87 @@ const Map = () => {
                     <col className="w-[24%]" />
                   </colgroup>
                   <tbody>
-                    <tr className="border-b border-[#e5eaf1]">
-                      <td colSpan={2} className="border-r border-[#e5eaf1] bg-[#fbfdff] px-[9px] py-[7px] text-[10px] font-semibold leading-[1.2] text-[#1f2937]">
+                    <tr className="border-b border-border">
+                      <td
+                        colSpan={2}
+                        className="border-r border-border bg-secondary px-[9px] py-[7px] text-[10px] font-semibold leading-[1.2] text-label"
+                      >
                         예측강우량(mm/hr)
                       </td>
-                      <td className="px-[9px] py-[7px] text-right text-[12px] font-bold text-[#1f2937]">
+                      <td className="px-[9px] py-[7px] text-right text-[12px] font-bold text-foreground">
                         {selectedWaterRiskResultRow.forecastRainQty == null
                           ? "-"
-                          : selectedWaterRiskResultRow.forecastRainQty.toFixed(1)}
+                          : selectedWaterRiskResultRow.forecastRainQty.toFixed(
+                              1,
+                            )}
                       </td>
                     </tr>
 
-                    {selectedWaterRiskResultRow.pipeSummaries.map((pipe, index) => {
-                      const isDanger = pipe.runoffFlowQty > pipe.conveyQty;
-                      const isLast = index === selectedWaterRiskResultRow.pipeSummaries.length - 1;
+                    {selectedWaterRiskResultRow.pipeSummaries.map(
+                      (pipe, index) => {
+                        const isDanger = pipe.runoffFlowQty > pipe.conveyQty;
+                        const isLast =
+                          index ===
+                          selectedWaterRiskResultRow.pipeSummaries.length - 1;
 
-                      return (
-                        <Fragment key={`${pipe.pipeId}-row`}>
-                          <tr>
-                            <td
-                              rowSpan={2}
-                              className={`align-top border-r border-[#e5eaf1] px-[9px] py-[8px] ${!isLast ? "border-b border-[#e5eaf1]" : ""}`}
-                            >
-                              <div className="flex items-start justify-between gap-2">
-                                <div className="min-w-0">
-                                  <div className="text-[10px] font-semibold leading-[1.15] text-[#1f2937]">
-                                    관로
-                                    <br />
-                                    ID {index + 1}
-                                  </div>
-                                  <div className="mt-[5px] whitespace-nowrap text-[11px] font-bold leading-none text-[#1f2937]">
-                                    {pipe.pipeId}
+                        return (
+                          <Fragment key={`${pipe.pipeId}-row`}>
+                            <tr>
+                              <td
+                                rowSpan={2}
+                                className={`border-r border-border px-[9px] py-[8px] align-top ${!isLast ? "border-b border-border" : ""}`}
+                              >
+                                <div className="flex items-start justify-between gap-2">
+                                  <div className="min-w-0">
+                                    <div className="text-[10px] font-semibold leading-[1.15] text-label">
+                                      관로
+                                      <br />
+                                      ID {index + 1}
+                                    </div>
+                                    <div className="mt-[5px] whitespace-nowrap text-[11px] font-bold leading-none text-foreground">
+                                      {pipe.pipeId}
+                                    </div>
                                   </div>
+                                  <span
+                                    className={`inline-flex min-w-[40px] shrink-0 items-center justify-center rounded-[6px] px-[5px] py-[4px] text-[9px] font-bold ${
+                                      isDanger
+                                        ? "bg-[#ff1c15] text-white"
+                                        : "bg-[#eaf4ff] text-[#1565c0]"
+                                    }`}
+                                  >
+                                    {isDanger ? "위험" : "정상"}
+                                  </span>
                                 </div>
-                                <span
-                                  className={`inline-flex min-w-[40px] shrink-0 items-center justify-center rounded-[6px] px-[5px] py-[4px] text-[9px] font-bold ${
-                                    isDanger
-                                      ? "bg-[#ff1c15] text-white"
-                                      : "bg-[#eaf4ff] text-[#1565c0]"
-                                  }`}
-                                >
-                                  {isDanger ? "위험" : "정상"}
-                                </span>
-                              </div>
-                            </td>
-                            <td className="border-b border-r border-[#e5eaf1] bg-[#fbfdff] px-[9px] py-[7px] text-[10px] font-semibold leading-[1.15] text-[#1f2937]">
-                              통수량
-                              <br />
-                              (㎥/s)
-                            </td>
-                            <td className="border-b border-[#e5eaf1] px-[9px] py-[7px] text-right text-[11px] font-medium text-[#1f2937]">
-                              {pipe.conveyQty.toFixed(1)}
-                            </td>
-                          </tr>
-                          <tr className={!isLast ? "border-b border-[#e5eaf1]" : ""}>
-                            <td className="border-r border-[#e5eaf1] bg-[#fbfdff] px-[9px] py-[7px] text-[10px] font-semibold leading-[1.15] text-[#1f2937]">
-                              유출유량
-                              <br />
-                              (㎥/s)
-                            </td>
-                            <td className={`px-[9px] py-[7px] text-right text-[11px] ${isDanger ? "font-bold text-[#d32f2f]" : "font-medium text-[#1f2937]"}`}>
-                              {pipe.runoffFlowQty.toFixed(1)}
-                            </td>
-                          </tr>
-                        </Fragment>
-                      );
-                    })}
+                              </td>
+                              <td className="border-b border-r border-border bg-secondary px-[9px] py-[7px] text-[10px] font-semibold leading-[1.15] text-label">
+                                통수량
+                                <br />
+                                (㎥/s)
+                              </td>
+                              <td className="border-b border-border px-[9px] py-[7px] text-right text-[11px] font-medium text-foreground">
+                                {pipe.conveyQty.toFixed(1)}
+                              </td>
+                            </tr>
+                            <tr
+                              className={
+                                !isLast ? "border-b border-border" : ""
+                              }
+                            >
+                              <td className="border-r border-border bg-secondary px-[9px] py-[7px] text-[10px] font-semibold leading-[1.15] text-label">
+                                유출유량
+                                <br />
+                                (㎥/s)
+                              </td>
+                              <td
+                                className={`px-[9px] py-[7px] text-right text-[11px] ${isDanger ? "font-bold text-[#d32f2f]" : "font-medium text-foreground"}`}
+                              >
+                                {pipe.runoffFlowQty.toFixed(1)}
+                              </td>
+                            </tr>
+                          </Fragment>
+                        );
+                      },
+                    )}
                   </tbody>
                 </table>
               </div>
@@ -7784,7 +8997,9 @@ const Map = () => {
             <ProcSearchBar
               gisMaps={gisMaps}
               facilityTypes={facilityTypes}
-              sidoSearchZoom={isAgedPipeChecked ? AGED_PIPE_GUIDE_MIN_ZOOM : undefined}
+              sidoSearchZoom={
+                isAgedPipeChecked ? AGED_PIPE_GUIDE_MIN_ZOOM : undefined
+              }
               facilityLayerFilter={swagePrcsFcltSearchFilter}
             />
           }
@@ -7804,26 +9019,28 @@ const Map = () => {
           treeTogglePosition="center"
           zoomGuide={zoomGuide}
           layerIconVisible={(node: any) =>
-            isAgedPipeLayerNode(node)
-            || isSinkholeRootNode(node)
-            || isSbmrgDngrMapRootNode(node)
-            || isFloodDngrMapRootNode(node)
-            || isFldngHstryNode(node)
+            isAgedPipeLayerNode(node) ||
+            isSinkholeRootNode(node) ||
+            isSbmrgDngrMapRootNode(node) ||
+            isFloodDngrMapRootNode(node) ||
+            isFldngHstryNode(node)
           }
-
           defaultZoom={7.5}
           defaultLonLat={[129, 36.3]}
           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="fixed left-[480px] top-[68px] z-[90] flex min-w-[250px] items-center gap-3 rounded-sm border border-red-200 bg-background 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 className="text-[1.25rem] font-semibold leading-tight text-red-700">
+                노후관로 현황
+              </div>
+              <div className="text-[1rem] leading-tight text-muted-foreground">
+                {appliedAgedPipeFilters.elapsedYears}년 이상 ·{" "}
+                {agedPipeTotalCount.toLocaleString()}건
               </div>
             </div>
             <Button
diff --git a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
index 625edcc6f..7c21ac071 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭
- * 
+ *
  * 📄 BasicTab Component
  * Next.js App Router (app/) 기반 검색 모달의 기본정보 탭 컴포넌트
  *
@@ -8,18 +8,18 @@
  * - 하수관로, 하수처리시설, 하수처리구역, 하수맨홀, 하수펌프장, 우수토실 등 다양한 유형별 컴포넌트 렌더링
  * - useSearchModalStore를 통해 상태 관리 및 사용자 상호작용 처리
  */
-import React from 'react';
+import React from "react";
 import { SelectBox } from "@common/business_components/ui/select";
-import { Label } from '@common/components';
-import SwagePpl from './swagePpl';
-import SwagePrcsFclt from './swagePrcsFclt';
-import SwagePrcsZone from './swagePrcsZone';
-import FldngWtlvMap from './fldngWtlvMap';
-import SwageMhl from './swageMhl';
-import SwagePmstn from './swagePmstn';
-import Stofcbr from './stofcbr';
-import useSearchModalStore from '@/store/useSearchModalStore';
-
+import { Label } from "@common/components";
+import SwagePpl from "./swagePpl";
+import SwagePrcsFclt from "./swagePrcsFclt";
+import SwagePrcsZone from "./swagePrcsZone";
+import FldngWtlvMap from "./fldngWtlvMap";
+import SwageMhl from "./swageMhl";
+import SwagePmstn from "./swagePmstn";
+import Stofcbr from "./stofcbr";
+import useSearchModalStore from "@/store/useSearchModalStore";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
 // 기본정보 '구분' 선택 목록
 export const BASIC_TYPES = [
@@ -36,33 +36,37 @@ const BasicTab: React.FC = () => {
   const { basicType, setBasicType } = useSearchModalStore();
 
   return (
-    <div className="relative w-full min-h-[10vh] rounded-lg border border-border bg-background px-5 pt-5">
-      {/* 구분 */}
-      <div className="mb-3 flex items-center justify-between gap-4">
-        <div className="flex items-center">
-          <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구분</Label>
-          <SelectBox
-            className="w-[150px] mr-3"
-            selectClass="rounded-lg bg-field text-foreground"
-            label=""
-            selectArray={BASIC_TYPES}
-            onSelectValue={(value: string | number) =>
-              setBasicType(String(value))
-            }
-            value={basicType}
-            selectContentClass="z-[101]"
-          />
-        </div>
+    <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-4 gap-y-3">
+      {/* 구분과 세부 조회조건은 하나의 검색 행으로 이어서 배치한다. */}
+      <div className="flex shrink-0 items-center">
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">
+          구분
+        </Label>
+        <SelectBox
+          className="mr-3 w-[150px]"
+          selectClass="rounded-lg bg-field text-foreground"
+          label=""
+          selectArray={BASIC_TYPES}
+          onSelectValue={(value: string | number) =>
+            setBasicType(String(value))
+          }
+          value={basicType}
+          selectContentClass="z-[101]"
+        />
       </div>
-      {/* 조회 조건 */}
-      {basicType === "tb_ms_swage_ppl" && (<SwagePpl />)}  {/* 하수관로 */}
-      {basicType === "tb_il_swage_prcs_fclt" && (<SwagePrcsFclt />)} {/* 하수처리시설 */}
-      {basicType === "tb_ms_swage_prcs_zone" && (<SwagePrcsZone />)} {/* 하수처리구역 */}
-      {basicType === "tb_ms_fldng_wtlv_map" && (<FldngWtlvMap />)} {/* 침수흔적도 */}
-      {basicType === "tb_ms_swage_mhl" && (<SwageMhl />)}  {/* 하수맨홀 */}
-      {basicType === "tb_ms_swage_pmstn" && (<SwagePmstn />)}  {/* 하수펌프장 */}
-      {basicType === "tb_ms_stofcbr" && (<Stofcbr />)} {/* 우수토실 */}
-    </div>
+      <div className="min-w-0 flex-[1_1_60rem]">
+        {basicType === "tb_ms_swage_ppl" && <SwagePpl />} {/* 하수관로 */}
+        {basicType === "tb_il_swage_prcs_fclt" && <SwagePrcsFclt />}{" "}
+        {/** 하수처리시설 */}
+        {basicType === "tb_ms_swage_prcs_zone" && <SwagePrcsZone />}{" "}
+        {/** 하수처리구역 */}
+        {basicType === "tb_ms_fldng_wtlv_map" && <FldngWtlvMap />}{" "}
+        {/** 침수흔적도 */}
+        {basicType === "tb_ms_swage_mhl" && <SwageMhl />} {/* 하수맨홀 */}
+        {basicType === "tb_ms_swage_pmstn" && <SwagePmstn />} {/* 하수펌프장 */}
+        {basicType === "tb_ms_stofcbr" && <Stofcbr />} {/* 우수토실 */}
+      </div>
+    </PopupSearchPanel>
   );
 };
 
diff --git a/apps/sn/app/(map-layout)/map/searchModal/fldngWtlvMap.tsx b/apps/sn/app/(map-layout)/map/searchModal/fldngWtlvMap.tsx
index 2a6c13428..35d08b98f 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/fldngWtlvMap.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/fldngWtlvMap.tsx
@@ -1,31 +1,30 @@
-import React from 'react';
-import { Button, Input, Label } from '@common/components';
-import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
-import useSearchModalStore from '../../../store/useSearchModalStore';
-import useSearchModal from './useSearchModal';
+import React from "react";
+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 fldngWtlvMapCqlFilters = () => {
   const { ctpvCd, sggCd, var1, var2 } = useSearchModalStore.getState();
   const cqlFilters: string[] = [];
-  if (ctpvCd !== '' && ctpvCd !== '0') cqlFilters.push(`stdg_cd LIKE '${ctpvCd.trim()}%'`);
-  if (sggCd !== '' && sggCd !== '0') cqlFilters.push(`stdg_cd LIKE '${sggCd.trim()}%'`);
+  if (ctpvCd !== "" && ctpvCd !== "0")
+    cqlFilters.push(`stdg_cd LIKE '${ctpvCd.trim()}%'`);
+  if (sggCd !== "" && sggCd !== "0")
+    cqlFilters.push(`stdg_cd LIKE '${sggCd.trim()}%'`);
   if (var1) cqlFilters.push(`fldng_yr = '${var1.trim()}'`);
   if (var2) cqlFilters.push(`fldng_dstr_nm ILIKE '%${var2.trim()}%'`);
   return cqlFilters;
 };
 
 const FldngWtlvMap: React.FC = () => {
-  const {
-    var1, setVar1, var2, setVar2,
-    ctpvCd, setCtpvCd,
-    sggCd, setSggCd,
-  } = useSearchModalStore();
-  const { handleSearch } = useSearchModal();
+  const { var1, setVar1, var2, setVar2, ctpvCd, setCtpvCd, sggCd, setSggCd } =
+    useSearchModalStore();
+  const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="mb-3">
-      <div className="mb-2 flex items-center">
+    <div className="min-w-0">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}
@@ -35,34 +34,47 @@ const FldngWtlvMap: React.FC = () => {
           }}
           onSigunguChange={setSggCd}
         />
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-gray-600">침수년도</Label>
-        <Input
-          className="mr-8 w-[100px] !text-xl placeholder:text-center"
-          placeholder="YYYY"
-          value={var1}
-          onChange={(e) => setVar1(e.target.value.replace(/[^0-9]/g, '').slice(0, 4))}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              handleSearch();
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            침수년도
+          </Label>
+          <Input
+            className="w-[100px] !text-xl placeholder:text-center"
+            placeholder="YYYY"
+            value={var1}
+            onChange={(e) =>
+              setVar1(e.target.value.replace(/[^0-9]/g, "").slice(0, 4))
             }
-          }}
-        />
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-gray-600">침수재해명</Label>
-        <Input
-          className='!text-xl w-[180px] placeholder:text-center mr-8'
-          placeholder="입력"
-          value={var2}
-          onChange={(e) => setVar2(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              handleSearch();
-            }
-          }}
-        />
-        <div className="flex flex-1 justify-end">
-          <Button className="py-2 text-base" onClick={handleSearch}>조회</Button>
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleSearch();
+              }
+            }}
+          />
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            침수재해명
+          </Label>
+          <Input
+            className="w-[180px] !text-xl placeholder:text-center"
+            placeholder="입력"
+            value={var2}
+            onChange={(e) => setVar2(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleSearch();
+              }
+            }}
+          />
+        </div>
+        <div className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button onClick={handleSearch}>조회</Button>
+          <Button color="white" onClick={handleResetSearch}>
+            초기화
+          </Button>
         </div>
       </div>
     </div>
diff --git a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
index 0855fcaee..ea8a432af 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 유지관리 정보 탭
- * 
+ *
  * 📄 Operation Tab
  * Next.js App Router (app/) 기반 검색 모달 유지관리 정보 탭 컴포넌트
  *
@@ -11,37 +11,44 @@
  * - Zustand를 통한 상태 관리 및 필터 값 저장
  * - Enter 키 입력 시 자동 조회 지원
  */
-import React from 'react';
-import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import React from "react";
+import { YearRangeSelectBox } from "@/components/ui/YearRangeSelectBox";
 import { SelectBox } from "@common/business_components/ui/select";
-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';
-
+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";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
 const OperationTab: React.FC = () => {
   const { BIZ_TY_CD } = useStore();
   const {
-    workType, setWorkType,
-    var1, setVar1, var2, setVar2,
-    yearFilter, setYearFilter,
+    workType,
+    setWorkType,
+    var1,
+    setVar1,
+    var2,
+    setVar2,
+    yearFilter,
+    setYearFilter,
   } = useSearchModalStore();
-  const { handleSearch } = useSearchModal();
+  const { handleSearch, handleResetSearch } = useSearchModal();
   const { WORK_TYPES } = useOperationTab();
 
-  const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({
+  const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map((item) => ({
     val: item.lwpoCd,
     text: item.lwpoCdNm,
   }));
 
   return (
-    <div className="relative flex min-h-[10vh] w-full flex-col rounded-lg border border-border bg-background px-5 pt-5">
-      <div className="flex items-center mb-3">
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">업무구분</Label>
+    <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+      <div className="flex items-center gap-2">
+        <Label className="whitespace-nowrap text-xl font-medium text-label">
+          업무구분
+        </Label>
         <SelectBox
-          className="w-40 mr-8"
+          className="w-40"
           selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={WORK_TYPES.map((w) => ({
@@ -53,30 +60,44 @@ const OperationTab: React.FC = () => {
           selectContentClass="z-[101]"
         />
       </div>
-      <div className="flex items-center mb-6">
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">사업명</Label>
+      <div className="flex items-center gap-2">
+        <Label className="whitespace-nowrap text-xl font-medium text-label">
+          사업명
+        </Label>
         <Input
-          className="w-[100px] !text-xl placeholder:text-center mr-8"
+          className="w-[140px] !text-xl placeholder:text-center"
           placeholder="입력"
           value={var1}
-          onChange={(e) => { setVar1(e.target.value); }}
+          onChange={(e) => {
+            setVar1(e.target.value);
+          }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter') {
+            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="mr-2 whitespace-nowrap text-xl font-medium text-label">사업 유형</Label>
+      </div>
+      <YearRangeSelectBox
+        start={yearFilter.start}
+        end={yearFilter.end}
+        onChange={(range) =>
+          setYearFilter({
+            ...yearFilter,
+            start: range.start,
+            end: range.end,
+          })
+        }
+        startLabel="수행기간"
+        endLabel=""
+      />
+      <div className="flex items-center gap-2">
+        <Label className="whitespace-nowrap text-xl font-medium text-label">
+          사업 유형
+        </Label>
         <SelectBox
-          className="w-60 mr-8"
+          className="w-60"
           selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={[{ val: "0", text: "전체" }, ...BIZ_TY_CD_SELECT_ARRAY]}
@@ -86,13 +107,16 @@ const OperationTab: React.FC = () => {
           }}
           selectContentClass="z-[101]"
         />
-        {/* 조회 버튼 */}
-        <div className="flex-1 flex justify-end">
-          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-        </div>
       </div>
-    </div>
-  )
+      {/* 조회 버튼 */}
+      <div className="flex justify-end gap-2 sm:ml-auto sm:pl-4">
+        <Button onClick={handleSearch}>조회</Button>
+        <Button color="white" onClick={handleResetSearch}>
+          초기화
+        </Button>
+      </div>
+    </PopupSearchPanel>
+  );
 };
 
 export default React.memo(OperationTab);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
index 48fff794c..636ae4355 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 하수도정비기본계획보고서 탭
- * 
+ *
  * 📄 Report Tab
  * Next.js App Router (app/) 기반 검색 모달 보고서 탭 컴포넌트
  *
@@ -12,31 +12,30 @@
  * - Zustand를 통한 모달 상태 및 데이터 관리
  * - 로딩 오버레이 및 선택 초기화 기능
  */
-'use client';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Label } from '@common/components';
-import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+"use client";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Label } from "@common/components";
+import { YearRangeSelectBox } from "@/components/ui/YearRangeSelectBox";
 import { SelectBox } from "@common/business_components/ui/select";
-import { UiTable } from "@common/business_components/ui/table";
-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 type { UiTableSort } from "@common/business_components/ui/table";
-import type { FlattenedFolder, ReportDataFile } from './useReportTab';
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
+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 type { FlattenedFolder, ReportDataFile } from "./useReportTab";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
 // 하수도정비 기본계획 보고서
 export const reportTableHeadlist = [
-  { id: 'no', title: 'NO', sortable: true },
-  { id: 'sido', title: '시도', sortable: true },
-  { id: 'sigungu', title: '시군구', sortable: true },
-  { id: 'approvalYear', title: '승인년도', sortable: true },
-  { id: 'plantZoneGubun', title: '구분', sortable: true },
-  { id: 'reportGubun', title: '보고서구분', sortable: true },
-  { id: 'fileName', title: '파일명' },
-  { id: 'regDate', title: '등록일자' },
+  { id: "no", title: "순번" },
+  { 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;
@@ -46,72 +45,75 @@ interface ReportTabProps {
 }
 
 const normalizeYear = (value: string) => {
-  if (!value || value === '0' || value === '9999') return '';
+  if (!value || value === "0" || value === "9999") return "";
   return value;
 };
 
 const getApprovalYearNumber = (value: string | number | undefined) => {
-  const normalized = String(value ?? '').replace('년', '').trim();
+  const normalized = String(value ?? "")
+    .replace("년", "")
+    .trim();
   const parsed = Number(normalized);
   return Number.isFinite(parsed) ? parsed : null;
 };
 
-const REPORT_COLLATOR = new Intl.Collator('ko', { numeric: true, sensitivity: 'base' });
 const REPORT_PAGE_SIZE = 10;
 const REPORT_METADATA_CONCURRENCY = 8;
 const REPORT_METADATA_TIMEOUT_MS = 8000;
-const DISABLED_REPORT_SORT_KEYS = new Set(['fileName', 'regDate']);
 
-type ReportFileMetadata = Pick<FlattenedFolder,
-  'fileName' | 'regDate' | 'fileSn' | 'filePath' | 'fileCount' | 'downloadFileTitle'>;
+type ReportSearchFilters = {
+  ctpvCd: string;
+  sggCd: string;
+  plantZoneGubun: string;
+  reportGubun: string;
+  yearFilter: { start: string; end: string };
+};
+
+const DEFAULT_REPORT_SEARCH_FILTERS: ReportSearchFilters = {
+  ctpvCd: "0",
+  sggCd: "0",
+  plantZoneGubun: "0",
+  reportGubun: "0",
+  yearFilter: { start: "", end: "" },
+};
+
+type ReportFileMetadata = Pick<
+  FlattenedFolder,
+  | "fileName"
+  | "regDate"
+  | "fileSn"
+  | "filePath"
+  | "fileCount"
+  | "downloadFileTitle"
+>;
 
 const EMPTY_REPORT_METADATA: ReportFileMetadata = {
-  fileName: '-',
-  regDate: '',
-  fileSn: '',
-  filePath: '',
+  fileName: "-",
+  regDate: "",
+  fileSn: "",
+  filePath: "",
   fileCount: 0,
-  downloadFileTitle: '',
+  downloadFileTitle: "",
 };
 
-// 파일 정보 추가 조회 전에도 존재하는 분류 트리 필드만 전체 데이터 기준으로 정렬한다.
-const compareReportRows = (left: FlattenedFolder, right: FlattenedFolder, sort: UiTableSort) => {
-  const leftValue = left[sort.key];
-  const rightValue = right[sort.key];
-  const leftEmpty = leftValue === null || leftValue === undefined || String(leftValue).trim() === '';
-  const rightEmpty = rightValue === null || rightValue === undefined || String(rightValue).trim() === '';
-
-  if (leftEmpty || rightEmpty) {
-    if (leftEmpty && rightEmpty) return Number(left.no ?? 0) - Number(right.no ?? 0);
-    return leftEmpty ? 1 : -1;
-  }
-
-  const comparison = sort.key === 'approvalYear'
-    ? Number(getApprovalYearNumber(leftValue) ?? 0) - Number(getApprovalYearNumber(rightValue) ?? 0)
-    : REPORT_COLLATOR.compare(String(leftValue), String(rightValue));
-  if (comparison === 0) return Number(left.no ?? 0) - Number(right.no ?? 0);
-  return sort.direction === 'asc' ? comparison : -comparison;
-};
-
-const resolveReportSort = (sort?: UiTableSort) => {
-  if (!sort) return undefined;
-  if (DISABLED_REPORT_SORT_KEYS.has(sort.key)) {
-    return undefined;
-  }
-  return sort;
-};
-
-const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sggNm }) => {
-  const [isResetPage, setIsResetPage] = useState<boolean>(false);
-  const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
+const ReportTab: React.FC<ReportTabProps> = ({
+  open,
+  isSearch = true,
+  ctpvNm,
+  sggNm,
+}) => {
   const [showTable, setShowTable] = useState(false);
-  const [ctpvCd, setCtpvCd] = useState('0');
-  const [sggCd, setSggCd] = useState('0');
-  const [plantZoneGubun, setPlantZoneGubun] = useState('0');
-  const [reportGubun, setReportGubun] = useState('0');
+  const [ctpvCd, setCtpvCd] = useState("0");
+  const [sggCd, setSggCd] = useState("0");
+  const [plantZoneGubun, setPlantZoneGubun] = useState("0");
+  const [reportGubun, setReportGubun] = useState("0");
   const hasAutoFetchedRef = useRef(false);
-  const fileMetadataCacheRef = useRef<Map<string, ReportFileMetadata>>(new Map());
-  const fileMetadataPromiseCacheRef = useRef<Map<string, Promise<ReportFileMetadata>>>(new Map());
+  const fileMetadataCacheRef = useRef<Map<string, ReportFileMetadata>>(
+    new Map(),
+  );
+  const fileMetadataPromiseCacheRef = useRef<
+    Map<string, Promise<ReportFileMetadata>>
+  >(new Map());
 
   const {
     tableData,
@@ -124,17 +126,16 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
     setIsLoading,
     setYearFilter,
     setCurPage,
-    sort,
-    setSort,
   } = useSearchModalStore();
   const { ctpv, sgg } = useStore();
-  const {
-    dcTree: reportOriginData,
-    fetchDcTree
-  } = useReportTabStore();
-  const { REPORT_TYPES, flattenFolders, getDcFiles, downloadReportFile } = useReportTab();
+  const { dcTree: reportOriginData, fetchDcTree } = useReportTabStore();
+  const { REPORT_TYPES, flattenFolders, getDcFiles, downloadReportFile } =
+    useReportTab();
 
-  const flattenedReportData = useMemo(() => flattenFolders(reportOriginData), [reportOriginData]);
+  const flattenedReportData = useMemo(
+    () => flattenFolders(reportOriginData),
+    [reportOriginData],
+  );
 
   useEffect(() => {
     fileMetadataCacheRef.current.clear();
@@ -144,55 +145,51 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
     const uniqueOptions = Array.from(
       new Set(
         flattenedReportData
-          .map((item) => String(item.plantZoneGubun ?? '').trim())
-          .filter((item) => item.length > 0)
-      )
-    ).sort((a, b) => a.localeCompare(b, 'ko'));
+          .map((item) => String(item.plantZoneGubun ?? "").trim())
+          .filter((item) => item.length > 0),
+      ),
+    ).sort((a, b) => a.localeCompare(b, "ko"));
 
     return [
-      { val: '0', text: '전체' },
+      { val: "0", text: "전체" },
       ...uniqueOptions.map((item) => ({ val: item, text: item })),
     ];
   }, [flattenedReportData]);
 
   useEffect(() => {
-    void fetchDcTree('기본계획');
+    void fetchDcTree("기본계획");
   }, [fetchDcTree]);
 
   useEffect(() => {
     hasAutoFetchedRef.current = false;
-    setCtpvCd('0');
-    setSggCd('0');
-    setPlantZoneGubun('0');
-    setReportGubun('0');
-    setYearFilter({ start: '', end: '' });
+    setCtpvCd("0");
+    setSggCd("0");
+    setPlantZoneGubun("0");
+    setReportGubun("0");
+    setYearFilter({ start: "", end: "" });
     setShowTable(false);
     setTableData([]);
     setTableCount(0);
     setCurPage(1);
-    setSort(undefined);
-    setIsResetPage(true);
-    setIsResetSelection(true);
-  }, [open, setCurPage, setSort, setTableCount, setTableData, setYearFilter]);
+  }, [open, setCurPage, setTableCount, setTableData, setYearFilter]);
 
   useEffect(() => {
-    const newCtpvCd = ctpv.find((n) => n.text === ctpvNm)?.val || '0';
-    const newSggCd = sgg.find((n) => n.text === sggNm)?.val || '0';
+    const newCtpvCd = ctpv.find((n) => n.text === ctpvNm)?.val || "0";
+    const newSggCd = sgg.find((n) => n.text === sggNm)?.val || "0";
 
     setCtpvCd(newCtpvCd);
     setSggCd(newSggCd);
   }, [ctpv, ctpvNm, sgg, sggNm]);
 
   useEffect(() => {
-    if (!open || flattenedReportData.length === 0 || hasAutoFetchedRef.current) return;
+    if (!open || flattenedReportData.length === 0 || hasAutoFetchedRef.current)
+      return;
 
     hasAutoFetchedRef.current = true;
     void fetchFilteredData(1);
   }, [flattenedReportData.length, open]);
 
   useEffect(() => {
-    setIsResetPage(false);
-
     if (showTable) {
       void fetchFilteredData();
     }
@@ -200,21 +197,34 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
 
   const handleCtpvCdChange = (sidoId: string) => {
     setCtpvCd(sidoId);
-    setSggCd('0');
+    setSggCd("0");
   };
 
   const handleSearch = () => {
     hasAutoFetchedRef.current = true;
     setCurPage(1);
     void fetchFilteredData(1);
-    setIsResetPage(true);
-    setIsResetSelection(false);
     setShowTable(true);
   };
 
+  /** 보고서 조건·페이지·결과를 기본값으로 복원하고 전체 목록을 즉시 재조회한다. */
+  const handleResetSearch = () => {
+    setCtpvCd(DEFAULT_REPORT_SEARCH_FILTERS.ctpvCd);
+    setSggCd(DEFAULT_REPORT_SEARCH_FILTERS.sggCd);
+    setPlantZoneGubun(DEFAULT_REPORT_SEARCH_FILTERS.plantZoneGubun);
+    setReportGubun(DEFAULT_REPORT_SEARCH_FILTERS.reportGubun);
+    setYearFilter({ ...DEFAULT_REPORT_SEARCH_FILTERS.yearFilter });
+    setCurPage(1);
+    setTableData([]);
+    setTableCount(0);
+    setShowTable(false);
+    hasAutoFetchedRef.current = true;
+    void fetchFilteredData(1, DEFAULT_REPORT_SEARCH_FILTERS);
+  };
+
   const handleReportCellClick = (index: number | undefined, headId: string) => {
-    if (headId !== 'fileName') return;
-    if (typeof index !== 'number' || !tableData[index]) return;
+    if (headId !== "fileName") return;
+    if (typeof index !== "number" || !tableData[index]) return;
 
     const reportData = tableData[index];
     if (!reportData.fileSn) return;
@@ -229,26 +239,29 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
     })();
   };
 
-  const buildReportMetadata = (fileArr: ReportDataFile[]): ReportFileMetadata => {
+  const buildReportMetadata = (
+    fileArr: ReportDataFile[],
+  ): ReportFileMetadata => {
     if (fileArr.length === 0) {
       return EMPTY_REPORT_METADATA;
     }
 
     const primaryFile = fileArr[0];
     return {
-      fileName: fileArr.length === 1
-        ? primaryFile?.fileTitle ?? '-'
-        : `${primaryFile?.fileTitle ?? '대표 파일'} 외 ${fileArr.length - 1}건`,
-      regDate: primaryFile?.regDt ?? '',
-      fileSn: primaryFile?.fileSn ?? '',
-      filePath: primaryFile?.filePath ?? '',
+      fileName:
+        fileArr.length === 1
+          ? (primaryFile?.fileTitle ?? "-")
+          : `${primaryFile?.fileTitle ?? "대표 파일"} 외 ${fileArr.length - 1}건`,
+      regDate: primaryFile?.regDt ?? "",
+      fileSn: primaryFile?.fileSn ?? "",
+      filePath: primaryFile?.filePath ?? "",
       fileCount: fileArr.length,
-      downloadFileTitle: primaryFile?.fileTitle ?? '',
+      downloadFileTitle: primaryFile?.fileTitle ?? "",
     };
   };
 
   const resolveReportMetadata = (item: FlattenedFolder) => {
-    const key = String(item.clsfSystmSn ?? '');
+    const key = String(item.clsfSystmSn ?? "");
     if (!key) {
       return Promise.resolve(EMPTY_REPORT_METADATA);
     }
@@ -266,12 +279,15 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
     const promise = Promise.race<ReportDataFile[] | never>([
       getDcFiles(key),
       new Promise<never>((_, reject) => {
-        window.setTimeout(() => reject(new Error(`Report metadata timeout: ${key}`)), REPORT_METADATA_TIMEOUT_MS);
+        window.setTimeout(
+          () => reject(new Error(`Report metadata timeout: ${key}`)),
+          REPORT_METADATA_TIMEOUT_MS,
+        );
       }),
     ])
       .then((fileArr) => buildReportMetadata(fileArr))
       .catch((error) => {
-        console.warn('보고서 파일 메타데이터 조회 실패:', key, error);
+        console.warn("보고서 파일 메타데이터 조회 실패:", key, error);
         return EMPTY_REPORT_METADATA;
       })
       .then((metadata) => {
@@ -284,65 +300,95 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
     return promise;
   };
 
-  const enrichReportRows = async (data: FlattenedFolder[], concurrency = REPORT_METADATA_CONCURRENCY) => {
+  const enrichReportRows = async (
+    data: FlattenedFolder[],
+    concurrency = REPORT_METADATA_CONCURRENCY,
+  ) => {
     const missingRows = data.filter((item) => {
-      const key = String(item.clsfSystmSn ?? '');
+      const key = String(item.clsfSystmSn ?? "");
       return key && !fileMetadataCacheRef.current.has(key);
     });
 
     if (missingRows.length > 0) {
       let cursor = 0;
       const workerCount = Math.min(concurrency, missingRows.length);
-      await Promise.all(Array.from({ length: workerCount }, async () => {
-        while (cursor < missingRows.length) {
-          const currentIndex = cursor;
-          cursor += 1;
-          const currentRow = missingRows[currentIndex];
-          if (currentRow) {
-            await resolveReportMetadata(currentRow);
+      await Promise.all(
+        Array.from({ length: workerCount }, async () => {
+          while (cursor < missingRows.length) {
+            const currentIndex = cursor;
+            cursor += 1;
+            const currentRow = missingRows[currentIndex];
+            if (currentRow) {
+              await resolveReportMetadata(currentRow);
+            }
           }
-        }
-      }));
+        }),
+      );
     }
 
     return data.map((item) => ({
       ...item,
-      ...(fileMetadataCacheRef.current.get(String(item.clsfSystmSn ?? '')) ?? EMPTY_REPORT_METADATA),
+      ...(fileMetadataCacheRef.current.get(String(item.clsfSystmSn ?? "")) ??
+        EMPTY_REPORT_METADATA),
     }));
   };
 
-  const fetchFilteredData = async (page = curPage, requestedSort = sort) => {
+  const fetchFilteredData = async (
+    page = curPage,
+    filters: ReportSearchFilters = {
+      ctpvCd,
+      sggCd,
+      plantZoneGubun,
+      reportGubun,
+      yearFilter,
+    },
+  ) => {
     setIsLoading(true);
-    setIsResetSelection(true);
 
     try {
-      const activeSort = resolveReportSort(requestedSort);
       let filterReportData = flattenedReportData;
 
-      if (ctpvCd !== '0') {
-        const sidoOption = ctpv.find((n) => String(n.val).trim() === ctpvCd.trim());
-        filterReportData = filterReportData.filter((item) => item.sido === sidoOption?.text);
+      if (filters.ctpvCd !== "0") {
+        const sidoOption = ctpv.find(
+          (n) => String(n.val).trim() === filters.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 (filters.sggCd !== "0") {
+        const sigunguOption = sgg.find(
+          (n) => String(n.val) === String(filters.sggCd),
+        );
+        filterReportData = filterReportData.filter(
+          (item) => item.sigungu === sigunguOption?.text,
+        );
       }
-      if (plantZoneGubun !== '0') {
-        filterReportData = filterReportData.filter((item) => String(item.plantZoneGubun ?? '') === plantZoneGubun);
+      if (filters.plantZoneGubun !== "0") {
+        filterReportData = filterReportData.filter(
+          (item) =>
+            String(item.plantZoneGubun ?? "") === filters.plantZoneGubun,
+        );
       }
-      if (reportGubun !== '0') {
-        const reportGubunOption = REPORT_TYPES.find((n) => n.val === reportGubun);
-        filterReportData = filterReportData.filter((item) => item.reportGubun === reportGubunOption?.text);
+      if (filters.reportGubun !== "0") {
+        const reportGubunOption = REPORT_TYPES.find(
+          (n) => n.val === filters.reportGubun,
+        );
+        filterReportData = filterReportData.filter(
+          (item) => item.reportGubun === reportGubunOption?.text,
+        );
       }
 
-      const normalizedStartYear = normalizeYear(yearFilter.start);
-      const normalizedEndYear = normalizeYear(yearFilter.end);
+      const normalizedStartYear = normalizeYear(filters.yearFilter.start);
+      const normalizedEndYear = normalizeYear(filters.yearFilter.end);
       if (normalizedStartYear || normalizedEndYear) {
         filterReportData = filterReportData.filter((item) => {
           const approvalYear = getApprovalYearNumber(item.approvalYear);
           if (approvalYear === null) return false;
-          if (normalizedStartYear && approvalYear < Number(normalizedStartYear)) return false;
-          if (normalizedEndYear && approvalYear > Number(normalizedEndYear)) return false;
+          if (normalizedStartYear && approvalYear < Number(normalizedStartYear))
+            return false;
+          if (normalizedEndYear && approvalYear > Number(normalizedEndYear))
+            return false;
           return true;
         });
       }
@@ -355,129 +401,110 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
       const pageEnd = page * REPORT_PAGE_SIZE;
 
       let reportRows: FlattenedFolder[];
-      const sortedReportData = activeSort
-        ? [...filterReportData].sort((left, right) => compareReportRows(left, right, activeSort))
-        : filterReportData;
-
-      const pagedReportData = sortedReportData
+      const pagedReportData = filterReportData
         .slice(pageStart, pageEnd)
         .map((item, index) => ({
           ...item,
-          no: activeSort?.key === 'no' && activeSort.direction === 'desc'
-            ? sortedReportData.length - (pageOffset + index)
-            : pageOffset + index + 1,
+          no: totalCount - (pageOffset + index),
         }));
 
       reportRows = await enrichReportRows(pagedReportData);
 
       setTableData(reportRows || []);
       setShowTable(true);
-      setIsResetSelection(false);
     } catch (err) {
-      console.error('API ERROR:', err);
+      console.error("API ERROR:", err);
       setTableData([]);
-      setIsResetSelection(false);
     } finally {
       setIsLoading(false);
     }
   };
 
-  // 보고서 분류 원본 전체를 다시 정렬한 뒤 첫 페이지를 표시한다.
-  const handleSortChange = (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setIsResetPage(true);
-    setIsResetSelection(true);
-    if (curPage === 1) {
-      void fetchFilteredData(1, nextSort);
-      return;
-    }
-    setCurPage(1);
-  };
-
   return (
-    <>
-      <div className="relative mt-4 rounded-lg border px-5 pt-5 pb-3">
-        <div className="overflow-x-auto">
-          <div className="flex min-w-max items-center gap-4 whitespace-nowrap">
-            {isSearch && (
-              <CtpvSggPrcsFcltSelectBox
-                className="shrink-0"
-                sido={ctpvCd}
-                sigungu={sggCd}
-                onSidoChange={(sidoId: string) => { handleCtpvCdChange(sidoId); }}
-                onSigunguChange={setSggCd}
-                setIsLoading={setIsLoading}
-              />
-            )}
-            <YearRangeSelectBox
-              className="shrink-0 !mr-1"
-              selectClass="w-[78px] flex-shrink-0 rounded-lg bg-field text-foreground"
-              start={yearFilter.start}
-              end={yearFilter.end}
-              onChange={(range) => setYearFilter({
-                start: normalizeYear(range.start),
-                end: normalizeYear(range.end),
-              })}
-              startLabel="승인년도"
-              endLabel=""
-            />
-            <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구분</Label>
-            <SelectBox
-              className="w-36 shrink-0"
-              selectClass="rounded-lg bg-field text-foreground"
-              label=""
-              selectArray={plantZoneOptions}
-              value={plantZoneGubun}
-              onSelectValue={(val) => setPlantZoneGubun(String(val))}
-              selectContentClass="z-[101]"
-            />
-            <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">보고서 구분</Label>
-            <SelectBox
-              className="w-36 shrink-0"
-              selectClass="rounded-lg bg-field text-foreground"
-              label=""
-              selectArray={[...REPORT_TYPES]}
-              value={reportGubun}
-              onSelectValue={(val) => setReportGubun(String(val))}
-              selectContentClass="z-[101]"
-            />
-            <div className="ml-auto shrink-0 pl-4">
-              <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
-            </div>
+    <div className="flex min-w-0 flex-col gap-3">
+      <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+        {isSearch && (
+          <CtpvSggPrcsFcltSelectBox
+            className="shrink-0"
+            sido={ctpvCd}
+            sigungu={sggCd}
+            onSidoChange={(sidoId: string) => {
+              handleCtpvCdChange(sidoId);
+            }}
+            onSigunguChange={setSggCd}
+            setIsLoading={setIsLoading}
+          />
+        )}
+        <YearRangeSelectBox
+          className="!mr-1 shrink-0"
+          selectClass="w-[78px] flex-shrink-0 rounded-lg bg-field text-foreground"
+          start={yearFilter.start}
+          end={yearFilter.end}
+          onChange={(range) =>
+            setYearFilter({
+              start: normalizeYear(range.start),
+              end: normalizeYear(range.end),
+            })
+          }
+          startLabel="승인년도"
+          endLabel=""
+        />
+        <div className="flex items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            구분
+          </Label>
+          <SelectBox
+            className="w-36 shrink-0"
+            selectClass="rounded-lg bg-field text-foreground"
+            label=""
+            selectArray={plantZoneOptions}
+            value={plantZoneGubun}
+            onSelectValue={(val) => setPlantZoneGubun(String(val))}
+            selectContentClass="z-[101]"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            보고서 구분
+          </Label>
+          <SelectBox
+            className="w-36 shrink-0"
+            selectClass="rounded-lg bg-field text-foreground"
+            label=""
+            selectArray={[...REPORT_TYPES]}
+            value={reportGubun}
+            onSelectValue={(val) => setReportGubun(String(val))}
+            selectContentClass="z-[101]"
+          />
+        </div>
+        <div className="shrink-0 sm:ml-auto sm:pl-4">
+          <div className="flex gap-2">
+            <Button onClick={handleSearch}>조회</Button>
+            <Button color="white" onClick={handleResetSearch}>
+              초기화
+            </Button>
           </div>
         </div>
-      </div>
+      </PopupSearchPanel>
 
-      <div className="mt-3">
-        <LoadingOverlay isLoading={isLoading} />
-        <UiTable
-          className="!m-0"
+      <div>
+        <MapPopupDataTable
+          rows={tableData as Array<FlattenedFolder & Record<string, unknown>>}
           clickableHeadIds={["fileName"]}
-          headName={<>조회 결과</>}
-          tableData={tableData}
+          title="보고서 목록"
           headlist={reportTableHeadlist}
           pageSize={10}
           total={tableCount}
-          cellClick={handleReportCellClick}
-          cellClassName={(row, headId) => {
-            if (headId !== 'fileName') return '';
-            if (!row.fileSn) return '!text-gray-400';
-            return '!text-left !text-blue-600 underline underline-offset-4 hover:!text-blue-800';
-          }}
+          onCellClick={(_row, index, headId) =>
+            handleReportCellClick(index, headId)
+          }
           onPageChange={setCurPage}
-          resetPageNo={isResetPage}
-          resetSelection={isResetSelection}
-          curPage={curPage}
-          sort={sort}
-          onSortChange={handleSortChange}
+          page={curPage}
+          rowId={(row, index) => String(row.clsfSystmSn ?? index)}
         />
       </div>
-    </>
+    </div>
   );
 };
 
 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 1d96fd937..2ad4328cf 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창
- * 
+ *
  * 📄 Search Modal
  * Next.js App Router (app/) 기반 검색 모달 컴포넌트
  *
@@ -11,123 +11,68 @@
  * - Zustand를 통한 검색 모달 상태 관리
  * - 로딩 오버레이 및 선택 초기화 지원
  */
-'use client';
-import LoadingOverlay from '@/components/ui/LoadingBar';
+"use client";
+import LoadingOverlay from "@/components/ui/LoadingBar";
 import { UITab } from "@common/business_components/ui/tab";
-import { UiTable } from "@common/business_components/ui/table";
-import { Button } from '@common/components/ui';
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Toaster } from 'react-hot-toast';
-import useSearchModalStore from '@/store/useSearchModalStore';
-import { ExclnSewagePumpCol2, FldngWtlvMapCol2, 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';
-import type {
-  UiHeadProps,
-  UiTableSort,
-} from "@common/business_components/ui/table";
+import { StandardPopupLayout } from "@common/business_components";
+import { Button } from "@common/components/ui";
+import React, { useEffect, useMemo, useRef } from "react";
+import useSearchModalStore from "@/store/useSearchModalStore";
+import { useAlertStore } from "@/shared/lib";
+import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
+import {
+  ExclnSewagePumpCol2,
+  FldngWtlvMapCol2,
+  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";
+import type { UiHeadProps } from "@common/business_components/ui/table";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
 
 type SearchModalProps = {
-  renderMode?: 'launcher' | 'popup';
+  renderMode?: "launcher" | "popup";
   autoSearchReady?: boolean;
 };
 
-// 기본정보 표시 필드 중 GeoServer 원천 속성으로 정확히 정렬할 수 있는 필드만 매핑한다.
-const BASIC_SORT_KEYS: Record<string, Record<string, string>> = {
-  tb_ms_swage_ppl: {
-    rowNumber: 'rowNumber',
-    fcltMngNo: 'fclt_mng_no', instMngNo: 'inst_mng_no', instlYmd: 'instl_ymd',
-    ctpvNm: 'pbadms_emd_cd',
-    sggNm: 'pbadms_emd_cd', swtrmt_zone_nm: 'swtrmt_zone_nm', usgCd: 'usg_cd',
-    pdmtVl: 'pdmt_vl', prlgVl: 'prlg_vl', tmptDpth: 'tmpt_dpth',
-    tmptMhlMngNo: 'tmpt_mhl_mng_no', scendDpth: 'scend_dpth',
-    scendMhlMngNo: 'scend_mhl_mng_no', vrtcLen: 'vrtc_len', wdthLen: 'wdth_len',
-    fcltyShpCd: 'fclty_shp_cd', mqltCd: 'mqlt_cd',
-  },
-  tb_il_swage_prcs_fclt: {
-    rowNumber: 'rowNumber',
-    swtrmtFcltNm: 'swtrmt_fclt_nm', fcltCpct: 'fclt_cpct', rgnExpln: 'rgn_expln',
-    oprtngStrtYmd: 'oprtng_strt_ymd', laeNm: 'lae_nm', sareaNm: 'sarea_nm',
-    rvrNm: 'rvr_nm', dschgWtstNm: 'dschg_wtst_nm', swtrmtPpltnCnt: 'swtrmt_ppltn_cnt',
-    rprsMsrcCn: 'rprs_msrc_cn',
-  },
-  tb_ms_swage_prcs_zone: {
-    rowNumber: 'rowNumber',
-    swtrmtZoneNm: 'swtrmt_zone_nm', ctpvNm: 'ctpv_nm', sggNm: 'sgg_nm',
-    swtrmtFcltNm: 'swtrmt_fclt_nm',
-  },
-  tb_ms_fldng_wtlv_map: {
-    rowNumber: 'rowNumber',
-    fldngYr: 'fldng_yr', fldngDstrNm: 'fldng_dstr_nm', ctpvNm: 'stdg_cd', sggNm: 'stdg_cd',
-    bgngYmd: 'bgng_ymd', fldngBgngHm: 'fldng_bgng_hm', endYmd: 'end_ymd', fldngEndHm: 'fldng_end_hm',
-    fldngHr: 'fldng_hr', fldngDstrctNm: 'fldng_dstrct_nm', fldngCsDtlCd: 'fldng_cs_dtl_cd',
-    avgFldngWtlv: 'avg_fldng_wtlv', fldngArea: 'fldng_area', exmnYr: 'exmn_yr', damAmt: 'dam_amt',
-  },
-  tb_ms_swage_mhl: {
-    rowNumber: 'rowNumber',
-    fcltMngNo: 'fclt_mng_no', instlYmd: 'instl_ymd', swageMhlDiamVl: 'swage_mhl_diam_vl',
-    ctpvNm: 'pbadms_emd_cd', sggNm: 'pbadms_emd_cd', usgCd: 'usg_cd',
-    wdthLen: 'wdth_len', vrtcLen: 'vrtc_len', altdVl: 'altd_vl', dpthlVl: 'dpthl_vl',
-  },
-  tb_ms_swage_pmstn: {
-    rowNumber: 'rowNumber',
-    fcltMngNo: 'fclt_mng_no', swagePmstnNm: 'swage_pmstn_nm', instlYmd: 'instl_ymd',
-    ctpvNm: 'pbadms_emd_cd', sggNm: 'pbadms_emd_cd',
-    dailyPrcsCpct: 'daily_prcs_cpct', maxImpndCpct: 'max_impnd_cpct', altdVl: 'altd_vl',
-    wtlvVl: 'wtlv_vl', exclnWpmpAbltVl: 'excln_wpmp_ablt_vl',
-  },
-  tb_ms_stofcbr: {
-    rowNumber: 'rowNumber',
-    fcltMngNo: 'fclt_mng_no', mapshtNo: 'mapsht_no', instlYmd: 'instl_ymd',
-    ctpvNm: 'pbadms_emd_cd', sggNm: 'pbadms_emd_cd',
-    worflwWallHgt: 'worflw_wall_hgt', swageMhlMngNo: 'swage_mhl_mng_no', drtnAngl: 'drtn_angl',
-  },
-};
-
-const OPERATION_LIST_SORT_KEYS: Record<string, string> = {
-  rowNumber: 'rowNumber', bizInfoNm: 'bizInfoNm', flfmtBgngYmd: 'flfmtBgngYmd',
-  flfmtEndYmd: 'flfmtEndYmd', flfmtYr: 'flfmtYr', bizTypeCd: 'bizTypeCd', bizAmt: 'bizAmt',
-};
-
-const OPERATION_DETAIL_SORT_KEYS: Record<string, string> = {
-  rowNumber: 'rowNumber',
-  fcltMngNo: 'fclt_mng_no',
-  swtrmt_zone_nm: 'swtrmt_zone_nm',
-  usgCd: 'usg_cd',
-  mqltCd: 'mqlt_cd',
-  pdmtVl: 'pdmt_vl',
-  prlgVl: 'prlg_vl',
-  instlYmd: 'instl_ymd',
-  strc_stts_grd: 'strc_stts_grd',
-  oper_stts_grd: 'oper_stts_grd',
-};
-
-const SearchModal: React.FC<SearchModalProps> = ({ renderMode = 'launcher', autoSearchReady = false }) => {
+const SearchModal: React.FC<SearchModalProps> = ({
+  renderMode = "launcher",
+  autoSearchReady = false,
+}) => {
+  const alert = useAlertStore((state) => state.setMessage);
   const {
     showTable,
-    isSearchModalOpen, setIsSearchModalOpen,
-    activeTab, basicType, workType,
-    tableData, detailTableData,
-    tableCount, detailTableCount,
-    curPage, detailCurPage,
+    isSearchModalOpen,
+    setIsSearchModalOpen,
+    activeTab,
+    basicType,
+    workType,
+    tableData,
+    detailTableData,
+    tableCount,
+    detailTableCount,
+    curPage,
+    detailCurPage,
     detailBizId,
-    isLoading, isDetailLoading,
-    isResetPage, isResetDetailPage,
-    isResetSelection, isResetDetailSelection,
+    isLoading,
+    isDetailLoading,
     setActiveTab,
-    setCurPage, setDetailCurPage,
-    setIsResetPage, setIsResetDetailPage,
-    setIsResetSelection,
+    setCurPage,
+    setDetailCurPage,
+    setIsResetPage,
+    setIsResetDetailPage,
     setDetailBizId,
     setIsResetDetailSelection,
-    sort, detailSort,
-    setSort, setDetailSort,
-    resetFilters
+    resetFilters,
   } = useSearchModalStore();
   const { TABS, viewMultipleFeature, fetchFilteredData } = useSearchModal();
   const { handleBasicCellClick, basicExcelDownload } = useBasicTab();
@@ -142,97 +87,95 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = 'launcher', auto
     handleOperationResultCellClick,
     operationExcelDownload,
     operationResultExcelDownload,
-    handleOperationPageNation
+    handleOperationPageNation,
   } = useOperationTab();
   const hasAutoSearchedRef = useRef(false);
   const hasInitializedTabAutoSearchRef = useRef(false);
 
   const dynamicHeadlist: UiHeadProps[] = useMemo(() => {
-    if (activeTab === 'basic') {
-        const headlist = basicType === 'tb_ms_swage_ppl' ? MsSwagePplCol2
-        : basicType === 'tb_il_swage_prcs_fclt' ? SwtrmtFcltCol2
-          : basicType === 'tb_ms_swage_prcs_zone' ? SwtrmtPrcsZoneCol2
-            : basicType === 'tb_ms_fldng_wtlv_map' ? FldngWtlvMapCol2
-            : basicType === 'tb_ms_swage_mhl' ? MsSwageMhlCol2
-              : basicType === 'tb_ms_swage_pmstn' ? ExclnSewagePumpCol2
-                : basicType === 'tb_ms_stofcbr' ? stofcbrCol2 : [];
-      const sortKeys = BASIC_SORT_KEYS[basicType] ?? {};
-      return headlist.map((head) => sortKeys[head.id]
-        ? { ...head, sortable: true, sortKey: sortKeys[head.id] }
-        : head);
+    if (activeTab === "basic") {
+      const headlist =
+        basicType === "tb_ms_swage_ppl"
+          ? MsSwagePplCol2
+          : basicType === "tb_il_swage_prcs_fclt"
+            ? SwtrmtFcltCol2
+            : basicType === "tb_ms_swage_prcs_zone"
+              ? SwtrmtPrcsZoneCol2
+              : basicType === "tb_ms_fldng_wtlv_map"
+                ? FldngWtlvMapCol2
+                : basicType === "tb_ms_swage_mhl"
+                  ? MsSwageMhlCol2
+                  : basicType === "tb_ms_swage_pmstn"
+                    ? ExclnSewagePumpCol2
+                    : basicType === "tb_ms_stofcbr"
+                      ? stofcbrCol2
+                      : [];
+      return headlist.map((head) => ({
+        ...head,
+        title: head.id === "rowNumber" ? "순번" : head.title,
+      }));
     }
-    if (activeTab === 'operation') {
-      return OPERATION_TABLE_HEADLIST.map((head) => OPERATION_LIST_SORT_KEYS[head.id]
-        ? { ...head, sortable: true, sortKey: OPERATION_LIST_SORT_KEYS[head.id] }
-        : head);
+    if (activeTab === "operation") {
+      return OPERATION_TABLE_HEADLIST.map((head) => ({
+        ...head,
+        title: head.id === "rowNumber" ? "순번" : head.title,
+      }));
     }
 
     return [];
   }, [activeTab, basicType, workType, OPERATION_TABLE_HEADLIST]);
 
   const dynamicHeadlist2: UiHeadProps[] = useMemo(() => {
-    if (activeTab === 'operation') {
-      const headlist = workType === WORK_TYPES[0]?.val ? MAINTENANACE_TABLE_HEADLIST
-        : workType === WORK_TYPES[1]?.val ? CLEANING_TABLE_HEADLIST
-          : workType === WORK_TYPES[2]?.val ? INSPECTION_TABLE_HEADLIST : [];
-      return headlist.map((head) => OPERATION_DETAIL_SORT_KEYS[head.id]
-        ? { ...head, sortable: true, sortKey: OPERATION_DETAIL_SORT_KEYS[head.id] }
-        : head);
+    if (activeTab === "operation") {
+      const headlist =
+        workType === WORK_TYPES[0]?.val
+          ? MAINTENANACE_TABLE_HEADLIST
+          : workType === WORK_TYPES[1]?.val
+            ? CLEANING_TABLE_HEADLIST
+            : workType === WORK_TYPES[2]?.val
+              ? INSPECTION_TABLE_HEADLIST
+              : [];
+      return headlist.map((head) => ({
+        ...head,
+        title: head.id === "rowNumber" ? "순번" : head.title,
+      }));
     }
 
     return [];
-  }, [activeTab, workType, WORK_TYPES, MAINTENANACE_TABLE_HEADLIST, CLEANING_TABLE_HEADLIST, INSPECTION_TABLE_HEADLIST]);
-
-  // 목록 정렬 변경 시 첫 페이지에서 같은 검색조건으로 다시 조회한다.
-  const handleSortChange = (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setIsResetPage(true);
-    setIsResetSelection(true);
-    setIsResetDetailPage(true);
-    setDetailSort(undefined);
-    setDetailBizId(0);
-    if (curPage === 1) {
-      void fetchFilteredData(nextSort);
-      return;
-    }
-    setCurPage(1);
-  };
-
-  // 유지관리 상세 정렬은 상단 사업 목록과 분리하고 선택된 사업 범위만 재조회한다.
-  const handleDetailSortChange = (nextSort?: UiTableSort) => {
-    setDetailSort(nextSort);
-    setIsResetDetailPage(true);
-    setIsResetDetailSelection(true);
-    if (!detailBizId) {
-      return;
-    }
-    if (detailCurPage === 1) {
-      void handleOperationPageNation(Number(detailBizId), nextSort);
-      return;
-    }
-    setDetailCurPage(1);
-  };
+  }, [
+    activeTab,
+    workType,
+    WORK_TYPES,
+    MAINTENANACE_TABLE_HEADLIST,
+    CLEANING_TABLE_HEADLIST,
+    INSPECTION_TABLE_HEADLIST,
+  ]);
 
   useEffect(() => {
-    if (renderMode !== 'launcher' || !isSearchModalOpen) return;
+    if (renderMode !== "launcher" || !isSearchModalOpen) return;
 
-    const popupWindow = openWindowPopup('mapSearch', {
+    const popupWindow = openWindowPopup("mapSearch", {
       sourcePath: window.location.pathname,
     });
 
     if (!popupWindow) {
-      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
     }
 
     setIsSearchModalOpen(false);
-  }, [isSearchModalOpen, renderMode, setIsSearchModalOpen]);
+  }, [alert, isSearchModalOpen, renderMode, setIsSearchModalOpen]);
 
   useEffect(() => {
     resetFilters();
   }, [activeTab, basicType, workType, resetFilters]);
 
   useEffect(() => {
-    if (renderMode !== 'popup' || !autoSearchReady || hasAutoSearchedRef.current) return;
+    if (
+      renderMode !== "popup" ||
+      !autoSearchReady ||
+      hasAutoSearchedRef.current
+    )
+      return;
 
     hasAutoSearchedRef.current = true;
     hasInitializedTabAutoSearchRef.current = true;
@@ -240,9 +183,9 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = 'launcher', auto
   }, [autoSearchReady, fetchFilteredData, renderMode]);
 
   useEffect(() => {
-    if (renderMode !== 'popup' || !autoSearchReady) return;
+    if (renderMode !== "popup" || !autoSearchReady) return;
     if (!hasInitializedTabAutoSearchRef.current) return;
-    if (activeTab === 'report') return;
+    if (activeTab === "report") return;
 
     setCurPage(1);
     setIsResetPage(true);
@@ -270,94 +213,101 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = 'launcher', auto
     <>
       <UITab
         defaultValue={activeTab}
+        variant="underline"
+        className="shrink-0"
         tabList={TABS.map((tab: any) => ({
           value: tab.val,
-          label: tab.text
+          label: tab.text,
         }))}
         onValueChange={(value: string) => setActiveTab(value)}
       />
-      {activeTab === 'basic' && (<BasicTab />)}
-      {activeTab === 'operation' && (<OperationTab />)}
-      {activeTab === 'report' && (<ReportTab open={activeTab === 'report'} />)}
+      <LoadingOverlay isLoading={isLoading || isDetailLoading} />
+      {activeTab === "basic" && <BasicTab />}
+      {activeTab === "operation" && <OperationTab />}
+      {activeTab === "report" && <ReportTab open={activeTab === "report"} />}
 
-      {activeTab === 'basic' && (
-        <div className="mt-4 h-[79dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border">
-          <LoadingOverlay isLoading={isLoading} />
-          <UiTable
-            className='overflow-x-auto [&_table]:min-w-full [&_table]:w-max'
-            headName={(() => {
-              const label = BASIC_TYPES.find((type) => type.val === basicType)?.text;
-              return (<>{label} 조회 결과</>);
+      {activeTab === "basic" && (
+        <div className="w-full">
+          <MapPopupDataTable
+            rows={tableData as Array<Record<string, unknown>>}
+            title={(() => {
+              const label = BASIC_TYPES.find(
+                (type) => type.val === basicType,
+              )?.text;
+              return <>{label} 목록</>;
             })()}
-            tableData={tableData}
             headlist={dynamicHeadlist}
             pageSize={10}
             total={tableCount}
-            cellClick={handleBasicCellClick}
+            onCellClick={(_row, index, headId) =>
+              void handleBasicCellClick(index, headId)
+            }
             onPageChange={setCurPage}
-            resetPageNo={isResetPage}
-            resetSelection={isResetSelection}
-            curPage={curPage}
-            sort={sort}
-            onSortChange={handleSortChange}
-            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>
+            page={curPage}
+            scrollMode="horizontal"
+            minTableWidth="160rem"
+            actions={
+              <div className="flex gap-2">
+                <Button onClick={basicExcelDownload}>엑셀다운로드</Button>
+                <Button onClick={viewMultipleFeature}>지도에서 보기</Button>
               </div>
             }
           />
         </div>
       )}
 
-      {activeTab === 'operation' && (
+      {activeTab === "operation" && (
         <>
-          <div className="mt-4 h-[39dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border">
-            <LoadingOverlay isLoading={isLoading} />
-            <UiTable
-              headName={(() => {
-                const label = WORK_TYPES.find((type) => type.val === workType)?.text;
-                return (<>{label} 사업 현황</>);
+          <div className="w-full">
+            <MapPopupDataTable
+              rows={tableData as Array<Record<string, unknown>>}
+              title={(() => {
+                const label = WORK_TYPES.find(
+                  (type) => type.val === workType,
+                )?.text;
+                return <>{label} 사업 목록</>;
               })()}
-              tableData={tableData}
               headlist={dynamicHeadlist}
               pageSize={OPERATION_TABLE_SIZE}
               total={tableCount}
-              cellClick={handleOperationCellClick}
+              onCellClick={(_row, index, headId) =>
+                void handleOperationCellClick(index, headId)
+              }
               onPageChange={setCurPage}
-              resetPageNo={isResetPage}
-              resetSelection={isResetSelection}
-              curPage={curPage}
-              sort={sort}
-              onSortChange={handleSortChange}
-              headButton={
-                <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-sm font-medium green" size="sm" onClick={operationExcelDownload}>파일 다운로드</Button>
+              page={curPage}
+              scrollMode="horizontal"
+              minTableWidth="140rem"
+              actions={
+                <Button onClick={operationExcelDownload}>엑셀다운로드</Button>
               }
             />
           </div>
 
-          <div className="h-[39dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border">
-            <LoadingOverlay isLoading={isDetailLoading} />
-            <UiTable
-              headName={(() => {
-                const label = WORK_TYPES.find((type) => type.val === workType)?.text;
-                return (<>{label} 결과표</>);
+          <div className="w-full">
+            <MapPopupDataTable
+              rows={detailTableData as Array<Record<string, unknown>>}
+              title={(() => {
+                const label = WORK_TYPES.find(
+                  (type) => type.val === workType,
+                )?.text;
+                return <>{label} 결과 목록</>;
               })()}
-              tableData={detailTableData}
               headlist={dynamicHeadlist2}
               pageSize={OPERATION_TABLE_SIZE}
               total={detailTableCount}
-              cellClick={handleOperationResultCellClick}
+              onCellClick={(_row, index, headId) =>
+                void handleOperationResultCellClick(index, headId)
+              }
               onPageChange={setDetailCurPage}
-              resetPageNo={isResetDetailPage}
-              resetSelection={isResetDetailSelection}
-              curPage={detailCurPage}
-              sort={detailSort}
-              onSortChange={handleDetailSortChange}
-              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>
+              page={detailCurPage}
+              scrollMode="horizontal"
+              minTableWidth="160rem"
+              actions={
+                <div className="flex gap-2">
+                  <Button onClick={operationResultExcelDownload}>
+                    엑셀다운로드
+                  </Button>
+                  <Button onClick={viewMultipleFeature}>지도에서 보기</Button>
                 </div>
               }
             />
@@ -367,20 +317,18 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = 'launcher', auto
     </>
   );
 
-  if (renderMode === 'launcher') {
+  if (renderMode === "launcher") {
     return null;
   }
 
   return (
-    <div className='h-dvh overflow-x-auto overflow-y-hidden bg-container p-4 text-foreground'>
-      <h1 className="mb-3 text-2xl font-semibold text-foreground">관망도 검색</h1>
-      <div className="h-[calc(100dvh-5.6rem)] w-full overflow-y-hidden rounded-lg border border-border bg-background p-4">
-        {renderBody()}
-      </div>
-      <Toaster position="top-center" />
-    </div>
+    <StandardPopupLayout
+      title={windowPopupDefinitions.mapSearch.title}
+      bodyClassName="overflow-x-hidden"
+    >
+      <div className="flex min-w-0 flex-col gap-3">{renderBody()}</div>
+    </StandardPopupLayout>
   );
 };
 
 export default React.memo(SearchModal);
-
diff --git a/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx b/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx
index 4fc830c59..f65c2122d 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/stofcbr.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 우수토실)
- * 
+ *
  * 📄 Stofcbr Tab
  * Next.js App Router (app/) 기반 검색 모달 우수토실 탭 컴포넌트
  *
@@ -10,58 +10,51 @@
  * - 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';
-
+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,
+    ctpvCd,
+    sggCd,
     yearFilter,
-    todayYear, todayMonth, todayDate,
-    getDateString
+    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()}%'`);
+  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 startDate = getDateString(yearFilter.start, "", "", "19000101");
   const endDate = getDateString(
     yearFilter.end,
-    '',
-    '',
+    "",
+    "",
     `${todayYear}${todayMonth}${todayDate}`,
   );
-  cqlFilters.push(
-    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
-  );
+  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();
-
+  const { ctpvCd, setCtpvCd, sggCd, setSggCd, yearFilter, setYearFilter } =
+    useSearchModalStore();
+  const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="mb-3">
-      <div className="flex items-center mb-2">
+    <div className="min-w-0">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
         {/* 시도, 시군구 */}
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
@@ -76,17 +69,22 @@ const Stofcbr: React.FC = () => {
         <YearRangeSelectBox
           start={yearFilter.start}
           end={yearFilter.end}
-          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.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 className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button onClick={handleSearch}>조회</Button>
+          <Button color="white" onClick={handleResetSearch}>
+            초기화
+          </Button>
         </div>
       </div>
     </div>
   );
 };
 
-export default React.memo(Stofcbr);
\ No newline at end of file
+export default React.memo(Stofcbr);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
index 6856d0086..d03605ef8 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수맨홀)
- * 
+ *
  * 📄 SwageMhl Tab
  * Next.js App Router (app/) 기반 검색 모달 하수맨홀 탭 컴포넌트
  *
@@ -11,49 +11,48 @@
  * - 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 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/select";
-import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
-import useSearchModalStore from '../../../store/useSearchModalStore';
-import useSearchModal from './useSearchModal';
-
+import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
+import useSearchModalStore from "../../../store/useSearchModalStore";
+import useSearchModal from "./useSearchModal";
 
 export const swageMhlCqlFilters = () => {
   const {
-    ctpvCd, sggCd,
+    ctpvCd,
+    sggCd,
     yearFilter,
-    start1, end1,
+    start1,
+    end1,
     var1,
-    todayYear, todayMonth, todayDate,
-    getDateString
+    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()}%'`);
+  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 startDate = getDateString(yearFilter.start, "", "", "19000101");
   const endDate = getDateString(
     yearFilter.end,
-    '',
-    '',
+    "",
+    "",
     `${todayYear}${todayMonth}${todayDate}`,
   );
-  cqlFilters.push(
-    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
-  );
+  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}`);
+  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}`);
 
@@ -62,17 +61,24 @@ export const swageMhlCqlFilters = () => {
 
 const SwageMhl: React.FC = () => {
   const {
-    var1, setVar1,
-    start1, setStart1, end1, setEnd1,
-    ctpvCd, setCtpvCd,
-    sggCd, setSggCd,
-    yearFilter, setYearFilter,
+    var1,
+    setVar1,
+    start1,
+    setStart1,
+    end1,
+    setEnd1,
+    ctpvCd,
+    setCtpvCd,
+    sggCd,
+    setSggCd,
+    yearFilter,
+    setYearFilter,
   } = useSearchModalStore();
-  const { handleSearch } = useSearchModal();
+  const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="mb-3">
-      <div className="mb-2 flex items-center">
+    <div className="min-w-0">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}
@@ -97,56 +103,70 @@ const SwageMhl: React.FC = () => {
           endLabel=""
         />
         {/* 용도 */}
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">용도</Label>
-        <SelectBox
-          className="w-48 mr-8"
-          selectClass="rounded-lg bg-field text-xl text-foreground"
-          label=""
-          selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_MHL_USE_CODES]}
-          value={var1}
-          onSelectValue={(val) => {
-            setVar1(String(val));
-          }}
-          selectContentClass="z-[101]"
-        />
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            용도
+          </Label>
+          <SelectBox
+            className="w-48"
+            selectClass="rounded-lg bg-field text-xl text-foreground"
+            label=""
+            selectArray={[
+              { val: "0", text: "전체" },
+              ...MS_SWAGE_MHL_USE_CODES,
+            ]}
+            value={var1}
+            onSelectValue={(val) => {
+              setVar1(String(val));
+            }}
+            selectContentClass="z-[101]"
+          />
+        </div>
         {/* 하수맨홀 구경 */}
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구경(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 shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            구경(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="text-xl font-semibold">~</span>
+          <Input
+            className="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>
         {/* 조회 버튼 */}
-        <div className="flex-1 flex justify-end">
-          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        <div className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button onClick={handleSearch}>조회</Button>
+          <Button color="white" onClick={handleResetSearch}>
+            초기화
+          </Button>
         </div>
       </div>
     </div>
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
index a9be8704e..15269bed1 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수펌프장)
- * 
+ *
  * 📄 SwagePmstn Tab
  * Next.js App Router (app/) 기반 검색 모달 하수펌프장 탭 컴포넌트
  *
@@ -11,43 +11,43 @@
  * - 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';
-
+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,
+    ctpvCd,
+    sggCd,
     yearFilter,
-    start1, start2, end1, end2,
-    todayYear, todayMonth, todayDate,
-    getDateString
+    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()}%'`);
+  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 startDate = getDateString(yearFilter.start, "", "", "19000101");
   const endDate = getDateString(
     yearFilter.end,
-    '',
-    '',
+    "",
+    "",
     `${todayYear}${todayMonth}${todayDate}`,
   );
-  cqlFilters.push(
-    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
-  );
+  cqlFilters.push(`instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`);
   // 일일처리용량 범위
   if (start1 && end1)
     cqlFilters.push(`daily_prcs_cpct BETWEEN ${start1} AND ${end1}`);
@@ -64,17 +64,22 @@ export const swagePmstnCqlFilters = () => {
 
 const SwagePmstn: React.FC = () => {
   const {
-    start1, setStart1,
-    end1, setEnd1,
-    ctpvCd, setCtpvCd,
-    sggCd, setSggCd,
-    yearFilter, setYearFilter,
+    start1,
+    setStart1,
+    end1,
+    setEnd1,
+    ctpvCd,
+    setCtpvCd,
+    sggCd,
+    setSggCd,
+    yearFilter,
+    setYearFilter,
   } = useSearchModalStore();
-  const { handleSearch } = useSearchModal();
+  const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="mb-3">
-      <div className="flex items-center mb-2">
+    <div className="min-w-0">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
         {/* 시도, 시군구 */}
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
@@ -89,47 +94,53 @@ const SwagePmstn: React.FC = () => {
         <YearRangeSelectBox
           start={yearFilter.start}
           end={yearFilter.end}
-          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.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();
-            }
-          }}
-        />
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            일일처리용량(㎥)
+          </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="text-xl font-semibold">~</span>
+          <Input
+            className="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>
         {/* 양수능력 */}
-        {/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">양수능력(m²/d)</Label>
+        {/* <Label className="text-xl text-label font-medium whitespace-nowrap mr-2">양수능력(m²/d)</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -164,12 +175,15 @@ const SwagePmstn: React.FC = () => {
           }}
         /> */}
         {/* 조회 버튼 */}
-        <div className="flex-1 flex justify-end">
-          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        <div className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button onClick={handleSearch}>조회</Button>
+          <Button color="white" onClick={handleResetSearch}>
+            초기화
+          </Button>
         </div>
       </div>
     </div>
   );
 };
 
-export default React.memo(SwagePmstn);
\ No newline at end of file
+export default React.memo(SwagePmstn);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
index 4dabee0e3..26cfa0858 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수관로)
- * 
+ *
  * 📄 SwagePpl Tab
  * Next.js App Router (app/) 기반 검색 모달 하수관로 탭 컴포넌트
  *
@@ -11,48 +11,49 @@
  * - Zustand를 통한 상태 관리 및 필터 값 저장
  * - Enter 키 입력 시 자동 조회 지원
  */
-import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
+import { YearRangeSelectBox } from "@/components/ui/YearRangeSelectBox";
 import { SelectBox } from "@common/business_components/ui/select";
-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';
-
+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,
+    var1,
+    var2,
+    ctpvCd,
+    sggCd,
     yearFilter,
-    start1, start2, end1, end2,
-    todayYear, todayMonth, todayDate,
-    getDateString
+    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()}%'`);
+  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 startDate = getDateString(yearFilter.start, "", "", "19000101");
   const endDate = getDateString(
     yearFilter.end,
-    '',
-    '',
+    "",
+    "",
     `${todayYear}${todayMonth}${todayDate}`,
   );
-  cqlFilters.push(
-    `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`,
-  );
+  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}`);
@@ -67,17 +68,24 @@ export const swagePplCqlFilters = () => {
 
 const SwagePpl: React.FC = () => {
   const {
-    var1, setVar1,
-    start1, setStart1, end1, setEnd1,
-    ctpvCd, setCtpvCd, sggCd, setSggCd,
-    yearFilter, setYearFilter,
+    var1,
+    setVar1,
+    start1,
+    setStart1,
+    end1,
+    setEnd1,
+    ctpvCd,
+    setCtpvCd,
+    sggCd,
+    setSggCd,
+    yearFilter,
+    setYearFilter,
   } = useSearchModalStore();
-  const { handleSearch } = useSearchModal();
-
+  const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="mb-6">
-      <div className="mb-2 flex items-center">
+    <div className="min-w-0">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}
@@ -102,23 +110,30 @@ const SwagePpl: React.FC = () => {
           endLabel=""
         />
         {/* 용도 */}
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">용도</Label>
-        <SelectBox
-          className="w-32 mr-8"
-          selectClass="rounded-lg bg-field text-xl text-foreground"
-          label=""
-          selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_PPL_USE_CODES]}
-          value={var1}
-          onSelectValue={(val) => {
-            setVar1(String(val));
-          }}
-          selectContentClass="z-[101]"
-        />
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            용도
+          </Label>
+          <SelectBox
+            className="w-32"
+            selectClass="rounded-lg bg-field text-xl text-foreground"
+            label=""
+            selectArray={[
+              { val: "0", text: "전체" },
+              ...MS_SWAGE_PPL_USE_CODES,
+            ]}
+            value={var1}
+            onSelectValue={(val) => {
+              setVar1(String(val));
+            }}
+            selectContentClass="z-[101]"
+          />
+        </div>
         {/* 재질 */}
-        {/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">재질</Label>
+        {/* <Label className="text-xl text-label font-medium whitespace-nowrap mr-2">재질</Label>
         <SelectBox
           className="w-60 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-background text-xl"
           label=""
           selectArray={MS_SWAGE_PPL_CODES}
           value={var2}
@@ -128,42 +143,46 @@ const SwagePpl: React.FC = () => {
           selectContentClass="z-[101]"
         /> */}
         {/* 관경 */}
-        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">관경(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();
-            }
-          }}
-        />
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            관경(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="text-xl font-semibold">~</span>
+          <Input
+            className="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>
         {/* 연장 */}
-        {/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">연장(m)</Label>
+        {/* <Label className="text-xl text-label font-medium whitespace-nowrap mr-2">연장(m)</Label>
         <Input
           className="w-[60px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -198,8 +217,11 @@ const SwagePpl: React.FC = () => {
           }}
         /> */}
         {/* 조회 버튼 */}
-        <div className="flex-1 flex justify-end">
-          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        <div className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button onClick={handleSearch}>조회</Button>
+          <Button color="white" onClick={handleResetSearch}>
+            초기화
+          </Button>
         </div>
       </div>
     </div>
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
index 395c936a4..e808fed89 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수처리시설)
- * 
+ *
  * 📄 SwagePrcsFclt Tab
  * Next.js App Router (app/) 기반 검색 모달 하수처리시설 탭 컴포넌트
  *
@@ -11,36 +11,34 @@
  * - 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';
-
+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,
+    ctpvName,
+    sggName,
     yearFilter,
-    start1, end1, 
-    todayYear, todayMonth, todayDate,
-    getDateString
+    start1,
+    end1,
+    todayYear,
+    todayMonth,
+    todayDate,
+    getDateString,
   } = useSearchModalStore.getState();
 
   const cqlFilters: string[] = [];
   // 가동개시일자 범위
-  const startDate = getDateString(
-    yearFilter.start,
-    '',
-    '',
-    "19000101",
-  );
+  const startDate = getDateString(yearFilter.start, "", "", "19000101");
   const endDate = getDateString(
     yearFilter.end,
-    '',
-    '',
+    "",
+    "",
     `${todayYear}${todayMonth}${todayDate}`,
   );
   cqlFilters.push(
@@ -67,16 +65,24 @@ export const swagePrcsFcltCqlFilters = () => {
 
 const SwagePrcsFclt: React.FC = () => {
   const {
-    start1, setStart1, end1, setEnd1,
-    ctpvCd, setCtpvCd, setCtpvName,
-    sggCd, setSggCd, setSggName,
-    yearFilter, setYearFilter,
+    start1,
+    setStart1,
+    end1,
+    setEnd1,
+    ctpvCd,
+    setCtpvCd,
+    setCtpvName,
+    sggCd,
+    setSggCd,
+    setSggName,
+    yearFilter,
+    setYearFilter,
   } = useSearchModalStore();
-  const { handleSearch } = useSearchModal();
+  const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="mb-3">
-      <div className="mb-2 flex items-center">
+    <div className="min-w-0">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}
@@ -89,62 +95,73 @@ const SwagePrcsFclt: React.FC = () => {
           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=""
-        />
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            가동개시일자
+          </Label>
+          <YearRangeSelectBox
+            start={yearFilter.start}
+            end={yearFilter.end}
+            onChange={(range) =>
+              setYearFilter({
+                ...yearFilter,
+                start: range.start,
+                end: range.end,
+              })
+            }
+            startLabel=""
+            endLabel=""
+          />
+        </div>
         {/* 시설용량 */}
-        <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 shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            시설용량(㎥/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="text-xl font-semibold">~</span>
+          <Input
+            className="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>
         {/* 조회 버튼 */}
-        <div className="flex-1 flex justify-end">
-          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        <div className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button onClick={handleSearch}>조회</Button>
+          <Button color="white" onClick={handleResetSearch}>
+            초기화
+          </Button>
         </div>
       </div>
     </div>
   );
 };
 
-export default React.memo(SwagePrcsFclt);
\ No newline at end of file
+export default React.memo(SwagePrcsFclt);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
index 0d1fb9fc4..42ae6e265 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 기본정보 탭 (구분: 하수처리구역)
- * 
+ *
  * 📄 SwagePrcsZone Tab
  * Next.js App Router (app/) 기반 검색 모달 하수처리구역 탭 컴포넌트
  *
@@ -10,38 +10,32 @@
  * - 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';
-
+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 { 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 (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();
+  const { var1, setVar1, var2, setVar2, ctpvCd, setCtpvCd, sggCd, setSggCd } =
+    useSearchModalStore();
+  const { handleSearch, handleResetSearch } = useSearchModal();
 
   return (
-    <div className="mb-3">
-      <div className="mb-2 flex items-center">
+    <div className="min-w-0">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
         <CtpvSggPrcsFcltSelectBox
           sido={ctpvCd}
           sigungu={sggCd}
@@ -51,43 +45,54 @@ const swagePrcsZone: React.FC = () => {
           }}
           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 shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            하수처리시설명
+          </Label>
+          <Input
+            className="w-[120px] !text-xl placeholder:text-center"
+            placeholder="입력"
+            value={var2}
+            onChange={(e) => {
+              setVar2(e.target.value);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault(); // Enter 키 기본 동작 방지
+                handleSearch();
+              }
+            }}
+          />
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Label className="whitespace-nowrap text-xl font-medium text-label">
+            하수처리구역명
+          </Label>
+          <Input
+            className="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>
         {/* 조회 버튼 */}
-        <div className="flex-1 flex justify-end">
-          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
+        <div className="flex min-w-fit flex-1 justify-end gap-2">
+          <Button onClick={handleSearch}>조회</Button>
+          <Button color="white" onClick={handleResetSearch}>
+            초기화
+          </Button>
         </div>
       </div>
     </div>
   );
 };
 
-export default React.memo(swagePrcsZone);
\ No newline at end of file
+export default React.memo(swagePrcsZone);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts
index 6846b92ba..207456e50 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useBasicTab.ts
@@ -8,56 +8,58 @@
  * - CQL 필터 생성을 통한 쿼리 조건 설정
  * - Zustand를 통한 상태 관리 및 로딩 처리
  * - 데이터 매핑 및 코드 변환 (시도/시군구, 용도 등)
- * 
+ *
  * 🔗 사용 API
  * - 관망도 시설물 목록 조회: GET /api/v1/fclts (sewerage-service)
  */
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
 import {
-  MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_SHAPE, MS_SWAGE_MHL_CODES, MS_SWAGE_MHL_USE_CODES,
-  FldngWtlvMapExcelCol, MsSwagePplExcelCol, SwtrmtFcltExcelCol, SwtrmtPrcsZoneExcelCol, MsSwageMhlExcelCol, ExclnSewagePumpExcelCol, stofcbrExcelCol
-} from '../components/common/table';
+  MS_SWAGE_PPL_USE_CODES,
+  MS_SWAGE_PPL_CODES,
+  MS_SWAGE_PPL_SHAPE,
+  MS_SWAGE_MHL_CODES,
+  MS_SWAGE_MHL_USE_CODES,
+  FldngWtlvMapExcelCol,
+  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 { 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 { fldngWtlvMapCqlFilters } from './fldngWtlvMap';
-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';
-import type { UiTableSort } from "@common/business_components/ui/table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useAlertStore } from "@/shared/lib";
+import useSearchModalStore from "@/store/useSearchModalStore";
+import { swagePplCqlFilters } from "./swagePpl";
+import { swagePrcsFcltCqlFilters } from "./swagePrcsFclt";
+import { swagePrcsZoneCqlFilters } from "./swagePrcsZone";
+import { fldngWtlvMapCqlFilters } from "./fldngWtlvMap";
+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/");
 
-const DISABLED_BASIC_SORT_KEYS = new Set(['flow_direction_basis']);
-
-const resolveBasicSort = (basicType: string, sort?: UiTableSort) => {
-  if (!sort) return undefined;
-  if (basicType === 'tb_ms_swage_ppl' && DISABLED_BASIC_SORT_KEYS.has(sort.key)) {
-    return undefined;
-  }
-  return sort;
-};
-
-
 export default function useBasicTab() {
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
   const {
     basicType,
     tableData,
     curPage,
-    todayYear, todayMonth, todayDate,
+    todayYear,
+    todayMonth,
+    todayDate,
     setIsSearchModalOpen,
     setTableData,
     setTableCount,
@@ -65,79 +67,114 @@ export default function useBasicTab() {
   } = useSearchModalStore();
   const { ctpv, sgg } = useStore();
 
-
-  const fetchBasicFilteredData = async (requestedSort?: UiTableSort) => {
-    const activeSort = resolveBasicSort(basicType, requestedSort ?? useSearchModalStore.getState().sort);
+  const fetchBasicFilteredData = async () => {
+    // 초기화 직후에도 이전 렌더의 조건을 사용하지 않도록 최신 스토어 값을 읽는다.
+    const { basicType, curPage } = useSearchModalStore.getState();
     let cqlFilters: string[] = [];
     const queryParams = new URLSearchParams({
       lyrTypeNm: basicType,
       page: `${curPage - 1}`,
-      size: '10',
+      size: "10",
     });
-    if (basicType === 'tb_ms_swage_ppl') queryParams.set('includeFlowDirectionBasis', 'true');
-    if (activeSort) queryParams.set('sort', `${activeSort.key},${activeSort.direction}`);
+    if (basicType === "tb_ms_swage_ppl")
+      queryParams.set("includeFlowDirectionBasis", "true");
 
-    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_fldng_wtlv_map') cqlFilters = fldngWtlvMapCqlFilters(); // 침수흔적도
-    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 '));
+    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_fldng_wtlv_map")
+      cqlFilters = fldngWtlvMapCqlFilters(); // 침수흔적도
+    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 totalCount = Number(res.count ?? 0);
 
     // 🎯 각 아이템을 개별적으로 포맷팅하면서 일련번호 추가
-    const dataWithRowNumber = (res.data || []).map((item: any, index: number) => {
-      // 🎯 먼저 각 아이템을 포맷팅
-      const formattedItem = formatDisplayData(item);
+    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 ?? '';
+        let ctpvCd = item?.ctpvNm ?? formattedItem?.ctpvNm ?? "";
+        let sggCd = item?.sggNm ?? formattedItem?.sggNm ?? "";
 
-      if (!ctpvCd || !sggCd) {
-        const code = String(item?.pbadmsEmdCd ?? formattedItem?.pbadmsEmdCd ?? item?.stdgCd ?? formattedItem?.stdgCd ?? '')?.trim();
-        if (!ctpvCd && code) ctpvCd = code.slice(0, 2);
-        if (!sggCd && code) sggCd = code.slice(0, 5);
-      }
+        if (!ctpvCd || !sggCd) {
+          const code = String(
+            item?.pbadmsEmdCd ??
+              formattedItem?.pbadmsEmdCd ??
+              item?.stdgCd ??
+              formattedItem?.stdgCd ??
+              "",
+          )?.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());
+        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,
+        ); // 하수관로 시설물형태코드
 
-      // 추가 처리 및 일련번호 추가
-      return {
-        ...formattedItem,
-        rowNumber: activeSort?.key === 'rowNumber' && activeSort.direction === 'desc'
-          ? totalCount - ((curPage - 1) * 10 + index)
-          : (curPage - 1) * 10 + index + 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,
-      };
-    });
+        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: totalCount - ((curPage - 1) * 10 + index),
+          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);
     setTableCount(totalCount);
   };
 
-  // 기본정보 테이블 cellClick 핸들러 
-  const handleBasicCellClick = async (index?: number | undefined, headId?: String) => {
+  // 기본정보 테이블 cellClick 핸들러
+  const handleBasicCellClick = async (
+    index?: number | undefined,
+    headId?: String,
+  ) => {
     if (typeof index === "number") {
       const row = tableData[index];
 
@@ -170,13 +207,14 @@ export default function useBasicTab() {
       return;
     }
 
-    toast.dismiss("global-confirm-toast");
+    if (
+      !(await confirm(
+        "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
+      ))
+    )
+      return;
 
-    confirmToast(
-      "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
-      onDownload ?? (() => { }),
-      "text-xl font-medium text-gray-800"
-    );
+    await onDownload();
 
     async function onDownload() {
       setIsLoading(true);
@@ -184,60 +222,59 @@ export default function useBasicTab() {
       try {
         const queryParams = new URLSearchParams({
           lyrTypeNm: basicType,
-          size: '10000',
+          size: "10000",
         });
-        if (basicType === 'tb_ms_swage_ppl') queryParams.set('includeFlowDirectionBasis', 'true');
-        const activeSort = resolveBasicSort(basicType, useSearchModalStore.getState().sort);
-        if (activeSort) queryParams.set('sort', `${activeSort.key},${activeSort.direction}`);
+        if (basicType === "tb_ms_swage_ppl")
+          queryParams.set("includeFlowDirectionBasis", "true");
 
         let cqlFilters: string[] = [];
         let headerMapping: { [key: string]: string } = {};
         let headerRange: string = "A1:F1";
 
         switch (basicType) {
-          case 'tb_ms_swage_ppl': {
+          case "tb_ms_swage_ppl": {
             // 하수관로
-            cqlFilters = swagePplCqlFilters()
+            cqlFilters = swagePplCqlFilters();
             headerMapping = MsSwagePplExcelCol;
             headerRange = "A1:Q1";
             break;
           }
-          case 'tb_il_swage_prcs_fclt': {
+          case "tb_il_swage_prcs_fclt": {
             // 하수처리시설
             cqlFilters = swagePrcsFcltCqlFilters();
             headerMapping = SwtrmtFcltExcelCol;
             headerRange = "A1:J1";
             break;
           }
-          case 'tb_ms_swage_prcs_zone': {
+          case "tb_ms_swage_prcs_zone": {
             // 하수처리구역
             cqlFilters = swagePrcsZoneCqlFilters();
             headerMapping = SwtrmtPrcsZoneExcelCol;
             headerRange = "A1:D1";
             break;
           }
-          case 'tb_ms_fldng_wtlv_map': {
+          case "tb_ms_fldng_wtlv_map": {
             // 침수흔적도
             cqlFilters = fldngWtlvMapCqlFilters();
             headerMapping = FldngWtlvMapExcelCol;
             headerRange = "A1:O1";
             break;
           }
-          case 'tb_ms_swage_mhl': {
+          case "tb_ms_swage_mhl": {
             // 하수맨홀
             cqlFilters = swageMhlCqlFilters();
             headerMapping = MsSwageMhlExcelCol;
             headerRange = "A1:J1";
             break;
           }
-          case 'tb_ms_swage_pmstn': {
+          case "tb_ms_swage_pmstn": {
             // 하수펌프장
             cqlFilters = swagePmstnCqlFilters();
             headerMapping = ExclnSewagePumpExcelCol;
             headerRange = "A1:J1";
             break;
           }
-          case 'tb_ms_stofcbr': {
+          case "tb_ms_stofcbr": {
             // 우수토실
             cqlFilters = stofcbrCqlFilters();
             headerMapping = stofcbrExcelCol;
@@ -246,25 +283,44 @@ export default function useBasicTab() {
           }
         }
 
-        if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and '));
+        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 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]),
+        );
 
         let mappedContent = (res.data || []).map((item: any) => {
           const formattedItem = formatDisplayData(item);
 
-          let ctpvCd = item?.ctpvCd ?? formattedItem?.ctpvCd ?? '';
-          let sggCd = item?.sggCd ?? formattedItem?.sggCd ?? '';
+          let ctpvCd = item?.ctpvCd ?? formattedItem?.ctpvCd ?? "";
+          let sggCd = item?.sggCd ?? formattedItem?.sggCd ?? "";
 
           if (!ctpvCd || !sggCd) {
-            const code = String(item?.pbadmsEmdCd ?? formattedItem?.pbadmsEmdCd ?? item?.stdgCd ?? formattedItem?.stdgCd ?? '')?.trim();
+            const code = String(
+              item?.pbadmsEmdCd ??
+                formattedItem?.pbadmsEmdCd ??
+                item?.stdgCd ??
+                formattedItem?.stdgCd ??
+                "",
+            )?.trim();
             if (!ctpvCd && code) ctpvCd = code.slice(0, 2);
             if (!sggCd && code) sggCd = code.slice(0, 5);
           }
@@ -274,113 +330,150 @@ export default function useBasicTab() {
           // const trimmedMqltCd = item?.mqltCd?.trim();
 
           switch (basicType) {
-            case 'tb_ms_swage_ppl': {
+            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 || '-',
+                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': {
+            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 ?? '-'
+                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': {
+            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 ?? '-'
+                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_fldng_wtlv_map': {
+            case "tb_ms_fldng_wtlv_map": {
               // 침수흔적도
               return {
-                fldngYr: formattedItem.fldngYr ?? item.fldngYr ?? '-',
-                fldngDstrNm: formattedItem.fldngDstrNm ?? item.fldngDstrNm ?? '-',
-                ctpvNm: ctpvMap.get(ctpvCd) ?? formattedItem.ctpvNm ?? '-',
-                sggNm: sggMap.get(sggCd) ?? formattedItem.sggNm ?? '-',
-                bgngYmd: formattedItem.bgngYmd ?? item.bgngYmd ?? '-',
-                fldngBgngHm: formattedItem.fldngBgngHm ?? item.fldngBgngHm ?? '-',
-                endYmd: formattedItem.endYmd ?? item.endYmd ?? '-',
-                fldngEndHm: formattedItem.fldngEndHm ?? item.fldngEndHm ?? '-',
-                fldngHr: formattedItem.fldngHr ?? item.fldngHr ?? '-',
-                fldngDstrctNm: formattedItem.fldngDstrctNm ?? item.fldngDstrctNm ?? '-',
-                fldngCsDtlCd: formattedItem.fldngCsDtlCd ?? item.fldngCsDtlCd ?? '-',
-                avgFldngWtlv: formattedItem.avgFldngWtlv ?? item.avgFldngWtlv ?? '-',
-                fldngArea: formattedItem.fldngArea ?? item.fldngArea ?? '-',
-                exmnYr: formattedItem.exmnYr ?? item.exmnYr ?? '-',
-                damAmt: formattedItem.damAmt ?? item.damAmt ?? '-',
+                fldngYr: formattedItem.fldngYr ?? item.fldngYr ?? "-",
+                fldngDstrNm:
+                  formattedItem.fldngDstrNm ?? item.fldngDstrNm ?? "-",
+                ctpvNm: ctpvMap.get(ctpvCd) ?? formattedItem.ctpvNm ?? "-",
+                sggNm: sggMap.get(sggCd) ?? formattedItem.sggNm ?? "-",
+                bgngYmd: formattedItem.bgngYmd ?? item.bgngYmd ?? "-",
+                fldngBgngHm:
+                  formattedItem.fldngBgngHm ?? item.fldngBgngHm ?? "-",
+                endYmd: formattedItem.endYmd ?? item.endYmd ?? "-",
+                fldngEndHm: formattedItem.fldngEndHm ?? item.fldngEndHm ?? "-",
+                fldngHr: formattedItem.fldngHr ?? item.fldngHr ?? "-",
+                fldngDstrctNm:
+                  formattedItem.fldngDstrctNm ?? item.fldngDstrctNm ?? "-",
+                fldngCsDtlCd:
+                  formattedItem.fldngCsDtlCd ?? item.fldngCsDtlCd ?? "-",
+                avgFldngWtlv:
+                  formattedItem.avgFldngWtlv ?? item.avgFldngWtlv ?? "-",
+                fldngArea: formattedItem.fldngArea ?? item.fldngArea ?? "-",
+                exmnYr: formattedItem.exmnYr ?? item.exmnYr ?? "-",
+                damAmt: formattedItem.damAmt ?? item.damAmt ?? "-",
               };
             }
-            case 'tb_ms_swage_mhl': {
+            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 ?? '-'
+                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': {
+            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 ?? '-'
+                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': {
+            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 ?? '-'
+                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 ?? "-",
               };
             }
           }
@@ -390,7 +483,7 @@ export default function useBasicTab() {
         const excelData = mappedContent; // 배열로 감싸서 전달
 
         // 파일명 생성 (분석번호 기반)
-        const label = BASIC_TYPES.find((type) => type.val === basicType)?.text
+        const label = BASIC_TYPES.find((type) => type.val === basicType)?.text;
         const fileName = `${label} 조회 결과_${todayYear}${todayMonth}${todayDate}`;
 
         await downloadExcelWithKoreanHeaders({
@@ -398,7 +491,7 @@ export default function useBasicTab() {
           fileName: fileName,
           sheetNameArray: [fileName],
           headerRange: headerRange,
-          headerMapping: headerMapping
+          headerMapping: headerMapping,
         });
         setIsLoading(false);
       } catch (error) {
@@ -409,6 +502,5 @@ export default function useBasicTab() {
     }
   };
 
-
   return { fetchBasicFilteredData, handleBasicCellClick, basicExcelDownload };
-};
+}
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts
index d92cd3efd..43e726cc3 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useOperationTab.ts
@@ -9,78 +9,73 @@
  * - CQL 필터 생성을 통한 쿼리 조건 설정
  * - Zustand를 통한 상태 관리 및 로딩 처리
  * - 데이터 매핑 및 코드 변환 (사업 유형, 용도, 재질 등)
- * 
+ *
  * 🔗 사용 API
  * - 유지관리 정보 목록 조회: GET /api/v1/bizInfo (sewerage-service)
  * - 유지관리 정보(사업정보) 관련 시설 목록 조회: GET /api/v1/bizInfo/fclts (sewerage-service)
  */
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
-import { MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
+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 { 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';
-import { postPopupMessageAndClose } from '@/features/windowPopup/lib/popupMessage';
-import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
-import type { UiTableSort } from "@common/business_components/ui/table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useAlertStore } from "@/shared/lib";
+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/");
 
-// Spring Pageable 단일 정렬 계약을 정보검색 요청 파라미터에 추가한다.
-const appendSortParameter = (
-  request: Record<string, string>,
-  sort: UiTableSort | undefined,
-  scope: 'list' | 'facility',
-) => {
-  if (!sort) return;
-  const requestSort = sort.key === 'rowNumber'
-    ? {
-        key: scope === 'list' ? 'bizId' : 'ast_id',
-        direction: sort.direction === 'asc' ? 'desc' : 'asc',
-      }
-    : sort;
-  request.sort = `${requestSort.key},${requestSort.direction}`;
-};
-
-
 export default function useOperationTab() {
   const OPERATION_TABLE_SIZE = 5;
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
 
   const {
     workType,
-    tableData, detailTableData,
-    curPage, detailCurPage,
+    tableData,
+    detailTableData,
+    curPage,
+    detailCurPage,
     detailBizId,
-    var1, var2,
+    var1,
+    var2,
     yearFilter,
-    todayYear, todayMonth, todayDate,
+    todayYear,
+    todayMonth,
+    todayDate,
     setIsSearchModalOpen,
-    setTableData, setDetailTableData,
-    setTableCount, setDetailTableCount,
+    setTableData,
+    setDetailTableData,
+    setTableCount,
+    setDetailTableCount,
     setDetailCurPage,
-    sort, detailSort,
-    setDetailSort,
-    setIsLoading, setIsDetailLoading,
+    setIsLoading,
+    setIsDetailLoading,
     setIsResetDetailPage,
     setIsResetDetailSelection,
     setDetailBizId,
-    getDateString
+    getDateString,
   } = useSearchModalStore();
   const { BIZ_TY_CD } = useStore();
 
-  const WORK_TYPES = [  // 유지관리 정보 '구분' 선택 목록
+  const WORK_TYPES = [
+    // 유지관리 정보 '구분' 선택 목록
     { val: "['200', '201', '204']", text: "보수 및 갱신" },
     { val: "['100']", text: "점검 및 진단" },
     { val: "['203']", text: "청소 및 준설" },
   ];
-  const OPERATION_TABLE_HEADLIST = [  // 유지관리 정보 - 사업 현황
-    { id: 'rowNumber', title: '일련번호' },
+  const OPERATION_TABLE_HEADLIST = [
+    // 유지관리 정보 - 사업 현황
+    { id: "rowNumber", title: "순번" },
     { id: "bizInfoNm", title: "사업명" },
     { id: "flfmtBgngYmd", title: "수행시작일자" },
     { id: "flfmtEndYmd", title: "수행종료일자" },
@@ -88,8 +83,9 @@ export default function useOperationTab() {
     { id: "bizTypeCd", title: "사업유형" },
     { id: "bizAmt", title: "사업금액" },
   ];
-  const MAINTENANACE_TABLE_HEADLIST = [ // 유지관리 정보 - 보수 및 갱신 결과표
-    { id: 'rowNumber', title: '일련번호' },
+  const MAINTENANACE_TABLE_HEADLIST = [
+    // 유지관리 정보 - 보수 및 갱신 결과표
+    { id: "rowNumber", title: "순번" },
     { id: "fcltMngNo", title: "관리번호" },
     { id: "swtrmt_zone_nm", title: "처리구역" },
     { id: "usgCd", title: "용도" },
@@ -101,8 +97,9 @@ export default function useOperationTab() {
     { id: "instlYmd", title: "설치일자" },
     // { id: "instlYmd", title: "사업구분" },
   ];
-  const CLEANING_TABLE_HEADLIST = [  // 유지관리 정보 - 청소 및 준설 결과표
-    { id: 'rowNumber', title: '일련번호' },
+  const CLEANING_TABLE_HEADLIST = [
+    // 유지관리 정보 - 청소 및 준설 결과표
+    { id: "rowNumber", title: "순번" },
     { id: "fcltMngNo", title: "관리번호" },
     { id: "swtrmt_zone_nm", title: "처리구역" },
     { id: "usgCd", title: "용도" },
@@ -113,8 +110,9 @@ export default function useOperationTab() {
     { id: "prlgVl", title: "연장(m)" },
     { id: "instlYmd", title: "설치일자" },
   ];
-  const INSPECTION_TABLE_HEADLIST = [  // 유지관리 정보 - 점검 및 진단 결과표
-    { id: 'rowNumber', title: '일련번호' },
+  const INSPECTION_TABLE_HEADLIST = [
+    // 유지관리 정보 - 점검 및 진단 결과표
+    { id: "rowNumber", title: "순번" },
     { id: "fcltMngNo", title: "관리번호" },
     { id: "swtrmt_zone_nm", title: "처리구역" },
     { id: "usgCd", title: "용도" },
@@ -136,18 +134,13 @@ export default function useOperationTab() {
       size: `${OPERATION_TABLE_SIZE}`,
     };
     if (var1) RequestDTO.bizInfoNm = var1;
-    if (var2 != '0' && var2) RequestDTO.bizTypeCd = var2;
+    if (var2 != "0" && var2) RequestDTO.bizTypeCd = var2;
     // 수행기간 범위
-    const startDate = getDateString(
-      yearFilter.start,
-      '',
-      '',
-      "19000101",
-    );
+    const startDate = getDateString(yearFilter.start, "", "", "19000101");
     const endDate = getDateString(
       yearFilter.end,
-      '',
-      '',
+      "",
+      "",
       `${todayYear}${todayMonth}${todayDate}`,
     );
     RequestDTO.fromflfmtEndYmd = startDate;
@@ -155,24 +148,26 @@ export default function useOperationTab() {
 
     // JSON.parse 사용으로 문자열 -> 배열 변환
     RequestDTO.workTypes = JSON.parse(workType.replace(/'/g, '"'));
-    appendSortParameter(RequestDTO, sort, 'list');
 
     const params = new URLSearchParams(RequestDTO).toString();
 
     const res = await getData(`v1/bizInfo?${params}`);
     const totalElements = Number(res.totalElements ?? 0);
 
-    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: sort?.key === 'rowNumber' && sort.direction === 'desc'
-          ? totalElements - ((curPage - 1) * OPERATION_TABLE_SIZE + index)
-          : (curPage - 1) * OPERATION_TABLE_SIZE + index + 1,
-        bizTypeCd: matched ? matched.lwpoCdNm : item.bizTypeCd,
-      };
-    });
+    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:
+            totalElements - ((curPage - 1) * OPERATION_TABLE_SIZE + index),
+          bizTypeCd: matched ? matched.lwpoCdNm : item.bizTypeCd,
+        };
+      },
+    );
 
     setTableData(mappedContent || []);
     setTableCount(totalElements);
@@ -180,12 +175,14 @@ export default function useOperationTab() {
     setDetailTableCount(0);
   };
 
-  // 유지관리 정보 테이블 cellClick 핸들러 
-  const handleOperationCellClick = async (index?: number | undefined, headId?: String) => {
+  // 유지관리 정보 테이블 cellClick 핸들러
+  const handleOperationCellClick = async (
+    index?: number | undefined,
+    headId?: String,
+  ) => {
     setIsResetDetailPage(true); // 페이지를 1로 초기화
     setIsResetDetailSelection(true); // 선택 초기화
     setIsResetDetailPage(true); // 디테일 페이지를 초기화
-    setDetailSort(undefined); // 새 사업을 선택하면 이전 상세 정렬을 해제한다.
 
     if (typeof index === "number") {
       setIsDetailLoading(true);
@@ -193,33 +190,45 @@ export default function useOperationTab() {
       setDetailCurPage(1); // 상세 페이지 초기화
       try {
         const RequestDTO: Record<string, string> = {
-          page: '0',
+          page: "0",
           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 res = await getData(
+          `v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`,
+        );
+        const totalDetailElements = Number(res.count ?? 0);
 
-        const mappedData = (res.data || []).map((item: any, detailIndex: number) => {
-          const formattedItem = formatDisplayData(item);
+        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: 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 : '-',
-          };
-        });
+            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: totalDetailElements - detailIndex,
+              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);
+        setDetailTableCount(totalDetailElements);
       } catch (error) {
-        console.error('유지관리 정보 cellClick 에러:', error);
+        console.error("유지관리 정보 cellClick 에러:", error);
+        setDetailTableData([]);
+        setDetailTableCount(0);
+        alert("선택한 사업의 결과 목록을 불러오지 못했습니다.");
       } finally {
         setIsDetailLoading(false);
         setIsResetDetailPage(false);
@@ -228,8 +237,11 @@ export default function useOperationTab() {
     }
   };
 
-  // 유지관리 정보 디테일 테이블 cellClick 핸들러 
-  const handleOperationResultCellClick = async (index?: number | undefined, headId?: String) => {
+  // 유지관리 정보 디테일 테이블 cellClick 핸들러
+  const handleOperationResultCellClick = async (
+    index?: number | undefined,
+    headId?: String,
+  ) => {
     if (typeof index === "number") {
       const row = detailTableData[index];
 
@@ -255,8 +267,8 @@ export default function useOperationTab() {
     }
   };
 
-  // 유지관리 정보 디테일 테이블 페이지네이션 핸들러  
-  const handleOperationPageNation = async (index?: number | undefined, requestedSort?: UiTableSort) => {
+  // 유지관리 정보 디테일 테이블 페이지네이션 핸들러
+  const handleOperationPageNation = async (index?: number | undefined) => {
     if (typeof index === "number") {
       setIsDetailLoading(true);
       try {
@@ -265,31 +277,38 @@ export default function useOperationTab() {
           size: `${OPERATION_TABLE_SIZE}`,
           bizId: String(detailBizId),
         };
-        const activeDetailSort = requestedSort ?? useSearchModalStore.getState().detailSort;
-        appendSortParameter(RequestDTO, activeDetailSort, 'facility');
-        const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
+        const res = await getData(
+          `v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`,
+        );
         const totalElements = Number(res.count ?? 0);
 
-        const mappedData = (res.data || []).map((item: any, detailIndex: number) => {
-          const formattedItem = formatDisplayData(item);
+        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: activeDetailSort?.key === 'rowNumber' && activeDetailSort.direction === 'desc'
-              ? totalElements - ((detailCurPage - 1) * OPERATION_TABLE_SIZE + detailIndex)
-              : (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 : '-',
-          };
-        });
+            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:
+                totalElements -
+                ((detailCurPage - 1) * OPERATION_TABLE_SIZE + detailIndex),
+              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(totalElements);
       } catch (error) {
-        console.error('유지관리 정보 페이지네이션 에러:', error);
+        console.error("유지관리 정보 페이지네이션 에러:", error);
+        alert("선택한 사업의 결과 목록을 불러오지 못했습니다.");
       } finally {
         setIsDetailLoading(false);
       }
@@ -303,34 +322,30 @@ export default function useOperationTab() {
       return;
     }
 
-    toast.dismiss("global-confirm-toast");
+    if (
+      !(await confirm(
+        "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
+      ))
+    )
+      return;
 
-    confirmToast(
-      "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
-      onAnalysis ?? (() => { }),
-      "text-xl font-medium text-gray-800"
-    );
+    await onAnalysis();
 
     async function onAnalysis() {
       setIsLoading(true);
 
       try {
         const RequestDTO: Record<string, string> = {
-          size: '10000',
+          size: "10000",
         };
         if (var1) RequestDTO.bizInfoNm = var1;
-        if (var2 != '0' && var2) RequestDTO.bizTypeCd = var2;
+        if (var2 != "0" && var2) RequestDTO.bizTypeCd = var2;
         // 수행기간 범위
-        const startDate = getDateString(
-          yearFilter.start,
-          '',
-          '',
-          "19000101",
-        );
+        const startDate = getDateString(yearFilter.start, "", "", "19000101");
         const endDate = getDateString(
           yearFilter.end,
-          '',
-          '',
+          "",
+          "",
           `${todayYear}${todayMonth}${todayDate}`,
         );
         RequestDTO.fromflfmtEndYmd = startDate;
@@ -338,33 +353,40 @@ export default function useOperationTab() {
 
         // JSON.parse 사용으로 문자열 -> 배열 변환
         RequestDTO.workTypes = JSON.parse(workType.replace(/'/g, '"'));
-        appendSortParameter(RequestDTO, sort, 'list');
 
         const params = new URLSearchParams(RequestDTO).toString();
         const res = await getData(`v1/bizInfo?${params}`);
 
         // 헤더 매핑 정의
         const headerMapping: { [key: string]: string } = {
-          'bizInfoNm': '사업명',
-          'flfmtBgngYmd': '수행시작일자',
-          'flfmtEndYmd': '수행종료일자',
-          'flfmtYr': '수행년도',
-          'bizTypeCd': '사업유형',
-          'bizAmt': '사업금액(원)',
+          bizInfoNm: "사업명",
+          flfmtBgngYmd: "수행시작일자",
+          flfmtEndYmd: "수행종료일자",
+          flfmtYr: "수행년도",
+          bizTypeCd: "사업유형",
+          bizAmt: "사업금액(원)",
         };
 
-        const bizTyCdMap = new Map(BIZ_TY_CD.map(code => [code.lwpoCd, code.lwpoCdNm]));
+        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),
+            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,
+            ),
           };
         });
 
@@ -372,7 +394,7 @@ export default function useOperationTab() {
         const excelData = mappedContent; // 배열로 감싸서 전달
 
         // 파일명 생성 (분석번호 기반)
-        const label = WORK_TYPES.find((type) => type.val === workType)?.text
+        const label = WORK_TYPES.find((type) => type.val === workType)?.text;
         const fileName = `${label} 사업 현황_${todayYear}${todayMonth}${todayDate}`;
 
         await downloadExcelWithKoreanHeaders({
@@ -380,7 +402,7 @@ export default function useOperationTab() {
           fileName: fileName,
           sheetNameArray: [fileName],
           headerRange: "A1:F1",
-          headerMapping: headerMapping
+          headerMapping: headerMapping,
         });
         setIsLoading(false);
       } catch (error) {
@@ -398,42 +420,47 @@ export default function useOperationTab() {
       return;
     }
 
-    toast.dismiss("global-confirm-toast");
+    if (
+      !(await confirm(
+        "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
+      ))
+    )
+      return;
 
-    confirmToast(
-      "파일 다운로드에는 2분 내외의 시간이 소요될 수 있습니다.\n파일 다운로드를 진행하시겠습니까?",
-      onAnalysis ?? (() => { }),
-      "text-xl font-medium text-gray-800"
-    );
+    await onAnalysis();
 
     async function onAnalysis() {
-
       setIsLoading(true);
 
       try {
         const RequestDTO: Record<string, string> = {
-          size: '100',
+          size: "100",
           bizId: String(detailBizId),
         };
-        appendSortParameter(RequestDTO, detailSort, 'facility');
-        
-        const res = await getData(`v1/bizInfo/fclts?${new URLSearchParams(RequestDTO).toString()}`);
-        
+
+        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': '운영적 상태등급',
+          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 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) => {
@@ -444,19 +471,35 @@ export default function useOperationTab() {
           const trimmedMqltCd = item?.mqltCd?.trim();
 
           // zone 값 한 번만 계산
-          const zone = item.swtrmtZoneNm ?? formattedItem.swtrmt_zone_nm ?? item.swtrmt_zone_nm ?? '';
+          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),
+            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,
+            ),
           };
         });
 
@@ -464,7 +507,7 @@ export default function useOperationTab() {
         const excelData = mappedData; // 배열로 감싸서 전달
 
         // 파일명 생성 (분석번호 기반)
-        const label = WORK_TYPES.find((type) => type.val === workType)?.text
+        const label = WORK_TYPES.find((type) => type.val === workType)?.text;
         const fileName = `${label} 결과표_${todayYear}${todayMonth}${todayDate}`;
 
         await downloadExcelWithKoreanHeaders({
@@ -472,7 +515,7 @@ export default function useOperationTab() {
           fileName: fileName,
           sheetNameArray: [fileName],
           headerRange: "A1:I1",
-          headerMapping: headerMapping
+          headerMapping: headerMapping,
         });
 
         setIsLoading(false);
@@ -498,7 +541,6 @@ export default function useOperationTab() {
     return true;
   };
 
-
   return {
     WORK_TYPES,
     OPERATION_TABLE_HEADLIST,
@@ -512,6 +554,6 @@ export default function useOperationTab() {
     handleOperationPageNation,
     emitMultipleFeaturesToMap,
     operationExcelDownload,
-    operationResultExcelDownload
+    operationResultExcelDownload,
   };
-};
+}
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts
index 4a2bd5a5b..084c41113 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts
@@ -17,6 +17,7 @@ import { getDcData } from '@/components/lib/api';
 import { fileDownload } from '@/utils';
 import { useReportTabStore } from '@/store/useReportTabStore';
 import useSearchModalStore from '@/store/useSearchModalStore';
+import { useAlertStore } from '@/shared/lib';
 
 export type Folder = {
   clsfSystmSn: string;
@@ -50,6 +51,7 @@ const buildDisplayFileName = (files: ReportDataFile[]) => {
 };
 
 export default function useReportTab() {
+  const alert = useAlertStore((state) => state.setMessage);
   const REPORT_TYPES = [
     { val: '0', text: '전체' },
     { val: '1', text: '보고서' },
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
index b9ba6e73d..f2972440d 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
@@ -8,25 +8,27 @@
  * - 여러 시설 보기 기능
  * - 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';
-import { postPopupMessageAndClose } from '@/features/windowPopup/lib/popupMessage';
-import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
-import type { UiTableSort } from "@common/business_components/ui/table";
+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, {
+  SEARCH_MODAL_DEFAULT_BASIC_TYPE,
+  SEARCH_MODAL_DEFAULT_WORK_TYPE,
+} 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' &&
+  typeof window !== "undefined" &&
   !!window.opener &&
-  window.location.pathname.startsWith('/popup/');
+  window.location.pathname.startsWith("/popup/");
 
 export default function useSearchModal() {
   const {
@@ -49,13 +51,13 @@ export default function useSearchModal() {
   const { BIZ_TY_CD } = useStore();
 
   const TABS = [
-    { val: 'basic', text: '기본 정보' },
-    { val: 'operation', text: '유지관리 정보' },
-    { val: 'report', text: '하수도 정비 기본계획 보고서' },
+    { val: "basic", text: "기본 정보" },
+    { val: "operation", text: "유지관리 정보" },
+    { val: "report", text: "하수도 정비 기본계획 보고서" },
   ];
 
   // 검색 API 호출 함수
-  const fetchFilteredData = async (requestedSort?: UiTableSort) => {
+  const fetchFilteredData = async () => {
     const {
       activeTab: currentTab,
       curPage,
@@ -74,62 +76,51 @@ export default function useSearchModal() {
       setIsLoading,
       setIsResetSelection,
       setIsResetDetailSelection,
-      sort,
     } = useSearchModalStore.getState();
-    const activeSort = requestedSort ?? sort;
 
     setIsLoading(true);
     setIsResetSelection(true);
     setIsResetDetailSelection(true);
 
     try {
-      if (currentTab === 'basic') {
-        await fetchBasicFilteredData(activeSort);
-      } else if (currentTab === 'operation') {
+      if (currentTab === "basic") {
+        await fetchBasicFilteredData();
+      } else if (currentTab === "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;
+        if (var2 !== "0" && var2) requestDto.bizTypeCd = var2;
 
-        const startDate = getDateString(
-          yearFilter.start,
-          '',
-          '',
-          '19000101',
-        );
+        const startDate = getDateString(yearFilter.start, "", "", "19000101");
         const endDate = getDateString(
           yearFilter.end,
-          '',
-          '',
+          "",
+          "",
           `${todayYear}${todayMonth}${todayDate}`,
         );
         requestDto.fromflfmtEndYmd = startDate;
         requestDto.toflfmtEndYmd = endDate;
         requestDto.workTypes = JSON.parse(workType.replace(/'/g, '"'));
-        if (activeSort) {
-          const requestSort = activeSort.key === 'rowNumber'
-            ? { key: 'bizId', direction: activeSort.direction === 'asc' ? 'desc' : 'asc' }
-            : activeSort;
-          requestDto.sort = `${requestSort.key},${requestSort.direction}`;
-        }
-
         const params = new URLSearchParams(requestDto).toString();
         const res = await getData(`v1/bizInfo?${params}`);
         const totalElements = Number(res.totalElements ?? 0);
 
-        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: activeSort?.key === 'rowNumber' && activeSort.direction === 'desc'
-              ? totalElements - ((curPage - 1) * OPERATION_TABLE_SIZE + index)
-              : (curPage - 1) * OPERATION_TABLE_SIZE + index + 1,
-            bizTypeCd: matched ? matched.lwpoCdNm : item.bizTypeCd,
-          };
-        });
+        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:
+                totalElements - ((curPage - 1) * OPERATION_TABLE_SIZE + index),
+              bizTypeCd: matched ? matched.lwpoCdNm : item.bizTypeCd,
+            };
+          },
+        );
 
         setTableData(mappedContent || []);
         setTableCount(totalElements);
@@ -140,7 +131,7 @@ export default function useSearchModal() {
       setShowTable(true);
       setIsResetSelection(false);
     } catch (err) {
-      console.error('API ERROR:', err);
+      console.error("API ERROR:", err);
       setTableData([]);
       setIsResetSelection(false);
     } finally {
@@ -160,9 +151,37 @@ export default function useSearchModal() {
     setShowTable(true);
   };
 
+  /** 현재 탭의 조건·페이지·선택을 기본값으로 복원하고 전체 기본 목록을 즉시 재조회한다. */
+  const handleResetSearch = () => {
+    const state = useSearchModalStore.getState();
+    const resetsBasicType =
+      state.activeTab === "basic" &&
+      state.basicType !== SEARCH_MODAL_DEFAULT_BASIC_TYPE;
+    const resetsWorkType =
+      state.activeTab === "operation" &&
+      state.workType !== SEARCH_MODAL_DEFAULT_WORK_TYPE;
+    state.resetFilters();
+    if (state.activeTab === "basic") {
+      state.setBasicType(SEARCH_MODAL_DEFAULT_BASIC_TYPE);
+    }
+    if (state.activeTab === "operation") {
+      state.setWorkType(SEARCH_MODAL_DEFAULT_WORK_TYPE);
+    }
+    state.setCurPage(1);
+    state.setDetailCurPage(1);
+    state.setIsResetPage(true);
+    state.setIsResetDetailPage(true);
+    state.setIsResetSelection(true);
+    state.setIsResetDetailSelection(true);
+    // 구분 변경 시 SearchModal의 자동조회 effect가 실행되므로 중복 요청을 만들지 않는다.
+    if (!resetsBasicType && !resetsWorkType) {
+      void fetchFilteredData();
+    }
+  };
+
   // 여러 시설 보기
   const viewMultipleFeature = async () => {
-    if (activeTab === 'basic') {
+    if (activeTab === "basic") {
       if (!(tableData.length === 0)) {
         if (isPopupWindow()) {
           const row = tableData[0];
@@ -186,7 +205,7 @@ export default function useSearchModal() {
         setIsLoading(false);
         setIsSearchModalOpen(false);
       }
-    } else if (activeTab === 'operation') {
+    } else if (activeTab === "operation") {
       if (!(detailTableData.length === 0)) {
         if (isPopupWindow()) {
           const row = detailTableData[0];
@@ -213,5 +232,12 @@ export default function useSearchModal() {
     }
   };
 
-  return { TABS, getDateString, handleSearch, viewMultipleFeature, fetchFilteredData };
+  return {
+    TABS,
+    getDateString,
+    handleSearch,
+    handleResetSearch,
+    viewMultipleFeature,
+    fetchFilteredData,
+  };
 }
diff --git a/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx b/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
index 8b03a82e8..3c9cb48f5 100644
--- a/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
+++ b/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 하수관망도 메인페이지 내 침수심 범례
- * 
+ *
  * 📄 WaterDepth Component
  * 침수심 범례 컴포넌트
  *
@@ -16,8 +16,8 @@ import { Label } from "@common/components/ui/label";
 import { useEffect } from "react";
 
 export const WATER_DEPTH_LAYER_TYPES: string[] = [
-  'tb_ms_flood_dngr_map', // 홍수위험지도
-  'tb_ms_sbmrg_dngr_map'  // 침수위험지도
+  "tb_ms_flood_dngr_map", // 홍수위험지도
+  "tb_ms_sbmrg_dngr_map", // 침수위험지도
 ];
 
 export type WaterDepthLegendItem = {
@@ -29,7 +29,9 @@ export type WaterDepthLegendItem = {
 };
 
 const getLayerTypeName = (layerInfo: any) =>
-  String(layerInfo?.lyrTyNm ?? layerInfo?.lyrTypeNm ?? layerInfo?.lyr_type_nm ?? "").trim();
+  String(
+    layerInfo?.lyrTyNm ?? layerInfo?.lyrTypeNm ?? layerInfo?.lyr_type_nm ?? "",
+  ).trim();
 
 const getFiniteSortOrder = (value: unknown) => {
   const parsed = Number(value);
@@ -65,20 +67,36 @@ const getLegendNumericOrder = (label: string) => {
 };
 
 const getLegendColor = (layerInfo: any) =>
-  String(layerInfo?.polgnColor ?? layerInfo?.spacColor ?? layerInfo?.lnColor ?? layerInfo?.lineColor ?? "").trim();
+  String(
+    layerInfo?.polgnColor ??
+      layerInfo?.spacColor ??
+      layerInfo?.lnColor ??
+      layerInfo?.lineColor ??
+      "",
+  ).trim();
 
 const getLegendBorderColor = (layerInfo: any) =>
-  String(layerInfo?.lnColor ?? layerInfo?.lineColor ?? layerInfo?.polgnColor ?? layerInfo?.spacColor ?? "").trim();
+  String(
+    layerInfo?.lnColor ??
+      layerInfo?.lineColor ??
+      layerInfo?.polgnColor ??
+      layerInfo?.spacColor ??
+      "",
+  ).trim();
 
-const hasLegendStyle = (layerInfo: any) => getLegendColor(layerInfo) !== "" || getLegendBorderColor(layerInfo) !== "";
+const hasLegendStyle = (layerInfo: any) =>
+  getLegendColor(layerInfo) !== "" || getLegendBorderColor(layerInfo) !== "";
 
 const normalizeLegendLabel = (label: string) => {
   const normalized = String(label).trim();
   return normalized.endsWith("미만") ? normalized : `${normalized} 미만`;
 };
 
-export const extractWaterDepthLegendItems = (checkedNodesData: any[]): WaterDepthLegendItem[] => {
-  if (!Array.isArray(checkedNodesData) || checkedNodesData.length === 0) return [];
+export const extractWaterDepthLegendItems = (
+  checkedNodesData: any[],
+): WaterDepthLegendItem[] => {
+  if (!Array.isArray(checkedNodesData) || checkedNodesData.length === 0)
+    return [];
 
   const items = new Map<string, WaterDepthLegendItem>();
 
@@ -108,8 +126,10 @@ export const extractWaterDepthLegendItems = (checkedNodesData: any[]): WaterDept
     const leftOrder = getLegendNumericOrder(left.key);
     const rightOrder = getLegendNumericOrder(right.key);
 
-    if (leftOrder.start !== rightOrder.start) return leftOrder.start - rightOrder.start;
-    if (leftOrder.priority !== rightOrder.priority) return leftOrder.priority - rightOrder.priority;
+    if (leftOrder.start !== rightOrder.start)
+      return leftOrder.start - rightOrder.start;
+    if (leftOrder.priority !== rightOrder.priority)
+      return leftOrder.priority - rightOrder.priority;
     if (leftOrder.end !== rightOrder.end) return leftOrder.end - rightOrder.end;
     if (left.sortSeq !== right.sortSeq) return left.sortSeq - right.sortSeq;
     return left.label.localeCompare(right.label, "ko");
@@ -133,7 +153,6 @@ export function WaterDepth({
   currentStep = 0,
   legendItems = [],
 }: WaterDepthProps) {
-
   useEffect(() => {
     if (setIsPlaying) setIsPlaying(isPlaying);
   }, [isPlaying, setIsPlaying]);
@@ -143,33 +162,50 @@ export function WaterDepth({
   };
 
   // 진행률 계산 (0-100%)
-  const progressPercentage = totalSteps > 0 ? (currentStep / totalSteps) * 100 : 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}>
+      <div className="w-[160px] rounded-lg border border-border bg-background px-4 py-3 shadow-lg">
+        <div className="mx-2 my-4 flex items-center justify-between">
+          <Label className="text-3xl font-bold text-foreground">
+            침수심 범례
+          </Label>
+          <button
+            type="button"
+            className="ml-2 mt-1"
+            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/pause_button.png"
+                alt="pause"
+                className="h-6 w-6 object-contain"
+              />
             ) : (
-              <img src="/images/map/toolbar/play_button_arrowhead.png" alt="play" className="w-6 h-6 object-contain" />
+              <img
+                src="/images/map/toolbar/play_button_arrowhead.png"
+                alt="play"
+                className="h-6 w-6 object-contain"
+              />
             )}
           </button>
         </div>
         <div className="mb-3">
-          <div className="w-full bg-gray-200 rounded-full h-1">
+          <div className="h-1 w-full rounded-full bg-muted">
             <div
-              className="bg-blue-900 h-1 rounded-full transition-all duration-300 ease-in-out"
+              className="h-1 rounded-full bg-blue-900 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">
+        <div className="mx-auto flex w-[140px] flex-col items-center">
+          {/* 침수심 범례 제목은 지도 수심정보를 구분하는 의미색이므로 고정 청색을 유지한다. */}
+          <div className="mb-2 w-full rounded bg-blue-900 py-1 text-center text-2xl text-white">
+            침수심 범례
+          </div>
+          <div className="w-full space-y-1">
             {legendItems.map((item) => (
               <LegendItem
                 key={item.key}
@@ -179,21 +215,29 @@ export function WaterDepth({
               />
             ))}
           </div>
-          <div className="border-t-2 border-blue-900 mt-1 mx-auto w-full" />
+          <div className="mx-auto mt-1 w-full border-t-2 border-blue-900" />
         </div>
       </div>
     </>
   );
 }
 
-function LegendItem({ color, borderColor, label }: { color: string; borderColor: string; label: string }) {
+function LegendItem({
+  color,
+  borderColor,
+  label,
+}: {
+  color: string;
+  borderColor: string;
+  label: string;
+}) {
   return (
-    <div className="flex items-center gap-2 w-full">
+    <div className="flex w-full items-center gap-2">
       <span
-        className="inline-block w-16 h-6"
+        className="inline-block h-6 w-16"
         style={{ backgroundColor: color, border: `1px solid ${borderColor}` }}
       />
-      <span className="text-xl text-gray-900 font-bold">{label}</span>
+      <span className="text-xl font-bold text-foreground">{label}</span>
     </div>
   );
 }
diff --git a/apps/sn/app/(popupLayout)/layout.tsx b/apps/sn/app/(popupLayout)/layout.tsx
index d02ca99ac..387155d2a 100644
--- a/apps/sn/app/(popupLayout)/layout.tsx
+++ b/apps/sn/app/(popupLayout)/layout.tsx
@@ -4,8 +4,6 @@ export default function PopupLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main className="min-h-dvh bg-white text-foreground">
-      {children}
-    </main>
+    <main className="min-h-dvh bg-background text-foreground">{children}</main>
   );
 }
diff --git a/apps/sn/app/(popupLayout)/popup/[popupKey]/page.tsx b/apps/sn/app/(popupLayout)/popup/[popupKey]/page.tsx
index 8231f4f4d..36ab9eb13 100644
--- a/apps/sn/app/(popupLayout)/popup/[popupKey]/page.tsx
+++ b/apps/sn/app/(popupLayout)/popup/[popupKey]/page.tsx
@@ -1,5 +1,5 @@
 import { isWindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
-import { windowPopupRegistry } from "@/features/windowPopup/registry";
+import WindowPopupRenderer from "@/features/windowPopup/ui/WindowPopupRenderer";
 
 type PopupPageProps = {
   params: Promise<{
@@ -19,12 +19,15 @@ export default async function PopupPage({
     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>
+        <p className="text-base text-label">popupKey: {popupKey}</p>
       </section>
     );
   }
 
-  const PopupComponent = windowPopupRegistry[popupKey].component;
-
-  return <PopupComponent searchParams={resolvedSearchParams} />;
+  return (
+    <WindowPopupRenderer
+      popupKey={popupKey}
+      searchParams={resolvedSearchParams}
+    />
+  );
 }
diff --git a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx
index 702c5beb2..e984e6ce4 100644
--- a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : I/I 분석 모든 페이지
- * 
+ *
  * 📄 Base Layout
  * 분석 페이지 기본 레이아웃 컴포넌트
  *
@@ -11,58 +11,57 @@
  * - 양식 파일 다운로드 링크 제공
  * - 폼 제출 및 이벤트 핸들링
  */
-'use client'
-import { DateMonthPicker, Form, SelectBox } from '@common/business_components/ui'
-import ListDiv from '@common/business_components/ui/list_div'
-import { Button, Label } from '@common/components/ui'
-import { useEffect, type ReactNode } from 'react'
-import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox'
-import { confirmToast } from '@/components/ui/toast'
-import { toast, Toaster } from "react-hot-toast";
+"use client";
+import { DateMonthPicker, Form } from "@common/business_components/ui";
+import { Button, Label } from "@common/components/ui";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import type { ReactNode } from "react";
+import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
 
 type TitleName = {
-  mainTitle: string
-  firstCardTitle: string
-  secondCardTitle?: string
-}
+  mainTitle: string;
+  firstCardTitle: string;
+  secondCardTitle?: string;
+};
 type SelectBox = {
-  labelNm?: Label
-  searchChk?: boolean
+  labelNm?: Label;
+  searchChk?: boolean;
   title?: string;
   onSearchClick?: () => Promise<void>;
-}
+  onResetClick?: () => void | Promise<void>;
+};
 type Label = {
-  first: string
-  second: string
-  third: string
-  fourth: string
-}
+  first: string;
+  second: string;
+  third: string;
+  fourth: string;
+};
 // API로부터 받아올 데이터 타입을 정의 (SelectBox에 사용될 형태)
 interface ApiSelectOption {
   text: string;
   val: string;
 }
 type BaseLayout = {
-  children?: ReactNode[]
-  titleName: TitleName
-  form: any
-  onSubmitEvent: Function
-  graphBtn?: boolean
-  analysisBtn?: string
-  resultViewBtn?: string
-  firstDivBtn?: boolean
-  selectBox?: SelectBox
-  selectionComponent?: ReactNode
+  children?: ReactNode[];
+  titleName: TitleName;
+  form: any;
+  onSubmitEvent: Function;
+  graphBtn?: boolean;
+  analysisBtn?: string;
+  resultViewBtn?: string;
+  firstDivBtn?: boolean;
+  selectBox?: SelectBox;
+  selectionComponent?: ReactNode;
   showDatePicker?: boolean;
   ctpvCd: string;
   sggCd: string;
   sggName?: string;
-  sigungu?: ApiSelectOption
+  sigungu?: ApiSelectOption;
   selectedSwagePrcsFclt?: string;
   onSwagePrcsFcltChange?: (value: string) => void;
-  aplcnYmFrom?: string
+  aplcnYmFrom?: string;
   setAplcnYmFrom?: (aplcnYmFrom: string) => void;
-  aplcnYmTo?: string
+  aplcnYmTo?: string;
   setAplcnYmTo?: (aplcnYmTo: string) => void;
   setCtpvCd: (ctpv: string) => void;
   setSggCd: (sgg: string) => void;
@@ -72,12 +71,12 @@ type BaseLayout = {
   setIsLoading?: (isLoading: boolean) => void;
   onExcelDownload?: () => void;
   onDeleteFile?: () => void;
-  onAnalysis?: () => void;
+  onAnalysis?: () => void | Promise<void>;
   onResultView?: () => void;
   selectedRowData?: any;
   isIr?: boolean;
   isRdii?: boolean;
-}
+};
 
 const BaseLayout = ({
   children,
@@ -113,14 +112,8 @@ const BaseLayout = ({
   isIr = false,
   isRdii = false,
 }: BaseLayout) => {
-
-  // 컴포넌트 언마운트 시 confirmToast 정리
-  useEffect(() => {
-    return () => {
-      // 컴포넌트가 언마운트될 때 global-confirm-toast ID를 가진 Toast 제거
-      toast.dismiss("global-confirm-toast");
-    };
-  }, []);
+  // 분석 실행 전 CS와 동일한 전역 확인 대화상자를 호출한다.
+  const { confirm } = useConfirm();
 
   // 파일 다운로드
   const isChckFile = () => {
@@ -129,8 +122,8 @@ const BaseLayout = ({
       onExcelDownload();
       return;
     }
-    return true
-  }
+    return true;
+  };
   // 파일 삭제
   const isDeleteFile = async () => {
     // Excel 다운로드 함수가 있으면 Excel 다운로드 실행
@@ -138,64 +131,75 @@ const BaseLayout = ({
       onDeleteFile();
       return;
     }
-  }
+  };
 
-  const handleConfirm = () => {
-    // 기존 confirmToast가 있다면 먼저 제거
-    toast.dismiss("global-confirm-toast");
-
-    confirmToast(
+  const handleConfirm = async () => {
+    const shouldRunAnalysis = await confirm(
       "분석에는 2분 내외의 시간이 소요될 수 있습니다.\n분석을 진행하시겠습니까?",
-      onAnalysis ?? (() => { }),
-      "text-xl font-medium text-gray-800"
     );
+    if (!shouldRunAnalysis) return;
+
+    await onAnalysis?.();
   };
 
   return (
     <>
-      <Form {...form} className="min-h-screen flex flex-col">
-        <ListDiv>
+      <Form {...form} className="flex min-h-screen flex-col">
+        <section className="card card-border">
           {/* searchBox.title이 있으면 h3 태그로 제목을 표시합니다. */}
           {selectBox?.title && (
             <div className="card-header">
-              <h3 className="text-2xl font-medium">{selectBox.title}</h3>
+              <h3 className="text-2xl font-medium text-label">
+                {selectBox.title}
+              </h3>
             </div>
           )}
-          <div className="ml-2 mt-2 flex items-center w-full">
+          <div className="flex w-full flex-wrap items-center gap-3 p-[1.2rem]">
             {showDatePicker && ( // showDatePicker 값에 따라 DatePicker 렌더링
               <>
-                <Label className="mr-4 w-20 text-xl font-medium text-gray-600 whitespace-nowrap">상수사용기간</Label>
+                <Label className="whitespace-nowrap text-label">
+                  상수사용기간
+                </Label>
                 <DateMonthPicker
                   field={{
-                    value: aplcnYmFrom || (() => { // aplcnYm이 없으면 현재 연월을 기본값으로 설정
-                      const now = new Date();
-                      const year = now.getFullYear();
-                      // const month = String(now.getMonth() + 1).padStart(2, '0');
-                      // return `${year}${month}`;
-                      return `${year}01`;
-                    })(), // yyyyMM 형식
+                    value:
+                      aplcnYmFrom ||
+                      (() => {
+                        // aplcnYm이 없으면 현재 연월을 기본값으로 설정
+                        const now = new Date();
+                        const year = now.getFullYear();
+                        // const month = String(now.getMonth() + 1).padStart(2, '0');
+                        // return `${year}${month}`;
+                        return `${year}01`;
+                      })(), // yyyyMM 형식
                     onChange: (value: string) => {
                       setAplcnYmFrom?.(value); // string 값을 직접 전달
-                    }
+                    },
                   }}
-                  selectClass="ml-8 w-[100px]"
-                  startYear={1900}  // 시작 연도 설정
+                  selectClass="w-[10rem]"
+                  startYear={1900} // 시작 연도 설정
                 />
-                <span className="font-semibold text-xl mx-4">~</span>
+                <span className="text-muted-foreground">~</span>
                 <DateMonthPicker
                   field={{
-                    value: aplcnYmTo || (() => { // aplcnYm이 없으면 현재 연월을 기본값으로 설정
-                      const now = new Date();
-                      const year = now.getFullYear();
-                      const month = String(now.getMonth() + 1).padStart(2, '0');
-                      return `${year}${month}`;
-                    })(), // yyyyMM 형식
+                    value:
+                      aplcnYmTo ||
+                      (() => {
+                        // aplcnYm이 없으면 현재 연월을 기본값으로 설정
+                        const now = new Date();
+                        const year = now.getFullYear();
+                        const month = String(now.getMonth() + 1).padStart(
+                          2,
+                          "0",
+                        );
+                        return `${year}${month}`;
+                      })(), // yyyyMM 형식
                     onChange: (value: string) => {
                       setAplcnYmTo?.(value); // string 값을 직접 전달
-                    }
+                    },
                   }}
-                  selectClass="w-[100px] mr-8"
-                  startYear={1900}  // 시작 연도 설정
+                  selectClass="w-[10rem]"
+                  startYear={1900} // 시작 연도 설정
                 />
               </>
             )}
@@ -207,7 +211,7 @@ const BaseLayout = ({
                 sggName={sggName}
                 onSidoChange={(sidoId: string) => {
                   setCtpvCd(sidoId);
-                  setSggCd('0');
+                  setSggCd("0");
                 }}
                 onSigunguChange={setSggCd}
                 setSggName={setSggName}
@@ -219,86 +223,123 @@ const BaseLayout = ({
               />
             )}
             {selectBox?.searchChk && (
-              <div className='flex flex-1 justify-end mr-6'>
-                <Button size="sm" onClick={() => selectBox.onSearchClick?.()}>조회</Button>
+              <div className="ml-auto flex items-center gap-2">
+                <Button
+                  type="button"
+                  onClick={() => selectBox.onSearchClick?.()}
+                >
+                  조회
+                </Button>
+                {selectBox.onResetClick ? (
+                  <Button
+                    type="button"
+                    color="white"
+                    onClick={() => selectBox.onResetClick?.()}
+                  >
+                    초기화
+                  </Button>
+                ) : null}
               </div>
             )}
           </div>
-        </ListDiv>
-        <ListDiv>
+        </section>
+        <section className="card card-border">
           <div className="card-header">
-            <h3 className="text-2xl font-medium">{titleName.firstCardTitle}</h3>
-            <div>
+            <h3 className="text-2xl font-medium text-label">
+              {titleName.firstCardTitle}
+            </h3>
+            <div className="flex flex-wrap items-center gap-2">
               {graphBtn && (
-                <Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile}>파일 다운로드</Button>
-              )}
-              {/* 그래프 있을 시 */}
-              {graphBtn && (
-                <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile}>삭제</Button>
+                <Button type="button" onClick={isChckFile}>
+                  엑셀다운로드
+                </Button>
               )}
               {/* 침입수 분석 */}
               {isIr && (
-                <Button
-                  size="sm"
-                  className="mx-4 py-2 text-white rounded-sm text-lg font-medium green"
-                >
-                  <a href="/samples/ir_setting_sample.zip" download="침입수 분석 업로드 파일 양식.zip">양식 받기</a>
+                <Button type="button">
+                  <a
+                    href="/samples/ir_setting_sample.zip"
+                    download="침입수 분석 업로드 파일 양식.zip"
+                  >
+                    양식다운로드
+                  </a>
                 </Button>
               )}
               {/* RDII 분석 */}
               {isRdii && (
-                <Button
-                  size="sm"
-                  className="mx-4 py-2 text-white rounded-sm text-lg font-medium green"
-                >
-                  <a href="/samples/rdii_sample.zip" download="RDII 분석 업로드 파일 양식.zip">양식 받기</a>
+                <Button type="button">
+                  <a
+                    href="/samples/rdii_sample.zip"
+                    download="RDII 분석 업로드 파일 양식.zip"
+                  >
+                    양식다운로드
+                  </a>
                 </Button>
               )}
               {/* 분석 버튼 */}
               {analysisBtn && (
-                <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={handleConfirm}>{analysisBtn}</Button>
+                <Button type="button" onClick={handleConfirm}>
+                  {analysisBtn}
+                </Button>
               )}
               {resultViewBtn && (
                 <Button
-                  className="px-4 py-2 bg-slate-600 text-white rounded-sm text-sm font-medium hover:bg-slate-700 !mr-[1.2rem]"
-                  size="sm"
+                  type="button"
+                  color="white"
                   onClick={onResultView}
                 >
                   {resultViewBtn}
                 </Button>
               )}
+              {graphBtn && (
+                <Button
+                  type="button"
+                  color="red"
+                  onClick={isDeleteFile}
+                >
+                  삭제
+                </Button>
+              )}
             </div>
           </div>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmitEvent)} className="flex-grow flex flex-col">
-              <div className="card !m-[1.2rem] flex-grow flex flex-col">
+            <form
+              onSubmit={form.handleSubmit(onSubmitEvent)}
+              className="flex flex-grow flex-col"
+            >
+              <div className="min-w-0 flex-grow p-[1.2rem]">
                 {/* 폼 정보 입력 칸 */}
                 {children?.[0]}
               </div>
             </form>
           </Form>
-        </ListDiv>
+        </section>
         {children?.[1] != null && (
-          <ListDiv>
+          <section className="card card-border">
             <div className="card-header flex items-center">
-              <h3 className="text-2xl font-medium">{titleName?.secondCardTitle}</h3>
-              <div className='flex flex-1 justify-end mr-8'>
+              <h3 className="text-2xl font-medium text-label">
+                {titleName?.secondCardTitle}
+              </h3>
+              <div className="ml-auto flex items-center gap-2">
                 {graphBtn && (
-                  <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm">파일 다운로드</Button>
+                  <Button type="button">
+                    엑셀다운로드
+                  </Button>
                 )}
                 {/* 그래프 있을 시 */}
                 {graphBtn && (
-                  <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm">삭제</Button>
+                  <Button type="button" color="red">
+                    삭제
+                  </Button>
                 )}
               </div>
             </div>
-            <div className="card !m-[1.2rem]">{children?.[1]}</div>
-          </ListDiv>
+            <div className="p-[1.2rem]">{children?.[1]}</div>
+          </section>
         )}
       </Form>
-      <Toaster position="top-center"></Toaster>
     </>
-  )
-}
+  );
+};
 
-export default BaseLayout
\ No newline at end of file
+export default BaseLayout;
diff --git a/apps/sn/app/(with-base-layout)/ii/analysisResultView.ts b/apps/sn/app/(with-base-layout)/ii/analysisResultView.ts
index 35c2bec26..7375d5d09 100644
--- a/apps/sn/app/(with-base-layout)/ii/analysisResultView.ts
+++ b/apps/sn/app/(with-base-layout)/ii/analysisResultView.ts
@@ -6,14 +6,21 @@ type AnalysisResultPopupKey = "inftwtResultPopup" | "rdiiResultPopup";
 
 const ANALYSIS_RESULT_MAP_WINDOW_NAME = "sn-analysis-result-map";
 
-export const openAnalysisResultMapView = (popupKey: AnalysisResultPopupKey) => {
+type AnalysisResultAlert = (message: string) => void;
+
+export const openAnalysisResultMapView = (
+  popupKey: AnalysisResultPopupKey,
+  alert: AnalysisResultAlert,
+) => {
   if (typeof window === "undefined") return;
 
   const mapUrl = `/map?analysisPopupKey=${encodeURIComponent(popupKey)}`;
   const mapWindow = window.open(mapUrl, ANALYSIS_RESULT_MAP_WINDOW_NAME);
 
   if (!mapWindow) {
-    alert("하수관망도 창이 차단되었습니다. 브라우저 팝업 허용 후 다시 시도해주세요.");
+    alert(
+      "하수관망도 창이 차단되었습니다. 브라우저 팝업 허용 후 다시 시도해주세요.",
+    );
     return;
   }
 
@@ -23,7 +30,9 @@ export const openAnalysisResultMapView = (popupKey: AnalysisResultPopupKey) => {
   mapWindow.focus();
 
   if (!popupWindow) {
-    alert("분석결과 popup이 차단되었습니다. 브라우저 팝업 허용 후 다시 시도해주세요.");
+    alert(
+      "분석결과 popup이 차단되었습니다. 브라우저 팝업 허용 후 다시 시도해주세요.",
+    );
     return;
   }
 
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 1d30922c1..336b34963 100644
--- a/apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : /ii/fileupload
- * 
+ *
  * 📄 File Upload Page
  * 파일 업로드 테스트 페이지 컴포넌트
  *
@@ -10,116 +10,145 @@
  * - 두 가지 방식의 사용자 조회 API 호출 지원
  * - Axios를 통한 파일 업로드 처리
  * - 폼 제출 및 에러 핸들링
- * 
+ *
  * 🔗 사용 API
  * - 사이트 정보 조회: POST /api/v1/inftwtAnls/users/{userId} (sewerage-service)
  * - 침입수분석 등록 첨부파일INP 포함: POST /api/v1/rdiiAnls/savewithfile (sewerage-service)
  * - 사용자 단 건 조회: GET /api/v1/users/{userUnqId} (user-service)
  */
-'use client'
+"use client";
 
 // FileUpload.js
-import React, { useState } from 'react';
-import axios from 'axios';
-import { SITE_ID } from '@/shared/config';
+import React, { useState } from "react";
+import axios from "axios";
+import { SITE_ID } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib";
+import {
+  StandardFormField,
+  StandardFormSection,
+} from "@common/business_components";
+import { Button, Input } from "@common/components";
 const SEWERAGE_URL = "/sewerage-service/api";
 
 function FileUpload() {
-  const [file, setFile] = useState(null);
-  const [text, setText] = useState('');
+  const alert = useAlertStore((state) => state.setMessage);
+  const [file, setFile] = useState<File | null>(null);
+  const [text, setText] = useState("");
 
-  const handleFileChange = (e: any) => {
-    setFile(e.target.files[0]);
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(event.target.files?.[0] ?? null);
   };
 
-  const handleTextChange = (e: any) => {
-    setText(e.target.value);
+  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setText(event.target.value);
   };
 
-	function getCookie(name:string) {
-		const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
-		if (match && match[2]) {
-			return decodeURIComponent(match[2]);
-		}
-		return null;
-	}
+  function getCookie(name: string) {
+    const match = document.cookie.match(
+      new RegExp("(^| )" + name + "=([^;]+)"),
+    );
+    if (match && match[2]) {
+      return decodeURIComponent(match[2]);
+    }
+    return null;
+  }
   const handleFindUser = () => {
-		const auth = getCookie("Authorization");
-		if (auth) console.log("쿠키 auth : " + auth);
-		fetch(SEWERAGE_URL+"/v1/inftwtAnls/users/65a00f65-8460-49af-98ec-042977e56f4b", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-        "X-Site-Id": SITE_ID,
-			},
-			body: JSON.stringify({authToken: auth})
-		}).then((data) => {
-			console.log(data);
-		});
+    const auth = getCookie("Authorization");
+    if (auth) console.log("쿠키 auth : " + auth);
+    fetch(
+      SEWERAGE_URL +
+        "/v1/inftwtAnls/users/65a00f65-8460-49af-98ec-042977e56f4b",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Site-Id": SITE_ID,
+        },
+        body: JSON.stringify({ authToken: auth }),
+      },
+    ).then((data) => {
+      console.log(data);
+    });
   };
   const handleFindUserOna = () => {
-		const auth = getCookie("Authorization");
-		if (auth) console.log("쿠키 auth : " + auth);
-		fetch("/server/user-service/api/v1/users/65a00f65-8460-49af-98ec-042977e56f4b", {
-      headers: {
-        "X-Site-Id": SITE_ID,
-      },
-    }).then((data) => {
-			console.log(data);
-		});
-  };
-
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
-
-    if (!file) {
-      alert('파일을 선택하세요.');
-      return;
-    }
-
-		const jsonData = {
-			aplcnYm: '202507',
-			enoCd: 'ABC'
-		};
-
-		// JSON → Blob 으로 변환 + MIME 지정
-		const jsonBlob = new Blob([JSON.stringify(jsonData)], {
-			type: 'application/json'
-		});
-
-    const formData = new FormData();
-    formData.append('data', jsonBlob);
-    formData.append('inpFile', file);
-
-    try {
-      const response = await axios.post('http://localhost:8883/sewerage-service/api/v1/rdiiAnls/savewithfile', formData, {
+    const auth = getCookie("Authorization");
+    if (auth) console.log("쿠키 auth : " + auth);
+    fetch(
+      "/server/user-service/api/v1/users/65a00f65-8460-49af-98ec-042977e56f4b",
+      {
         headers: {
           "X-Site-Id": SITE_ID,
         },
-      });
+      },
+    ).then((data) => {
+      console.log(data);
+    });
+  };
 
-      alert('업로드 성공: ' + response.data.message);
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!file) {
+      alert("파일을 선택하세요.");
+      return;
+    }
+
+    const jsonData = {
+      aplcnYm: "202507",
+      enoCd: "ABC",
+    };
+
+    // JSON → Blob 으로 변환 + MIME 지정
+    const jsonBlob = new Blob([JSON.stringify(jsonData)], {
+      type: "application/json",
+    });
+
+    const formData = new FormData();
+    formData.append("data", jsonBlob);
+    formData.append("inpFile", file);
+
+    try {
+      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) {
       console.error(err);
-      alert('업로드 실패');
+      alert("업로드 실패");
     }
   };
 
   return (
-    <form onSubmit={handleSubmit} className="text-2xl">
-      <div>
-        <label>텍스트 입력:</label>
-        <input type="text" value={text} onChange={handleTextChange} />
+    <form onSubmit={handleSubmit} className="card card-border">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">파일 업로드 테스트</h3>
       </div>
-      <div>
-        <label>파일 선택:</label>
-        <input type="file" onChange={handleFileChange} />
+      <div className="p-[1.2rem]">
+        <StandardFormSection title="업로드 정보" columns={2}>
+          <StandardFormField label="텍스트 입력" columns={2}>
+            <Input type="text" value={text} onChange={handleTextChange} />
+          </StandardFormField>
+          <StandardFormField label="파일 선택" required columns={2}>
+            <Input type="file" onChange={handleFileChange} />
+          </StandardFormField>
+        </StandardFormSection>
+      </div>
+      <div className="card-footer flex justify-end gap-2">
+        <Button type="submit">업로드</Button>
+        <Button type="button" color="white" onClick={handleFindUser}>
+          하수관로 사용자 조회
+        </Button>
+        <Button type="button" color="white" onClick={handleFindUserOna}>
+          사용자서비스 사용자 조회
+        </Button>
       </div>
-      <button type="submit" className="px-4 py-2 bg-gray-500 text-white rounded">업로드</button>
-			<button type="button" className="px-4 py-2 bg-gray-400 text-white rounded"
-			        onClick={handleFindUser}>사용자조회</button>
-			<button type="button" className="px-4 py-2 bg-gray-200 text-white rounded"
-			        onClick={handleFindUserOna}>사용자조회ona</button>
     </form>
   );
 }
diff --git a/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx b/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx
index 858c5a9d8..927e9581a 100644
--- a/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : I/I 분석 - 침입수 분석
- * 
+ *
  * 📄 IrSetting Page
  * 침입수 분석 설정 페이지 컴포넌트
  *
@@ -10,35 +10,46 @@
  * - 분석 데이터 서버 제출 및 폼 초기화 기능
  * - 파일 확장자 및 입력 값 검증 기능
  * - 로딩 오버레이 및 에러 핸들링 지원
- * 
+ *
  * 🔗 사용 API
  * - 침입수분석 등록 첨부파일INP 포함: POST /api/v1/inftwtAnls/savewithfile (sewerage-service)
  * - 로그인된 사용자의 사용자 정보 조회: GET /api/v1/users/info/me (user-service)
  */
-'use client'
-import { postMutiPart } from '@/components/lib/api'
-import FileUploadForm from '@/components/ui/fileUploadForm'
-import FormSection from '@/components/ui/formSection'
-import { DateMonthPicker, filePicked } from '@common/business_components/ui'
-import ListDiv from '@common/business_components/ui/list_div'
-import { Input } from '@common/components/ui'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { excelToFlowRateData, excelToMatchingResultData, excelToTimePatternData, excelToRcptrInfoData } from '@/components/lib/utils'
-import BaseLayout from '../BaseLayout'
-import { useAnalysisCompletionWatcher } from '../useAnalysisCompletionWatcher'
-import { openAnalysisResultMapView } from '../analysisResultView'
-import { validateMultipleFiles, FILE_EXTENSIONS, type FileValidationConfig } from '../../fileValidation';
-import { validateBasicSelectionsWithAlert } from '../../selectionValidation';
-import { tokenManager } from '@/entities/auth/lib/token-manager';
+"use client";
+import { postMutiPart } from "@/components/lib/api";
+import FileUploadForm from "@/components/ui/fileUploadForm";
+import {
+  StandardFormField,
+  StandardFormSection,
+} from "@common/business_components";
+import { DateMonthPicker, filePicked } from "@common/business_components/ui";
+import { Input } from "@common/components/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+  excelToFlowRateData,
+  excelToMatchingResultData,
+  excelToTimePatternData,
+  excelToRcptrInfoData,
+} from "@/components/lib/utils";
+import BaseLayout from "../BaseLayout";
+import { useAnalysisCompletionWatcher } from "../useAnalysisCompletionWatcher";
+import { openAnalysisResultMapView } from "../analysisResultView";
+import {
+  validateMultipleFiles,
+  FILE_EXTENSIONS,
+  type FileValidationConfig,
+} from "../../fileValidation";
+import { validateBasicSelections } from "../../selectionValidation";
+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 LoadingOverlay from '@common/business_components/ui/loadingBar';
-
+import LoadingOverlay from "@common/business_components/ui/loadingBar";
+import { useAlertStore } from "@/shared/lib";
 
 const formSchema = z.object({
   managenm: z.string(),
@@ -47,8 +58,8 @@ const formSchema = z.object({
   inputdate: z.coerce.date(),
   rtkSource: z.string(),
   suyeongaPlace: z.string(),
-  pattern: z.string()
-})
+  pattern: z.string(),
+});
 
 // 각 파일 업로드 폼의 데이터를 저장할 인터페이스 정의
 interface UploadedFileInfo {
@@ -59,33 +70,43 @@ interface UploadedFileInfo {
   // fileName: string;
 }
 // 초기 파일 정보 상태
-const initialFileInfo: UploadedFileInfo = { file: null, atflCd: null, atflId: null };
-const DEFAULT_CTPV_CD = '41';
-const DEFAULT_SGG_CD = '41830';
-const DEFAULT_SGG_NAME = '\uC591\uD3C9\uAD70';
-const DEFAULT_SWTRMT_FCLT_NM = '\uC591\uD3C9';
+const initialFileInfo: UploadedFileInfo = {
+  file: null,
+  atflCd: null,
+  atflId: null,
+};
+const DEFAULT_CTPV_CD = "41";
+const DEFAULT_SGG_CD = "41830";
+const DEFAULT_SGG_NAME = "\uC591\uD3C9\uAD70";
+const DEFAULT_SWTRMT_FCLT_NM = "\uC591\uD3C9";
 
 const IrSetting = () => {
-  const [input1, setInput1] = useState('0.8'); // 오수전환율 초기값
-  const [input2, setInput2] = useState('');
-  const [selectedSwagePrcsFclt, setSelectedSwagePrcsFclt] = useState<string>('0'); // ?????? ?? ??
+  const alert = useAlertStore((state) => state.setMessage);
+  const [input1, setInput1] = useState("0.8"); // 오수전환율 초기값
+  const [input2, setInput2] = useState("");
+  const [selectedSwagePrcsFclt, setSelectedSwagePrcsFclt] =
+    useState<string>("0"); // ?????? ?? ??
   const [formResetKey, setFormResetKey] = useState(0); // FileUploadForm 리셋을 위한 key 상태
   const [isLoadingResult, setIsLoadingResult] = useState<boolean>(false); // 로딩 상태
   const [ctpvCd, setCtpvCd] = useState<string>(DEFAULT_CTPV_CD); // 시도 코드 상태
   const [sggCd, setSggCd] = useState<string>(DEFAULT_SGG_CD); // 시군구 코드 상태
   const [sggName, setSggName] = useState<string>(DEFAULT_SGG_NAME); // 시군구 이름 상태
-  const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>(DEFAULT_SWTRMT_FCLT_NM); // 하수처리시설명 상태
-  const [uploadedFilesData, setUploadedFilesData] = useState<UploadedFileInfo[]>([
+  const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>(
+    DEFAULT_SWTRMT_FCLT_NM,
+  ); // 하수처리시설명 상태
+  const [uploadedFilesData, setUploadedFilesData] = useState<
+    UploadedFileInfo[]
+  >([
     initialFileInfo, // 0: 오수관망도
     initialFileInfo, // 1: 수용가-맨홀 매칭결과
     initialFileInfo, // 2: 오수량 시간패턴
-    initialFileInfo  // 3: 유량자료 등록
+    initialFileInfo, // 3: 유량자료 등록
   ]);
   // selectedDate를 yyyyMM 문자열 형식으로 변경
   const [selectedDate, setSelectedDate] = useState(() => {
     const now = new Date();
     const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const month = String(now.getMonth() + 1).padStart(2, "0");
     return `${year}${month}`;
   });
 
@@ -97,13 +118,13 @@ const IrSetting = () => {
 
   const { startWatching } = useAnalysisCompletionWatcher({
     buildStatusUrl: (analysisSn) => `v1/inftwtAnls/${analysisSn}/status`,
-    successMessage: '침입수 분석이 완료되었습니다.',
-    failureMessage: '침입수 분석이 실패했습니다. 로그를 확인해주세요.',
-    analysisType: 'INFTWT',
-    analysisName: '침입수 분석',
+    successMessage: "침입수 분석이 완료되었습니다.",
+    failureMessage: "침입수 분석이 실패했습니다. 로그를 확인해주세요.",
+    analysisType: "INFTWT",
+    analysisName: "침입수 분석",
     initialProgressPercent: 10,
-    initialProgressStep: 'REQUEST_ACCEPTED',
-    initialProgressMessage: '요청 접수 완료',
+    initialProgressStep: "REQUEST_ACCEPTED",
+    initialProgressMessage: "요청 접수 완료",
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -115,40 +136,42 @@ const IrSetting = () => {
       inputdate: new Date(),
       rtkSource: "",
       suyeongaPlace: "",
-      pattern: ""
-    }
-  })
+      pattern: "",
+    },
+  });
 
   // 폼 초기화 함수
   const resetAllForms = () => {
-    form.reset({ // react-hook-form 초기화
+    form.reset({
+      // react-hook-form 초기화
       managenm: "",
       region: "",
       suyeonga: 0,
       inputdate: new Date(),
       rtkSource: "",
       suyeongaPlace: "",
-      pattern: ""
+      pattern: "",
     });
-    setUploadedFilesData([ // 파일 업로드 상태 초기화
+    setUploadedFilesData([
+      // 파일 업로드 상태 초기화
+      initialFileInfo,
       initialFileInfo,
       initialFileInfo,
       initialFileInfo,
-      initialFileInfo
     ]);
     // selectedDate를 현재 연월로 초기화
     const now = new Date();
     const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const month = String(now.getMonth() + 1).padStart(2, "0");
     setSelectedDate(`${year}${month}`);
-    setInput1(''); // 입력 필드 초기화
-    setInput2(''); // 입력 필드 초기화
-    setSelectedSwagePrcsFclt('0');
+    setInput1(""); // 입력 필드 초기화
+    setInput2(""); // 입력 필드 초기화
+    setSelectedSwagePrcsFclt("0");
     setCtpvCd(DEFAULT_CTPV_CD);
     setSggCd(DEFAULT_SGG_CD);
     setSggName(DEFAULT_SGG_NAME);
     setSwtrmtFcltNm(DEFAULT_SWTRMT_FCLT_NM);
-    setFormResetKey(prevKey => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경
+    setFormResetKey((prevKey) => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경
   };
 
   // FileUploadForm의 onFileSelect prop으로 전달될 콜백 함수
@@ -158,7 +181,7 @@ const IrSetting = () => {
     cd: string | null,
     id: string | null,
   ) => {
-    setUploadedFilesData(prevData => {
+    setUploadedFilesData((prevData) => {
       const newData = [...prevData];
       newData[index] = {
         file: selectedFile,
@@ -169,38 +192,40 @@ const IrSetting = () => {
     });
   };
 
-
   const registFile = async (analysisData: any) => {
-    const data = await postMutiPart('v1/inftwtAnls/savewithfile', analysisData);
+    const data = await postMutiPart("v1/inftwtAnls/savewithfile", analysisData);
     if (!data) {
-      throw new Error('분석 요청 접수 응답이 비어 있습니다.');
+      throw new Error("분석 요청 접수 응답이 비어 있습니다.");
     }
 
     const nextAnalysisSn = Number(data?.inftwtAnlsSn ?? 0);
     setIsLoadingResult(false);
     await new Promise((resolve) => setTimeout(resolve, 0));
-    alert("분석 데이터가 성공적으로 제출되었습니다.");
-
-    if (Number.isFinite(nextAnalysisSn) && nextAnalysisSn > 0) {
-      startWatching(nextAnalysisSn);
-    }
-
-    resetAllForms();
+    alert("분석 데이터가 성공적으로 제출되었습니다.", () => {
+      if (Number.isFinite(nextAnalysisSn) && nextAnalysisSn > 0) {
+        startWatching(nextAnalysisSn);
+      }
+      resetAllForms();
+    });
   };
 
-  // 침입수 분석 실행 버튼 클릭 핸들러 
+  // 침입수 분석 실행 버튼 클릭 핸들러
   const handleAnalysisClick = async () => {
     setIsLoadingResult(true); // 로딩 상태 시작
 
     // 기본 선택 항목들 검증 (환경청, 시도, 시군구, 하수처리장)
-    if (!validateBasicSelectionsWithAlert(selectedSwagePrcsFclt, {
+    const selectionValidation = validateBasicSelections(selectedSwagePrcsFclt, {
       requireEnv: true,
       requireSido: true,
       requireSigungu: true,
       requireTreatmentPlant: true,
-      treatmentPlantLabel: '하수처리시설'
-    })) {
+      treatmentPlantLabel: "하수처리시설",
+    });
+    if (!selectionValidation.isValid) {
       setIsLoadingResult(false);
+      alert(
+        selectionValidation.errorMessage ?? "필수 선택 항목을 확인해주세요.",
+      );
       return;
     }
 
@@ -214,7 +239,7 @@ const IrSetting = () => {
     // 유량자료는 선택값
     if (!file1?.file || !file2?.file || !file3?.file) {
       setIsLoadingResult(false);
-      alert('모든 분석용 파일을 선택해주세요.');
+      alert("모든 분석용 파일을 선택해주세요.");
       return;
     }
 
@@ -223,18 +248,18 @@ const IrSetting = () => {
       {
         file: file1.file,
         allowedExtensions: FILE_EXTENSIONS.INP,
-        fileDescription: '오수관망도'
+        fileDescription: "오수관망도",
       },
       {
         file: file2.file,
         allowedExtensions: FILE_EXTENSIONS.EXCEL,
-        fileDescription: '수용가-맨홀 매칭결과'
+        fileDescription: "수용가-맨홀 매칭결과",
       },
       {
         file: file3.file,
         allowedExtensions: FILE_EXTENSIONS.EXCEL,
-        fileDescription: '오수량 시간패턴'
-      }
+        fileDescription: "오수량 시간패턴",
+      },
     ];
 
     // 유량자료 파일이 있는 경우 검증 목록에 추가
@@ -242,7 +267,7 @@ const IrSetting = () => {
       validationConfigs.push({
         file: file4.file,
         allowedExtensions: FILE_EXTENSIONS.EXCEL,
-        fileDescription: '유량자료'
+        fileDescription: "유량자료",
       });
     }
     // 수용가 상수사용량 파일이 있는 경우 검증 목록에 추가
@@ -250,7 +275,7 @@ const IrSetting = () => {
       validationConfigs.push({
         file: file5.file,
         allowedExtensions: FILE_EXTENSIONS.EXCEL,
-        fileDescription: '수용가 상수사용량'
+        fileDescription: "수용가 상수사용량",
       });
     }
 
@@ -258,43 +283,55 @@ const IrSetting = () => {
     const validationResult = validateMultipleFiles(validationConfigs);
     if (!validationResult.isValid) {
       setIsLoadingResult(false);
-      alert(validationResult.errorMessage);
+      alert(validationResult.errorMessage ?? "파일 형식을 확인해주세요.");
       return;
     }
 
     // 오수전환율 값 0 ~ 1 사이인지 검증
-    if (input1 === '' || input1 === null || input1 === undefined) {
+    if (input1 === "" || input1 === null || input1 === undefined) {
       setIsLoadingResult(false);
-      console.error('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
-      alert('오수전환율을 입력해주세요.');
+      console.error("오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.");
+      alert("오수전환율을 입력해주세요.");
       return;
     }
 
     const numericInput1 = parseFloat(input1);
     if (isNaN(numericInput1) || numericInput1 < 0 || numericInput1 > 1) {
       setIsLoadingResult(false);
-      console.error('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
-      alert('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
+      console.error("오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.");
+      alert("오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.");
       return;
     }
 
-    type MatchingResult = { anlsSn: number; mhlMngNo: string; rcptrNo: string; };
-    type TimePattern = { hrId: number; rt?: number | null | undefined; };
-    type FlowRate = { pplMngNo: string; mtrngDt: string; oilq?: number | null | undefined; };
-    type rcptrInfo = { rcptrNo: string; useYm: string; usqty?: number | null | undefined; };
+    type MatchingResult = { anlsSn: number; mhlMngNo: string; rcptrNo: string };
+    type TimePattern = { hrId: number; rt?: number | null | undefined };
+    type FlowRate = {
+      pplMngNo: string;
+      mtrngDt: string;
+      oilq?: number | null | undefined;
+    };
+    type rcptrInfo = {
+      rcptrNo: string;
+      useYm: string;
+      usqty?: number | null | undefined;
+    };
 
     const filePickers: {
       file: UploadedFileInfo;
-      parser: (excelData: any) => MatchingResult[] | TimePattern[] | FlowRate[] | rcptrInfo[];
+      parser: (
+        excelData: any,
+      ) => MatchingResult[] | TimePattern[] | FlowRate[] | rcptrInfo[];
     }[] = [
-        { file: file2, parser: excelToMatchingResultData },
-        { file: file3, parser: excelToTimePatternData }
-      ];
+      { file: file2, parser: excelToMatchingResultData },
+      { file: file3, parser: excelToTimePatternData },
+    ];
 
-    if (file4?.file) { // 유량자료 파일이 있는 경우
+    if (file4?.file) {
+      // 유량자료 파일이 있는 경우
       filePickers.push({ file: file4, parser: excelToFlowRateData });
     }
-    if (file5?.file) { // 수용가 상수사용량 파일이 있는 경우 
+    if (file5?.file) {
+      // 수용가 상수사용량 파일이 있는 경우
       filePickers.push({ file: file5, parser: excelToRcptrInfoData });
     }
 
@@ -306,12 +343,14 @@ const IrSetting = () => {
           const jsonData = await filePicked(file.file, 0);
 
           if (jsonData === undefined) {
-            console.warn(`Warning: filePicked returned undefined for ${file.file.name}`);
+            console.warn(
+              `Warning: filePicked returned undefined for ${file.file.name}`,
+            );
             return {
               fileName: file.file.name,
               atflCd: file.atflCd,
               atflId: file.atflId,
-              parsedData: null
+              parsedData: null,
             };
           }
 
@@ -322,42 +361,55 @@ const IrSetting = () => {
             fileName: file.file.name,
             atflCd: file.atflCd,
             atflId: file.atflId,
-            parsedData: parsedDataBySpecificFunction
+            parsedData: parsedDataBySpecificFunction,
           };
-        })
+        }),
       );
 
       // 각 파싱 결과 접근
-      const matchingResultData = parsedResults.find(r => r && r.fileName === file2.file?.name)?.parsedData ?? [];
-      const timePatternData = parsedResults.find(r => r && r.fileName === file3.file?.name)?.parsedData ?? [];
+      const matchingResultData =
+        parsedResults.find((r) => r && r.fileName === file2.file?.name)
+          ?.parsedData ?? [];
+      const timePatternData =
+        parsedResults.find((r) => r && r.fileName === file3.file?.name)
+          ?.parsedData ?? [];
       const flowRateData = file4?.file
-        ? parsedResults.find(r => r && r.fileName === file4.file?.name)?.parsedData
+        ? parsedResults.find((r) => r && r.fileName === file4.file?.name)
+            ?.parsedData
         : null;
       const rcptrInfoData = file5?.file
-        ? parsedResults.find(r => r && r.fileName === file5.file?.name)?.parsedData
+        ? parsedResults.find((r) => r && r.fileName === file5.file?.name)
+            ?.parsedData
         : null;
 
       if (!swtrmtFcltNm || !swtrmtFcltNm.trim()) {
         setIsLoadingResult(false);
-        alert('하수처리시설명이 비어 있습니다. 시설을 다시 선택해주세요.');
+        alert("하수처리시설명이 비어 있습니다. 시설을 다시 선택해주세요.");
         return;
       }
 
-      if (!Array.isArray(matchingResultData) || matchingResultData.length === 0) {
+      if (
+        !Array.isArray(matchingResultData) ||
+        matchingResultData.length === 0
+      ) {
         setIsLoadingResult(false);
-        alert('수용가-맨홀 매칭결과 파일에서 저장할 데이터를 읽지 못했습니다. 엑셀 헤더를 확인해주세요.');
+        alert(
+          "수용가-맨홀 매칭결과 파일에서 저장할 데이터를 읽지 못했습니다. 엑셀 헤더를 확인해주세요.",
+        );
         return;
       }
 
       if (!Array.isArray(timePatternData) || timePatternData.length === 0) {
         setIsLoadingResult(false);
-        alert('오수량 시간패턴 파일에서 저장할 데이터를 읽지 못했습니다. 엑셀 헤더를 확인해주세요.');
+        alert(
+          "오수량 시간패턴 파일에서 저장할 데이터를 읽지 못했습니다. 엑셀 헤더를 확인해주세요.",
+        );
         return;
       }
       // 새로운 JSON 데이터 생성
       const jsonData = {
-        ctpvCd: ctpvCd !== '0' ? String(ctpvCd).trim() : null,
-        sggCd: sggCd !== '0' ? String(sggCd) : null, // 시군구코드 (선택값)
+        ctpvCd: ctpvCd !== "0" ? String(ctpvCd).trim() : null,
+        sggCd: sggCd !== "0" ? String(sggCd) : null, // 시군구코드 (선택값)
         swtrmtFcltNm: swtrmtFcltNm ?? null,
         aplcnYm: selectedDate, // 적용연월
         drtwSwtcRt: parseFloat(input1) || null, // 오수전환율 (숫자로 변환)
@@ -377,36 +429,40 @@ const IrSetting = () => {
       };
 
       const jsonBlob = new Blob([JSON.stringify(jsonData)], {
-        type: 'application/json'
+        type: "application/json",
       });
       const combinedAnalysisData = new FormData();
-      combinedAnalysisData.append('data', jsonBlob);
-      if (file1?.file) combinedAnalysisData.append('inpFile', file1.file);
+      combinedAnalysisData.append("data", jsonBlob);
+      if (file1?.file) combinedAnalysisData.append("inpFile", file1.file);
 
       await registFile(combinedAnalysisData);
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
       console.error("침입수 분석 요청 처리 중 오류 발생:", error);
-      alert(error instanceof Error && error.message.trim()
-        ? error.message
-        : "파일 처리 중 오류가 발생했습니다.");
+      alert(
+        error instanceof Error && error.message.trim()
+          ? error.message
+          : "파일 처리 중 오류가 발생했습니다.",
+      );
       return;
     }
-  }
-
+  };
 
   return (
     <>
       <LoadingOverlay isLoading={isLoadingResult} />
       <BaseLayout
-        titleName={{ mainTitle: '침입수 분석', firstCardTitle: '침입수 분석 자료 입력' }}
+        titleName={{
+          mainTitle: "침입수 분석",
+          firstCardTitle: "침입수 분석 자료 입력",
+        }}
         form={form}
-        onSubmitEvent={() => { }}
+        onSubmitEvent={() => {}}
         graphBtn={false}
-        resultViewBtn={'결과보기'}
-        analysisBtn={'침입수분석 실행'}
-        selectBox={{ title: '분석 대상지역 선택' }}
+        resultViewBtn={"결과보기"}
+        analysisBtn={"침입수분석 실행"}
+        selectBox={{ title: "분석 대상지역 선택" }}
         ctpvCd={ctpvCd}
         sggCd={sggCd}
         sggName={sggName}
@@ -418,128 +474,169 @@ const IrSetting = () => {
         setSwtrmtFcltNm={setSwtrmtFcltNm}
         defaultSwtrmtFcltNm={swtrmtFcltNm}
         setIsLoading={setIsLoadingResult}
-        onResultView={() => openAnalysisResultMapView('inftwtResultPopup')}
+        onResultView={() =>
+          openAnalysisResultMapView("inftwtResultPopup", alert)
+        }
         onAnalysis={handleAnalysisClick}
         isIr={true}
       >
-        {[<div key="irsetting-layout-key" className="grid gap-4">
-          <FormSection name='inputdate' form={form} titleNm='▷ 상수사용량 적용월' required={true}>
-            {/* 연월 선택 라이브러리로 수정 필요 */}
-            <DateMonthPicker
-              field={{
-                value: selectedDate, // yyyyMM 형식
-                onChange: (value: string) => {
-                  setSelectedDate(value);
-                }
-              }}
-              selectClass="ml-5 w-[225px]"
-              startYear={1900}  // 시작 연도 설정
-            />
-          </FormSection>
-          <FormSection name='rcptrInfo' form={form} titleNm='▷ 수용가 상수사용량'>
-            <FileUploadForm
-              key={`file-upload-4-${formResetKey}`} // 폼 초기화를 위한 key
-              onFileSelect={(file, cd, id) => handleFileSelection(4, file, cd, id)}
-              showButton={false}
-              showPreview={true}
-              accept={".xls, .xlsx, .xlsm, .xltx"}
-              fileIdx={4} />
-          </FormSection>
-          <FormSection name='suyeongaPlace' form={form} titleNm='▷ 오수관망도' required={true}>
-            <FileUploadForm
-              key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
-              onFileSelect={(file, cd, id) => handleFileSelection(0, file, cd, id)}
-              showButton={false}
-              showPreview={true}
-              accept={".inp"}
-              fileIdx={0} />
-          </FormSection>
-          <FormSection name='suyeonga' form={form} titleNm='▷ 수용가-맨홀 매칭결과' required={true}>
-            <div className="flex items-center">
+        {[
+          <StandardFormSection
+            key="irsetting-layout-key"
+            title="분석 조건 및 자료"
+            columns={2}
+          >
+            <StandardFormField label="상수사용량 적용월" required columns={2}>
+              {/* 연월 선택 라이브러리로 수정 필요 */}
+              <DateMonthPicker
+                field={{
+                  value: selectedDate, // yyyyMM 형식
+                  onChange: (value: string) => {
+                    setSelectedDate(value);
+                  },
+                }}
+                selectClass="w-full"
+                startYear={1900} // 시작 연도 설정
+              />
+            </StandardFormField>
+            <StandardFormField
+              label="수용가 상수사용량"
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
               <FileUploadForm
-                key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
-                onFileSelect={(file, cd, id) => handleFileSelection(1, file, cd, id)}
+                key={`file-upload-4-${formResetKey}`} // 폼 초기화를 위한 key
+                onFileSelect={(file, cd, id) =>
+                  handleFileSelection(4, file, cd, id)
+                }
                 showButton={false}
                 showPreview={true}
                 accept={".xls, .xlsx, .xlsm, .xltx"}
-                fileIdx={1} />
-              {/* <Button
-                size={"sm"}
-                className={`text-white rounded-sm text-lg font-medium green`}
-              >
-                <a href="/samples/manhole-consumer-matching-template.xlsx" download="수용가-맨홀 매칭결과 파일 양식.xlsx">양식 받기</a>
-              </Button> */}
-            </div>
-          </FormSection>
-          <FormSection name='pattern' form={form} titleNm='▷ 오수량 시간패턴' required={true}>
-            <FileUploadForm
-              key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
-              onFileSelect={(file, cd, id) => handleFileSelection(2, file, cd, id)}
-              showButton={false}
-              showPreview={true}
-              accept={".xls, .xlsx, .xlsm, .xltx"}
-              fileIdx={2} />
-          </FormSection>
-          <FormSection name='rtkSource' form={form} titleNm='▷ 오수전환율' required={true}>
-            <Input
-              value={input1}
-              onChange={(e) => {
-                const newValue = e.target.value;
-
-                if (newValue === "") {
-                  setInput1(newValue);
-                  return;
+                fileIdx={4}
+              />
+            </StandardFormField>
+            <StandardFormField
+              label="오수관망도"
+              required
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
+              <FileUploadForm
+                key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
+                onFileSelect={(file, cd, id) =>
+                  handleFileSelection(0, file, cd, id)
                 }
-
-                // 숫자와 '.'만 허용하고, '.'은 최대 하나인지 확인
-                const isValidChars = /^[0-9]*\.?[0-9]*$/.test(newValue);
-                if (!isValidChars) return; // 유효하지 않은 문자 또는 여러 개의 '.' 포함
-
-                // '.' 기호가 포함된 경우, 처음이나 끝에 오면 안 됨
-                if (newValue.includes('.') && newValue.startsWith('.')) return; // '.'이 처음에는 올 수 없음
-
-                // 숫자 값으로 변환하여 범위 체크 (0 이상 1 이하)
-                const numericValue = parseFloat(newValue);
-                if (isNaN(numericValue) || numericValue < 0 || numericValue > 1) return;
-
-                setInput1(newValue);
-              }}
-              className="ml-5 h-[3.2rem] text-center text-xl w-[225px]"
-              placeholder="예: 0.75"
-            />
-          </FormSection>
-          <FormSection name='analysis information' form={form} titleNm='▷ 분석 정보' required={true}>
-            <Input
-              value={input2}
-              onChange={(e) => setInput2(e.target.value)}
-              className="ml-5 h-[3.2rem] text-center text-xl w-[225px]"
-              placeholder='세부 분석정보 입력'
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  e.preventDefault(); // Enter 키 기본 동작 방지
-                  handleAnalysisClick();
-                }
-              }}
-            />
-          </FormSection>
-          <ListDiv>
-            <div className="card !m-[1.2rem]">
-              <FormSection name='region' form={form} titleNm='▷ 유량자료 등록'>
+                showButton={false}
+                showPreview={true}
+                accept={".inp"}
+                fileIdx={0}
+              />
+            </StandardFormField>
+            <StandardFormField
+              label="수용가-맨홀 매칭결과"
+              required
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
+              <div className="flex items-center">
                 <FileUploadForm
-                  key={`file-upload-3-${formResetKey}`} // 폼 초기화를 위한 key
-                  onFileSelect={(file, cd, id) => handleFileSelection(3, file, cd, id)}
+                  key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
+                  onFileSelect={(file, cd, id) =>
+                    handleFileSelection(1, file, cd, id)
+                  }
                   showButton={false}
                   showPreview={true}
                   accept={".xls, .xlsx, .xlsm, .xltx"}
-                  fileIdx={3}
+                  fileIdx={1}
                 />
-              </FormSection>
-            </div>
-          </ListDiv>
-        </div>]}
+              </div>
+            </StandardFormField>
+            <StandardFormField
+              label="오수량 시간패턴"
+              required
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
+              <FileUploadForm
+                key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
+                onFileSelect={(file, cd, id) =>
+                  handleFileSelection(2, file, cd, id)
+                }
+                showButton={false}
+                showPreview={true}
+                accept={".xls, .xlsx, .xlsm, .xltx"}
+                fileIdx={2}
+              />
+            </StandardFormField>
+            <StandardFormField label="오수전환율" required columns={2}>
+              <Input
+                value={input1}
+                onChange={(e) => {
+                  const newValue = e.target.value;
+
+                  if (newValue === "") {
+                    setInput1(newValue);
+                    return;
+                  }
+
+                  // 숫자와 '.'만 허용하고, '.'은 최대 하나인지 확인
+                  const isValidChars = /^[0-9]*\.?[0-9]*$/.test(newValue);
+                  if (!isValidChars) return; // 유효하지 않은 문자 또는 여러 개의 '.' 포함
+
+                  // '.' 기호가 포함된 경우, 처음이나 끝에 오면 안 됨
+                  if (newValue.includes(".") && newValue.startsWith("."))
+                    return; // '.'이 처음에는 올 수 없음
+
+                  // 숫자 값으로 변환하여 범위 체크 (0 이상 1 이하)
+                  const numericValue = parseFloat(newValue);
+                  if (
+                    isNaN(numericValue) ||
+                    numericValue < 0 ||
+                    numericValue > 1
+                  )
+                    return;
+
+                  setInput1(newValue);
+                }}
+                className="w-full"
+                placeholder="예: 0.75"
+              />
+            </StandardFormField>
+            <StandardFormField label="분석 정보" required columns={2}>
+              <Input
+                value={input2}
+                onChange={(e) => setInput2(e.target.value)}
+                className="w-full"
+                placeholder="세부 분석정보 입력"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault(); // Enter 키 기본 동작 방지
+                    handleAnalysisClick();
+                  }
+                }}
+              />
+            </StandardFormField>
+            <StandardFormField
+              label="유량자료"
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
+              <FileUploadForm
+                key={`file-upload-3-${formResetKey}`} // 폼 초기화를 위한 key
+                onFileSelect={(file, cd, id) =>
+                  handleFileSelection(3, file, cd, id)
+                }
+                showButton={false}
+                showPreview={true}
+                accept={".xls, .xlsx, .xlsm, .xltx"}
+                fileIdx={3}
+              />
+            </StandardFormField>
+          </StandardFormSection>,
+        ]}
       </BaseLayout>
     </>
-  )
-}
+  );
+};
 
-export default IrSetting
+export default IrSetting;
diff --git a/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx b/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx
index 70d1080a7..d0b72ef21 100644
--- a/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : I/I 분석 - RDII 분석
- * 
+ *
  * 📄 RDII Page
  * RDII 분석 페이지 컴포넌트
  *
@@ -11,67 +11,84 @@
  * - 분석 데이터 서버 제출 및 폼 초기화 기능
  * - 파일 확장자 및 입력 값 검증 기능
  * - 로딩 오버레이 및 에러 핸들링 지원
- * 
+ *
  * 🔗 사용 API
  * - RDII분석 등록 첨부파일INP 포함: POST /api/v1/rdiiAnls/savewithfile (sewerage-service)
  * - 로그인된 사용자의 사용자 정보 조회: GET /api/v1/users/info/me (user-service)
  */
-"use client"
+"use client";
 
-import { postMutiPart } from '@/components/lib/api'
-import FileUploadForm from "@/components/ui/fileUploadForm"
-import FormSection from "@/components/ui/formSection"
-import BaseLayout from "../BaseLayout"
-import { useAnalysisCompletionWatcher } from "../useAnalysisCompletionWatcher"
-import { openAnalysisResultMapView } from "../analysisResultView"
-import { DateMonthPicker, filePicked } from "@common/business_components/ui"
-import { Input } from "@common/components/ui"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Label } from '@radix-ui/react-label'
-import { useState } from "react"
-import { useFieldArray, useForm } from "react-hook-form"
-import { z } from "zod"
-import { excelToMatchingResultData, excelToRainData } from '@/components/lib/utils'
-import { EditableFormTable, type EditableTableHeadItem } from '../../../components/ui/EditableFormTable'
-import { validateMultipleFiles, FILE_EXTENSIONS, type FileValidationConfig } from '../../fileValidation';
-import { validateBasicSelectionsWithAlert } from '../../selectionValidation';
-import { tokenManager } from '@/entities/auth/lib/token-manager';
+import { postMutiPart } from "@/components/lib/api";
+import FileUploadForm from "@/components/ui/fileUploadForm";
+import BaseLayout from "../BaseLayout";
+import { useAnalysisCompletionWatcher } from "../useAnalysisCompletionWatcher";
+import { openAnalysisResultMapView } from "../analysisResultView";
+import { DateMonthPicker, filePicked } from "@common/business_components/ui";
+import {
+  StandardFormField,
+  StandardFormSection,
+} from "@common/business_components";
+import { Input } from "@common/components/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+  excelToMatchingResultData,
+  excelToRainData,
+} from "@/components/lib/utils";
+import {
+  EditableFormTable,
+  type EditableTableHeadItem,
+} from "../../../components/ui/EditableFormTable";
+import {
+  validateMultipleFiles,
+  FILE_EXTENSIONS,
+  type FileValidationConfig,
+} from "../../fileValidation";
+import { validateBasicSelections } from "../../selectionValidation";
+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 LoadingOverlay from '@common/business_components/ui/loadingBar';
-
-
+import LoadingOverlay from "@common/business_components/ui/loadingBar";
+import { useAlertStore } from "@/shared/lib";
 
 // zod 스키마 정의
 const formSchema = z.object({
   ctpvCd: z.string(), // 시도코드
   sggCd: z.string(), // 시군구코드
   swtrmtFcltNm: z.string(), // 하수처리시설명
-  rtkSource: z.string(),  // RTK계수 출처
-  rdiiArea: z.string(),   // RDII 기여면적
-  unitFactors: z.array(z.object({ // 단위도 계수
-    response: z.string(),
-    R: z.string(),
-    T: z.string(),
-    K: z.string(),
-  })),
-  initialDepths: z.array(z.object({ // 초기 차단 깊이
-    response: z.string(),
-    Dmax: z.string(),
-    Drec: z.string(),
-    Do: z.string(),
-  })),
+  rtkSource: z.string(), // RTK계수 출처
+  rdiiArea: z.string(), // RDII 기여면적
+  unitFactors: z.array(
+    z.object({
+      // 단위도 계수
+      response: z.string(),
+      R: z.string(),
+      T: z.string(),
+      K: z.string(),
+    }),
+  ),
+  initialDepths: z.array(
+    z.object({
+      // 초기 차단 깊이
+      response: z.string(),
+      Dmax: z.string(),
+      Drec: z.string(),
+      Do: z.string(),
+    }),
+  ),
   // osumap: z.instanceof(File).optional(), // 오수관망도
   // matching: z.instanceof(File).optional(), // 수용가-맨홀 매칭결과
   aplcnYm: z.string(), // 상수사용량 적용월 (YYYYMM 형식)
   rate: z.string(), // 오수전환율
   // rain: z.instanceof(File).optional(), // 강우자료
-  analysisInfo: z.string().optional(), // 분석 정보 
+  analysisInfo: z.string().optional(), // 분석 정보
   date: z.string(), // Date 객체에서 string(yyyyMM 형식)으로 변경
   // date: z.coerce.date(),
-})
+});
 // zod 스키마 타입 추론
 type FormSchemaType = z.infer<typeof formSchema>;
 // 기본 폼 값 정의 (테스트 편의를 위해 초기값 설정, 추후 삭제 필요)
@@ -97,10 +114,11 @@ const defaultFormValues: FormSchemaType = {
   rate: "0.8", // 문자열로 기본값 설정
   // rainFile: undefined,
   analysisInfo: "",
-  date: (() => { // 현재 연월을 yyyyMM 형식으로 설정
+  date: (() => {
+    // 현재 연월을 yyyyMM 형식으로 설정
     const now = new Date();
     const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const month = String(now.getMonth() + 1).padStart(2, "0");
     return `${year}${month}`;
   })(),
 };
@@ -113,29 +131,38 @@ interface UploadedFileInfo {
 }
 
 // 초기 파일 정보 상태
-const initialFileInfo: UploadedFileInfo = { file: null, atflCd: null, atflId: null };
-const DEFAULT_CTPV_CD = '41';
-const DEFAULT_SGG_CD = '41830';
-const DEFAULT_SGG_NAME = '\uC591\uD3C9\uAD70';
-const DEFAULT_SWTRMT_FCLT_NM = '\uC591\uD3C9';
+const initialFileInfo: UploadedFileInfo = {
+  file: null,
+  atflCd: null,
+  atflId: null,
+};
+const DEFAULT_CTPV_CD = "41";
+const DEFAULT_SGG_CD = "41830";
+const DEFAULT_SGG_NAME = "\uC591\uD3C9\uAD70";
+const DEFAULT_SWTRMT_FCLT_NM = "\uC591\uD3C9";
 
 export default function RTKForm() {
+  const alert = useAlertStore((state) => state.setMessage);
   const [formResetKey, setFormResetKey] = useState(0); // FileUploadForm 리셋을 위한 key 상태
   const [isLoadingResult, setIsLoadingResult] = useState<boolean>(false); // 로딩 상태
 
   // FileUploadForm에서 전달받은 파일 정보를 저장할 상태 배열
   // 각 인덱스는 FileUploadForm의 fileIdx와 매칭됨
-  const [uploadedFilesData, setUploadedFilesData] = useState<UploadedFileInfo[]>([
+  const [uploadedFilesData, setUploadedFilesData] = useState<
+    UploadedFileInfo[]
+  >([
     initialFileInfo, // 0: 오수관망도
     initialFileInfo, // 1: 수용가-맨홀 매칭결과
     initialFileInfo, // 2: 강우자료
   ]);
 
-  const [select1, setSelect1] = useState<string>('0');   // 하수처리장 (swtrmtFcltCd)
+  const [select1, setSelect1] = useState<string>("0"); // 하수처리장 (swtrmtFcltCd)
   const [ctpvCd, setCtpvCd] = useState<string>(DEFAULT_CTPV_CD); // 시도 코드 상태
   const [sggCd, setSggCd] = useState<string>(DEFAULT_SGG_CD); // 시군구 코드 상태
   const [sggName, setSggName] = useState<string>(DEFAULT_SGG_NAME); // 시군구 이름 상태
-  const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>(DEFAULT_SWTRMT_FCLT_NM); // 하수처리시설명 상태
+  const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>(
+    DEFAULT_SWTRMT_FCLT_NM,
+  ); // 하수처리시설명 상태
 
   const { data: userInfo } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS],
@@ -145,31 +172,32 @@ export default function RTKForm() {
 
   const { startWatching } = useAnalysisCompletionWatcher({
     buildStatusUrl: (analysisSn) => `v1/rdiiAnls/${analysisSn}/status`,
-    successMessage: 'RDII 분석이 완료되었습니다.',
-    failureMessage: 'RDII 분석이 실패했습니다. 로그를 확인해주세요.',
-    analysisType: 'RDII',
-    analysisName: 'RDII 분석',
+    successMessage: "RDII 분석이 완료되었습니다.",
+    failureMessage: "RDII 분석이 실패했습니다. 로그를 확인해주세요.",
+    analysisType: "RDII",
+    analysisName: "RDII 분석",
     initialProgressPercent: 10,
-    initialProgressStep: 'REQUEST_ACCEPTED',
-    initialProgressMessage: '요청 접수 완료',
+    initialProgressStep: "REQUEST_ACCEPTED",
+    initialProgressMessage: "요청 접수 완료",
   });
 
   // form 인스턴스 생성
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
-    defaultValues: defaultFormValues
+    defaultValues: defaultFormValues,
   });
 
   // 폼 초기화 함수
   const resetAllForms = () => {
-    form.reset(defaultFormValues);  // 폼 값 초기화
-    setUploadedFilesData([ // 파일 업로드 상태 초기화 (3개 파일)
+    form.reset(defaultFormValues); // 폼 값 초기화
+    setUploadedFilesData([
+      // 파일 업로드 상태 초기화 (3개 파일)
       initialFileInfo,
       initialFileInfo,
       initialFileInfo,
     ]);
-    setFormResetKey(prevKey => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경
-    setSelect1('0');
+    setFormResetKey((prevKey) => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경
+    setSelect1("0");
     setCtpvCd(DEFAULT_CTPV_CD);
     setSggCd(DEFAULT_SGG_CD);
     setSggName(DEFAULT_SGG_NAME);
@@ -181,9 +209,9 @@ export default function RTKForm() {
     index: number, // FileUploadForm의 fileIdx 값
     selectedFile: File | null,
     cd: string | null,
-    id: string | null
+    id: string | null,
   ) => {
-    setUploadedFilesData(prevData => {
+    setUploadedFilesData((prevData) => {
       const newData = [...prevData];
       newData[index] = {
         file: selectedFile,
@@ -195,27 +223,28 @@ export default function RTKForm() {
   };
 
   const registFile = async (analysisData: any) => {
-    const data = await postMutiPart('v1/rdiiAnls/savewithfile', analysisData);
+    const data = await postMutiPart("v1/rdiiAnls/savewithfile", analysisData);
     if (!data) {
-      throw new Error('분석 요청 접수 응답이 비어 있습니다.');
+      throw new Error("분석 요청 접수 응답이 비어 있습니다.");
     }
 
     const nextAnalysisSn = Number(data?.rainInfwtAnlsSn ?? 0);
-    const canWatchCompletion = Number.isFinite(nextAnalysisSn) && nextAnalysisSn > 0;
+    const canWatchCompletion =
+      Number.isFinite(nextAnalysisSn) && nextAnalysisSn > 0;
 
     setIsLoadingResult(false);
     await new Promise((resolve) => setTimeout(resolve, 0));
     alert(
       canWatchCompletion
-        ? '분석 요청이 접수되었습니다. 완료 시 안내됩니다.'
-        : '분석 요청이 접수되었습니다. 결과 목록에서 진행 상태를 확인해주세요.'
+        ? "분석 요청이 접수되었습니다. 완료 시 안내됩니다."
+        : "분석 요청이 접수되었습니다. 결과 목록에서 진행 상태를 확인해주세요.",
+      () => {
+        if (canWatchCompletion) {
+          startWatching(nextAnalysisSn);
+        }
+        resetAllForms();
+      },
     );
-
-    if (canWatchCompletion) {
-      startWatching(nextAnalysisSn);
-    }
-
-    resetAllForms();
   };
 
   // 침입수 분석 실행 버튼 클릭 핸들러
@@ -223,13 +252,17 @@ export default function RTKForm() {
     setIsLoadingResult(true); // 로딩 상태 시작
 
     // 기본 선택 항목들 검증 (환경청, 시도, 시군구, 하수처리장)
-    if (!validateBasicSelectionsWithAlert(select1, {
+    const selectionValidation = validateBasicSelections(select1, {
       requireEnv: true,
       requireSido: true,
       requireSigungu: true,
-      requireTreatmentPlant: true
-    })) {
+      requireTreatmentPlant: true,
+    });
+    if (!selectionValidation.isValid) {
       setIsLoadingResult(false);
+      alert(
+        selectionValidation.errorMessage ?? "필수 선택 항목을 확인해주세요.",
+      );
       return;
     }
 
@@ -241,7 +274,7 @@ export default function RTKForm() {
     // 모든 필수 파일이 선택되었는지 확인
     if (!file1?.file || !file2?.file || !file3?.file) {
       setIsLoadingResult(false);
-      alert('모든 분석용 파일을 선택해주세요.');
+      alert("모든 분석용 파일을 선택해주세요.");
       return;
     }
 
@@ -250,42 +283,42 @@ export default function RTKForm() {
       {
         file: file1.file,
         allowedExtensions: FILE_EXTENSIONS.INP,
-        fileDescription: '오수관망도'
+        fileDescription: "오수관망도",
       },
       {
         file: file2.file,
         allowedExtensions: FILE_EXTENSIONS.EXCEL,
-        fileDescription: '수용가-맨홀 매칭결과'
+        fileDescription: "수용가-맨홀 매칭결과",
       },
       {
         file: file3.file,
         allowedExtensions: FILE_EXTENSIONS.EXCEL,
-        fileDescription: '오수량 시간패턴'
-      }
+        fileDescription: "오수량 시간패턴",
+      },
     ];
 
     // 파일 확장자 검증 실행
     const validationResult = validateMultipleFiles(validationConfigs);
     if (!validationResult.isValid) {
       setIsLoadingResult(false);
-      alert(validationResult.errorMessage);
+      alert(validationResult.errorMessage ?? "파일 형식을 확인해주세요.");
       return;
     }
 
     // 오수전환율 값 0 ~ 1 사이인지 검증
     const rateValue = form.getValues().rate;
-    if (rateValue === '' || rateValue === null || rateValue === undefined) {
+    if (rateValue === "" || rateValue === null || rateValue === undefined) {
       setIsLoadingResult(false);
-      console.error('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
-      alert('오수전환율을 입력해주세요.');
+      console.error("오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.");
+      alert("오수전환율을 입력해주세요.");
       return;
     }
 
     const numericInput1 = parseFloat(rateValue);
     if (isNaN(numericInput1) || numericInput1 < 0 || numericInput1 > 1) {
       setIsLoadingResult(false);
-      console.error('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
-      alert('오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.');
+      console.error("오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.");
+      alert("오수전환율은 0에서 1 사이의 값으로 입력해야 합니다.");
       return;
     }
 
@@ -303,12 +336,14 @@ export default function RTKForm() {
           const ExcelToJsonData = await filePicked(file.file, 0);
 
           if (ExcelToJsonData === undefined) {
-            console.warn(`Warning: filePicked returned undefined for ${file.file.name}`);
+            console.warn(
+              `Warning: filePicked returned undefined for ${file.file.name}`,
+            );
             return {
               fileName: file.file.name,
               atflCd: file.atflCd,
               atflId: file.atflId,
-              parsedData: null // 또는 적절한 기본값
+              parsedData: null, // 또는 적절한 기본값
             };
           }
 
@@ -320,23 +355,28 @@ export default function RTKForm() {
             fileName: file.file.name,
             atflCd: file.atflCd,
             atflId: file.atflId,
-            parsedData: parsedDataBySpecificFunction
+            parsedData: parsedDataBySpecificFunction,
           };
-        })
+        }),
       );
 
       // 각 파싱 결과 접근
-      const matchingResultData = parsedResults.find(r => r && r.fileName === file2.file?.name)?.parsedData ?? [];
-      const rainData = parsedResults.find(r => r && r.fileName === file3.file?.name)?.parsedData ?? [];
+      const matchingResultData =
+        parsedResults.find((r) => r && r.fileName === file2.file?.name)
+          ?.parsedData ?? [];
+      const rainData =
+        parsedResults.find((r) => r && r.fileName === file3.file?.name)
+          ?.parsedData ?? [];
 
       // 상수사용량 적용월과 강우자료의 날짜 일치 여부 검증
       let dateValidated = true;
 
       if (rainData) {
         rainData
-          .filter(data => data && 'mtrngDt' in data)
-          .map(data => {
-            if (formData.date !== data.mtrngDt.replace(/-/g, '').slice(0, 6)) dateValidated = false;
+          .filter((data) => data && "mtrngDt" in data)
+          .map((data) => {
+            if (formData.date !== data.mtrngDt.replace(/-/g, "").slice(0, 6))
+              dateValidated = false;
           });
       }
       if (!dateValidated) {
@@ -345,12 +385,11 @@ export default function RTKForm() {
         return;
       }
 
-
       // 새로운 JSON 데이터 생성
       const jsonData = {
         aplcnYm: formData.date, // 적용연월 (YYYYMM 형식)
-        ctpvCd: ctpvCd !== '0' ? String(ctpvCd).trim() : null, // 시도코드 (선택값)
-        sggCd: sggCd !== '0' ? String(sggCd) : null, // 시군구코드 (선택값)
+        ctpvCd: ctpvCd !== "0" ? String(ctpvCd).trim() : null, // 시도코드 (선택값)
+        sggCd: sggCd !== "0" ? String(sggCd) : null, // 시군구코드 (선택값)
         swtrmtFcltNm: swtrmtFcltNm ?? null,
         atflCd: file1?.atflCd, // 첨부파일CD (오수관망도)
         atflId: file1?.atflId, // 첨부파일ID (오수관망도)
@@ -394,61 +433,71 @@ export default function RTKForm() {
       };
 
       const jsonBlob = new Blob([JSON.stringify(jsonData)], {
-        type: 'application/json'
+        type: "application/json",
       });
       const combinedAnalysisData = new FormData();
-      combinedAnalysisData.append('data', jsonBlob);
-      if (file1?.file) combinedAnalysisData.append('inpFile', file1.file);
+      combinedAnalysisData.append("data", jsonBlob);
+      if (file1?.file) combinedAnalysisData.append("inpFile", file1.file);
 
       await registFile(combinedAnalysisData);
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
       console.error("RDII 분석 요청 처리 중 오류 발생:", error);
-      alert(error instanceof Error && error.message.trim()
-        ? error.message
-        : "파일 처리 중 오류가 발생했습니다.");
+      alert(
+        error instanceof Error && error.message.trim()
+          ? error.message
+          : "파일 처리 중 오류가 발생했습니다.",
+      );
       return;
     }
-  }
+  };
 
   const { fields: unitFactorFields } = useFieldArray({
     control: form.control,
-    name: "unitFactors"
-  })
+    name: "unitFactors",
+  });
 
   const { fields: initialDepthFields } = useFieldArray({
     control: form.control,
-    name: "initialDepths"
-  })
+    name: "initialDepths",
+  });
 
   // 단위도 계수 테이블 설정 (EditableTableHeadItem 타입 사용 및 id 수정)
-  const unitFactorHeadlist: EditableTableHeadItem<FormSchemaType['unitFactors'][number]>[] = [
-    { id: 'response', title: 'Response', editable: false, width: '150px' }, // width 속성 추가
-    { id: 'R', title: 'R', editable: true, inputProps: { type: 'text' } },
-    { id: 'T', title: 'T', editable: true, inputProps: { type: 'text' } },
-    { id: 'K', title: 'K', editable: true, inputProps: { type: 'text' } }
+  const unitFactorHeadlist: EditableTableHeadItem<
+    FormSchemaType["unitFactors"][number]
+  >[] = [
+    { id: "response", title: "Response", editable: false, width: "150px" }, // width 속성 추가
+    { id: "R", title: "R", editable: true, inputProps: { type: "text" } },
+    { id: "T", title: "T", editable: true, inputProps: { type: "text" } },
+    { id: "K", title: "K", editable: true, inputProps: { type: "text" } },
   ];
 
   // 초기 차단 깊이 테이블 설정 (EditableTableHeadItem 타입 사용)
-  const initialDepthHeadlist: EditableTableHeadItem<FormSchemaType['initialDepths'][number]>[] = [
-    { id: 'response', title: 'Response', editable: false, width: '150px' }, // width 속성 추가
-    { id: 'Dmax', title: 'Dmax', editable: true, inputProps: { type: 'text' } },
-    { id: 'Drec', title: 'Drec', editable: true, inputProps: { type: 'text' } },
-    { id: 'Do', title: 'Do', editable: true, inputProps: { type: 'text' } }
+  const initialDepthHeadlist: EditableTableHeadItem<
+    FormSchemaType["initialDepths"][number]
+  >[] = [
+    { id: "response", title: "Response", editable: false, width: "150px" }, // width 속성 추가
+    { id: "Dmax", title: "Dmax", editable: true, inputProps: { type: "text" } },
+    { id: "Drec", title: "Drec", editable: true, inputProps: { type: "text" } },
+    { id: "Do", title: "Do", editable: true, inputProps: { type: "text" } },
   ];
 
   return (
     <>
       <LoadingOverlay isLoading={isLoadingResult} />
       <BaseLayout
-        selectBox={{ title: '분석 대상지역 선택' }}
-        titleName={{ mainTitle: 'RDII 분석', firstCardTitle: 'RDII 분석자료 입력', secondCardTitle: '실측자료 등록' }}
+        selectBox={{ title: "분석 대상지역 선택" }}
+        titleName={{
+          mainTitle: "RDII 분석",
+          firstCardTitle: "RDII 분석자료 입력",
+          secondCardTitle: "실측자료 등록",
+        }}
         form={form} // react-hook-form 인스턴스 전달
-        onSubmitEvent={() => { }} // BaseLayout의 form 태그에 연결될 onSubmit
+        onSubmitEvent={() => {}} // BaseLayout의 form 태그에 연결될 onSubmit
         graphBtn={false}
-        resultViewBtn={'결과보기'}
-        analysisBtn={'RDII분석 실행'}
+        resultViewBtn={"결과보기"}
+        analysisBtn={"RDII분석 실행"}
         ctpvCd={ctpvCd}
         sggCd={sggCd}
         sggName={sggName}
@@ -460,77 +509,102 @@ export default function RTKForm() {
         setSwtrmtFcltNm={setSwtrmtFcltNm}
         defaultSwtrmtFcltNm={swtrmtFcltNm}
         setIsLoading={setIsLoadingResult}
-        onResultView={() => openAnalysisResultMapView('rdiiResultPopup')}
+        onResultView={() => openAnalysisResultMapView("rdiiResultPopup", alert)}
         onAnalysis={handleAnalysisClick}
         isRdii={true}
       >
-        {[<div className="space-y-[1.2rem] overflow-x-auto pt-4 pb-4 px-2" key="form-section">
-          <div className="grid grid-cols-2 gap-4">
-            <FormSection name="rtkSource" form={form} titleNm="○ RTK계수 출처" required={true}>
-              <Input {...form.register("rtkSource")} className="h-12 text-center text-xl w-[225px]" />
-            </FormSection>
-            <FormSection name="rdiiArea" form={form} titleNm="○ RDII 기여면적(ha)" required={true}>
-              <Input {...form.register("rdiiArea")} className="h-12 text-center text-xl w-[225px]" />
-            </FormSection></div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <Label className="mb-2 text-xl font-medium">○ 단위도 계수</Label>
-              <span className="text-2xl text-red-500">*</span>
-              <EditableFormTable
-                form={form}
-                name="unitFactors"
-                fields={unitFactorFields}
-                headlist={unitFactorHeadlist}
-                tableClassName="w-[400px]"
-              />
-            </div>
-            <div>
-              <Label className="mb-[1.2rem] text-xl font-medium">○ 초기 차단 깊이</Label>
-              <span className="text-2xl text-red-500">*</span>
-              <EditableFormTable
-                form={form}
-                name="initialDepths"
-                fields={initialDepthFields}
-                headlist={initialDepthHeadlist}
-                tableClassName="w-[400px]"
-              />
-            </div>
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <FormSection name="suyeonga" form={form} titleNm="○ 오수관망도" required={true}><div className="w-[350px]">
-              <FileUploadForm
-                key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
-                onFileSelect={(file, cd, id) => handleFileSelection(0, file, cd, id)}
-                showButton={false}
-                showPreview={true}
-                accept={".inp"}
-                fileIdx={0} />
-            </div></FormSection>
-            <FormSection name="regopm" form={form} titleNm="○ 수용가-맨홀 매칭결과" required={true}><div className="flex items-center">
-              <FileUploadForm
-                key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
-                onFileSelect={(file, cd, id) => handleFileSelection(1, file, cd, id)}
-                showButton={false}
-                showPreview={true}
-                accept={".xls, .xlsx, .xlsm, .xltx"}
-                fileIdx={1} />
-              {/* <Button
-                size={"sm"}
-                className={`text-white rounded-sm text-lg font-medium green`}
-              >
-                <a href="/samples/manhole-consumer-matching-template.xlsx" download="수용가-맨홀 매칭결과 파일 양식.xlsx">양식 받기</a>
-              </Button> */}
-            </div></FormSection>
-            <FormSection name="rain" form={form} titleNm="○ 강우자료" required={true}><div className="w-[350px]">
-              <FileUploadForm
-                key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
-                onFileSelect={(file, cd, id) => handleFileSelection(2, file, cd, id)}
-                showButton={false}
-                showPreview={true}
-                accept={".xls, .xlsx, .xlsm, .xltx"}
-                fileIdx={2} />
-            </div></FormSection>
-            <FormSection name='rate' form={form} titleNm='○ 오수전환율' required={true}>
+        {[
+          <StandardFormSection
+            key="form-section"
+            title="분석 조건 및 자료"
+            columns={2}
+          >
+            <StandardFormField label="RTK계수 출처" required columns={2}>
+              <Input {...form.register("rtkSource")} className="w-full" />
+            </StandardFormField>
+            <StandardFormField label="RDII 기여면적(ha)" required columns={2}>
+              <Input {...form.register("rdiiArea")} className="w-full" />
+            </StandardFormField>
+            <StandardFormField label="단위도 계수" required columns={2}>
+              <div className="overflow-x-auto">
+                <EditableFormTable
+                  form={form}
+                  name="unitFactors"
+                  fields={unitFactorFields}
+                  headlist={unitFactorHeadlist}
+                  tableClassName="min-w-[40rem] w-full"
+                />
+              </div>
+            </StandardFormField>
+            <StandardFormField label="초기 차단 깊이" required columns={2}>
+              <div className="overflow-x-auto">
+                <EditableFormTable
+                  form={form}
+                  name="initialDepths"
+                  fields={initialDepthFields}
+                  headlist={initialDepthHeadlist}
+                  tableClassName="min-w-[40rem] w-full"
+                />
+              </div>
+            </StandardFormField>
+            <StandardFormField
+              label="오수관망도"
+              required
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
+              <div className="w-full">
+                <FileUploadForm
+                  key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
+                  onFileSelect={(file, cd, id) =>
+                    handleFileSelection(0, file, cd, id)
+                  }
+                  showButton={false}
+                  showPreview={true}
+                  accept={".inp"}
+                  fileIdx={0}
+                />
+              </div>
+            </StandardFormField>
+            <StandardFormField
+              label="수용가-맨홀 매칭결과"
+              required
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
+              <div className="flex items-center">
+                <FileUploadForm
+                  key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
+                  onFileSelect={(file, cd, id) =>
+                    handleFileSelection(1, file, cd, id)
+                  }
+                  showButton={false}
+                  showPreview={true}
+                  accept={".xls, .xlsx, .xlsm, .xltx"}
+                  fileIdx={1}
+                />
+              </div>
+            </StandardFormField>
+            <StandardFormField
+              label="강우자료"
+              required
+              columns={2}
+              className="[&_.card]:!m-0 [&_.card]:!border-0 [&_.card]:!p-0"
+            >
+              <div className="w-full">
+                <FileUploadForm
+                  key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
+                  onFileSelect={(file, cd, id) =>
+                    handleFileSelection(2, file, cd, id)
+                  }
+                  showButton={false}
+                  showPreview={true}
+                  accept={".xls, .xlsx, .xlsm, .xltx"}
+                  fileIdx={2}
+                />
+              </div>
+            </StandardFormField>
+            <StandardFormField label="오수전환율" required columns={2}>
               <Input
                 value={form.watch("rate")} // form의 rate 값을 가져옴
                 onChange={(e) => {
@@ -546,49 +620,53 @@ export default function RTKForm() {
                   if (!isValidChars) return; // 유효하지 않은 문자 또는 여러 개의 '.' 포함
 
                   // '.' 기호가 처음에 오면 안 됨
-                  if (newValue.startsWith('.')) return;
+                  if (newValue.startsWith(".")) return;
 
                   // 완성된 숫자인 경우에만 범위 체크 (입력 중인 경우 허용)
-                  if (!newValue.endsWith('.')) {
+                  if (!newValue.endsWith(".")) {
                     const numericValue = parseFloat(newValue);
-                    if (isNaN(numericValue) || numericValue < 0 || numericValue > 1) return;
+                    if (
+                      isNaN(numericValue) ||
+                      numericValue < 0 ||
+                      numericValue > 1
+                    )
+                      return;
                   }
 
                   form.setValue("rate", newValue, { shouldValidate: true }); // form의 rate 필드에 설정
                 }}
-                className="h-12 text-center text-xl w-[225px] ml-5"
+                className="w-full"
                 placeholder="0 ~ 1 사이의 값 입력"
               />
-            </FormSection>
-            <FormSection name='date' form={form} titleNm='○ 상수사용량 적용월' required={true}>
+            </StandardFormField>
+            <StandardFormField label="상수사용량 적용월" required columns={2}>
               <DateMonthPicker
                 field={{
                   value: form.watch("date"), // form의 date 값을 직접 사용
                   onChange: (value: string) => {
                     form.setValue("date", value, { shouldValidate: true }); // form의 date 필드에 직접 설정
-                  }
+                  },
                 }}
-                selectClass="ml-5 w-[225px]"
+                selectClass="w-full"
                 startYear={1900} // 시작 연도 설정
               />
-            </FormSection>
-            <FormSection name='rate' form={form} titleNm='○ 분석 정보' required={true}>
+            </StandardFormField>
+            <StandardFormField label="분석 정보" required columns={2}>
               <Input
                 {...form.register("analysisInfo")}
-                className="h-12 text-center text-xl w-[225px] ml-5"
-                placeholder='세부 분석정보 입력'
+                className="w-full"
+                placeholder="세부 분석정보 입력"
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
+                  if (e.key === "Enter") {
                     e.preventDefault(); // Enter 키 기본 동작 방지
                     handleAnalysisClick();
                   }
                 }}
               />
-            </FormSection>
-          </div>
-        </div>
+            </StandardFormField>
+          </StandardFormSection>,
         ]}
-      </BaseLayout >
+      </BaseLayout>
     </>
-  )
+  );
 }
diff --git a/apps/sn/app/(with-base-layout)/ii/rdiiResult/page.tsx b/apps/sn/app/(with-base-layout)/ii/rdiiResult/page.tsx
index 7ad88bec1..49d16f3ea 100644
--- a/apps/sn/app/(with-base-layout)/ii/rdiiResult/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/rdiiResult/page.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : I/I 분석 - RDII 분석결과
- * 
+ *
  * 📄 RDII Result Page
  * RDII 분석 결과 페이지 컴포넌트
  *
@@ -10,170 +10,196 @@
  * - 분석 결과 파일 삭제 기능
  * - 로딩 오버레이 및 에러 핸들링 지원
  * - Zustand를 통한 상태 관리 및 데이터 포맷팅
- * 
+ *
  * 🔗 사용 API
  * - RDII분석 목록 조회: GET /api/v1/rdiiAnls (sewerage-service)
  * - RDII분석결과관로 목록 조회: GET /api/v1/rdiiAnlsRslt/ppl/{rainInfwtAnlsSn} (sewerage-service)
  * - RDII분석결과 삭제: DELETE /api/v1/rdiiAnlsRslt/{rainInfwtAnlsSn} (sewerage-service)
  * - RDII분석 삭제: DELETE /api/v1/rdiiAnls/{rainInfwtAnlsSn} (sewerage-service)
  */
-'use client'
-import { deleteData, getData } from '@/components/lib/api'
-import { UiTable } from '@common/business_components/ui/table'
-import { downloadExcelWithKoreanHeaders } from '@/shared/lib/download-excel'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useState, useEffect } from 'react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import BaseLayout from '../BaseLayout'
-import { handleDelete } from '@/components/lib/utils'
-import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
-import useStore from '@/store/useStore';
-
+"use client";
+import { deleteData, getData } from "@/components/lib/api";
+import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import BaseLayout from "../BaseLayout";
+import { handleDelete } from "@/components/lib/utils";
+import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
+import useStore from "@/store/useStore";
+import { useAlertStore } from "@/shared/lib";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
 
 const formSchema = z.object({
-  swtrmtFcltCd: z.string().default('0'), // 하수처리시설코드
-  swtrmtFcltNm: z.string().default(''), // 하수처리시설명
-  aplcnYmFrom: z.string().default(() => { // Date에서 string(yyyyMM 형식)으로 변경
+  swtrmtFcltCd: z.string().default("0"), // 하수처리시설코드
+  swtrmtFcltNm: z.string().default(""), // 하수처리시설명
+  aplcnYmFrom: z.string().default(() => {
+    // Date에서 string(yyyyMM 형식)으로 변경
     const now = new Date();
     const year = now.getFullYear();
     // const month = String(now.getMonth() + 1).padStart(2, '0');
     // return `${year}${month}`;
     return `${year}01`; // 기본값을 1월로 설정
   }), // 분석기간 시작연월
-  aplcnYmTo: z.string().default(() => { // Date에서 string(yyyyMM 형식)으로 변경
+  aplcnYmTo: z.string().default(() => {
+    // Date에서 string(yyyyMM 형식)으로 변경
     const now = new Date();
     const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const month = String(now.getMonth() + 1).padStart(2, "0");
     return `${year}${month}`;
   }), // 분석기간 종료연월
-})
+});
 
-type ResultFormValues = z.infer<typeof formSchema>
+type ResultFormValues = z.infer<typeof formSchema>;
 
 const tableColumn = [
-  { id: 'rowNumber', title: '일련번호' },
-  { id: 'ctpvNm', title: '시도' },
-  { id: 'sggNm', title: '시군구' },
-  { id: 'swtrmtFcltNm', title: '하수처리시설' },
-  { id: 'aplcnYm', title: '상수사용연월' },
-  { id: 'drtwSwtcRt', title: '오수 전환율' },
-  { id: 'srcNm', title: 'RTK 계수 출처' },
-  { id: 'cntbArea', title: 'RDII 기여면적' },
-  { id: 'anlsInfo', title: 'RDII 분석정보' },
-  { id: 'regDt', title: '분석일자' },
-  { id: 'rgtrNm', title: '분석자' },
-  { id: 'scsYn', title: '분석성공여부' }
-]
+  { id: "rowNumber", title: "순번" },
+  { id: "ctpvNm", title: "시도" },
+  { id: "sggNm", title: "시군구" },
+  { id: "swtrmtFcltNm", title: "하수처리시설" },
+  { id: "aplcnYm", title: "상수사용연월" },
+  { id: "drtwSwtcRt", title: "오수 전환율" },
+  { id: "srcNm", title: "RTK 계수 출처" },
+  { id: "cntbArea", title: "RDII 기여면적" },
+  { id: "anlsInfo", title: "RDII 분석정보" },
+  { id: "regDt", title: "분석일자" },
+  { id: "rgtrNm", title: "분석자" },
+  { id: "scsYn", title: "분석성공여부" },
+];
 
 const Result = () => {
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
   //const AUTH = useCookieAuth();
 
   const form = useForm<ResultFormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      swtrmtFcltCd: '0',
-      aplcnYmFrom: (() => { // 현재 연월을 yyyyMM 형식으로 설정
+      swtrmtFcltCd: "0",
+      aplcnYmFrom: (() => {
+        // 현재 연월을 yyyyMM 형식으로 설정
         const now = new Date();
         const year = now.getFullYear();
         // const month = String(now.getMonth() + 1).padStart(2, '0');
         // return `${year}${month}`;
         return `${year}01`;
       })(),
-      aplcnYmTo: (() => { // 현재 연월을 yyyyMM 형식으로 설정
+      aplcnYmTo: (() => {
+        // 현재 연월을 yyyyMM 형식으로 설정
         const now = new Date();
         const year = now.getFullYear();
-        const month = String(now.getMonth() + 1).padStart(2, '0');
+        const month = String(now.getMonth() + 1).padStart(2, "0");
         return `${year}${month}`;
       })(),
-    }
-  })
-
+    },
+  });
 
   const [tableData, setTableData] = useState<any[]>([]); // API 조회 결과 저장 상태
-  const [totalData, setTotalData] = useState(0) //총 데이터 수
+  const [totalData, setTotalData] = useState(0); //총 데이터 수
   const [isLoadingResult, setIsLoadingResult] = useState<boolean>(false); // 로딩 상태
   const [selectedRowData, setSelectedRowData] = useState<any>(null);
-  const [resetSelection, setResetSelection] = useState<boolean>(false);
-  const [isResetPage, setIsResetPage] = useState<boolean>(false);
   const [curPage, setCurPage] = useState(1); // 현재 페이지
-  const [ctpvCd, setCtpvCd] = useState<string>('0'); // 시도 코드 상태
-  const [sggCd, setSggCd] = useState<string>('0'); // 시군구 코드 상태
-  const [sggName, setSggName] = useState<string>(''); // 시군구 이름 상태
+  const [ctpvCd, setCtpvCd] = useState<string>("0"); // 시도 코드 상태
+  const [sggCd, setSggCd] = useState<string>("0"); // 시군구 코드 상태
+  const [sggName, setSggName] = useState<string>(""); // 시군구 이름 상태
 
   const { ctpv, sgg } = useStore();
 
-  useEffect(() => {
-    // setCurPage(1);
-    handleSearchButtonClick();
-  }, [])
-
   // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
-    setIsResetPage(false);
     handleSearchButtonClick();
   }, [curPage]);
 
   // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
   const handleSearch: () => Promise<void> = async () => {
     setCurPage(1); // 페이지를 1로 초기화
-    setIsResetPage(true); // 페이지를 초기화
-    await handleSearchButtonClick();
+    await handleSearchButtonClick({ page: 1 });
   };
 
-
-  const handleSearchButtonClick = async () => {
+  const handleSearchButtonClick = async (options?: {
+    page?: number;
+    ctpvCd?: string;
+    sggCd?: string;
+  }) => {
     setIsLoadingResult(true);
-    setResetSelection(true);
 
     const formValues = form.getValues(); // react-hook-form에서 현재 값 가져오기
 
     const inftwtAnlsSearchDto = {
-      aplcnYmFrom: formValues.aplcnYmFrom?.trim() ? formValues.aplcnYmFrom : null,
+      aplcnYmFrom: formValues.aplcnYmFrom?.trim()
+        ? formValues.aplcnYmFrom
+        : null,
       aplcnYmTo: formValues.aplcnYmTo?.trim() ? formValues.aplcnYmTo : null,
-      ctpvCd: ctpvCd !== '0' ? ctpvCd.trim() : null,
-      sggCd: sggCd !== '0' ? sggCd : null,
-      swtrmtFcltNm: formValues.swtrmtFcltNm?.trim() ? formValues.swtrmtFcltNm : null,
+      ctpvCd:
+        (options?.ctpvCd ?? ctpvCd) !== "0"
+          ? (options?.ctpvCd ?? ctpvCd).trim()
+          : null,
+      sggCd:
+        (options?.sggCd ?? sggCd) !== "0" ? (options?.sggCd ?? sggCd) : null,
+      swtrmtFcltNm: formValues.swtrmtFcltNm?.trim()
+        ? formValues.swtrmtFcltNm
+        : null,
       //auth: AUTH,
     };
 
     const queryParams = new URLSearchParams({
-      page: `${curPage - 1}`,
-      size: '10',
-      sort: 'rainInfwtAnlsSn,desc'
+      page: `${(options?.page ?? curPage) - 1}`,
+      size: "10",
+      sort: "rainInfwtAnlsSn,desc",
+      scsYn: "Y",
     });
     Object.entries(inftwtAnlsSearchDto).forEach(([key, value]) => {
-      if (value !== undefined && value !== null && String(value).trim() !== '') { // undefined, null, 빈 문자열이 아닌 경우에만 추가
+      if (
+        value !== undefined &&
+        value !== null &&
+        String(value).trim() !== ""
+      ) {
+        // undefined, null, 빈 문자열이 아닌 경우에만 추가
         queryParams.append(key, String(value));
       }
     });
     const queryString = queryParams.toString();
 
     try {
-      const data = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`);
+      const data = await getData(
+        `v1/rdiiAnls${queryString ? `?${queryString}` : ""}`,
+      );
 
-      // 🎯 각 아이템을 개별적으로 포맷팅하면서 일련번호 추가
-      const dataWithRowNumber = (data.content || []).map((item: any, index: number) => {
-        // 🎯 먼저 각 아이템을 포맷팅
-        const formattedItem = formatDisplayData(item);
-        const ctpvOne = ctpv.find(code => code.val.trim() === item?.ctpvCd?.trim());
-        const sggOne = sgg.find(code => code.val === item.sggCd);
-        // 추가 처리 및 일련번호 추가
-        return {
-          ...formattedItem,
-          rowNumber: (curPage - 1) * 10 + index + 1, // 1부터 시작하는 일련번호 추가
-          scsYn: item.scsYn === null || item.scsYn === undefined ? 'N' : item.scsYn, // scsYn이 null이면 'N'으로 변경
-          ctpvNm: ctpvOne ? ctpvOne.text.trim() : item?.ctpvCd?.trim(),
-          sggNm: sggOne ? sggOne.text : item.sggCd,
-        };
-      })
-        .filter((item: any) => item.scsYn === 'Y');
+      const totalElements = Number(data?.totalElements ?? 0);
+
+      // 전체 건수를 기준으로 현재 페이지의 순번을 내림차순 계산한다.
+      const dataWithRowNumber = (data.content || [])
+        .map((item: any, index: number) => {
+          // 🎯 먼저 각 아이템을 포맷팅
+          const formattedItem = formatDisplayData(item);
+          const ctpvOne = ctpv.find(
+            (code) => code.val.trim() === item?.ctpvCd?.trim(),
+          );
+          const sggOne = sgg.find((code) => code.val === item.sggCd);
+          // 추가 처리 및 전체 건수 기준 순번 추가
+          return {
+            ...formattedItem,
+            rowNumber: Math.max(
+              totalElements - (((options?.page ?? curPage) - 1) * 10 + index),
+              0,
+            ),
+            scsYn:
+              item.scsYn === null || item.scsYn === undefined
+                ? "N"
+                : item.scsYn, // scsYn이 null이면 'N'으로 변경
+            ctpvNm: ctpvOne ? ctpvOne.text.trim() : item?.ctpvCd?.trim(),
+            sggNm: sggOne ? sggOne.text : item.sggCd,
+          };
+        })
+        .filter((item: any) => item.scsYn === "Y");
 
       // 선택된 행 초기화
       setSelectedRowData(null);
 
       setTableData(dataWithRowNumber);
-      setTotalData(dataWithRowNumber.length);
+      setTotalData(totalElements);
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
@@ -183,14 +209,24 @@ const Result = () => {
       setTotalData(0);
       setSelectedRowData(null);
     }
-    setResetSelection(false);
   };
 
-  // 테이블 셀 클릭 핸들러 추가
-  const handleCellClick = (index: number | undefined, headId: string) => {
-    if (index !== undefined && tableData[index]) {
-      setSelectedRowData(tableData[index]);
-    }
+  /** 검색 조건과 선택 상태를 기본값으로 되돌리고 첫 페이지를 다시 조회한다. */
+  const handleReset = async () => {
+    const now = new Date();
+    const currentYear = now.getFullYear();
+    const currentMonth = String(now.getMonth() + 1).padStart(2, "0");
+    form.reset({
+      swtrmtFcltCd: "0",
+      swtrmtFcltNm: "",
+      aplcnYmFrom: `${currentYear}01`,
+      aplcnYmTo: `${currentYear}${currentMonth}`,
+    });
+    setCtpvCd("0");
+    setSggCd("0");
+    setSggName("");
+    setCurPage(1);
+    await handleSearchButtonClick({ page: 1, ctpvCd: "0", sggCd: "0" });
   };
 
   // Excel 다운로드 핸들러 추가
@@ -198,22 +234,24 @@ const Result = () => {
     setIsLoadingResult(true);
     if (!selectedRowData || selectedRowData.rainInfwtAnlsSn === undefined) {
       setIsLoadingResult(false);
-      alert('다운로드할 데이터를 선택해주세요.');
+      alert("다운로드할 데이터를 선택해주세요.");
       return;
     }
 
     try {
-      const data = await getData(`v1/rdiiAnlsRslt/ppl/${selectedRowData.rainInfwtAnlsSn}`);
+      const data = await getData(
+        `v1/rdiiAnlsRslt/ppl/${selectedRowData.rainInfwtAnlsSn}`,
+      );
 
       // 선택된 행 데이터를 Excel 다운로드 형식으로 변환
       const excelData = data.content; // 배열로 감싸서 전달
 
       // 헤더 매핑 정의
       const headerMapping: { [key: string]: string } = {
-        'rainInfwtAnlsSn': 'RDII분석\n일련번호',
-        'pplMngNo': '관로\n관리번호',
-        'anlsTm': '분석시각',
-        'predcOilq': '예측유량\n(m³/h)'
+        rainInfwtAnlsSn: "RDII분석\n분석번호",
+        pplMngNo: "관로\n관리번호",
+        anlsTm: "분석시각",
+        predcOilq: "예측유량\n(m³/h)",
       };
 
       // 파일명 생성 (분석번호 기반)
@@ -224,7 +262,7 @@ const Result = () => {
         fileName: fileName,
         sheetNameArray: ["RDII 분석결과"],
         headerRange: "A1:D1",
-        headerMapping: headerMapping
+        headerMapping: headerMapping,
       });
       setIsLoadingResult(false);
     } catch (error) {
@@ -236,17 +274,17 @@ const Result = () => {
 
   // 파일 삭제 핸들러 추가
   const handleFileDelete = async () => {
-    setIsLoadingResult(true);
     if (!selectedRowData || selectedRowData.rainInfwtAnlsSn === undefined) {
-      alert('삭제할 파일을 선택해주세요.');
+      alert("삭제할 파일을 선택해주세요.");
       return;
     }
     // 삭제 확인 대화상자
-    const confirmDelete = window.confirm('선택된 분석 결과를 삭제하시겠습니까?');
+    const confirmDelete = await confirm("선택된 분석 결과를 삭제하시겠습니까?");
     if (!confirmDelete) {
       return;
     }
 
+    setIsLoadingResult(true);
     try {
       // 삭제 API 호출
       await deleteData(`v1/rdiiAnlsRslt/${selectedRowData.rainInfwtAnlsSn}`);
@@ -254,23 +292,17 @@ const Result = () => {
       // 첨부파일(inp파일) 삭제 API 호출
       handleDelete(selectedRowData.atflCd, {
         handleDeleteStart: () => console.log("파일 삭제 시작"),
-        handleDeleteSuccess: (response) => console.log("파일 삭제 성공:", response),
+        handleDeleteSuccess: (response) =>
+          console.log("파일 삭제 성공:", response),
         handleDeleteError: (error) => console.error("파일 삭제 실패:", error),
       });
 
-      // 테이블 선택 상태 초기화 트리거
-      setResetSelection(true);
-
       // 검색 버튼 클릭 이벤트 트리거
       await handleSearchButtonClick();
 
       setIsLoadingResult(false);
 
-      alert('삭제가 완료되었습니다.');
-
-      setTimeout(() => {
-        setResetSelection(false);
-      }, 100);
+      alert("삭제가 완료되었습니다.");
     } catch (error) {
       console.error("분석결과 파일 삭제 중 오류 발생:", error);
       alert("분석결과 파일 삭제 중 오류가 발생했습니다. 다시 시도해주세요.");
@@ -280,50 +312,69 @@ const Result = () => {
 
   return (
     <BaseLayout
-      selectBox={{ title: '분석 대상지역 선택', searchChk: true, onSearchClick: handleSearch }}
-      titleName={{ mainTitle: '분석결과', firstCardTitle: 'RDII 산정결과 현황' }}
+      selectBox={{
+        title: "분석 대상지역 선택",
+        searchChk: true,
+        onSearchClick: handleSearch,
+        onResetClick: handleReset,
+      }}
+      titleName={{
+        mainTitle: "RDII 분석결과",
+        firstCardTitle: "RDII 분석결과 목록",
+      }}
       form={form} // form 인스턴스 전달
-      onSubmitEvent={() => { }} // BaseLayout의 form 태그에 연결될 onSubmit
+      onSubmitEvent={() => {}} // BaseLayout의 form 태그에 연결될 onSubmit
       graphBtn={true}
       showDatePicker={true}
       ctpvCd={ctpvCd}
       sggCd={sggCd}
       sggName={sggName}
       selectedSwagePrcsFclt={form.watch("swtrmtFcltCd")}
-      onSwagePrcsFcltChange={(val) => form.setValue("swtrmtFcltCd", String(val))}
+      onSwagePrcsFcltChange={(val) =>
+        form.setValue("swtrmtFcltCd", String(val))
+      }
       aplcnYmFrom={form.watch("aplcnYmFrom")}
-      setAplcnYmFrom={(val: string) => { form.setValue("aplcnYmFrom", val) }}
+      setAplcnYmFrom={(val: string) => {
+        form.setValue("aplcnYmFrom", val);
+      }}
       aplcnYmTo={form.watch("aplcnYmTo")}
-      setAplcnYmTo={(val: string) => { form.setValue("aplcnYmTo", val) }}
+      setAplcnYmTo={(val: string) => {
+        form.setValue("aplcnYmTo", val);
+      }}
       setCtpvCd={setCtpvCd}
       setSggCd={setSggCd}
       setSggName={setSggName}
-      setSwtrmtFcltNm={(val: string) => { form.setValue("swtrmtFcltNm", val) }}
+      setSwtrmtFcltNm={(val: string) => {
+        form.setValue("swtrmtFcltNm", val);
+      }}
       setIsLoading={setIsLoadingResult}
       // Excel 다운로드 핸들러 추가
       onExcelDownload={handleExcelDownload}
       onDeleteFile={handleFileDelete}
       selectedRowData={selectedRowData}
     >
-      {[<div key='table1' className="flex-1 flex flex-col border rounded-lg bg-white shadow-md min-h-0">
-        {/* <div className="mb-[1.2rem] text-xl font-medium">○ RDII 분석결과 현황</div> */}
-        <div className="flex-1 min-h-0">
-          <UiTable
-            headName=''
+      {[
+        <div
+          key="table1"
+          className="min-w-0 [&_.standard-data-table]:!m-0 [&_.standard-data-table]:!border-0"
+        >
+          <MapPopupDataTable
+            rows={tableData}
             headlist={tableColumn}
-            tableData={tableData}
+            title=""
             total={totalData}
+            page={curPage}
             pageSize={10}
-            cellClick={handleCellClick}
             onPageChange={setCurPage}
-            resetSelection={resetSelection}
-            resetPageNo={isResetPage}
+            onRowClick={(row) => setSelectedRowData(row)}
+            loading={isLoadingResult}
+            scrollMode="horizontal"
+            minTableWidth="125rem"
           />
-        </div>
-      </div>
+        </div>,
       ]}
     </BaseLayout>
-  )
-}
+  );
+};
 
-export default Result
+export default Result;
diff --git a/apps/sn/app/(with-base-layout)/ii/result/page.tsx b/apps/sn/app/(with-base-layout)/ii/result/page.tsx
index f1cbc8364..fdabb783d 100644
--- a/apps/sn/app/(with-base-layout)/ii/result/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/result/page.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : I/I 분석 - 침입수 분석결과
- * 
+ *
  * 📄 Result Page
  * 침입수 분석 결과 페이지 컴포넌트
  *
@@ -10,163 +10,196 @@
  * - 분석 결과 파일 삭제 기능
  * - 로딩 오버레이 및 에러 핸들링 지원
  * - Zustand를 통한 상태 관리 및 데이터 포맷팅
- * 
+ *
  * 🔗 사용 API
  * - 침입수분석 목록 조회: GET /api/v1/inftwtAnls (sewerage-service)
  * - 침입수분석결과관로 목록 조회: GET /api/v1/inftwtAnlsRslt/ppl/{inftwtAnlsSn} (sewerage-service)
  * - 침입수분석결과 삭제: DELETE /api/v1/inftwtAnlsRslt/{inftwtAnlsSn} (sewerage-service)
  * - 침입수분석 삭제: DELETE /api/v1/inftwtAnls/{inftwtAnlsSn} (sewerage-service)
  */
-'use client'
-import { deleteData, getData } from '@/components/lib/api'
-import { UiTable } from '@common/business_components/ui/table'
-import { downloadExcelWithKoreanHeaders } from '@/shared/lib/download-excel'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useState, useEffect } from 'react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import BaseLayout from '../BaseLayout'
-import { handleDelete } from '@/components/lib/utils'
-import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
-import useStore from '../../../store/useStore';
+"use client";
+import { deleteData, getData } from "@/components/lib/api";
+import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import BaseLayout from "../BaseLayout";
+import { handleDelete } from "@/components/lib/utils";
+import { formatDisplayData } from "@/components/lib/utils/formatDisplayValue";
+import useStore from "../../../store/useStore";
+import { useAlertStore } from "@/shared/lib";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
 
 const formSchema = z.object({
-  swtrmtFcltCd: z.string().default('0'), // 하수처리시설코드
-  swtrmtFcltNm: z.string().default(''), // 하수처리시설명
-  aplcnYmFrom: z.string().default(() => { // Date에서 string(yyyyMM 형식)으로 변경
+  swtrmtFcltCd: z.string().default("0"), // 하수처리시설코드
+  swtrmtFcltNm: z.string().default(""), // 하수처리시설명
+  aplcnYmFrom: z.string().default(() => {
+    // Date에서 string(yyyyMM 형식)으로 변경
     const now = new Date();
     const year = now.getFullYear();
     // const month = String(now.getMonth() + 1).padStart(2, '0');
     // return `${year}${month}`;
     return `${year}01`;
   }), // 분석기간 시작연월
-  aplcnYmTo: z.string().default(() => { // Date에서 string(yyyyMM 형식)으로 변경
+  aplcnYmTo: z.string().default(() => {
+    // Date에서 string(yyyyMM 형식)으로 변경
     const now = new Date();
     const year = now.getFullYear();
-    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const month = String(now.getMonth() + 1).padStart(2, "0");
     return `${year}${month}`;
   }), // 분석기간 종료연월
-})
+});
 
-type ResultFormValues = z.infer<typeof formSchema>
+type ResultFormValues = z.infer<typeof formSchema>;
 
 const tableColumn = [
-  { id: 'rowNumber', title: '일련번호' },
-  { id: 'ctpvNm', title: '시도' },
-  { id: 'sggNm', title: '시군구' },
-  { id: 'swtrmtFcltNm', title: '하수처리시설' },
-  { id: 'aplcnYm', title: '적용연월' },
-  { id: 'drtwSwtcRt', title: '오수 전환율' },
-  { id: 'anlsInfo', title: '침입수 분석정보' },
-  { id: 'regDt', title: '분석일자' },
-  { id: 'rgtrNm', title: '분석자' },
-  { id: 'scsYn', title: '분석성공여부' }
-]
+  { id: "rowNumber", title: "순번" },
+  { id: "ctpvNm", title: "시도" },
+  { id: "sggNm", title: "시군구" },
+  { id: "swtrmtFcltNm", title: "하수처리시설" },
+  { id: "aplcnYm", title: "적용연월" },
+  { id: "drtwSwtcRt", title: "오수 전환율" },
+  { id: "anlsInfo", title: "침입수 분석정보" },
+  { id: "regDt", title: "분석일자" },
+  { id: "rgtrNm", title: "분석자" },
+  { id: "scsYn", title: "분석성공여부" },
+];
 
 const Result = () => {
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
   //const AUTH = useCookieAuth();
 
   const form = useForm<ResultFormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      swtrmtFcltCd: '0',
-      swtrmtFcltNm: '',
-      aplcnYmFrom: (() => { // 현재 연월을 yyyyMM 형식으로 설정
+      swtrmtFcltCd: "0",
+      swtrmtFcltNm: "",
+      aplcnYmFrom: (() => {
+        // 현재 연월을 yyyyMM 형식으로 설정
         const now = new Date();
         const year = now.getFullYear();
         // const month = String(now.getMonth() + 1).padStart(2, '0');
         // return `${year}${month}`;
         return `${year}01`;
       })(),
-      aplcnYmTo: (() => { // 현재 연월을 yyyyMM 형식으로 설정
+      aplcnYmTo: (() => {
+        // 현재 연월을 yyyyMM 형식으로 설정
         const now = new Date();
         const year = now.getFullYear();
-        const month = String(now.getMonth() + 1).padStart(2, '0');
+        const month = String(now.getMonth() + 1).padStart(2, "0");
         return `${year}${month}`;
       })(),
-    }
-  })
+    },
+  });
 
   const [tableData, setTableData] = useState<any[]>([]); // API 조회 결과 저장 상태
-  const [totalData, setTotalData] = useState(0) //총 데이터 수l
+  const [totalData, setTotalData] = useState(0); //총 데이터 수l
   const [isLoadingResult, setIsLoadingResult] = useState<boolean>(false); // 로딩 상태
   const [selectedRowData, setSelectedRowData] = useState<any>(null);
-  const [resetSelection, setResetSelection] = useState<boolean>(false);
-  const [isResetPage, setIsResetPage] = useState<boolean>(false);
   const [curPage, setCurPage] = useState(1); // 현재 페이지
-  const [ctpvCd, setCtpvCd] = useState<string>('0'); // 시도 코드 상태
-  const [sggCd, setSggCd] = useState<string>('0'); // 시군구 코드 상태
-  const [sggName, setSggName] = useState<string>(''); // 시군구 이름 상태
+  const [ctpvCd, setCtpvCd] = useState<string>("0"); // 시도 코드 상태
+  const [sggCd, setSggCd] = useState<string>("0"); // 시군구 코드 상태
+  const [sggName, setSggName] = useState<string>(""); // 시군구 이름 상태
   const { ctpv, sgg } = useStore();
 
-  useEffect(() => {
-    // setCurPage(1);
-    handleSearchButtonClick();
-  }, [])
-
   // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
-    setIsResetPage(false);
     handleSearchButtonClick();
   }, [curPage]);
 
   // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
   const handleSearch: () => Promise<void> = async () => {
     setCurPage(1); // 페이지를 1로 초기화
-    setIsResetPage(true); // 페이지를 초기화
-    await handleSearchButtonClick();
+    await handleSearchButtonClick({ page: 1 });
   };
 
-  const handleSearchButtonClick = async () => {
+  const handleSearchButtonClick = async (options?: {
+    page?: number;
+    ctpvCd?: string;
+    sggCd?: string;
+  }) => {
     setIsLoadingResult(true);
-    setResetSelection(true);
     const formValues = form.getValues(); // react-hook-form에서 현재 값 가져오기
 
     let inftwtAnlsSearchDto = {
-      "aplcnYmFrom": formValues.aplcnYmFrom && formValues.aplcnYmFrom !== '' ? formValues.aplcnYmFrom : null,
-      "aplcnYmTo": formValues.aplcnYmTo && formValues.aplcnYmTo !== '' ? formValues.aplcnYmTo : null,
-      "ctpvCd": ctpvCd === '0' ? null : ctpvCd.trim(),
-      "sggCd": sggCd === '0' ? null : sggCd,
-      "swtrmtFcltNm": formValues.swtrmtFcltNm?.trim() ? formValues.swtrmtFcltNm : null,
+      aplcnYmFrom:
+        formValues.aplcnYmFrom && formValues.aplcnYmFrom !== ""
+          ? formValues.aplcnYmFrom
+          : null,
+      aplcnYmTo:
+        formValues.aplcnYmTo && formValues.aplcnYmTo !== ""
+          ? formValues.aplcnYmTo
+          : null,
+      ctpvCd:
+        (options?.ctpvCd ?? ctpvCd) === "0"
+          ? null
+          : (options?.ctpvCd ?? ctpvCd).trim(),
+      sggCd:
+        (options?.sggCd ?? sggCd) === "0" ? null : (options?.sggCd ?? sggCd),
+      swtrmtFcltNm: formValues.swtrmtFcltNm?.trim()
+        ? formValues.swtrmtFcltNm
+        : null,
       //"auth": AUTH,
     };
 
     const queryParams = new URLSearchParams({
-      page: `${curPage - 1}`,
-      size: '10',
-      sort: 'inftwtAnlsSn,desc'
+      page: `${(options?.page ?? curPage) - 1}`,
+      size: "10",
+      sort: "inftwtAnlsSn,desc",
+      scsYn: "Y",
     });
     Object.entries(inftwtAnlsSearchDto).forEach(([key, value]) => {
-      if (value !== undefined && value !== null && String(value).trim() !== '') { // undefined, null, 빈 문자열이 아닌 경우에만 추가
+      if (
+        value !== undefined &&
+        value !== null &&
+        String(value).trim() !== ""
+      ) {
+        // undefined, null, 빈 문자열이 아닌 경우에만 추가
         queryParams.append(key, String(value));
       }
     });
     const queryString = queryParams.toString();
     try {
-      const data = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
+      const data = await getData(
+        `v1/inftwtAnls${queryString ? `?${queryString}` : ""}`,
+      );
 
-      // 🎯 각 아이템을 개별적으로 포맷팅하면서 일련번호 추가
-      const dataWithRowNumber = (data.content || []).map((item: any, index: number) => {
-        // 🎯 먼저 각 아이템을 포맷팅
-        const formattedItem = formatDisplayData(item);
-        const ctpvOne = ctpv.find(code => code.val.trim() === item?.ctpvCd?.trim());
-        const sggOne = sgg.find(code => code.val === item.sggCd);
-        // 추가 처리 및 일련번호 추가
-        return {
-          ...formattedItem,
-          rowNumber: (curPage - 1) * 10 + index + 1, // 1부터 시작하는 일련번호 추가
-          scsYn: item.scsYn === null || item.scsYn === undefined ? 'N' : item.scsYn, // scsYn이 null이면 'N'으로 변경
-          ctpvNm: ctpvOne ? ctpvOne.text : item.ctpvCd,
-          sggNm: sggOne ? sggOne.text : item.sggCd,
-        };
-      })
-        .filter((item: any) => item.scsYn === 'Y');
+      const totalElements = Number(data?.totalElements ?? 0);
+
+      // 전체 건수를 기준으로 현재 페이지의 순번을 내림차순 계산한다.
+      const dataWithRowNumber = (data.content || [])
+        .map((item: any, index: number) => {
+          // 🎯 먼저 각 아이템을 포맷팅
+          const formattedItem = formatDisplayData(item);
+          const ctpvOne = ctpv.find(
+            (code) => code.val.trim() === item?.ctpvCd?.trim(),
+          );
+          const sggOne = sgg.find((code) => code.val === item.sggCd);
+          // 추가 처리 및 전체 건수 기준 순번 추가
+          return {
+            ...formattedItem,
+            rowNumber: Math.max(
+              totalElements - (((options?.page ?? curPage) - 1) * 10 + index),
+              0,
+            ),
+            scsYn:
+              item.scsYn === null || item.scsYn === undefined
+                ? "N"
+                : item.scsYn, // scsYn이 null이면 'N'으로 변경
+            ctpvNm: ctpvOne ? ctpvOne.text : item.ctpvCd,
+            sggNm: sggOne ? sggOne.text : item.sggCd,
+          };
+        })
+        .filter((item: any) => item.scsYn === "Y");
 
       // 선택된 행 초기화
       setSelectedRowData(null);
 
       setTableData(dataWithRowNumber);
-      setTotalData(data?.totalElements || 0); // totalElements가 없을 경우 0으로 설정
+      setTotalData(totalElements);
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
@@ -176,14 +209,24 @@ const Result = () => {
       setTotalData(0);
       setSelectedRowData(null);
     }
-    setResetSelection(false);
   };
 
-  // 테이블 셀 클릭 핸들러 추가
-  const handleCellClick = (index: number | undefined, headId: string) => {
-    if (index !== undefined && tableData[index]) {
-      setSelectedRowData(tableData[index]);
-    }
+  /** 검색 조건과 선택 상태를 기본값으로 되돌리고 첫 페이지를 다시 조회한다. */
+  const handleReset = async () => {
+    const now = new Date();
+    const currentYear = now.getFullYear();
+    const currentMonth = String(now.getMonth() + 1).padStart(2, "0");
+    form.reset({
+      swtrmtFcltCd: "0",
+      swtrmtFcltNm: "",
+      aplcnYmFrom: `${currentYear}01`,
+      aplcnYmTo: `${currentYear}${currentMonth}`,
+    });
+    setCtpvCd("0");
+    setSggCd("0");
+    setSggName("");
+    setCurPage(1);
+    await handleSearchButtonClick({ page: 1, ctpvCd: "0", sggCd: "0" });
   };
 
   // Excel 다운로드 핸들러 추가
@@ -191,22 +234,24 @@ const Result = () => {
     setIsLoadingResult(true);
     if (!selectedRowData || selectedRowData.inftwtAnlsSn === undefined) {
       setIsLoadingResult(false);
-      alert('다운로드할 데이터를 선택해주세요.');
+      alert("다운로드할 데이터를 선택해주세요.");
       return;
     }
 
     try {
-      const data = await getData(`v1/inftwtAnlsRslt/ppl/${selectedRowData.inftwtAnlsSn}`);
+      const data = await getData(
+        `v1/inftwtAnlsRslt/ppl/${selectedRowData.inftwtAnlsSn}`,
+      );
 
       // 선택된 행 데이터를 Excel 다운로드 형식으로 변환
       const excelData = data.content; // 배열로 감싸서 전달
 
       // 헤더 매핑 정의
       const headerMapping: { [key: string]: string } = {
-        'inftwtAnlsSn': '침입수분석\n일련번호',
-        'pplMngNo': '관로\n관리번호',
-        'anlsTm': '분석시각',
-        'predcOilq': '예측유량\n(m³/h)'
+        inftwtAnlsSn: "침입수분석\n분석번호",
+        pplMngNo: "관로\n관리번호",
+        anlsTm: "분석시각",
+        predcOilq: "예측유량\n(m³/h)",
       };
 
       // 파일명 생성 (분석번호 기반)
@@ -217,7 +262,7 @@ const Result = () => {
         fileName: fileName,
         sheetNameArray: ["침입수 분석결과"],
         headerRange: "A1:D1",
-        headerMapping: headerMapping
+        headerMapping: headerMapping,
       });
       setIsLoadingResult(false);
     } catch (error) {
@@ -229,18 +274,17 @@ const Result = () => {
 
   // 파일 삭제 핸들러 추가
   const handleFileDelete = async () => {
-    setIsLoadingResult(true);
     if (!selectedRowData || selectedRowData.inftwtAnlsSn === undefined) {
-      setIsLoadingResult(false);
-      alert('삭제할 파일을 선택해주세요.');
+      alert("삭제할 파일을 선택해주세요.");
       return;
     }
     // 삭제 확인 대화상자
-    const confirmDelete = window.confirm('선택된 분석 결과를 삭제하시겠습니까?');
+    const confirmDelete = await confirm("선택된 분석 결과를 삭제하시겠습니까?");
     if (!confirmDelete) {
       return;
     }
 
+    setIsLoadingResult(true);
     try {
       // // 삭제 API 호출
       await deleteData(`v1/inftwtAnlsRslt/${selectedRowData.inftwtAnlsSn}`);
@@ -248,21 +292,17 @@ const Result = () => {
       // 첨부파일(inp파일) 삭제 API 호출
       handleDelete(selectedRowData.atflCd, {
         handleDeleteStart: () => console.log("파일 삭제 시작"),
-        handleDeleteSuccess: (response) => console.log("파일 삭제 성공:", response),
+        handleDeleteSuccess: (response) =>
+          console.log("파일 삭제 성공:", response),
         handleDeleteError: (error) => console.error("파일 삭제 실패:", error),
       });
 
-      // 테이블 선택 상태 초기화 트리거
-      setResetSelection(true);
-
       // 검색 버튼 클릭 이벤트 트리거
       await handleSearchButtonClick();
 
       setIsLoadingResult(false);
 
-      alert('삭제가 완료되었습니다.');
-
-      setResetSelection(false);
+      alert("삭제가 완료되었습니다.");
     } catch (error) {
       setIsLoadingResult(false);
       console.error("분석결과 파일 삭제 중 오류 발생:", error);
@@ -270,52 +310,70 @@ const Result = () => {
     }
   };
 
-
   return (
     <BaseLayout
-      selectBox={{ title: '분석 대상지역 선택', searchChk: true, onSearchClick: handleSearch }}
-      titleName={{ mainTitle: '분석결과', firstCardTitle: '분석이력' }}
+      selectBox={{
+        title: "분석 대상지역 선택",
+        searchChk: true,
+        onSearchClick: handleSearch,
+        onResetClick: handleReset,
+      }}
+      titleName={{
+        mainTitle: "침입수 분석결과",
+        firstCardTitle: "침입수 분석결과 목록",
+      }}
       form={form} // form 인스턴스 전달
-      onSubmitEvent={() => { }} // BaseLayout의 form 태그에 연결될 onSubmit
+      onSubmitEvent={() => {}} // BaseLayout의 form 태그에 연결될 onSubmit
       graphBtn={true}
       showDatePicker={true}
       ctpvCd={ctpvCd}
       sggCd={sggCd}
       sggName={sggName}
       selectedSwagePrcsFclt={form.watch("swtrmtFcltCd")}
-      onSwagePrcsFcltChange={(val) => form.setValue("swtrmtFcltCd", String(val))}
+      onSwagePrcsFcltChange={(val) =>
+        form.setValue("swtrmtFcltCd", String(val))
+      }
       aplcnYmFrom={form.watch("aplcnYmFrom")}
-      setAplcnYmFrom={(val: string) => { form.setValue("aplcnYmFrom", val) }}
+      setAplcnYmFrom={(val: string) => {
+        form.setValue("aplcnYmFrom", val);
+      }}
       aplcnYmTo={form.watch("aplcnYmTo")}
-      setAplcnYmTo={(val: string) => { form.setValue("aplcnYmTo", val) }}
+      setAplcnYmTo={(val: string) => {
+        form.setValue("aplcnYmTo", val);
+      }}
       setCtpvCd={setCtpvCd}
       setSggCd={setSggCd}
       setSggName={setSggName}
-      setSwtrmtFcltNm={(val: string) => { form.setValue("swtrmtFcltNm", val) }}
+      setSwtrmtFcltNm={(val: string) => {
+        form.setValue("swtrmtFcltNm", val);
+      }}
       setIsLoading={setIsLoadingResult}
       onExcelDownload={handleExcelDownload}
       onDeleteFile={handleFileDelete}
       selectedRowData={selectedRowData}
     >
-      {[<div key='table1' className="flex-1 flex flex-col border rounded-lg bg-white shadow-md min-h-0">
-        {/* <div className="mb-[1.2rem] text-xl font-medium">○ 침입수 산정결과 현황</div> */}
-        <div className="flex-1 min-h-0">
-          <UiTable
-            headName=''
+      {[
+        <div
+          key="table1"
+          className="min-w-0 [&_.standard-data-table]:!m-0 [&_.standard-data-table]:!border-0"
+        >
+          <MapPopupDataTable
+            rows={tableData}
             headlist={tableColumn}
-            tableData={tableData}
+            title=""
             total={totalData}
+            page={curPage}
             pageSize={10}
-            cellClick={handleCellClick}
             onPageChange={setCurPage}
-            resetSelection={resetSelection}
-            resetPageNo={isResetPage}
+            onRowClick={(row) => setSelectedRowData(row)}
+            loading={isLoadingResult}
+            scrollMode="horizontal"
+            minTableWidth="110rem"
           />
-        </div>
-      </div>
+        </div>,
       ]}
     </BaseLayout>
-  )
-}
+  );
+};
 
-export default Result
+export default Result;
diff --git a/apps/sn/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.tsx b/apps/sn/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.tsx
index 8f5d98095..64e69d7a5 100644
--- a/apps/sn/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
 
 import { getRawJson } from "@/components/lib/api";
+import { useAlertStore } from "@/shared/lib";
 
 type AnalysisStatusResponse = {
   scsYn?: string | null;
@@ -21,7 +22,7 @@ type AnalysisStatusEnvelope = {
 };
 
 const unwrapAnalysisStatusResponse = (
-  response: AnalysisStatusResponse | AnalysisStatusEnvelope | null
+  response: AnalysisStatusResponse | AnalysisStatusEnvelope | null,
 ): AnalysisStatusResponse | null => {
   if (!response || typeof response !== "object") {
     return null;
@@ -72,7 +73,8 @@ const PROGRESS_OVERLAY_ANALYSIS_TYPES = new Set([
   RDII_ANALYSIS_TYPE,
 ]);
 const PENDING_ANALYSIS_WATCHES_STORAGE_KEY = "SN_PENDING_ANALYSIS_WATCHES";
-const PENDING_ANALYSIS_WATCHES_CHANGED_EVENT = "sn-pending-analysis-watches-changed";
+const PENDING_ANALYSIS_WATCHES_CHANGED_EVENT =
+  "sn-pending-analysis-watches-changed";
 
 const clampProgressPercent = (value?: number | null) => {
   if (!Number.isFinite(value)) {
@@ -82,7 +84,8 @@ const clampProgressPercent = (value?: number | null) => {
   return Math.max(0, Math.min(100, Number(value)));
 };
 
-const createWatchKey = (statusUrl: string, analysisSn: number) => `${statusUrl}::${analysisSn}`;
+const createWatchKey = (statusUrl: string, analysisSn: number) =>
+  `${statusUrl}::${analysisSn}`;
 
 const dispatchPendingAnalysisChanged = () => {
   if (typeof window === "undefined") {
@@ -92,7 +95,9 @@ const dispatchPendingAnalysisChanged = () => {
   window.dispatchEvent(new Event(PENDING_ANALYSIS_WATCHES_CHANGED_EVENT));
 };
 
-const normalizePendingAnalysisWatch = (raw: unknown): PendingAnalysisWatch | null => {
+const normalizePendingAnalysisWatch = (
+  raw: unknown,
+): PendingAnalysisWatch | null => {
   if (!raw || typeof raw !== "object") {
     return null;
   }
@@ -107,7 +112,7 @@ const normalizePendingAnalysisWatch = (raw: unknown): PendingAnalysisWatch | nul
   const progressPercent = clampProgressPercent(
     typeof candidate.progressPercent === "number"
       ? candidate.progressPercent
-      : Number(candidate.progressPercent)
+      : Number(candidate.progressPercent),
   );
 
   return {
@@ -145,7 +150,9 @@ const loadPendingAnalysisWatches = (): PendingAnalysisWatch[] => {
   }
 
   try {
-    const raw = window.localStorage.getItem(PENDING_ANALYSIS_WATCHES_STORAGE_KEY);
+    const raw = window.localStorage.getItem(
+      PENDING_ANALYSIS_WATCHES_STORAGE_KEY,
+    );
     if (!raw) {
       return [];
     }
@@ -177,14 +184,14 @@ const savePendingAnalysisWatches = (items: PendingAnalysisWatch[]) => {
 
   window.localStorage.setItem(
     PENDING_ANALYSIS_WATCHES_STORAGE_KEY,
-    JSON.stringify(items)
+    JSON.stringify(items),
   );
   dispatchPendingAnalysisChanged();
 };
 
 const replacePendingAnalysisWatch = (
   items: PendingAnalysisWatch[],
-  nextItem: PendingAnalysisWatch
+  nextItem: PendingAnalysisWatch,
 ): PendingAnalysisWatch[] => {
   const filteredItems = items.filter((item) => item.key !== nextItem.key);
   return [...filteredItems, nextItem];
@@ -224,7 +231,7 @@ const AnalysisProgressOverlay = ({ item }: { item: PendingAnalysisWatch }) => {
   const progressText = toProgressText(item);
 
   return (
-    <div className="pointer-events-none fixed bottom-4 left-4 z-[90] w-[190px] max-w-[calc(100vw-2rem)] rounded-lg border border-primary bg-white/95 p-3 shadow-[0_10px_24px_rgba(37,139,232,0.18)] backdrop-blur-sm">
+    <div className="pointer-events-none fixed bottom-4 left-4 z-[90] w-[190px] max-w-[calc(100vw-2rem)] rounded-lg border border-primary bg-background p-3 shadow-[0_10px_24px_rgba(37,139,232,0.18)] backdrop-blur-sm">
       <div className="mb-2 flex items-center justify-between gap-2">
         <p className="truncate text-[1.05rem] font-semibold text-primary">
           {item.analysisName}
@@ -233,13 +240,13 @@ const AnalysisProgressOverlay = ({ item }: { item: PendingAnalysisWatch }) => {
           {progressPercent}%
         </span>
       </div>
-      <div className="mb-2 h-[6px] overflow-hidden rounded-full bg-[#dbeafe]">
+      <div className="mb-2 h-[6px] overflow-hidden rounded-full bg-primary-transparent">
         <div
           className="h-full rounded-full bg-primary transition-all duration-300"
           style={{ width: `${progressPercent}%` }}
         />
       </div>
-      <p className="truncate text-[0.95rem] text-slate-600">{progressText}</p>
+      <p className="truncate text-[0.95rem] text-label">{progressText}</p>
     </div>
   );
 };
@@ -280,7 +287,7 @@ export function useAnalysisCompletionWatcher({
 
     const nextItems = replacePendingAnalysisWatch(
       loadPendingAnalysisWatches(),
-      nextItem
+      nextItem,
     );
     savePendingAnalysisWatches(nextItems);
   };
@@ -296,7 +303,7 @@ export function useAnalysisCompletionWatcher({
     }
 
     const nextItems = loadPendingAnalysisWatches().filter(
-      (item) => item.analysisSn !== analysisSn
+      (item) => item.analysisSn !== analysisSn,
     );
     savePendingAnalysisWatches(nextItems);
   };
@@ -308,11 +315,15 @@ export function useAnalysisCompletionWatcher({
 }
 
 export function GlobalAnalysisCompletionWatcher() {
+  const alert = useAlertStore((state) => state.setMessage);
   const pathname = usePathname();
   // 전역 overlay와 완료 alert가 같은 storage 소스를 바라보도록 local state로 동기화한다.
   const [pendingItems, setPendingItems] = useState<PendingAnalysisWatch[]>([]);
 
-  const activeOverlayItem = useMemo(() => toOverlayItem(pendingItems), [pendingItems]);
+  const activeOverlayItem = useMemo(
+    () => toOverlayItem(pendingItems),
+    [pendingItems],
+  );
   const shouldHideOverlay = pathname?.includes("/popup/") ?? false;
 
   useEffect(() => {
@@ -348,17 +359,21 @@ export function GlobalAnalysisCompletionWatcher() {
       try {
         for (const item of currentItems) {
           const pollUrl = `${item.statusUrl}${item.statusUrl.includes("?") ? "&" : "?"}_ts=${Date.now()}`;
-          const rawResponse = (await getRawJson(pollUrl, { cache: "no-store" })) as AnalysisStatusResponse | AnalysisStatusEnvelope | null;
+          const rawResponse = (await getRawJson(pollUrl, {
+            cache: "no-store",
+          })) as AnalysisStatusResponse | AnalysisStatusEnvelope | null;
           const response = unwrapAnalysisStatusResponse(rawResponse);
           if (!response) {
             continue;
           }
 
-          const scsYn = String(response.scsYn ?? "").trim().toUpperCase();
+          const scsYn = String(response.scsYn ?? "")
+            .trim()
+            .toUpperCase();
           const message = String(response.message ?? "").trim();
           const latestItems = loadPendingAnalysisWatches();
           const latestItem = latestItems.find(
-            (latestWatch) => latestWatch.key === item.key
+            (latestWatch) => latestWatch.key === item.key,
           );
           if (!latestItem) {
             continue;
@@ -368,17 +383,18 @@ export function GlobalAnalysisCompletionWatcher() {
             ...latestItem,
             progressMessage:
               String(
-                response.progressMessage ?? latestItem.progressMessage ?? ""
+                response.progressMessage ?? latestItem.progressMessage ?? "",
               ).trim() || latestItem.progressMessage,
             progressPercent:
               clampProgressPercent(
                 typeof response.progressPercent === "number"
                   ? response.progressPercent
-                  : Number(response.progressPercent)
+                  : Number(response.progressPercent),
               ) ?? latestItem.progressPercent,
             progressStep:
-              String(response.progressStep ?? latestItem.progressStep ?? "").trim() ||
-              latestItem.progressStep,
+              String(
+                response.progressStep ?? latestItem.progressStep ?? "",
+              ).trim() || latestItem.progressStep,
             updatedAt:
               String(response.updatedAt ?? latestItem.updatedAt ?? "").trim() ||
               latestItem.updatedAt,
@@ -386,15 +402,18 @@ export function GlobalAnalysisCompletionWatcher() {
 
           if (scsYn !== "Y" && scsYn !== "N") {
             savePendingAnalysisWatches(
-              replacePendingAnalysisWatch(latestItems, updatedItem)
+              replacePendingAnalysisWatch(latestItems, updatedItem),
             );
             continue;
           }
 
           savePendingAnalysisWatches(
-            latestItems.filter((latestWatch) => latestWatch.key !== item.key)
+            latestItems.filter((latestWatch) => latestWatch.key !== item.key),
+          );
+          alert(
+            message ||
+              (scsYn === "Y" ? item.successMessage : item.failureMessage),
           );
-          alert(message || (scsYn === "Y" ? item.successMessage : item.failureMessage));
         }
       } catch (error) {
         console.error("분석 완료 상태 조회 중 오류가 발생했습니다.", error);
@@ -416,7 +435,7 @@ export function GlobalAnalysisCompletionWatcher() {
     window.addEventListener("storage", handlePendingAnalysisChanged);
     window.addEventListener(
       PENDING_ANALYSIS_WATCHES_CHANGED_EVENT,
-      handlePendingAnalysisChanged
+      handlePendingAnalysisChanged,
     );
     document.addEventListener("visibilitychange", handlePendingAnalysisChanged);
     syncPendingItems();
@@ -429,15 +448,20 @@ export function GlobalAnalysisCompletionWatcher() {
       window.removeEventListener("storage", handlePendingAnalysisChanged);
       window.removeEventListener(
         PENDING_ANALYSIS_WATCHES_CHANGED_EVENT,
-        handlePendingAnalysisChanged
+        handlePendingAnalysisChanged,
+      );
+      document.removeEventListener(
+        "visibilitychange",
+        handlePendingAnalysisChanged,
       );
-      document.removeEventListener("visibilitychange", handlePendingAnalysisChanged);
     };
-  }, [shouldHideOverlay]);
+  }, [alert, shouldHideOverlay]);
 
   if (shouldHideOverlay) {
     return null;
   }
 
-  return activeOverlayItem ? <AnalysisProgressOverlay item={activeOverlayItem} /> : null;
-}
\ No newline at end of file
+  return activeOverlayItem ? (
+    <AnalysisProgressOverlay item={activeOverlayItem} />
+  ) : null;
+}
diff --git a/apps/sn/app/(with-base-layout)/layout.tsx b/apps/sn/app/(with-base-layout)/layout.tsx
index 8a87ed076..567cbd86d 100644
--- a/apps/sn/app/(with-base-layout)/layout.tsx
+++ b/apps/sn/app/(with-base-layout)/layout.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : I/I분석, 유지관리 정보 모든 페이지
- * 
+ *
  * 📄 With Base Layout
  * Next.js App Router (app/) 기반 분석 페이지 기본 레이아웃 컴포넌트
  *
@@ -50,14 +50,16 @@ export default function WithBaseLayout({
   };
 
   return (
-    <BaseLayout
-      queryClient={queryClient}
-      authService={authService}
-      currentPath={pathname ?? ""}
-      handleMenuClick={handleMenuClick}
-    >
-      <GlobalAnalysisCompletionWatcher />
-      <PageLayout>{children}</PageLayout>
-    </BaseLayout>
+    <div className="sn-base-layout w-full min-w-0 max-w-full">
+      <BaseLayout
+        queryClient={queryClient}
+        authService={authService}
+        currentPath={pathname ?? ""}
+        handleMenuClick={handleMenuClick}
+      >
+        <GlobalAnalysisCompletionWatcher />
+        <PageLayout>{children}</PageLayout>
+      </BaseLayout>
+    </div>
   );
 }
diff --git a/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingDetailPopupPage.tsx b/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingDetailPopupPage.tsx
index 01246f5b8..62e7d8f86 100644
--- a/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingDetailPopupPage.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingDetailPopupPage.tsx
@@ -1,12 +1,21 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { FileUpload } from "@common/business_components/ui/file-upload";
-import { Button } from "@common/components/ui/button";
-import { Input } from "@common/components/ui/input";
-import { Label } from "@common/components/ui/label";
+import { StandardPopupLayout } from "@common/business_components";
+import {
+  Button,
+  InputDatePicker,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@common/components";
 import { MS_SWAGE_PPL_CODES } from "@/app/(map-layout)/map/components/common/table";
-import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { useAlertStore } from "@/shared/lib";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import {
   fetchDredgingPhotoBlob,
@@ -22,6 +31,7 @@ import {
   type DredgingPhoto,
   type DredgingPhotoDraft,
   type DredgingRecord,
+  type DredgingRegistrationMode,
   type GeoPoint,
   type PipeMatch,
 } from "../lib/types";
@@ -45,11 +55,6 @@ type NewPhotoPreview = DredgingPhotoDraft & {
   previewUrl: string;
 };
 
-const PRIMARY_BUTTON_CLASS =
-  "min-w-[6.4rem] border !border-blue-600 !bg-blue-600 px-4 font-medium !text-white hover:!bg-blue-700";
-const SECONDARY_BUTTON_CLASS =
-  "min-w-[6.4rem] border !border-blue-300 !bg-white px-4 font-medium !text-blue-700 hover:!bg-blue-50";
-
 const pipeMaterialNameByCode = new Map(
   MS_SWAGE_PPL_CODES.map((item) => [item.val.trim(), item.text]),
 );
@@ -74,12 +79,16 @@ const formatLocalDate = (date: Date) => {
   return `${year}-${month}-${day}`;
 };
 
+const parseLocalDate = (value: string) => new Date(`${value}T00:00:00`);
+
 /** 상세 UI를 공통 기반으로 사용해 조회와 수정 상태의 시각 구조를 동일하게 유지한다. */
 const DredgingDetailPopupPage = ({
   record,
   mode = "detail",
   onUpdated,
 }: Props) => {
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
   const editable = mode === "edit";
   const [photos, setPhotos] = useState<DredgingPhotoPreview[]>([]);
   const [newPhotos, setNewPhotos] = useState<NewPhotoPreview[]>([]);
@@ -94,6 +103,14 @@ const DredgingDetailPopupPage = ({
   });
   const [locationDraft, setLocationDraft] = useState<GeoPoint | null>(null);
   const [isEditingLocation, setIsEditingLocation] = useState(false);
+  // 등록방식은 사진 필수 여부와 마스터의 등록구분을 함께 결정한다.
+  const [registrationMode, setRegistrationMode] =
+    useState<DredgingRegistrationMode>(
+      record.registrationMode ??
+        (record.photoCount === 0 && record.registrationSource === "MANUAL"
+          ? "MANUAL"
+          : "PHOTO"),
+    );
   const [locationSource, setLocationSource] = useState(
     record.registrationSource,
   );
@@ -220,7 +237,12 @@ const DredgingDetailPopupPage = ({
     ],
     ["위치등록", locationSourceLabel[locationSource]],
   ];
+  const pipeInfoRows = Array.from(
+    { length: Math.ceil(pipeInfo.length / 2) },
+    (_, index) => pipeInfo.slice(index * 2, index * 2 + 2),
+  );
   const automaticMappingValue = `${matchedPipe.distanceMeters.toFixed(2)} m`;
+  const totalPhotoCount = photos.length + newPhotos.length;
 
   const handleNewFiles = async (files: File[] | null) => {
     const selectedFiles = files ?? [];
@@ -256,9 +278,16 @@ const DredgingDetailPopupPage = ({
   };
 
   const removeExistingPhoto = (photoSn: number) => {
-    setPhotos((current) =>
-      current.filter((photo) => photo.photoSn !== photoSn),
-    );
+    const remaining = photos.filter((photo) => photo.photoSn !== photoSn);
+    setPhotos(remaining);
+    if (
+      registrationMode === "PHOTO" &&
+      remaining.length + newPhotos.length === 0
+    ) {
+      setStatusMessage(
+        "사진 기반 등록은 사진이 한 장 이상 필요합니다. 사진을 추가하거나 사진 없이 직접 등록을 선택해주세요.",
+      );
+    }
     if (selectedPhotoKey === `existing-${photoSn}`) setSelectedPhotoKey(null);
   };
 
@@ -270,12 +299,50 @@ const DredgingDetailPopupPage = ({
         (url) => url !== removed.previewUrl,
       );
     }
-    setNewPhotos((current) =>
-      current.filter((photo) => photo.key !== photoKey),
-    );
+    const remaining = newPhotos.filter((photo) => photo.key !== photoKey);
+    setNewPhotos(remaining);
+    if (
+      registrationMode === "PHOTO" &&
+      photos.length + remaining.length === 0
+    ) {
+      setStatusMessage(
+        "사진 기반 등록은 사진이 한 장 이상 필요합니다. 사진을 추가하거나 사진 없이 직접 등록을 선택해주세요.",
+      );
+    }
     if (selectedPhotoKey === `new-${photoKey}`) setSelectedPhotoKey(null);
   };
 
+  /** 수정 중 등록방식을 바꾸고 직접 등록 선택 시 사진을 모두 삭제 대상으로 전환한다. */
+  const changeRegistrationMode = async (nextMode: DredgingRegistrationMode) => {
+    if (registrationMode === nextMode) return;
+    if (
+      nextMode === "MANUAL" &&
+      totalPhotoCount > 0 &&
+      !(await confirm(
+        "사진 없이 직접 등록으로 변경하면 현재 사진이 모두 삭제됩니다. 변경하시겠습니까?",
+      ))
+    ) {
+      return;
+    }
+
+    if (nextMode === "MANUAL") {
+      newPhotoUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+      newPhotoUrlsRef.current = [];
+      setPhotos([]);
+      setNewPhotos([]);
+      setSelectedPhotoKey(null);
+      setLocationSource("MANUAL");
+      setStatusMessage(
+        "사진 없이 직접 등록으로 변경했습니다. 현재 위치를 확인하고 필요하면 수정해주세요.",
+      );
+    } else {
+      setStatusMessage(
+        "사진 기반 등록은 사진이 한 장 이상 필요합니다. 준설사진을 추가해주세요.",
+      );
+    }
+    setRegistrationMode(nextMode);
+  };
+
   const startLocationEditing = () => {
     setLocationDraft(location);
     setIsEditingLocation(true);
@@ -332,6 +399,13 @@ const DredgingDetailPopupPage = ({
       alert("미래 날짜는 준설일자로 수정할 수 없습니다.");
       return;
     }
+    if (registrationMode === "PHOTO" && totalPhotoCount === 0) {
+      const message =
+        "사진 기반 등록은 사진이 한 장 이상 필요합니다. 사진을 추가하거나 사진 없이 직접 등록을 선택해주세요.";
+      setStatusMessage(message);
+      alert(message);
+      return;
+    }
     if (isEditingLocation) {
       alert("선택한 지도 위치를 먼저 적용해주세요.");
       return;
@@ -353,8 +427,10 @@ const DredgingDetailPopupPage = ({
         {
           dredgingDate,
           originalPipeFid: record.pipeFid,
+          registrationMode,
           location,
-          locationSource,
+          locationSource:
+            registrationMode === "MANUAL" ? "MANUAL" : locationSource,
           pipe: matchedPipe,
           retainedPhotoSns: photos.map((photo) => photo.photoSn),
           newPhotos,
@@ -364,8 +440,7 @@ const DredgingDetailPopupPage = ({
       uploadedAttachmentsRef.current.clear();
       setStatusMessage("준설정보 수정을 완료했습니다.");
       onUpdated?.();
-      alert("준설정보를 수정했습니다.");
-      window.close();
+      alert("준설정보를 수정했습니다.", () => window.close());
     } catch (saveError) {
       const message =
         saveError instanceof Error
@@ -378,117 +453,151 @@ const DredgingDetailPopupPage = ({
     }
   };
 
-  const totalPhotoCount = photos.length + newPhotos.length;
-
   return (
-    <main className="sn-popup-page sn-dredging-register bg-[#eef3f7]">
-      <header className="sn-popup-header shrink-0">
-        <div className="flex min-w-0 items-center gap-4">
-          <h1 className="sn-popup-title shrink-0">
-            준설결과 {editable ? "수정" : "상세"}
-          </h1>
-          <span className="truncate text-[1.15rem] text-white/90">
-            관로번호 {matchedPipe.fcltMngNo || "확인불가"}
-          </span>
-        </div>
-        {editable ? (
-          <div className="flex items-center gap-1.5">
+    <StandardPopupLayout
+      title={`준설결과 ${editable ? "수정" : "상세"}`}
+      showDefaultCancelAction={false}
+      actions={
+        <div className="flex items-center gap-2">
+          {editable ? (
             <Button
               type="button"
-              size="sm"
-              className="sn-popup-header-button min-w-[6.4rem] !border-white !bg-white/10 !text-white hover:!bg-white/20"
-              disabled={isSaving}
-              onClick={() => window.close()}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              className="sn-popup-header-button min-w-[6.4rem] !border-white !bg-white !text-blue-700 hover:!bg-blue-50"
               disabled={isSaving || isMatching}
               onClick={() => void handleSave()}
               data-testid="dredging-edit-save-button"
             >
               {isSaving ? "저장 중..." : "저장"}
             </Button>
-          </div>
-        ) : null}
-      </header>
-
-      <section className="grid min-h-0 flex-1 grid-cols-[minmax(440px,31%)_minmax(0,1fr)] gap-2 p-2">
-        <aside className="flex min-h-0 flex-col gap-2 overflow-y-auto pr-1">
-          <section className="shrink-0 rounded-sm border border-slate-300 bg-white">
-            <div className="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-3 py-2">
-              <h2 className="text-base font-semibold text-slate-900">
-                관로정보
-              </h2>
-              {editable ? (
-                <div className="flex items-center gap-2">
-                  <Label
-                    htmlFor="dredging-edit-date"
-                    className="text-sm font-medium text-slate-700"
-                  >
-                    준설일자 <span className="text-rose-600">*</span>
-                  </Label>
-                  <Input
-                    id="dredging-edit-date"
-                    type="date"
-                    value={dredgingDate}
-                    max={formatLocalDate(new Date())}
-                    onChange={(event) => setDredgingDate(event.target.value)}
-                    className="sn-dredging-date-input h-[3.2rem] w-[155px] text-base"
-                    disabled={isSaving}
-                  />
-                </div>
-              ) : (
-                <strong className="text-sm text-slate-700">
-                  {dredgingDate}
-                </strong>
-              )}
-            </div>
-            <dl className="grid grid-cols-[82px_minmax(0,1fr)_82px_minmax(0,1fr)] gap-px bg-slate-200">
-              {pipeInfo.map(([label, value]) => (
-                <Fragment key={label}>
-                  <dt className="flex min-h-8 items-center bg-blue-100 px-2 text-xs font-semibold text-slate-700">
-                    {label}
-                  </dt>
-                  <dd
-                    className="flex min-h-8 min-w-0 items-center truncate bg-white px-2 text-sm font-medium text-slate-900"
-                    title={value}
-                  >
-                    {value}
-                  </dd>
-                </Fragment>
-              ))}
-              <dt className="flex min-h-8 items-center bg-blue-100 px-2 text-xs font-semibold text-slate-700">
-                자동매핑
-              </dt>
-              <dd
-                className="col-span-3 flex min-h-8 min-w-0 items-center truncate bg-white px-2 text-sm font-medium text-slate-900"
-                title={automaticMappingValue}
-              >
-                {automaticMappingValue}
-              </dd>
-            </dl>
-          </section>
-
-          <section className="flex min-h-[360px] flex-1 flex-col overflow-hidden rounded-sm border border-slate-300 bg-white">
-            <div className="flex min-h-[30px] shrink-0 items-center justify-between gap-2 overflow-visible border-b border-slate-200 bg-slate-50 px-3 py-1">
-              <div className="flex min-h-[20px] min-w-0 items-center">
-                <p className="truncate text-xs leading-[18px] text-slate-500">
-                  {editable
-                    ? "기존 사진을 삭제하거나 새 사진을 추가할 수 있습니다."
-                    : "사진을 선택하면 아래에서 원본을 확인합니다."}
-                </p>
-              </div>
-              <span className="shrink-0 text-xs font-medium leading-[18px] text-slate-600">
-                {totalPhotoCount}/5장
+          ) : null}
+          <Button
+            type="button"
+            color="white"
+            disabled={isSaving}
+            onClick={() => window.close()}
+          >
+            취소
+          </Button>
+        </div>
+      }
+      bodyClassName="sn-dredging-register block overflow-y-auto"
+    >
+      <div className="grid min-h-0 grid-cols-[minmax(44rem,48rem)_minmax(0,1fr)] gap-3">
+        <aside className="flex min-h-0 flex-col gap-3 pr-1">
+          <section className="card card-border !m-0 shrink-0 overflow-hidden !p-0">
+            <div className="card-header !m-0">
+              <h2 className="text-2xl font-medium text-label">관로 정보</h2>
+              <span className="truncate text-base text-muted-foreground">
+                관로번호 {matchedPipe.fcltMngNo || "확인불가"}
               </span>
             </div>
+            <div className="p-3">
+              <Table variant="secondary">
+                <colgroup>
+                  <col width="18%" />
+                  <col width="32%" />
+                  <col width="18%" />
+                  <col width="32%" />
+                </colgroup>
+                <TableBody>
+                  <TableRow>
+                    <TableHead data-required={editable || undefined}>
+                      준설일자
+                    </TableHead>
+                    <TableCell className="border px-4">
+                      {editable ? (
+                        <div className="w-full max-w-[15.5rem]">
+                          <InputDatePicker
+                            value={parseLocalDate(dredgingDate)}
+                            onChange={(date) =>
+                              date && setDredgingDate(formatLocalDate(date))
+                            }
+                            className="w-full"
+                            disabled={isSaving}
+                          />
+                        </div>
+                      ) : (
+                        dredgingDate
+                      )}
+                    </TableCell>
+                    <TableHead>자동매핑</TableHead>
+                    <TableCell
+                      className="truncate border px-4"
+                      title={automaticMappingValue}
+                    >
+                      {automaticMappingValue}
+                    </TableCell>
+                  </TableRow>
+                  {pipeInfoRows.map((row, index) => {
+                    const first = row[0];
+                    const second = row[1];
+                    return (
+                      <TableRow key={`${first?.[0]}-${index}`}>
+                        <TableHead>{first?.[0]}</TableHead>
+                        <TableCell
+                          className="truncate border px-4"
+                          title={first?.[1]}
+                        >
+                          {first?.[1]}
+                        </TableCell>
+                        {second ? (
+                          <>
+                            <TableHead>{second[0]}</TableHead>
+                            <TableCell
+                              className="truncate border px-4"
+                              title={second[1]}
+                            >
+                              {second[1]}
+                            </TableCell>
+                          </>
+                        ) : (
+                          <TableCell colSpan={2} className="border" />
+                        )}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          </section>
 
-            {editable ? (
-              <div className="sn-dredging-photo-upload shrink-0 border-b border-slate-200 p-2">
+          <section className="card card-border !m-0 flex min-h-[36rem] flex-1 flex-col overflow-hidden !p-0">
+            <div className="card-header !m-0 shrink-0 gap-2">
+              <h2 className="text-2xl font-medium text-label">준설 사진</h2>
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                {editable ? (
+                  <>
+                    <Button
+                      type="button"
+                      size="sm"
+                      color={registrationMode === "PHOTO" ? "primary" : "white"}
+                      aria-pressed={registrationMode === "PHOTO"}
+                      onClick={() => void changeRegistrationMode("PHOTO")}
+                      data-testid="dredging-edit-photo-mode"
+                    >
+                      사진 기반 등록
+                    </Button>
+                    <Button
+                      type="button"
+                      size="sm"
+                      color={
+                        registrationMode === "MANUAL" ? "primary" : "white"
+                      }
+                      aria-pressed={registrationMode === "MANUAL"}
+                      onClick={() => void changeRegistrationMode("MANUAL")}
+                      data-testid="dredging-edit-manual-mode"
+                    >
+                      사진 없이 직접 등록
+                    </Button>
+                  </>
+                ) : null}
+                <span className="text-base text-muted-foreground">
+                  {totalPhotoCount}/5장
+                </span>
+              </div>
+            </div>
+
+            {editable && registrationMode === "PHOTO" ? (
+              <div className="sn-dredging-photo-upload shrink-0 border-b border-border p-3">
                 <FileUpload
                   files={newPhotos.map((photo) => photo.file)}
                   setFiles={(files) => void handleNewFiles(files)}
@@ -496,11 +605,15 @@ const DredgingDetailPopupPage = ({
                   maxFiles={Math.max(1, 5 - photos.length)}
                 />
               </div>
+            ) : editable ? (
+              <div className="bg-secondary/30 shrink-0 border-b border-border px-3 py-3 text-center text-sm text-muted-foreground">
+                사진 없이 지도에서 준설위치를 직접 지정합니다.
+              </div>
             ) : null}
 
-            <div className="max-h-[190px] shrink-0 overflow-y-auto border-b border-slate-200 p-2">
+            <div className="shrink-0 border-b border-border p-3">
               {isLoading ? (
-                <p className="flex h-[88px] items-center justify-center text-sm text-slate-500">
+                <p className="flex h-[8.8rem] items-center justify-center text-sm text-muted-foreground">
                   등록된 사진을 불러오는 중입니다.
                 </p>
               ) : error ? (
@@ -521,40 +634,45 @@ const DredgingDetailPopupPage = ({
                     return (
                       <div
                         key={key}
-                        className={`flex items-stretch rounded-sm border ${selected ? "border-blue-500 bg-blue-50" : "border-slate-200 bg-white"}`}
+                        className={`flex items-stretch overflow-hidden rounded-sm border border-border ${selected ? "bg-primary-transparent" : "bg-background"}`}
                       >
-                        <button
+                        <Button
                           type="button"
-                          className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-left"
+                          variant="ghost"
+                          color="white"
+                          className="h-auto min-w-0 flex-1 justify-start rounded-none border-0 px-3 py-2 text-left"
                           onClick={() => setSelectedPhotoKey(key)}
                           aria-pressed={selected}
                           data-testid={`dredging-detail-photo-${photo.photoSn}`}
                         >
-                          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">
+                          <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-secondary text-sm font-semibold text-label">
                             {index + 1}
                           </span>
                           <span className="flex min-w-0 flex-1 items-center gap-2">
                             <strong
-                              className="min-w-0 flex-1 truncate text-[11px]"
+                              className="min-w-0 flex-1 truncate text-sm"
                               title={photo.originalFileName}
                             >
                               {photo.originalFileName ||
                                 `준설사진 ${index + 1}`}
                             </strong>
-                            <span className="shrink-0 whitespace-nowrap text-[10px] text-slate-500">
+                            <span className="shrink-0 whitespace-nowrap text-sm text-muted-foreground">
                               {photo.capturedAt ?? "촬영일시 없음"}
                             </span>
                           </span>
-                        </button>
+                        </Button>
                         {editable ? (
-                          <button
+                          <Button
                             type="button"
+                            variant="destructive"
+                            color="red"
+                            size="icon"
                             aria-label={`${photo.originalFileName} 삭제`}
-                            className="w-9 border-l border-slate-200 text-base font-bold text-slate-400 hover:bg-rose-50 hover:text-rose-700"
+                            className="h-auto w-10 rounded-none border-y-0 border-l border-r-0 border-border p-0"
                             onClick={() => removeExistingPhoto(photo.photoSn)}
                           >
                             ×
-                          </button>
+                          </Button>
                         ) : null}
                       </div>
                     );
@@ -565,50 +683,58 @@ const DredgingDetailPopupPage = ({
                     return (
                       <div
                         key={key}
-                        className={`flex items-stretch rounded-sm border ${selected ? "border-blue-500 bg-blue-50" : "border-emerald-200 bg-emerald-50/40"}`}
+                        className={`flex items-stretch overflow-hidden rounded-sm border border-border ${selected ? "bg-primary-transparent" : "bg-background"}`}
                       >
-                        <button
+                        <Button
                           type="button"
-                          className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-left"
+                          variant="ghost"
+                          color="white"
+                          className="h-auto min-w-0 flex-1 justify-start rounded-none border-0 px-3 py-2 text-left"
                           onClick={() => setSelectedPhotoKey(key)}
                           aria-pressed={selected}
                         >
-                          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-xs font-semibold text-emerald-700">
+                          <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-secondary text-sm font-semibold text-label">
                             {photos.length + index + 1}
                           </span>
                           <span className="flex min-w-0 flex-1 items-center gap-2">
                             <strong
-                              className="min-w-0 flex-1 truncate text-[11px]"
+                              className="min-w-0 flex-1 truncate text-sm"
                               title={photo.file.name}
                             >
                               신규 · {photo.file.name}
                             </strong>
-                            <span className="shrink-0 whitespace-nowrap text-[10px] text-slate-500">
+                            <span className="shrink-0 whitespace-nowrap text-sm text-muted-foreground">
                               {photo.metadata.capturedAt ?? "촬영일시 없음"}
                             </span>
                           </span>
-                        </button>
-                        <button
+                        </Button>
+                        <Button
                           type="button"
+                          variant="destructive"
+                          color="red"
+                          size="icon"
                           aria-label={`${photo.file.name} 삭제`}
-                          className="w-9 border-l border-emerald-200 text-base font-bold text-slate-400 hover:bg-rose-50 hover:text-rose-700"
+                          className="h-auto w-10 rounded-none border-y-0 border-l border-r-0 border-border p-0"
                           onClick={() => removeNewPhoto(photo.key)}
                         >
                           ×
-                        </button>
+                        </Button>
                       </div>
                     );
                   })}
                 </div>
               ) : (
-                <p className="flex h-[88px] items-center justify-center text-sm text-slate-500">
-                  등록된 사진이 없습니다.
+                <p className="flex h-[8.8rem] items-center justify-center text-sm text-muted-foreground">
+                  {editable && registrationMode === "PHOTO"
+                    ? "사진을 추가하거나 사진 없이 직접 등록을 선택해주세요."
+                    : "등록된 사진이 없습니다."}
                 </p>
               )}
             </div>
 
+            {/* 사진 미리보기는 밝은 사진의 경계를 보장하는 미디어 캔버스이므로 고정 암색을 유지한다. */}
             <div
-              className="flex min-h-[220px] flex-1 items-center justify-center overflow-hidden bg-slate-900 p-2"
+              className="flex min-h-[22rem] flex-1 items-center justify-center overflow-hidden bg-slate-900 p-2"
               data-testid="dredging-detail-photo-preview"
             >
               {selectedExistingPhoto?.previewUrl ? (
@@ -629,52 +755,52 @@ const DredgingDetailPopupPage = ({
                 </p>
               ) : (
                 <p className="px-4 text-center text-sm text-slate-300">
-                  사진목록에서 확인할 사진을 선택해주세요.
+                  {editable && registrationMode === "MANUAL"
+                    ? "사진 없이 직접 등록 중입니다. 오른쪽 지도에서 위치를 확인해주세요."
+                    : "사진목록에서 확인할 사진을 선택해주세요."}
                 </p>
               )}
             </div>
           </section>
 
           {editable ? (
-            <div className="shrink-0 rounded-sm border border-slate-300 bg-white px-3 py-2">
-              <div className="flex items-center justify-between gap-2">
+            <section className="card card-border !m-0 shrink-0 overflow-hidden !p-0">
+              <div className="card-header !m-0 flex-wrap gap-2">
                 <div className="min-w-0">
-                  <strong className="block truncate text-sm text-slate-800">
-                    자동 연결 관로 · {matchedPipe.fcltMngNo}
-                  </strong>
-                  <span
-                    className={`block truncate text-xs ${matchError ? "text-rose-700" : "text-slate-500"}`}
+                  <h2 className="text-2xl font-medium text-label">
+                    위치 및 관로
+                  </h2>
+                  <p
+                    className={`mt-1 truncate text-sm ${matchError ? "text-rose-700" : "text-muted-foreground"}`}
                   >
-                    {matchError ??
-                      `${matchedPipe.distanceMeters.toFixed(2)}m · 지도에서 위치를 수정할 수 있습니다.`}
-                  </span>
+                    자동 연결 관로 · {matchedPipe.fcltMngNo} ·{" "}
+                    {matchError ?? `${matchedPipe.distanceMeters.toFixed(2)}m`}
+                  </p>
                 </div>
-                <div className="flex shrink-0 gap-1">
+                <div className="flex shrink-0 gap-2">
                   {isEditingLocation ? (
                     <>
                       <Button
                         type="button"
                         size="sm"
-                        className={SECONDARY_BUTTON_CLASS}
-                        onClick={cancelLocationEditing}
-                      >
-                        취소
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        className={PRIMARY_BUTTON_CLASS}
                         disabled={!locationDraft || isMatching}
                         onClick={() => void applyLocation()}
                       >
                         {isMatching ? "관로 찾는 중..." : "선택 위치 적용"}
                       </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        color="white"
+                        onClick={cancelLocationEditing}
+                      >
+                        취소
+                      </Button>
                     </>
                   ) : (
                     <Button
                       type="button"
                       size="sm"
-                      className={PRIMARY_BUTTON_CLASS}
                       onClick={startLocationEditing}
                     >
                       위치 수정
@@ -683,39 +809,49 @@ const DredgingDetailPopupPage = ({
                 </div>
               </div>
               <div
-                className="mt-1 min-h-5 rounded-sm bg-slate-50 px-2 py-1 text-xs text-slate-600"
+                className="bg-secondary/30 px-4 py-2 text-sm text-muted-foreground"
                 data-testid="dredging-edit-status"
               >
                 {statusMessage ||
                   "준설일자·사진·위치와 자동 연결 관로를 확인해주세요."}
               </div>
-            </div>
+            </section>
           ) : null}
         </aside>
 
         <section
-          className="min-h-0 overflow-hidden rounded-sm bg-white"
+          className="card card-border !m-0 flex min-h-0 min-w-0 flex-col overflow-hidden !p-0"
           data-testid="dredging-detail-map"
         >
-          <DredgingLocationMap
-            value={isEditingLocation ? locationDraft : location}
-            matchedPipe={
-              isEditingLocation && locationDraft ? null : matchedPipe
-            }
-            interactive={editable && isEditingLocation}
-            onChange={setLocationDraft}
-            statusText={
-              isEditingLocation
-                ? "지도에서 변경할 준설위치를 클릭한 뒤 선택 위치 적용을 눌러주세요."
-                : editable
-                  ? "현재 준설위치와 자동 연결된 관로를 표시하고 있습니다."
-                  : "준설위치와 자동 연결된 관로를 표시하고 있습니다."
-            }
-            height="h-full min-h-[560px]"
-          />
+          <div className="card-header !m-0 shrink-0">
+            <h2 className="text-2xl font-medium text-label">준설 위치 지도</h2>
+            {editable ? (
+              <span className="text-sm text-muted-foreground">
+                위치 수정 버튼을 누른 뒤 지도에서 위치를 선택하세요.
+              </span>
+            ) : null}
+          </div>
+          <div className="min-h-[56rem] flex-1 p-2">
+            <DredgingLocationMap
+              value={isEditingLocation ? locationDraft : location}
+              matchedPipe={
+                isEditingLocation && locationDraft ? null : matchedPipe
+              }
+              interactive={editable && isEditingLocation}
+              onChange={setLocationDraft}
+              statusText={
+                isEditingLocation
+                  ? "지도에서 변경할 준설위치를 클릭한 뒤 선택 위치 적용을 눌러주세요."
+                  : editable
+                    ? "현재 준설위치와 자동 연결된 관로를 표시하고 있습니다."
+                    : "준설위치와 자동 연결된 관로를 표시하고 있습니다."
+              }
+              height="h-full min-h-[56rem]"
+            />
+          </div>
         </section>
-      </section>
-    </main>
+      </div>
+    </StandardPopupLayout>
   );
 };
 
diff --git a/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingLocationMap.tsx b/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingLocationMap.tsx
index f9726eac7..886fe7d4e 100644
--- a/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingLocationMap.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingLocationMap.tsx
@@ -281,7 +281,7 @@ const LocationInteraction = ({
   })();
 
   return (
-    <div className="rounded-sm border border-slate-300 bg-white/95 px-2 py-1.5 text-xs text-slate-700 shadow">
+    <div className="rounded-sm border border-border bg-background px-2 py-1.5 text-xs text-label shadow">
       <p className="font-medium">
         {interactive
           ? "지도를 클릭해 준설위치를 선택하세요."
@@ -290,12 +290,15 @@ const LocationInteraction = ({
       <div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1">
         <span>관로 색상·굵기: 관망도 레이어 설정</span>
         <span className="inline-flex items-center gap-1.5">
+          {/* 선택 관로를 지도에서 식별하는 범례 의미색이므로 고정 주황색을 유지한다. */}
           <span className="inline-block h-1.5 w-6 rounded bg-[#f97316]" />
           자동 연결 관로
         </span>
         <span
           className={
-            pipeLoadState === "error" ? "text-rose-600" : "text-slate-500"
+            pipeLoadState === "error"
+              ? "text-rose-600"
+              : "text-muted-foreground"
           }
           data-testid="dredging-pipe-map-status"
         >
@@ -350,7 +353,7 @@ const DredgingLocationMap = ({
   }, []);
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-sm border border-slate-300">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-sm border border-border">
       <Gis
         treeData={[]}
         gisMaps={gisMaps}
@@ -379,7 +382,7 @@ const DredgingLocationMap = ({
         treeTogglePosition="top"
       />
       <div
-        className="shrink-0 border-t bg-slate-50 px-3 py-1.5 text-xs text-slate-700"
+        className="shrink-0 border-t bg-secondary px-3 py-1.5 text-xs text-label"
         data-testid="dredging-map-status"
       >
         {statusText ??
diff --git a/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingRegisterModal.tsx b/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingRegisterModal.tsx
index 684707589..6ab628f74 100644
--- a/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingRegisterModal.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/dredging/components/DredgingRegisterModal.tsx
@@ -1,11 +1,25 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { FileUpload } from "@common/business_components/ui/file-upload";
-import { UiModal } from "@common/business_components/ui/dialog_ui";
-import { Button } from "@common/components/ui/button";
-import { Input } from "@common/components/ui/input";
-import { Label } from "@common/components/ui/label";
+import { StandardPopupLayout } from "@common/business_components";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  InputDatePicker,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+import { useAlertStore } from "@/shared/lib";
 import { useEffect, useRef, useState } from "react";
 
 import {
@@ -36,11 +50,6 @@ type DredgingRegisterModalProps = {
   presentation?: "modal" | "popup";
 };
 
-const POPUP_PRIMARY_BUTTON_CLASS =
-  "min-w-[6.4rem] border !border-blue-600 !bg-blue-600 px-4 font-medium !text-white hover:!bg-blue-700";
-const POPUP_SECONDARY_BUTTON_CLASS =
-  "min-w-[6.4rem] border !border-blue-300 !bg-white px-4 font-medium !text-blue-700 hover:!bg-blue-50";
-
 const createGroup = (): DredgingDraftGroup => ({
   id: crypto.randomUUID(),
   registrationMode: "PHOTO",
@@ -78,12 +87,16 @@ const formatLocalDate = (date: Date) => {
   return `${year}-${month}-${day}`;
 };
 
+const parseLocalDate = (value: string) => new Date(`${value}T00:00:00`);
+
 const DredgingRegisterModal = ({
   open,
   onOpenChange,
   onSaved,
   presentation = "modal",
 }: DredgingRegisterModalProps) => {
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
   const [groups, setGroups] = useState<DredgingDraftGroup[]>([]);
   const groupsRef = useRef<DredgingDraftGroup[]>([]);
   const [activeGroupId, setActiveGroupId] = useState<string | null>(null);
@@ -319,7 +332,7 @@ const DredgingRegisterModal = ({
     );
   };
 
-  const changeRegistrationMode = (
+  const changeRegistrationMode = async (
     groupId: string,
     registrationMode: DredgingDraftGroup["registrationMode"],
   ) => {
@@ -333,9 +346,9 @@ const DredgingRegisterModal = ({
       currentGroup.photos.length > 0 || currentGroup.manualLocation !== null;
     if (
       hasEnteredData &&
-      !window.confirm(
+      !(await confirm(
         "등록 방식을 변경하면 현재 사진과 입력한 위치가 초기화됩니다. 변경하시겠습니까?",
-      )
+      ))
     ) {
       return;
     }
@@ -475,8 +488,7 @@ const DredgingRegisterModal = ({
       await saveDredgingRegistrations(saveGroups, attachments);
       uploadedAttachmentsRef.current.clear();
       onSaved(saveGroups);
-      alert("준설 결과를 등록했습니다.");
-      onOpenChange(false);
+      alert("준설 결과를 등록했습니다.", () => onOpenChange(false));
     } catch (error) {
       const message =
         error instanceof Error
@@ -543,12 +555,12 @@ const DredgingRegisterModal = ({
     <div
       className={
         presentation === "popup"
-          ? "sn-dredging-register flex h-full min-h-0 flex-col overflow-hidden pr-2"
-          : "sn-dredging-register max-h-[78vh] overflow-y-auto pr-2"
+          ? "sn-dredging-register flex h-full min-h-0 flex-col overflow-hidden"
+          : "sn-dredging-register"
       }
     >
-      <div className="mb-2 flex shrink-0 flex-wrap items-center gap-x-4 gap-y-1 rounded-sm border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs text-slate-700">
-        <strong className="text-blue-900">등록 안내</strong>
+      <div className="bg-secondary/40 mb-3 flex shrink-0 flex-wrap items-center gap-x-4 gap-y-1 rounded-sm border border-border px-4 py-2 text-sm text-label">
+        <strong className="text-foreground">등록 안내</strong>
         <span>관로별 사진은 최대 5장까지 등록할 수 있습니다.</span>
         <span>
           모든 등록 건은 하나의 준설작업이며 동일한 준설일자를 사용합니다.
@@ -557,127 +569,139 @@ const DredgingRegisterModal = ({
 
       {activeGroup ? (
         <div
-          className="grid min-h-0 flex-1 grid-cols-[minmax(470px,520px)_minmax(0,1fr)] gap-2"
+          className="grid min-h-0 flex-1 grid-cols-[minmax(48rem,52rem)_minmax(0,1fr)] gap-3"
           data-testid={`dredging-group-${
             groups.findIndex((group) => group.id === activeGroup.id) + 1
           }`}
         >
-          <aside className="flex min-h-0 min-w-0 flex-col gap-2 overflow-y-auto pr-1">
-            <section className="shrink-0 rounded-sm border border-slate-300 bg-white p-2 shadow-sm">
-              <div className="flex flex-wrap items-center gap-2">
-                <Label
-                  htmlFor="representative-dredging-date"
-                  className="shrink-0 !text-[12.5px] !font-medium !leading-[17.5px] !text-gray-600"
-                >
-                  준설일자 <span className="text-red-600">*</span>
-                </Label>
-                <Input
-                  id="representative-dredging-date"
-                  data-testid="representative-dredging-date"
-                  type="date"
-                  value={representativeDredgingDate}
-                  max={formatLocalDate(new Date())}
-                  onChange={(event) =>
-                    setRepresentativeDredgingDate(event.target.value)
-                  }
-                  className="sn-dredging-date-input h-[3.2rem] w-[155px] text-base"
-                />
-                <span className="text-xs text-slate-500">
-                  첫 사진 촬영일로 자동 입력되며 직접 수정할 수 있습니다.
-                </span>
-              </div>
-
-              <div className="mt-2 flex flex-wrap items-center justify-between gap-2 border-t border-slate-200 pt-2">
-                <div
-                  className="flex flex-wrap items-center gap-2"
-                  role="tablist"
-                  aria-label="준설 등록 건"
-                >
-                  {groups.map((group, groupIndex) => {
-                    const active = group.id === activeGroup.id;
-                    return (
-                      <div key={group.id} className="inline-flex items-stretch">
-                        <Button
-                          type="button"
-                          size="sm"
-                          role="tab"
-                          aria-selected={active}
-                          className={`${
-                            active
-                              ? POPUP_PRIMARY_BUTTON_CLASS
-                              : POPUP_SECONDARY_BUTTON_CLASS
-                          } ${groupIndex > 0 ? "!min-w-0 rounded-r-none border-r-0" : ""}`}
-                          onClick={() => selectGroup(group.id)}
-                        >
-                          등록 건 {groupIndex + 1}
-                          <span
-                            className={`ml-2 inline-block h-2 w-2 rounded-full ${
-                              getResolvedLocation(group)
-                                ? "bg-emerald-400"
-                                : "bg-amber-400"
-                            }`}
-                            aria-label={
-                              getResolvedLocation(group)
-                                ? "위치 등록 완료"
-                                : "위치 등록 필요"
-                            }
-                          />
-                        </Button>
-                        {groupIndex > 0 ? (
-                          <button
-                            type="button"
-                            aria-label={`등록 건 ${groupIndex + 1} 삭제`}
-                            title={`등록 건 ${groupIndex + 1} 삭제`}
-                            className={`min-w-8 rounded-r border px-2 text-sm font-bold ${
-                              active
-                                ? "border-blue-600 bg-blue-600 text-white hover:bg-blue-700"
-                                : "border-blue-300 bg-white text-blue-700 hover:bg-blue-50"
-                            }`}
-                            onClick={() => removeGroup(group.id)}
-                          >
-                            ×
-                          </button>
-                        ) : null}
-                      </div>
-                    );
-                  })}
-                </div>
-                <Button
-                  type="button"
-                  size="sm"
-                  className={POPUP_PRIMARY_BUTTON_CLASS}
-                  onClick={addGroup}
-                >
-                  <span aria-hidden="true" className="mr-1">
-                    +
-                  </span>
+          <aside className="flex min-h-0 min-w-0 flex-col gap-3 pr-1">
+            <section className="card card-border !m-0 shrink-0 overflow-hidden !p-0">
+              <div className="card-header !m-0">
+                <h3 className="text-2xl font-medium text-label">등록 정보</h3>
+                <Button type="button" size="sm" onClick={addGroup}>
                   관로 추가
                 </Button>
               </div>
+              <div className="p-3">
+                <Table variant="secondary">
+                  <colgroup>
+                    <col width="22%" />
+                    <col width="78%" />
+                  </colgroup>
+                  <TableBody>
+                    <TableRow>
+                      <TableHead data-required>준설일자</TableHead>
+                      <TableCell className="border px-4">
+                        <div className="flex flex-wrap items-center gap-3">
+                          <div data-testid="representative-dredging-date">
+                            <InputDatePicker
+                              value={
+                                representativeDredgingDate
+                                  ? parseLocalDate(representativeDredgingDate)
+                                  : null
+                              }
+                              onChange={(date) =>
+                                setRepresentativeDredgingDate(
+                                  date ? formatLocalDate(date) : "",
+                                )
+                              }
+                              className="w-[15.5rem]"
+                            />
+                          </div>
+                          <span className="text-sm text-muted-foreground">
+                            첫 사진 촬영일로 자동 입력되며 직접 수정할 수
+                            있습니다.
+                          </span>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>등록 관로</TableHead>
+                      <TableCell className="border px-4">
+                        <div
+                          className="flex flex-wrap items-center gap-2"
+                          role="tablist"
+                          aria-label="준설 등록 건"
+                        >
+                          {groups.map((group, groupIndex) => {
+                            const active = group.id === activeGroup.id;
+                            return (
+                              <div
+                                key={group.id}
+                                className="inline-flex items-stretch"
+                              >
+                                <Button
+                                  type="button"
+                                  size="sm"
+                                  color={active ? "primary" : "white"}
+                                  role="tab"
+                                  aria-selected={active}
+                                  className={
+                                    groupIndex > 0
+                                      ? "rounded-r-none border-r-0"
+                                      : undefined
+                                  }
+                                  onClick={() => selectGroup(group.id)}
+                                >
+                                  등록 건 {groupIndex + 1}
+                                  <span
+                                    className={`ml-1 inline-block size-2 rounded-full ${
+                                      getResolvedLocation(group)
+                                        ? "bg-emerald-400"
+                                        : "bg-amber-400"
+                                    }`}
+                                    aria-label={
+                                      getResolvedLocation(group)
+                                        ? "위치 등록 완료"
+                                        : "위치 등록 필요"
+                                    }
+                                  />
+                                </Button>
+                                {groupIndex > 0 ? (
+                                  <Button
+                                    type="button"
+                                    size="icon"
+                                    color="red"
+                                    variant="destructive"
+                                    aria-label={`등록 건 ${groupIndex + 1} 삭제`}
+                                    title={`등록 건 ${groupIndex + 1} 삭제`}
+                                    className="h-10 min-w-8 rounded-l-none px-2"
+                                    onClick={() => removeGroup(group.id)}
+                                  >
+                                    ×
+                                  </Button>
+                                ) : null}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </div>
             </section>
 
-            <section className="shrink-0 rounded-sm border border-slate-300 bg-white p-2 shadow-sm">
-              <div className="mb-1 flex flex-wrap items-center justify-between gap-2 border-b pb-1">
-                <div className="min-w-0">
-                  <h3 className="text-lg font-semibold text-slate-800">
-                    사진 및 위치 정보
-                  </h3>
-                  <p className="text-xs text-slate-500">
-                    촬영일과 GPS 상태를 확인합니다.
+            <section className="card card-border !m-0 shrink-0 overflow-hidden !p-0">
+              <div className="card-header !m-0 flex-wrap gap-2">
+                <div>
+                  <h3 className="text-2xl font-medium text-label">준설 사진</h3>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    촬영일과 GPS 정보를 확인합니다.
                   </p>
                 </div>
-                <div className="flex shrink-0 flex-wrap gap-1">
+                <div className="flex flex-wrap gap-2">
                   <Button
                     type="button"
                     size="sm"
-                    aria-pressed={activeGroup.registrationMode === "PHOTO"}
-                    className={
+                    color={
                       activeGroup.registrationMode === "PHOTO"
-                        ? POPUP_PRIMARY_BUTTON_CLASS
-                        : POPUP_SECONDARY_BUTTON_CLASS
+                        ? "primary"
+                        : "white"
                     }
+                    aria-pressed={activeGroup.registrationMode === "PHOTO"}
                     onClick={() =>
-                      changeRegistrationMode(activeGroup.id, "PHOTO")
+                      void changeRegistrationMode(activeGroup.id, "PHOTO")
                     }
                   >
                     사진 기반 등록
@@ -685,120 +709,118 @@ const DredgingRegisterModal = ({
                   <Button
                     type="button"
                     size="sm"
-                    aria-pressed={activeGroup.registrationMode === "MANUAL"}
-                    className={
+                    color={
                       activeGroup.registrationMode === "MANUAL"
-                        ? POPUP_PRIMARY_BUTTON_CLASS
-                        : POPUP_SECONDARY_BUTTON_CLASS
+                        ? "primary"
+                        : "white"
                     }
+                    aria-pressed={activeGroup.registrationMode === "MANUAL"}
                     onClick={() =>
-                      changeRegistrationMode(activeGroup.id, "MANUAL")
+                      void changeRegistrationMode(activeGroup.id, "MANUAL")
                     }
                   >
                     사진 없이 직접 등록
                   </Button>
                 </div>
               </div>
+              <div className="p-3">
+                {activeGroup.registrationMode === "PHOTO" ? (
+                  <>
+                    <div className="sn-dredging-photo-upload">
+                      <FileUpload
+                        files={activeGroup.photos.map((photo) => photo.file)}
+                        setFiles={(files) => {
+                          void handleFilesChange(activeGroup.id, files);
+                        }}
+                        fileTypes=".jpg,.jpeg,.png"
+                        maxFiles={5}
+                      />
+                    </div>
 
-              {activeGroup.registrationMode === "PHOTO" ? (
-                <>
-                  <div className="sn-dredging-photo-upload">
-                    <FileUpload
-                      files={activeGroup.photos.map((photo) => photo.file)}
-                      setFiles={(files) => {
-                        void handleFilesChange(activeGroup.id, files);
-                      }}
-                      fileTypes=".jpg,.jpeg,.png"
-                      maxFiles={5}
-                    />
+                    {activeGroup.photos.length > 0 ? (
+                      <div className="mt-2 rounded-sm border border-border">
+                        <Table className="table-fixed" variant="default">
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead className="w-[34%]">사진</TableHead>
+                              <TableHead className="w-[25%]">
+                                촬영일시
+                              </TableHead>
+                              <TableHead className="w-[16%]">위치</TableHead>
+                              <TableHead className="w-[17%]">상태</TableHead>
+                              <TableHead className="w-[8%]">삭제</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {activeGroup.photos.map((photo) => (
+                              <TableRow key={photo.key}>
+                                <TableCell
+                                  className="truncate px-3"
+                                  title={photo.file.name}
+                                >
+                                  {photo.file.name}
+                                </TableCell>
+                                <TableCell
+                                  className="truncate px-3"
+                                  title={photo.metadata.capturedAt ?? "-"}
+                                >
+                                  {photo.metadata.capturedAt ?? "-"}
+                                </TableCell>
+                                <TableCell className="px-3">
+                                  {photo.metadata.location
+                                    ? "GPS"
+                                    : "지정 필요"}
+                                </TableCell>
+                                <TableCell className="px-3">
+                                  <span
+                                    className={`whitespace-nowrap rounded-sm px-2 py-1 text-sm font-medium ${
+                                      photo.metadata.status === "COMPLETE"
+                                        ? "bg-emerald-100 text-emerald-800"
+                                        : "bg-amber-100 text-amber-800"
+                                    }`}
+                                  >
+                                    {statusLabel(photo.metadata.status)}
+                                  </span>
+                                </TableCell>
+                                <TableCell className="px-2 text-center">
+                                  <Button
+                                    type="button"
+                                    size="icon"
+                                    variant="destructive"
+                                    color="red"
+                                    aria-label={`${photo.file.name} 삭제`}
+                                    title="사진 삭제"
+                                    className="size-8 p-0"
+                                    onClick={() =>
+                                      removePhoto(activeGroup.id, photo.key)
+                                    }
+                                  >
+                                    ×
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    ) : (
+                      <div className="bg-secondary/30 mt-2 rounded-sm border border-dashed border-border px-3 py-2 text-center text-sm text-muted-foreground">
+                        준설사진을 선택하면 촬영일과 위치정보를 자동으로
+                        확인합니다.
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div className="bg-secondary/30 rounded-sm border border-dashed border-border px-3 py-3 text-center text-sm text-muted-foreground">
+                    사진 없이 지도에서 준설위치를 직접 지정합니다.
                   </div>
-
-                  {activeGroup.photos.length > 0 ? (
-                    <div className="mt-1.5 max-h-[210px] overflow-auto rounded-sm border">
-                      <table className="w-full table-fixed text-left text-xs">
-                        <thead className="sticky top-0 bg-blue-100 text-slate-800">
-                          <tr>
-                            <th className="w-[38%] px-2 py-1.5">사진</th>
-                            <th className="w-[27%] px-2 py-1.5">촬영일시</th>
-                            <th className="w-[17%] px-2 py-1.5">위치</th>
-                            <th className="w-[10%] px-2 py-1.5">상태</th>
-                            <th className="w-[8%] px-1 py-1.5 text-center">
-                              삭제
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {activeGroup.photos.map((photo) => (
-                            <tr key={photo.key} className="border-t">
-                              <td
-                                className="truncate px-2 py-1.5"
-                                title={photo.file.name}
-                              >
-                                {photo.file.name}
-                              </td>
-                              <td
-                                className="truncate px-2 py-1.5"
-                                title={photo.metadata.capturedAt ?? "-"}
-                              >
-                                {photo.metadata.capturedAt ?? "-"}
-                              </td>
-                              <td className="truncate px-2 py-1.5">
-                                {photo.metadata.location ? (
-                                  <span className="font-medium text-emerald-700">
-                                    GPS
-                                  </span>
-                                ) : (
-                                  <span className="font-medium text-amber-700">
-                                    지정 필요
-                                  </span>
-                                )}
-                              </td>
-                              <td className="px-2 py-1.5">
-                                <span
-                                  className={`whitespace-nowrap rounded-sm px-2 py-1 text-xs font-medium ${
-                                    photo.metadata.status === "COMPLETE"
-                                      ? "bg-emerald-100 text-emerald-800"
-                                      : "bg-amber-100 text-amber-800"
-                                  }`}
-                                >
-                                  {statusLabel(photo.metadata.status)}
-                                </span>
-                              </td>
-                              <td className="px-2 py-1 text-center">
-                                <button
-                                  type="button"
-                                  aria-label={`${photo.file.name} 삭제`}
-                                  title="사진 삭제"
-                                  className="inline-flex h-6 w-6 items-center justify-center rounded border border-slate-300 bg-white font-bold text-slate-500 hover:border-rose-300 hover:bg-rose-50 hover:text-rose-700"
-                                  onClick={() =>
-                                    removePhoto(activeGroup.id, photo.key)
-                                  }
-                                >
-                                  ×
-                                </button>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  ) : (
-                    <div className="mt-1.5 rounded-sm border border-dashed border-slate-300 bg-slate-50 px-3 py-1.5 text-center text-xs text-slate-500">
-                      준설사진을 선택하면 촬영일과 위치정보를 자동으로
-                      확인합니다.
-                    </div>
-                  )}
-                </>
-              ) : (
-                <div className="rounded-sm border border-dashed border-blue-300 bg-blue-50 px-3 py-2 text-center text-xs text-slate-600">
-                  사진 없이 아래 지도에서 준설위치를 직접 지정합니다.
-                </div>
-              )}
+                )}
+              </div>
             </section>
 
-            <section className="shrink-0 rounded-sm border border-slate-300 bg-white p-2 shadow-sm">
-              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 pb-1.5">
-                <h3 className="text-lg font-semibold text-slate-800">
+            <section className="card card-border !m-0 shrink-0 overflow-hidden !p-0">
+              <div className="card-header !m-0 flex-wrap gap-2">
+                <h3 className="text-2xl font-medium text-label">
                   위치 및 관로
                 </h3>
                 <div className="flex shrink-0 flex-wrap justify-end gap-1">
@@ -807,15 +829,6 @@ const DredgingRegisterModal = ({
                       <Button
                         type="button"
                         size="sm"
-                        className={POPUP_SECONDARY_BUTTON_CLASS}
-                        onClick={cancelLocationEditing}
-                      >
-                        취소
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        className={POPUP_PRIMARY_BUTTON_CLASS}
                         disabled={!locationDraft || activeGroup.isMatching}
                         onClick={() => {
                           void applyLocationDraft();
@@ -825,12 +838,19 @@ const DredgingRegisterModal = ({
                           ? "관로 찾는 중..."
                           : "선택 위치 적용"}
                       </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        color="white"
+                        onClick={cancelLocationEditing}
+                      >
+                        취소
+                      </Button>
                     </>
                   ) : (
                     <Button
                       type="button"
                       size="sm"
-                      className={POPUP_PRIMARY_BUTTON_CLASS}
                       onClick={() => startLocationEditing(activeGroup)}
                     >
                       {activeResolvedLocation ? "위치 수정" : "위치 지정"}
@@ -838,61 +858,72 @@ const DredgingRegisterModal = ({
                   )}
                 </div>
               </div>
-
-              <div className="mt-1.5 flex min-w-0 items-start gap-2">
-                <span
-                  className={`inline-flex shrink-0 items-center rounded-full px-3 py-1 text-xs font-semibold ${
-                    hasUnappliedLocationDraft
-                      ? "bg-blue-100 text-blue-800"
-                      : activeGroup.manualLocation
-                        ? "bg-violet-100 text-violet-800"
-                        : activeResolvedLocation
-                          ? "bg-emerald-100 text-emerald-800"
-                          : "bg-amber-100 text-amber-800"
-                  }`}
-                >
-                  {hasUnappliedLocationDraft
-                    ? "새 위치 선택됨"
-                    : activeGroup.manualLocation
-                      ? "지도 지정 위치"
-                      : activeResolvedLocation
-                        ? "사진 GPS 위치"
-                        : "위치 지정 필요"}
-                </span>
-
-                <div className="min-w-0 flex-1">
-                  <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
-                    <strong className="text-sm text-slate-800">
-                      자동 연결 관로 ·{" "}
-                      {activeGroup.isMatching
-                        ? "탐색 중"
-                        : hasUnappliedLocationDraft
-                          ? "재탐색 필요"
-                          : activeGroup.matchedPipe
-                            ? activeGroup.matchedPipe.fcltMngNo
-                            : "미연결"}
-                    </strong>
-                    <span
-                      className={`text-xs ${
-                        !hasUnappliedLocationDraft && activeGroup.matchError
-                          ? "font-medium text-rose-700"
-                          : "text-slate-500"
-                      }`}
-                    >
-                      {hasUnappliedLocationDraft
-                        ? "선택 위치를 적용하면 최근접 관로를 다시 찾습니다."
-                        : activeGroup.matchedPipe
-                          ? `${activeGroup.matchedPipe.distanceMeters.toFixed(2)}m · ${activeGroup.matchedPipe.swtrmtZoneNm || "처리구역 확인불가"}`
-                          : activeGroup.matchError ||
-                            "위치를 지정하면 50m 이내 최근접 관로를 자동으로 연결합니다."}
-                    </span>
-                  </div>
-                </div>
+              <div className="p-3">
+                <Table variant="secondary">
+                  <colgroup>
+                    <col width="22%" />
+                    <col width="78%" />
+                  </colgroup>
+                  <TableBody>
+                    <TableRow>
+                      <TableHead>위치등록</TableHead>
+                      <TableCell className="border px-4">
+                        <span
+                          className={`inline-flex rounded-sm px-2 py-1 text-sm font-medium ${
+                            hasUnappliedLocationDraft
+                              ? "bg-blue-100 text-blue-800"
+                              : activeGroup.manualLocation
+                                ? "bg-violet-100 text-violet-800"
+                                : activeResolvedLocation
+                                  ? "bg-emerald-100 text-emerald-800"
+                                  : "bg-amber-100 text-amber-800"
+                          }`}
+                        >
+                          {hasUnappliedLocationDraft
+                            ? "새 위치 선택됨"
+                            : activeGroup.manualLocation
+                              ? "지도 지정 위치"
+                              : activeResolvedLocation
+                                ? "사진 GPS 위치"
+                                : "위치 지정 필요"}
+                        </span>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHead>자동 연결 관로</TableHead>
+                      <TableCell className="border px-4">
+                        <strong className="mr-3 text-foreground">
+                          {activeGroup.isMatching
+                            ? "탐색 중"
+                            : hasUnappliedLocationDraft
+                              ? "재탐색 필요"
+                              : activeGroup.matchedPipe
+                                ? activeGroup.matchedPipe.fcltMngNo
+                                : "미연결"}
+                        </strong>
+                        <span
+                          className={
+                            !hasUnappliedLocationDraft && activeGroup.matchError
+                              ? "text-rose-700"
+                              : "text-muted-foreground"
+                          }
+                        >
+                          {hasUnappliedLocationDraft
+                            ? "선택 위치를 적용하면 최근접 관로를 다시 찾습니다."
+                            : activeGroup.matchedPipe
+                              ? `${activeGroup.matchedPipe.distanceMeters.toFixed(2)}m · ${activeGroup.matchedPipe.swtrmtZoneNm || "처리구역 확인불가"}`
+                              : activeGroup.matchError ||
+                                "위치를 지정하면 50m 이내 최근접 관로를 자동으로 연결합니다."}
+                        </span>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
               </div>
             </section>
 
             <div
-              className="min-h-5 shrink-0 rounded-sm bg-slate-50 px-3 py-1 text-xs text-slate-600"
+              className="bg-secondary/30 shrink-0 rounded-sm border border-border px-3 py-2 text-sm text-muted-foreground"
               data-testid="dredging-registration-status"
             >
               {statusMessage ||
@@ -900,8 +931,13 @@ const DredgingRegisterModal = ({
             </div>
           </aside>
 
-          <section className="flex min-h-0 min-w-0 flex-col rounded-sm border border-slate-300 bg-white p-1.5 shadow-sm">
-            <div className="min-h-[520px] flex-1">
+          <section className="card card-border !m-0 flex min-h-0 min-w-0 flex-col overflow-hidden !p-0">
+            <div className="card-header !m-0 shrink-0">
+              <h3 className="text-2xl font-medium text-label">
+                위치 선택 지도
+              </h3>
+            </div>
+            <div className="min-h-[52rem] flex-1 p-2">
               <DredgingLocationMap
                 value={
                   isEditingActiveLocation
@@ -922,7 +958,7 @@ const DredgingRegisterModal = ({
                       : "위치등록 버튼을 누른 뒤 지도에서 준설위치를 선택해주세요."
                 }
                 onChange={changeLocationDraft}
-                height="h-full min-h-[520px]"
+                height="h-full min-h-[52rem]"
               />
             </div>
           </section>
@@ -933,15 +969,13 @@ const DredgingRegisterModal = ({
 
   if (presentation === "popup") {
     return (
-      <>
-        <main className="sn-popup-page sn-dredging-register">
-          <header className="sn-popup-header">
-            <h1 className="sn-popup-title">준설결과 등록</h1>
+      <StandardPopupLayout
+        title="준설결과 등록"
+        showDefaultCancelAction={false}
+        actions={
+          <div className="flex items-center gap-2">
             <Button
               type="button"
-              color="white"
-              size="sm"
-              className="sn-popup-header-button min-w-[6.4rem] !border-white !bg-white !text-blue-700 hover:!bg-blue-50"
               disabled={isSaving}
               onClick={() => {
                 void handleSave();
@@ -950,52 +984,62 @@ const DredgingRegisterModal = ({
             >
               {isSaving ? "저장 중..." : "저장"}
             </Button>
-          </header>
-          <section className="sn-popup-section min-h-0 overflow-hidden !p-2">
-            {modalBody}
-          </section>
-        </main>
-      </>
+            <Button
+              type="button"
+              color="white"
+              disabled={isSaving}
+              onClick={() => window.close()}
+            >
+              취소
+            </Button>
+          </div>
+        }
+        bodyClassName="block overflow-y-auto"
+      >
+        {modalBody}
+      </StandardPopupLayout>
     );
   }
 
   return (
     <>
-      <UiModal
+      <Dialog
         open={open}
         onOpenChange={(nextOpen) => {
           if (!isSaving) onOpenChange(nextOpen);
         }}
-        bodyClass="!max-w-[1200px] w-[92vw]"
-        headerTitle="준설결과 업로드"
-        headerTitleClass="text-2xl font-semibold text-slate-900"
-        body={modalBody}
-        footerContent={
-          <div className="flex w-full justify-end gap-2">
-            <Button
-              type="button"
-              size="sm"
-              className={POPUP_SECONDARY_BUTTON_CLASS}
-              disabled={isSaving}
-              onClick={() => onOpenChange(false)}
-            >
-              취소
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              disabled={isSaving}
-              onClick={() => {
-                void handleSave();
-              }}
-              className={POPUP_PRIMARY_BUTTON_CLASS}
-              data-testid="dredging-save-button"
-            >
-              {isSaving ? "저장 중..." : "저장"}
-            </Button>
-          </div>
-        }
-      />
+      >
+        <DialogContent className="w-[92vw] !max-w-[1200px]">
+          <DialogHeader>
+            <DialogTitle>준설결과 업로드</DialogTitle>
+          </DialogHeader>
+          {open ? modalBody : null}
+          <DialogFooter>
+            <div className="flex w-full justify-end gap-2">
+              <Button
+                type="button"
+                size="sm"
+                disabled={isSaving}
+                onClick={() => {
+                  void handleSave();
+                }}
+                data-testid="dredging-save-button"
+              >
+                {isSaving ? "저장 중..." : "저장"}
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                color="white"
+                disabled={isSaving}
+                onClick={() => onOpenChange(false)}
+              >
+                취소
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };
diff --git a/apps/sn/app/(with-base-layout)/oper/dredging/lib/client.ts b/apps/sn/app/(with-base-layout)/oper/dredging/lib/client.ts
index 961f3f73a..f5b5b17e0 100644
--- a/apps/sn/app/(with-base-layout)/oper/dredging/lib/client.ts
+++ b/apps/sn/app/(with-base-layout)/oper/dredging/lib/client.ts
@@ -152,6 +152,7 @@ export const updateDredgingRecord = async (
     await putData(`v1/dredging/records/${encodeURIComponent(dredgingJobSn)}`, {
       dredgingDate: update.dredgingDate,
       pipeFid: update.originalPipeFid,
+      registrationMode: update.registrationMode,
       location: {
         source: update.locationSource,
         longitude: update.location.longitude,
diff --git a/apps/sn/app/(with-base-layout)/oper/dredging/lib/types.ts b/apps/sn/app/(with-base-layout)/oper/dredging/lib/types.ts
index c36d61fb0..8fbe9d815 100644
--- a/apps/sn/app/(with-base-layout)/oper/dredging/lib/types.ts
+++ b/apps/sn/app/(with-base-layout)/oper/dredging/lib/types.ts
@@ -76,6 +76,7 @@ export type DredgingRecord = {
   latitude: number;
   snappedLongitude: number;
   snappedLatitude: number;
+  registrationMode: DredgingRegistrationMode;
   registrationSource: DredgingLocationSource;
   matchDistanceMeters: number;
   isMock: boolean;
@@ -104,6 +105,7 @@ export type DredgingSaveGroup = {
 export type DredgingRecordUpdate = {
   dredgingDate: string;
   originalPipeFid: string;
+  registrationMode: DredgingRegistrationMode;
   location: GeoPoint;
   locationSource: DredgingLocationSource;
   pipe: PipeMatch;
diff --git a/apps/sn/app/(with-base-layout)/oper/dredging/page.tsx b/apps/sn/app/(with-base-layout)/oper/dredging/page.tsx
index 015731b21..0572571d6 100644
--- a/apps/sn/app/(with-base-layout)/oper/dredging/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/dredging/page.tsx
@@ -7,18 +7,31 @@
  */
 "use client";
 
-import { SelectBox } from "@common/business_components/ui";
-import { SearchDiv } from "@common/business_components/ui/search_form";
-import { UiTable } from "@common/business_components/ui/table";
-import ListDiv from "@common/business_components/ui/list_div";
-import { Button } from "@common/components/ui/button";
-import { Input } from "@common/components/ui/input";
-import { Label } from "@common/components/ui/label";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import { useAlertStore } from "@/shared/lib";
+import { StandardDataTable } from "@common/business_components";
+import {
+  Button,
+  InputDatePicker,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
 import { MS_SWAGE_PPL_CODES } from "@/app/(map-layout)/map/components/common/table";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
 import useStore from "@/store/useStore";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 
 import {
   deleteDredgingRecord,
@@ -49,9 +62,6 @@ const resolvePipeMaterialName = (value: string) => {
 const DREDGING_LOAD_ERROR_MESSAGE =
   "준설현황을 불러오지 못했습니다. 잠시 후 다시 시도해주세요.";
 const currentYear = new Date().getFullYear();
-const ACTION_BUTTON_CLASS =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white";
-
 const formatLocalDate = (date: Date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -59,6 +69,17 @@ const formatLocalDate = (date: Date) => {
   return `${year}-${month}-${day}`;
 };
 
+/** 준설일자 기본 검색기간을 오늘까지의 최근 1년으로 생성한다. */
+const createDefaultDredgingDateRange = () => {
+  const to = new Date();
+  const from = new Date(to);
+  from.setFullYear(from.getFullYear() - 1);
+  return {
+    fromDate: formatLocalDate(from),
+    toDate: formatLocalDate(to),
+  };
+};
+
 const initialRecords: DredgingRecord[] = [
   {
     id: "mock-dredging-1",
@@ -80,6 +101,7 @@ const initialRecords: DredgingRecord[] = [
     latitude: 37.4916,
     snappedLongitude: 127.48751,
     snappedLatitude: 37.49159,
+    registrationMode: "PHOTO",
     registrationSource: "EXIF",
     matchDistanceMeters: 4.28,
     isMock: true,
@@ -104,6 +126,7 @@ const initialRecords: DredgingRecord[] = [
     latitude: 37.4954,
     snappedLongitude: 126.88741,
     snappedLatitude: 37.49539,
+    registrationMode: "MANUAL",
     registrationSource: "MANUAL",
     matchDistanceMeters: 8.15,
     isMock: true,
@@ -132,6 +155,11 @@ const buildDredgingPopupParams = (record: DredgingRecord) => ({
   latitude: record.latitude,
   snappedLongitude: record.snappedLongitude,
   snappedLatitude: record.snappedLatitude,
+  registrationMode:
+    record.registrationMode ??
+    (record.photoCount === 0 && record.registrationSource === "MANUAL"
+      ? "MANUAL"
+      : "PHOTO"),
   registrationSource: record.registrationSource,
   matchDistanceMeters: record.matchDistanceMeters,
   isMock: record.isMock,
@@ -141,7 +169,13 @@ type TableRow = Record<string, unknown> & {
   recordIds: string[];
 };
 
-const municipalityHeadlist = [
+type TableHeadDefinition = {
+  id: string;
+  title: string;
+  align?: "left" | "center" | "right";
+};
+
+const municipalityHeadlist: TableHeadDefinition[] = [
   { id: "rowNumber", title: "순번" },
   { id: "ctpv", title: "시도" },
   { id: "sgg", title: "시군구" },
@@ -157,7 +191,7 @@ const municipalityHeadlist = [
   { id: "registeredDate", title: "등록일자" },
 ];
 
-const diameterHeadlist = [
+const diameterHeadlist: TableHeadDefinition[] = [
   { id: "ctpv", title: "시도" },
   { id: "totalLengthKm", title: "관로연장(km)", align: "right" },
   { id: "diameter450", title: "450 이하", align: "right" },
@@ -169,7 +203,7 @@ const diameterHeadlist = [
   { id: "diameter1500", title: "1500 이상", align: "right" },
 ];
 
-const elapsedYearHeadlist = [
+const elapsedYearHeadlist: TableHeadDefinition[] = [
   { id: "ctpv", title: "시도" },
   { id: "totalLengthKm", title: "관로연장(km)", align: "right" },
   { id: "under10", title: "10년 미만", align: "right" },
@@ -181,6 +215,14 @@ const elapsedYearHeadlist = [
 
 const roundKm = (meters: number) => Number((meters / 1000).toFixed(3));
 
+const parseLocalDate = (value: string) => new Date(`${value}T00:00:00`);
+
+const formatTableValue = (value: unknown) => {
+  if (typeof value === "number") return value.toLocaleString("ko-KR");
+  if (value === null || value === undefined) return "";
+  return String(value);
+};
+
 const groupByCtpv = (records: DredgingRecord[]) => {
   const groups = new Map<string, DredgingRecord[]>();
   for (const record of records) {
@@ -266,15 +308,24 @@ const buildElapsedYearRows = (records: DredgingRecord[]): TableRow[] =>
   });
 
 const Page = () => {
-  const today = formatLocalDate(new Date());
+  const alert = useAlertStore((state) => state.setMessage);
+  const { confirm } = useConfirm();
+  const defaultDredgingDateRange = useMemo(createDefaultDredgingDateRange, []);
   const {
     ctpv: ctpvRegionOptions,
     sgg: sggRegionOptions,
     fetchCtpv,
     fetchSgg,
   } = useStore();
-  const [fromDate, setFromDate] = useState(`${currentYear}-01-01`);
-  const [toDate, setToDate] = useState(today);
+  const [fromDate, setFromDate] = useState(defaultDredgingDateRange.fromDate);
+  const [toDate, setToDate] = useState(defaultDredgingDateRange.toDate);
+  // 날짜 입력 중에는 기존 결과를 유지하고 조회·초기화 시점에만 적용 기간을 갱신한다.
+  const [appliedFromDate, setAppliedFromDate] = useState(
+    defaultDredgingDateRange.fromDate,
+  );
+  const [appliedToDate, setAppliedToDate] = useState(
+    defaultDredgingDateRange.toDate,
+  );
   // 선택 UI는 행정구역 코드를, 준설 조회 API는 행정구역 명칭을 사용한다.
   const [ctpvCd, setCtpvCd] = useState("0");
   const [sggCd, setSggCd] = useState("0");
@@ -318,8 +369,8 @@ const Page = () => {
       setLoadError(null);
       try {
         const response = await fetchDredgingRecords({
-          fromDate,
-          toDate,
+          fromDate: appliedFromDate,
+          toDate: appliedToDate,
           ctpv: appliedCtpvName,
           sgg: appliedSggName,
           size: 2000,
@@ -346,12 +397,19 @@ const Page = () => {
     () =>
       records.filter(
         (record) =>
-          record.dredgingDate >= fromDate &&
-          record.dredgingDate <= toDate &&
+          record.dredgingDate >= appliedFromDate &&
+          record.dredgingDate <= appliedToDate &&
           (!appliedCtpvName || record.ctpv === appliedCtpvName) &&
           (!appliedSggName || record.sgg === appliedSggName),
       ),
-    [records, fromDate, toDate, appliedCtpvName, appliedSggName, searchVersion],
+    [
+      records,
+      appliedFromDate,
+      appliedToDate,
+      appliedCtpvName,
+      appliedSggName,
+      searchVersion,
+    ],
   );
 
   const tableRows = useMemo<TableRow[]>(() => {
@@ -360,7 +418,7 @@ const Page = () => {
       return buildElapsedYearRows(filteredRecords);
 
     return filteredRecords.map((record, index) => ({
-      rowNumber: index + 1,
+      rowNumber: filteredRecords.length - index,
       ...record,
       pipeLengthM: Number(record.pipeLengthM.toFixed(2)),
       pipeMaterial: resolvePipeMaterialName(record.pipeMaterial),
@@ -388,9 +446,6 @@ const Page = () => {
     : [];
   const canManageSelectedRecord =
     viewType === "MUNICIPALITY" && selectedRecord !== null && !isMutating;
-  // 관경별·경과년도별 행은 여러 관로를 합산한 집계 행이므로 단일 관로 상세를 열지 않는다.
-  const canViewSelectedRecord =
-    viewType === "MUNICIPALITY" && selectedRecord !== null;
 
   const headlist =
     viewType === "MUNICIPALITY"
@@ -399,12 +454,49 @@ const Page = () => {
         ? diameterHeadlist
         : elapsedYearHeadlist;
 
-  const title =
-    viewType === "MUNICIPALITY"
-      ? "지자체별 준설현황"
-      : viewType === "DIAMETER"
-        ? "관경별 준설현황"
-        : "경과년도별 준설현황";
+  const title = "준설 목록";
+
+  const columns = useMemo<ColumnDef<TableRow>[]>(
+    () =>
+      headlist.map((head) => ({
+        id: head.id,
+        accessorFn: (row) => row[head.id],
+        header: head.title,
+        cell: ({ getValue }) => formatTableValue(getValue()),
+        meta: {
+          align: head.align ?? "center",
+        },
+      })),
+    [headlist],
+  );
+  const pagination: PaginationState = {
+    pageIndex: currentPage - 1,
+    pageSize: PAGE_SIZE,
+  };
+  const selectedTableRowId = pageRows
+    .find(
+      (row) =>
+        selectedRecordId !== null && row.recordIds.includes(selectedRecordId),
+    )
+    ?.recordIds.join("|");
+  const table = useReactTable({
+    data: pageRows,
+    columns,
+    state: {
+      pagination,
+      rowSelection: selectedTableRowId ? { [selectedTableRowId]: true } : {},
+    },
+    rowCount: tableRows.length,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.recordIds.join("|"),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      setCurrentPage(next.pageIndex + 1);
+      setSelectedRecordId(null);
+    },
+  });
 
   const handleSearch = () => {
     if (fromDate > toDate) {
@@ -413,11 +505,30 @@ const Page = () => {
     }
     setCurrentPage(1);
     setSelectedRecordId(null);
+    setAppliedFromDate(fromDate);
+    setAppliedToDate(toDate);
     setAppliedCtpvName(ctpvName);
     setAppliedSggName(sggName);
     setSearchVersion((version) => version + 1);
   };
 
+  const handleReset = () => {
+    setFromDate(defaultDredgingDateRange.fromDate);
+    setToDate(defaultDredgingDateRange.toDate);
+    setAppliedFromDate(defaultDredgingDateRange.fromDate);
+    setAppliedToDate(defaultDredgingDateRange.toDate);
+    setViewType("MUNICIPALITY");
+    setCtpvCd("0");
+    setSggCd("0");
+    setCtpvName("");
+    setSggName("");
+    setAppliedCtpvName("");
+    setAppliedSggName("");
+    setCurrentPage(1);
+    setSelectedRecordId(null);
+    setSearchVersion((version) => version + 1);
+  };
+
   const handleDownload = async () => {
     try {
       const visibleHeads = headlist.filter((head) => head.id !== "recordIds");
@@ -475,6 +586,7 @@ const Page = () => {
         latitude: group.location.latitude,
         snappedLongitude: group.pipe.snappedLongitude,
         snappedLatitude: group.pipe.snappedLatitude,
+        registrationMode: group.registrationMode,
         registrationSource: group.locationSource,
         matchDistanceMeters: group.pipe.distanceMeters,
         isMock: group.pipe.isMock || !isDredgingBackendEnabled,
@@ -504,7 +616,7 @@ const Page = () => {
   /** 선택 행이 속한 준설작업과 연결 관로·사진 참조를 물리 삭제하고 목록을 재조회한다. */
   const handleDeleteRecord = async () => {
     if (!canManageSelectedRecord || !selectedRecord) return;
-    const confirmed = window.confirm(
+    const confirmed = await confirm(
       `선택한 준설작업 전체를 삭제하시겠습니까?\n준설일자: ${selectedRecord.dredgingDate}\n연결 관로: ${selectedJobRecords.length}건 · 등록사진: ${selectedRecord.photoCount}건`,
     );
     if (!confirmed) return;
@@ -548,23 +660,6 @@ const Page = () => {
     }
   };
 
-  /** 선택 관로의 정보·사진·위치를 하나의 최대화 WindowPopup에서 확인한다. */
-  const openDredgingDetail = () => {
-    if (!canViewSelectedRecord || !selectedRecord) return;
-
-    const popup = openWindowPopup(
-      "dredgingDetail",
-      buildDredgingPopupParams(selectedRecord),
-      { maximize: true },
-    );
-
-    if (!popup) {
-      alert(
-        "준설결과 상세 팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.",
-      );
-    }
-  };
-
   /** 등록·수정 팝업의 저장 완료 메시지를 받아 목록을 최신 상태로 갱신한다. */
   useEffect(() => {
     const handlePopupMessage = (event: MessageEvent) => {
@@ -597,144 +692,134 @@ const Page = () => {
 
   return (
     <>
-      <SearchDiv>
-        <div className="flex w-full flex-wrap items-center gap-y-3 px-5 py-4">
-          <div className="mr-8 flex items-center gap-2">
-            <Label className="whitespace-nowrap text-xl font-medium text-gray-600">
-              준설일자
-            </Label>
-            <Input
-              type="date"
-              value={fromDate}
-              max={today}
-              onChange={(event) => setFromDate(event.target.value)}
-              className="h-[3.2rem] w-[155px] text-base"
-            />
-            <span>~</span>
-            <Input
-              type="date"
-              value={toDate}
-              max={today}
-              onChange={(event) => setToDate(event.target.value)}
-              className="h-[3.2rem] w-[155px] text-base"
-            />
-          </div>
+      <LoadingOverlay isLoading={isLoading || isMutating} />
+      <div className="card card-border !mt-6">
+        <form
+          className="flex flex-col gap-6 p-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSearch();
+          }}
+        >
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="flex items-center gap-2">
+              <Label className="mr-2 whitespace-nowrap text-label">
+                준설일자
+              </Label>
+              <InputDatePicker
+                value={parseLocalDate(fromDate)}
+                onChange={(date) => date && setFromDate(formatLocalDate(date))}
+                className="w-[15.5rem]"
+              />
+              <span>~</span>
+              <InputDatePicker
+                value={parseLocalDate(toDate)}
+                onChange={(date) => date && setToDate(formatLocalDate(date))}
+                className="w-[15.5rem]"
+              />
+            </div>
 
-          <label className="mr-8 flex items-center gap-2 whitespace-nowrap text-xl font-medium text-gray-600">
-            조회구분
-            <select
-              value={viewType}
-              onChange={(event) => {
-                setViewType(event.target.value as DredgingViewType);
-                setCurrentPage(1);
-                setSelectedRecordId(null);
-              }}
-              className="h-[3.2rem] min-w-[145px] rounded-lg border border-input bg-white px-3 text-base font-normal text-slate-900"
-            >
-              <option value="MUNICIPALITY">지자체별</option>
-              <option value="DIAMETER">관경별</option>
-              <option value="ELAPSED_YEAR">경과년도별</option>
-            </select>
-          </label>
+            <div className="flex items-center gap-2">
+              <Label className="mr-2 whitespace-nowrap text-label">
+                조회구분
+              </Label>
+              <Select
+                value={viewType}
+                onValueChange={(value) => {
+                  setViewType(value as DredgingViewType);
+                  setCurrentPage(1);
+                  setSelectedRecordId(null);
+                }}
+              >
+                <SelectTrigger className="w-[14.5rem]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="MUNICIPALITY">지자체별</SelectItem>
+                  <SelectItem value="DIAMETER">관경별</SelectItem>
+                  <SelectItem value="ELAPSED_YEAR">경과년도별</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
 
-          <div className="mr-8 flex items-center">
-            <SelectBox
-              label="시도"
-              className=""
-              labelClass="w-16 whitespace-nowrap text-xl font-medium text-gray-600"
-              selectClass="w-[140px] rounded-lg bg-white"
-              selectArray={[ALL_REGION_OPTION, ...ctpvRegionOptions]}
-              value={ctpvCd}
-              onSelectValue={(value) => {
-                const nextCtpvCd = String(value);
-                setCtpvCd(nextCtpvCd);
-                setSggCd("0");
-                setCtpvName(
-                  ctpvRegionOptions.find(
-                    (option) => String(option.val) === nextCtpvCd,
-                  )?.text ?? "",
-                );
-                setSggName("");
-              }}
-            />
-          </div>
+            <div className="flex items-center gap-2">
+              <Label className="mr-2 whitespace-nowrap text-label">시도</Label>
+              <Select
+                value={ctpvCd}
+                onValueChange={(value) => {
+                  const nextCtpvCd = String(value);
+                  setCtpvCd(nextCtpvCd);
+                  setSggCd("0");
+                  setCtpvName(
+                    ctpvRegionOptions.find(
+                      (option) => String(option.val) === nextCtpvCd,
+                    )?.text ?? "",
+                  );
+                  setSggName("");
+                }}
+              >
+                <SelectTrigger className="w-[14rem]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {[ALL_REGION_OPTION, ...ctpvRegionOptions].map((option) => (
+                    <SelectItem
+                      key={String(option.val)}
+                      value={String(option.val)}
+                    >
+                      {option.text}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
 
-          <div className="mr-8 flex items-center">
-            <SelectBox
-              label="시군구"
-              className=""
-              labelClass="w-20 whitespace-nowrap text-xl font-medium text-gray-600"
-              selectClass="w-[140px] rounded-lg bg-white"
-              selectArray={[ALL_REGION_OPTION, ...availableSggOptions]}
-              value={sggCd}
-              onSelectValue={(value) => {
-                const nextSggCd = String(value);
-                setSggCd(nextSggCd);
-                setSggName(
-                  availableSggOptions.find(
-                    (option) => String(option.val) === nextSggCd,
-                  )?.text ?? "",
-                );
-              }}
-            />
-          </div>
-          <div className="ml-auto flex shrink-0 items-center gap-2">
-            <Button
-              size="sm"
-              onClick={handleSearch}
-              className={ACTION_BUTTON_CLASS}
-            >
+            <div className="flex items-center gap-2">
+              <Label className="mr-2 whitespace-nowrap text-label">
+                시군구
+              </Label>
+              <Select
+                value={sggCd}
+                onValueChange={(value) => {
+                  const nextSggCd = String(value);
+                  setSggCd(nextSggCd);
+                  setSggName(
+                    availableSggOptions.find(
+                      (option) => String(option.val) === nextSggCd,
+                    )?.text ?? "",
+                  );
+                }}
+              >
+                <SelectTrigger className="w-[14rem]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {[ALL_REGION_OPTION, ...availableSggOptions].map((option) => (
+                    <SelectItem
+                      key={String(option.val)}
+                      value={String(option.val)}
+                    >
+                      {option.text}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <Button type="submit" className="w-[7.4rem]">
               조회
             </Button>
             <Button
-              size="sm"
-              onClick={() => {
-                void handleDownload();
-              }}
-              className={ACTION_BUTTON_CLASS}
+              type="button"
+              color="white"
+              className="w-[8.8rem]"
+              onClick={handleReset}
             >
-              다운로드
-            </Button>
-            <Button
-              size="sm"
-              onClick={openDredgingRegister}
-              className={ACTION_BUTTON_CLASS}
-              data-testid="dredging-register-button"
-            >
-              등록
-            </Button>
-            <Button
-              size="sm"
-              onClick={openEditRecord}
-              className={ACTION_BUTTON_CLASS}
-              disabled={!canManageSelectedRecord}
-              data-testid="dredging-edit-button"
-            >
-              수정
-            </Button>
-            <Button
-              size="sm"
-              onClick={() => {
-                void handleDeleteRecord();
-              }}
-              className={ACTION_BUTTON_CLASS}
-              disabled={!canManageSelectedRecord}
-              data-testid="dredging-delete-button"
-            >
-              삭제
-            </Button>
-            <Button
-              size="sm"
-              className={ACTION_BUTTON_CLASS}
-              disabled={!canViewSelectedRecord}
-              onClick={openDredgingDetail}
-              data-testid="dredging-detail-button"
-            >
-              상세보기
+              초기화
             </Button>
           </div>
-        </div>
-      </SearchDiv>
+        </form>
+      </div>
 
       {loadError ? (
         <div
@@ -745,7 +830,8 @@ const Page = () => {
           <Button
             type="button"
             size="sm"
-            className="h-8 shrink-0 border border-amber-300 bg-white px-3 text-amber-800 hover:bg-amber-100"
+            color="primary"
+            className="h-8 shrink-0 px-3"
             onClick={handleSearch}
           >
             다시 시도
@@ -753,24 +839,47 @@ const Page = () => {
         </div>
       ) : null}
 
-      <ListDiv className="mt-4">
-        <UiTable
-          headName={isLoading ? `${title} (조회 중...)` : title}
-          tableData={pageRows}
-          headlist={headlist}
-          pageSize={PAGE_SIZE}
-          total={tableRows.length}
-          curPage={currentPage}
-          onPageChange={setCurrentPage}
-          cellClick={(index) => {
-            const recordId =
-              index === undefined ? undefined : pageRows[index]?.recordIds[0];
-            setSelectedRecordId(recordId ?? null);
+      <div className="mt-4 w-full min-w-0 max-w-full overflow-hidden">
+        <StandardDataTable
+          table={table}
+          title={title}
+          onRowClick={(row) => {
+            setSelectedRecordId(row.recordIds[0] ?? null);
           }}
-          resetSelection={selectedRecordId === null}
-          widthFixed={false}
+          actions={
+            <>
+              <Button type="button" onClick={() => void handleDownload()}>
+                엑셀다운로드
+              </Button>
+              <Button
+                type="button"
+                onClick={openDredgingRegister}
+                data-testid="dredging-register-button"
+              >
+                등록
+              </Button>
+              <Button
+                type="button"
+                onClick={openEditRecord}
+                disabled={!canManageSelectedRecord}
+                data-testid="dredging-edit-button"
+              >
+                수정
+              </Button>
+              <Button
+                type="button"
+                variant="destructive"
+                color="red"
+                onClick={() => void handleDeleteRecord()}
+                disabled={!canManageSelectedRecord}
+                data-testid="dredging-delete-button"
+              >
+                삭제
+              </Button>
+            </>
+          }
         />
-      </ListDiv>
+      </div>
     </>
   );
 };
diff --git a/apps/sn/app/(with-base-layout)/oper/floodPre/headMakeFloodPre.tsx b/apps/sn/app/(with-base-layout)/oper/floodPre/headMakeFloodPre.tsx
index b6cc5d249..889450b1e 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/headMakeFloodPre.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/headMakeFloodPre.tsx
@@ -10,7 +10,6 @@
  */
 import { TableHead, TableRow } from "@common/components/ui";
 
-
 export type TableUpperProps = {
   id: string;
   title: string;
@@ -23,9 +22,9 @@ export type TableUpperProps = {
   type?: string;
   selectData?: string; // type 이 seelct 일경우 selectarray 정하기 위해
   row?: number;
-  mergeCell?: boolean // 셀을 합칠경우
-  maxLength?: number
-  readonly?: boolean
+  mergeCell?: boolean; // 셀을 합칠경우
+  maxLength?: number;
+  readonly?: boolean;
 };
 type chHeadType = {
   headNm: string;
@@ -36,7 +35,7 @@ type chHeadType = {
 
 export const HeadMakeFloodPre = (
   upHeadList: TableUpperProps[],
-  makeHeadNm: chHeadType[]
+  makeHeadNm: chHeadType[],
 ) => {
   return (
     <>
@@ -46,7 +45,7 @@ export const HeadMakeFloodPre = (
           .map((head: TableUpperProps) =>
             !head.upSequnce ? (
               <TableHead
-                className={`border border-gray-600 px-2 py-1 `}
+                className="border border-border px-2 py-1"
                 rowSpan={2}
                 key={head.id}
               >
@@ -54,7 +53,7 @@ export const HeadMakeFloodPre = (
               </TableHead>
             ) : head.upSequnce === 1 ? (
               <TableHead
-                className={`border border-gray-600 px-2 py-1 `}
+                className="border border-border px-2 py-1"
                 key={head.id}
                 rowSpan={1}
                 colSpan={
@@ -63,7 +62,7 @@ export const HeadMakeFloodPre = (
               >
                 {makeHeadNm?.find((ch) => ch.headNm === head.upName)?.text}
               </TableHead>
-            ) : null
+            ) : null,
           )}
       </TableRow>
 
@@ -73,14 +72,14 @@ export const HeadMakeFloodPre = (
           .map((head: TableUpperProps) =>
             makeHeadNm?.find((ch) => ch.headNm === head.upName) ? (
               <TableHead
-                className={`border border-gray-600 px-2 py-1 `}
+                className="border border-border px-2 py-1"
                 key={head.id}
               >
                 {head.title}
               </TableHead>
-            ) : null
+            ) : null,
           )}
       </TableRow>
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/apps/sn/app/(with-base-layout)/oper/floodPre/inputTableBody.tsx b/apps/sn/app/(with-base-layout)/oper/floodPre/inputTableBody.tsx
index c064319a6..99167c20c 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/inputTableBody.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/inputTableBody.tsx
@@ -12,10 +12,9 @@
 import type { TableUpperProps } from "./headMakeFloodPre";
 import { Input, TableCell, TableRow } from "@common/components/ui";
 
-
 // 숫자입력시 , 삽입
 const formatCommaNumber = (
-  value: number | string | undefined | null
+  value: number | string | undefined | null,
 ): string => {
   if (value === undefined || value === null || value === "") return "";
   const num = Number(value);
@@ -29,7 +28,7 @@ const formatCommaNumber = (
 // onchange 텍스트를 숫자로 and ,제거
 const handleCommaNumberChange = (
   e: React.ChangeEvent<HTMLInputElement>,
-  onChange: (value: number | "") => void
+  onChange: (value: number | "") => void,
 ) => {
   const raw = e.target.value.replace(/,/g, "");
   if (!/^\d*$/.test(raw)) return;
@@ -40,7 +39,7 @@ const handleChange = (
   rowIndex: number,
   field: any,
   value: string,
-  setInputData: (data: any) => void
+  setInputData: (data: any) => void,
 ) => {
   if (Number(value) < 0 || !Number(value)) {
     value = "0";
@@ -54,7 +53,7 @@ const handleChange = (
         };
       }
       return row;
-    })
+    }),
   );
 };
 
@@ -62,11 +61,15 @@ export const InputTableBody = (
   chgRes: any[] | [],
   headList: TableUpperProps[],
   setInputData: (data: any[]) => void,
-  isEditable: boolean = true
+  isEditable: boolean = true,
 ) => {
   // mergeCell 처리용
   const getRowSpan = (data: any[], key: string, rowIndex: number) => {
-    if (rowIndex > 0 && data[rowIndex - 1][key] && String(data[rowIndex][key]).trim() === "") {
+    if (
+      rowIndex > 0 &&
+      data[rowIndex - 1][key] &&
+      String(data[rowIndex][key]).trim() === ""
+    ) {
       return 0; // 이전과 같으면 셀을 그리지 않음
     }
     let span = 1;
@@ -84,9 +87,9 @@ export const InputTableBody = (
         const isTotal = data["구분"] === 0;
 
         const bgClass = isTotal
-          ? "bg-[#d5e1eb] font-bold"
+          ? "bg-secondary font-bold"
           : isSubTotal
-            ? "bg-[#e6eef5] font-semibold"
+            ? "bg-muted font-semibold"
             : "";
 
         return (
@@ -106,7 +109,7 @@ export const InputTableBody = (
               //     <TableCell
               //       key={head.id + headIndex}
               //       colSpan={2}
-              //       className="font-bold text-center bg-[#d5e1eb]"
+              //       className="bg-secondary text-center font-bold"
               //     >
               //       총합계
               //     </TableCell>
@@ -125,7 +128,7 @@ export const InputTableBody = (
               //   return (
               //     <TableCell
               //       key={head.id + headIndex}
-              //       className="bg-[#d5e1eb] font-bold text-right"
+              //       className="bg-secondary text-right font-bold"
               //     >
               //       {Number(data[head.id])
               //         ? formatCommaNumber(data[head.id as keyof any])
@@ -141,7 +144,7 @@ export const InputTableBody = (
                   <TableCell
                     key={head.id + headIndex}
                     rowSpan={rowSpan}
-                    className={`w-36 align-middle text-center whitespace-nowrap ${bgClass}`}
+                    className={`w-36 whitespace-nowrap text-center align-middle ${bgClass}`}
                   >
                     {Number(data[head.id])
                       ? formatCommaNumber(data[head.id as keyof any])
@@ -158,15 +161,15 @@ export const InputTableBody = (
                 >
                   <Input
                     // className={`${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} !text-xl h-10 w-full`}
-                    className={`${textAlignClass} !text-xl h-10 w-full`}
+                    className={`${textAlignClass} h-10 w-full !text-xl`}
                     onChange={(e) =>
                       handleCommaNumberChange(e, (val) =>
                         handleChange(
                           dataIndex,
                           head.id,
                           String(val),
-                          setInputData
-                        )
+                          setInputData,
+                        ),
                       )
                     }
                     value={formatCommaNumber(data[head.id as keyof any]) ?? ""}
@@ -183,7 +186,7 @@ export const InputTableBody = (
                     //   ${head.id !== "utztnUsgCd" ? "text-right" : "text-center"}
                     //   !text-xl w-full h-10
                     // `}
-                    className={`${textAlignClass} !text-xl w-full h-10`}
+                    className={`${textAlignClass} h-10 w-full !text-xl`}
                   >
                     {Number(data[head.id])
                       ? formatCommaNumber(data[head.id as keyof any])
@@ -199,7 +202,7 @@ export const InputTableBody = (
         <TableRow>
           <TableCell
             colSpan={headList.length}
-            className="h-24 text-center text-gray-500"
+            className="h-24 text-center text-muted-foreground"
           >
             조회된 결과가 없습니다.
           </TableCell>
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 737d52bdf..87cc92d8b 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
@@ -1,6 +1,6 @@
 /**
  * ➡️ 경로 : 유지관리 정보 - 도시침수예방사업
- * 
+ *
  * 📄 FloodPre Page
  * 침수예방 사업 정보 등록 및 조회 페이지 컴포넌트
  *
@@ -10,167 +10,244 @@
  * - 파일 다운로드 및 삭제 기능
  * - 엑셀 데이터 테이블 모달 표시
  * - 로딩 오버레이 및 에러 핸들링 지원
- * 
+ *
  * 🔗 사용 API
  * - 도시침수예방사업 목록 조회: GET /api/v1/sbmrgPrevnt (sewerage-service)
  * - 도시침수예방사업 등록: POST /api/v1/sbmrgPrevnt (sewerage-service)
  * - 첨부파일 삭제및 Soft Delete 삭제: DELETE /api/v1/atfl/attachments/{atflId} (attach-service)
  */
-'use client'
-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 } from '@common/business_components/ui'
-import ListDiv from '@common/business_components/ui/list_div'
-import { Button, Input, Label } from '@common/components/ui'
-import { useEffect, useState } from 'react'
-import { tableHeadlist } from '..'
-import { useQuery } from "@tanstack/react-query";
-import { ENDPOINT } from "@common/components/config";
-import { getUserInfo } from "@common/components/api";
-import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
-import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
-import { SearchDatePicker } from '../components/SearchDatePicker';
-import type { UiTableSort } from '@common/business_components/ui';
+"use client";
+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 {
+  StandardDataTable,
+  getStandardRowNumber,
+} from "@common/business_components";
+import { Button, Input, Label } from "@common/components";
+import { useEffect, useMemo, useState } from "react";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import { SearchDatePicker } from "../components/SearchDatePicker";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useAlertStore } from "@/shared/lib";
 
+const PAGE_SIZE = 10;
+
+type FloodPreRow = Record<string, unknown> & {
+  rowNumber: number;
+  sbmrgPrevntBizSn: string;
+  sbmrgPrevntBizNm?: string;
+  atflId?: string;
+};
+type FloodPreSearch = {
+  fromDate: Date;
+  toDate: Date;
+  projectName: string;
+};
+
+const FLOOD_PRE_COLUMNS: Array<{
+  id: keyof FloodPreRow;
+  title: string;
+  width: number;
+}> = [
+  { id: "rowNumber", title: "순번", width: 70 },
+  { id: "sbmrgPrevntBizNm", title: "파일명", width: 260 },
+  { id: "mngYr", title: "년도", width: 90 },
+  { id: "mngQu", title: "분기", width: 90 },
+  { id: "regDt", title: "등록 일자", width: 120 },
+  { id: "rgtrNm", title: "등록자", width: 120 },
+];
 
 const Page = () => {
   const AUTH = useCookieAuth();
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
 
   // 조회조건
-  const [fromDate, setFromDate] = useState(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date })
-  const [toDate, setToDate] = useState(new Date())
-  const [usr, setUsr] = useState('')
-  const [pjNm, setpjNm] = useState('')
+  const [fromDate, setFromDate] = useState(() => {
+    const date = new Date();
+    date.setDate(date.getDate() - 7);
+    return date;
+  });
+  const [toDate, setToDate] = useState(new Date());
+  const [usr, setUsr] = useState("");
+  const [pjNm, setpjNm] = useState("");
   // 파일업로드 관련 상태
-  const [fileNm, setFileNm] = useState('') //파일명
-  const [atflId, setAtflId] = useState('') //파일 ID
-  const [sbmrgPrevntBizSn, setSbmrgPrevntBizSn] = useState('') //파일 일련번호
-  const [tableData, setTableData] = useState<any>([{}]) //테이블 데이터
-  const [curPage, setCurPage] = useState(1) //현재 페이지
-  const [totalData, setTotalData] = useState(0) //총 데이터 수
-  const [isLoading, setIsLoading] = useState(true) //로딩 상태
-  const [resetSelection, setResetSelection] = useState<boolean>(false); // 선택 초기화 상태
-  const [isResetPage, setIsResetPage] = useState<boolean>(false);
-  const [sort, setSort] = useState<UiTableSort>();
-
-  const { data: userInfo } = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS],
-    queryFn: () => getUserInfo(),
-    enabled: true,
+  const [fileNm, setFileNm] = useState(""); //파일명
+  const [atflId, setAtflId] = useState(""); //파일 ID
+  const [sbmrgPrevntBizSn, setSbmrgPrevntBizSn] = useState(""); //파일 일련번호
+  const [tableData, setTableData] = useState<FloodPreRow[]>([]); //테이블 데이터
+  const [curPage, setCurPage] = useState(1); //현재 페이지
+  const [totalData, setTotalData] = useState(0); //총 데이터 수
+  const [isLoading, setIsLoading] = useState(true); //로딩 상태
+  const columns = useMemo<ColumnDef<FloodPreRow>[]>(
+    () =>
+      FLOOD_PRE_COLUMNS.map((column) => ({
+        id: String(column.id),
+        accessorFn: (row) => row[column.id],
+        header: column.title,
+        cell: ({ getValue }) => String(getValue() ?? ""),
+        meta: { width: column.width, align: "center" },
+      })),
+    [],
+  );
+  const pagination: PaginationState = {
+    pageIndex: curPage - 1,
+    pageSize: PAGE_SIZE,
+  };
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    state: { pagination },
+    rowCount: totalData,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => String(row.sbmrgPrevntBizSn),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      setCurPage(next.pageIndex + 1);
+    },
   });
 
   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;
+      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, sort]);
+  }, [fromDate, toDate, pjNm, curPage]);
 
   // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
-    setIsResetPage(false);
     fetchData();
   }, [curPage]);
 
   // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
   const handleSearch: () => Promise<void> = async () => {
-    setIsResetPage(true); // 페이지를 초기화
     if (curPage === 1) {
-      await fetchData(1, sort);
+      await fetchData(1);
       return;
     }
     setCurPage(1); // 페이지 변경 effect에서 한 번만 조회
   };
 
-  // 조회
-  const fetchData = async (page = curPage, activeSort = sort) => {
-    setIsLoading(true)
-    setResetSelection(true);
-    // searchCmmnCd('SITEKNDCD')
-    try {
-      const { data, total } = await searchData('v1/sbmrgPrevnt', {
-        fromRegDt: formatDate(fromDate),
-        toRegDt: formatDate(toDate),
-        sbmrgPrevntBizNm: pjNm,
-        auth: AUTH,
-        page: page - 1,
-        size: '10',
-        sort: activeSort ? `${activeSort.key},${activeSort.direction}` : undefined,
-      })
-      // 일련번호를 추가한 데이터로 변환 (전체 데이터 기준으로 일련번호 계산)
-      const descendingSequence =
-        activeSort?.key === 'sbmrgPrevntBizSn' && activeSort.direction === 'desc';
-      const dataWithRowNumber = (data || []).map((item: any, index: number) => ({
-        ...item,
-        rowNumber: descendingSequence
-          ? total - ((page - 1) * 10 + index)
-          : (page - 1) * 10 + index + 1,
-      }));
-      setTableData(dataWithRowNumber)
-      setTotalData(total)
-    }
-    catch (error) { console.error('Error fetching data:', error) }
-    finally {
-      setFileNm('');
-      setAtflId('');
-      setSbmrgPrevntBizSn('');
-      setIsLoading(false);
-      setResetSelection(false);
-    }
-  }
-
-  const handleSortChange = (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setIsResetPage(true);
-    setResetSelection(true);
-    if (curPage === 1) {
-      void fetchData(1, nextSort);
+  // 검색조건을 초기값으로 되돌리고 첫 페이지부터 다시 조회한다.
+  const handleReset = async () => {
+    const nextFromDate = new Date();
+    nextFromDate.setDate(nextFromDate.getDate() - 7);
+    const nextToDate = new Date();
+    setFromDate(nextFromDate);
+    setToDate(nextToDate);
+    setUsr("");
+    setpjNm("");
+    if (curPage !== 1) {
+      setCurPage(1);
       return;
     }
-    setCurPage(1);
+    await fetchData(1, {
+      fromDate: nextFromDate,
+      toDate: nextToDate,
+      projectName: "",
+    });
+  };
+
+  // 조회
+  const fetchData = async (
+    page = curPage,
+    condition: FloodPreSearch = {
+      fromDate,
+      toDate,
+      projectName: pjNm,
+    },
+  ) => {
+    setIsLoading(true);
+    // searchCmmnCd('SITEKNDCD')
+    try {
+      const { data, total } = await searchData("v1/sbmrgPrevnt", {
+        fromRegDt: formatDate(condition.fromDate),
+        toRegDt: formatDate(condition.toDate),
+        sbmrgPrevntBizNm: condition.projectName,
+        auth: AUTH,
+        page: page - 1,
+        size: String(PAGE_SIZE),
+        sort: "sbmrgPrevntBizSn,desc",
+      });
+      // 일련번호를 추가한 데이터로 변환 (전체 데이터 기준으로 일련번호 계산)
+      const dataWithRowNumber = (data || []).map(
+        (item: any, index: number) => ({
+          ...item,
+          rowNumber: getStandardRowNumber({
+            total,
+            rowIndex: index,
+            pageIndex: page - 1,
+            pageSize: PAGE_SIZE,
+          }),
+        }),
+      );
+      setTableData(dataWithRowNumber);
+      setTotalData(total);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    } finally {
+      setFileNm("");
+      setAtflId("");
+      setSbmrgPrevntBizSn("");
+      setIsLoading(false);
+    }
   };
 
   // 파일 다운로드
   const isChckFile = () => {
-    if (fileNm === '' || fileNm === undefined) {
-      alert('파일을 선택해주세요')
-      return false
+    if (fileNm === "" || fileNm === undefined) {
+      alert("파일을 선택해주세요");
+      return false;
     }
     handleDownload(`/attach-service/api/v1/download/${atflId}`, fileNm);
-  }
+  };
 
   // 선택 파일 삭제
   const isDeleteFile = async () => {
-    if (sbmrgPrevntBizSn === '' || sbmrgPrevntBizSn === undefined) {
-      alert('삭제할 파일을 선택해주세요')
-      return false
+    if (sbmrgPrevntBizSn === "" || sbmrgPrevntBizSn === undefined) {
+      alert("삭제할 파일을 선택해주세요");
+      return false;
     }
-    const data = await deleteData(`/attach-service/api/v1/atfl/attachments/${atflId}`)
+    if (!(await confirm("삭제하시겠습니까?"))) return false;
+    const data = await deleteData(
+      `/attach-service/api/v1/atfl/attachments/${atflId}`,
+    );
     if (data) {
-      const delData = await deleteData(`v1/sbmrgPrevnt/${sbmrgPrevntBizSn}`)
+      const delData = await deleteData(`v1/sbmrgPrevnt/${sbmrgPrevntBizSn}`);
       if (delData.status === 200) {
-        alert('삭제되었습니다.')
-        fetchData()
+        alert("삭제되었습니다.", () => void fetchData());
       }
+    } else {
+      alert("삭제에 실패했습니다.");
     }
-    else {
-      alert('삭제에 실패했습니다.')
-    }
-  }
+  };
 
   // 등록 버튼 클릭 핸들러
   const handleRegisterClick = () => {
     const popupWindow = openWindowPopup("floodPreUpload");
     if (!popupWindow) {
-      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
     }
-  }
+  };
 
   const handleTablePopupOpen = (fileName: string, id: string) => {
     const popupWindow = openWindowPopup("floodPreTable", {
@@ -180,101 +257,100 @@ const Page = () => {
     });
 
     if (!popupWindow) {
-      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
     }
-  }
-
+  };
 
   return (
     <>
       <LoadingOverlay isLoading={isLoading ?? false} />
-      <SearchDiv>
-        <SearchFormLeft>
-          <div className='flex items-center gap-5'>
-            <div className='flex items-center gap-2'>
-              <Label className="w-20 text-xl text-gray-600">등록기간</Label>
-              <SearchDatePicker
-                selected={fromDate}
-                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}
-                disabled={{ after: new Date() }}
-              />
-              <span>~</span>
-              <SearchDatePicker
-                selected={toDate}
-                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }}
-                disabled={{ after: new Date() }}
-              />
-            </div>
-            <div className='flex items-center'>
-              <Label className="w-20 text-xl text-gray-600">등록자</Label>
-              <Input
-                className='w-[100px]'
-                value={usr}
-                onChange={(e) => setUsr(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault(); // Enter 키 기본 동작 방지
-                    handleSearch();
-                  }
-                }}
-              />
-            </div>
-            <div className='flex items-center'>
-              <Label className="w-20 text-xl text-gray-600">파일명</Label>
-              <Input
-                className='w-[100px]'
-                value={pjNm}
-                onChange={(e) => setpjNm(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault(); // Enter 키 기본 동작 방지
-                    handleSearch();
-                  }
-                }}
-              />
-            </div>
-          </div>
-        </SearchFormLeft>
-        <SearchFormRight>
-          <div className='flex items-center gap-5'>
-            <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={async () => await handleSearch()} >조회</Button>
-            <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={handleRegisterClick} >등록</Button>
-          </div>
-        </SearchFormRight>
-      </SearchDiv>
-      <ListDiv className="mt-4">
-        <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-medium">사업정보 등록현황</h3>
-          <div>
-            <Button className="px-4 py-2 !mr-[1.2rem] px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={isChckFile} >파일 다운로드</Button>
-            <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile} >삭제</Button>
-          </div>
-        </div>
-        <UiTable
-          headName=''
-          tableData={tableData}
-          headlist={tableHeadlist}
-          pageSize={10}
-          total={totalData}
-          cellClick={(index) => {
-            if (index != null) {
-              const fileName = tableData[index]?.sbmrgPrevntBizNm ?? "";
-              const id = tableData[index]?.atflId ?? '';
-              setFileNm(fileName);
-              setAtflId(id);
-              setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn);
-              handleTablePopupOpen(fileName, id);
-            }
+      <div className="card card-border !mt-6">
+        <form
+          className="flex flex-wrap items-center gap-2 p-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void handleSearch();
           }}
-          onPageChange={setCurPage}
-          resetSelection={resetSelection}
-          resetPageNo={isResetPage}
-          sort={sort}
-          onSortChange={handleSortChange}
-        />
-      </ListDiv>
-    </>
-  )
-}
+        >
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">
+              등록기간
+            </Label>
+            <SearchDatePicker
+              selected={fromDate}
+              onSelect={(date: Date | undefined) => {
+                if (date) setFromDate(date);
+              }}
+              disabled={{ after: new Date() }}
+            />
+            <span>~</span>
+            <SearchDatePicker
+              selected={toDate}
+              onSelect={(date: Date | undefined) => {
+                if (date) setToDate(date);
+              }}
+              disabled={{ after: new Date() }}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">등록자</Label>
+            <Input
+              className="w-[12rem] !text-[1.3rem]"
+              value={usr}
+              onChange={(event) => setUsr(event.target.value)}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">파일명</Label>
+            <Input
+              className="w-[18rem] !text-[1.3rem]"
+              value={pjNm}
+              onChange={(event) => setpjNm(event.target.value)}
+            />
+          </div>
+          <Button type="submit" className="w-[7.4rem]">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="w-[8.8rem]"
+            onClick={() => void handleReset()}
+          >
+            초기화
+          </Button>
+        </form>
+      </div>
 
-export default Page
+      <div className="mt-4 w-full min-w-0 max-w-full overflow-hidden">
+        <StandardDataTable
+          table={table}
+          title="도시침수예방사업 목록"
+          onRowClick={(row) => {
+            const fileName = String(row.sbmrgPrevntBizNm ?? "");
+            const id = String(row.atflId ?? "");
+            setFileNm(fileName);
+            setAtflId(id);
+            setSbmrgPrevntBizSn(String(row.sbmrgPrevntBizSn ?? ""));
+            handleTablePopupOpen(fileName, id);
+          }}
+          actions={
+            <>
+              <Button type="button" onClick={isChckFile}>
+                엑셀다운로드
+              </Button>
+              <Button type="button" onClick={handleRegisterClick}>
+                등록
+              </Button>
+              <Button type="button" color="red" onClick={isDeleteFile}>
+                삭제
+              </Button>
+            </>
+          }
+        />
+      </div>
+    </>
+  );
+};
+
+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 6edb4c1be..208dfad41 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
@@ -1,291 +1,292 @@
 /**
- * 📄 Table Modal
- * 침수예방 엑셀 데이터 테이블 모달 컴포넌트
+ * 침수예방 엑셀 데이터 테이블 팝업
  *
- * - 엑셀 파일 다운로드 및 특정 시트 파싱 기능
- * - 탭 기반 테이블 표시 (관리SHEET, 운영관리현황 점검결과)
- * - 데이터 필터링 및 빈 행 제거 처리
- * - 로딩 오버레이 및 에러 핸들링 지원
- * - XLSX 라이브러리를 통한 엑셀 데이터 변환
- * - 테이블 헤더 및 데이터 동적 생성
- * 
- * 🔗 사용 API
- * - 첨부파일 다운로드(파일ID): GET /attach-service/api/v1/download/{atflId} (attach-service)
+ * 첨부 엑셀의 관리SHEET와 운영관리현황 점검결과를 읽어 공통 표준
+ * 테이블로 표시한다. 원본 엑셀의 열 순서와 값은 그대로 유지한다.
  */
-'use client'
-import { useState, useEffect, useMemo } 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 type { UiTableSort } from '@common/business_components/ui';
-import { makeSortableHeaders, sortLocalTableRows } from '../tableSort';
-// import { Table, TableBody, TableHeader } from "@common/components/ui";
-// import { HeadMakeFloodPre } from './headMakeFloodPre';
-// import { InputTableBody } from './inputTableBody';
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  type ColumnDef,
+} from "@tanstack/react-table";
+import * as XLSX from "xlsx";
+
+import { getBlobData } from "@/components/lib/api";
+import { useAlertStore } from "@/shared/lib";
+import { StandardDataTable } from "@common/business_components";
+import { UITab } from "@common/business_components/ui";
 
 const TABS = [
   { val: "management", text: "관리SHEET" },
-  { val: "Inspection results", text: "운영관리현황 점검결과" },
+  { val: "inspection-results", text: "운영관리현황 점검결과" },
 ];
 
+const PAGE_SIZE = 10;
+
+type ExcelTableHeader = {
+  id: string;
+  title: string;
+};
+
+type ExcelTableRow = Record<string, unknown>;
+
 interface TableModalProps {
   fileNm: string;
   atflId: string;
 }
 
-const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
+function normalizeHeaderTitle(value: unknown) {
+  const title = String(value).replace(/\r\n/g, "\n");
+  return /^no$/i.test(title.trim()) ? "순번" : title;
+}
 
-  const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "management");
-  const [managementTableHeader, setManagementTableHeader] = useState<{ id: string; title: string }[]>([]) //테이블 헤더
-  const [managementTableData, setManagementTableData] = useState<any>([{}]) //테이블 데이터
-  const [resultTableHeader, setResultTableHeader] = useState<{ id: string; title: string, mergeCell?: boolean }[]>([]) //테이블 헤더
-  const [resultTableData, setResultTableData] = useState<any>([{}]) //테이블 데이터
-  const [isLoading, setIsLoading] = useState(false) //로딩 상태
-  const [managementSort, setManagementSort] = useState<UiTableSort>();
-  const [resultSort, setResultSort] = useState<UiTableSort>();
+function createColumns(
+  headers: ExcelTableHeader[],
+): ColumnDef<ExcelTableRow>[] {
+  return headers.map((header) => ({
+    id: header.id,
+    accessorFn: (row) => row[header.id],
+    header: header.title,
+    cell: ({ getValue }) => String(getValue() ?? "-"),
+    size: 140,
+  }));
+}
 
-  const sortedManagementTableData = useMemo(
-    () => sortLocalTableRows(managementTableData, managementSort),
-    [managementSort, managementTableData],
-  );
-  const sortedResultTableData = useMemo(
-    () => sortLocalTableRows(resultTableData, resultSort),
-    [resultSort, resultTableData],
-  );
+function filterEmptyRows(data: ExcelTableRow[]) {
+  return data
+    .filter((row) =>
+      Object.entries(row).some(([key, value]) => {
+        const match = key.match(/^__EMPTY_(\d+)$/);
+        if (!match || parseInt(match[1] ?? "", 10) < 2) return false;
 
-  useEffect(() => {
-    isChckFile();
-  }, []);
+        return (
+          value !== undefined &&
+          value !== null &&
+          value !== "" &&
+          value !== "-" &&
+          String(value).trim() !== ""
+        );
+      }),
+    )
+    .map((row) => {
+      const processedRow = { ...row };
+      const keys = Object.keys(processedRow);
 
-  // 파일 다운로드
-  const isChckFile = async () => {
-    setIsLoading(true);
-    try {
-      if (fileNm === '' || fileNm === undefined) {
-        alert('파일을 선택해주세요')
-        setIsLoading(false);
-        return false
+      keys.forEach((key, keyIndex) => {
+        if (keyIndex === keys.length - 1) return;
+
+        const value = processedRow[key];
+        if (
+          value === undefined ||
+          value === null ||
+          value === "" ||
+          String(value).trim() === ""
+        ) {
+          processedRow[key] = "-";
+        }
+      });
+
+      return processedRow;
+    });
+}
+
+function filePickedSelectedSheets(
+  file: File,
+  headerNum: number = 0,
+  sheetNames: string[],
+): Promise<Record<string, ExcelTableRow[]>> {
+  const reader = new FileReader();
+
+  return new Promise((resolve, reject) => {
+    reader.onload = (event) => {
+      const data = event.target?.result;
+      if (!data) {
+        reject(new Error("Failed to read file"));
+        return;
       }
 
-      if (atflId === '' || atflId === undefined) {
-        alert('첨부파일 ID가 없어 파일을 불러올 수 없습니다.');
-        setIsLoading(false);
-        return false;
-      }
+      const workbook = XLSX.read(data, { type: "binary", cellDates: true });
+      const result: Record<string, ExcelTableRow[]> = {};
 
-      const blob = await getBlobData(`/attach-service/api/v1/download/${atflId}`);
+      sheetNames.forEach((targetSheetName) => {
+        const sheetName = workbook.SheetNames.find(
+          (name) => name.toLowerCase() === targetSheetName.toLowerCase(),
+        );
+        const sheet = sheetName ? workbook.Sheets[sheetName] : undefined;
 
-      const file = new File([blob], fileNm, {
-        type: blob.type || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-      });
-
-      const targetSheets = ['관리SHEET', '운영관리현황 점검결과'];
-      const jsonDataBySheet = await filePickedSelectedSheets(file, 0, targetSheets);
-
-      // 관리 SHEET
-      const managementHeader = jsonDataBySheet['관리SHEET']?.[7] || [];
-      const filteredManagementHeader = Object.entries(managementHeader)
-        .filter(([key, value]) => {
-          const match = key.match(/^__EMPTY_(\d+)$/);
-          if (match) {
-            const index = parseInt(match[1] ?? '', 10);
-            return (0 < index && index < 47) || (73 < index);
-          }
-          return false;
-        })
-        .map(([key, value]) => ({
-          id: key,
-          title: String(value).replace(/\r\n/g, '\n')
-        }));
-
-      setManagementTableHeader(makeSortableHeaders(filteredManagementHeader));
-
-      const managementData = Array.isArray(jsonDataBySheet['관리SHEET'])
-        ? jsonDataBySheet['관리SHEET'].slice(8)
-        : [];
-      const filteredManagementData = filterEmptyRows(managementData);
-      setManagementTableData(filteredManagementData);
-
-      // 운영관리현황 점검결과
-      const resultHeader = jsonDataBySheet['운영관리현황 점검결과']?.[2] || [];
-      const dynamicResultHeader = Object.entries(resultHeader)
-        .map(([key, value]) => ({
-          id: key,
-          title: String(value).replace(/\r\n/g, '\n'),
-          mergeCell: false,
-          ...(key === '__EMPTY_3' && { mergeCell: true }) // __EMPTY_3인 경우 mergeCell: true 추가
-        }));
-      dynamicResultHeader.splice(1, 0, {
-        id: "__EMPTY_2",
-        title: '',
-        mergeCell: false
-      });
-      setResultTableHeader(makeSortableHeaders(dynamicResultHeader));
-
-      const resultData = Array.isArray(jsonDataBySheet['운영관리현황 점검결과'])
-        ? jsonDataBySheet['운영관리현황 점검결과'].slice(3)
-        : [];
-      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 {
-      setIsLoading(false);
-    }
-  }
-
-  function filterEmptyRows(data: any[]) {
-    return data
-      .filter(row => {
-        return Object.entries(row).some(([key, value]) => {
-          const match = key.match(/^__EMPTY_(\d+)$/);
-          if (!match || parseInt(match[1] ?? '', 10) < 2) return false;
-
-          return value !== undefined &&
-            value !== null &&
-            value !== '' &&
-            value !== '-' &&
-            String(value).trim() !== '';
-        });
-      })
-      .map((row) => {
-        const processedRow = { ...row };
-        const keys = Object.keys(processedRow);
-
-        keys.forEach((key, keyIndex) => {
-          // 마지막 속성(비고)이 아닌 경우에만 빈 값을 '-'으로 변경
-          if (keyIndex !== keys.length - 1) {
-            const value = processedRow[key];
-            if (value === undefined ||
-              value === null ||
-              value === '' ||
-              String(value).trim() === '') {
-              processedRow[key] = '-';
-            }
-          }
-        });
-
-        return processedRow;
-      });
-  };
-
-  // 특정 시트만 선택적으로 JSON으로 변환하는 함수
-  function filePickedSelectedSheets(file: File, headerNum: number = 0, sheetNames: string[]): Promise<Record<string, any[]>> {
-    const reader = new FileReader();
-
-    return new Promise((resolve, reject) => {
-      reader.onload = function (e) {
-        const data = e.target?.result;
-        if (!data) {
-          console.error("Failed to read file: e.target.result is null");
-          reject(new Error("Failed to read file"));
+        if (!sheet) {
+          console.warn(`Sheet "${targetSheetName}" not found in workbook`);
+          result[targetSheetName] = [];
           return;
         }
 
-        // Excel 파일 읽기
-        const wb = XLSX.read(data, { type: 'binary', cellDates: true });
-        const result: Record<string, any[]> = {};
+        result[targetSheetName] = XLSX.utils.sheet_to_json<ExcelTableRow>(
+          sheet,
+          {
+            range: headerNum,
+            raw: false,
+          },
+        );
+      });
 
-        // 지정된 시트 이름만 찾아서 처리
-        sheetNames.forEach(targetSheetName => {
-          // 대소문자 구분 없이 시트 이름 찾기
-          const sheetName = wb.SheetNames.find(name =>
-            name.toLowerCase() === targetSheetName.toLowerCase()
-          );
+      resolve(result);
+    };
 
-          if (sheetName) {
-            const sheet = wb.Sheets[sheetName];
-            if (sheet) {
-              const jsonData = XLSX.utils.sheet_to_json(sheet, { range: headerNum, raw: false });
-              result[targetSheetName] = jsonData;
-            }
-          } else {
-            console.warn(`Sheet "${targetSheetName}" not found in workbook`);
-            result[targetSheetName] = [];
-          }
+    reader.onerror = () => reject(new Error("Error reading file"));
+    reader.readAsBinaryString(file);
+  });
+}
+
+const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
+  const alert = useAlertStore((state) => state.setMessage);
+  const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "management");
+  const [managementHeaders, setManagementHeaders] = useState<
+    ExcelTableHeader[]
+  >([]);
+  const [managementData, setManagementData] = useState<ExcelTableRow[]>([]);
+  const [resultHeaders, setResultHeaders] = useState<ExcelTableHeader[]>([]);
+  const [resultData, setResultData] = useState<ExcelTableRow[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const loadFile = async () => {
+      setIsLoading(true);
+
+      try {
+        if (!fileNm) {
+          alert("파일을 선택해주세요");
+          return;
+        }
+
+        if (!atflId) {
+          alert("첨부파일 ID가 없어 파일을 불러올 수 없습니다.");
+          return;
+        }
+
+        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",
         });
+        const jsonDataBySheet = await filePickedSelectedSheets(file, 0, [
+          "관리SHEET",
+          "운영관리현황 점검결과",
+        ]);
 
-        resolve(result);
-      };
+        const managementHeaderRow = jsonDataBySheet["관리SHEET"]?.[7] ?? {};
+        setManagementHeaders(
+          Object.entries(managementHeaderRow)
+            .filter(([key]) => {
+              const match = key.match(/^__EMPTY_(\d+)$/);
+              if (!match) return false;
 
-      reader.onerror = function () {
-        console.error("Error reading file");
-        reject(new Error("Error reading file"));
-      };
+              const index = parseInt(match[1] ?? "", 10);
+              return (index > 0 && index < 47) || index > 73;
+            })
+            .map(([key, value]) => ({
+              id: key,
+              title: normalizeHeaderTitle(value),
+            })),
+        );
+        setManagementData(
+          filterEmptyRows((jsonDataBySheet["관리SHEET"] ?? []).slice(8)),
+        );
 
-      // 파일 읽기 시작
-      reader.readAsBinaryString(file);
-    });
-  };
+        const resultHeaderRow =
+          jsonDataBySheet["운영관리현황 점검결과"]?.[2] ?? {};
+        const nextResultHeaders = Object.entries(resultHeaderRow).map(
+          ([key, value]) => ({
+            id: key,
+            title: normalizeHeaderTitle(value),
+          }),
+        );
+        nextResultHeaders.splice(1, 0, { id: "__EMPTY_2", title: "" });
+        setResultHeaders(nextResultHeaders);
+        setResultData(
+          filterEmptyRows(
+            (jsonDataBySheet["운영관리현황 점검결과"] ?? []).slice(3),
+          ),
+        );
+      } catch (error) {
+        console.error("FloodPre attachment fetch details:", {
+          atflId,
+          fileNm,
+          error,
+        });
+        alert("파일 처리 중 오류가 발생했습니다.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
+    void loadFile();
+  }, [alert, atflId, fileNm]);
+
+  const managementColumns = useMemo(
+    () => createColumns(managementHeaders),
+    [managementHeaders],
+  );
+  const resultColumns = useMemo(
+    () => createColumns(resultHeaders),
+    [resultHeaders],
+  );
+  const managementTable = useReactTable({
+    data: managementData,
+    columns: managementColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageIndex: 0, pageSize: PAGE_SIZE } },
+  });
+  const resultTable = useReactTable({
+    data: resultData,
+    columns: resultColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageIndex: 0, pageSize: PAGE_SIZE } },
+  });
+
+  const isManagementTab = activeTab === "management";
+  const activeHeaderCount = isManagementTab
+    ? managementHeaders.length
+    : resultHeaders.length;
 
   return (
-    <>
-      {/* 탭 영역 */}
+    <div className="flex min-h-0 flex-1 flex-col gap-4">
       <UITab
         defaultValue={activeTab}
         tabList={TABS.map((tab) => ({
           value: tab.val,
-          label: tab.text
+          label: tab.text,
         }))}
-        onValueChange={(value: string) => setActiveTab(value)}
+        onValueChange={setActiveTab}
       />
-      {/* 관리SHEET 탭 */}
-      {activeTab === 'management' && (
-        <div className="h-[79vh] rounded-lg border flex flex-col">
-          <div className="flex-1 min-w-[50vw] max-w-[100vw] overflow-auto">
-            <LoadingOverlay isLoading={isLoading} />
-            <div className="min-w-max">
-              <UiTable
-                headName={'관리SHEET'}
-                tableData={sortedManagementTableData}
-                headlist={managementTableHeader}
-                pageSize={10}
-                total={0}
-                cellClick={undefined}
-                onPageChange={() => { }}
-                className="whitespace-nowrap"
-                sort={managementSort}
-                onSortChange={setManagementSort}
-              />
-            </div>
-          </div>
-        </div>
+
+      {isManagementTab ? (
+        <StandardDataTable
+          table={managementTable}
+          title="관리SHEET 목록"
+          loading={isLoading}
+          scrollMode="horizontal"
+          minTableWidth={`${Math.max(activeHeaderCount * 9, 80)}rem`}
+        />
+      ) : (
+        <StandardDataTable
+          table={resultTable}
+          title="운영관리현황 점검결과 목록"
+          loading={isLoading}
+          scrollMode="horizontal"
+          minTableWidth={`${Math.max(activeHeaderCount * 9, 80)}rem`}
+        />
       )}
-      {/* 운영관리현황 점검결과 탭 */}
-      {activeTab === 'Inspection results' && (
-        <div className="h-[79vh] w-full overflow-x-hidden overflow-y-auto rounded-lg border">
-          <div className="flex-1 px-2 pb-2">
-            <LoadingOverlay isLoading={isLoading} />
-            <UiTable
-              headName={'운영관리현황 점검결과'}
-              tableData={sortedResultTableData}
-              headlist={resultTableHeader}
-              pageSize={10}
-              total={0}
-              className={"overflow-x-auto overflow-y-auto"}
-              cellClick={undefined}
-              onPageChange={() => { }}
-              sort={resultSort}
-              onSortChange={setResultSort}
-            />
-            {/* <Table variant="secondary">
-              <TableHeader className="font-bold">
-                {HeadMakeFloodPre(resultTableHeader, [])}
-              </TableHeader>
-              <TableBody>
-                {InputTableBody(resultTableData ?? [], resultTableHeader, setResultTableData, false)}
-              </TableBody>
-            </Table> */}
-          </div>
-        </div>
-      )}
-    </>
-  )
+    </div>
+  );
 };
 
 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 be3d0753f..40e707bac 100644
--- a/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
@@ -1,277 +1,331 @@
 /**
- * ➡️ 경로 : 유지관리 정보 - 노후 하수관로 정비사업
- * 
- * 📄 OldPp Page
- * 노후 하수관로 정비사업 추진현황 페이지 컴포넌트
+ * 유지관리 정보 - 노후 하수관로 정비사업 파일 목록
  *
- * - 사업 정보 등록 현황 조회 및 테이블 표시
- * - 페이징 및 검색 기능 (등록기간/등록자/파일명 기반)
- * - 파일 업로드 및 등록 기능
- * - 파일 다운로드 및 삭제 기능
- * - 엑셀 데이터 테이블 모달 표시
- * - 로딩 오버레이 및 에러 핸들링 지원
- * 
- * 🔗 사용 API
- * - 노후관로정비사업 목록 조회: GET /api/v1/dcrpPpl (sewerage-service)
- * - 노후관로정비사업 목록 등록: POST /api/v1/dcrpPpl (sewerage-service)
- * - 첨부파일 삭제및 Soft Delete 삭제: DELETE /api/v1/atfl/attachments/{atflId} (attach-service)
+ * 목록 조회, 첨부파일 다운로드·삭제, 업로드·상세 팝업 연결을 제공한다.
  */
-'use client'
-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 } from '@common/business_components/ui'
-import ListDiv from '@common/business_components/ui/list_div'
-import { Button, Input, Label } from '@common/components/ui'
-import { useEffect, useState } from 'react'
-import { tableHeadlistOldPp } from '..'
-import { useQuery } from "@tanstack/react-query";
-import { ENDPOINT } from "@common/components/config";
-import { getUserInfo } from "@common/components/api";
-import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
-import { WINDOW_POPUP_MESSAGE_TYPE } from '@/features/windowPopup/model/types';
-import { SearchDatePicker } from '../components/SearchDatePicker';
-import type { UiTableSort } from '@common/business_components/ui';
+"use client";
 
+import { useEffect, useMemo, useState } from "react";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+
+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 { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import { useAlertStore } from "@/shared/lib";
+import {
+  getStandardRowNumber,
+  StandardDataTable,
+} from "@common/business_components";
+import { Button, Input, Label } from "@common/components";
+import { SearchDatePicker } from "../components/SearchDatePicker";
+
+const PAGE_SIZE = 10;
+
+type OldPpRow = Record<string, unknown> & {
+  rowNumber: number;
+  dcrpPplMtncBizSn: string;
+  dcrpPplMtncBizNm?: string;
+  atflId?: string;
+};
+
+type OldPpSearch = {
+  fromDate: Date;
+  toDate: Date;
+  projectName: string;
+};
+
+const COLUMNS: Array<{
+  id: keyof OldPpRow;
+  title: string;
+  width: number;
+}> = [
+  { id: "rowNumber", title: "순번", width: 70 },
+  { id: "dcrpPplMtncBizNm", title: "파일명", width: 260 },
+  { id: "mngYr", title: "년도", width: 90 },
+  { id: "mngQu", title: "분기", width: 90 },
+  { id: "regDt", title: "등록 일자", width: 120 },
+  { id: "rgtrNm", title: "등록자", width: 120 },
+];
 
 const Page = () => {
-  const AUTH = useCookieAuth();
-
-  const [fromDate, setFromDate] = useState<Date>(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date });
-  const [toDate, setToDate] = useState<Date>(new Date());
-  const [usr, setUsr] = useState('')
-  const [pjNm, setpjNm] = useState('')
-  const [fileNm, setFileNm] = useState('')
-  const [atflId, setAtflId] = useState('')
-  const [dcrpPplMtncBizSn, setDcrpPplMtncBizSn] = useState('')
-  const [tableData, setTableData] = useState<any>([{}])
-  const [curPage, setCurPage] = useState(1)
-  const [totalData, setTotalData] = useState(0) //총 데이터 수
-  const [isLoading, setIsLoading] = useState(true) //로딩 상태
-  const [resetSelection, setResetSelection] = useState<boolean>(false); // 선택 초기화 상태
-  const [isResetPage, setIsResetPage] = useState<boolean>(false);
-  const [sort, setSort] = useState<UiTableSort>();
-
-  const { data: userInfo } = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS],
-    queryFn: () => getUserInfo(),
-    enabled: true,
+  const auth = useCookieAuth();
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+  const [fromDate, setFromDate] = useState(() => {
+    const date = new Date();
+    date.setDate(date.getDate() - 7);
+    return date;
   });
+  const [toDate, setToDate] = useState(new Date());
+  const [registrant, setRegistrant] = useState("");
+  const [projectName, setProjectName] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [attachmentId, setAttachmentId] = useState("");
+  const [businessId, setBusinessId] = useState("");
+  const [rows, setRows] = useState<OldPpRow[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  const columns = useMemo<ColumnDef<OldPpRow>[]>(
+    () =>
+      COLUMNS.map((column) => ({
+        id: String(column.id),
+        accessorFn: (row) => row[column.id],
+        header: column.title,
+        cell: ({ getValue }) => String(getValue() ?? ""),
+        meta: { width: column.width, align: "center" },
+      })),
+    [],
+  );
+  const pagination: PaginationState = {
+    pageIndex: page - 1,
+    pageSize: PAGE_SIZE,
+  };
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { pagination },
+    rowCount: total,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => String(row.dcrpPplMtncBizSn),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      setPage(next.pageIndex + 1);
+    },
+  });
+
+  const fetchData = async (
+    targetPage = page,
+    condition: OldPpSearch = { fromDate, toDate, projectName },
+  ) => {
+    setLoading(true);
+
+    try {
+      const result = await searchData("v1/dcrpPpl", {
+        fromRegDt: formatDate(condition.fromDate),
+        toRegDt: formatDate(condition.toDate),
+        dcrpPplMtncBizNm: condition.projectName,
+        auth,
+        page: targetPage - 1,
+        size: String(PAGE_SIZE),
+        sort: "dcrpPplMtncBizSn,desc",
+      });
+      setRows(
+        (result.data ?? []).map((item: OldPpRow, rowIndex: number) => ({
+          ...item,
+          rowNumber: getStandardRowNumber({
+            total: result.total,
+            rowIndex,
+            pageIndex: targetPage - 1,
+            pageSize: PAGE_SIZE,
+          }),
+        })),
+      );
+      setTotal(result.total);
+    } catch (error) {
+      console.error("노후 하수관로 정비사업 목록 조회 실패:", error);
+    } finally {
+      setFileName("");
+      setAttachmentId("");
+      setBusinessId("");
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void fetchData();
+  }, [page]);
 
   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();
+      if (
+        event.data?.type !== WINDOW_POPUP_MESSAGE_TYPE.OLD_PP_UPLOAD_COMPLETED
+      )
+        return;
+
+      if (page === 1) void fetchData(1);
+      else setPage(1);
     };
 
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [fromDate, toDate, pjNm, curPage, sort]);
+  }, [fromDate, page, projectName, toDate]);
 
-  // 페이지 변경 시마다 데이터 fetch
-  useEffect(() => {
-    setIsResetPage(false);
-    fetchData();
-  }, [curPage]);
-
-  // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
-  const handleSearch: () => Promise<void> = async () => {
-    setIsResetPage(true); // 페이지를 초기화
-    if (curPage === 1) {
-      await fetchData(1, sort);
+  const handleSearch = async () => {
+    if (page === 1) {
+      await fetchData(1);
       return;
     }
-    setCurPage(1); // 페이지 변경 effect에서 한 번만 조회
+    setPage(1);
   };
 
-  // 데이터 조회 
-  const fetchData = async (page = curPage, activeSort = sort) => {
-    setIsLoading(true)
-    setResetSelection(true);
-    try {
-      const { data, total } = await searchData('v1/dcrpPpl', {
-        fromRegDt: formatDate(fromDate),
-        toRegDt: formatDate(toDate),
-        dcrpPplMtncBizNm: pjNm,
-        auth: AUTH,
-        page: page - 1,
-        size: '10',
-        sort: activeSort ? `${activeSort.key},${activeSort.direction}` : undefined,
-      })
-      // 일련번호를 추가한 데이터로 변환 (전체 데이터 기준으로 일련번호 계산)
-      const descendingSequence =
-        activeSort?.key === 'dcrpPplMtncBizSn' && activeSort.direction === 'desc';
-      const dataWithRowNumber = (data || []).map((item: any, index: number) => ({
-        ...item,
-        rowNumber: descendingSequence
-          ? total - ((page - 1) * 10 + index)
-          : (page - 1) * 10 + index + 1,
-      }));
-      setTableData(dataWithRowNumber)
-      setTotalData(total)
-    } catch (error) {
-      console.error('Error fetching data:', error)
-    } finally {
-      setFileNm('');
-      setAtflId('');
-      setDcrpPplMtncBizSn('');
-      setIsLoading(false)
-      setResetSelection(false);
-    }
-  }
+  const handleReset = async () => {
+    const nextFromDate = new Date();
+    nextFromDate.setDate(nextFromDate.getDate() - 7);
+    const nextToDate = new Date();
+    setFromDate(nextFromDate);
+    setToDate(nextToDate);
+    setRegistrant("");
+    setProjectName("");
 
-  const handleSortChange = (nextSort?: UiTableSort) => {
-    setSort(nextSort);
-    setIsResetPage(true);
-    setResetSelection(true);
-    if (curPage === 1) {
-      void fetchData(1, nextSort);
+    if (page !== 1) {
+      setPage(1);
       return;
     }
-    setCurPage(1);
-  };
-
-  // 파일 다운로드
-  const isChckFile = () => {
-    if (fileNm === '' || fileNm === undefined) {
-      alert('파일을 선택해주세요')
-      return false
-    }
-    handleDownload(`/attach-service/api/v1/download/${atflId}`, fileNm)
-    return true
-  }
-
-  // 파일 삭제
-  const isDeleteFile = async () => {
-    if (dcrpPplMtncBizSn === '' || dcrpPplMtncBizSn === undefined) {
-      alert('삭제할 파일을 선택해주세요')
-      return false
-    }
-    const data = await deleteData(`/attach-service/api/v1/atfl/attachments/${atflId}`)
-    if (data) {
-      const delData = await deleteData(`v1/dcrpPpl/${dcrpPplMtncBizSn}`)
-      if (delData.status == 200) {
-        alert('삭제되었습니다.')
-        fetchData()
-      } else {
-        alert('삭제에 실패했습니다.')
-      }
-    }
-  }
-
-  // 등록 버튼 클릭 핸들러
-  const handleRegisterClick = () => {
-    const popupWindow = openWindowPopup("oldPpUpload");
-    if (!popupWindow) {
-      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
-    }
-  }
-
-  // 엑셀 데이터는 브라우저 윈도우 팝업에서 독립 조회
-  const handleTablePopupOpen = (fileName: string, id: string) => {
-    const popupWindow = openWindowPopup("oldPpTable", {
-      fileNm: fileName,
-      atflId: id,
-      sourcePath: window.location.pathname,
+    await fetchData(1, {
+      fromDate: nextFromDate,
+      toDate: nextToDate,
+      projectName: "",
     });
+  };
 
-    if (!popupWindow) {
-      alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
+  const handleFileDownload = () => {
+    if (!fileName) {
+      alert("파일을 선택해주세요");
+      return;
     }
-  }
+    handleDownload(`/attach-service/api/v1/download/${attachmentId}`, fileName);
+  };
 
+  const handleDelete = async () => {
+    if (!businessId) {
+      alert("삭제할 파일을 선택해주세요");
+      return;
+    }
+    if (!(await confirm("삭제하시겠습니까?"))) return;
+
+    const attachmentResult = await deleteData(
+      `/attach-service/api/v1/atfl/attachments/${attachmentId}`,
+    );
+    if (!attachmentResult) {
+      alert("삭제에 실패했습니다.");
+      return;
+    }
+
+    const businessResult = await deleteData(`v1/dcrpPpl/${businessId}`);
+    if (businessResult.status === 200) {
+      alert("삭제되었습니다.", () => void fetchData());
+      return;
+    }
+    alert("삭제에 실패했습니다.");
+  };
+
+  const handleRegister = () => {
+    if (!openWindowPopup("oldPpUpload")) {
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
+    }
+  };
+
+  const handleOpenDetail = (row: OldPpRow) => {
+    const nextFileName = String(row.dcrpPplMtncBizNm ?? "");
+    const nextAttachmentId = String(row.atflId ?? "");
+    setFileName(nextFileName);
+    setAttachmentId(nextAttachmentId);
+    setBusinessId(String(row.dcrpPplMtncBizSn ?? ""));
+
+    if (
+      !openWindowPopup("oldPpTable", {
+        fileNm: nextFileName,
+        atflId: nextAttachmentId,
+        sourcePath: window.location.pathname,
+      })
+    ) {
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
+    }
+  };
 
   return (
     <>
-      <LoadingOverlay isLoading={isLoading ?? false} />
-      <SearchDiv>
-        <SearchFormLeft>
-          <div className='flex items-center gap-4'>
-            <div className='flex items-center space-x-2'>
-              <Label className="w-20 text-xl text-gray-600">등록기간</Label>
-              <SearchDatePicker
-                selected={fromDate}
-                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}
-                disabled={{ after: new Date() }} />
-              <span>~</span>
-              <SearchDatePicker
-                selected={toDate}
-                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }}
-                disabled={{ after: new Date() }} />
-              <div className='flex items-center'>
-                <Label className="w-20 text-xl text-gray-600">등록자</Label>
-                <Input
-                  className='w-[100px] !text-2xl'
-                  value={usr}
-                  onChange={(e) => setUsr(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault(); // Enter 키 기본 동작 방지
-                      handleSearch();
-                    }
-                  }}
-                />
-              </div>
-              <div className='flex items-center'>
-                <Label className="w-20 text-xl text-gray-600">파일명</Label>
-                <Input
-                  className='w-[100px] !text-2xl'
-                  value={pjNm}
-                  onChange={(e) => { setpjNm(e.target.value) }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault(); // Enter 키 기본 동작 방지
-                      handleSearch();
-                    }
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        </SearchFormLeft>
-        <SearchFormRight>
-          <div className='flex items-center gap-5'>
-            <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={async () => await handleSearch()} >조회</Button>
-            <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={handleRegisterClick} >등록</Button>
-          </div>
-        </SearchFormRight>
-      </SearchDiv>
-      <ListDiv className="mt-4">
-        <div className="card-header flex  items-center justify-between">
-          <h3 className="text-2xl font-medium">사업정보 등록현황</h3>
-          <div>
-            <Button className="px-4 py-2 !mr-[1.2rem] px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={isChckFile}>파일 다운로드</Button>
-            <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile}>삭제</Button>
-          </div>
-        </div>
-        <UiTable
-          headName=''
-          tableData={tableData}
-          headlist={tableHeadlistOldPp}
-          pageSize={10}
-          total={totalData}
-          children={undefined}
-          cellClick={(index) => {
-            if (index != null) {
-              const fileName = tableData[index]?.dcrpPplMtncBizNm ?? "";
-              const id = tableData[index]?.atflId ?? '';
-              setFileNm(fileName);
-              setAtflId(id);
-              setDcrpPplMtncBizSn(tableData[index]?.dcrpPplMtncBizSn);
-              handleTablePopupOpen(fileName, id);
-            }
+      <LoadingOverlay isLoading={loading} />
+      <div className="card card-border !mt-6">
+        <form
+          className="flex flex-wrap items-center gap-2 p-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void handleSearch();
           }}
-          onPageChange={setCurPage}
-          resetSelection={resetSelection}
-          resetPageNo={isResetPage}
-          sort={sort}
-          onSortChange={handleSortChange}
-        />
-      </ListDiv>
-    </>
-  )
-}
+        >
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">
+              등록기간
+            </Label>
+            <SearchDatePicker
+              selected={fromDate}
+              onSelect={(date) => date && setFromDate(date)}
+              disabled={{ after: new Date() }}
+            />
+            <span>~</span>
+            <SearchDatePicker
+              selected={toDate}
+              onSelect={(date) => date && setToDate(date)}
+              disabled={{ after: new Date() }}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">등록자</Label>
+            <Input
+              className="w-[12rem] !text-[1.3rem]"
+              value={registrant}
+              onChange={(event) => setRegistrant(event.target.value)}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">파일명</Label>
+            <Input
+              className="w-[18rem] !text-[1.3rem]"
+              value={projectName}
+              onChange={(event) => setProjectName(event.target.value)}
+            />
+          </div>
+          <Button type="submit" className="w-[7.4rem]">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="w-[8.8rem]"
+            onClick={() => void handleReset()}
+          >
+            초기화
+          </Button>
+        </form>
+      </div>
 
-export default Page
+      <div className="mt-4 w-full min-w-0 max-w-full overflow-hidden">
+        <StandardDataTable
+          table={table}
+          title="노후 하수관로 정비사업 목록"
+          onRowClick={handleOpenDetail}
+          actions={
+            <>
+              <Button type="button" onClick={handleFileDownload}>
+                엑셀다운로드
+              </Button>
+              <Button type="button" onClick={handleRegister}>
+                등록
+              </Button>
+              <Button type="button" color="red" onClick={handleDelete}>
+                삭제
+              </Button>
+            </>
+          }
+        />
+      </div>
+    </>
+  );
+};
+
+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 315cd3a1d..1d0524114 100644
--- a/apps/sn/app/(with-base-layout)/oper/oldPp/tableModal.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/oldPp/tableModal.tsx
@@ -1,531 +1,365 @@
-/**
- * 📄 Table Modal
- * 노후 하수관로 엑셀 데이터 테이블 모달 컴포넌트
- *
- * - 엑셀 파일 다운로드 및 특정 시트 파싱 기능
- * - 탭 기반 테이블 표시 (raw data, 정밀조사, 정비사업 등)
- * - 데이터 필터링 및 빈 행 제거 처리
- * - 로딩 오버레이 및 에러 핸들링 지원
- * - XLSX 라이브러리를 통한 엑셀 데이터 변환
- * - 테이블 헤더 및 데이터 동적 생성
- * 
- * 🔗 사용 API
- * - 첨부파일 다운로드(파일ID): GET /attach-service/api/v1/download/{atflId} (attach-service)
- */
-'use client'
-import { useState, useEffect, useMemo } from 'react'
-import LoadingOverlay from '@/components/ui/LoadingBar'
-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';
-import type { UiHeadProps, UiTableSort } from '@common/business_components/ui';
-import { getNextTableSort, makeSortableHeaders, sortLocalTableRows } from '../tableSort';
+/** 노후 하수관로 정비사업 첨부 엑셀 상세 팝업 테이블 */
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  type ColumnDef,
+} from "@tanstack/react-table";
+import * as XLSX from "xlsx";
+
+import { getBlobData } from "@/components/lib/api";
+import { useAlertStore } from "@/shared/lib";
+import { StandardDataTable } from "@common/business_components";
+import { UITab } from "@common/business_components/ui";
+import { oldPpTable2HeadList, oldPpTable6HeadList } from "./headList";
 
 const TABS = [
   { val: "1", text: "raw data" },
   { val: "2", text: "1.정밀조사" },
   { val: "3", text: "2.정밀조사_정비사업연계" },
-  { val: "4", text: " 3.정비사업" },
+  { val: "4", text: "3.정비사업" },
   { val: "5", text: "4.정비사업요약" },
   { val: "6", text: "4.정비사업최종" },
 ];
 
-const sortableTable3HeadList = makeSortableHeaders(oldPpTable2HeadList);
-const sortableTable3NodeList = makeSortableHeaders(oldPpTable2NodeList);
-const sortableTable6HeadList = makeSortableHeaders(oldPpTable6HeadList);
-const sortableTable6NodeList = makeSortableHeaders(oldPpTable6NodeList);
+const PAGE_SIZE = 10;
+
+type ExcelHeader = {
+  id: string;
+  title: string;
+};
+
+type ExcelRow = Record<string, unknown>;
 
 interface TableModalProps {
   fileNm: string;
   atflId: string;
 }
 
-const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
+function normalizeHeaderTitle(value: unknown) {
+  const title = String(value).replace(/\r\n/g, "\n");
+  return /^(no|일련번호)$/i.test(title.trim()) ? "순번" : title;
+}
 
-  const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "1");
-  const [tableHeader1, setTableHeader1] = useState<{ id: string; title: string }[]>([])
-  const [tableHeader2, setTableHeader2] = useState<{ id: string; title: string }[]>([])
-  const [tableHeader4, setTableHeader4] = useState<{ id: string; title: string }[]>([])
-  const [tableHeader5, setTableHeader5] = useState<{ id: string; title: string }[]>([])
-  const [tableData1, setTableData1] = useState<any>([{}])
-  const [tableData2, setTableData2] = useState<any>([{}])
-  const [tableData3, setTableData3] = useState<any>([{}])
-  const [tableData4, setTableData4] = useState<any>([{}])
-  const [tableData5, setTableData5] = useState<any>([{}])
-  const [tableData6, setTableData6] = useState<any>([{}])
-  const [isLoading, setIsLoading] = useState(false)
-  const [tableSorts, setTableSorts] = useState<Record<string, UiTableSort | undefined>>({});
+function createColumns(headers: ExcelHeader[]): ColumnDef<ExcelRow>[] {
+  return headers.map((header) => ({
+    id: header.id,
+    accessorFn: (row) => row[header.id],
+    header: () => <span className="whitespace-pre-line">{header.title}</span>,
+    cell: ({ getValue }) => String(getValue() ?? "-"),
+    size: 140,
+    meta: { align: "center" },
+  }));
+}
 
-  const sortedTableData = useMemo(
-    () => ({
-      '1': sortLocalTableRows(tableData1, tableSorts['1']),
-      '2': sortLocalTableRows(tableData2, tableSorts['2']),
-      '3': sortLocalTableRows(tableData3, tableSorts['3']),
-      '4': sortLocalTableRows(tableData4, tableSorts['4']),
-      '5': sortLocalTableRows(tableData5, tableSorts['5']),
-      '6': sortLocalTableRows(tableData6, tableSorts['6']),
-    }),
-    [tableData1, tableData2, tableData3, tableData4, tableData5, tableData6, tableSorts],
-  );
+function useExcelTable(data: ExcelRow[], headers: ExcelHeader[]) {
+  const columns = useMemo(() => createColumns(headers), [headers]);
+  return useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageIndex: 0, pageSize: PAGE_SIZE } },
+  });
+}
 
-  const setTableSort = (tab: string, nextSort?: UiTableSort) => {
-    setTableSorts((current) => ({ ...current, [tab]: nextSort }));
-  };
+function filterEmptyRows(data: ExcelRow[]) {
+  return data
+    .filter((row) =>
+      Object.entries(row).some(([key, value]) => {
+        const match = key.match(/^__EMPTY_(\d+)$/);
+        if (!match || parseInt(match[1] ?? "", 10) < 2) return false;
 
-  const handleCustomHeadSort = (tab: string, head: UiHeadProps) => {
-    setTableSort(tab, getNextTableSort(head, tableSorts[tab]));
-  };
+        return (
+          value !== undefined &&
+          value !== null &&
+          String(value).trim() !== "" &&
+          String(value).trim() !== "-"
+        );
+      }),
+    )
+    .map((row) => {
+      const processedRow = { ...row };
+      const keys = Object.keys(processedRow);
+      keys.forEach((key, keyIndex) => {
+        if (keyIndex === keys.length - 1) return;
 
-  useEffect(() => {
-    isChckFile();
-  }, []);
-
-  // 파일 다운로드
-  const isChckFile = async () => {
-    setIsLoading(true);
-    try {
-      if (fileNm === '' || fileNm === undefined) {
-        alert('파일을 선택해주세요');
-        setIsLoading(false);
-        return false;
-      }
-
-      if (atflId === '' || atflId === undefined) {
-        alert('첨부파일 ID가 없어 파일을 불러올 수 없습니다.');
-        setIsLoading(false);
-        return false;
-      }
-
-      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'
-      });
-
-      const targetSheets = ['raw data', '1.정밀조사', '2.정밀조사_정비사업연계', ' 3.정비사업', '4.정비사업요약', '4.정비사업최종'];
-      const jsonDataBySheet = await filePickedSelectedSheets(file, 0, targetSheets);
-
-      const header1 = jsonDataBySheet['raw data']?.[1] || [];
-      const header2 = jsonDataBySheet['1.정밀조사']?.[1] || [];
-      const header4 = jsonDataBySheet[' 3.정비사업']?.[1] || [];
-      const header5 = jsonDataBySheet['4.정비사업요약']?.[2] || [];
-
-      // raw data
-      const allEntries1 = Object.entries(header1);
-      const filteredHeader1 = [
-        allEntries1[0],
-        allEntries1[1],
-        allEntries1[2],
-        allEntries1[3],
-        allEntries1[5],
-        allEntries1[6],
-        allEntries1[7],
-        allEntries1[8],
-        allEntries1[9],
-        allEntries1[10],
-        allEntries1[11],
-        allEntries1[12],
-        allEntries1[13],
-        allEntries1[14],
-        allEntries1[15]
-      ].filter((e): e is [string, any] => Boolean(e))
-        .map(([key, value]) => ({
-          id: key,
-          title: String(value).replace(/\r\n/g, '\n')
-        }));
-      filteredHeader1.splice(0, 0, {
-        id: "rowNumber",
-        title: '일련번호'
-      });
-      setTableHeader1(makeSortableHeaders(filteredHeader1));
-
-      const data1 = Array.isArray(jsonDataBySheet['raw data'])
-        ? jsonDataBySheet['raw data'].slice(2)
-        : [];
-      const filteredData1 = filterEmptyRows(data1).map((item: any, index: number) => ({
-        ...item,
-        rowNumber: index + 1,
-        __EMPTY_1: item.__EMPTY_1 || '-'
-      }));
-      setTableData1(filteredData1);
-
-      // 1.정밀조사
-      const allEntries2 = Object.entries(header2);
-      let filteredHeader2 = [
-        allEntries2[0],
-        allEntries2[1],
-        allEntries2[2],
-        allEntries2[3],
-        allEntries2[5],
-        allEntries2[6],
-        allEntries2[7],
-        allEntries2[8],
-        allEntries2[9],
-        allEntries2[10],
-        allEntries2[11],
-        allEntries2[12],
-        allEntries2[13],
-        allEntries2[14],
-        allEntries2[15]
-      ].filter((e): e is [string, any] => Boolean(e))
-        .map(([key, value]) => ({
-          id: key,
-          title: String(value).replace(/\r\n/g, '\n')
-        }));
-      filteredHeader2.splice(0, 0, {
-        id: "rowNumber",
-        title: '일련번호'
-      });
-      setTableHeader2(makeSortableHeaders(filteredHeader2));
-
-      const data2 = Array.isArray(jsonDataBySheet['1.정밀조사'])
-        ? jsonDataBySheet['1.정밀조사'].slice(2)
-        : [];
-      const filteredData2 = filterEmptyRows(data2).map((item: any, index: number) => ({
-        ...item,
-        rowNumber: index + 1
-      }));
-      setTableData2(filteredData2);
-
-      // 2.정밀조사_정비사업연계 (헤더는 import)
-      const data3 = Array.isArray(jsonDataBySheet['2.정밀조사_정비사업연계'])
-        ? jsonDataBySheet['2.정밀조사_정비사업연계'].slice(5)
-        : [];
-      const filteredData3 = filterEmptyRows(data3).map((item: any, index: number) => {
-        const newItem = { ...item };
-        // 매핑 에러로 인해 특정 키를 "__EMPTY_0"으로 변경 
-        const targetKey = "*1차 출처: 공단자료\r\n*2차 출처: 정산서, 정밀조사보고서 등.\r\n              (파랑) 2024년말 기준 실적 제출 자료. 준공 후 재확인 필요\r\n              (노랑셀) 준공(또는 정산) 후에 재확인 필요";
-        if (newItem[targetKey] !== undefined) {
-          newItem["__EMPTY_0"] = newItem[targetKey];
-          delete newItem[targetKey];
+        const value = processedRow[key];
+        if (
+          value === undefined ||
+          value === null ||
+          value === "" ||
+          String(value).trim() === ""
+        ) {
+          processedRow[key] = "-";
         }
-        return {
-          ...newItem,
-          __EMPTY_4: newItem?.__EMPTY_4 || '-',
-          rowNumber: index + 1
-        };
       });
-      setTableData3(filteredData3);
+      return processedRow;
+    });
+}
 
-      //  3.정비사업
-      const allEntries4 = Object.entries(header4);
-      const filteredHeader4 = allEntries4.filter((e): e is [string, any] => Boolean(e))
-        .map(([key, value]) => ({
-          id: key,
-          title: String(value).replace(/\r\n/g, '\n')
-        }));
+function withDescendingRowNumber(rows: ExcelRow[]) {
+  return rows.map((row, index) => ({
+    ...row,
+    rowNumber: rows.length - index,
+  }));
+}
 
-      filteredHeader4.splice(0, 0, {
-        id: "rowNumber",
-        title: '일련번호'
-      });
-      setTableHeader4(makeSortableHeaders(filteredHeader4));
+function filePickedSelectedSheets(
+  file: File,
+  headerNum: number = 0,
+  sheetNames: string[],
+): Promise<Record<string, ExcelRow[]>> {
+  const reader = new FileReader();
 
-      const data4 = Array.isArray(jsonDataBySheet[' 3.정비사업'])
-        ? jsonDataBySheet[' 3.정비사업'].slice(2)
-        : [];
-      const filteredData4 = filterEmptyRows(data4).map((item: any, index: number) => ({
-        ...item,
-        rowNumber: index + 1,
-        __EMPTY_2: item?.__EMPTY_2 || '-',
-        __EMPTY_11: item?.__EMPTY_11 || '-',
-      }));
-      setTableData4(filteredData4);
+  return new Promise((resolve, reject) => {
+    reader.onload = (event) => {
+      const data = event.target?.result;
+      if (!data) {
+        reject(new Error("Failed to read file"));
+        return;
+      }
 
-      //  4.정비사업요약
-      const allEntries5 = Object.entries(header5);
-      const excludeKeys5 = [
-        ": \"정비사업\"sheet에서 사업코드 ctrl+c, Ctrl+v  한 다음 중복된 데이터 제거실시",
-        "__EMPTY",
-        "__EMPTY_8",
-        "__EMPTY_15"
-      ];
-      const filteredHeader5 = allEntries5
-        .filter(([key]) => !excludeKeys5.includes(key))
-        .filter((e): e is [string, any] => Boolean(e))
-        .map(([key, value]) => ({
-          id: key,
-          title: String(value).replace(/\r\n/g, '\n'),
-        }));
-      filteredHeader5.splice(0, 0, {
-        id: "rowNumber",
-        title: '일련번호'
-      });
-      setTableHeader5(makeSortableHeaders(filteredHeader5));
+      const workbook = XLSX.read(data, { type: "binary", cellDates: true });
+      const result: Record<string, ExcelRow[]> = {};
 
-      const data5 = Array.isArray(jsonDataBySheet['4.정비사업요약'])
-        ? jsonDataBySheet['4.정비사업요약'].slice(3)
-        : [];
-      const filteredData5 =
-        filterEmptyRows(data5).map((item: any, index: number) => ({
-          ...item,
-          rowNumber: index + 1,
-        }));
-      setTableData5(filteredData5);
-
-      //  4.정비사업최종 (헤더는 import)
-      const data6 = Array.isArray(jsonDataBySheet['4.정비사업최종'])
-        ? jsonDataBySheet['4.정비사업최종'].slice(6)
-        : [];
-      const filteredData6 =
-        filterEmptyRows(data6).map((item: any, index: number) => ({
-          ...item,
-          rowNumber: index + 1,
-        }));
-      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 {
-      setIsLoading(false);
-    }
-  }
-
-  function filterEmptyRows(data: any[]) {
-    return data
-      .filter(row => {
-        return Object.entries(row).some(([key, value]) => {
-          const match = key.match(/^__EMPTY_(\d+)$/);
-          if (!match || parseInt(match[1] ?? '', 10) < 2) return false;
-
-          return value !== undefined &&
-            value !== null &&
-            String(value).trim() !== '' &&
-            String(value).trim() !== '-' &&
-            String(value).trim() !== '';
-        });
-      })
-      .map((row) => {
-        const processedRow = { ...row };
-        const keys = Object.keys(processedRow);
-
-        keys.forEach((key, keyIndex) => {
-          // 마지막 속성(사업 근거)이 아닌 경우에만 빈 값을 '-'으로 변경
-          if (keyIndex !== keys.length - 1) {
-            const value = processedRow[key];
-            if (value === undefined ||
-              value === null ||
-              value === '' ||
-              String(value).trim() === '') {
-              processedRow[key] = '-';
-            }
-          }
-        });
-
-        return processedRow;
-      });
-  };
-
-  // 특정 시트만 선택적으로 JSON으로 변환하는 함수
-  function filePickedSelectedSheets(file: File, headerNum: number = 0, sheetNames: string[]): Promise<Record<string, any[]>> {
-    const reader = new FileReader();
-
-    return new Promise((resolve, reject) => {
-      reader.onload = function (e) {
-        const data = e.target?.result;
-        if (!data) {
-          console.error("Failed to read file: e.target.result is null");
-          reject(new Error("Failed to read file"));
+      sheetNames.forEach((targetSheetName) => {
+        const sheetName = workbook.SheetNames.find(
+          (name) => name.toLowerCase() === targetSheetName.toLowerCase(),
+        );
+        const sheet = sheetName ? workbook.Sheets[sheetName] : undefined;
+        if (!sheet) {
+          console.warn(`Sheet "${targetSheetName}" not found in workbook`);
+          result[targetSheetName] = [];
           return;
         }
 
-        // Excel 파일 읽기
-        const wb = XLSX.read(data, { type: 'binary', cellDates: true });
-        const result: Record<string, any[]> = {};
-
-        // 지정된 시트 이름만 찾아서 처리
-        sheetNames.forEach(targetSheetName => {
-          // 대소문자 구분 없이 시트 이름 찾기
-          const sheetName = wb.SheetNames.find(name =>
-            name.toLowerCase() === targetSheetName.toLowerCase()
-          );
-
-          if (sheetName) {
-            const sheet = wb.Sheets[sheetName];
-            if (sheet) {
-              const jsonData = XLSX.utils.sheet_to_json(sheet, { range: headerNum, raw: false });
-              result[targetSheetName] = jsonData;
-            }
-          } else {
-            console.warn(`Sheet "${targetSheetName}" not found in workbook`);
-            result[targetSheetName] = [];
-          }
+        result[targetSheetName] = XLSX.utils.sheet_to_json<ExcelRow>(sheet, {
+          range: headerNum,
+          raw: false,
         });
+      });
 
-        resolve(result);
-      };
+      resolve(result);
+    };
 
-      reader.onerror = function () {
-        console.error("Error reading file");
-        reject(new Error("Error reading file"));
-      };
+    reader.onerror = () => reject(new Error("Error reading file"));
+    reader.readAsBinaryString(file);
+  });
+}
 
-      // 파일 읽기 시작
-      reader.readAsBinaryString(file);
-    });
-  };
+const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
+  const alert = useAlertStore((state) => state.setMessage);
+  const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "1");
+  const [headers1, setHeaders1] = useState<ExcelHeader[]>([]);
+  const [headers2, setHeaders2] = useState<ExcelHeader[]>([]);
+  const [headers4, setHeaders4] = useState<ExcelHeader[]>([]);
+  const [headers5, setHeaders5] = useState<ExcelHeader[]>([]);
+  const [data1, setData1] = useState<ExcelRow[]>([]);
+  const [data2, setData2] = useState<ExcelRow[]>([]);
+  const [data3, setData3] = useState<ExcelRow[]>([]);
+  const [data4, setData4] = useState<ExcelRow[]>([]);
+  const [data5, setData5] = useState<ExcelRow[]>([]);
+  const [data6, setData6] = useState<ExcelRow[]>([]);
+  const [loading, setLoading] = useState(false);
 
+  const headers3 = useMemo<ExcelHeader[]>(
+    () =>
+      oldPpTable2HeadList.map((header) => ({
+        id: header.id,
+        title: normalizeHeaderTitle(header.title),
+      })),
+    [],
+  );
+  const headers6 = useMemo<ExcelHeader[]>(
+    () =>
+      oldPpTable6HeadList.map((header) => ({
+        id: header.id,
+        title: normalizeHeaderTitle(header.title),
+      })),
+    [],
+  );
+  const table1 = useExcelTable(data1, headers1);
+  const table2 = useExcelTable(data2, headers2);
+  const table3 = useExcelTable(data3, headers3);
+  const table4 = useExcelTable(data4, headers4);
+  const table5 = useExcelTable(data5, headers5);
+  const table6 = useExcelTable(data6, headers6);
+
+  useEffect(() => {
+    const loadFile = async () => {
+      setLoading(true);
+
+      try {
+        if (!fileNm) {
+          alert("파일을 선택해주세요");
+          return;
+        }
+        if (!atflId) {
+          alert("첨부파일 ID가 없어 파일을 불러올 수 없습니다.");
+          return;
+        }
+
+        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",
+        });
+        const jsonDataBySheet = await filePickedSelectedSheets(file, 0, [
+          "raw data",
+          "1.정밀조사",
+          "2.정밀조사_정비사업연계",
+          " 3.정비사업",
+          "4.정비사업요약",
+          "4.정비사업최종",
+        ]);
+
+        const header1Entries = Object.entries(
+          jsonDataBySheet["raw data"]?.[1] ?? {},
+        );
+        const header2Entries = Object.entries(
+          jsonDataBySheet["1.정밀조사"]?.[1] ?? {},
+        );
+        const selectedIndexes = [
+          0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
+        ];
+        const selectHeaders = (entries: [string, unknown][]) => [
+          { id: "rowNumber", title: "순번" },
+          ...selectedIndexes
+            .map((index) => entries[index])
+            .filter((entry): entry is [string, unknown] => Boolean(entry))
+            .map(([id, title]) => ({
+              id,
+              title: normalizeHeaderTitle(title),
+            })),
+        ];
+        setHeaders1(selectHeaders(header1Entries));
+        setHeaders2(selectHeaders(header2Entries));
+
+        const nextData1 = filterEmptyRows(
+          (jsonDataBySheet["raw data"] ?? []).slice(2),
+        ).map((item) => ({
+          ...item,
+          __EMPTY_1: item.__EMPTY_1 || "-",
+        }));
+        setData1(withDescendingRowNumber(nextData1));
+        setData2(
+          withDescendingRowNumber(
+            filterEmptyRows((jsonDataBySheet["1.정밀조사"] ?? []).slice(2)),
+          ),
+        );
+
+        const sourceDescriptionKey =
+          "*1차 출처: 공단자료\r\n*2차 출처: 정산서, 정밀조사보고서 등.\r\n              (파랑) 2024년말 기준 실적 제출 자료. 준공 후 재확인 필요\r\n              (노랑셀) 준공(또는 정산) 후에 재확인 필요";
+        const nextData3 = filterEmptyRows(
+          (jsonDataBySheet["2.정밀조사_정비사업연계"] ?? []).slice(5),
+        ).map((item) => {
+          const next = { ...item };
+          if (next[sourceDescriptionKey] !== undefined) {
+            next.__EMPTY_0 = next[sourceDescriptionKey];
+            delete next[sourceDescriptionKey];
+          }
+          return { ...next, __EMPTY_4: next.__EMPTY_4 || "-" };
+        });
+        setData3(withDescendingRowNumber(nextData3));
+
+        const header4Entries = Object.entries(
+          jsonDataBySheet[" 3.정비사업"]?.[1] ?? {},
+        );
+        setHeaders4([
+          { id: "rowNumber", title: "순번" },
+          ...header4Entries.map(([id, title]) => ({
+            id,
+            title: normalizeHeaderTitle(title),
+          })),
+        ]);
+        const nextData4 = filterEmptyRows(
+          (jsonDataBySheet[" 3.정비사업"] ?? []).slice(2),
+        ).map((item) => ({
+          ...item,
+          __EMPTY_2: item.__EMPTY_2 || "-",
+          __EMPTY_11: item.__EMPTY_11 || "-",
+        }));
+        setData4(withDescendingRowNumber(nextData4));
+
+        const excludedSummaryKeys = [
+          ': "정비사업"sheet에서 사업코드 ctrl+c, Ctrl+v  한 다음 중복된 데이터 제거실시',
+          "__EMPTY",
+          "__EMPTY_8",
+          "__EMPTY_15",
+        ];
+        const header5Entries = Object.entries(
+          jsonDataBySheet["4.정비사업요약"]?.[2] ?? {},
+        ).filter(([key]) => !excludedSummaryKeys.includes(key));
+        setHeaders5([
+          { id: "rowNumber", title: "순번" },
+          ...header5Entries.map(([id, title]) => ({
+            id,
+            title: normalizeHeaderTitle(title),
+          })),
+        ]);
+        setData5(
+          withDescendingRowNumber(
+            filterEmptyRows((jsonDataBySheet["4.정비사업요약"] ?? []).slice(3)),
+          ),
+        );
+        setData6(
+          withDescendingRowNumber(
+            filterEmptyRows((jsonDataBySheet["4.정비사업최종"] ?? []).slice(6)),
+          ),
+        );
+      } catch (error) {
+        console.error("OldPp attachment fetch details:", {
+          atflId,
+          fileNm,
+          error,
+        });
+        alert("파일 처리 중 오류가 발생했습니다.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void loadFile();
+  }, [alert, atflId, fileNm]);
+
+  const activeConfig =
+    activeTab === "1"
+      ? { table: table1, headers: headers1 }
+      : activeTab === "2"
+        ? { table: table2, headers: headers2 }
+        : activeTab === "3"
+          ? { table: table3, headers: headers3 }
+          : activeTab === "4"
+            ? { table: table4, headers: headers4 }
+            : activeTab === "5"
+              ? { table: table5, headers: headers5 }
+              : { table: table6, headers: headers6 };
+  const activeTitle =
+    TABS.find((tab) => tab.val === activeTab)?.text ?? "첨부 데이터";
 
   return (
-    <>
-      {/* 탭 영역 */}
+    <div className="flex min-h-0 flex-1 flex-col gap-4">
       <UITab
         defaultValue={activeTab}
-        tabList={TABS.map((tab) => ({
-          value: tab.val,
-          label: tab.text
-        }))}
-        onValueChange={(value: string) => setActiveTab(value)}
+        tabList={TABS.map((tab) => ({ value: tab.val, label: tab.text }))}
+        onValueChange={setActiveTab}
       />
-      {/* row data 탭 */}
-      {activeTab === '1' && (
-        <div className="h-[79vh] rounded-lg border flex flex-col">
-          <div className="flex-1 min-w-[50vw] max-w-[100vw] overflow-auto">
-            <LoadingOverlay isLoading={isLoading} />
-            <div className="min-w-max">
-              <UiTable
-                headName={'raw data'}
-                tableData={sortedTableData['1']}
-                headlist={tableHeader1}
-                pageSize={10}
-                total={0}
-                cellClick={undefined}
-                onPageChange={() => { }}
-                sort={tableSorts['1']}
-                onSortChange={(nextSort) => setTableSort('1', nextSort)}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-      {/* 1.정밀조사 탭 */}
-      {activeTab === '2' && (
-        <div className="h-[79vh] w-full overflow-auto rounded-lg border">
-          <div className="flex-1 px-2 pb-2">
-            <LoadingOverlay isLoading={isLoading} />
-            <div className="min-w-[150%]">
-              <UiTable
-                headName={'1.정밀조사'}
-                tableData={sortedTableData['2']}
-                headlist={tableHeader2}
-                pageSize={10}
-                total={0}
-                className={"overflow-x-auto overflow-y-auto"}
-                cellClick={undefined}
-                onPageChange={() => { }}
-                sort={tableSorts['2']}
-                onSortChange={(nextSort) => setTableSort('2', nextSort)}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-      {/* 2.정밀조사_정비사업연계 탭 */}
-      {activeTab === '3' && (
-        <div className="h-[79vh] w-full overflow-auto rounded-lg border">
-          <div className="flex-1 px-2 pb-2">
-            <LoadingOverlay isLoading={isLoading} />
-            <div className="min-w-[550%]">
-              <UiTable
-                headName={'2.정밀조사_정비사업연계'}
-                tableData={sortedTableData['3']}
-                headlist={sortableTable3HeadList}
-                pageSize={10}
-                total={0}
-                className={"overflow-x-auto overflow-y-auto"}
-                cellClick={undefined}
-                onPageChange={() => { }}
-                sort={tableSorts['3']}
-                onSortChange={(nextSort) => setTableSort('3', nextSort)}
-              >
-                <HeadMakeColSpan
-                  upHeadList={sortableTable3NodeList}
-                  sort={tableSorts['3']}
-                  onSortChange={(head) => handleCustomHeadSort('3', head)}
-                />
-              </UiTable>
-            </div>
-          </div>
-        </div>
-      )}
-      {/*  3.정비사업 탭 */}
-      {activeTab === '4' && (
-        <div className="h-[79vh] w-full overflow-auto rounded-lg border">
-          <div className="flex-1 px-2 pb-2">
-            <LoadingOverlay isLoading={isLoading} />
-            <div className="min-w-[160%]">
-              <UiTable
-                headName={'3.정비사업'}
-                tableData={sortedTableData['4']}
-                headlist={tableHeader4}
-                pageSize={10}
-                total={0}
-                className={"overflow-x-auto overflow-y-auto"}
-                cellClick={undefined}
-                onPageChange={() => { }}
-                sort={tableSorts['4']}
-                onSortChange={(nextSort) => setTableSort('4', nextSort)}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-      {/* 4.정비사업요약 탭 */}
-      {activeTab === '5' && (
-        <div className="h-[79vh] w-full overflow-auto rounded-lg border">
-          <div className="flex-1 px-2 pb-2">
-            <LoadingOverlay isLoading={isLoading} />
-            <div className="min-w-[130%]">
-              <UiTable
-                headName={'4.정비사업요약'}
-                tableData={sortedTableData['5']}
-                headlist={tableHeader5}
-                pageSize={10}
-                total={0}
-                className={"overflow-x-auto overflow-y-auto"}
-                cellClick={undefined}
-                onPageChange={() => { }}
-                sort={tableSorts['5']}
-                onSortChange={(nextSort) => setTableSort('5', nextSort)}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-      {/* 4.정비사업최종 탭 */}
-      {activeTab === '6' && (
-        <div className="h-[79vh] w-full overflow-auto rounded-lg border">
-          <div className="flex-1 px-2 pb-2">
-            <LoadingOverlay isLoading={isLoading} />
-            <div className="min-w-[200%]">
-              <UiTable
-                headName={'4.정비사업최종'}
-                tableData={sortedTableData['6']}
-                headlist={sortableTable6HeadList}
-                pageSize={10}
-                total={0}
-                className={"overflow-x-auto overflow-y-auto"}
-                cellClick={undefined}
-                onPageChange={() => { }}
-                sort={tableSorts['6']}
-                onSortChange={(nextSort) => setTableSort('6', nextSort)}
-              >
-                <HeadMakeColSpan
-                  upHeadList={sortableTable6NodeList}
-                  sort={tableSorts['6']}
-                  onSortChange={(head) => handleCustomHeadSort('6', head)}
-                />
-              </UiTable>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  )
+      <StandardDataTable
+        table={activeConfig.table}
+        title={`${activeTitle} 목록`}
+        loading={loading}
+        scrollMode="horizontal"
+        minTableWidth={`${Math.max(activeConfig.headers.length * 9, 80)}rem`}
+      />
+    </div>
+  );
 };
 
 export default TableModal;
diff --git a/apps/sn/app/(with-base-layout)/oper/operStore/page.tsx b/apps/sn/app/(with-base-layout)/oper/operStore/page.tsx
index 9145ac46b..a48ae7cf4 100644
--- a/apps/sn/app/(with-base-layout)/oper/operStore/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/operStore/page.tsx
@@ -10,7 +10,8 @@ import useOnsemiroAddrStore from "@/store/useOnsemiroAddrStore";
 const DEFAULT_OPTION = { text: "전체", val: "0" };
 
 export default function Page() {
-  const { govArea, city, sgg, fetchGovArea, fetchCity, fetchSgg } = useOnsemiroAddrStore();
+  const { govArea, city, sgg, fetchGovArea, fetchCity, fetchSgg } =
+    useOnsemiroAddrStore();
   const [selectedGovArea, setSelectedGovArea] = useState("0");
   const [selectedCity, setSelectedCity] = useState("0");
   const [selectedSgg, setSelectedSgg] = useState("0");
@@ -27,7 +28,11 @@ export default function Page() {
         await Promise.all([fetchGovArea(), fetchCity(), fetchSgg()]);
       } catch (nextError) {
         if (!mounted) return;
-        setError(nextError instanceof Error ? nextError.message : "주소 공통코드를 조회하지 못했습니다.");
+        setError(
+          nextError instanceof Error
+            ? nextError.message
+            : "주소 공통코드를 조회하지 못했습니다.",
+        );
       } finally {
         if (mounted) setLoading(false);
       }
@@ -56,40 +61,41 @@ export default function Page() {
     <section className="space-y-6 p-6">
       <div>
         <h1 className="text-2xl font-semibold">Onsemiro 주소 Store 테스트</h1>
-        <p className="mt-2 text-sm text-gray-600">
-          `sewerage-service`의 환경청, 시도, 시군구 조회 결과를 확인하는 임시 화면입니다.
+        <p className="mt-2 text-sm text-label">
+          `sewerage-service`의 환경청, 시도, 시군구 조회 결과를 확인하는 임시
+          화면입니다.
         </p>
       </div>
 
-      <div className="grid gap-4 rounded-lg border bg-white p-6 md:grid-cols-3">
+      <div className="grid gap-4 rounded-lg border bg-background p-6 md:grid-cols-3">
         <div>
-          <Label className="mb-2 block text-base text-gray-600">환경청</Label>
+          <Label className="mb-2 block text-base text-label">환경청</Label>
           <SelectBox
             label=""
             className="w-full"
-            selectClass="w-full rounded-lg bg-white"
+            selectClass="w-full rounded-lg bg-background"
             selectArray={[DEFAULT_OPTION, ...govArea]}
             value={selectedGovArea}
             onSelectValue={(value) => setSelectedGovArea(String(value))}
           />
         </div>
         <div>
-          <Label className="mb-2 block text-base text-gray-600">시도</Label>
+          <Label className="mb-2 block text-base text-label">시도</Label>
           <SelectBox
             label=""
             className="w-full"
-            selectClass="w-full rounded-lg bg-white"
+            selectClass="w-full rounded-lg bg-background"
             selectArray={[DEFAULT_OPTION, ...city]}
             value={selectedCity}
             onSelectValue={(value) => setSelectedCity(String(value))}
           />
         </div>
         <div>
-          <Label className="mb-2 block text-base text-gray-600">시군구</Label>
+          <Label className="mb-2 block text-base text-label">시군구</Label>
           <SelectBox
             label=""
             className="w-full"
-            selectClass="w-full rounded-lg bg-white"
+            selectClass="w-full rounded-lg bg-background"
             selectArray={[DEFAULT_OPTION, ...filteredSgg]}
             value={selectedSgg}
             onSelectValue={(value) => setSelectedSgg(String(value))}
@@ -97,7 +103,7 @@ export default function Page() {
         </div>
       </div>
 
-      <div className="rounded-lg border bg-slate-50 p-4 text-sm">
+      <div className="rounded-lg border bg-secondary p-4 text-sm">
         <p>로딩: {loading ? "Y" : "N"}</p>
         <p>환경청 건수: {govArea.length}</p>
         <p>시도 건수: {city.length}</p>
diff --git a/apps/sn/app/(with-base-layout)/selectionValidation.tsx b/apps/sn/app/(with-base-layout)/selectionValidation.tsx
index 6beb4c11a..043a02fd7 100644
--- a/apps/sn/app/(with-base-layout)/selectionValidation.tsx
+++ b/apps/sn/app/(with-base-layout)/selectionValidation.tsx
@@ -27,6 +27,8 @@ export interface SelectionValidationResult {
   errorMessage?: string;
 }
 
+export type SelectionValidationNotifier = (message: string) => void;
+
 /**
  * 단일 선택 항목이 유효한지 검증하는 함수
  * @param value 검증할 값
@@ -35,17 +37,28 @@ export interface SelectionValidationResult {
  */
 export const isValidSelection = (
   value: string | number | ApiSelectOption,
-  isRequired: boolean = true
+  isRequired: boolean = true,
 ): boolean => {
   if (!isRequired) return true;
-  
-  if (typeof value === 'object' && value !== null) {
+
+  if (typeof value === "object" && value !== null) {
     // ApiSelectOption 객체인 경우
-    return value.val !== '0' && value.val !== '' && value.val !== null && value.val !== undefined;
+    return (
+      value.val !== "0" &&
+      value.val !== "" &&
+      value.val !== null &&
+      value.val !== undefined
+    );
   }
-  
+
   // 문자열 또는 숫자인 경우
-  return value !== '0' && value !== 0 && value !== '' && value !== null && value !== undefined;
+  return (
+    value !== "0" &&
+    value !== 0 &&
+    value !== "" &&
+    value !== null &&
+    value !== undefined
+  );
 };
 
 /**
@@ -54,31 +67,33 @@ export const isValidSelection = (
  * @returns 검증 결과. 실패 시 첫 번째 에러 메시지 반환
  */
 export const validateMultipleSelections = (
-  validationConfigs: SelectionValidationConfig[]
+  validationConfigs: SelectionValidationConfig[],
 ): SelectionValidationResult => {
   for (const config of validationConfigs) {
     if (!isValidSelection(config.value, config.required)) {
       return {
         isValid: false,
-        errorMessage: `${config.description}을(를) 선택해주세요.`
+        errorMessage: `${config.description}을(를) 선택해주세요.`,
       };
     }
   }
-  
+
   return { isValid: true };
 };
 
 /**
- * 여러 선택 항목을 한 번에 검증하고 alert 표시하는 함수
+ * 여러 선택 항목을 한 번에 검증하고 주입된 CS 알림을 표시하는 함수
  * @param validationConfigs 검증할 선택 항목들의 설정 배열
+ * @param notify 호출자가 주입하는 CS 알림 함수
  * @returns 검증 결과
  */
 export const validateMultipleSelectionsWithAlert = (
-  validationConfigs: SelectionValidationConfig[]
+  validationConfigs: SelectionValidationConfig[],
+  notify: SelectionValidationNotifier,
 ): boolean => {
   const result = validateMultipleSelections(validationConfigs);
   if (!result.isValid && result.errorMessage) {
-    alert(result.errorMessage);
+    notify(result.errorMessage);
     return false;
   }
   return true;
@@ -101,47 +116,49 @@ export const validateBasicSelections = (
     requireSigungu?: boolean;
     requireTreatmentPlant?: boolean;
     treatmentPlantLabel?: string;
-  } = {}
+  } = {},
 ): SelectionValidationResult => {
   const {
     requireEnv = true,
     requireSido = true,
     requireSigungu = true,
     requireTreatmentPlant = true,
-    treatmentPlantLabel = '하수처리장'
+    treatmentPlantLabel = "하수처리장",
   } = options;
 
   const validationConfigs: SelectionValidationConfig[] = [
     {
       value: select1,
       description: treatmentPlantLabel,
-      required: requireTreatmentPlant
-    }
+      required: requireTreatmentPlant,
+    },
   ];
 
   return validateMultipleSelections(validationConfigs);
 };
 
 /**
- * 기본 선택 항목들 검증 및 alert 표시
+ * 기본 선택 항목들 검증 및 주입된 CS 알림 표시
  * @param select1 하수처리장코드
+ * @param notify 호출자가 주입하는 CS 알림 함수
  * @param options 각 항목의 필수 여부 설정
  * @returns 검증 결과
  */
 export const validateBasicSelectionsWithAlert = (
   select1: string | number,
+  notify: SelectionValidationNotifier,
   options: {
     requireEnv?: boolean;
     requireSido?: boolean;
     requireSigungu?: boolean;
     requireTreatmentPlant?: boolean;
     treatmentPlantLabel?: string;
-  } = {}
+  } = {},
 ): boolean => {
   const result = validateBasicSelections(select1, options);
   if (!result.isValid && result.errorMessage) {
-    alert(result.errorMessage);
+    notify(result.errorMessage);
     return false;
   }
   return true;
-};
\ No newline at end of file
+};
diff --git a/apps/sn/app/components/ui/LoadingBar/index.tsx b/apps/sn/app/components/ui/LoadingBar/index.tsx
index 12251365b..4eb3e844c 100644
--- a/apps/sn/app/components/ui/LoadingBar/index.tsx
+++ b/apps/sn/app/components/ui/LoadingBar/index.tsx
@@ -8,8 +8,8 @@
  * - 고정 위치 및 z-index를 통한 최상위 레이어 배치
  * - 조건부 렌더링을 통한 성능 최적화
  */
-import React from 'react';
-import { LoadingWithAnimation } from '@common/components/ui/loading';
+import React from "react";
+import { LoadingWithAnimation } from "@common/components/ui/loading";
 
 interface LoadingOverlayProps {
   isLoading: boolean;
@@ -19,12 +19,13 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading }) => {
   if (!isLoading) return null;
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-      <div className="relative w-16 h-16">
+    // 화면을 차단하는 로딩 오버레이는 배경 콘텐츠를 가리는 의미색이므로 반투명 검정을 유지한다.
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="relative h-16 w-16">
         <LoadingWithAnimation color="primary" />
       </div>
     </div>
   );
 };
 
-export default LoadingOverlay;
\ No newline at end of file
+export default LoadingOverlay;
diff --git a/apps/sn/app/components/ui/YearRangeSelectBox.tsx b/apps/sn/app/components/ui/YearRangeSelectBox.tsx
index 35f1dd6a9..5f77bb926 100644
--- a/apps/sn/app/components/ui/YearRangeSelectBox.tsx
+++ b/apps/sn/app/components/ui/YearRangeSelectBox.tsx
@@ -10,7 +10,7 @@
  * - 콜백 함수를 통한 선택 값 전달
  */
 import React from "react";
-import { SelectBox } from '@common/business_components/ui'
+import { SelectBox } from "@common/business_components/ui";
 
 interface YearRangeSelectBoxProps {
   start: string;
@@ -37,11 +37,11 @@ export function getStartYearArray({
   endYear?: string;
 } = {}) {
   const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
-    (maxYear - i).toString()
-  ).filter(y => !endYear || parseInt(y) <= parseInt(endYear));
+    (maxYear - i).toString(),
+  ).filter((y) => !endYear || parseInt(y) <= parseInt(endYear));
   return [
     { val: "0", text: placeholder },
-    ...years.map(y => ({ val: y, text: y })),
+    ...years.map((y) => ({ val: y, text: y })),
   ];
 }
 
@@ -58,11 +58,11 @@ export function getEndYearArray({
   startYear?: string;
 } = {}) {
   const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
-    (maxYear - i).toString()
-  ).filter(y => !startYear || parseInt(y) >= parseInt(startYear));
+    (maxYear - i).toString(),
+  ).filter((y) => !startYear || parseInt(y) >= parseInt(startYear));
   return [
     { val: "9999", text: placeholder },
-    ...years.map(y => ({ val: y, text: y })),
+    ...years.map((y) => ({ val: y, text: y })),
   ];
 }
 
@@ -75,50 +75,50 @@ export function YearRangeSelectBox({
   minYear = 1900,
   maxYear = new Date().getFullYear(),
   className = "",
-  selectClass = "rounded-lg bg-white flex-shrink-0 w-[70px]"
+  selectClass = "rounded-lg bg-background flex-shrink-0 w-[70px]",
 }: YearRangeSelectBoxProps) {
   // 시작년도 배열
   const getStartYearArray = () => {
     const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
-      (maxYear - i).toString()
-    ).filter(y => !end || parseInt(y) <= parseInt(end));
+      (maxYear - i).toString(),
+    ).filter((y) => !end || parseInt(y) <= parseInt(end));
     return [
       { val: "0", text: "전체" },
-      ...years.map(y => ({ val: y, text: y })),
+      ...years.map((y) => ({ val: y, text: y })),
     ];
   };
   // 종료년도 배열
   const getEndYearArray = () => {
     const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
-      (maxYear - i).toString()
-    ).filter(y => !start || parseInt(y) >= parseInt(start));
+      (maxYear - i).toString(),
+    ).filter((y) => !start || parseInt(y) >= parseInt(start));
     return [
       { val: "9999", text: "전체" },
-      ...years.map(y => ({ val: y, text: y })),
+      ...years.map((y) => ({ val: y, text: y })),
     ];
   };
 
   return (
-    <div className={`flex items-center mr-8 ${className}`}>
+    <div className={`mr-8 flex items-center ${className}`}>
       <SelectBox
-        className="flex-1" 
+        className="flex-1"
         selectClass={selectClass}
         label={startLabel}
         selectArray={getStartYearArray()}
-        onSelectValue={val => onChange({ start: String(val), end })}
+        onSelectValue={(val) => onChange({ start: String(val), end })}
         value={start}
         selectContentClass="z-[101]"
       />
-      <span className="font-semibold text-xl mx-2">~</span>
+      <span className="mx-2 text-xl font-semibold">~</span>
       <SelectBox
         className="flex-1"
         selectClass={selectClass}
         label={endLabel}
         selectArray={getEndYearArray()}
-        onSelectValue={val => onChange({ start, end: String(val) })}
+        onSelectValue={(val) => onChange({ start, end: String(val) })}
         value={end}
         selectContentClass="z-[101]"
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx b/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx
index ee48a048f..c92eb6184 100644
--- a/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx
+++ b/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx
@@ -8,16 +8,15 @@
  * - 로딩 상태 관리 및 에러 핸들링
  * - Zustand를 통한 시도/시군구 데이터 관리
  * - CQL 필터를 통한 시설물 검색 조건 설정
- * 
+ *
  * 🔗 사용 API
  * - 관망도 시설물 목록 조회: GET /api/v1/fclts (sewerage-service)
  */
 import React, { useState, useEffect } from "react";
-import { SelectBox } from '@common/business_components/ui'
-import { Label } from '@common/components';
-import useStore from '../../store/useStore';
-import { getData } from '@/components/lib/api/index';
-
+import { SelectBox } from "@common/business_components/ui";
+import { Label } from "@common/components";
+import useStore from "../../store/useStore";
+import { getData } from "@/components/lib/api/index";
 
 interface ApiSelectOption {
   text: string;
@@ -43,9 +42,9 @@ interface CtpvSggPrcsFcltSelectBoxProps {
   selectValueClassName?: string;
 }
 
-const defaultOption: ApiSelectOption = { val: '0', text: '전체' };
+const defaultOption: ApiSelectOption = { val: "0", text: "전체" };
 const buildFacilityDefaultOption = (facilityName: string): ApiSelectOption => ({
-  val: '0',
+  val: "0",
   text: facilityName || defaultOption.text,
 });
 
@@ -66,15 +65,16 @@ export function CtpvSggPrcsFcltSelectBox({
   compact = false,
   selectValueClassName = "",
 }: CtpvSggPrcsFcltSelectBoxProps) {
-
   const [prcsFcltOptions, setPrcsFcltOptions] = useState<ApiSelectOption[]>([]);
   const { ctpv, sgg } = useStore();
-  const sidoStr = String(sido ?? '');
+  const sidoStr = String(sido ?? "");
   const sidoPrefix = sidoStr.slice(0, 2);
-  const normalizedDefaultFacilityName = String(defaultSwtrmtFcltNm ?? '').trim();
+  const normalizedDefaultFacilityName = String(
+    defaultSwtrmtFcltNm ?? "",
+  ).trim();
 
   useEffect(() => {
-    onSwagePrcsFcltChange?.('0');
+    onSwagePrcsFcltChange?.("0");
 
     const fetchData = async () => {
       if (!sggName) {
@@ -85,25 +85,32 @@ export function CtpvSggPrcsFcltSelectBox({
 
       if (setIsLoading) setIsLoading(true);
       try {
-
         const queryParamsFacility = new URLSearchParams({
-          lyrTypeNm: 'tb_il_swage_prcs_fclt',
-          page: '0',
-          size: '100000', // 요청하신 URL에 맞게 50으로 변경 가능
-          sort: 'string',
+          lyrTypeNm: "tb_il_swage_prcs_fclt",
+          page: "0",
+          size: "100000", // 요청하신 URL에 맞게 50으로 변경 가능
+          sort: "string",
         });
         const cqlFiltersFacility: string[] = [];
         if (sggName) cqlFiltersFacility.push(`sgg_nm ILIKE '%${sggName}%'`);
-        if (cqlFiltersFacility.length > 0) queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and '));
+        if (cqlFiltersFacility.length > 0)
+          queryParamsFacility.append(
+            "cqlFiter",
+            cqlFiltersFacility.join(" and "),
+          );
 
-        const facilityRes = await getData(`v1/fclts?${queryParamsFacility.toString()}`);
+        const facilityRes = await getData(
+          `v1/fclts?${queryParamsFacility.toString()}`,
+        );
 
         const facilities = (facilityRes.data || [])
           .map((item: any) => ({
             text: item.swtrmtFcltNm,
-            val: item.fid
+            val: item.fid,
           }))
-          .sort((a: ApiSelectOption, b: ApiSelectOption) => a.text.localeCompare(b.text, 'ko'));
+          .sort((a: ApiSelectOption, b: ApiSelectOption) =>
+            a.text.localeCompare(b.text, "ko"),
+          );
         setPrcsFcltOptions(facilities);
       } catch (error) {
         console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error);
@@ -121,8 +128,9 @@ export function CtpvSggPrcsFcltSelectBox({
     if (!selectedSwagePrcsFclt || selectedSwagePrcsFclt !== "0") return;
     if (prcsFcltOptions.length === 0) return;
 
-    const matchedDefaultFacility = prcsFcltOptions.find((option) =>
-      String(option.text ?? "").trim() === normalizedDefaultFacilityName,
+    const matchedDefaultFacility = prcsFcltOptions.find(
+      (option) =>
+        String(option.text ?? "").trim() === normalizedDefaultFacilityName,
     );
     if (!matchedDefaultFacility) return;
 
@@ -137,47 +145,77 @@ export function CtpvSggPrcsFcltSelectBox({
   ]);
 
   return (
-    <div className={`flex items-center justify-center ${className} ${compact ? "mr-0" : "mr-8"}`}>
-      <Label className={`${compact ? "mr-1.5 text-base" : "mr-2 text-xl"} whitespace-nowrap font-medium text-gray-600`}>시도</Label>
+    <div
+      className={`flex items-center justify-center ${className} ${compact ? "mr-0" : "mr-8"}`}
+    >
+      <Label
+        className={`${compact ? "mr-1.5" : "mr-2"} whitespace-nowrap text-[1.3rem] font-medium text-label`}
+      >
+        시도
+      </Label>
       <SelectBox
         className={compact ? "mr-4 w-[180px]" : "mr-8 w-48"}
-        selectClass={`${compact ? "w-[180px]" : ""} rounded-lg bg-white ${selectValueClassName}`}
+        selectClass={`${compact ? "w-[180px]" : ""} rounded-lg bg-background ${selectValueClassName}`}
         label=""
         selectArray={[defaultOption, ...ctpv]}
         value={sido}
-        onSelectValue={val => {
+        onSelectValue={(val) => {
           onSidoChange(String(val));
-          if (setCtpvName) setCtpvName(ctpv.find(opt => String(opt.val) === String(val))?.text || "");
+          if (setCtpvName)
+            setCtpvName(
+              ctpv.find((opt) => String(opt.val) === String(val))?.text || "",
+            );
           if (setSwtrmtFcltNm) setSwtrmtFcltNm("");
         }}
         selectContentClass="z-[101]"
       />
-      <Label className={`${compact ? "mr-1.5 text-base" : "mr-2 text-xl"} whitespace-nowrap font-medium text-gray-600`}>시군구</Label>
+      <Label
+        className={`${compact ? "mr-1.5" : "mr-2"} whitespace-nowrap text-[1.3rem] font-medium text-label`}
+      >
+        시군구
+      </Label>
       <SelectBox
         className={compact ? "w-36" : "w-48"}
-        selectClass={`${compact ? "w-36" : "w-48"} truncate rounded-lg bg-white ${selectValueClassName}`}
+        selectClass={`${compact ? "w-36" : "w-48"} truncate rounded-lg bg-background ${selectValueClassName}`}
         label=""
-        selectArray={[defaultOption, ...sgg.filter(opt => opt.val.startsWith(sidoPrefix))]}
+        selectArray={[
+          defaultOption,
+          ...sgg.filter((opt) => opt.val.startsWith(sidoPrefix)),
+        ]}
         value={sigungu}
-        onSelectValue={val => {
-          onSigunguChange(String(val))
-          if (setSggName) setSggName(sgg.find(opt => String(opt.val) === String(val))?.text || "");
-          if (setSwtrmtFcltNm) setSwtrmtFcltNm("")
+        onSelectValue={(val) => {
+          onSigunguChange(String(val));
+          if (setSggName)
+            setSggName(
+              sgg.find((opt) => String(opt.val) === String(val))?.text || "",
+            );
+          if (setSwtrmtFcltNm) setSwtrmtFcltNm("");
         }}
         selectContentClass="z-[101]"
       />
       {selectedSwagePrcsFclt && onSwagePrcsFcltChange && (
         <>
-          <Label className="text-xl text-gray-600 font-medium whitespace-nowrap ml-8 mr-4">하수처리시설명</Label>
+          <Label
+            className={`${compact ? "ml-4 mr-1.5" : "ml-8 mr-4"} whitespace-nowrap text-[1.3rem] font-medium text-label`}
+          >
+            하수처리시설명
+          </Label>
           <SelectBox
             className="w-[160px]"
-            selectClass="rounded-lg bg-white truncate"
+            selectClass={`truncate rounded-lg bg-background ${selectValueClassName}`}
             label=""
-            selectArray={[buildFacilityDefaultOption(normalizedDefaultFacilityName), ...prcsFcltOptions]}
+            selectArray={[
+              buildFacilityDefaultOption(normalizedDefaultFacilityName),
+              ...prcsFcltOptions,
+            ]}
             value={selectedSwagePrcsFclt}
             onSelectValue={(val) => {
-              onSwagePrcsFcltChange?.(String(val))
-              if (setSwtrmtFcltNm) setSwtrmtFcltNm(prcsFcltOptions.find(opt => String(opt.val) === String(val))?.text || "")
+              onSwagePrcsFcltChange?.(String(val));
+              if (setSwtrmtFcltNm)
+                setSwtrmtFcltNm(
+                  prcsFcltOptions.find((opt) => String(opt.val) === String(val))
+                    ?.text || "",
+                );
             }}
             selectContentClass="z-[101]"
           />
diff --git a/apps/sn/app/components/ui/fileUploadForm.tsx b/apps/sn/app/components/ui/fileUploadForm.tsx
index 750effb66..8af347679 100644
--- a/apps/sn/app/components/ui/fileUploadForm.tsx
+++ b/apps/sn/app/components/ui/fileUploadForm.tsx
@@ -9,16 +9,27 @@
  * - 파일 형식 검증 및 미리보기 지원
  * - TUS 프로토콜을 통한 대용량 파일 업로드
  */
-"use client"
+"use client";
 import { FileUploader } from "@common/components";
-import { Button } from '@common/components/ui';
+import { Button } from "@common/components/ui";
 import { handleUpload } from "@/components/lib/utils";
-import { useId, useState } from 'react';
+import { useId, useState } from "react";
 import type { HttpResponse, Upload } from "tus-js-client";
+import { useAlertStore } from "@/shared/lib";
 
 interface FileUploadFormProps {
-  onSubmit?: (files: string, year: string, quarter: string, code: string, id: string) => void;
-  onFileSelect?: (file: File | null, atflCd: string | null, atflId: string | null) => void; // 파일 선택 시 호출될 콜백 추가
+  onSubmit?: (
+    files: string,
+    year: string,
+    quarter: string,
+    code: string,
+    id: string,
+  ) => void;
+  onFileSelect?: (
+    file: File | null,
+    atflCd: string | null,
+    atflId: string | null,
+  ) => void; // 파일 선택 시 호출될 콜백 추가
   showButton?: boolean; // 버튼 표시 여부 (기본값 true)
   showPreview?: boolean; // 파일명 프리뷰 표시 여부
   accept?: string; // 파일 형식 지정
@@ -31,38 +42,48 @@ const FileUploadForm = ({
   showButton = true,
   showPreview = false,
   accept = ".jpeg, .jpg, .png",
-  fileIdx // props에서 fileIdx 받기
+  fileIdx, // props에서 fileIdx 받기
 }: FileUploadFormProps) => {
+  const alert = useAlertStore((state) => state.setMessage);
   const [internalAtflCd, setInternalAtflCd] = useState<string | null>(null);
   const [internalAtflId, setInternalAtflId] = useState<string | null>(null);
   const [currentFile, setCurrentFile] = useState<File | null>(null); // 현재 선택된 파일을 저장할 상태
-  const [fileName, setFileName] = useState<string>('');
+  const [fileName, setFileName] = useState<string>("");
   const [files, setFiles] = useState<FileList | null>(null);
   const [upload, setUpload] = useState<Upload | null>(null);
   const uniqueId = useId(); // 각 FileUploadForm 인스턴스에 대한 고유 ID 생성
   // FileUploader 컴포넌트를 강제로 재마운트하기 위한 key 상태 추가
   const [uploaderKey, setUploaderKey] = useState(0);
 
-  const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }];
+  const quater = [
+    { text: "1분기", val: "1" },
+    { text: "2분기", val: "2" },
+    { text: "3분기", val: "3" },
+    { text: "4분기", val: "4" },
+  ];
   // 현재 년도부터 10년 전까지의 년도 옵션 생성
   const yearOptions = Array.from({ length: 10 }, (_, i) => {
     const year = new Date().getFullYear() - i;
     return { text: `${year}년`, val: year.toString() };
   });
-  const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
-  const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
+  const [selectedYear, setSelectedYear] = useState<string>(
+    yearOptions[0]?.val || "",
+  );
+  const [selectedQuarter, setSelectedQuarter] = useState<string>(
+    quater[0]?.val || "",
+  );
 
   function registFile() {
     if (!currentFile) {
-      alert('파일을 선택해주세요.');
+      alert("파일을 선택해주세요.");
       return;
     }
     if (!selectedYear) {
-      alert('등록년도를 선택해주세요.');
+      alert("등록년도를 선택해주세요.");
       return;
     }
     if (!selectedQuarter) {
-      alert('분기를 선택해주세요.');
+      alert("분기를 선택해주세요.");
       return;
     }
 
@@ -72,27 +93,36 @@ const FileUploadForm = ({
       handleUploadWithResponse(files, currentFile)
         .then(({ atflCd, atflId }) => {
           // 업로드 완료 후 onSubmit 실행
-          console.log('fileNm', fileNm);
-          console.log('selectedYear', selectedYear);
-          console.log('selectedQuarter', selectedQuarter);
-          console.log('atflCd', atflCd);
-          console.log('atflId', atflId);
-          onSubmit(fileNm, selectedYear, selectedQuarter, atflCd || '', atflId || '');
+          console.log("fileNm", fileNm);
+          console.log("selectedYear", selectedYear);
+          console.log("selectedQuarter", selectedQuarter);
+          console.log("atflCd", atflCd);
+          console.log("atflId", atflId);
+          onSubmit(
+            fileNm,
+            selectedYear,
+            selectedQuarter,
+            atflCd || "",
+            atflId || "",
+          );
 
           // UI 초기화
           setFiles(null);
-          setFileName('');
-          setUploaderKey(prev => prev + 1);
+          setFileName("");
+          setUploaderKey((prev) => prev + 1);
         })
         .catch((error) => {
-          console.error('파일 업로드 실패:', error);
-          alert('파일 업로드 중 오류가 발생했습니다.');
+          console.error("파일 업로드 실패:", error);
+          alert("파일 업로드 중 오류가 발생했습니다.");
         });
     }
   }
 
   // handleUpload를 Promise로 감싸는 헬퍼 함수
-  function handleUploadWithResponse(files: FileList, file: File): Promise<{ atflCd: string | null, atflId: string | null }> {
+  function handleUploadWithResponse(
+    files: FileList,
+    file: File,
+  ): Promise<{ atflCd: string | null; atflId: string | null }> {
     return new Promise((resolve, reject) => {
       const uploadResponseHandler = async (res: HttpResponse) => {
         try {
@@ -102,7 +132,8 @@ const FileUploadForm = ({
             return;
           }
 
-          const { atflCd: newAtflCd, atflId: newAtflId } = JSON.parse(fileInfo) ?? {};
+          const { atflCd: newAtflCd, atflId: newAtflId } =
+            JSON.parse(fileInfo) ?? {};
 
           // 내부 상태도 업데이트 (다른 용도로 사용할 수 있음)
           setInternalAtflCd(newAtflCd);
@@ -121,11 +152,11 @@ const FileUploadForm = ({
       };
 
       const uploadErrorHandler = (error: Error) => {
-        console.error('Upload failed:', error);
+        console.error("Upload failed:", error);
         reject(error);
       };
 
-      console.log('Starting upload for files:', files);
+      console.log("Starting upload for files:", files);
 
       // 기존 handleUpload 유틸리티 사용 (수정하지 않음)
       handleUpload(files, {
@@ -136,16 +167,23 @@ const FileUploadForm = ({
     });
   }
 
-
   return (
-    <div> {/* 컴포넌트 루트 div */}
-      <div className="card p-6"> {/* 카드 스타일링 */}
-        <div className='flex items-center gap-2'> {/* FileUploader와 Button을 정렬하는 메인 flex 컨테이너 */}
-          <div className="w-[300px] mr-4"> {/* FileUploader의 너비와 오른쪽 여백을 제어하는 컨테이너 */}
+    <div>
+      {" "}
+      {/* 컴포넌트 루트 div */}
+      <div className="card p-6">
+        {" "}
+        {/* 카드 스타일링 */}
+        <div className="flex items-center gap-2">
+          {" "}
+          {/* FileUploader와 Button을 정렬하는 메인 flex 컨테이너 */}
+          <div className="mr-4 w-[300px]">
+            {" "}
+            {/* FileUploader의 너비와 오른쪽 여백을 제어하는 컨테이너 */}
             <FileUploader
               key={uploaderKey} // key 추가: 변경 시 컴포넌트 재마운트됨
               id={uniqueId}
-              className="!h-auto !max-w-none flex-row items-center gap-2"
+              className="!h-auto !max-w-none flex-row items-center gap-2 [&_.file-uploader-label]:h-[3.2rem]"
               accept={accept}
               onUpload={(e) => {
                 const selectedFiles = e.target.files;
@@ -167,9 +205,9 @@ const FileUploadForm = ({
                 setFileName(firstFile.name);
                 setCurrentFile(firstFile);
 
-                console.log('selectedFiles', selectedFiles);
-                console.log('firstFile', firstFile);
-                console.log('firstFile name', firstFile.name);
+                console.log("selectedFiles", selectedFiles);
+                console.log("firstFile", firstFile);
+                console.log("firstFile name", firstFile.name);
 
                 if (onFileSelect) {
                   onFileSelect(firstFile, internalAtflCd, internalAtflId);
@@ -188,8 +226,7 @@ const FileUploadForm = ({
           </div>
           {showButton ? ( // showButton이 true일 때만 버튼 렌더링
             <Button
-              className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
-              size="sm"
+              className="hover:bg-primary/90 rounded-sm bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
               onClick={() => registFile()}
             >
               등록
@@ -198,7 +235,7 @@ const FileUploadForm = ({
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default FileUploadForm
\ No newline at end of file
+export default FileUploadForm;
diff --git a/apps/sn/app/components/ui/operFileUploadForm.tsx b/apps/sn/app/components/ui/operFileUploadForm.tsx
index d4c2e5eeb..022fe7170 100644
--- a/apps/sn/app/components/ui/operFileUploadForm.tsx
+++ b/apps/sn/app/components/ui/operFileUploadForm.tsx
@@ -9,23 +9,41 @@
  * - 콜백 함수를 통한 업로드 결과 전달
  * - TUS 프로토콜을 통한 대용량 파일 업로드
  */
-"use client"
-import { SelectBox } from '@common/business_components/ui';
-import React, { useState, useEffect } from 'react'
-import FileUploadForm from './fileUploadForm';
-import { yearOptions, getQuarterOptions } from '@/components/lib/utils';
+"use client";
+import { SelectBox } from "@common/business_components/ui";
+import React, { useState, useEffect } from "react";
+import FileUploadForm from "./fileUploadForm";
+import { yearOptions, getQuarterOptions } from "@/components/lib/utils";
 
-const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (files: string, year: string, quarter: string, code: string, id: string) => void }) => {
-  const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
-  const [quaterOptions, setQuaterOptions] = useState(() => getQuarterOptions(selectedYear));
-  const [selectedQuarter, setSelectedQuarter] = useState<string>(quaterOptions[0]?.val || '');
+const operFileUploadForm = ({
+  title,
+  onSubmit,
+}: {
+  title: string;
+  onSubmit: (
+    files: string,
+    year: string,
+    quarter: string,
+    code: string,
+    id: string,
+  ) => void;
+}) => {
+  const [selectedYear, setSelectedYear] = useState<string>(
+    yearOptions[0]?.val || "",
+  );
+  const [quaterOptions, setQuaterOptions] = useState(() =>
+    getQuarterOptions(selectedYear),
+  );
+  const [selectedQuarter, setSelectedQuarter] = useState<string>(
+    quaterOptions[0]?.val || "",
+  );
 
   // 년도가 변경될 때 분기 옵션 업데이트
   useEffect(() => {
     const updatedQuarterOptions = getQuarterOptions(selectedYear);
     setQuaterOptions(updatedQuarterOptions);
     // 분기 옵션이 변경되면 첫 번째 옵션으로 자동 선택
-    setSelectedQuarter(updatedQuarterOptions[0]?.val || '');
+    setSelectedQuarter(updatedQuarterOptions[0]?.val || "");
   }, [selectedYear]);
 
   // 년도 변경 핸들러
@@ -36,15 +54,15 @@ const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (fil
 
   return (
     <div>
-      <div className='card-header'>
+      <div className="card-header">
         <h3 className="text-2xl font-medium">{title}</h3>
       </div>
       <div className="card p-6">
-        <div className="grid grid-col-2 items-center space-x-4">
-          <div className='flex'>
+        <div className="grid-col-2 grid items-center space-x-4">
+          <div className="flex">
             <SelectBox
-              className="w-50 mr-3 ml-4"
-              selectClass="rounded-lg bg-white"
+              className="w-50 ml-4 mr-3"
+              selectClass="rounded-lg bg-background"
               label="년도"
               selectArray={yearOptions}
               onSelectValue={handleYearChange}
@@ -52,24 +70,33 @@ const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (fil
             />
             <SelectBox
               className="w-50"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-background"
               label="분기"
               selectArray={quaterOptions}
-              onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
+              onSelectValue={(value: string | number) =>
+                setSelectedQuarter(String(value))
+              }
               value={selectedQuarter}
             />
             <FileUploadForm
               onSubmit={(files, year, quarter, code, id) => {
-                onSubmit(files, (selectedYear ?? year) || '', (selectedQuarter ?? quarter) || '', code, id);
+                onSubmit(
+                  files,
+                  (selectedYear ?? year) || "",
+                  (selectedQuarter ?? quarter) || "",
+                  code,
+                  id,
+                );
               }}
               showButton={true}
               showPreview={true}
-              accept={""} />
+              accept={""}
+            />
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default operFileUploadForm
\ No newline at end of file
+export default operFileUploadForm;
diff --git a/apps/sn/app/components/ui/toast.tsx b/apps/sn/app/components/ui/toast.tsx
index 06054a4aa..bc7e5d134 100644
--- a/apps/sn/app/components/ui/toast.tsx
+++ b/apps/sn/app/components/ui/toast.tsx
@@ -12,11 +12,15 @@
 import { Button } from "@common/components/ui";
 import toast from "react-hot-toast";
 
-export const confirmToast = (content: string, saveFunc: () => void, contentClass?:string) => {
+export const confirmToast = (
+  content: string,
+  saveFunc: () => void,
+  contentClass?: string,
+) => {
   toast(
     (t) => (
       <span className="flex flex-col items-center">
-        <div className={`mb-6 ${contentClass}`} >{content}</div>
+        <div className={`mb-6 ${contentClass}`}>{content}</div>
         <div className="flex flex-row space-x-2">
           <Button
             size={"sm"}
@@ -36,7 +40,7 @@ export const confirmToast = (content: string, saveFunc: () => void, contentClass
     {
       id: "global-confirm-toast", // 중복 토스트 방지
       duration: Infinity, // 자동 사라짐 방지
-    }
+    },
   );
 };
 
@@ -44,16 +48,15 @@ export const showConfirmToast = (message: string) => {
   toast.custom(
     (t) => (
       <div
-        className={`w-[500px] min-h-[140px] bg-white shadow-lg rounded-xl p-6 border border-gray-200
-      ${t.visible ? "animate-enter" : "animate-leave"}`}
+        className={`min-h-[140px] w-[500px] rounded-xl border border-border bg-background p-6 shadow-lg ${t.visible ? "animate-enter" : "animate-leave"}`}
       >
-        <div className="text-3xl font-extrabold text-red-600 bg-yellow-100 px-4 py-2 rounded-md shadow-md">
+        <div className="rounded-md bg-yellow-100 px-4 py-2 text-3xl font-extrabold text-red-600 shadow-md">
           {message}
         </div>{" "}
         <div className="flex justify-end gap-2">
           <Button
             size={"sm"}
-            className="px-4 py-1.5 rounded bg-gray-200 text-sm hover:bg-gray-300"
+            className="rounded bg-secondary px-4 py-1.5 text-sm text-secondary-foreground hover:bg-accent"
             onClick={() => toast.dismiss(t.id)}
           >
             확인완료
@@ -61,6 +64,6 @@ export const showConfirmToast = (message: string) => {
         </div>
       </div>
     ),
-    { duration: Infinity }
+    { duration: Infinity },
   ); // 수동 닫기
-};
\ No newline at end of file
+};
diff --git a/apps/sn/app/components/ui/verticalTable.tsx b/apps/sn/app/components/ui/verticalTable.tsx
index a03641e1e..3a012de61 100644
--- a/apps/sn/app/components/ui/verticalTable.tsx
+++ b/apps/sn/app/components/ui/verticalTable.tsx
@@ -10,10 +10,14 @@
  * - 폼 데이터 변경 콜백 및 저장 기능
  */
 import UiPageNations from "@common/business_components/ui/table/uiPageNations";
-import { Table, TableBody, TableCell, TableRow, Button } from "@common/components";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@common/components";
 import { useEffect, useState } from "react";
-import { confirmToast, showConfirmToast } from '@/components/ui/toast'
-import { toast, Toaster } from "react-hot-toast";
 
 type UiTableProps = {
   headName: React.ReactNode | undefined;
@@ -34,7 +38,9 @@ type UiTableProps = {
   pageSize2?: number;
   total2?: number;
   children2?: Record<string, React.ReactNode> | undefined;
-  cellClick2?: ((index: number | undefined, headId: string) => void) | undefined;
+  cellClick2?:
+    | ((index: number | undefined, headId: string) => void)
+    | undefined;
   onPageChange2?: (page: number) => void;
   className2?: string;
   resetPageNo2?: boolean;
@@ -42,7 +48,9 @@ type UiTableProps = {
   showSecondTable?: boolean;
   showSaveButton?: boolean;
   onSaveClick?: () => void;
-  onFormDataChange?: (formData: { [key: string]: string | number | boolean }) => void; // 추가
+  onFormDataChange?: (formData: {
+    [key: string]: string | number | boolean;
+  }) => void; // 추가
 };
 
 type UiSelectOption =
@@ -68,10 +76,14 @@ type UiHeadProps = {
 };
 
 const getSelectOptionValue = (option: UiSelectOption) =>
-  typeof option === "string" ? option : String(option.value ?? option.val ?? "");
+  typeof option === "string"
+    ? option
+    : String(option.value ?? option.val ?? "");
 
 const getSelectOptionLabel = (option: UiSelectOption) =>
-  typeof option === "string" ? option : String(option.label ?? option.text ?? getSelectOptionValue(option));
+  typeof option === "string"
+    ? option
+    : String(option.label ?? option.text ?? getSelectOptionValue(option));
 
 const isSelectOptionHidden = (option: UiSelectOption) =>
   typeof option === "string" ? false : Boolean(option.hidden);
@@ -97,7 +109,9 @@ export function VerticalTable({
   onFormDataChange,
 }: UiTableProps) {
   const [cur, setCur] = useState<number>(1);
-  const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({});
+  const [formData, setFormData] = useState<{
+    [key: string]: string | number | boolean;
+  }>({});
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
 
   useEffect(() => {
@@ -123,7 +137,7 @@ export function VerticalTable({
     setFormData(newFormData);
 
     if (errors[id]) {
-      setErrors(prev => {
+      setErrors((prev) => {
         const newErrors = { ...prev };
         delete newErrors[id];
         return newErrors;
@@ -141,9 +155,9 @@ export function VerticalTable({
   };
 
   const showError = (fieldId: string, message: string) => {
-    setErrors(prev => ({
+    setErrors((prev) => ({
       ...prev,
-      [fieldId]: message
+      [fieldId]: message,
     }));
   };
 
@@ -151,39 +165,46 @@ export function VerticalTable({
     <>
       {headName ? (
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl mx-3 font-medium text-label">{headName}</h3>
+          <h3 className="mx-3 text-2xl font-medium text-label">{headName}</h3>
           {showSaveButton && onSaveClick && (
-            <Button
-              onClick={onSaveClick}
-              className="px-4 mr-3 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
-            >
+            <Button type="button" color="primary" onClick={onSaveClick}>
               저장
             </Button>
           )}
         </div>
       ) : null}
-      <div className={`card !m-[1.2rem] !p-0r ${className}`}>
+      <div className={`card !m-[1.2rem] !p-0 ${className}`}>
         {tableName1 && ( // tableName prop이 있으면 표시
-          <div className="text-xl font-semibold my-2 mx-3">{tableName1}</div>
+          <div className="mx-3 my-2 text-xl font-semibold">{tableName1}</div>
         )}
         <Table variant="secondary">
           <TableBody className="text-center">
             {headlist?.map((head) => (
               <TableRow key={head.id}>
                 {/* 컬럼 제목 */}
-                <TableCell className={`font-bold bg-blue-100 text-xs w-[120px] whitespace-nowrap`}>
+                <TableCell className="w-[120px] whitespace-nowrap bg-secondary text-xs font-bold text-label">
                   {head.title}
-                  {head.required ? <span className="ml-1 text-red-600">*</span> : null}
+                  {head.required ? (
+                    <span className="ml-1 text-red-600">*</span>
+                  ) : null}
                 </TableCell>
                 {/* 데이터 값 또는 입력 필드 */}
                 <TableCell className="text-xs">
-                  {children && children[head.id] ? children[head.id] : isEditable ? (
+                  {children && children[head.id] ? (
+                    children[head.id]
+                  ) : isEditable ? (
                     head.type === "select" ? (
                       <select
                         id={head.id}
-                        value={formData[head.id] !== undefined ? String(formData[head.id]) : ""}
-                        onChange={(e) => handleInputChange(head.id, e.target.value)}
-                        className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
+                        value={
+                          formData[head.id] !== undefined
+                            ? String(formData[head.id])
+                            : ""
+                        }
+                        onChange={(e) =>
+                          handleInputChange(head.id, e.target.value)
+                        }
+                        className="border-radius-0 w-full rounded-sm border border-border px-2 py-1 text-xl"
                       >
                         {head.options?.map((option, optionIndex) => {
                           const optionValue = getSelectOptionValue(option);
@@ -215,35 +236,51 @@ export function VerticalTable({
 
                               const isValidNumber = /^[0-9]+$/.test(newValue);
                               if (!isValidNumber) {
-                                showError(head.id, `${head.title}는 숫자만 입력 가능합니다.`);
+                                showError(
+                                  head.id,
+                                  `${head.title}는 숫자만 입력 가능합니다.`,
+                                );
                                 return;
                               }
 
-                              if (head.length && newValue.length > head.length) {
-                                showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
+                              if (
+                                head.length &&
+                                newValue.length > head.length
+                              ) {
+                                showError(
+                                  head.id,
+                                  `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`,
+                                );
                                 return;
                               }
 
                               const numericValue = parseInt(newValue);
-                              if (isNaN(numericValue) || numericValue < 0) return;
+                              if (isNaN(numericValue) || numericValue < 0)
+                                return;
 
                               handleInputChange(head.id, numericValue);
                             } else {
                               const newValue = e.target.value;
 
-                              if (head.length && newValue.length > head.length) {
-                                showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
+                              if (
+                                head.length &&
+                                newValue.length > head.length
+                              ) {
+                                showError(
+                                  head.id,
+                                  `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`,
+                                );
                                 return;
                               }
 
                               handleInputChange(head.id, e.target.value);
                             }
                           }}
-                          className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
+                          className="border-radius-0 w-full rounded-sm border border-border px-2 py-1 text-xl"
                           placeholder={head.placeholder}
                         />
                         {errors[head.id] && (
-                          <div className="text-red-500 font-bold text-xl mt-1 text-left">
+                          <div className="mt-1 text-left text-xl font-bold text-red-500">
                             {errors[head.id]}
                           </div>
                         )}
@@ -260,7 +297,9 @@ export function VerticalTable({
           </TableBody>
         </Table>
         {tableName2 && ( // tableName prop이 있으면 표시
-          <div className="text-xl font-semibold mt-8 my-2 mx-3">{tableName2}</div>
+          <div className="mx-3 my-2 mt-8 text-xl font-semibold">
+            {tableName2}
+          </div>
         )}
         {showSecondTable && (
           <Table variant="secondary">
@@ -268,19 +307,29 @@ export function VerticalTable({
               {headlist2?.map((head) => (
                 <TableRow key={head.id}>
                   {/* 컬럼 제목 */}
-                  <TableCell className={`font-bold bg-blue-100 text-xs w-[120px] whitespace-nowrap`}>
-                  {head.title}
-                  {head.required ? <span className="ml-1 text-red-600">*</span> : null}
-                </TableCell>
+                  <TableCell className="w-[120px] whitespace-nowrap bg-secondary text-xs font-bold text-label">
+                    {head.title}
+                    {head.required ? (
+                      <span className="ml-1 text-red-600">*</span>
+                    ) : null}
+                  </TableCell>
                   {/* 데이터 값 또는 입력 필드 */}
                   <TableCell className="text-xs">
-                    {children && children[head.id] ? children[head.id] : isEditable2 ? (
+                    {children && children[head.id] ? (
+                      children[head.id]
+                    ) : isEditable2 ? (
                       head.type === "select" ? (
                         <select
                           id={head.id}
-                          value={formData[head.id] !== undefined ? String(formData[head.id]) : ""}
-                          onChange={(e) => handleInputChange(head.id, e.target.value)}
-                          className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
+                          value={
+                            formData[head.id] !== undefined
+                              ? String(formData[head.id])
+                              : ""
+                          }
+                          onChange={(e) =>
+                            handleInputChange(head.id, e.target.value)
+                          }
+                          className="border-radius-0 w-full rounded-sm border border-border px-2 py-1 text-xl"
                         >
                           {head.options?.map((option, optionIndex) => {
                             const optionValue = getSelectOptionValue(option);
@@ -299,8 +348,18 @@ export function VerticalTable({
                         <div className="w-full">
                           <input
                             id={head.id}
-                            type={head.type === "date" ? "date" : head.isNumber ? "number" : "text"}
-                            value={formData[head.id] !== undefined ? String(formData[head.id]) : ""}
+                            type={
+                              head.type === "date"
+                                ? "date"
+                                : head.isNumber
+                                  ? "number"
+                                  : "text"
+                            }
+                            value={
+                              formData[head.id] !== undefined
+                                ? String(formData[head.id])
+                                : ""
+                            }
                             onChange={(e) => {
                               if (head.isNumber) {
                                 const newValue = e.target.value;
@@ -312,35 +371,51 @@ export function VerticalTable({
 
                                 const isValidNumber = /^[0-9]+$/.test(newValue);
                                 if (!isValidNumber) {
-                                  showError(head.id, `${head.title}는 숫자만 입력 가능합니다.`);
+                                  showError(
+                                    head.id,
+                                    `${head.title}는 숫자만 입력 가능합니다.`,
+                                  );
                                   return;
                                 }
 
-                                if (head.length && newValue.length > head.length) {
-                                  showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
+                                if (
+                                  head.length &&
+                                  newValue.length > head.length
+                                ) {
+                                  showError(
+                                    head.id,
+                                    `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`,
+                                  );
                                   return;
                                 }
 
                                 const numericValue = parseInt(newValue);
-                                if (isNaN(numericValue) || numericValue < 0) return;
+                                if (isNaN(numericValue) || numericValue < 0)
+                                  return;
 
                                 handleInputChange(head.id, numericValue);
                               } else {
                                 const newValue = e.target.value;
 
-                                if (head.length && newValue.length > head.length) {
-                                  showError(head.id, `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`);
+                                if (
+                                  head.length &&
+                                  newValue.length > head.length
+                                ) {
+                                  showError(
+                                    head.id,
+                                    `${head.title}는 최대 ${head.length}자까지 입력 가능합니다.`,
+                                  );
                                   return;
                                 }
 
                                 handleInputChange(head.id, e.target.value);
                               }
                             }}
-                            className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
+                            className="border-radius-0 w-full rounded-sm border border-border px-2 py-1 text-xl"
                             placeholder={head.placeholder}
                           />
                           {errors[head.id] && (
-                            <div className="text-red-500 font-bold text-xl mt-1 text-left">
+                            <div className="mt-1 text-left text-xl font-bold text-red-500">
                               {errors[head.id]}
                             </div>
                           )}
@@ -366,7 +441,6 @@ export function VerticalTable({
           />
         )}
       </div>
-      <Toaster position="top-center"></Toaster>
     </>
   );
 }
diff --git a/apps/sn/app/store/useSearchModalStore.ts b/apps/sn/app/store/useSearchModalStore.ts
index 18c694898..5e606db2e 100644
--- a/apps/sn/app/store/useSearchModalStore.ts
+++ b/apps/sn/app/store/useSearchModalStore.ts
@@ -11,8 +11,9 @@
  * - 데이터 변경 감지 및 불필요한 재렌더링 방지
  */
 import { create } from "zustand";
-import type { UiTableSort } from "@common/business_components/ui";
 
+export const SEARCH_MODAL_DEFAULT_BASIC_TYPE = "tb_ms_swage_ppl";
+export const SEARCH_MODAL_DEFAULT_WORK_TYPE = "['200', '201', '204']";
 
 // 날짜 조합 함수
 const getDateString = (
@@ -51,10 +52,6 @@ export interface SearchModalState {
   // 페이지네이션
   curPage: number;
   detailCurPage: number;
-  // 기본정보·유지관리 사업·보고서 목록이 공유하는 현재 단일 정렬 상태
-  sort?: UiTableSort;
-  // 유지관리 상세 목록의 현재 단일 정렬 상태
-  detailSort?: UiTableSort;
   // 로딩 상태
   isLoading: boolean;
   isDetailLoading: boolean;
@@ -98,8 +95,6 @@ export interface SearchModalState {
   setDetailTableCount: (count: number) => void;
   setCurPage: (page: number) => void;
   setDetailCurPage: (page: number) => void;
-  setSort: (sort?: UiTableSort) => void;
-  setDetailSort: (sort?: UiTableSort) => void;
   setIsLoading: (loading: boolean) => void;
   setIsDetailLoading: (loading: boolean) => void;
   setIsResetPage: (reset: boolean) => void;
@@ -119,15 +114,20 @@ export interface SearchModalState {
   setVar2: (val: string) => void;
   setYearFilter: (filter: { start: string; end: string }) => void;
 
-  getDateString: (year: string, month: string, day: string, defaultDate: string) => string;
+  getDateString: (
+    year: string,
+    month: string,
+    day: string,
+    defaultDate: string,
+  ) => string;
   resetFilters: () => void; // 초기화 액션
 }
 
 const useSearchModalStore = create<SearchModalState>((set) => ({
   isSearchModalOpen: false,
   activeTab: "basic",
-  basicType: "tb_ms_swage_ppl",
-  workType: "['200', '201', '204']",
+  basicType: SEARCH_MODAL_DEFAULT_BASIC_TYPE,
+  workType: SEARCH_MODAL_DEFAULT_WORK_TYPE,
   showTable: false,
   tableData: [],
   detailTableData: [],
@@ -135,8 +135,6 @@ const useSearchModalStore = create<SearchModalState>((set) => ({
   detailTableCount: 0,
   curPage: 1,
   detailCurPage: 1,
-  sort: undefined,
-  detailSort: undefined,
   isLoading: false,
   isDetailLoading: false,
   isResetPage: false,
@@ -170,8 +168,6 @@ const useSearchModalStore = create<SearchModalState>((set) => ({
   setDetailTableCount: (count) => set({ detailTableCount: count }),
   setCurPage: (page) => set({ curPage: page }),
   setDetailCurPage: (page) => set({ detailCurPage: page }),
-  setSort: (sort) => set({ sort }),
-  setDetailSort: (detailSort) => set({ detailSort }),
   setIsLoading: (loading) => set({ isLoading: loading }),
   setIsDetailLoading: (loading) => set({ isDetailLoading: loading }),
   setIsResetPage: (reset) => set({ isResetPage: reset }),
@@ -190,7 +186,7 @@ const useSearchModalStore = create<SearchModalState>((set) => ({
   setVar1: (val) => set({ var1: val }),
   setVar2: (val) => set({ var2: val }),
   setYearFilter: (filter) => set({ yearFilter: filter }),
-  
+
   getDateString: getDateString,
   // 초기화 액션
   resetFilters: () =>
@@ -203,7 +199,9 @@ const useSearchModalStore = create<SearchModalState>((set) => ({
       var1: "",
       var2: "",
       ctpvCd: "0",
+      ctpvName: "",
       sggCd: "0",
+      sggName: "",
       yearFilter: { start: "", end: "" },
       tableData: [],
       detailTableData: [],
@@ -211,8 +209,6 @@ const useSearchModalStore = create<SearchModalState>((set) => ({
       detailTableCount: 0,
       curPage: 1,
       detailCurPage: 1,
-      sort: undefined,
-      detailSort: undefined,
       isResetPage: true,
       isResetDetailPage: true,
       isResetSelection: true,
diff --git a/apps/sn/docs/작업내용/SFR-010-004~SFR-010-007-조사사업/001-fe-SFR-010-004~007-조사사업-통합구현기록.md b/apps/sn/docs/작업내용/SFR-010-004~SFR-010-007-조사사업/001-fe-SFR-010-004~007-조사사업-통합구현기록.md
index 417bb10d0..24aa95c8c 100644
--- a/apps/sn/docs/작업내용/SFR-010-004~SFR-010-007-조사사업/001-fe-SFR-010-004~007-조사사업-통합구현기록.md
+++ b/apps/sn/docs/작업내용/SFR-010-004~SFR-010-007-조사사업/001-fe-SFR-010-004~007-조사사업-통합구현기록.md
@@ -854,3 +854,83 @@
 - 공통 지도 선택기가 선택된 피처의 실제 OpenLayers 레이어 스타일 함수를 우선 사용하도록 변경했다.
 - 점 시설은 선택 원형 강조를 먼저 그리고 원래 아이콘을 위에 다시 그려, 선택 중에도 대상 맨홀을 식별할 수 있게 했다.
 - 선형 시설의 기존 선택 강조 순서는 유지했으며 API·DB·백엔드 동작은 변경하지 않았다.
+
+## 41. 2026-08-12 CS 기준 조사·처리분구 화면 UI 통일
+
+### 추적 근거
+
+- 요구사항정의서 `3. (기능)요구사항정의 및 추적표`의 `SFR-010-004`~`SFR-010-007`을 다시 확인했다.
+- 화면설계서의 조사관리 화면 `SN_MN040101`~`SN_MN040110`(슬라이드 37, 41~49)을 대조했다.
+- 이번 변경은 조회·등록·수정·상세 기능과 API 계약을 유지한 UI 설계 보완이다.
+
+### 변경 내용
+
+- 메뉴명이 `관리`로 끝나는 목록 카드 제목은 `관리`를 제외하는 규칙을 적용했다.
+  - `조사관리` → `조사 목록`
+  - `처리분구관리` → `처리분구 목록`
+- 목록의 총 건수 문구와 열 정렬 UI·정렬 동작을 제거해 CS 목록 화면 기준에 맞췄다.
+- 검색조건은 공통 `Label`, `Input`, `Select`, `Button`으로 바꾸고 `조회`, `초기화` 순서와 간격을 공통 규칙으로 통일했다.
+- 조사사업·처리분구 목록은 공통 `StandardDataTable`을 사용하며 페이지당 10건, 자연 높이, 윈도우 세로 스크롤을 적용했다. 가로 폭이 충분하지 않은 표만 내부 가로 스크롤을 표시한다.
+- 조사 상세현황의 종합집계표는 내부 세로 스크롤을 제거하고 서버 제공 순서를 유지했다.
+- 조사사업 등록·상세/수정은 공통 `StandardFormSection`, `StandardFormField`를 사용해 사업차수·사업년도·정밀조사 연장과 시도·시군구·사업명을 각각 한 행 3개 항목으로 배치했다.
+- 처리분구는 별도 등록·상세 화면이 없는 기존 계약을 유지해 목록 안의 추가·수정·삭제·저장 방식은 보존하고 표와 버튼 UI만 통일했다.
+- 백엔드 API, 요청·응답 DTO, DB 구조는 변경하지 않았다.
+
+### 공통 컴포넌트와 화면 전용 처리
+
+- 그대로 사용: 공통 `Button`, `Input`, `Label`, `Select`, `StandardDataTable`.
+- 공통 래퍼 추가: 업무 비종속 `StandardFormSection`, `StandardFormField`. `sn` 접두어와 조사 업무 로직은 포함하지 않아 다른 앱에서도 재사용할 수 있다.
+- 화면 전용 유지: 조사 상세현황의 합계 행·결함 건수 링크, 처리분구 인라인 편집·변경 상태 표현, 조사 결과 업로드 흐름.
+
+### 검증 결과
+
+- `node node_modules/typescript/bin/tsc --noEmit --pretty false --ignoreDeprecations 5.0`을 `apps/sn`에서 실행해 오류 없이 통과했다.
+- 로그인 브라우저에서 `/oper/exmn/register`와 `/oper/trtdst`를 직접 확인했다.
+- `조사 목록`, `처리분구 목록` 제목, 조회·초기화 버튼, 정렬 버튼 미표시, 표 헤더 가운데 정렬, 페이지당 10건, 내부 세로 스크롤 미표시를 확인했다.
+- 조사사업 행 선택 후 상세현황 표시, 조사사업 등록의 3열 2행 폼, 처리분구 행 선택 후 인라인 수정 입력 전환을 확인했다.
+- 사용자가 실행 중인 개발 서버를 보호하기 위해 Next 빌드는 수행하지 않았다.
+
+## 42. 2026-08-12 조사 상세 그리드·WindowPopup UI 및 순번 규칙 통일
+
+### 추적 근거
+
+- 요구사항정의서 `3. (기능)요구사항정의 및 추적표`의 `SFR-010-004`~`SFR-010-007`을 직접 재확인했다.
+- 화면설계서 슬라이드 37, 41~49의 `SN_MN040101`~`SN_MN040110` 조사사업 목록·등록·상세·결과등록 화면을 대조했다.
+- 기존 기능·API 계약을 유지하면서 사용자가 지정한 CS UI 기준을 팝업까지 확장한 설계 보완이다.
+
+### 변경 내용
+
+- 조사 목록, 관로·맨홀 상세 집계 및 처리분구 목록의 `NO` 헤더를 `순번`으로 통일하고 전체 건수에서 시작하는 내림차순 순번을 적용했다.
+- 조사 상세현황 그리드를 CS 기본 표의 파란 헤더·흰 글씨·가운데 정렬로 바꾸고 내부의 `관로조사 종합집계표`, `맨홀조사 종합집계표` 제목을 삭제했다.
+- 업무에 종속되지 않는 `StandardPopupLayout`과 공통 순번 계산 함수 `getStandardRowNumber`를 `business_components`에 추가했다.
+- 조사사업 등록·수정, 조사 결과 업로드, 조사 상세보기, 관로 조사보고서 WindowPopup을 `StandardPopupLayout`과 공통 `Button`, `Input`, `Select`, `StandardFormSection`, `StandardFormField` 기준으로 통일했다.
+- 조사 결과 업로드의 파일 표와 조사 상세보기의 복합 그리드·본단위구간 그리드도 CS 기본 표 헤더 색상과 가운데 정렬을 적용했다.
+- 기존 녹색 팝업 버튼과 화면 전용 파란 헤더를 제거했으며 정렬 UI와 정렬 동작은 추가하지 않았다.
+- 조사사업 저장·양식 다운로드, 결과 파일 선택·검토·저장, 결함 필터·다운로드, 관로 보고서 PDF 조회 기능은 보존했다.
+- 백엔드 API, 요청·응답 DTO와 DB 구조는 변경하지 않았다.
+
+### 검증 결과
+
+- 로그인 브라우저에서 `/oper/exmn/register`를 조회해 목록 `순번`이 `5`부터 `1`까지 표시되는 것을 확인했다.
+- 첫 사업을 선택해 조사 상세현황의 두 처리분구가 `2`, `1`로 표시되고, 두 종합집계표 제목이 없으며 표 헤더가 CS 기본 스타일로 표시되는 것을 확인했다.
+- `/popup/exmnBusinessRegister`, `/popup/exmnResultRegister`, `/popup/exmnSurveyDetail`, `/popup/exmnPipeReport`를 직접 열어 카드형 헤더·버튼·폼·표·PDF 상태 영역을 확인했다. 테스트용 임의 ID로 연 화면의 API `ERROR` 표시는 예상된 조회 결과이며 UI 렌더링 검증에만 사용했다.
+- TypeScript 전체 검사는 이번 변경 파일의 오류가 없음을 확인했으나, 작업 범위 밖 지도·공통 메뉴와 기존 `ExmnSurveyResultSection`, `exmn-business-api`, `ObsltPplFormPage` 오류 때문에 전체 명령은 실패했다.
+- 사용자가 실행 중인 개발 서버를 보호하기 위해 Next 빌드는 수행하지 않았다.
+
+## 43. 2026-08-12 조사사업 등록 팝업 버튼·처리분구 영역 재정렬
+
+- 사용자 확인에 따라 처리분구 선택 UI의 그리드 전환은 보류하고 기존 3열 체크박스 카드와 검색·일괄선택 기능을 유지했다.
+- 조사사업 등록 상단 버튼을 준설 등록과 같은 공통 기본 규격(높이 32px, 글자 13px)으로 변경하고 취소 버튼을 추가했다.
+- 처리분구 영역은 CS 카드 헤더 규칙을 적용하고 타이틀, 검색 입력, 선택 버튼, 선택 건수와 빈 상태 안내를 공통 13px 글꼴·색상·간격으로 통일했다.
+- 동일한 이름의 시군구가 여러 시도에 존재해도 선택 시도의 코드 앞자리 안에서 일치하는 항목을 찾도록 상세값 복원 로직을 보완했다.
+- 로그인 브라우저에서 `/popup/exmnBusinessRegister`를 직접 열어 상단 버튼 높이·글자 크기, 처리분구 타이틀·검색 입력·선택 건수·빈 상태 안내의 계산 스타일을 확인했다. 인천광역시의 고유 시군구와 동명 시군구를 차례로 선택해 시군구 선택값 유지도 확인했다.
+- 대상 파일은 Prettier와 `git diff --check`를 통과했다. 앱 전체 TypeScript 검사는 이번 파일 외 지도·API·공통 메뉴 등 기존 오류가 남아 있어 실패했으며, Next 빌드는 실행 중인 개발 서버 보호를 위해 수행하지 않았다.
+
+## 44. 2026-08-12 버튼 색상·문구·순서 및 팝업 카드 간격 통일
+
+- 주요 실행 동작인 조회·등록·저장·수정·다운로드는 파란색, 초기화·취소·닫기·상세보기·지도보기는 흰색, 삭제는 빨간색으로 통일했다.
+- 조사 목록은 `사업등록 → 결과등록 → 수정`, 처리분구 목록은 `추가 → 수정 → 저장 → 삭제` 순서로 정리했다. 처리분구의 삭제대기 상태는 동작 의미에 맞춰 흰색 `삭제취소`로 바뀐다.
+- 조사사업 등록·수정 팝업은 `양식다운로드 → 조사보고서 양식다운로드 → 저장/수정 → 취소`, 결과 업로드는 `저장 → 취소`, 조사 상세는 `엑셀다운로드 → 닫기` 순서를 적용했다.
+- Excel 데이터 내보내기는 `엑셀다운로드`, 입력 템플릿은 `양식다운로드`, 일반 첨부파일은 `다운로드`로 구분했다.
+- `StandardPopupLayout` 본문을 margin 기반 `space-y` 대신 `flex`와 `gap: 1.2rem`으로 변경했다. 자식 카드의 `!m-0` 때문에 간격이 0으로 덮이던 문제를 공통 레이아웃에서 해결했다.
+- 브라우저에서 조사사업 등록·수정의 `사업 정보`와 `사업대상 처리분구` 카드 사이 실제 간격이 모두 12px인 것을 확인했다.
diff --git a/apps/sn/docs/작업내용/SFR-010-012-준설관리/001-fe-SFR-010-012-준설관리-구현기록.md b/apps/sn/docs/작업내용/SFR-010-012-준설관리/001-fe-SFR-010-012-준설관리-구현기록.md
index e91c3efc1..ce801bfbd 100644
--- a/apps/sn/docs/작업내용/SFR-010-012-준설관리/001-fe-SFR-010-012-준설관리-구현기록.md
+++ b/apps/sn/docs/작업내용/SFR-010-012-준설관리/001-fe-SFR-010-012-준설관리-구현기록.md
@@ -277,3 +277,59 @@
 
 - 요구사항정의서 `SFR-010-012`, `SFR-010-013`, 화면설계서 51~52번 슬라이드와 화면 ID `SN_MN040201`을 확인했다.
 - 상세 UI를 수정 기반으로 재사용하고 사진·위치 편집을 추가한 부분은 사용자 지시에 따른 설계 보완이다.
+
+## 15. 2026-08-12 수정 등록방식·사진 0건 정합성 보완
+
+- 수정 화면에도 등록 화면과 동일한 `사진 기반 등록`, `사진 없이 직접 등록` 선택을 추가했다.
+- 사진 기반 등록에서는 유지 사진과 신규 사진을 합쳐 0장이면 저장을 중단하고, 사진 추가 또는 직접 등록 전환을 안내한다.
+- 직접 등록으로 전환하면 기존·신규 사진을 모두 삭제 대상으로 바꾸고 현재 위치를 지도 지정 위치로 유지한다. 사용자는 필요하면 `위치 수정`으로 좌표와 최근접 관로를 다시 확인할 수 있다.
+- 부모 목록과 같은 `InputDatePicker`를 유지하되 팝업 전용 글자 규칙으로 18px까지 커지던 날짜 입력을 부모 화면과 같은 12.5px로 맞췄다. 달력 팝오버 자체 크기는 부모와 동일한 공통 컴포넌트 규격을 유지한다.
+- 추적 근거는 `SFR-010-012`, `SFR-010-013`, 화면설계서 51~56번 슬라이드와 화면 ID `SN_MN040201~203`이다. 수정 화면의 등록방식 전환은 사용자의 오류 재현과 지시에 따른 설계 보완이다.
+
+### 검증 결과
+
+- 사진 0건·사진 기반 수정 화면에서 두 등록방식 버튼, 사진 필수 안내, 파일 업로드 영역을 확인했다.
+- 사진 없이 직접 등록 상태에서 파일 업로드가 숨겨지고 `지도 지정`, 사진 0/5장, 위치 확인 안내가 표시되는 것을 확인했다.
+- 날짜 입력의 브라우저 계산값은 부모 목록과 같은 `font-size: 12.5px`, `width: 155px`, `height: 32px`이다.
+- 전체 TypeScript 검사에서 이번 변경 파일 오류는 0건이며, 검사는 기존 조사·침수·GIS·노후관로 파일 오류로 종료된다.
+
+## 16. 2026-08-12 수정 팝업·목록 UI 후속 통일
+
+- 수정 팝업 상단의 관로번호를 제거하고 `관로 정보` 카드 헤더 우측으로 이동했다.
+- 준설일자와 자동매핑을 한 행의 두 항목으로 배치해 관로정보 표를 한 행 줄였다.
+- 부모 목록과 같은 공통 `InputDatePicker`를 그대로 사용하고, 날짜 선택기 래퍼를 입력 폭 안으로 제한해 달력 버튼이 셀 우측으로 분리되지 않도록 했다.
+- 수정 팝업 상단 버튼은 `저장`, `취소` 순서로 정렬하고 준설 사진 카드의 기존 안내 문구를 제거했다.
+- 지자체별·관경별·경과년도별 결과 카드 타이틀을 모두 `준설 목록`으로 통일했다.
+- CS 설문관리 검색 폼의 `gap-2` 규칙을 준설관리 검색조건에도 적용해 조회·초기화 버튼 간격을 10px에서 5px로 맞췄다.
+- 준설관리는 선행 검증 화면으로만 사용하고, 버튼·입력·달력·선택·목록·페이징 규칙은 하수관망도를 제외한 SN 전체 화면과 WR·DM·FO에서도 재사용할 수 있는 공통 기준으로 관리한다. 업무 고유 사진·관로 매핑 흐름만 준설 화면에 남긴다.
+
+### 검증 결과
+
+- 수정 팝업에서 상단 버튼 순서, 관로번호 위치, 안내 문구 제거와 5행 관로정보 표를 확인했다.
+- 날짜 입력은 공통 달력 팝오버가 227×247px로 열리고 달력 버튼이 입력 영역 안에 배치되는 것을 확인했다.
+- 목록의 관경별·경과년도별 조회구분에서 결과 타이틀이 모두 `준설 목록`으로 유지되는 것을 확인했다.
+- 조회 버튼 우측 312px, 초기화 버튼 좌측 317px로 계산되어 두 버튼의 실제 간격이 CS와 같은 5px임을 확인했다.
+
+## 17. 2026-08-12 목록 조회 로딩 UI 통일
+
+- 준설 목록만 `StandardDataTable` 내부의 `조회 중입니다.` 문구를 표시하던 차이를 제거했다.
+- 조사관리·처리분구관리·노후 하수관로 정비사업과 같은 공통 `LoadingOverlay`를 준설관리 조회·삭제 처리에도 적용했다.
+- 조회 중에는 기존 그리드를 유지한 채 화면 전체 로딩 애니메이션으로 사용자 입력을 차단하며, 그리드 내부 조회 문구는 사용하지 않는다.
+- API 요청·응답, 검색조건, 페이징과 목록 데이터 처리 방식은 변경하지 않았다.
+- 추적 기준은 요구사항 `SFR-010-012`, 화면설계서 51~56번 슬라이드와 화면 ID `SN_MN040201~203`이며 로딩 표현 통일은 사용자 지시에 따른 UI 설계 보완이다.
+
+## 18. 2026-08-12 버튼 색상·문구·순서 통일
+
+- 목록 액션을 `엑셀다운로드 → 등록 → 수정 → 상세보기 → 삭제` 순서로 정리하고 삭제를 항상 마지막에 배치했다.
+- 엑셀다운로드·등록·수정은 파란색, 상세보기·초기화·취소는 흰색, 삭제는 빨간색으로 통일했다.
+- 등록·수정 팝업은 `저장 → 취소`, 지도 위치 편집은 `선택 위치 적용 → 취소` 순서를 적용했다.
+- 등록 건과 사진 삭제 아이콘은 모두 빨간색 destructive 동작으로 표시하고, 사진 행 선택 버튼은 흰색 보조 동작으로 유지했다.
+- 검색은 `조회 → 초기화` 순서를 유지했으며 기존 이벤트와 비활성화 조건은 변경하지 않았다.
+
+## 19. 2026-08-13 상세보기 기능 제거
+
+- 목록 액션에서 `상세보기`를 제거하고 `엑셀다운로드 → 등록 → 수정 → 삭제`만 유지했다. 삭제는 기존 규칙대로 마지막에 배치한다.
+- 별도 `dredgingDetail` WindowPopup 정의와 레지스트리 항목, 상세 전용 content를 제거해 URL로 직접 진입하는 상세 기능도 함께 정리했다.
+- 수정 화면은 기존과 같이 관로정보·준설일자·사진·위치·자동매핑 정보를 모두 제공하므로 조회에 필요한 정보 확인과 편집 기능은 유지된다.
+- 수정 화면에서도 사용하는 검색 파라미터 복원 로직은 중립 유틸 파일로 분리했으며 API, 저장 payload, 부모창 갱신 메시지는 변경하지 않았다.
+- 요구사항정의서 sheet3의 `SFR-010-013`은 준설 등록·수정·삭제·조회를 요구하지만 별도 상세 버튼을 강제하지 않는다. 화면설계서 슬라이드 51의 `SN_MN040201`과 슬라이드 53의 `SN_MN040202`도 등록·조회·다운로드 중심이며, 슬라이드 57의 별도 세부현황은 `화면 삭제`로 표시되어 있다.
diff --git a/apps/sn/docs/작업내용/SN-CS-UI통일-2차/001-fe-SN-CS-UI통일-2차-구현기록.md b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/001-fe-SN-CS-UI통일-2차-구현기록.md
new file mode 100644
index 000000000..07d261533
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/001-fe-SN-CS-UI통일-2차-구현기록.md
@@ -0,0 +1,117 @@
+# SN CS UI 통일 2차 구현 기록
+
+## 1. 작업 목적
+
+- CS의 카드, 검색, 버튼, 폼, 목록, 페이징, 팝업 UI를 SN의 도시침수예방사업, 침입수 분석, RDII 분석과 하수관망도 WindowPopup에 적용한다.
+- 하수관망도 지도 자체는 변경하지 않고 지도에서 여는 WindowPopup만 통일한다.
+- 기존 API, 파일 업로드, 분석 실행, 부모 지도 메시지와 지도 하이라이트 흐름은 유지한다.
+
+## 2. 원본 요구사항 확인
+
+- 원본 `화면설계서.pptx`와 `요구사항정의서.xlsx`를 직접 대조했다.
+- 하수관망도 WindowPopup은 화면설계서 7~17쪽, 20~25쪽과 SFR-010/011/012 계열의 지도 조회 흐름을 유지했다.
+- 도시침수예방사업 업무 CRUD와 침입수·RDII 업무 화면은 원본에 직접 대응하는 화면 ID 및 요구사항 ID가 없어, 기존 기능 계약을 보존한 `UI 통일 설계 제안`으로 적용했다.
+- 도시침수예방사업은 승인된 기존 작업계획의 `/oper/ctyFldngPrvtnBiz`와 기존 호환 경로 `/oper/floodPre`를 함께 유지했다.
+
+## 3. 공통 적용 규칙
+
+- 검색 버튼은 `조회` 파란색, `초기화` 흰색 순서로 통일했다.
+- 엑셀 파일 액션은 `엑셀다운로드`, 업로드 양식은 `양식다운로드`로 통일했다.
+- 삭제 버튼은 빨간색이며 액션의 마지막에 배치했다.
+- 목록의 `NO`는 `순번`으로 바꾸고 전체 건수에서 현재 페이지 위치를 차감해 내림차순으로 표시한다.
+- 목록 타이틀 옆 총 건수 표시는 제거했다.
+- 헤더는 항상 가운데 정렬하고 데이터 셀은 내용 성격에 따라 정렬한다.
+- 사용자 헤더 정렬 기능과 관련 정렬 상태·이벤트를 제거하고 서버 기본 최신순만 유지한다.
+- 일반 페이지 크기의 목록은 내부 세로 스크롤을 만들지 않고 창 스크롤을 사용한다. 열이 많은 표만 내부 가로 스크롤을 사용한다.
+- 로딩은 공통 `LoadingOverlay`, 사용자 메시지는 CS와 같은 `AlertDialog`와 `ConfirmDialog` 흐름을 유지한다.
+
+## 4. CS 컴포넌트 그대로 사용한 범위
+
+- `BaseLayout`, `Header`, `LNB`, `Footer`, `PageTitle`
+- `Button`, `Input`, `Label`, `Select`, 날짜/월 선택 컴포넌트
+- `DataTable`, `Table`, `Dialog`, `LoadingWithAnimation`
+- `AlertDialog`, `ConfirmDialog`와 `useAlertStore`, `useConfirm` 메시지 흐름
+- 공통 카드 클래스 `card`, `card-border`, `card-header`
+
+## 5. 커스텀 유지 범위
+
+- CS 배치 규칙을 재사용 가능하게 묶은 중립 래퍼 `StandardDataTable`, `StandardFormSection`, `StandardFormField`, `StandardPopupLayout`
+- SN의 서버 페이징·역순 순번 계약을 공통 표에 연결하는 앱 로컬 `MapPopupDataTable`, `ExmnStandardDataTable`
+- 도시침수예방사업의 다단 Excel 헤더와 시설 가변 행
+- 관로분석 연도·재질 병합표의 `rowSpan`
+- 침입수·RDII 결과 차트와 결과 전용 모드
+- 지도 WindowPopup의 부모창 `postMessage`, 관로 선택, 지도 이동과 하이라이트
+- 준설 사진 업로드·EXIF 위치·지도 선택과 GIS GeoPackage 업로드/미리보기처럼 CS에 동일 기능이 없는 업무 UI
+
+## 6. 대상 화면
+
+- 도시침수예방사업 목록, 등록·상세·수정, 업로드와 Excel 상세 팝업
+- 침입수 분석 입력·결과 목록·지도 결과 팝업·차트 팝업
+- RDII 분석 입력·결과 목록·지도 결과 팝업·차트 팝업
+- 노후관로, 시도별 노후관로, 침수이력, 지반침하, 침수위험지도, 도시침수지도, 관로분석, 보수이력, 통수위험, GIS 관리, 관망도 검색, 보고서, 우수토실, GIS 편집 세션 등 하수관망도 WindowPopup
+
+## 7. 검증
+
+- 대상 파일 Prettier 검사를 통과했다.
+- `git diff --check`를 통과했다.
+- `pnpm exec tsc --noEmit --incremental false --pretty false --ignoreDeprecations 5.0`을 통과했다.
+- 실행 중인 사용자 개발 서버를 보호하기 위해 Next build는 실행하지 않았다.
+- `http://localhost:3002`에서 하수관망도, 도시침수예방사업 목록·등록, 노후 하수관로 목록, 조사·준설·처리분구, 침입수·RDII 분석을 직접 열어 확인했다.
+- 관망도 검색의 기본·유지관리·보고서 탭, 관로분석, GIS 관리, 노후관로, 지반침하, 침입수 결과와 준설·조사 등록 WindowPopup을 직접 열어 버튼·헤더·스크롤·로딩을 확인했다.
+- 긴 도시침수예방사업 등록 화면에서 `scrollY=1300` 상태에도 공통 헤더가 `sticky`, `top=0`으로 유지됨을 확인했다.
+- 일반 목록의 내부 세로 오버플로가 없고, 팝업은 공통 팝업 본문 스크롤만 사용하며, 브라우저 콘솔 오류가 없음을 확인했다.
+
+## 8. 영향 및 롤백
+
+- 변경은 `apps/sn` 화면과 `packages/common/business_components`의 중립 신규 컴포넌트·클라이언트 경계 보완에 한정한다.
+- 현재 `StandardDataTable`, `StandardForm*`, `StandardPopupLayout`의 실제 소비자는 SN뿐이며 WR, DM, FO 화면은 자동 변경되지 않는다.
+- 기존 훅 기반 비즈니스 컴포넌트의 `use client` 선언은 Next 클라이언트 경계를 명시하는 변경이며 시각 규격이나 공개 props를 바꾸지 않는다.
+- 롤백 시 SN 업무·지도 팝업 UI, 앱 로컬 어댑터와 중립 `Standard*` 신규 컴포넌트 및 export/dependency 변경을 함께 되돌린다.
+
+## 9. 남은 리스크
+
+- 원본에 직접 대응 화면이 없는 도시침수 업무 CRUD와 침입수·RDII 업무화면은 현행 코드와 API 계약을 기준으로 한 설계 제안이다.
+- 저장·삭제·파일 업로드, 실제 분석 실행과 실데이터 행 선택 후 지도 이동·하이라이트는 데이터 변경을 피하기 위해 이번 전수 UI 회귀검증에서는 실행하지 않았다.
+
+## 10. 2026-08-13 지도 상단 검색바 정렬 보완
+
+- 지도 상단의 선택박스는 높이 35px, 조회 버튼은 높이 25px인데 버튼에만 상단 여백이 적용되어 두 요소의 중심선이 5px 어긋난 상태를 브라우저에서 확인했다.
+- `ProcSearchBar`와 `SearchBar`의 검색 행 및 버튼 영역에 세로 중앙 정렬을 적용하고 버튼의 임의 상단 여백을 제거했다. 버튼 크기, 색상, 이벤트와 선택박스 동작은 변경하지 않았다.
+- 공통 `SearchBar`는 FO와 WR 지도에서 사용되고, `ProcSearchBar`는 SN 하수관망도에서 사용된다. DM과 WR 일부 화면의 앱 로컬 검색바는 이번 변경 대상이 아니다.
+- 수정 후 SN 하수관망도에서 선택박스 3개와 조회 버튼의 중심선이 모두 103px로 일치함을 확인했다.
+- SN 전체 TypeScript 검사와 대상 파일 `git diff --check`를 통과했다.
+
+## 11. 2026-08-13 분석도구 팝업·버튼·로딩 재점검
+
+- 침입수·RDII 입력 화면의 상단 액션, 조회, 파일 선택 버튼을 CS 기본 높이 32px로 통일했다. 버튼 순서는 `양식다운로드 → 분석 실행 → 결과보기`, `조회 → 초기화`를 유지했다.
+- 침입수·RDII 결과 목록에서 최초 조회가 두 번 실행되던 중복 effect를 제거했다. 입력 화면은 전체 화면 로더 하나, 결과 목록은 표 로더 하나만 사용한다.
+- 관망도 정보검색은 compact underline 탭, 탭별 검색 카드와 기본 높이 버튼을 적용했다. 중첩 카드와 중복 로더를 제거하고 필요한 가로 스크롤만 유지했다.
+- `mapSearch` WindowPopup은 `maximize: true`로 설정하여 `screen.availWidth`와 `screen.availHeight` 기준의 가용 화면 전체 크기로 연다.
+- 관로분석·관로현황, 시도별 노후관로, GIS 관리, 통수위험, 침입수·RDII 분석결과 팝업의 검색 필드·버튼·카드·탭·표 헤더를 다시 점검했다. 통수위험은 공통 underline 탭으로 전환했고, 관로분석의 연도·재질 병합표는 업무상 `rowSpan`을 유지하면서 CS 카드와 파란 중앙 헤더를 적용했다.
+- 분석도구 메뉴 9개 항목을 확인했다. 정보검색, 관로분석, 시도별 노후관로, GIS 관리, 통수위험, 침입수·RDII 결과는 실제 팝업이며, GIS 편집은 지도 내부 편집 토글이다. 침수예측현황은 기존 placeholder로서 요구 기능을 임의 구현하지 않았다.
+- 전역 로딩 사용처를 정적 감사하고 전체 화면 `LoadingOverlay`와 `StandardDataTable` 로딩을 동시에 쓰던 7개 목록에서 표 로딩을 제거했다. 이후 검사에서 동일 파일 내 전체 화면 로더와 표 로더 중복은 0건이다.
+- `packages/common`에서 이번 UI 통일 변경이 있는 범위는 사용자 소유의 `packages/common/business_components`뿐이며, 다른 공용 패키지는 수정하지 않았다.
+- 원본 추적 근거는 화면설계서 슬라이드 8~17, 19~23과 요구사항정의서 sheet3 87~95행이다. 정보검색과 침입수·RDII 업무 화면은 직접 대응 화면 ID가 없어 기존 기능 계약을 보존한 UI 설계 제안으로 분류한다.
+- 침입수·RDII 네 화면은 브라우저에서 버튼 높이와 콘솔 오류 0건을 확인했다. 목록 로딩은 지연 응답을 주입해 전체 화면 로더 1개·표 로더 0개를 확인했다. 정보검색은 3개 탭 전환과 조회·초기화·엑셀다운로드·지도에서 보기 버튼 32px를 확인했고, 관로분석·통수위험은 파란 중앙 헤더, 순번, 32px 버튼, 내부 세로스크롤 0건을 확인했다. 분석도구의 8개 WindowPopup 경로는 모두 HTTP 200이며 런타임 오류가 없음을 확인했다. 사용자 개발 서버가 일시 중단된 동안에는 임의 재기동하지 않았으며 자동 복구된 뒤 최종 브라우저 회귀검증을 완료했다.
+
+## 12. 2026-08-13 조사 상세·분석 차트·WindowPopup 취소·GIS 편집 재점검
+
+- 조사 목록 행 선택 시 상세 카드 헤더 안에 직접 렌더되던 절대배치 스피너를 제거하고 공통 전체 화면 `LoadingOverlay` 하나만 사용하도록 변경했다. 런타임 소스의 직접 `LoadingWithAnimation` 사용처는 안전한 공통 로더 래퍼 한 곳만 남겼다.
+- 조사 목록과 상세 집계표 헤더 높이를 공통 상수 `5.6rem`으로 묶었다. 브라우저에서 목록과 상세의 첫 헤더 높이가 모두 `56px`임을 실측했다.
+- 침입수·RDII 차트 팝업을 `StandardPopupLayout`, `StandardFormSection`, `StandardFormField` 기반의 2열 조건·결과 요약·그래프 카드 구조로 통일했다. 두 화면 모두 하단 액션은 `조회 → 초기화 → 취소`이고 버튼 높이는 `32px`이다.
+- WindowPopup 레지스트리 33개 키를 감사했다. 준설 상세 기능 제거 후 자체 저장·수정 보호 로직을 가진 6개 키는 기존 취소를 유지하고, 나머지 27개 키는 공통 팝업 레이아웃이 마지막 액션으로 흰색 `취소(window.close)`를 제공한다.
+- GIS 편집세션은 레이어·도구·변경 건수 상태, 변경 항목 선택 강조, `선택 취소/최근 취소/전체 초기화`를 그룹화했다. 지도 하단 편집툴바는 편집도구, 스냅핑, `저장 → 취소` 영역으로 나눠 높이를 `37px` 수준으로 줄였다.
+- 처리구역 분석 표 셀 안의 직접 스피너도 제거해 카드 단일 로딩 상태로 통일했다.
+- 팝업 레지스트리의 정적 import가 브라우저 전용 엑셀 모듈을 SSR에서 평가해 모든 `/popup/*` 경로를 막던 결합 문제를 발견했다. 팝업 렌더러를 클라이언트 경계로 이동하고 노후관로·도시침수 Excel 상세를 동적 import하여 팝업 간 의존성 전파를 차단했다.
+- 브라우저에서 조사 목록·상세 헤더 `56px/56px`, 침입수·RDII 차트 팝업의 `조회/초기화/취소` `32px`, 정보검색 팝업 상단 `취소`, GIS 편집세션과 하단 `저장 → 취소` 그룹을 확인했다. 팝업 경로의 Turbopack 런타임 오류는 클라이언트 경계 보완 후 재현되지 않았다.
+- SN 전체 TypeScript 검사는 `--ignoreDeprecations 5.0` 조건에서 통과했고 `git diff --check`도 통과했다. 원본 근거는 조사 SFR-010-004~007 및 화면설계서 슬라이드 47~49, GIS 편집 SFR-012-003~004 및 화면설계서 슬라이드 32이다. 침입수·RDII 차트는 원본 직접 화면 ID가 없어 UI 설계 제안으로 유지한다.
+
+## 13. 2026-08-13 통수위험 분석결과 팝업 표준화
+
+- 통수위험 팝업에 남아 있던 전용 HTML 표를 앱 로컬 `MapPopupDataTable`로 교체해 다른 지도 분석 팝업과 동일한 CS 카드·표·페이징 구조를 적용했다.
+- 전용 표의 헤더와 빈 행 높이가 각각 `28.5px`로 눌리고 바로 아래에 가로 스크롤바가 붙던 문제를 제거했다. 빈 결과는 공통 `240px` 중앙 안내 영역으로 표시하며 데이터가 있을 때만 표와 필요한 가로 스크롤을 렌더한다.
+- 현재 위험과 과거 이력 탭별 열 구성, 전체 건수 기준 내림차순 순번, 수치 소수점, 위험 배지, 행 선택 후 부모 지도 강조, API와 `postMessage` 계약은 유지했다.
+- `MapPopupDataTable`에는 선택 행 ID를 선택적으로 전달하는 앱 로컬 속성을 추가했다. 기존 소비 화면은 속성을 전달하지 않으므로 동작과 스타일에 영향이 없다.
+- 팝업 제목을 `통수위험 분석결과 목록`으로 정리하고 공통 흰색 `취소` 버튼, `조회 → 초기화`, 32px 검색 컨트롤, underline 탭과 전체 화면 로더 하나를 유지했다.
+- 원본 근거는 화면설계서 슬라이드 20~23의 `SN_MN010202~010204`, `SFR-011-007~008`과 요구사항정의서 sheet3 93행 `SFR-011-007`, `PR-SN-026`이다. 현재·과거 목록 팝업 자체의 정확한 원본 화면은 없어 목록 배치는 기존 기능을 보존한 UI 설계 제안으로 분류한다.
+- 브라우저에서 현재 위험·과거 이력 탭 전환, 검색조건 라벨 변경, 공통 취소, 빈 결과 높이 `240px`, 내부 세로 스크롤 없음과 전체 화면 로더 단일 사용을 확인했다. SN 전체 TypeScript 검사와 대상 파일 `git diff --check`를 통과했다.
diff --git a/apps/sn/docs/작업내용/SN-CS-UI통일-2차/002-fe-SN-전체화면-인벤토리-검증기록.md b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/002-fe-SN-전체화면-인벤토리-검증기록.md
new file mode 100644
index 000000000..01ea5fdb8
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/002-fe-SN-전체화면-인벤토리-검증기록.md
@@ -0,0 +1,127 @@
+# SN 전체 화면 인벤토리 및 UI 검증 기록
+
+## 1. 작업 목적
+
+- 디지털하수관로 SN 앱의 화면 수를 본창 라우트, WindowPopup, 내부 Dialog로 구분해 재현 가능한 기준으로 확정한다.
+- 원본 화면설계서·요구사항 추적표와 현재 코드를 대조하고, 실제 브라우저에서 주요 UI 규칙을 전수 확인한다.
+- 화면 수를 단순 `page.tsx` 파일 수로 오인하지 않도록 리다이렉트, 별칭, 개발용 화면과 실제 업무 화면을 분리한다.
+
+## 2. 원본 요구사항 추적 근거
+
+- 화면설계서 `화면설계서.pptx` 전체 58장을 직접 렌더링해 확인했다.
+- 화면설계서 3쪽의 화면 목차에는 하수관망도·유지관리 관련 화면 항목 33개가 기재되어 있다. 마지막 번호가 준설 상세현황과 준설결과 업로드에 중복 표기되어 있어 번호 값이 아니라 행 수로 집계했다.
+- 요구사항정의서 `3. (기능)요구사항정의 및 추적표` 73~100행의 SFR-010-001~014, SFR-011-001~009, SFR-012-001~005를 대조했다.
+- 원본 33개는 지도 내부 패널·상세 상태를 각각 화면으로 센 설계 화면 수이며, Next 라우트 수 또는 WindowPopup 수와 일치하는 개념이 아니다.
+- 도시침수예방사업 CRUD와 침입수·RDII 업무 화면은 원본에 직접 대응하는 화면 ID가 없어 기존 API와 기능을 유지하는 `UI 통일 설계 제안` 범위로 분류한다.
+
+## 3. 코드 기준 화면 수
+
+### 3.1 Next 라우트 파일
+
+`apps/sn/app/**/page.tsx`는 총 27개다.
+
+| 구분           |  수 | 설명                                                          |
+| -------------- | --: | ------------------------------------------------------------- |
+| 실제 업무 본창 |  17 | 지도, I/I 4개, 운영·유지관리 목록/등록/수정 화면              |
+| 인증 화면      |   1 | `/auth/login`                                                 |
+| 인프라 라우트  |   2 | `/` 자동 로그인·이동, `/popup/[popupKey]` 동적 팝업 호스트    |
+| 별칭·호환·시안 |   4 | `/map2`, `/map/agedPipePopup`, `/html/map`, `/html/aged-pipe` |
+| 개발·시험 화면 |   3 | `/ii/fileupload`, `/ii/test`, `/oper/operStore`               |
+| 합계           |  27 | 실제 사용자 화면 수와 단순 동일시하지 않음                    |
+
+실제 업무 본창 17개는 다음과 같다.
+
+1. `/map`
+2. `/ii/irsetting`
+3. `/ii/rdii`
+4. `/ii/result`
+5. `/ii/rdiiResult`
+6. `/oper/ctyFldngPrvtnBiz`
+7. `/oper/ctyFldngPrvtnBiz/register`
+8. `/oper/ctyFldngPrvtnBiz/register/[id]`
+9. `/oper/dredging`
+10. `/oper/exmn/register`
+11. `/oper/exmn/status`
+12. `/oper/floodPre`
+13. `/oper/obsltPplBiz`
+14. `/oper/obsltPplBiz/register`
+15. `/oper/obsltPplBiz/register/[id]`
+16. `/oper/oldPp`
+17. `/oper/trtdst`
+
+### 3.2 WindowPopup
+
+- `windowPopupDefinitions` 정의: 33개
+- `windowPopupRegistry` 구현 매핑: 33개
+- 정의 누락 또는 레지스트리 초과: 0개
+- 기능 구현 팝업: 31개
+- 안내용 placeholder: 2개 (`floodPredictionMapPopup`, `gisEditPopup`)
+
+| 업무군             | WindowPopup key                                                                                                                                                                                                                                                             |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 운영·유지관리      | `cfmtnBgt`, `exmnBusinessRegister`, `exmnResultRegister`, `exmnSurveyDetail`, `dredgingRegister`, `dredgingEdit`, `exmnPipeReport`, `oldPpUpload`, `oldPpTable`, `floodPreUpload`, `floodPreTable`                                                                          |
+| 보고서·정보검색    | `reportTab`, `reportFiles`, `mapSearch`                                                                                                                                                                                                                                     |
+| I/I                | `inftwtResultPopup`, `rdiiResultPopup`, `infilChart`, `rdiiChart`                                                                                                                                                                                                           |
+| 지도 시설·분석     | `sscDetail`, `agedPipePopup`, `sinkholePopup`, `sbmrgDngrMapPopup`, `floodDngrMapPopup`, `pipeAnalysisPopup`, `pipeAnalysisDetailPopup`, `repairHistoryPopup`, `agedPipeStatusByCtpvPopup`, `fldngHstryPopup`, `gisEditSessionPopup`, `gisManagementPopup`, `flowRiskPopup` |
+| 구조만 연결된 안내 | `floodPredictionMapPopup`, `gisEditPopup`                                                                                                                                                                                                                                   |
+
+### 3.3 내부 Dialog
+
+- 앱 전역 사용자 메시지 Dialog는 `AlertDialog`, `ConfirmDialog`, `PromptDialog` 3종이다.
+- `DredgingRegisterModal`의 Dialog는 `dredgingRegister` WindowPopup 본문 자체이므로 별도 논리 화면으로 중복 집계하지 않는다.
+- `PplSummaryModal`, `PplFacilityDetailModal`은 현재 런타임 호출부가 없는 휴면 컴포넌트다. 활성 업무 화면 수에는 포함하지 않는다.
+
+따라서 현재 운영 대상으로 보는 논리 화면은 `업무 본창 17 + 기능 WindowPopup 31 = 48개`다. 로그인까지 포함하면 49개이며, placeholder 2개까지 포함한 등록 화면은 51개다.
+
+## 4. 브라우저 전수 검증
+
+### 4.1 본창
+
+- 로그인 후 실제 업무 본창 17개와 인증 화면을 직접 열었다.
+- 각 본창은 최종 재검증에서 최초 문서 요청 HTTP 200, 애플리케이션 오류 문구 없음, 문서 가로 넘침 0을 확인했다.
+- 목록·등록·수정 화면의 제목, 검색 카드, 버튼 순서·색상, 표 헤더, 가로 오버플로, 빈 상태와 하단 액션을 확인했다.
+- `/oper/exmn/status`에서 실제 조사사업과 덕풍처리분구 행을 선택하고, 실제 생성된 `exmnSurveyDetail` 팝업에서 관로 3건과 결함 집계를 조회했다.
+- 조사 목록과 상세 요약 표의 단일 헤더는 모두 56px 규격을 사용한다. 관로조사 상세 팝업의 결함표는 4단 복합 헤더이므로 전체 높이는 데이터 구조에 따라 더 크지만, 각 헤더 셀의 패딩·색상·가운데 정렬은 같은 표 토큰을 사용한다.
+- 같은 흐름에서 상세 로딩은 공통 로딩 오버레이 하나만 사용하고, 헤더 내부의 로더·`조회하고 있습니다` 보조 문구가 중복되지 않음을 확인했다.
+- 긴 등록 화면에서 상단 헤더는 스크롤 후에도 `position: sticky`, `top: 0`을 유지했다.
+- `/oper/ctyFldngPrvtnBiz/register/228`, `/oper/obsltPplBiz/register/128`의 실제 수정 화면까지 열어 저장·취소·삭제 순서와 크기를 확인했다.
+
+### 4.2 WindowPopup
+
+- 33개 key를 모두 `/popup/{popupKey}`로 직접 열었다.
+- 필수 파라미터가 있는 팝업은 시험 파라미터를 제공해 실제 본문을 렌더했다.
+- 실제 조사 상세·관로보고서는 실데이터 식별자로 확인했고, 데이터가 없는 팝업은 로더 종료 후 빈 상태를 확인했다. 파일 식별자가 필요한 상세 팝업은 필수 파라미터 안내 상태를 확인했다.
+- 33개 모두 최종 문서 요청 HTTP 200, 팝업 타이틀과 32px `취소` 버튼이 존재하고, 문서 전체의 불필요한 가로 스크롤은 없었다.
+- `mapSearch`는 최대화 상태, compact 탭, 기본 정보·유지관리·보고서 흐름을 확인했다.
+- 관로분석, 통수위험, GIS 관리, 노후관로, 지반침하, 침수지도, 침입수·RDII 결과와 차트의 검색·목록·빈 상태를 확인했다.
+- 안정화 후 주요 액션 버튼은 32px로 렌더됐다. 표 셀 링크, 지도 확대·축소, 페이지 번호와 같은 컨텍스트 컨트롤은 별도 소형 규격으로 유지했다.
+- 33개 팝업의 최종 상태에서 가시 로딩 스피너 0, `Internal Server Error`, `Application error`, 미등록 popup key 오류 없음으로 종료했다.
+
+## 5. 이번 보완
+
+- 도시침수예방사업 등록·수정과 노후 하수관로 정비사업 등록·수정의 하단 저장·취소·삭제가 `size="lg"`로 40px이던 불일치를 제거했다.
+- 두 화면 모두 CS 기본 Button 32px로 맞추고 `저장 → 취소 → 삭제` 순서와 색상은 유지했다.
+- 지도 상단 공통 검색바의 조회·초기화와 지도 분석 팝업에 남아 있던 25px 버튼을 공통 32px Button으로 통일했다.
+- 공통 SelectBox와 노후관로·침수위험지도·침수이력·보수이력 팝업에 남아 있던 35px 입력을 32px로 통일했다.
+- 관로조사 상세 팝업의 모드·조회 버튼을 32px로 통일하고 중복 로딩 안내를 제거했다.
+- `business_components`의 Excel export 모듈이 `xlsx-populate`를 서버 평가하면서 모든 본창·팝업 최초 요청을 500으로 만들던 문제를 동적 로딩으로 격리했다. 보완 후 침입수·RDII 본창과 33개 팝업의 최초 문서 요청이 HTTP 200임을 확인했다.
+- 화면 수와 팝업 정의·레지스트리 일치 여부를 다시 확인할 수 있도록 `apps/sn/scripts/audit-screen-inventory.mjs`를 추가했다.
+- 다른 회사 공통 코드인 `packages/common/components`는 수정하지 않았다. 공통 변경은 사용자가 허용한 `packages/common/business_components` 범위에만 적용했다.
+
+## 6. 재검증 명령
+
+```powershell
+node apps/sn/scripts/audit-screen-inventory.mjs
+pnpm --filter sn exec tsc --noEmit --incremental false --pretty false --ignoreDeprecations 5.0
+git diff --check -- apps/sn packages/common/business_components
+```
+
+사용자가 실행 중인 Next 개발 서버와 `.next` 산출물을 보호하기 위해 `next build`는 실행하지 않는다.
+
+## 7. 영향·롤백·남은 리스크
+
+- API, DB, 요청·응답 구조와 저장 로직에는 영향이 없다.
+- 이번 코드 보완의 롤백은 대상 SN 화면의 Button/Select 규격 변경, `business_components`의 검색바·SelectBox·Excel 지연 로딩 변경, 인벤토리 스크립트·문서를 되돌리면 된다.
+- `floodPredictionMapPopup`은 원본 요구사항이 있으나 현재 안내 화면만 연결된 미구현 기능이다.
+- `gisEditPopup` 직접 URL은 안내 화면이지만 실제 메뉴의 GIS 편집은 지도 본창의 인라인 편집 세션으로 동작한다.
+- 저장·삭제·업로드·분석 실행은 외부 데이터 변경을 피하기 위해 누르지 않았고, 화면 렌더·조회·행 선택까지를 회귀검증 범위로 삼았다.
diff --git a/apps/sn/docs/작업내용/SN-CS-UI통일-2차/003-fe-2026-08-12-SN-CS-UI통일-작업내용.md b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/003-fe-2026-08-12-SN-CS-UI통일-작업내용.md
new file mode 100644
index 000000000..5e1539e5e
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/003-fe-2026-08-12-SN-CS-UI통일-작업내용.md
@@ -0,0 +1,113 @@
+# 2026-08-12 SN CS UI 통일 작업내용
+
+## 1. 작업 목적
+
+- 디지털하수관로 `sn` 앱의 UI를 통합플랫폼관리 `cs` 기준으로 통일한다.
+- 준설관리를 우선 적용 화면으로 삼되, 하수관망도 지도 자체를 제외한 전체 업무 화면에 재사용할 수 있는 구조로 설계한다.
+- `wr`, `dm`, `fo` 등 다른 앱도 사용하는 공통 영역의 영향을 고려하고, 공통 수정은 사용자 소유 범위인 `packages/common/business_components`로 제한한다.
+
+## 2. 원본 및 기준 확인
+
+- 화면설계서 `화면설계서.pptx`와 요구사항정의서 `요구사항정의서.xlsx`를 확인했다.
+- 조사사업은 SFR-010-004~007, 준설관리는 SFR-010-012, 하수관망도 분석은 SFR-011/012 계열을 기준으로 기존 기능을 유지했다.
+- 도시침수예방사업 CRUD와 침입수·RDII 업무 화면은 원본에 직접 대응하는 화면 ID가 없어 기존 API·기능을 유지한 `UI 통일 설계 제안`으로 분류했다.
+
+## 3. 주요 작업 내용
+
+### 3.1 공통 UI 규칙 수립
+
+- 검색 액션을 `조회 → 초기화` 순서로 통일했다.
+- 조회·등록·수정·저장·다운로드 계열은 파란색, 취소·닫기·상세보기 계열은 흰색, 삭제는 빨간색으로 정리했다.
+- 삭제 버튼은 액션 영역의 마지막에 배치했다.
+- 다운로드 문구는 데이터 파일이면 `엑셀다운로드`, 업로드 템플릿이면 `양식다운로드`로 구분했다.
+- 목록의 `NO`와 일련번호 표기를 `순번`으로 통일하고, 전체 건수 기준 내림차순 번호를 사용했다.
+- 목록 제목의 `(총 N건)` 표시는 제거했다.
+- 표 헤더는 파란색 배경, 흰색 글자, 가운데 정렬로 통일하고 사용자 정렬 UI는 제거했다.
+- 일반 목록은 내부 세로 스크롤을 사용하지 않고 브라우저 스크롤로 제어하며, 열이 많은 표만 가로 스크롤을 사용하도록 했다.
+
+### 3.2 재사용 컴포넌트 구성
+
+- CS 표 구조를 재사용하기 위한 `StandardDataTable`을 구성했다.
+- 등록·수정·상세 폼의 2~3열 배치를 위한 `StandardFormSection`, `StandardFormField`를 구성했다.
+- WindowPopup의 타이틀·본문·액션 배치를 통일하는 `StandardPopupLayout`을 구성했다.
+- SN 서버 페이징과 역순 순번을 연결하는 앱 로컬 `MapPopupDataTable`, `ExmnStandardDataTable`을 구성했다.
+- 컴포넌트명에는 `Sn` 접두사를 사용하지 않아 다른 앱에서도 재사용할 수 있도록 했다.
+
+### 3.3 준설관리
+
+- 경과년도별·관경별·지자체별 목록 제목을 `준설 목록`으로 통일했다.
+- 검색 카드, 조회·초기화, 목록 표, 페이징과 액션 버튼을 CS 규격으로 변경했다.
+- 등록·수정 화면을 공통 팝업과 표형 폼 구조로 변경했다.
+- 준설일자와 자동매핑을 같은 행에 배치하고 관로번호를 관로정보 영역 우측으로 이동했다.
+- 사진 기반 수정에서 사진이 없을 때 검증 메시지를 표시하고 직접 등록 방식으로 전환할 수 있도록 기존 흐름을 보완했다.
+- 달력을 부모 화면과 같은 날짜 선택 컴포넌트로 통일했다.
+- 사진 삭제·위치정보·저장 후 상세 진입 흐름을 보완했다.
+- 목록의 중복 세로 스크롤을 제거하고 가로 스크롤과 페이징 사이의 간격을 공통 표 규격으로 맞췄다.
+
+### 3.4 조사관리·처리분구관리
+
+- 조사 목록, 조사사업 등록·수정, 결과 업로드, 상세현황 팝업을 CS 카드·표·버튼 규격으로 변경했다.
+- 처리분구 선택 영역은 기존 체크박스 카드 방식을 유지하면서 제목·검색·빈 상태·간격을 통일했다.
+- 사업정보와 사업대상 처리분구 카드 사이에 공통 간격을 적용했다.
+- 맨홀·관로 조사 집계표의 전용 녹색/레거시 스타일을 제거하고 파란 중앙 헤더로 통일했다.
+- 상세 화면의 불필요한 `맨홀조사 종합집계표`, `관로조사 종합집계표` 중복 타이틀을 제거했다.
+- 조사사업 등록, 결과등록, 조사상세, 관로보고서 팝업을 공통 팝업 구조로 변경했다.
+
+### 3.5 노후 하수관로·도시침수 예방사업
+
+- 노후 하수관로 정비사업 목록·등록·수정과 최종확정예산사업 팝업을 공통 검색·표·폼 구조로 변경했다.
+- 도시침수예방사업의 신규 CRUD 경로와 기존 파일형 호환 경로를 모두 통일했다.
+- Excel 다중 탭 상세는 업무상 가변 열을 유지하면서 공통 표, 10건 페이징, 가로 스크롤을 적용했다.
+- 등록·수정 폼은 기본정보·연도결산·단계별 정보를 2~3열로 배치했다.
+
+### 3.6 침입수·RDII 분석과 지도 WindowPopup
+
+- 침입수·RDII 분석 입력, 결과 목록, 지도 결과, 차트 팝업에 공통 카드·폼·표 구조를 적용했다.
+- 관망도 정보검색, 관로분석, 노후관로, 지반침하, 침수위험지도, 도시침수지도, 보수이력, GIS 관리, 통수위험 등 지도 팝업을 통일했다.
+- `mapSearch`는 기본정보·유지관리·보고서 3개 탭의 기능과 지도 연계 `postMessage`를 유지했다.
+- 관로분석의 연도·재질 병합표와 조사 결함 다단 헤더처럼 CS에 동일 구조가 없는 표는 업무 구조를 유지한 커스텀 표로 처리했다.
+
+### 3.7 사용자 메시지
+
+- 네이티브 `window.alert`, `window.confirm`을 CS 방식의 `useAlertStore`, `useConfirm`으로 변경했다.
+- 성공 후 이동·팝업 닫기처럼 확인 이후 수행해야 하는 동작은 Alert callback으로 연결했다.
+- 화면 내 지속형 오류·검증 메시지는 인라인 상태로 유지했다.
+
+## 4. 주요 수정 범위
+
+- `apps/sn/app/(with-base-layout)/oper/**`
+- `apps/sn/app/(with-base-layout)/ii/**`
+- `apps/sn/app/(map-layout)/map/**`
+- `apps/sn/src/features/exmn/**`
+- `apps/sn/src/features/ctyFldngPrvtnBiz/**`
+- `apps/sn/src/features/obsltPpl/**`
+- `apps/sn/src/features/windowPopup/**`
+- `packages/common/business_components/src/ui/standard_*`
+
+`packages/common/components`와 다른 회사 앱은 수정하지 않았다.
+
+## 5. 검증
+
+- 대상 화면의 목록·등록·수정·팝업을 로컬 브라우저에서 확인했다.
+- 버튼 순서·색상, 표 헤더, 페이징, 가로·세로 스크롤, 사용자 메시지와 팝업 부모창 연계를 점검했다.
+- TypeScript `--noEmit --ignoreDeprecations 5.0` 검사를 수행했다.
+- 대상 파일 Prettier와 `git diff --check`를 수행했다.
+- 사용자 개발 서버를 보호하기 위해 Next production build는 실행하지 않았다.
+
+## 6. 영향 범위
+
+- API endpoint, 요청·응답 구조, DB와 저장 계약은 변경하지 않았다.
+- 공통 `Standard*` 컴포넌트의 현재 실제 소비자는 SN이며, 다른 앱 화면이 자동으로 변경되지는 않는다.
+- 지도 자체의 레이어·이동·선택 기능은 유지하고 지도에서 여는 WindowPopup UI만 변경했다.
+
+## 7. 롤백 방법
+
+- 각 업무 화면의 CS UI 전환 변경을 되돌린다.
+- 앱 로컬 `MapPopupDataTable`, `ExmnStandardDataTable`과 `business_components`의 `Standard*` 추가·export를 함께 되돌린다.
+- 사용자 메시지 전환 시 기존 alert/confirm 이후 실행되던 callback 흐름도 함께 복원한다.
+
+## 8. 남은 리스크
+
+- 저장·삭제·파일 업로드·분석 실행은 실제 데이터를 변경하므로 UI 검증 단계에서는 실행하지 않았다.
+- 원본에 직접 대응 화면이 없는 도시침수예방사업 CRUD와 침입수·RDII 업무 화면은 설계 제안 상태다.
+- 지도 팝업의 실제 데이터 유무에 따라 빈 상태와 가로 스크롤 폭을 추가 확인할 필요가 있었다.
diff --git a/apps/sn/docs/작업내용/SN-CS-UI통일-2차/004-fe-2026-08-13-SN-CS-UI통일-작업내용.md b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/004-fe-2026-08-13-SN-CS-UI통일-작업내용.md
new file mode 100644
index 000000000..716bdfd09
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-CS-UI통일-2차/004-fe-2026-08-13-SN-CS-UI통일-작업내용.md
@@ -0,0 +1,149 @@
+# 2026-08-13 SN CS UI 통일 작업내용
+
+## 1. 작업 목적
+
+- 전날 적용한 CS UI 통일 결과를 디지털하수관로 전체 화면에서 실제로 검증한다.
+- 단순 URL 렌더링이 아니라 본창 조회, 탭 전환, 행 선택, WindowPopup 생성과 실데이터 상세 흐름을 확인한다.
+- 검증 중 발견한 버튼·입력 높이, 로딩 중복, 팝업 취소, 헤더, 스크롤과 SSR 오류를 보완한다.
+
+## 2. 원본 및 화면 인벤토리 확인
+
+- 화면설계서 전체 58장과 요구사항정의서 `3. (기능)요구사항정의 및 추적표` 73~100행을 대조했다.
+- Next `page.tsx` 라우트는 27개로 확인했다.
+- 실제 업무 본창은 17개, WindowPopup 정의·레지스트리는 각각 33개이며 누락은 0개다.
+- WindowPopup 33개 중 실제 기능 팝업은 31개, 안내용 placeholder는 `floodPredictionMapPopup`, `gisEditPopup` 2개다.
+- 현재 운영 대상 논리 화면은 업무 본창 17개와 기능 팝업 31개를 합한 48개다.
+
+## 3. 실제 브라우저 검증
+
+### 3.1 본창 17개
+
+- `/map`
+- `/ii/irsetting`, `/ii/rdii`, `/ii/result`, `/ii/rdiiResult`
+- `/oper/ctyFldngPrvtnBiz` 목록·등록·수정
+- `/oper/dredging`
+- `/oper/exmn/register`, `/oper/exmn/status`
+- `/oper/floodPre`
+- `/oper/obsltPplBiz` 목록·등록·수정
+- `/oper/oldPp`
+- `/oper/trtdst`
+
+각 화면에서 최초 문서 요청 HTTP 200, 애플리케이션 오류 문구 없음, 문서 가로 넘침 없음, 로딩 종료 후 잔존 스피너 없음으로 확인했다.
+
+### 3.2 WindowPopup 33개
+
+- 팝업 33개를 동일한 로그인 세션에서 실제로 열었다.
+- 실데이터가 있는 팝업은 목록과 상세 데이터를 확인했다.
+- 데이터가 없는 팝업은 로더 종료 후 공통 빈 상태를 확인했다.
+- 파일·시설 식별자가 필요한 팝업은 필수 파라미터 안내를 확인했다.
+- 모든 팝업에 마지막 액션으로 32px 흰색 `취소`가 존재함을 확인했다.
+- 팝업 문서 전체의 불필요한 가로 넘침은 없고, 열이 많은 표 내부에서만 가로 스크롤이 발생함을 확인했다.
+
+### 3.3 관로조사 상세현황
+
+- 조사관리 본창에서 실제 조사사업과 처리분구를 선택해 상세현황을 확인했다.
+- 덕풍처리분구의 관로 3건과 결함 집계가 조회되는 상태를 확인했다.
+- `관로`, `본단위구간`, `조회`, `초기화`, `엑셀다운로드`, `취소` 버튼 높이를 모두 32px로 통일했다.
+- 상세 헤더 내부에 있던 별도 로딩 애니메이션과 `조회하고 있습니다` 문구를 제거하고 전체 오버레이 하나만 사용하도록 했다.
+- 조사 목록과 단일 상세 집계표 헤더는 56px 규격으로 통일했다.
+- 결함표는 4단 복합 헤더이므로 전체 높이는 더 크지만 헤더 셀의 파란 배경·흰색 글자·가운데 정렬·패딩 토큰은 동일하게 적용했다.
+
+## 4. 검증 중 보완한 내용
+
+### 4.1 버튼과 입력 높이
+
+- 지도 상단 공통 검색바의 25px 조회 버튼을 32px로 변경했다.
+- 침입수·RDII 화면의 상단 액션·조회·파일 선택 버튼을 32px로 통일했다.
+- 관로분석, 노후관로, 지반침하, 침수지도, 보수이력, 침수이력 등 분석 팝업의 주요 액션을 32px로 통일했다.
+- 공통 SelectBox와 지도 팝업에 남아 있던 35px 선택박스를 32px로 통일했다.
+- 페이지 번호, 표 셀 링크, 지도 확대·축소처럼 문맥상 소형이어야 하는 컨트롤은 기존 소형 규격을 유지했다.
+
+### 4.2 로딩 구조
+
+- 입력 화면은 전체 화면 `LoadingOverlay` 하나만 사용하도록 했다.
+- 목록 화면은 공통 표 로더 또는 전체 오버레이 중 하나만 사용하도록 정리했다.
+- 침입수·RDII 결과 목록의 최초 중복 조회 effect를 제거했다.
+- 정보검색, 조사 상세, 통수위험, 분석 결과 팝업의 중복 로딩 문구와 표 내부 스피너를 제거했다.
+
+### 4.3 정보검색·분석도구 팝업
+
+- `mapSearch`를 가용 화면 전체 크기로 열도록 하고 compact underline 탭을 적용했다.
+- 기본정보·유지관리·보고서 탭의 조회·초기화·엑셀다운로드·지도에서 보기 버튼을 통일했다.
+- 관로분석, 관로현황, 시도별 노후관로, GIS 관리, 통수위험, 침입수·RDII 결과 팝업을 재점검했다.
+- 통수위험 전용 표를 `MapPopupDataTable`로 변경해 공통 빈 상태·페이징·순번·가로 스크롤 규칙을 적용했다.
+
+### 4.4 WindowPopup 취소와 GIS 편집세션
+
+- `StandardPopupLayout`에 기본 흰색 `취소(window.close)` 액션을 추가했다.
+- 자체 저장·수정 보호 로직이 있는 팝업은 기본 취소를 끄고 기존 핸들러를 유지했다.
+- 정의된 33개 팝업 모두 공통 취소 또는 자체 취소 중 하나를 가지도록 점검했다.
+- GIS 편집세션 상단 패널을 레이어·현재 모드·변경 건수·되돌리기 액션 중심으로 재구성했다.
+- 지도 하단 편집툴바를 편집도구·스냅핑·`저장 → 취소` 그룹으로 정리했다.
+
+### 4.5 준설관리
+
+- 목록의 `상세보기` 기능을 제거하고 `수정` 기능만 유지했다.
+- 최종 액션은 `엑셀다운로드 → 등록 → 수정 → 삭제`이며 삭제는 빨간색 마지막 버튼이다.
+- 등록·수정 팝업의 32px 저장·취소, 사진·지도·직접등록 전환 흐름을 재확인했다.
+
+### 4.6 최초 요청 SSR 500 오류
+
+- 전체 본창·팝업의 최초 SSR 요청에서 `dynamic usage of require is not supported` 오류가 발생하는 문제를 확인했다.
+- 원인은 `business_components` Excel export 모듈이 `@xlsx/xlsx-populate`를 서버에서 즉시 평가하는 구조였다.
+- Excel 스타일 모듈을 사용자 다운로드 시점에 동적으로 로딩하도록 변경했다.
+- 변경 후 침입수·RDII 본창과 WindowPopup 33개의 최초 문서 요청이 HTTP 200으로 응답함을 확인했다.
+
+## 5. 공통 컴포넌트 사용 구분
+
+### 5.1 CS/공통 컴포넌트를 그대로 사용
+
+- `Button`, `Input`, `Select`, 날짜·월 선택 컴포넌트
+- `Table`, `Dialog`, `AlertDialog`, `ConfirmDialog`
+- `card`, `card-border`, `card-header`
+- `StandardDataTable`, `StandardFormSection`, `StandardFormField`, `StandardPopupLayout`
+
+### 5.2 업무 특성상 커스텀 유지
+
+- 관로조사 결함 4단 복합 헤더
+- 관로분석 연도·재질 `rowSpan` 표
+- 도시침수·노후관로 Excel 가변 다중 탭
+- 준설 사진·EXIF·지도 위치 선택
+- GIS GeoPackage 업로드·미리보기와 지도 `postMessage`
+- 침입수·RDII 분석 차트
+
+## 6. 수정 범위
+
+- `apps/sn/**`
+- `packages/common/business_components/**`
+
+다른 회사 코드인 `packages/common/components`와 타 앱은 수정하지 않았다.
+
+## 7. 테스트 및 검증
+
+- 브라우저에서 업무 본창 17개와 WindowPopup 33개를 확인했다.
+- 실제 조사사업 → 처리분구 → 관로조사 상세현황 흐름을 확인했다.
+- `node apps/sn/scripts/audit-screen-inventory.mjs` 결과 라우트 27개, 팝업 정의 33개, 레지스트리 33개, 누락 0개를 확인했다.
+- `tsc --noEmit --incremental false --ignoreDeprecations 5.0` 전체 검사를 통과했다.
+- 대상 파일 Prettier 검사를 통과했다.
+- `git diff --check -- apps/sn packages/common/business_components`를 통과했다.
+- 사용자 개발 서버를 보호하기 위해 Next production build는 실행하지 않았다.
+
+## 8. 영향 범위
+
+- API, DB, 요청·응답 구조와 저장 로직에는 영향이 없다.
+- `business_components`의 검색바·SelectBox 규격 변경은 해당 컴포넌트의 다른 소비 화면에 영향을 줄 수 있으므로 32px 공통 규격을 기준으로 적용했다.
+- Excel 모듈은 사용자 다운로드 시점에만 로딩되며 기존 다운로드 파일 생성 흐름은 유지한다.
+
+## 9. 롤백 방법
+
+- SN 각 화면의 32px Button·Select 및 로딩 구조 변경을 되돌린다.
+- `StandardPopupLayout` 기본 취소와 개별 팝업의 중복 방지 속성을 함께 되돌린다.
+- `business_components`의 검색바, SelectBox, Excel 동적 로딩 변경을 되돌린다.
+- 화면 인벤토리 스크립트와 일자별 검증 문서를 삭제한다.
+
+## 10. 남은 리스크
+
+- `floodPredictionMapPopup`은 원본 요구사항이 있으나 현재 안내용 placeholder다.
+- `gisEditPopup` 직접 URL은 placeholder이며 실제 GIS 편집은 지도 본창의 인라인 편집세션으로 동작한다.
+- 저장·삭제·업로드·분석 실행은 실제 데이터 변경을 피하기 위해 실행하지 않았다.
+- Next 개발 모드에서 Radix 자동 ID 관련 hydration 경고가 간헐적으로 발생하지만 화면 표시와 기능에는 영향이 없었다. Production build 검증은 사용자 개발 서버 보호 때문에 수행하지 않았다.
diff --git a/apps/sn/docs/작업내용/SN-CS사용자메시지통일/001-fe-SN-CS사용자메시지통일-구현기록.md b/apps/sn/docs/작업내용/SN-CS사용자메시지통일/001-fe-SN-CS사용자메시지통일-구현기록.md
new file mode 100644
index 000000000..7a2e496f2
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-CS사용자메시지통일/001-fe-SN-CS사용자메시지통일-구현기록.md
@@ -0,0 +1,64 @@
+# SN CS 사용자 메시지 통일 구현기록
+
+## 1. 작업 목적
+
+- SN 일반 화면의 브라우저 기본 `window.alert`, `window.confirm`을 CS와 동일한 공통 알림·확인 대화상자 방식으로 통일한다.
+- 성공 메시지를 확인하기 전에 화면이나 팝업이 닫히지 않도록 후속 이동, 창 닫기, 선택 초기화는 공통 알림의 확인 콜백에서 수행한다.
+- 기존 API 요청·응답, 저장·삭제 조건과 DB 구조는 변경하지 않는다.
+
+## 2. 적용 기준
+
+- 알림은 SN 전역 Provider에 이미 마운트된 `AlertDialog`와 `useAlertStore(state => state.setMessage)`를 사용한다.
+- 사용자 의사 확인은 전역 `ConfirmDialog`와 `useConfirm()`의 `await confirm(message)`를 사용한다.
+- 별도 SN 업무 전용 래퍼나 신규 시각 컴포넌트는 만들지 않고 CS가 사용하는 것과 동일한 공통 UI 계약을 따른다.
+- 조회 오류나 편집 상태처럼 화면에 지속해서 보여야 하는 인라인 안내는 브라우저 기본 알림이 아니므로 유지한다.
+- 침입수·강우유입수 분석 실행 전 확인도 기존 `confirmToast` 대신 동일한 `ConfirmDialog`를 사용한다.
+
+## 3. 적용 범위
+
+- 조사관리, 조사사업 등록·결과 등록·상세 및 처리분구관리
+- 준설관리 목록·등록·상세·수정
+- 노후 하수관로 정비사업과 최종확정예산사업 팝업
+- 노후관로·도시침수 예방사업의 목록, 업로드 및 보고서 파일 팝업
+- 침입수·강우유입수 분석 접수, 파일 업로드, 결과 조회·삭제 및 분석 완료 감시
+- 공통 파일 업로드와 도시침수 예방사업 등록·상세·수정
+- 하수관망도 버튼에서 여는 WindowPopup 21종과 해당 팝업의 조회·검증·다운로드·팝업 차단 메시지
+- 하수관망도 시설물 상세창의 저장 확인·결과 메시지, 상류관로 조회와 조사보고서 팝업 진입 메시지
+
+하수관망도의 지도 캔버스·레이어 UI 자체는 UI 통일 예외로 유지하되, 사용자가 추가로 지정한 지도 버튼의 WindowPopup 서비스와 그 진입 메시지는 이번 전환에 포함했다. 실행 화면이 아닌 `app/html` 시안은 제외했다.
+
+## 4. 동작 보존
+
+- 등록·수정·삭제 성공 후 목록 이동 또는 팝업 닫기는 사용자가 공통 알림의 `확인`을 누른 뒤 실행한다.
+- 삭제, 저장, 등록방식 변경과 미저장 변경 폐기는 공통 확인창에서 `확인`한 경우에만 기존 로직을 실행한다.
+- 로딩 상태, 버튼 비활성화, 목록 재조회, 부모창 `postMessage`, 분석 완료 감시 시작 조건은 기존 흐름을 유지한다.
+- 지도 버튼의 팝업 키·URL·크기·필수 파라미터와 부모창 연계는 기존 `openWindowPopup` 계약을 유지하고, 팝업 차단 안내만 공통 알림으로 교체한다.
+- 관로분석 상세 팝업의 두 진입점에도 팝업 차단 안내를 보완했으며 업무 조회 조건은 변경하지 않았다.
+
+## 5. 검증 결과
+
+- 로컬 브라우저에서 준설 등록의 필수값 검증 메시지가 CS형 공통 알림창과 `확인` 버튼으로 표시되는 것을 확인했다.
+- 처리분구 행을 수정한 뒤 저장했을 때 `변경사항을 저장하시겠습니까?` 공통 확인창과 `확인`, `취소` 버튼이 표시되는 것을 확인했다. 검증 입력은 `취소` 후 페이지를 다시 조회해 폐기했다.
+- 침입수 분석 실행 시 소요시간 안내가 `확인`, `취소` 공통 확인창으로 표시되고, 확인 후 필수 파일 누락 메시지가 공통 알림창으로 이어지는 것을 확인했다. 필수 파일이 없어 API 요청과 데이터 변경은 발생하지 않았다.
+- RDII 분석 실행에서도 동일한 소요시간 공통 확인창과 필수 파일 누락 공통 알림창이 이어지는 것을 확인했다. 공통 `BaseLayout` 적용으로 침입수와 RDII가 같은 메시지 계약을 사용한다.
+- 도시침수 예방사업의 파일 기반 목록에서 선택 없이 삭제했을 때와 등록 팝업에서 파일 없이 등록했을 때 CS 공통 알림창이 표시되는 것을 확인했다. 별도 사업정보 화면의 등록·수정 성공과 삭제 확인도 동일한 공통 훅을 사용하며, 지속 표시가 필요한 조회·업로드 상태는 인라인 안내로 유지한다.
+- 하수관망도 레이어의 `노후관로 > 목록보기` 버튼을 실제 클릭해 WindowPopup 실행 흐름을 확인했다. 별도 팝업 라우트에서도 노후관로 경과년도를 `0`으로 조회했을 때 CS 공통 알림창과 `확인` 버튼이 표시되는 것을 확인했다.
+- 하수관망도 `정보검색` WindowPopup에서 파일 다운로드를 실행했을 때 장시간 소요 안내가 CS 공통 확인창과 `확인`, `취소` 버튼으로 표시되는 것을 확인하고 `취소`했다. 데이터 다운로드나 저장 변경은 수행하지 않았다.
+- GIS 관리 WindowPopup을 직접 열어 공통 Provider가 적용된 독립 팝업 렌더링을 확인했다. 테스트 계정에 선택 가능한 관리기관이 없어 업로드 검증 메시지 조작은 수행하지 않았다.
+- `apps/sn/app/(with-base-layout)`와 `apps/sn/src`를 검색해 `window.alert`, `window.confirm`, `globalThis.alert`, `globalThis.confirm`이 남아 있지 않은 것을 확인했다.
+- 실제 하수관망도 `apps/sn/app/(map-layout)/map`과 지도에서 도달 가능한 WindowPopup 콘텐츠를 검색해 `window.alert`, `window.confirm`, `globalThis.alert`, `globalThis.confirm`, `confirmToast`, `react-hot-toast`가 남아 있지 않은 것을 확인했다.
+- `git diff --check`를 통과했다.
+- 전체 TypeScript 검사는 이번 메시지 변경 파일이 아닌 기존 하수관망도, 조사 API 타입, 공통 메뉴 경로 오류 때문에 완료되지 않았다. 사용자 개발 서버 보호를 위해 Next 빌드는 실행하지 않았다.
+
+## 6. 영향 범위와 롤백
+
+- 영향은 사용자 메시지 표시 방식과 확인 시점에 한정되며 백엔드 API와 DB 영향은 없다.
+- 롤백 시 각 화면의 `useAlertStore`, `useConfirm` 적용 부분과 성공 후 콜백 이동만 이전 호출 방식으로 되돌리면 된다.
+
+## 7. 원본 확인
+
+- `요구사항정의서.xlsx`의 기능 요구사항 및 추적표와 `화면설계서.pptx`를 `침입수`, `유입수`, `I/I` 기준으로 직접 확인했다.
+- 하수관망도 WindowPopup은 화면설계서 슬라이드 7~17의 `SN_MN010102~SN_MN010108`, `SFR-011-001~006` 및 슬라이드 23~25의 GIS 편집·업로드·조회 화면을 확인했다. 요구사항정의서 기능 요구사항 및 추적표의 `SFR-011-005~006`, `SFR-012-002~005`와 `PR-SN-025`, `PR-SN-030`을 대조했다.
+- 제공 원본에는 침입수 분석 실행 확인창의 표현 방식을 직접 지정한 화면이 없어, 이번 변경은 사용자의 CS UI 통일 지시에 따른 설계 보완으로 기록한다.
+- 원본은 하수관망도 버튼과 팝업의 업무 흐름을 정의하지만 메시지의 시각 표현 방식은 지정하지 않아, CS 공통 대화상자 적용은 사용자의 UI 통일 지시에 따른 설계 보완으로 기록한다.
+- 기존 분석 입력값, 파일 검증, 분석 접수, 결과 조회와 완료 감시 흐름은 변경하지 않았다.
diff --git a/apps/sn/docs/작업내용/SN-노후하수관로정비사업/001-fe-SN-노후하수관로정비사업-통합구현기록.md b/apps/sn/docs/작업내용/SN-노후하수관로정비사업/001-fe-SN-노후하수관로정비사업-통합구현기록.md
index 150b1d9ae..c226d6a37 100644
--- a/apps/sn/docs/작업내용/SN-노후하수관로정비사업/001-fe-SN-노후하수관로정비사업-통합구현기록.md
+++ b/apps/sn/docs/작업내용/SN-노후하수관로정비사업/001-fe-SN-노후하수관로정비사업-통합구현기록.md
@@ -48,3 +48,94 @@
 - 지역 입력 행 제목을 `시군구 선택`에서 `시도,시군구 선택`으로 변경하고 필수 표시를 추가했다.
 - 저장 전 시도 선택 여부를 검증하며, 미선택 시 `시도는 필수입니다.`를 표시한다.
 - 시군구는 선택사항으로 유지하여 시도만 선택한 자료도 저장 요청할 수 있다.
+
+## 2026-08-12 CS UI 기준 목록·입력 화면 전환
+
+### 요구사항 추적
+
+- 원본 화면설계서 슬라이드 8~9의 `SFR-011-001`, 화면 ID `SN_MN010102`와 요구사항정의서의 `SFR-011-001`~`SFR-011-004`를 재확인했다.
+- 원본은 지도 기반 노후관로 관리·현황과 점검 대상 그리드·Excel 다운로드를 다루며, Excel 기반 `노후 하수관로 정밀조사 및 정비사업 현황` 목록과 직접 일치하지 않는다.
+- 따라서 이번 변경은 원본 기능 요구사항의 신규 구현이 아니라, 사용자가 지정한 CS UI 기준을 기존 목록 기능에 적용한 `설계 보완`으로 구분한다.
+
+### 구현 내용
+
+- 검색 영역을 CS와 동일한 공통 `Label`, `Select`, `Input`, `Button` 조합과 카드 구조로 변경하고 `조회`, `초기화` 간격을 공통 `gap-2`로 통일했다.
+- 등록·최종확정예산사업·업로드·엑셀다운로드는 검색 영역에서 분리해 목록 카드 헤더 우측 액션으로 배치했다.
+- 22개 컬럼 목록을 공통 `DataTable` 기반 `StandardDataTable`로 교체하고, 컬럼별 실제 폭·정렬과 서버 페이징을 TanStack Table 상태에 연결했다.
+- `StandardDataTable`은 업무명에 종속되지 않는 공통 컴포넌트로 유지하며 화면별 가로·세로 스크롤 선택, 고정 헤더, 빈 상태, 목록 액션, 스크롤 영역 밖 페이징을 제공한다.
+- 이 화면은 서버가 10건씩 페이징하므로 내부 세로 스크롤은 사용하지 않고 가로 스크롤만 적용해 브라우저 세로 스크롤과 중복되지 않게 했다.
+- 공통 표가 실제 `scrollWidth > clientWidth`인지와 운영체제 스크롤바 높이를 측정하여, 가로 스크롤바가 있으면 그 높이만큼 페이징 상단 여백을 줄인다. 가로 스크롤이 없는 표는 CS 기본 24px 여백을 유지한다.
+- `StandardDataTable` 헤더는 컬럼 본문 정렬값과 분리해 항상 가운데 정렬하고, 사업명·비고·수치 등 본문 셀은 기존 컬럼별 좌·중·우 정렬을 유지한다.
+- SN 전체 일반 페이지의 flex 항목에 `min-width: 0`을 적용하여 넓은 표가 페이지 전체 폭을 확장하지 않고 그리드 내부에서만 가로 스크롤되게 했다. 지도 레이아웃에는 적용하지 않았다.
+- 기존 등록·수정 이동, 최종확정예산 팝업, Excel 업로드·다운로드, 검색조건·페이지 복귀 계약은 유지했다.
+- 목록 카드 제목은 메뉴명 뒤에 `목록`을 붙이는 규칙에 맞춰 `노후 하수관로 정비사업 목록`으로 변경했다.
+- 등록 및 상세·수정 화면은 공통 `Label`, `Input`, `Select`, `Textarea`, `Button`을 그대로 사용하고 `기본 정보`, `지역 및 일정`, `사업량`, `담당자 및 의견`의 네 구역으로 재구성했다.
+- 입력 구역은 화면 폭에 따라 1열·2열·3열로 반응하며, 데스크톱에서는 연관된 짧은 항목을 한 행에 2~3개 배치한다. 사업명·연락처는 두 칸, 부진사유·비고·공단 의견은 세 칸을 사용하여 빈 셀과 불필요한 세로 길이를 줄였다.
+- 사업코드·사업명·시도 필수 검증, 지역 연동, 숫자·연도·일자 처리, 등록·수정·삭제 API 계약은 변경하지 않았다.
+
+### 영향 범위
+
+- 현재 직접 전환한 업무 화면은 `/oper/obsltPplBiz` 목록과 `/oper/obsltPplBiz/register`, `/oper/obsltPplBiz/register/[id]` 등록·상세·수정 화면이다.
+- SN 일반 BaseLayout의 폭 수축 규칙은 다른 일반 페이지에도 적용되지만, 콘텐츠를 넓히지 않고 기존 flex overflow를 정상화하는 규칙만 추가했다.
+- `StandardDataTable`은 `business_components`에 두어 WR·DM·FO 등에서도 재사용할 수 있으며 SN 또는 노후하수관로 업무 분기는 포함하지 않았다. 다른 앱의 기존 화면 코드는 수정하지 않았다.
+
+### 검증 결과
+
+- 로컬 브라우저에서 실제 정밀조사 128건을 조회하고 첫 페이지 10행, `128`부터의 역순 번호를 확인했다.
+- 1,265px 문서 폭에서 문서 `scrollWidth`가 1,265px로 유지되고, 표 스크롤 영역은 `clientWidth 995px / scrollWidth 2,800px`로 내부 가로 스크롤되는 것을 확인했다.
+- 표의 10행은 `clientHeight 493px / scrollHeight 493px`로 내부 세로 스크롤 없이 자연 높이로 표시된다. 720px 브라우저 높이에서 문서 높이는 993px이므로 페이지 세로 이동은 브라우저 기본 스크롤만 사용함을 확인했다.
+- 노후 하수관로 표는 가로 스크롤바 높이 15px을 감지해 페이징 상단 여백을 9px로 보정하고, 마지막 행부터 페이징까지 총 24px을 유지함을 확인했다. 가로 스크롤이 없는 준설 목록은 기존 24px 여백과 총 24px 간격을 그대로 유지했다.
+- 페이징이 스크롤 컨테이너 바깥에 있고, 2페이지 이동 시 첫 번호 `118`, 1페이지·초기화 복귀 시 `128`로 조회되는 것을 확인했다.
+- 사업명 임시 입력 후 초기화하면 입력값이 비워지고 사업구분 `정밀조사`, 1페이지로 복귀함을 확인했다.
+- 첫 행 클릭 시 `/oper/obsltPplBiz/register/128`로 이동하는 기존 상세·수정 진입을 확인했다.
+- 등록 화면을 1,280px 폭에서 확인한 결과 기본 정보 3열·2행, 지역 및 일정 3열·3행, 사업량 3열·1행, 담당자 및 의견 3열·4행으로 배치되며 문서 가로 스크롤은 발생하지 않았다.
+- 빈 등록 화면에서 저장을 시도했을 때 API 저장 없이 `사업코드는 필수입니다.`, `사업명은 필수입니다.`, `시도는 필수입니다.`가 각 항목에 표시됨을 확인했다.
+- 상세·수정 화면에서 128번 자료의 사업구분, 사업코드, 사업명, 시도·시군구·환경청, 일정, 사업량, 담당자와 의견 값이 기존 데이터와 동일하게 로딩되고 `저장`, `목록`, `삭제` 버튼이 유지됨을 확인했다.
+- 목록 제목이 `노후 하수관로 정비사업 목록`으로 표시되고, 공통 표 헤더가 모두 가운데 정렬됨을 브라우저 계산 스타일로 확인했다.
+
+## 2026-08-12 최종확정예산사업 팝업 UI·순번 통일
+
+### 설계 구분
+
+- 원본 요구사항정의서와 화면설계서에는 현재 Excel 기반 노후 하수관로 정비사업 및 최종확정예산사업 팝업과 직접 일치하는 화면이 없어 기존 통합설계와 사용자 지시에 따른 `설계 보완`으로 적용했다.
+
+### 구현 내용
+
+- 최종확정예산사업 WindowPopup의 구형 `SearchDiv`, `ListDiv`, `UiTable`을 공통 `StandardPopupLayout`, `StandardDataTable`, `Button`, `Input`, `Select` 구조로 교체했다.
+- 행정구역·사업 분류·년도·사업명 검색, 조회·초기화, 다중 선택·등록, Excel 다운로드와 부모창 완료 메시지 계약은 보존했다.
+- 행정구역·사업규모·총사업비·년차 사업비의 다단 헤더를 CS 기본 파란 헤더·흰 글씨·가운데 정렬로 통일했다.
+- 표 헤더는 `순번`으로 표시하고 전체 건수와 서버 페이지를 기준으로 내림차순 번호를 계산한다. 정렬 기능은 추가하지 않았다.
+- 백엔드 API, 저장 계약과 DB 구조는 변경하지 않았다.
+
+### 검증 결과
+
+- 로그인 브라우저에서 `/oper/obsltPplBiz`의 목록 헤더가 `순번`이며 첫 페이지가 `128`부터 내림차순으로 표시되는 것을 확인했다.
+- `/popup/cfmtnBgt?bizSe=정비사업`에서 조회 후 다단 헤더, 내부 가로 스크롤, 첫 페이지 `170`부터의 내림차순 번호와 2페이지 첫 번호 `160`을 확인했다.
+- 검색·초기화·등록 비활성 상태·Excel 다운로드 버튼과 10건 서버 페이징을 확인했다.
+- TypeScript 전체 검사는 이번 팝업 파일의 오류가 없음을 확인했으나 작업 범위 밖 기존 오류로 전체 명령은 실패했다. 개발 서버 보호를 위해 Next 빌드는 수행하지 않았다.
+
+## 2026-08-12 SN 일반 화면 상단 헤더 고정 회귀 보완
+
+- 넓은 표의 페이지 전체 가로 스크롤을 막기 위해 `sn-base-layout` 상위 요소에 적용했던 `overflow-x-hidden`이 공통 `Header`의 `sticky` 기준을 변경해, 세로 스크롤 시 헤더가 콘텐츠와 함께 올라가는 회귀를 확인했다.
+- 상위 레이아웃의 가로 넘침 처리를 스크롤 컨테이너를 만들지 않는 `overflow-x: clip`으로 변경했다.
+- flex 레이아웃에는 `min-width: 0`, `max-width: 100%`만 유지하고, 실제 다열 표의 좌우 이동은 `StandardDataTable` 내부 가로 스크롤이 계속 담당한다.
+- 브라우저에서 준설관리와 노후 하수관로 정비사업 화면을 최하단까지 이동한 뒤 헤더 위치가 `top: 0`으로 유지되는 것을 확인했다.
+- 노후 하수관로 화면의 문서 폭은 `clientWidth 1265px`, `scrollWidth 1265px`로 페이지 전체 가로 스크롤이 다시 생기지 않았음을 확인했다.
+- 하수관망도와 팝업 레이아웃, API·DB 계약은 변경하지 않았다.
+
+## 2026-08-12 버튼 색상·문구·순서 통일
+
+- 목록 검색은 `조회` 파란색, `초기화` 흰색 순서로 유지했다.
+- 목록 액션은 `엑셀다운로드 → 등록 → 최종확정예산사업 → 업로드` 순서로 정리하고 실행 동작은 파란색으로 통일했다.
+- 등록·상세/수정 화면은 `저장` 파란색, `취소` 흰색, `삭제` 빨간색 순서로 변경해 삭제가 항상 마지막에 오도록 했다.
+- 최종확정예산사업 팝업은 `조회 → 초기화`, 목록 액션은 `엑셀다운로드 → 등록` 순서를 적용했다.
+- 기존 Excel 업로드·다운로드, 등록·수정·삭제 기능과 비활성화 조건은 변경하지 않았다.
+
+## 2026-08-13 최종확정예산사업 팝업 여백·검색 배치 보완
+
+- 원본 화면설계서 슬라이드 8의 `SFR-011-001`, 요구사항정의서 추적표 87~90행의 `SFR-011-001`~`SFR-011-004`를 다시 확인했다. 원본에는 현재 최종확정예산사업 선택 팝업과 직접 일치하는 화면이 없어 기존 조회·선택·등록 계약을 유지한 `설계 보완`으로 처리했다.
+- 검색조건을 `환경청·시도·시군구·년도`와 `세부사업·내역사업·세부내역·사업명`의 4개씩 두 행으로 고정해 창 너비에 따라 임의로 끊기던 배치를 제거했다.
+- 팝업에서만 사용하던 25px 소형 버튼을 제거하고 조회·초기화·엑셀다운로드·등록을 CS 공통 32px 버튼 규격으로 통일했다.
+- 공통 팝업의 12px 간격과 중복되던 별도 여백을 제거하고, WindowPopup 크기를 `1400×720`으로 조정했다. 빈 목록은 목록 카드가 남은 세로 공간을 채우도록 해 카드 밖에 과도한 공백이 남지 않게 했다.
+- `StandardDataTable`에 팝업 전용 바깥 margin 제거 옵션을 추가해 이 팝업의 검색 카드와 목록 카드 좌우 기준선을 동일하게 맞췄다. 일반 페이지의 기존 카드 margin은 그대로 보존한다. 빈 목록은 남은 높이를 채우고, 조회 결과가 있으면 표의 자연 높이를 보존해 팝업 본문만 세로 이동하도록 공통 동작을 구분했다.
+- API, 조회조건, 다중선택, Excel 다운로드, 등록과 부모창 메시지 계약은 변경하지 않았다.
diff --git a/apps/sn/scripts/audit-screen-inventory.mjs b/apps/sn/scripts/audit-screen-inventory.mjs
new file mode 100644
index 000000000..1ecd7c9b1
--- /dev/null
+++ b/apps/sn/scripts/audit-screen-inventory.mjs
@@ -0,0 +1,102 @@
+import { readdir, readFile } from "node:fs/promises";
+import path from "node:path";
+
+const APP_DIR = path.resolve("apps/sn/app");
+const POPUP_DEFINITIONS = path.resolve(
+  "apps/sn/src/features/windowPopup/model/popupDefinitions.ts",
+);
+const POPUP_REGISTRY = path.resolve(
+  "apps/sn/src/features/windowPopup/registry.tsx",
+);
+
+const routeAliases = new Set([
+  "/map/agedPipePopup",
+  "/map2",
+  "/html/aged-pipe",
+  "/html/map",
+]);
+const developmentRoutes = new Set([
+  "/ii/fileupload",
+  "/ii/test",
+  "/oper/operStore",
+]);
+const infrastructureRoutes = new Set(["/", "/popup/[popupKey]"]);
+
+async function collectPageFiles(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const nested = await Promise.all(
+    entries.map(async (entry) => {
+      const absolutePath = path.join(directory, entry.name);
+      if (entry.isDirectory()) return collectPageFiles(absolutePath);
+      return entry.name === "page.tsx" ? [absolutePath] : [];
+    }),
+  );
+  return nested.flat();
+}
+
+function toRoute(filePath) {
+  const relative = path.relative(APP_DIR, path.dirname(filePath));
+  const segments = relative
+    .split(path.sep)
+    .filter(Boolean)
+    .filter((segment) => !/^\(.+\)$/.test(segment));
+  return `/${segments.join("/")}`.replace(/\/$/, "") || "/";
+}
+
+function extractDefinitionKeys(source) {
+  const objectStart = source.indexOf("export const windowPopupDefinitions = {");
+  const objectEnd = source.indexOf("} as const satisfies", objectStart);
+  return [...source.slice(objectStart, objectEnd).matchAll(/^  ([A-Za-z][A-Za-z0-9]*): \{/gm)]
+    .map((match) => match[1]);
+}
+
+function extractRegistryKeys(source) {
+  const objectStart = source.indexOf("export const windowPopupRegistry = {");
+  const objectEnd = source.indexOf("} satisfies", objectStart);
+  return [...source.slice(objectStart, objectEnd).matchAll(/^  ([A-Za-z][A-Za-z0-9]*):/gm)]
+    .map((match) => match[1]);
+}
+
+const pageFiles = await collectPageFiles(APP_DIR);
+const routes = pageFiles.map(toRoute).sort();
+const definitions = extractDefinitionKeys(
+  await readFile(POPUP_DEFINITIONS, "utf8"),
+);
+const registry = extractRegistryKeys(await readFile(POPUP_REGISTRY, "utf8"));
+
+const popupMissingInRegistry = definitions.filter((key) => !registry.includes(key));
+const registryMissingInDefinitions = registry.filter(
+  (key) => !definitions.includes(key),
+);
+const routeCategory = (route) => {
+  if (route === "/auth/login") return "authentication";
+  if (routeAliases.has(route)) return "alias-or-preview";
+  if (developmentRoutes.has(route)) return "development";
+  if (infrastructureRoutes.has(route)) return "infrastructure";
+  return "main-content";
+};
+
+const routeCounts = routes.reduce((groups, route) => {
+  const category = routeCategory(route);
+  groups[category] ??= [];
+  groups[category].push(route);
+  return groups;
+}, {});
+const report = {
+  routeFileCount: routes.length,
+  routeCounts: Object.fromEntries(
+    Object.entries(routeCounts).map(([key, value]) => [key, value.length]),
+  ),
+  routes: routes.map((route) => ({ route, category: routeCategory(route) })),
+  popupDefinitionCount: definitions.length,
+  popupRegistryCount: registry.length,
+  popupMissingInRegistry,
+  registryMissingInDefinitions,
+  popupKeys: definitions,
+};
+
+console.log(JSON.stringify(report, null, 2));
+
+if (popupMissingInRegistry.length || registryMissingInDefinitions.length) {
+  process.exitCode = 1;
+}
diff --git a/apps/sn/src/app/styles/components.css b/apps/sn/src/app/styles/components.css
index 948bbe8a4..b6eb7c567 100644
--- a/apps/sn/src/app/styles/components.css
+++ b/apps/sn/src/app/styles/components.css
@@ -1,6 +1,27 @@
 @tailwind components;
 
 @layer components {
+  /*
+   * 가로 넘침은 잘라내되 스크롤 컨테이너를 만들지 않아 공통 sticky 헤더를 유지한다.
+   * 실제 다열 표의 가로 이동은 StandardDataTable 내부 스크롤 영역이 담당한다.
+   */
+  .sn-base-layout {
+    overflow-x: clip !important;
+  }
+
+  /*
+   * 다열 표의 최소 폭이 공통 BaseLayout의 flex 항목을 넓히지 않도록 한다.
+   * 화면 전체가 아닌 표 내부에서만 가로 스크롤되며 SN의 모든 일반 페이지에 적용된다.
+   */
+  .sn-base-layout [class~="group/sidebar-wrapper"] {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .sn-base-layout .flex-1 {
+    min-width: 0;
+  }
+
   .card {
     @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
@@ -57,7 +78,11 @@
 
   .sn-popup-header-button {
     @apply border px-3 py-1 text-[1.05rem] text-primary-foreground;
-    border-color: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
+    border-color: color-mix(
+      in srgb,
+      var(--primary-foreground) 30%,
+      transparent
+    );
   }
 
   .sn-popup-section {
@@ -88,10 +113,9 @@
     font-size: 1.8rem;
   }
 
-  /* 부모 조회 화면의 날짜 입력 규격과 등록 팝업의 준설일자 입력을 동일하게 유지한다. */
-  .sn-dredging-register .sn-dredging-date-input {
-    color: #666 !important;
-    font-size: 12.5px !important;
+  /* 준설 팝업 날짜 입력은 부모 준설목록의 날짜 입력 글자 크기와 동일하게 유지한다. */
+  .sn-dredging-register .input-date-picker {
+    font-size: 1.25rem !important;
   }
 
   /* 준설사진 파일명은 메타정보 표에서만 표시하고 공통 업로드 목록의 중복 표출을 숨긴다. */
@@ -161,7 +185,11 @@
   }
 
   .sn-popup-danger-button-sm:hover {
-    background-color: color-mix(in srgb, var(--destructive) 10%, var(--background));
+    background-color: color-mix(
+      in srgb,
+      var(--destructive) 10%,
+      var(--background)
+    );
   }
 
   .sn-popup-primary-button-sm {
@@ -216,7 +244,11 @@
   }
 
   .sn-popup-grid-row-hover:hover {
-    background-color: color-mix(in srgb, var(--secondary) 60%, var(--background));
+    background-color: color-mix(
+      in srgb,
+      var(--secondary) 60%,
+      var(--background)
+    );
   }
 
   .sn-popup-grid-row-selected {
@@ -244,152 +276,156 @@
   }
 
   .form-section-title {
-    @apply mt-4 border border-border bg-[#eaf3fb] p-2 text-center text-xl font-medium text-[#647784];
+    @apply mt-4 border border-border bg-secondary p-2 text-center text-xl font-medium text-label;
   }
 
   [data-theme="black"] {
     .card {
-      color: #fff;
-      background-color: #0a0a0a !important;
+      color: var(--card-foreground);
+      background-color: var(--card) !important;
     }
     form {
-      color: rgb(255 255 255);
+      color: var(--foreground);
     }
     label {
-      color: rgb(241, 241, 241);
+      color: var(--label);
     }
     input {
       height: 3.2rem;
-      background-color: #1a1a1a;
-      border: 1px solid #262626;
+      background-color: var(--field);
+      border: 1px solid var(--input);
       border-radius: 4px;
     }
-    input.text-gray-600 {
-      color: #f1f1f1;
+    input.text-label {
+      color: var(--label);
     }
     button[role="combobox"] {
-      color: #f1f1f1;
-      background-color: rgb(26, 26, 26);
+      color: var(--foreground);
+      background-color: var(--field);
     }
     div [role="tablist"] {
       border: unset;
       gap: 4px;
     }
     .tabs-trigger[data-state="inactive"] {
-      color: #a4b7bf;
-      background: #55595d;
+      color: var(--muted-foreground);
+      background: var(--muted);
     }
     .tabs-trigger[data-state="inactive"]:hover {
-      color: #6bbaff;
-      background: #4c4f52;
+      color: var(--accent-foreground);
+      background: var(--accent);
     }
     .card-border {
-      box-shadow: 0 0 10px -1px #0000000f;
-      border: 1px solid #393939;
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+      @apply border-border bg-card shadow-blur;
     }
     a[aria-current="page"] {
-      background-color: rgb(32, 148, 250);
-      color: #000;
+      background-color: var(--primary);
+      color: var(--primary-foreground);
     }
     .card-header {
-      @apply border-b-[#3f4042];
+      @apply border-b-border;
     }
     .form-section-title {
-      @apply bg-[#5e7b9c] text-[#fff];
+      @apply bg-secondary text-label;
     }
     .gis-layer-panel {
-      background: #111214;
-      border-right-color: #2f3136;
-      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
+      background: var(--background);
+      border-right-color: var(--border);
+      box-shadow: 0 0 0 1px var(--border);
     }
     .gis-layer-panel-title {
-      color: #f3f4f6;
+      color: var(--foreground);
     }
     .gis-layer-panel hr {
-      border-color: #2f3136;
+      border-color: var(--border);
     }
     .gis-layer-row {
-      color: #e5e7eb;
+      color: var(--foreground);
     }
     .gis-layer-row:hover {
-      background: rgba(255, 255, 255, 0.08);
+      background: var(--accent);
     }
     .gis-layer-row span,
     .gis-layer-row label {
-      color: #e5e7eb !important;
+      color: var(--foreground) !important;
     }
     .gis-layer-row input[type="checkbox"] {
-      accent-color: #c026d3;
+      accent-color: var(--primary);
     }
     .gis-layer-action-button {
-      background: #1a1c20;
-      border-color: #3b82f6;
-      color: #cfe3ff;
+      background: var(--background);
+      border-color: var(--primary);
+      color: var(--primary);
     }
     .gis-layer-action-button:hover {
-      background: #23262b;
+      background: var(--accent);
     }
     .gis-layer-setting {
-      background: #111214;
-      border-top: 1px solid #2f3136;
+      background: var(--background);
+      border-top: 1px solid var(--border);
     }
     .gis-layer-toggle {
-      background: #111214;
-      border-color: #2f3136;
-      color: #f3f4f6;
+      background: var(--background);
+      border-color: var(--border);
+      color: var(--foreground);
     }
     .gis-layer-toggle:hover {
-      background: #1a1c20;
+      background: var(--accent);
     }
     input[type="file"] {
-      background-color: #1a1a1a;
-      border-color: #262626;
-      color: #f1f1f1;
+      background-color: var(--field);
+      border-color: var(--input);
+      color: var(--foreground);
     }
   }
 
   [data-theme="blue"] {
     .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+      @apply border-border bg-card;
     }
     .card-header {
-      @apply border-b-[#3f4042];
+      @apply border-b-border;
     }
     .form-section-title {
-      @apply bg-[#eaf3fb] text-[#647784];
+      @apply bg-secondary text-label;
     }
   }
 
   [data-theme="green"] {
     .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+      @apply border-border bg-card;
     }
     .card-header {
-      @apply border-b-[#3f4042];
+      @apply border-b-border;
     }
     .form-section-title {
-      @apply bg-[#ebf7f7] text-[#64908f];
+      @apply bg-secondary text-label;
     }
   }
 
   [data-theme="red"] {
     .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+      @apply border-border bg-card;
     }
     .card-header {
-      @apply border-b-[#3f4042];
+      @apply border-b-border;
     }
     .form-section-title {
-      @apply bg-[#f6f6f9] text-[#808080];
+      @apply bg-secondary text-label;
     }
   }
 }
 /* `I/I 분석 > 침입수 분석결과`는 나중에 다시 사용할 수 있도록 라우트는 유지하고 LNB에서만 임시 숨김 처리한다. */
 /* `I/I 분석 > 침입수 분석결과`, `RDII 분석결과`는 지도 popup 흐름으로 대체하고 레거시 라우트는 유지한 채 LNB에서만 숨긴다. */
-[data-sidebar="menu"] > *:nth-child(2) [data-sidebar="menu-sub"] > li:nth-child(2) {
+[data-sidebar="menu"]
+  > *:nth-child(2)
+  [data-sidebar="menu-sub"]
+  > li:nth-child(2) {
   display: none;
 }
-[data-sidebar="menu"] > *:nth-child(2) [data-sidebar="menu-sub"] > li:nth-child(4) {
+[data-sidebar="menu"]
+  > *:nth-child(2)
+  [data-sidebar="menu-sub"]
+  > li:nth-child(4) {
   display: none;
 }
diff --git a/apps/sn/src/features/cfmtnBgt/ui/CfmtnBgtPopupContent.tsx b/apps/sn/src/features/cfmtnBgt/ui/CfmtnBgtPopupContent.tsx
index d60ee49c6..ef0631b56 100644
--- a/apps/sn/src/features/cfmtnBgt/ui/CfmtnBgtPopupContent.tsx
+++ b/apps/sn/src/features/cfmtnBgt/ui/CfmtnBgtPopupContent.tsx
@@ -5,16 +5,29 @@
 
 import { useEffect, useMemo, useState } from "react";
 
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import useOnsemiroAddrStore from "@/app/store/useOnsemiroAddrStore";
 import {
-  SearchDiv,
-  SearchFormLeft,
-  SearchFormRight,
-  SelectBox,
-  UiTable,
-} from "@common/business_components/ui";
-import ListDiv from "@common/business_components/ui/list_div";
-import { Button, Input, Label } from "@common/components/ui";
+  StandardDataTable,
+  StandardPopupLayout,
+  getStandardRowNumber,
+} from "@common/business_components";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
 
 import { postPopupMessageAndClose } from "../../windowPopup/lib/popupMessage";
 import type { WindowPopupContentProps } from "../../windowPopup/model/types";
@@ -32,74 +45,20 @@ import type {
 } from "../model/cfmtn-bgt-types";
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
 
-/** 검색 SelectBox에서 공통으로 사용하는 전체 옵션이다. */
-const ALL = { text: "전체", val: "0" };
-const withAllOption = (items: { text: string; val: string }[]) => [
+type SelectOption = { text: string; val: string };
+type CfmtnBgtTableRow = CfmtnBgtRow;
+
+const ALL: SelectOption = { text: "전체", val: "0" };
+const PAGE_SIZE = 10;
+const EXPORT_SIZE = 1000;
+
+const withAllOption = (items: SelectOption[]) => [
   ALL,
   ...items.filter((item) => String(item.val) !== ALL.val),
 ];
-/** 화면 목록과 Excel 반복 조회에 적용할 페이지 크기다. */
-const PAGE_SIZE = 10;
-const EXPORT_SIZE = 1000;
-const ACTION_BUTTON_CLASS =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white";
-/** 최종확정예산사업 표시 항목과 선택 열의 표 헤더 계약이다. */
-const TABLE_HEADLIST = [
-  { id: "select", title: "선택", row: 0, rowSpan: 2, widthPercent: 4 },
-  { id: "rowNumber", title: "순번", row: 0, rowSpan: 2, widthPercent: 4 },
-  { id: "govArea", title: "환경청", row: 0, rowSpan: 2, widthPercent: 7 },
-  { id: "A", title: "행정구역", row: 0, colSpan: 2, widthPercent: 12 },
-  { id: "sido", title: "시도", row: 1, widthPercent: 6 },
-  { id: "gugun", title: "시군구", row: 1, widthPercent: 6 },
-  { id: "bizCd", title: "사업코드", row: 0, rowSpan: 2, widthPercent: 7 },
-  { id: "bizNm", title: "사업명", row: 0, rowSpan: 2, widthPercent: 12 },
-  { id: "sourceBizSe", title: "사업구분", row: 0, rowSpan: 2, widthPercent: 7 },
-  { id: "untBzNm", title: "세부사업", row: 0, rowSpan: 2, widthPercent: 8 },
-  { id: "mevBzNm", title: "내역사업", row: 0, rowSpan: 2, widthPercent: 8 },
-  { id: "dtlBzNm", title: "세부내역", row: 0, rowSpan: 2, widthPercent: 8 },
-  {
-    id: "bizStatus",
-    title: "사업진행상태",
-    row: 0,
-    rowSpan: 2,
-    widthPercent: 7,
-  },
-  {
-    id: "newContinuing",
-    title: "신규/계속",
-    row: 0,
-    rowSpan: 2,
-    widthPercent: 7,
-  },
-  { id: "startYear", title: "착수", row: 0, rowSpan: 2, widthPercent: 5 },
-  { id: "endYear", title: "준공", row: 0, rowSpan: 2, widthPercent: 5 },
-  { id: "B", title: "사업규모", row: 0, colSpan: 2, widthPercent: 16 },
-  { id: "treatmentPlantScale", title: "하수처리장", row: 1, widthPercent: 8 },
-  { id: "pipeScale", title: "하수관로", row: 1, widthPercent: 8 },
-  { id: "aidRate", title: "보조율\n(%)", row: 0, rowSpan: 2, widthPercent: 6 },
-  { id: "C", title: "총사업비", row: 0, colSpan: 6, widthPercent: 48 },
-  { id: "totalBizAmount", title: "합계", row: 1, widthPercent: 8 },
-  { id: "totalNational", title: "국고", row: 1, widthPercent: 8 },
-  { id: "totalLocal", title: "지방비", row: 1, widthPercent: 8 },
-  { id: "totalBeneficiary", title: "원인자부담금", row: 1, widthPercent: 8 },
-  { id: "totalLoan", title: "환특융자", row: 1, widthPercent: 8 },
-  { id: "totalEtc", title: "기타", row: 1, widthPercent: 8 },
-  {
-    id: "previousBizAmount",
-    title: "전년까지\n사업비",
-    row: 0,
-    rowSpan: 2,
-    widthPercent: 8,
-  },
-  { id: "D", title: "년차 사업비", row: 0, colSpan: 6, widthPercent: 48 },
-  { id: "annualBizAmount", title: "합계", row: 1, widthPercent: 8 },
-  { id: "annualNational", title: "국고", row: 1, widthPercent: 8 },
-  { id: "annualLocal", title: "지방비", row: 1, widthPercent: 8 },
-  { id: "annualBeneficiary", title: "원인자부담금", row: 1, widthPercent: 8 },
-  { id: "annualLoan", title: "환특융자", row: 1, widthPercent: 8 },
-  { id: "annualEtc", title: "기타", row: 1, widthPercent: 8 },
-];
+
 /** 조회 전과 오류 발생 시 사용할 빈 페이지 상태다. */
 const empty: CfmtnBgtPage = {
   content: [],
@@ -108,49 +67,105 @@ const empty: CfmtnBgtPage = {
   number: 0,
   size: PAGE_SIZE,
 };
-/** 코드와 명칭이 같은 SelectBox 옵션의 중복을 제거한다. */
-const uniq = (items: { text: string; val: string }[]) =>
-  Array.from(new Map(items.map((i) => [`${i.text}|${i.val}`, i])).values());
-type CfmtnBgtTableRow = CfmtnBgtRow & { select: number };
+
+/** 코드와 명칭이 같은 선택 옵션의 중복을 제거한다. */
+const uniq = (items: SelectOption[]) =>
+  Array.from(
+    new Map(items.map((item) => [`${item.text}|${item.val}`, item])).values(),
+  );
+
+const formatTableValue = (value: unknown) => {
+  if (value == null || value === "") return "-";
+  if (typeof value === "number") return value.toLocaleString("ko-KR");
+  return String(value);
+};
+
+const header = (title: string) => () => (
+  <span className="block whitespace-pre-line text-center">{title}</span>
+);
+
+const textColumn = (
+  id: keyof CfmtnBgtTableRow,
+  title: string,
+  width: number,
+): ColumnDef<CfmtnBgtTableRow> => ({
+  id,
+  accessorFn: (row) => row[id],
+  header: header(title),
+  cell: ({ getValue }) => (
+    <span className="block whitespace-normal break-words">
+      {formatTableValue(getValue())}
+    </span>
+  ),
+  meta: { width, align: "center" },
+});
+
+function SearchSelect({
+  label,
+  value,
+  options,
+  onValueChange,
+}: {
+  label: string;
+  value: string;
+  options: SelectOption[];
+  onValueChange: (value: string) => void;
+}) {
+  return (
+    <div className="flex shrink-0 items-center gap-2">
+      <Label className="whitespace-nowrap text-xl font-medium text-label">
+        {label}
+      </Label>
+      <Select value={value || ALL.val} onValueChange={onValueChange}>
+        <SelectTrigger className="w-[18rem]">
+          <SelectValue placeholder="전체" />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem
+              key={`${option.text}-${option.val}`}
+              value={String(option.val)}
+            >
+              {option.text}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
 
 /** 최종확정예산사업 조회·다중선택·Excel·일괄등록 팝업을 렌더링한다. */
 export default function CfmtnBgtPopupContent({
   searchParams,
 }: WindowPopupContentProps) {
-  // hydration 이후에만 현재년도 기반 검색조건과 팝업 UI를 표시한다.
+  const { confirm } = useConfirm();
   const [isMounted, setIsMounted] = useState(false);
-  // 실행 프로필에 맞춘 초기 기준연도를 보관한다.
   const [yearBase, setYearBase] = useState("");
   const bizSe =
     typeof searchParams.bizSe === "string" ? searchParams.bizSe : "";
   const { govArea, city, sgg, fetchGovArea, fetchCity, fetchSgg } =
     useOnsemiroAddrStore();
-  /** 부모 사업구분에 맞는 팝업 초기 검색조건을 만든다. */
-  const initial = () => ({
-    year: "",
-    govArea: "", // 환경청
-    sido: "", // 시도
-    gugun: "", // 시군구
-    untBzCd: "", // 세부사업
-    mevBzNm: "", //내역사업 bizSe === "정비사업" ? "하수관로정비" : "노후하수관로정밀조사지원",
-    dtlBzCd: "", // 세부내역
-    bizNm: "", // 사업명
+
+  const initial = (year = "") => ({
+    year,
+    govArea: "",
+    sido: "",
+    gugun: "",
+    untBzCd: "",
+    mevBzNm: "",
+    dtlBzCd: "",
+    bizNm: "",
   });
-  // 입력 중 검색조건과 조회 코드·페이지·선택행·메시지 상태를 관리한다.
+
   const [search, setSearch] = useState(initial);
-  // 선택 연도의 세부사업·내역사업·세부내역 코드를 보관한다.
   const [codes, setCodes] = useState<CfmtnBgtCode[]>([]);
-  // 서버 페이징에 사용하는 0부터 시작하는 현재 페이지를 보관한다.
   const [page, setPage] = useState(0);
-  // 현재 조회된 목록과 전체 건수 정보를 보관한다.
   const [data, setData] = useState(empty);
-  // 페이지가 바뀌어도 유지할 선택 원본의 SEQ_NO 집합을 보관한다.
   const [selected, setSelected] = useState<Set<number>>(new Set());
-  // 조회·다운로드·등록 결과 및 오류 안내 문구를 보관한다.
   const [notice, setNotice] = useState("");
-  // 중복 요청을 막고 처리 중 버튼 상태를 제어한다.
   const [loading, setLoading] = useState(false);
-  /** 현재년도부터 최근 6개 연도의 선택 옵션을 만든다. */
+
   const yearOptions = useMemo(() => {
     if (!yearBase) return [];
     const thisYear = new Date().getFullYear();
@@ -159,7 +174,7 @@ export default function CfmtnBgtPopupContent({
       return { text: year, val: year };
     });
   }, [yearBase]);
-  // 브라우저 환경이 준비되면 프로필별 기준연도와 초기 조회연도를 설정한다.
+
   useEffect(() => {
     setIsMounted(true);
     const resolvedYear =
@@ -172,116 +187,224 @@ export default function CfmtnBgtPopupContent({
       year: current.year || resolvedYear,
     }));
   }, []);
-  // 팝업 검색조건에서 사용할 ONSEMIRO 주소 선택목록을 최초 조회한다.
+
   useEffect(() => {
     void fetchGovArea();
     void fetchCity();
     void fetchSgg();
   }, [fetchCity, fetchGovArea, fetchSgg]);
-  // 조회연도가 변경되면 해당 연도의 사업분류 코드를 다시 조회한다.
+
   useEffect(() => {
     if (!search.year) return;
     void getCfmtnBgtCodes(search.year)
       .then((result) => setCodes(Array.isArray(result) ? result : []))
-      .catch((e) =>
-        console.error(e instanceof Error ? e.message : "코드를 조회하지 못했습니다."),
+      .catch((error) =>
+        console.error(
+          error instanceof Error
+            ? error.message
+            : "코드를 조회하지 못했습니다.",
+        ),
       );
   }, [search.year]);
-  /** 하수관로정비에 해당하는 세부사업 선택목록을 만든다. */
+
   const untOptions = useMemo(
     () =>
       uniq(
         codes
-          .filter((c) => c.untBzNm?.startsWith("하수관로정비"))
-          .map((c) => ({ text: c.untBzNm, val: c.untBzCd })),
+          .filter((code) => code.untBzNm?.startsWith("하수관로정비"))
+          .map((code) => ({ text: code.untBzNm, val: code.untBzCd })),
       ),
     [codes],
   );
-  // 사업구분 기본조건에 맞는 첫 세부사업 코드를 자동 선택한다.
+
   useEffect(() => {
     const first = untOptions[0];
-    if (!search.untBzCd && first)
-      setSearch((s) => ({ ...s, untBzCd: first.val }));
+    if (!search.untBzCd && first) {
+      setSearch((current) => ({ ...current, untBzCd: first.val }));
+    }
   }, [search.untBzCd, untOptions]);
-  /** 선택 세부사업에 종속된 내역사업 선택목록을 만든다. */
+
   const mevOptions = useMemo(
     () =>
       uniq(
         codes
-          .filter((c) => !search.untBzCd || c.untBzCd === search.untBzCd)
-          .map((c) => ({ text: c.mevBzNm, val: c.mevBzNm }))
-          .filter((x) => x.text),
+          .filter((code) => !search.untBzCd || code.untBzCd === search.untBzCd)
+          .map((code) => ({ text: code.mevBzNm, val: code.mevBzNm }))
+          .filter((option) => option.text),
       ),
     [codes, search.untBzCd],
   );
-  /** 선택 사업구분과 내역사업에 종속된 세부내역 선택목록을 만든다. */
+
   const dtlOptions = useMemo(
     () =>
       uniq(
         codes
           .filter(
-            (c) =>
-              (!search.untBzCd || c.untBzCd === search.untBzCd) &&
-              (!search.mevBzNm || c.mevBzNm === search.mevBzNm) &&
+            (code) =>
+              (!search.untBzCd || code.untBzCd === search.untBzCd) &&
+              (!search.mevBzNm || code.mevBzNm === search.mevBzNm) &&
               (bizSe !== "정비사업" ||
-                c.dtlBzNm?.startsWith("노후하수관로정비")),
+                code.dtlBzNm?.startsWith("노후하수관로정비")),
           )
-          .map((c) => ({ text: c.dtlBzNm, val: c.dtlBzCd }))
-          .filter((x) => x.text),
+          .map((code) => ({ text: code.dtlBzNm, val: code.dtlBzCd }))
+          .filter((option) => option.text),
       ),
     [bizSe, codes, search.mevBzNm, search.untBzCd],
   );
-  // 정비사업인 경우 노후하수관로정비에 해당하는 첫 세부내역을 자동 선택한다.
+
   useEffect(() => {
     const first = dtlOptions[0];
-    if (bizSe === "정비사업" && !search.dtlBzCd && first)
-      setSearch((s) => ({ ...s, dtlBzCd: first.val }));
+    if (bizSe === "정비사업" && !search.dtlBzCd && first) {
+      setSearch((current) => ({ ...current, dtlBzCd: first.val }));
+    }
   }, [bizSe, dtlOptions, search.dtlBzCd]);
-  // 시도 코드를 조회 API가 사용하는 시도명으로 변환한다.
-  const cityName = city.find((x) => String(x.val) === search.sido)?.text ?? "";
-  // 선택 시도 코드의 앞 두 자리에 해당하는 시군구만 노출한다.
+
+  const cityName =
+    city.find((item) => String(item.val) === search.sido)?.text ?? "";
   const sggOptions = sgg.filter(
-    (x) => !search.sido || String(x.val).startsWith(search.sido.slice(0, 2)),
+    (item) =>
+      !search.sido || String(item.val).startsWith(search.sido.slice(0, 2)),
   );
-  /** API 목록을 UiTable 선택 열이 포함된 화면 행으로 변환한다. */
+
   const rows = useMemo<CfmtnBgtTableRow[]>(
     () =>
-      (Array.isArray(data.content) ? data.content : []).map((row) => ({
+      (Array.isArray(data.content) ? data.content : []).map((row, index) => ({
         ...row,
-        select: row.seqNo,
+        rowNumber: getStandardRowNumber({
+          total: data.totalElements,
+          rowIndex: index,
+          pageIndex: page,
+          pageSize: PAGE_SIZE,
+        }),
       })),
-    [data.content],
+    [data.content, data.totalElements, page],
   );
-  /** 현재 검색조건을 목록 API의 URL 파라미터로 변환한다. */
-  const params = (targetPage: number, size = PAGE_SIZE) => {
-    const p = new URLSearchParams({
+
+  const columns = useMemo<ColumnDef<CfmtnBgtTableRow>[]>(
+    () => [
+      {
+        id: "select",
+        header: header("선택"),
+        cell: ({ row }) => (
+          <input
+            type="checkbox"
+            aria-label={`${row.original.bizNm} 선택`}
+            checked={selected.has(row.original.seqNo)}
+            onChange={(event) =>
+              setSelected((current) => {
+                const next = new Set(current);
+                if (event.target.checked) next.add(row.original.seqNo);
+                else next.delete(row.original.seqNo);
+                return next;
+              })
+            }
+          />
+        ),
+        meta: { width: 56, align: "center" },
+      },
+      textColumn("rowNumber", "순번", 64),
+      textColumn("govArea", "환경청", 90),
+      {
+        id: "administrativeArea",
+        header: header("행정구역"),
+        columns: [
+          textColumn("sido", "시도", 90),
+          textColumn("gugun", "시군구", 90),
+        ],
+      },
+      textColumn("bizCd", "사업코드", 110),
+      textColumn("bizNm", "사업명", 220),
+      textColumn("sourceBizSe", "사업구분", 110),
+      textColumn("untBzNm", "세부사업", 140),
+      textColumn("mevBzNm", "내역사업", 140),
+      textColumn("dtlBzNm", "세부내역", 150),
+      textColumn("bizStatus", "사업진행상태", 110),
+      textColumn("newContinuing", "신규/계속", 90),
+      textColumn("startYear", "착수", 72),
+      textColumn("endYear", "준공", 72),
+      {
+        id: "businessScale",
+        header: header("사업규모"),
+        columns: [
+          textColumn("treatmentPlantScale", "하수처리장", 120),
+          textColumn("pipeScale", "하수관로", 120),
+        ],
+      },
+      textColumn("aidRate", "보조율\n(%)", 80),
+      {
+        id: "totalBusinessExpense",
+        header: header("총사업비"),
+        columns: [
+          textColumn("totalBizAmount", "합계", 110),
+          textColumn("totalNational", "국고", 110),
+          textColumn("totalLocal", "지방비", 110),
+          textColumn("totalBeneficiary", "원인자부담금", 120),
+          textColumn("totalLoan", "환특융자", 110),
+          textColumn("totalEtc", "기타", 100),
+        ],
+      },
+      textColumn("previousBizAmount", "전년까지\n사업비", 110),
+      {
+        id: "annualBusinessExpense",
+        header: header("년차 사업비"),
+        columns: [
+          textColumn("annualBizAmount", "합계", 110),
+          textColumn("annualNational", "국고", 110),
+          textColumn("annualLocal", "지방비", 110),
+          textColumn("annualBeneficiary", "원인자부담금", 120),
+          textColumn("annualLoan", "환특융자", 110),
+          textColumn("annualEtc", "기타", 100),
+        ],
+      },
+    ],
+    [selected],
+  );
+
+  const params = (
+    targetPage: number,
+    size = PAGE_SIZE,
+    targetSearch = search,
+  ) => {
+    const targetCityName =
+      city.find((item) => String(item.val) === targetSearch.sido)?.text ?? "";
+    const targetSggOptions = sgg.filter(
+      (item) =>
+        !targetSearch.sido ||
+        String(item.val).startsWith(targetSearch.sido.slice(0, 2)),
+    );
+    const query = new URLSearchParams({
       page: String(targetPage),
       size: String(size),
-      year: search.year,
+      year: targetSearch.year,
     });
-    if (search.govArea)
-      p.set(
+    if (targetSearch.govArea) {
+      query.set(
         "govArea",
-        govArea.find((x) => String(x.val) === search.govArea)?.text ??
-          search.govArea,
+        govArea.find((item) => String(item.val) === targetSearch.govArea)
+          ?.text ?? targetSearch.govArea,
       );
-    if (cityName) p.set("sido", cityName);
-    if (search.gugun && search.gugun !== "0")
-      p.set(
+    }
+    if (targetCityName) query.set("sido", targetCityName);
+    if (targetSearch.gugun && targetSearch.gugun !== ALL.val) {
+      query.set(
         "gugun",
-        sggOptions.find((x) => String(x.val) === search.gugun)?.text ?? "",
+        targetSggOptions.find((item) => String(item.val) === targetSearch.gugun)
+          ?.text ?? "",
       );
-    ["untBzCd", "mevBzNm", "dtlBzCd", "bizNm"].forEach((k) => {
-      const v = search[k as keyof typeof search];
-      if (v) p.set(k, v);
+    }
+    (["untBzCd", "mevBzNm", "dtlBzCd", "bizNm"] as const).forEach((key) => {
+      const value = targetSearch[key];
+      if (value && value !== ALL.val) query.set(key, value);
     });
-    return p;
+    return query;
   };
-  /** 지정 페이지의 최종확정예산사업 목록을 조회한다. */
-  const load = async (targetPage = 0) => {
+
+  const load = async (targetPage = 0, targetSearch = search) => {
     setLoading(true);
     try {
-      const result = await getCfmtnBgtPage(params(targetPage));
+      const result = await getCfmtnBgtPage(
+        params(targetPage, PAGE_SIZE, targetSearch),
+      );
       setData(
         result &&
           typeof result === "object" &&
@@ -292,30 +415,47 @@ export default function CfmtnBgtPopupContent({
       );
       setPage(targetPage);
       setNotice("");
-    } catch (e) {
-      console.error(e instanceof Error ? e.message : "조회하지 못했습니다.");
+    } catch (error) {
+      console.error(
+        error instanceof Error ? error.message : "조회하지 못했습니다.",
+      );
       setData(empty);
+      setNotice("목록을 조회하지 못했습니다.");
     } finally {
       setLoading(false);
     }
   };
-  /** 검색조건과 조회결과 및 선택상태를 부모 사업구분의 초기값으로 되돌린다. */
+
   const reset = () => {
-    setSearch(initial());
-    setData(empty);
+    const defaultUntBzCd = untOptions[0]?.val ?? "";
+    const defaultDtlBzCd =
+      bizSe === "정비사업"
+        ? (codes.find(
+            (code) =>
+              code.untBzCd === defaultUntBzCd &&
+              code.dtlBzNm?.startsWith("노후하수관로정비"),
+          )?.dtlBzCd ?? "")
+        : "";
+    const resetSearch = {
+      ...initial(yearBase),
+      untBzCd: defaultUntBzCd,
+      dtlBzCd: defaultDtlBzCd,
+    };
+    setSearch(resetSearch);
     setSelected(new Set());
     setPage(0);
     setNotice("");
+    void load(0, resetSearch);
   };
-  /** 전체 결과를 1,000건씩 순회 조회하여 Excel로 내려받는다. */
+
   const download = async () => {
     setLoading(true);
     try {
-      let p = 0,
-        total = 1;
-      const rows: CfmtnBgtRow[] = [];
-      while (p < total) {
-        const result = await getCfmtnBgtPage(params(p, EXPORT_SIZE));
+      let exportPage = 0;
+      let totalPages = 1;
+      const exportRows: CfmtnBgtRow[] = [];
+      while (exportPage < totalPages) {
+        const result = await getCfmtnBgtPage(params(exportPage, EXPORT_SIZE));
         const safeResult =
           result &&
           typeof result === "object" &&
@@ -324,245 +464,224 @@ export default function CfmtnBgtPopupContent({
           "totalPages" in result
             ? (result as CfmtnBgtPage)
             : empty;
-        rows.push(...safeResult.content);
-        total = safeResult.totalPages;
-        p++;
+        exportRows.push(...safeResult.content);
+        totalPages = safeResult.totalPages;
+        exportPage += 1;
       }
-      downloadCfmtnBgtExcel(rows, search.year);
-    } catch (e) {
-      console.error(e instanceof Error ? e.message : "엑셀을 내려받지 못했습니다.");
+      downloadCfmtnBgtExcel(exportRows, search.year);
+      setNotice("");
+    } catch (error) {
+      console.error(
+        error instanceof Error ? error.message : "엑셀을 내려받지 못했습니다.",
+      );
+      setNotice("엑셀을 내려받지 못했습니다.");
     } finally {
       setLoading(false);
     }
   };
-  /** 선택한 원본 사업을 확인 후 노후하수관로 사업으로 일괄등록한다. */
+
   const register = async () => {
     if (!selected.size) return;
-    if (!confirm(`선택한 ${selected.size}건을 ${bizSe}으로 등록하시겠습니까?`))
+    if (
+      !(await confirm(
+        `선택한 ${selected.size}건을 ${bizSe}으로 등록하시겠습니까?`,
+      ))
+    ) {
       return;
+    }
     setLoading(true);
     try {
-      const r = await registerCfmtnBgt(bizSe, [...selected]);
+      const result = await registerCfmtnBgt(bizSe, [...selected]);
       postPopupMessageAndClose(WINDOW_POPUP_MESSAGE_TYPE.CFMTN_BGT_REGISTERED, {
-        insertedCount: String(r.insertedCount),
-        skippedCount: String(r.skippedCount),
+        insertedCount: String(result.insertedCount),
+        skippedCount: String(result.skippedCount),
       });
-    } catch (e) {
-      console.error(e instanceof Error ? e.message : "등록하지 못했습니다.");
+    } catch (error) {
+      console.error(
+        error instanceof Error ? error.message : "등록하지 못했습니다.",
+      );
+      setNotice("선택한 사업을 등록하지 못했습니다.");
     } finally {
       setLoading(false);
     }
   };
+
+  const pagination: PaginationState = {
+    pageIndex: page,
+    pageSize: PAGE_SIZE,
+  };
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { pagination },
+    rowCount: data.totalElements,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => String(row.seqNo),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      if (next.pageIndex === page) return;
+      void load(next.pageIndex);
+    },
+  });
+
   if (!isMounted) return null;
+
   return (
-    <>
+    <StandardPopupLayout title="최종확정예산사업">
       <LoadingOverlay isLoading={loading} />
-      <SearchDiv>
-        <SearchFormLeft>
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center space-x-2">
-              <div className="flex items-center">
-                <SelectBox
-                  label="환경청"
-                  className=""
-                  labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[140px] rounded-lg bg-white"
-                  selectArray={withAllOption(govArea)}
-                  value={search.govArea}
-                  onSelectValue={(v) =>
-                    setSearch((s) => ({ ...s, govArea: String(v) }))
-                  }
-                />
-              </div>
-              <div className="flex items-center">
-                <SelectBox
-                  label="시도"
-                  className=""
-                  labelClass="w-16 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[140px] rounded-lg bg-white"
-                  selectArray={[...city]}
-                  value={search.sido}
-                  onSelectValue={(v) =>
-                    setSearch((s) => ({ ...s, sido: String(v), gugun: "0" }))
-                  }
-                />
-              </div>
-              <div className="flex items-center">
-                <SelectBox
-                  label="시군구"
-                  className=""
-                  labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[140px] rounded-lg bg-white"
-                  selectArray={withAllOption(sggOptions)}
-                  value={search.gugun}
-                  onSelectValue={(v) =>
-                    setSearch((s) => ({ ...s, gugun: String(v) }))
-                  }
-                />
-              </div>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="flex items-center">
-                <SelectBox
-                  label="세부사업"
-                  className=""
-                  labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[180px] rounded-lg bg-white"
-                  selectArray={withAllOption(untOptions)}
-                  value={search.untBzCd}
-                  onSelectValue={(v) =>
-                    setSearch((s) => ({
-                      ...s,
-                      untBzCd: String(v),
-                      dtlBzCd: "0",
-                    }))
-                  }
-                />
-              </div>
-              <div className="flex items-center">
-                <SelectBox
-                  label="내역사업"
-                  className=""
-                  labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[180px] rounded-lg bg-white"
-                  selectArray={withAllOption(mevOptions)}
-                  value={search.mevBzNm}
-                  onSelectValue={(v) =>
-                    setSearch((s) => ({
-                      ...s,
-                      mevBzNm: String(v),
-                      dtlBzCd: "0",
-                    }))
-                  }
-                />
-              </div>
-              <div className="flex items-center">
-                <SelectBox
-                  label="세부내역"
-                  className=""
-                  labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[200px] rounded-lg bg-white"
-                  selectArray={withAllOption(dtlOptions)}
-                  value={search.dtlBzCd}
-                  onSelectValue={(v) =>
-                    setSearch((s) => ({ ...s, dtlBzCd: String(v) }))
-                  }
-                />
-              </div>
-              <div className="flex items-center">
-                <SelectBox
-                  label="년도"
-                  className=""
-                  labelClass="w-16 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[60px] rounded-lg bg-white"
-                  selectArray={yearOptions}
-                  value={search.year}
-                  onSelectValue={(v) =>
-                    setSearch((s) => ({ ...s, year: String(v) }))
-                  }
-                />
-              </div>
-              <div className="flex items-center">
-                <Label className="w-20 text-xl text-gray-600">사업명</Label>
-                <Input
-                  className="w-[250px] !text-2xl"
-                  value={search.bizNm}
-                  onChange={(e) =>
-                    setSearch((s) => ({ ...s, bizNm: e.target.value }))
-                  }
-                />
-              </div>
-            </div>
-          </div>
-        </SearchFormLeft>
-        <SearchFormRight className="ml-auto flex shrink-0 items-center justify-end px-4">
-          <div className="flex items-center gap-2">
+
+      <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
+        <SearchSelect
+          label="환경청"
+          value={search.govArea}
+          options={withAllOption(govArea)}
+          onValueChange={(value) =>
+            setSearch((current) => ({
+              ...current,
+              govArea: value === ALL.val ? "" : value,
+            }))
+          }
+        />
+        <SearchSelect
+          label="시도"
+          value={search.sido}
+          options={withAllOption(city)}
+          onValueChange={(value) =>
+            setSearch((current) => ({
+              ...current,
+              sido: value === ALL.val ? "" : value,
+              gugun: "",
+            }))
+          }
+        />
+        <SearchSelect
+          label="시군구"
+          value={search.gugun}
+          options={withAllOption(sggOptions)}
+          onValueChange={(value) =>
+            setSearch((current) => ({
+              ...current,
+              gugun: value === ALL.val ? "" : value,
+            }))
+          }
+        />
+        <SearchSelect
+          label="년도"
+          value={search.year}
+          options={yearOptions}
+          onValueChange={(value) =>
+            setSearch((current) => ({ ...current, year: value }))
+          }
+        />
+        <SearchSelect
+          label="세부사업"
+          value={search.untBzCd}
+          options={withAllOption(untOptions)}
+          onValueChange={(value) =>
+            setSearch((current) => ({
+              ...current,
+              untBzCd: value === ALL.val ? "" : value,
+              mevBzNm: "",
+              dtlBzCd: "",
+            }))
+          }
+        />
+        <SearchSelect
+          label="내역사업"
+          value={search.mevBzNm}
+          options={withAllOption(mevOptions)}
+          onValueChange={(value) =>
+            setSearch((current) => ({
+              ...current,
+              mevBzNm: value === ALL.val ? "" : value,
+              dtlBzCd: "",
+            }))
+          }
+        />
+        <SearchSelect
+          label="세부내역"
+          value={search.dtlBzCd}
+          options={withAllOption(dtlOptions)}
+          onValueChange={(value) =>
+            setSearch((current) => ({
+              ...current,
+              dtlBzCd: value === ALL.val ? "" : value,
+            }))
+          }
+        />
+        <div className="flex shrink-0 items-center gap-2">
+          <Label
+            htmlFor="cfmtn-bgt-biz-name"
+            className="whitespace-nowrap text-xl font-medium text-label"
+          >
+            사업명
+          </Label>
+          <Input
+            id="cfmtn-bgt-biz-name"
+            className="w-[18rem]"
+            value={search.bizNm}
+            onChange={(event) =>
+              setSearch((current) => ({
+                ...current,
+                bizNm: event.target.value,
+              }))
+            }
+            onKeyDown={(event) => {
+              if (event.key === "Enter") void load(0);
+            }}
+          />
+        </div>
+        <div className="flex min-w-fit flex-1 items-center justify-end gap-2">
+          <Button type="button" onClick={() => void load(0)}>
+            조회
+          </Button>
+          <Button type="button" color="white" onClick={reset}>
+            초기화
+          </Button>
+        </div>
+      </PopupSearchPanel>
+
+      {notice ? (
+        <div
+          role="status"
+          className="rounded-sm border border-primary bg-primary-transparent px-4 py-3 text-[1.3rem] text-primary"
+        >
+          {notice}
+        </div>
+      ) : null}
+
+      <StandardDataTable
+        table={table}
+        title="최종확정예산사업 목록"
+        actions={
+          <>
+            <span className="self-center text-[1.3rem] text-muted-foreground">
+              선택 {selected.size.toLocaleString("ko-KR")}건
+            </span>
             <Button
               type="button"
-              className={ACTION_BUTTON_CLASS}
-              size="sm"
-              onClick={() => void load(0)}
+              disabled={loading}
+              onClick={() => void download()}
             >
-              조회
+              엑셀다운로드
             </Button>
             <Button
               type="button"
-              className={ACTION_BUTTON_CLASS}
-              size="sm"
-              onClick={reset}
-            >
-              초기화
-            </Button>
-            <Button
-              type="button"
-              className={ACTION_BUTTON_CLASS}
-              size="sm"
               disabled={!selected.size || loading}
               onClick={() => void register()}
             >
               등록
             </Button>
-            <Button
-              type="button"
-              className="rounded-sm bg-green-600 px-4 py-2 text-sm font-medium !text-white hover:bg-green-700"
-              size="sm"
-              onClick={() => void download()}
-            >
-              엑셀다운로드
-            </Button>
-          </div>
-        </SearchFormRight>
-      </SearchDiv>
-      {notice && (
-        <div
-          role="status"
-          className="mx-[1.2rem] mt-4 rounded border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-700"
-        >
-          {notice}
-        </div>
-      )}
-      <ListDiv className="overflow-x-auto">
-        <div className="w-[180%]">
-          <div className="card-header flex items-center justify-between">
-            <h3 className="text-2xl font-medium">
-              최종확정예산사업{" "}
-              <span className="text-base text-gray-500">
-                ({data.totalElements.toLocaleString("ko-KR")}건 / 선택{" "}
-                {selected.size.toLocaleString("ko-KR")}건)
-              </span>
-            </h3>
-          </div>
-          <UiTable<CfmtnBgtTableRow>
-            headName=""
-            headlist={TABLE_HEADLIST}
-            tableData={rows}
-            pageSize={PAGE_SIZE}
-            total={data.totalElements}
-            curPage={page + 1}
-            cellClick={undefined}
-            onPageChange={(nextPage) => void load(nextPage - 1)}
-            widthFixed
-            noOuterMargin
-            renderCell={(row, headId) => {
-              if (headId !== "select") return undefined;
-              return (
-                <input
-                  type="checkbox"
-                  checked={selected.has(row.seqNo)}
-                  onChange={(event) =>
-                    setSelected((prev) => {
-                      const next = new Set(prev);
-                      if (event.target.checked) next.add(row.seqNo);
-                      else next.delete(row.seqNo);
-                      return next;
-                    })
-                  }
-                />
-              );
-            }}
-          />
-        </div>
-      </ListDiv>
-    </>
+          </>
+        }
+        scrollMode="horizontal"
+        minTableWidth="380rem"
+        flushOuterMargin
+        className="!w-full !max-w-full"
+        fillAvailableHeight
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizFormPage.tsx b/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizFormPage.tsx
index b36076bad..b4e4a2c32 100644
--- a/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizFormPage.tsx
+++ b/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizFormPage.tsx
@@ -3,8 +3,20 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
-import { SelectBox } from "@common/business_components/ui";
-import { Button, Input } from "@common/components/ui";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  StandardFormField,
+  StandardFormSection,
+} from "@common/business_components";
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
 
 import {
   createCtyFldngPrvtnBusiness,
@@ -19,6 +31,7 @@ import type {
 } from "../model/cty-fldng-prvtn-biz-types";
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import { useAlertStore } from "@/shared/lib";
 import useStore from "@/store/useStore";
 
 const DETAIL_META = [
@@ -28,7 +41,7 @@ const DETAIL_META = [
   { code: "CW", title: "시설공사" },
 ] as const;
 const BASIC_FIELDS = [
-  ["seqNo", "순번", "number"],
+  ["seqNo", "사업순번", "number"],
   ["stp", "단계", "text"],
   ["envoNm", "환경청", "text"],
   ["dsgnYrCycl", "지정년도/차수", "text"],
@@ -120,23 +133,22 @@ const validDate = (value: unknown) =>
 
 /** 가변 시설 배열의 추가·수정·삭제 UI를 제공한다. */
 function FacilityEditor({
-  label,
   unit,
   value,
   onChange,
 }: {
-  label: string;
   unit: string;
   value: CtyFldngFacility[];
   onChange: (next: CtyFldngFacility[]) => void;
 }) {
   return (
-    <div className="rounded border p-3">
+    <div className="min-w-0">
       <div className="mb-2 flex items-center justify-between">
-        <strong>
-          {label} ({unit})
-        </strong>
+        <span className="text-[1.2rem] text-muted-foreground">
+          번호 / 용량({unit})
+        </span>
         <Button
+          type="button"
           size="sm"
           onClick={() =>
             onChange([
@@ -149,7 +161,9 @@ function FacilityEditor({
         </Button>
       </div>
       {value.length === 0 ? (
-        <p className="text-sm text-gray-500">등록된 시설이 없습니다.</p>
+        <p className="text-[1.3rem] text-muted-foreground">
+          등록된 시설이 없습니다.
+        </p>
       ) : (
         value.map((item, index) => (
           <div
@@ -189,8 +203,9 @@ function FacilityEditor({
               }
             />
             <Button
+              type="button"
               size="sm"
-              variant="outline"
+              color="red"
               onClick={() => onChange(value.filter((_, i) => i !== index))}
             >
               삭제
@@ -211,13 +226,17 @@ function DetailEditor({
   onChange: (next: CtyFldngDetail) => void;
 }) {
   return (
-    <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+    <>
       {DETAIL_FIELDS.map(([key, label, type]) => (
-        <label key={key} className="flex flex-col gap-1 text-sm font-medium">
-          {label}
+        <StandardFormField
+          key={key}
+          id={`cty-fldng-detail-${detail.bizPrgrsSe}-${key}`}
+          label={label}
+        >
           <Input
-            type={type === "date" ? "text" : type}
-            placeholder={type === "date" ? "YYYY-MM-DD" : undefined}
+            id={`cty-fldng-detail-${detail.bizPrgrsSe}-${key}`}
+            className="w-full !text-[1.3rem]"
+            type={type === "date" ? "date" : type}
             value={String(detail[key] ?? "")}
             onChange={(e) =>
               onChange({
@@ -229,27 +248,30 @@ function DetailEditor({
               })
             }
           />
-        </label>
+        </StandardFormField>
       ))}
-      <FacilityEditor
-        label="빗물펌프장"
-        unit="㎥/분"
-        value={detail.rnwtrPumpst ?? []}
-        onChange={(value) => onChange({ ...detail, rnwtrPumpst: value })}
-      />
-      <FacilityEditor
-        label="펌프저류"
-        unit="㎥"
-        value={detail.pumpImpd ?? []}
-        onChange={(value) => onChange({ ...detail, pumpImpd: value })}
-      />
-      <FacilityEditor
-        label="저류시설"
-        unit="㎥"
-        value={detail.impdFclt ?? []}
-        onChange={(value) => onChange({ ...detail, impdFclt: value })}
-      />
-    </div>
+      <StandardFormField label="빗물펌프장">
+        <FacilityEditor
+          unit="㎥/분"
+          value={detail.rnwtrPumpst ?? []}
+          onChange={(value) => onChange({ ...detail, rnwtrPumpst: value })}
+        />
+      </StandardFormField>
+      <StandardFormField label="펌프저류">
+        <FacilityEditor
+          unit="㎥"
+          value={detail.pumpImpd ?? []}
+          onChange={(value) => onChange({ ...detail, pumpImpd: value })}
+        />
+      </StandardFormField>
+      <StandardFormField label="저류시설">
+        <FacilityEditor
+          unit="㎥"
+          value={detail.impdFclt ?? []}
+          onChange={(value) => onChange({ ...detail, impdFclt: value })}
+        />
+      </StandardFormField>
+    </>
   );
 }
 
@@ -257,6 +279,8 @@ function DetailEditor({
 export function CtyFldngPrvtnBizFormPage({ id }: { id?: string }) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   const [form, setForm] = useState<CtyFldngPrvtnBizSaveRequest>(emptyForm);
   const [loading, setLoading] = useState(Boolean(id));
@@ -318,8 +342,9 @@ export function CtyFldngPrvtnBizFormPage({ id }: { id?: string }) {
     try {
       if (id) await updateCtyFldngPrvtnBusiness(id, form);
       else await createCtyFldngPrvtnBusiness(form);
-      window.alert(id ? "수정되었습니다." : "등록되었습니다.");
-      router.push(listHref);
+      alert(id ? "수정되었습니다." : "등록되었습니다.", () =>
+        router.push(listHref),
+      );
     } catch (e) {
       setNotice(e instanceof Error ? e.message : "저장하지 못했습니다.");
     } finally {
@@ -328,134 +353,180 @@ export function CtyFldngPrvtnBizFormPage({ id }: { id?: string }) {
   };
   /** 사용자 확인 후 현재 사업을 논리삭제하고 목록으로 이동한다. */
   const handleDelete = async () => {
-    if (!id || !window.confirm("삭제하시겠습니까?")) return;
+    if (!id || !(await confirm("삭제하시겠습니까?"))) return;
     setLoading(true);
     try {
       await deleteCtyFldngPrvtnBusiness(id);
-      window.alert("삭제되었습니다.");
-      router.push(listHref);
+      alert("삭제되었습니다.", () => router.push(listHref));
     } catch (e) {
       setNotice(e instanceof Error ? e.message : "삭제하지 못했습니다.");
     } finally {
       setLoading(false);
     }
   };
+
+  /** 기본정보 입력을 CS 표형 필드로 변환하고 긴 내용만 같은 행의 넓은 영역을 사용한다. */
+  const renderBasicField = ([
+    key,
+    label,
+    type,
+  ]: (typeof BASIC_FIELDS)[number]) => {
+    const fieldId = `cty-fldng-basic-${key}`;
+    const span: 1 | 2 | 3 =
+      key === "excptnMttrCn" ? 3 : key === "bizNm" || key === "pstn" ? 2 : 1;
+    return (
+      <StandardFormField
+        key={key}
+        id={fieldId}
+        label={label}
+        required={key === "bizNm"}
+        span={span}
+      >
+        <Input
+          id={fieldId}
+          className="w-full !text-[1.3rem]"
+          type={type === "date" ? "date" : type}
+          value={String(form[key] ?? "")}
+          onChange={(event) =>
+            setForm((current) => ({
+              ...current,
+              [key]:
+                type === "date"
+                  ? formatDateInput(event.target.value)
+                  : inputValue(event.target.value, type),
+            }))
+          }
+        />
+      </StandardFormField>
+    );
+  };
+
   return (
-    <>
+    <div className="card card-border !mt-6">
       <LoadingOverlay isLoading={loading} />
-      <div className="mx-5 space-y-6">
-        <h2 className="text-2xl font-semibold">
-          도시침수예방사업 {id ? "수정" : "등록"}
-        </h2>
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">
+          도시침수예방사업 {id ? "상세/수정" : "등록"}
+        </h3>
+      </div>
+      <div className="card space-y-4">
         {notice && (
-          <div
+          <p
             role="alert"
-            className="rounded border border-red-200 bg-red-50 p-3 text-red-700"
+            className="rounded-sm border border-red-200 bg-red-50 px-4 py-3 text-[1.3rem] text-red-700"
           >
             {notice}
-          </div>
+          </p>
         )}
-        <section className="rounded border bg-white p-5">
-          <h3 className="mb-4 text-xl font-semibold">기본정보</h3>
-          <div className="mb-4 grid grid-cols-1 gap-3 md:grid-cols-2">
-            <SelectBox
-              className=""
-              label="시도"
-              labelClass="w-24 text-base"
-              selectClass="w-full"
-              selectArray={[{ text: "선택", val: "0" }, ...ctpv]}
+
+        <StandardFormSection title="기본 정보">
+          <StandardFormField id="cty-fldng-ctpv" label="시도">
+            <Select
               value={ctpvCd}
-              onSelectValue={(value) => {
+              onValueChange={(value) => {
                 const code = String(value);
                 setCtpvCd(code);
                 setSggCd("0");
-                setForm((f) => ({
-                  ...f,
+                setForm((current) => ({
+                  ...current,
                   ctpvNm:
-                    ctpv.find((o) => String(o.val) === code)?.text ?? null,
+                    ctpv.find((option) => String(option.val) === code)?.text ??
+                    null,
                   sggNm: null,
                 }));
               }}
-            />
-            <SelectBox
-              className=""
-              label="시군구"
-              labelClass="w-24 text-base"
-              selectClass="w-full"
-              selectArray={[{ text: "선택", val: "0" }, ...availableSgg]}
+            >
+              <SelectTrigger id="cty-fldng-ctpv" className="w-full">
+                <SelectValue placeholder="시도 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="0">선택</SelectItem>
+                {ctpv.map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </StandardFormField>
+          <StandardFormField id="cty-fldng-sgg" label="시군구">
+            <Select
               value={sggCd}
-              onSelectValue={(value) => {
+              onValueChange={(value) => {
                 const code = String(value);
                 setSggCd(code);
-                setForm((f) => ({
-                  ...f,
+                setForm((current) => ({
+                  ...current,
                   sggNm:
-                    availableSgg.find((o) => String(o.val) === code)?.text ??
-                    null,
+                    availableSgg.find((option) => String(option.val) === code)
+                      ?.text ?? null,
                 }));
               }}
-            />
-          </div>
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
-            {BASIC_FIELDS.map(([key, label, type]) => (
-              <label
-                key={key}
-                className="flex flex-col gap-1 text-sm font-medium"
+            >
+              <SelectTrigger id="cty-fldng-sgg" className="w-full">
+                <SelectValue placeholder="시군구 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="0">선택</SelectItem>
+                {availableSgg.map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </StandardFormField>
+          {BASIC_FIELDS.map(renderBasicField)}
+        </StandardFormSection>
+
+        <StandardFormSection title="연도별 결산(백만원)">
+          {Array.from(
+            { length: new Date().getFullYear() - 2013 + 1 },
+            (_, index) => String(2013 + index),
+          ).map((year) => {
+            const item = form.settlements.find(
+              (settlement) => settlement.soaYr === year,
+            );
+            return (
+              <StandardFormField
+                key={year}
+                id={`cty-fldng-settlement-${year}`}
+                label={`${year}년`}
               >
-                {label}
                 <Input
-                  type={type === "date" ? "text" : type}
-                  placeholder={type === "date" ? "YYYY-MM-DD" : undefined}
-                  value={String(form[key] ?? "")}
-                  onChange={(e) =>
-                    setForm((f) => ({
-                      ...f,
-                      [key]:
-                        type === "date"
-                          ? formatDateInput(e.target.value)
-                          : inputValue(e.target.value, type),
+                  id={`cty-fldng-settlement-${year}`}
+                  className="w-full !text-[1.3rem]"
+                  type="number"
+                  value={item?.soaAmt ?? ""}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      settlements: [
+                        ...current.settlements.filter(
+                          (settlement) => settlement.soaYr !== year,
+                        ),
+                        {
+                          soaYr: year,
+                          soaAmt:
+                            event.target.value === ""
+                              ? null
+                              : Number(event.target.value),
+                        },
+                      ],
                     }))
                   }
                 />
-              </label>
-            ))}
-          </div>
-        </section>
-        <section className="rounded border bg-white p-5">
-          <h3 className="mb-4 text-xl font-semibold">연도별 결산(백만원)</h3>
-          <div className="grid grid-cols-2 gap-3 md:grid-cols-7">
-            {Array.from(
-              { length: new Date().getFullYear() - 2013 + 1 },
-              (_, i) => String(2013 + i),
-            ).map((year) => {
-              const item = form.settlements.find((s) => s.soaYr === year);
-              return (
-                <label key={year} className="text-sm font-medium">
-                  {year}
-                  <Input
-                    type="number"
-                    value={item?.soaAmt ?? ""}
-                    onChange={(e) =>
-                      setForm((f) => ({
-                        ...f,
-                        settlements: [
-                          ...f.settlements.filter((s) => s.soaYr !== year),
-                          {
-                            soaYr: year,
-                            soaAmt:
-                              e.target.value === ""
-                                ? null
-                                : Number(e.target.value),
-                          },
-                        ],
-                      }))
-                    }
-                  />
-                </label>
-              );
-            })}
-          </div>
-        </section>
+              </StandardFormField>
+            );
+          })}
+        </StandardFormSection>
+
         {DETAIL_META.map((meta) => {
           const detail = form.details.find(
             (item) => item.bizPrgrsSe === meta.code,
@@ -466,44 +537,55 @@ export function CtyFldngPrvtnBizFormPage({ id }: { id?: string }) {
             impdFclt: [],
           };
           return (
-            <section
+            <StandardFormSection
               key={meta.code}
-              className="overflow-x-auto rounded border bg-white p-5"
+              title={`${meta.code} ${meta.title}`}
             >
-              <h3 className="mb-4 text-xl font-semibold">
-                {meta.code} {meta.title}
-              </h3>
-              <div className="min-w-[1100px]">
-                <DetailEditor
-                  detail={detail}
-                  onChange={(next) =>
-                    setForm((current) => ({
-                      ...current,
-                      details: [
-                        ...current.details.filter(
-                          (item) => item.bizPrgrsSe !== meta.code,
-                        ),
-                        next,
-                      ],
-                    }))
-                  }
-                />
-              </div>
-            </section>
+              <DetailEditor
+                detail={detail}
+                onChange={(next) =>
+                  setForm((current) => ({
+                    ...current,
+                    details: [
+                      ...current.details.filter(
+                        (item) => item.bizPrgrsSe !== meta.code,
+                      ),
+                      next,
+                    ],
+                  }))
+                }
+              />
+            </StandardFormSection>
           );
         })}
-        <div className="flex justify-center gap-3 pb-8">
-          <Button variant="outline" onClick={() => router.push(listHref)}>
-            목록
+        <div className="flex justify-center gap-4 pb-8 pt-6">
+          <Button
+            type="button"
+            size="default"
+            onClick={() => void handleSave()}
+          >
+            저장
+          </Button>
+          <Button
+            type="button"
+            size="default"
+            color="white"
+            onClick={() => router.push(listHref)}
+          >
+            취소
           </Button>
-          <Button onClick={() => void handleSave()}>저장</Button>
           {id && (
-            <Button variant="destructive" onClick={() => void handleDelete()}>
+            <Button
+              type="button"
+              size="default"
+              color="red"
+              onClick={() => void handleDelete()}
+            >
               삭제
             </Button>
           )}
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizListPage.tsx b/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizListPage.tsx
index a91daaa51..c255b0159 100644
--- a/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizListPage.tsx
+++ b/apps/sn/src/features/ctyFldngPrvtnBiz/ui/CtyFldngPrvtnBizListPage.tsx
@@ -4,20 +4,25 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 import {
-  SearchDiv,
-  SearchFormLeft,
-  SearchFormRight,
-  SelectBox,
-  UiTable,
-} from "@common/business_components/ui";
-import ListDiv from "@common/business_components/ui/list_div";
+  StandardDataTable,
+  getStandardRowNumber,
+} from "@common/business_components";
 import {
   Button,
   Input,
   Label,
-  TableHead,
-  TableRow,
-} from "@common/components/ui";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
 
 import { formatDate } from "../../common/util";
 import {
@@ -38,8 +43,6 @@ import LoadingOverlay from "@/components/ui/LoadingBar";
 import useStore from "@/store/useStore";
 
 const PAGE_SIZE = 10;
-const ACTION =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700";
 const ALL = { text: "전체", val: "0" };
 const EMPTY_PAGE: CtyFldngPrvtnBizPage = {
   content: [],
@@ -109,8 +112,8 @@ const DETAIL_LABELS = [
   "비고출처",
 ];
 const BASIC_HEADLIST = [
-  { id: "rowNumber", title: "NO", widthPercent: 4 },
-  { id: "seqNo", title: "순번", widthPercent: 5 },
+  { id: "rowNumber", title: "순번", widthPercent: 4 },
+  { id: "seqNo", title: "사업순번", widthPercent: 5 },
   { id: "stp", title: "단계", widthPercent: 6 },
   { id: "ctpvNm", title: "시도", widthPercent: 7 },
   { id: "sggNm", title: "시군구", widthPercent: 7 },
@@ -149,10 +152,31 @@ type Search = {
   prplPrst: string;
   bizNm: string;
 };
+
+/** 브라우저 로컬 날짜를 검색 input이 사용하는 YYYY-MM-DD 형식으로 변환한다. */
+const formatLocalDateInputValue = (date: Date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+/** 지정일 기본 검색기간을 오늘까지의 최근 1년으로 생성한다. */
+const createDefaultDesignationDateRange = () => {
+  const to = new Date();
+  const from = new Date(to);
+  from.setFullYear(from.getFullYear() - 1);
+  return {
+    dsgnYmdFrom: formatLocalDateInputValue(from),
+    dsgnYmdTo: formatLocalDateInputValue(to),
+  };
+};
+
 type TableRow = Record<string, string | number | null | undefined> & {
   ctyFldngPrvtnBizSn: number;
   rowNumber: number;
 };
+const TABLE_MIN_WIDTH = "960rem";
 
 /** 검색조건과 페이지를 수정화면 왕복용 query로 만든다. */
 const listQuery = (
@@ -177,6 +201,36 @@ const facilities = (value: unknown) =>
     ? value.map((item) => `${item.no}:${item.cpct ?? ""}`).join(", ")
     : "";
 
+/** CS 공통 DataTable의 값 표출과 가운데 정렬 규칙을 넓은 업무 목록에도 동일하게 적용한다. */
+const createTableColumn = (
+  id: string,
+  title: string,
+  widthPercent = 8,
+): ColumnDef<TableRow> => ({
+  id,
+  accessorFn: (row) => row[id],
+  header: () => <span className="whitespace-pre-line">{title}</span>,
+  cell: ({ getValue }) => {
+    const value = getValue();
+    const displayValue =
+      typeof value === "number"
+        ? value.toLocaleString("ko-KR")
+        : String(value ?? "");
+    return (
+      <span
+        className="block whitespace-normal break-words"
+        title={displayValue}
+      >
+        {displayValue}
+      </span>
+    );
+  },
+  meta: {
+    width: Math.max(widthPercent * 12, 72),
+    align: "center",
+  },
+});
+
 /** 중첩 결산·상세를 가로 테이블의 단일 행으로 평탄화한다. */
 const flattenRow = (row: CtyFldngPrvtnBiz, rowNumber: number): TableRow => {
   const { settlements, details, ...basic } = row;
@@ -208,16 +262,22 @@ export function CtyFldngPrvtnBizListPage() {
   const params = useSearchParams();
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   const fileRef = useRef<HTMLInputElement>(null);
+  const defaultDesignationDateRange = useMemo(
+    createDefaultDesignationDateRange,
+    [],
+  );
   const initial = useMemo<Search>(
     () => ({
       ctpvNm: params.get("ctpvNm") ?? "",
       sggNm: params.get("sggNm") ?? "",
-      dsgnYmdFrom: params.get("dsgnYmdFrom") ?? "",
-      dsgnYmdTo: params.get("dsgnYmdTo") ?? "",
+      dsgnYmdFrom:
+        params.get("dsgnYmdFrom") ?? defaultDesignationDateRange.dsgnYmdFrom,
+      dsgnYmdTo:
+        params.get("dsgnYmdTo") ?? defaultDesignationDateRange.dsgnYmdTo,
       prplPrst: params.get("prplPrst") ?? "",
       bizNm: params.get("bizNm") ?? "",
     }),
-    [params],
+    [defaultDesignationDateRange, params],
   );
   const [search, setSearch] = useState(initial);
   const [applied, setApplied] = useState(initial);
@@ -248,25 +308,59 @@ export function CtyFldngPrvtnBizListPage() {
       ),
     [],
   );
-  const headlist = useMemo(
+  const columns = useMemo<ColumnDef<TableRow>[]>(
     () => [
-      ...BASIC_HEADLIST,
-      ...years.map((year) => ({
-        id: `soa_${year}`,
-        title: `${year} 결산`,
-        widthPercent: 7,
-      })),
-      ...DETAIL_GROUPS.flatMap(({ code }) =>
-        DETAIL_FIELDS.map((field, i) => ({
-          id: `${code}_${field}`,
-          title: DETAIL_LABELS[i] ?? field,
-          widthPercent: 8,
-        })),
+      ...BASIC_HEADLIST.map((head) =>
+        createTableColumn(head.id, head.title, head.widthPercent),
+      ),
+      {
+        id: "settlements",
+        header: "결산 현황(백만원)",
+        columns: years.map((year) =>
+          createTableColumn(`soa_${year}`, `${year}년`, 7),
+        ),
+      },
+      ...DETAIL_GROUPS.map((group) => ({
+        id: `detail_${group.code}`,
+        header: group.title,
+        columns: DETAIL_FIELDS.map((field, index) =>
+          createTableColumn(
+            `${group.code}_${field}`,
+            DETAIL_LABELS[index] ?? field,
+            8,
+          ),
+        ),
+      })),
+      ...TAIL_HEADLIST.map((head) =>
+        createTableColumn(head.id, head.title, head.widthPercent),
       ),
-      ...TAIL_HEADLIST,
     ],
     [years],
   );
+  const pagination: PaginationState = {
+    pageIndex: page - 1,
+    pageSize: PAGE_SIZE,
+  };
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { pagination },
+    rowCount: data.totalElements,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => String(row.ctyFldngPrvtnBizSn),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      const nextPage = next.pageIndex + 1;
+      if (nextPage === page) return;
+      setPage(nextPage);
+      const q = listQuery(nextPage, applied, appliedCtpvCd, appliedSggCd);
+      router.replace(`/oper/ctyFldngPrvtnBiz${q ? `?${q}` : ""}`, {
+        scroll: false,
+      });
+    },
+  });
 
   useEffect(() => {
     if (!ctpv.length) void fetchCtpv();
@@ -291,7 +385,12 @@ export function CtyFldngPrvtnBizListPage() {
           result.content.map((row, i) =>
             flattenRow(
               row,
-              result.totalElements - ((target - 1) * PAGE_SIZE + i),
+              getStandardRowNumber({
+                total: result.totalElements,
+                rowIndex: i,
+                pageIndex: target - 1,
+                pageSize: PAGE_SIZE,
+              }),
             ),
           ),
         );
@@ -362,238 +461,231 @@ export function CtyFldngPrvtnBizListPage() {
       setLoading(false);
     }
   };
+
+  /** CS 목록 화면과 같은 초기화 동작으로 입력·적용 조건과 페이지를 함께 되돌린다. */
+  const handleReset = () => {
+    const nextSearch: Search = {
+      ctpvNm: "",
+      sggNm: "",
+      dsgnYmdFrom: defaultDesignationDateRange.dsgnYmdFrom,
+      dsgnYmdTo: defaultDesignationDateRange.dsgnYmdTo,
+      prplPrst: "",
+      bizNm: "",
+    };
+    setSearch(nextSearch);
+    setApplied(nextSearch);
+    setCtpvCd("0");
+    setSggCd("0");
+    setAppliedCtpvCd("0");
+    setAppliedSggCd("0");
+    setNotice("");
+    setPage(1);
+    router.replace("/oper/ctyFldngPrvtnBiz", { scroll: false });
+  };
+
+  /** 현재 목록 조건을 보존한 채 신규 등록 화면으로 이동한다. */
+  const handleRegister = () => {
+    const q = listQuery(page, applied, appliedCtpvCd, appliedSggCd);
+    router.push(`/oper/ctyFldngPrvtnBiz/register${q ? `?${q}` : ""}`);
+  };
+
+  /** 선택한 사업의 상세·수정 화면으로 현재 목록 조건과 함께 이동한다. */
+  const handleOpenDetail = (row: TableRow) => {
+    const q = listQuery(page, applied, appliedCtpvCd, appliedSggCd);
+    router.push(
+      `/oper/ctyFldngPrvtnBiz/register/${row.ctyFldngPrvtnBizSn}${q ? `?${q}` : ""}`,
+    );
+  };
+
   return (
     <>
       <LoadingOverlay isLoading={loading} />
-      <SearchDiv>
-        <div className="flex w-full flex-col gap-4">
-          <SearchFormLeft>
-            <div className="col-span-12 flex flex-wrap items-center gap-3">
-              <SelectBox
-                className=""
-                label="시도"
-                labelClass="w-14 text-xl"
-                selectClass="w-[140px]"
-                selectArray={[ALL, ...ctpv]}
-                value={ctpvCd}
-                onSelectValue={(value) => {
-                  const code = String(value);
-                  setCtpvCd(code);
-                  setSggCd("0");
-                  setSearch((s) => ({
-                    ...s,
-                    ctpvNm:
-                      ctpv.find((o) => String(o.val) === code)?.text ?? "",
-                    sggNm: "",
-                  }));
-                }}
-              />
-              <SelectBox
-                className=""
-                label="시군구"
-                labelClass="w-20 text-xl"
-                selectClass="w-[150px]"
-                selectArray={[ALL, ...availableSgg]}
-                value={sggCd}
-                onSelectValue={(value) => {
-                  const code = String(value);
-                  setSggCd(code);
-                  setSearch((s) => ({
-                    ...s,
-                    sggNm:
-                      availableSgg.find((o) => String(o.val) === code)?.text ??
-                      "",
-                  }));
-                }}
-              />
-              <Label>지정일</Label>
-              <Input
-                type="date"
-                className="w-[150px]"
-                value={search.dsgnYmdFrom}
-                onChange={(e) =>
-                  setSearch((s) => ({ ...s, dsgnYmdFrom: e.target.value }))
-                }
-              />
-              <span>~</span>
-              <Input
-                type="date"
-                className="w-[150px]"
-                value={search.dsgnYmdTo}
-                onChange={(e) =>
-                  setSearch((s) => ({ ...s, dsgnYmdTo: e.target.value }))
-                }
-              />
-              <Label>추진현황</Label>
-              <Input
-                className="w-[150px]"
-                value={search.prplPrst}
-                onChange={(e) =>
-                  setSearch((s) => ({ ...s, prplPrst: e.target.value }))
-                }
-              />
-              <Label>사업명</Label>
-              <Input
-                className="w-[180px]"
-                value={search.bizNm}
-                onChange={(e) =>
-                  setSearch((s) => ({ ...s, bizNm: e.target.value }))
-                }
-              />
-            </div>
-          </SearchFormLeft>
-          <SearchFormRight className="flex justify-end px-4 pb-4">
-            <div className="flex flex-wrap justify-end gap-2">
-              <Button className={ACTION} size="sm" onClick={handleSearch}>
-                조회
-              </Button>
-              <Button
-                className={ACTION}
-                size="sm"
-                onClick={() => {
-                  const q = listQuery(
-                    page,
-                    applied,
-                    appliedCtpvCd,
-                    appliedSggCd,
-                  );
-                  router.push(
-                    `/oper/ctyFldngPrvtnBiz/register${q ? `?${q}` : ""}`,
-                  );
-                }}
-              >
-                등록
-              </Button>
-              <input
-                ref={fileRef}
-                type="file"
-                accept=".xlsx"
-                className="hidden"
-                onChange={(e) => void handleUpload(e.target.files?.[0])}
-              />
-              <Button
-                className={ACTION}
-                size="sm"
-                onClick={() => fileRef.current?.click()}
-              >
-                업로드
-              </Button>
-              <Button
-                className="rounded-sm bg-green-600 px-4 py-2 text-sm !text-white"
-                size="sm"
-                onClick={() => void handleDownload()}
-              >
-                엑셀다운로드
-              </Button>
-              <Button
-                className={ACTION}
-                size="sm"
-                onClick={() => void downloadCtyFldngPrvtnExcel([], true)}
-              >
-                양식받기
-              </Button>
-            </div>
-          </SearchFormRight>
-        </div>
-      </SearchDiv>
+      <div className="card card-border !mt-6">
+        <form
+          className="flex flex-wrap items-center gap-2 p-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSearch();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시도</Label>
+            <Select
+              value={ctpvCd}
+              onValueChange={(value) => {
+                const code = String(value);
+                setCtpvCd(code);
+                setSggCd("0");
+                setSearch((current) => ({
+                  ...current,
+                  ctpvNm:
+                    ctpv.find((option) => String(option.val) === code)?.text ??
+                    "",
+                  sggNm: "",
+                }));
+              }}
+            >
+              <SelectTrigger className="w-[14rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[ALL, ...ctpv].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시군구</Label>
+            <Select
+              value={sggCd}
+              onValueChange={(value) => {
+                const code = String(value);
+                setSggCd(code);
+                setSearch((current) => ({
+                  ...current,
+                  sggNm:
+                    availableSgg.find((option) => String(option.val) === code)
+                      ?.text ?? "",
+                }));
+              }}
+            >
+              <SelectTrigger className="w-[15rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[ALL, ...availableSgg].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">지정일</Label>
+            <Input
+              type="date"
+              className="w-[15rem]"
+              value={search.dsgnYmdFrom}
+              onChange={(event) =>
+                setSearch((current) => ({
+                  ...current,
+                  dsgnYmdFrom: event.target.value,
+                }))
+              }
+            />
+            <span>~</span>
+            <Input
+              type="date"
+              className="w-[15rem]"
+              value={search.dsgnYmdTo}
+              onChange={(event) =>
+                setSearch((current) => ({
+                  ...current,
+                  dsgnYmdTo: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">
+              추진현황
+            </Label>
+            <Input
+              className="w-[15rem] !text-[1.3rem]"
+              value={search.prplPrst}
+              onChange={(event) =>
+                setSearch((current) => ({
+                  ...current,
+                  prplPrst: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">사업명</Label>
+            <Input
+              className="w-[18rem] !text-[1.3rem]"
+              value={search.bizNm}
+              onChange={(event) =>
+                setSearch((current) => ({
+                  ...current,
+                  bizNm: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <Button type="submit" className="w-[7.4rem]">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="w-[8.8rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
+        </form>
+      </div>
       {notice && (
         <div
           role="status"
-          className="mx-5 mt-4 rounded border border-blue-200 bg-blue-50 p-3 text-sm text-blue-700"
+          className="mx-[1.2rem] mt-4 rounded-sm border border-primary bg-primary-transparent px-4 py-3 text-[1.3rem] text-primary"
         >
           {notice}
         </div>
       )}
-      <ListDiv className="overflow-x-auto">
-        <div className="w-[560%]">
-          <div className="card-header">
-            <h3 className="text-2xl font-medium">
-              도시침수예방사업{" "}
-              <span className="text-base text-gray-500">
-                ({data.totalElements.toLocaleString()}건)
-              </span>
-            </h3>
-          </div>
-          <UiTable<TableRow>
-            headName=""
-            headlist={headlist}
-            tableData={rows}
-            pageSize={PAGE_SIZE}
-            total={data.totalElements}
-            curPage={page}
-            widthFixed
-            onPageChange={(next) => {
-              setPage(next);
-              const q = listQuery(next, applied, appliedCtpvCd, appliedSggCd);
-              router.replace(`/oper/ctyFldngPrvtnBiz${q ? `?${q}` : ""}`, {
-                scroll: false,
-              });
-            }}
-            cellClick={(index) => {
-              if (typeof index !== "number" || !rows[index]) return;
-              const q = listQuery(page, applied, appliedCtpvCd, appliedSggCd);
-              router.push(
-                `/oper/ctyFldngPrvtnBiz/register/${rows[index].ctyFldngPrvtnBizSn}${q ? `?${q}` : ""}`,
-              );
-            }}
-          >
-            <TableRow>
-              {BASIC_HEADLIST.map((head) => (
-                <TableHead
-                  key={head.id}
-                  rowSpan={2}
-                  className="whitespace-pre-line bg-gray-50"
-                >
-                  {head.title}
-                </TableHead>
-              ))}
-              <TableHead
-                colSpan={years.length}
-                className="whitespace-nowrap bg-gray-50"
+      <div className="mt-4 w-full min-w-0 max-w-full overflow-hidden">
+        <input
+          ref={fileRef}
+          type="file"
+          accept=".xlsx"
+          className="hidden"
+          onChange={(event) => void handleUpload(event.target.files?.[0])}
+        />
+        <StandardDataTable
+          table={table}
+          title="도시침수예방사업 목록"
+          scrollMode="horizontal"
+          minTableWidth={TABLE_MIN_WIDTH}
+          className="table-fixed"
+          onRowClick={handleOpenDetail}
+          actions={
+            <>
+              <Button type="button" onClick={() => void handleDownload()}>
+                엑셀다운로드
+              </Button>
+              <Button
+                type="button"
+                onClick={() => void downloadCtyFldngPrvtnExcel([], true)}
               >
-                결산 현황(백만원)
-              </TableHead>
-              {DETAIL_GROUPS.map((group) => (
-                <TableHead
-                  key={group.code}
-                  colSpan={DETAIL_FIELDS.length}
-                  className="whitespace-nowrap"
-                  style={{ backgroundColor: group.color }}
-                >
-                  {group.title}
-                </TableHead>
-              ))}
-              {TAIL_HEADLIST.map((head) => (
-                <TableHead
-                  key={head.id}
-                  rowSpan={2}
-                  className="whitespace-pre-line bg-gray-50"
-                >
-                  {head.title}
-                </TableHead>
-              ))}
-            </TableRow>
-            <TableRow>
-              {years.map((year) => (
-                <TableHead key={year} className="whitespace-nowrap bg-gray-50">
-                  {year}년
-                </TableHead>
-              ))}
-              {DETAIL_GROUPS.flatMap((group) =>
-                DETAIL_FIELDS.map((field, index) => (
-                  <TableHead
-                    key={`${group.code}_${field}`}
-                    className="whitespace-pre-line"
-                    style={{ backgroundColor: group.color }}
-                  >
-                    {DETAIL_LABELS[index] ?? field}
-                  </TableHead>
-                )),
-              )}
-            </TableRow>
-          </UiTable>
-        </div>
-      </ListDiv>
+                양식다운로드
+              </Button>
+              <Button type="button" onClick={handleRegister}>
+                등록
+              </Button>
+              <Button type="button" onClick={() => fileRef.current?.click()}>
+                업로드
+              </Button>
+            </>
+          }
+        />
+      </div>
     </>
   );
 }
diff --git a/apps/sn/src/features/exmn/api/exmn-business-api.ts b/apps/sn/src/features/exmn/api/exmn-business-api.ts
index e1b3827d8..9fa4deb9f 100644
--- a/apps/sn/src/features/exmn/api/exmn-business-api.ts
+++ b/apps/sn/src/features/exmn/api/exmn-business-api.ts
@@ -49,7 +49,9 @@ const unwrapData = <T>(response: T | { data?: T }): T =>
     : (response as T);
 
 /** Spring Page 응답이 비어 있거나 아직 미구현이어도 안전한 빈 Page로 정규화한다. */
-const toPage = <T>(value: Partial<ExmnPage<T>> | null | undefined): ExmnPage<T> => ({
+const toPage = <T>(
+  value: Partial<ExmnPage<T>> | null | undefined,
+): ExmnPage<T> => ({
   content: Array.isArray(value?.content) ? value.content : [],
   totalElements: Number(value?.totalElements ?? 0),
   number: Number(value?.number ?? 0),
@@ -66,25 +68,33 @@ const getBusinessReportFileName = async (
   attachmentId: string,
 ): Promise<string | null> => {
   try {
-    const response = await getRawJson(
+    const response = (await getRawJson(
       `/attach-service/api/v1/atfl/attachments/${encodeURIComponent(attachmentCode)}`,
-    ) as AttachmentMetadata[]
+    )) as
+      | AttachmentMetadata[]
       | { data?: AttachmentMetadata[] | { content?: AttachmentMetadata[] } }
       | { content?: AttachmentMetadata[] }
       | null;
-    const payload = (
-      typeof response === "object"
-      && response !== null
-      && !Array.isArray(response)
-      && "data" in response
-    ) ? response.data : response;
+    let payload:
+      | AttachmentMetadata[]
+      | { content?: AttachmentMetadata[] }
+      | null
+      | undefined;
+    if (Array.isArray(response)) {
+      payload = response;
+    } else if (response && "data" in response) {
+      payload = response.data;
+    } else {
+      payload = response as { content?: AttachmentMetadata[] } | null;
+    }
     const attachments = Array.isArray(payload)
       ? payload
       : Array.isArray(payload?.content)
         ? payload.content
         : [];
-    const attachment = attachments.find((item) => item.atflId === attachmentId)
-      ?? attachments[0];
+    const attachment =
+      attachments.find((item) => item.atflId === attachmentId) ??
+      attachments[0];
     return attachment?.orgnlFileNm?.trim() || null;
   } catch {
     return null;
@@ -109,15 +119,20 @@ export const getExmnBusinesses = async (
   const page = toPage<ExmnBusiness>(
     await getData(`${EXMN_BUSINESS_API_PATH}?${query}`),
   );
-  const content = await Promise.all(page.content.map(async (business) => {
-    const attachmentCode = business.bizRptpAtchFileCd?.trim();
-    const attachmentId = business.bizRptpAtchFileId?.trim();
-    if (!attachmentCode || !attachmentId) return business;
-    return {
-      ...business,
-      bizRptpFileName: await getBusinessReportFileName(attachmentCode, attachmentId),
-    };
-  }));
+  const content = await Promise.all(
+    page.content.map(async (business) => {
+      const attachmentCode = business.bizRptpAtchFileCd?.trim();
+      const attachmentId = business.bizRptpAtchFileId?.trim();
+      if (!attachmentCode || !attachmentId) return business;
+      return {
+        ...business,
+        bizRptpFileName: await getBusinessReportFileName(
+          attachmentCode,
+          attachmentId,
+        ),
+      };
+    }),
+  );
   return { ...page, content };
 };
 
@@ -126,11 +141,13 @@ export const getExmnSectionSummaries = async (
   exmnBizId: string,
   jobType: ExmnJobType,
 ): Promise<ExmnSectionSummaryRow[]> => {
-  type SectionSummaryPayload = ExmnSectionSummaryRow[] | Partial<ExmnPage<ExmnSectionSummaryRow>>;
+  type SectionSummaryPayload =
+    | ExmnSectionSummaryRow[]
+    | Partial<ExmnPage<ExmnSectionSummaryRow>>;
   try {
-    const response = await getData(
+    const response = (await getData(
       `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/sections?jobType=${jobType}`,
-    ) as SectionSummaryPayload | { data?: SectionSummaryPayload };
+    )) as SectionSummaryPayload | { data?: SectionSummaryPayload };
     const payload = unwrapData<SectionSummaryPayload>(response);
     if (Array.isArray(payload)) return payload;
     return Array.isArray(payload?.content) ? payload.content : [];
@@ -174,8 +191,9 @@ export const getExmnFacilityDetails = async (params: {
   if (params.defectType && params.defectType !== "ALL") {
     query.set("defectType", params.defectType);
   }
-  const response = await getData(`v1/exmnFacilities?${query}`) as
-    ExmnSurveyDetailRow[] | { data?: ExmnSurveyDetailRow[] };
+  const response = (await getData(`v1/exmnFacilities?${query}`)) as
+    | ExmnSurveyDetailRow[]
+    | { data?: ExmnSurveyDetailRow[] };
   const payload = unwrapData<ExmnSurveyDetailRow[]>(response);
   return Array.isArray(payload) ? payload : [];
 };
@@ -234,8 +252,9 @@ export const getExmnPplUnitDetails = async (params: {
   if (params.gisManagementNo?.trim()) {
     query.set("gisManagementNo", params.gisManagementNo.trim());
   }
-  const response = await getData(`v1/exmnFacilities/pplUnitSections?${query}`) as
-    ExmnPplUnitDetailPayload[] | { data?: ExmnPplUnitDetailPayload[] };
+  const response = (await getData(
+    `v1/exmnFacilities/pplUnitSections?${query}`,
+  )) as ExmnPplUnitDetailPayload[] | { data?: ExmnPplUnitDetailPayload[] };
   const payload = unwrapData<ExmnPplUnitDetailPayload[]>(response);
   if (!Array.isArray(payload)) return [];
   return payload.map((row) => ({
@@ -245,14 +264,20 @@ export const getExmnPplUnitDetails = async (params: {
 };
 
 /** 선택한 조사사업의 처리분구·첨부를 포함한 상세정보를 조회한다. */
-export const getExmnBusiness = async (exmnBizId: string): Promise<ExmnBusinessDetail> =>
-  getData(`${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}`) as Promise<ExmnBusinessDetail>;
+export const getExmnBusiness = async (
+  exmnBizId: string,
+): Promise<ExmnBusinessDetail> =>
+  getData(
+    `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}`,
+  ) as Promise<ExmnBusinessDetail>;
 
 /** 조사사업과 선택 처리분구별 기본 요약행을 신규 저장한다. */
 export const createExmnBusiness = async (
   request: ExmnBusinessSaveRequest,
 ): Promise<ExmnBusinessDetail> =>
-  unwrapData<ExmnBusinessDetail>(await postRawJson(EXMN_BUSINESS_API_PATH, request));
+  unwrapData<ExmnBusinessDetail>(
+    await postRawJson(EXMN_BUSINESS_API_PATH, request),
+  );
 
 /** 기존 조사사업 기본정보와 연결 처리분구를 같은 저장 계약으로 갱신한다. */
 export const updateExmnBusiness = async (
@@ -269,22 +294,30 @@ export const createExmnTemplates = async (
   exmnBizId: string,
   trtdstIds: string[],
 ): Promise<ExmnTemplateResult> =>
-  unwrapData<ExmnTemplateResult>(await postRawJson(
-    `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/templates`,
-    { trtdstIds },
-  ));
+  unwrapData<ExmnTemplateResult>(
+    await postRawJson(
+      `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/templates`,
+      { trtdstIds },
+    ),
+  );
 
 /** 생성된 조사사업 입력 양식 파일을 내려받는다. */
 export const downloadExmnTemplates = async (exmnBizId: string): Promise<Blob> =>
-  getBlobData(`${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/templates/download`);
+  getBlobData(
+    `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/templates/download`,
+  );
 
 /** 하수관로·맨홀 현황조사 보고서 기준 XLSX를 내려받는다. */
 export const downloadExmnReportTemplate = async (): Promise<Blob> =>
   getBlobData(`${EXMN_BUSINESS_API_PATH}/templates/report/download`);
 
 /** 사업보고서 첨부파일 ID로 기존 첨부서비스의 원본 파일을 내려받는다. */
-export const downloadExmnBusinessReport = async (attachmentId: string): Promise<Blob> =>
-  getBlobData(`/attach-service/api/v1/download/${encodeURIComponent(attachmentId)}`);
+export const downloadExmnBusinessReport = async (
+  attachmentId: string,
+): Promise<Blob> =>
+  getBlobData(
+    `/attach-service/api/v1/download/${encodeURIComponent(attachmentId)}`,
+  );
 
 /** 저장된 페이지 범위를 이용해 선택 관로의 조사보고서 구간만 PDF로 조회한다. */
 export const downloadExmnPipeReport = async (
@@ -339,12 +372,17 @@ export const getPplSummaries = async (
   exmnBizId: string,
   params: { trtdstId?: string; page: number; size: number; sort?: string },
 ): Promise<ExmnPage<PplSummaryRow>> => {
-  const query = new URLSearchParams({ page: String(params.page), size: String(params.size) });
+  const query = new URLSearchParams({
+    page: String(params.page),
+    size: String(params.size),
+  });
   if (params.trtdstId) query.set("trtdstId", params.trtdstId);
   if (params.sort) query.set("sort", params.sort);
-  return toPage<PplSummaryRow>(await getData(
-    `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/summaries/ppl?${query}`,
-  ));
+  return toPage<PplSummaryRow>(
+    await getData(
+      `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/summaries/ppl?${query}`,
+    ),
+  );
 };
 
 /** 선택 사업의 PPL 시설을 처리분구·구간·GIS번호·등급으로 조회한다. */
@@ -359,10 +397,14 @@ export const getPplFacilities = async (
   });
   if (params.trtdstId) query.set("trtdstId", params.trtdstId);
   if (params.sectionType) query.set("sectionType", params.sectionType);
-  if (params.gisManagementNo?.trim()) query.set("gisManagementNo", params.gisManagementNo.trim());
-  if (params.structuralGrade) query.set("structuralGrade", params.structuralGrade);
-  if (params.operationalGrade) query.set("operationalGrade", params.operationalGrade);
-  if (params.defectType && params.defectType !== "ALL") query.set("defectType", params.defectType);
+  if (params.gisManagementNo?.trim())
+    query.set("gisManagementNo", params.gisManagementNo.trim());
+  if (params.structuralGrade)
+    query.set("structuralGrade", params.structuralGrade);
+  if (params.operationalGrade)
+    query.set("operationalGrade", params.operationalGrade);
+  if (params.defectType && params.defectType !== "ALL")
+    query.set("defectType", params.defectType);
   if (params.sort) query.set("sort", params.sort);
   return toPage<PplFacility>(await getData(`v1/exmnFacilities?${query}`));
 };
@@ -376,5 +418,7 @@ export const downloadPplExport = async (
   if (trtdstId) query.set("trtdstId", trtdstId);
   const queryString = query.toString();
   const suffix = queryString ? `?${queryString}` : "";
-  return getBlobData(`${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/exports/ppl${suffix}`);
+  return getBlobData(
+    `${EXMN_BUSINESS_API_PATH}/${encodeURIComponent(exmnBizId)}/exports/ppl${suffix}`,
+  );
 };
diff --git a/apps/sn/src/features/exmn/model/trtdst-types.ts b/apps/sn/src/features/exmn/model/trtdst-types.ts
index 434adfdd2..47df97c3a 100644
--- a/apps/sn/src/features/exmn/model/trtdst-types.ts
+++ b/apps/sn/src/features/exmn/model/trtdst-types.ts
@@ -10,7 +10,7 @@ export interface TrtdstSettingDto {
   useYn?: "Y" | "N";
 }
 
-/** UiTable 선택과 변경 추적에 필요한 화면 전용 처리분구 행이다. */
+/** 공통 표 선택과 변경 추적에 필요한 화면 전용 처리분구 행이다. */
 export interface TrtdstTableRow extends TrtdstSettingDto {
   localKey: string;
   rowNumber: number;
diff --git a/apps/sn/src/features/exmn/ui/ExmnBusinessRegisterPopupPage.tsx b/apps/sn/src/features/exmn/ui/ExmnBusinessRegisterPopupPage.tsx
index b722efb90..1bd99d0be 100644
--- a/apps/sn/src/features/exmn/ui/ExmnBusinessRegisterPopupPage.tsx
+++ b/apps/sn/src/features/exmn/ui/ExmnBusinessRegisterPopupPage.tsx
@@ -1,13 +1,25 @@
 "use client";
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
-import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
 import { getStartYearArray } from "@/components/ui/YearRangeSelectBox";
 import useStore from "@/store/useStore";
 import { postPopupMessage } from "@/features/windowPopup/lib/popupMessage";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
-import { Button, Input, Label } from "@common/components/ui";
-import { SelectBox } from "@common/business_components/ui";
+import {
+  StandardFormField,
+  StandardFormSection,
+  StandardPopupLayout,
+} from "@common/business_components";
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
   createExmnBusiness,
@@ -25,13 +37,6 @@ import type {
 } from "../model/exmn-business-types";
 import type { TrtdstSettingDto } from "../model/trtdst-types";
 
-const DOWNLOAD_BUTTON_CLASS =
-  "rounded-sm px-4 py-2 text-sm font-medium !text-white disabled:!text-white";
-const FORM_LABEL_CLASS =
-  "shrink-0 whitespace-nowrap text-xl font-medium text-gray-600";
-const FORM_INPUT_CLASS =
-  "h-[3.2rem] text-base text-label";
-
 type Notice = { type: "success" | "error" | "info"; text: string } | null;
 
 interface ExmnBusinessRegisterPopupPageProps {
@@ -39,8 +44,10 @@ interface ExmnBusinessRegisterPopupPageProps {
 }
 
 /** 처리분구 이름을 공백 제거 후 한글 가나다순으로 정렬한다. */
-const sortDistricts = (items: TrtdstSettingDto[]) => [...items].sort((left, right) =>
-  left.trtdstNm.trim().localeCompare(right.trtdstNm.trim(), "ko"));
+const sortDistricts = (items: TrtdstSettingDto[]) =>
+  [...items].sort((left, right) =>
+    left.trtdstNm.trim().localeCompare(right.trtdstNm.trim(), "ko"),
+  );
 
 /** Blob을 브라우저 다운로드로 전달하고 임시 URL을 즉시 정리한다. */
 const saveBlob = (blob: Blob, fileName: string) => {
@@ -57,6 +64,7 @@ export function ExmnBusinessRegisterPopupPage({
   exmnBizId,
 }: ExmnBusinessRegisterPopupPageProps) {
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  const { confirm } = useConfirm();
   const isEditMode = Boolean(exmnBizId);
   /** 상세정보보다 처리분구 후보 조회가 늦게 끝나도 기존 선택을 복원하기 위한 대기 ID다. */
   const pendingSelectedDistrictIdsRef = useRef<string[] | null>(null);
@@ -75,7 +83,9 @@ export function ExmnBusinessRegisterPopupPage({
   /** 등록 후보가 많을 때 처리분구명으로 화면 목록을 좁히는 검색어다. */
   const [districtKeyword, setDistrictKeyword] = useState("");
   const [selectedDistrictIds, setSelectedDistrictIds] = useState<string[]>([]);
-  const [savedBusiness, setSavedBusiness] = useState<ExmnBusinessDetail | null>(null);
+  const [savedBusiness, setSavedBusiness] = useState<ExmnBusinessDetail | null>(
+    null,
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [notice, setNotice] = useState<Notice>(null);
   const formLocked = Boolean(savedBusiness) && !isEditMode;
@@ -89,11 +99,27 @@ export function ExmnBusinessRegisterPopupPage({
   /** 공통코드가 로드되면 서버 상세의 행정구역 이름을 실제 선택 코드로 맞춘다. */
   useEffect(() => {
     const selectedCtpv = ctpv.find((option) => option.text === ctpvNm);
-    const selectedSgg = sgg.find((option) => option.text === sggNm);
+    const selectedCtpvPrefix = selectedCtpv
+      ? String(selectedCtpv.val).slice(0, 2)
+      : "";
+    const selectedSgg = sgg.find(
+      (option) =>
+        option.text === sggNm &&
+        (!selectedCtpvPrefix ||
+          String(option.val).startsWith(selectedCtpvPrefix)),
+    );
     if (selectedCtpv) setCtpvCd(String(selectedCtpv.val));
     if (selectedSgg) setSggCd(String(selectedSgg.val));
   }, [ctpv, ctpvNm, sgg, sggNm]);
 
+  /** 선택 시도에 속한 시군구만 공통 Select 후보로 제공한다. */
+  const availableSgg = useMemo(() => {
+    if (ctpvCd === "0") return sgg;
+    return sgg.filter((option) =>
+      String(option.val).startsWith(ctpvCd.slice(0, 2)),
+    );
+  }, [ctpvCd, sgg]);
+
   /** 수정 모드에서는 선택 사업의 상세정보와 기존 처리분구 선택을 팝업 입력값으로 복원한다. */
   useEffect(() => {
     if (!exmnBizId) return;
@@ -106,7 +132,10 @@ export function ExmnBusinessRegisterPopupPage({
       .then((business) => {
         if (businessRequestIdRef.current !== requestId) return;
         if (!business) {
-          setNotice({ type: "error", text: "수정할 사업정보를 찾지 못했습니다." });
+          setNotice({
+            type: "error",
+            text: "수정할 사업정보를 찾지 못했습니다.",
+          });
           return;
         }
         pendingSelectedDistrictIdsRef.current = [...business.trtdstIds];
@@ -123,7 +152,10 @@ export function ExmnBusinessRegisterPopupPage({
         if (businessRequestIdRef.current !== requestId) return;
         setNotice({
           type: "error",
-          text: error instanceof Error ? error.message : "사업정보 조회 중 오류가 발생했습니다.",
+          text:
+            error instanceof Error
+              ? error.message
+              : "사업정보 조회 중 오류가 발생했습니다.",
         });
       })
       .finally(() => {
@@ -154,9 +186,13 @@ export function ExmnBusinessRegisterPopupPage({
         const sortedItems = sortDistricts(items);
         setDistricts(sortedItems);
         const pendingIds = pendingSelectedDistrictIdsRef.current;
-        setSelectedDistrictIds(pendingIds
-          ? pendingIds.filter((id) => sortedItems.some((item) => item.trtdstId === id))
-          : []);
+        setSelectedDistrictIds(
+          pendingIds
+            ? pendingIds.filter((id) =>
+                sortedItems.some((item) => item.trtdstId === id),
+              )
+            : [],
+        );
         pendingSelectedDistrictIdsRef.current = null;
       })
       .catch((error: unknown) => {
@@ -164,7 +200,10 @@ export function ExmnBusinessRegisterPopupPage({
         setDistricts([]);
         setNotice({
           type: "error",
-          text: error instanceof Error ? error.message : "처리분구 조회 중 오류가 발생했습니다.",
+          text:
+            error instanceof Error
+              ? error.message
+              : "처리분구 조회 중 오류가 발생했습니다.",
         });
       })
       .finally(() => {
@@ -181,13 +220,15 @@ export function ExmnBusinessRegisterPopupPage({
     if (!isEditMode || !savedBusiness) return false;
     const currentDistrictIds = [...selectedDistrictIds].sort();
     const savedDistrictIds = [...savedBusiness.trtdstIds].sort();
-    return String(savedBusiness.bizCycl ?? "") !== bizCycl.trim()
-      || savedBusiness.bizYr !== bizYr.trim()
-      || savedBusiness.bizNm !== bizNm.trim()
-      || savedBusiness.ctpvNm !== ctpvNm
-      || savedBusiness.sggNm !== sggNm
-      || Number(savedBusiness.prcisExmnPrlg) !== Number(prcisExmnPrlg)
-      || currentDistrictIds.join("|") !== savedDistrictIds.join("|");
+    return (
+      String(savedBusiness.bizCycl ?? "") !== bizCycl.trim() ||
+      savedBusiness.bizYr !== bizYr.trim() ||
+      savedBusiness.bizNm !== bizNm.trim() ||
+      savedBusiness.ctpvNm !== ctpvNm ||
+      savedBusiness.sggNm !== sggNm ||
+      Number(savedBusiness.prcisExmnPrlg) !== Number(prcisExmnPrlg) ||
+      currentDistrictIds.join("|") !== savedDistrictIds.join("|")
+    );
   }, [
     bizCycl,
     bizNm,
@@ -202,19 +243,30 @@ export function ExmnBusinessRegisterPopupPage({
 
   /** 공백 차이를 무시한 처리분구명 부분일치 검색 결과다. */
   const filteredDistricts = useMemo(() => {
-    const keyword = districtKeyword.replace(/\s+/g, "").toLocaleLowerCase("ko-KR");
+    const keyword = districtKeyword
+      .replace(/\s+/g, "")
+      .toLocaleLowerCase("ko-KR");
     if (!keyword) return districts;
     return districts.filter((district) =>
-      district.trtdstNm.replace(/\s+/g, "").toLocaleLowerCase("ko-KR").includes(keyword));
+      district.trtdstNm
+        .replace(/\s+/g, "")
+        .toLocaleLowerCase("ko-KR")
+        .includes(keyword),
+    );
   }, [districtKeyword, districts]);
 
   /** 현재 검색 결과가 모두 선택된 상태인지 일괄선택 버튼 문구와 동작에 사용한다. */
-  const allFilteredDistrictsSelected = filteredDistricts.length > 0
-    && filteredDistricts.every((district) => selectedDistrictIds.includes(district.trtdstId));
+  const allFilteredDistrictsSelected =
+    filteredDistricts.length > 0 &&
+    filteredDistricts.every((district) =>
+      selectedDistrictIds.includes(district.trtdstId),
+    );
 
   /** 검색된 처리분구만 한 번에 선택하거나 해제하며 다른 검색에서 고른 값은 유지한다. */
   const handleToggleFilteredDistricts = () => {
-    const filteredIds = new Set(filteredDistricts.map((district) => district.trtdstId));
+    const filteredIds = new Set(
+      filteredDistricts.map((district) => district.trtdstId),
+    );
     setSelectedDistrictIds((current) => {
       const nextIds = new Set(current);
       filteredIds.forEach((id) => {
@@ -252,13 +304,19 @@ export function ExmnBusinessRegisterPopupPage({
       setNotice({ type: "error", text: validationMessage });
       return;
     }
+    if (
+      !(await confirm(isEditMode ? "수정하시겠습니까?" : "저장하시겠습니까?"))
+    ) {
+      return;
+    }
 
     setIsLoading(true);
     setNotice(null);
     try {
-      const persisted: ExmnBusinessDetail = isEditMode && exmnBizId
-        ? await updateExmnBusiness(exmnBizId, request)
-        : await createExmnBusiness(request);
+      const persisted: ExmnBusinessDetail =
+        isEditMode && exmnBizId
+          ? await updateExmnBusiness(exmnBizId, request)
+          : await createExmnBusiness(request);
 
       setSavedBusiness(persisted);
       postPopupMessage(
@@ -278,7 +336,10 @@ export function ExmnBusinessRegisterPopupPage({
     } catch (error) {
       setNotice({
         type: "error",
-        text: error instanceof Error ? error.message : "사업정보 저장 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "사업정보 저장 중 오류가 발생했습니다.",
       });
     } finally {
       setIsLoading(false);
@@ -292,18 +353,27 @@ export function ExmnBusinessRegisterPopupPage({
       return;
     }
     if (hasUnsavedChanges) {
-      setNotice({ type: "info", text: "수정한 사업정보를 먼저 저장한 뒤 양식을 받아주세요." });
+      setNotice({
+        type: "info",
+        text: "수정한 사업정보를 먼저 저장한 뒤 양식을 받아주세요.",
+      });
       return;
     }
     setIsLoading(true);
     setNotice(null);
     try {
       await createExmnTemplates(savedBusiness.exmnBizId, selectedDistrictIds);
-      saveBlob(await downloadExmnTemplates(savedBusiness.exmnBizId), `${savedBusiness.bizNm}_조사입력양식.xlsx`);
+      saveBlob(
+        await downloadExmnTemplates(savedBusiness.exmnBizId),
+        `${savedBusiness.bizNm}_조사입력양식.xlsx`,
+      );
     } catch (error) {
       setNotice({
         type: "error",
-        text: error instanceof Error ? error.message : "조사 입력양식 다운로드 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "조사 입력양식 다운로드 중 오류가 발생했습니다.",
       });
     } finally {
       setIsLoading(false);
@@ -322,7 +392,10 @@ export function ExmnBusinessRegisterPopupPage({
     } catch (error) {
       setNotice({
         type: "error",
-        text: error instanceof Error ? error.message : "조사보고서 양식 다운로드 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "조사보고서 양식 다운로드 중 오류가 발생했습니다.",
       });
     } finally {
       setIsLoading(false);
@@ -330,172 +403,257 @@ export function ExmnBusinessRegisterPopupPage({
   };
 
   return (
-    <main className="sn-popup-page">
-      <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">{isEditMode ? "사업정보 수정" : "사업정보 등록"}</h1>
-        <div className="flex items-center gap-2">
+    <StandardPopupLayout
+      title={isEditMode ? "조사사업 상세/수정" : "조사사업 등록"}
+      showDefaultCancelAction={false}
+      actions={
+        <>
           <Button
             type="button"
-            color="white"
-            size="sm"
-            className="sn-popup-header-button"
+            color="primary"
+            disabled={isLoading}
+            onClick={() => void handleDownloadTemplates()}
+          >
+            양식다운로드
+          </Button>
+          <Button
+            type="button"
+            color="primary"
+            disabled={isLoading}
+            onClick={() => void handleReportTemplate()}
+          >
+            조사보고서 양식다운로드
+          </Button>
+          <Button
+            type="button"
+            color="primary"
             disabled={isLoading || formLocked}
             onClick={() => void handleSave()}
           >
             {isEditMode ? "수정" : "저장"}
           </Button>
-          <Button color="green" className={DOWNLOAD_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={() => void handleDownloadTemplates()}>양식 받기</Button>
-          <Button color="green" className={DOWNLOAD_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={() => void handleReportTemplate()}>조사보고서 양식</Button>
-        </div>
-      </header>
-
-      <section className="sn-popup-section space-y-3 overflow-y-auto">
-        {notice && (
-          <div role="alert" className={`rounded border px-4 py-3 text-sm ${
+          <Button
+            type="button"
+            color="white"
+            disabled={isLoading}
+            onClick={() => window.close()}
+          >
+            취소
+          </Button>
+        </>
+      }
+    >
+      <LoadingOverlay isLoading={isLoading} />
+      {notice && (
+        <div
+          role="alert"
+          className={`rounded-sm border px-4 py-3 text-[1.3rem] ${
             notice.type === "error"
               ? "border-red-200 bg-red-50 text-red-700"
               : notice.type === "success"
                 ? "border-emerald-200 bg-emerald-50 text-emerald-700"
-                : "border-blue-200 bg-blue-50 text-blue-700"
-          }`}>{notice.text}</div>
-        )}
+                : "border-primary bg-primary-transparent text-primary"
+          }`}
+        >
+          {notice.text}
+        </div>
+      )}
 
-        <section className="border border-border">
-          <div className="border-b border-border bg-[#eaf3fb] px-4 py-3 font-semibold text-title">사업정보 입력</div>
-          <div className="space-y-4 p-4">
-            <div className="flex flex-nowrap items-center gap-5">
-              <div className="flex items-center gap-2">
-                <Label className={FORM_LABEL_CLASS}>
-                  <span className="text-red-500">* </span>사업차수
-                </Label>
-                <Input
-                  className={FORM_INPUT_CLASS}
-                  style={{ width: "6rem", flex: "none" }}
-                  type="text"
-                  inputMode="numeric"
-                  maxLength={3}
-                  value={bizCycl}
-                  disabled={formLocked}
-                  onChange={(event) => {
-                    if (/^\d{0,3}$/.test(event.target.value)) setBizCycl(event.target.value);
-                  }}
-                />
-              </div>
-              <SelectBox
-                label="사업년도"
-                labelClass={FORM_LABEL_CLASS}
-                className="flex items-center gap-2"
-                selectClass="h-[3.2rem] w-28 rounded-lg bg-white text-label"
-                selectArray={getStartYearArray({ placeholder: "선택" })}
-                value={bizYr}
-                readOnly={formLocked}
-                onSelectValue={(value) => setBizYr(String(value))}
-              />
-              <CtpvSggPrcsFcltSelectBox
-                className="!mr-0 !justify-start"
-                selectValueClassName="text-label"
-                sido={ctpvCd}
-                sigungu={sggCd}
-                onSidoChange={(nextCtpvCd) => {
-                  if (formLocked) return;
-                  setCtpvCd(nextCtpvCd);
-                  setSggCd("0");
-                  setSggNm("");
-                }}
-                onSigunguChange={(nextSggCd) => {
-                  if (!formLocked) setSggCd(nextSggCd);
-                }}
-                setCtpvName={(nextCtpvNm) => {
-                  if (!formLocked) setCtpvNm(nextCtpvNm === "전체" ? "" : nextCtpvNm);
-                }}
-                setSggName={(nextSggNm) => {
-                  if (!formLocked) setSggNm(nextSggNm === "전체" ? "" : nextSggNm);
-                }}
-              />
-              <div className="flex items-center gap-2">
-                <Label className={FORM_LABEL_CLASS}><span className="text-red-500">* </span>정밀조사 연장</Label>
-                <Input
-                  className={FORM_INPUT_CLASS}
-                  style={{ width: "6rem", flex: "none" }}
-                  type="text"
-                  inputMode="decimal"
-                  maxLength={10}
-                  value={prcisExmnPrlg}
-                  disabled={formLocked}
-                  onChange={(event) => setPrcisExmnPrlg(event.target.value)}
-                />
-                <span className="text-base font-medium text-gray-600">km</span>
-              </div>
-            </div>
-            <div className="flex items-center gap-3">
-              <Label className={`w-20 ${FORM_LABEL_CLASS}`}><span className="text-red-500">* </span>사업명</Label>
-              <Input className={FORM_INPUT_CLASS} style={{ maxWidth: "480px" }} value={bizNm} maxLength={200} disabled={formLocked} onChange={(event) => setBizNm(event.target.value)} />
-            </div>
+      <StandardFormSection title="사업 정보">
+        <StandardFormField id="exmn-biz-cycle" label="사업차수" required>
+          <Input
+            id="exmn-biz-cycle"
+            className="w-full"
+            type="text"
+            inputMode="numeric"
+            maxLength={3}
+            value={bizCycl}
+            disabled={formLocked}
+            onChange={(event) => {
+              if (/^\d{0,3}$/.test(event.target.value))
+                setBizCycl(event.target.value);
+            }}
+          />
+        </StandardFormField>
+
+        <StandardFormField label="사업년도" required>
+          <Select
+            value={bizYr}
+            disabled={formLocked}
+            onValueChange={(value) => setBizYr(String(value))}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {getStartYearArray({ placeholder: "선택" }).map((option) => (
+                <SelectItem key={String(option.val)} value={String(option.val)}>
+                  {option.text}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </StandardFormField>
+
+        <StandardFormField
+          id="exmn-precision-length"
+          label="정밀조사 연장"
+          required
+        >
+          <div className="flex items-center gap-2">
+            <Input
+              id="exmn-precision-length"
+              className="min-w-0 flex-1"
+              type="text"
+              inputMode="decimal"
+              maxLength={10}
+              value={prcisExmnPrlg}
+              disabled={formLocked}
+              onChange={(event) => setPrcisExmnPrlg(event.target.value)}
+            />
+            <span className="shrink-0 text-[1.2rem] text-label">km</span>
           </div>
-        </section>
+        </StandardFormField>
 
-        <section className="min-h-0 border border-border">
-          <div className="flex flex-wrap items-center gap-2 border-b border-border bg-[#eaf3fb] px-4 py-2">
-            <h2 className="mr-2 font-semibold text-title">사업대상 처리분구</h2>
+        <StandardFormField label="시도" required>
+          <Select
+            value={ctpvCd}
+            disabled={formLocked}
+            onValueChange={(value) => {
+              const nextCtpvCd = String(value);
+              const selected = ctpv.find(
+                (option) => String(option.val) === nextCtpvCd,
+              );
+              setCtpvCd(nextCtpvCd);
+              setCtpvNm(selected?.text ?? "");
+              setSggCd("0");
+              setSggNm("");
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">선택</SelectItem>
+              {ctpv.map((option) => (
+                <SelectItem key={String(option.val)} value={String(option.val)}>
+                  {option.text}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </StandardFormField>
+
+        <StandardFormField label="시군구" required>
+          <Select
+            value={sggCd}
+            disabled={formLocked || ctpvCd === "0"}
+            onValueChange={(value) => {
+              const nextSggCd = String(value);
+              const selected = availableSgg.find(
+                (option) => String(option.val) === nextSggCd,
+              );
+              setSggCd(nextSggCd);
+              setSggNm(selected?.text ?? "");
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">선택</SelectItem>
+              {availableSgg.map((option) => (
+                <SelectItem key={String(option.val)} value={String(option.val)}>
+                  {option.text}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </StandardFormField>
+
+        <StandardFormField id="exmn-biz-name" label="사업명" required>
+          <Input
+            id="exmn-biz-name"
+            className="w-full"
+            value={bizNm}
+            maxLength={200}
+            disabled={formLocked}
+            onChange={(event) => setBizNm(event.target.value)}
+          />
+        </StandardFormField>
+      </StandardFormSection>
+
+      <section className="card card-border !m-0 min-h-0 overflow-hidden !p-[0.6rem]">
+        <div className="card-header flex min-h-[5.2rem] flex-wrap items-center justify-between gap-4">
+          <h2 className="text-2xl font-medium text-label">사업대상 처리분구</h2>
+          <div className="flex flex-wrap items-center justify-end gap-2">
             <Input
               type="search"
               value={districtKeyword}
-              className="sn-popup-input-sm !h-9 w-[22rem] bg-white"
+              className="h-[3.2rem] w-[22rem] bg-background !text-[1.3rem]"
               placeholder="처리분구명 검색"
               aria-label="처리분구명 검색"
               disabled={formLocked}
               onChange={(event) => setDistrictKeyword(event.target.value)}
             />
-            <div className="ml-auto flex items-center gap-2">
-              <Button
-                type="button"
-                color="white"
-                size="xs"
-                className="sn-popup-secondary-button-sm"
-                disabled={formLocked || filteredDistricts.length === 0}
-                onClick={handleToggleFilteredDistricts}
-              >
-                {allFilteredDistrictsSelected ? "검색결과 해제" : "검색결과 선택"}
-              </Button>
-              <Button
-                type="button"
-                color="white"
-                size="xs"
-                className="sn-popup-secondary-button-sm"
-                disabled={formLocked || selectedDistrictIds.length === 0}
-                onClick={() => setSelectedDistrictIds([])}
-              >
-                선택 초기화
-              </Button>
-              <span className="ml-1 whitespace-nowrap text-sm text-label">
-                {selectedDistrictIds.length}개 선택
-              </span>
-            </div>
+            <Button
+              type="button"
+              color={allFilteredDistrictsSelected ? "white" : "primary"}
+              disabled={formLocked || filteredDistricts.length === 0}
+              onClick={handleToggleFilteredDistricts}
+            >
+              {allFilteredDistrictsSelected ? "검색결과 해제" : "검색결과 선택"}
+            </Button>
+            <Button
+              type="button"
+              color="white"
+              disabled={formLocked || selectedDistrictIds.length === 0}
+              onClick={() => setSelectedDistrictIds([])}
+            >
+              선택 초기화
+            </Button>
+            <span className="ml-1 min-w-[6.4rem] whitespace-nowrap text-right text-[1.3rem] text-muted-foreground">
+              {selectedDistrictIds.length}개 선택
+            </span>
           </div>
-          <div className="grid grid-cols-3 content-start gap-3 overflow-y-auto p-4" style={{ height: "21rem" }}>
-            {districts.length === 0 ? (
-              <p className="col-span-3 py-7 text-center text-sm text-gray-500">시도·시군구를 선택하거나 등록된 활성 처리분구를 확인해주세요.</p>
-            ) : filteredDistricts.length === 0 ? (
-              <p className="col-span-3 py-7 text-center text-sm text-gray-500">검색 조건에 맞는 처리분구가 없습니다.</p>
-            ) : filteredDistricts.map((district) => (
-              <label key={district.trtdstId} className="flex cursor-pointer items-center gap-2 rounded border border-gray-200 bg-white px-3 py-2.5 text-sm hover:border-blue-300 hover:bg-blue-50">
+        </div>
+        <div
+          className="card !m-[1.2rem] grid grid-cols-3 content-start gap-3 !p-0"
+          style={{ height: "21rem" }}
+        >
+          {districts.length === 0 ? (
+            <p className="col-span-3 flex h-full min-h-[9.6rem] items-center justify-center px-4 text-center text-[1.3rem] text-muted-foreground">
+              시도·시군구를 선택하거나 등록된 활성 처리분구를 확인해주세요.
+            </p>
+          ) : filteredDistricts.length === 0 ? (
+            <p className="col-span-3 flex h-full min-h-[9.6rem] items-center justify-center px-4 text-center text-[1.3rem] text-muted-foreground">
+              검색 조건에 맞는 처리분구가 없습니다.
+            </p>
+          ) : (
+            filteredDistricts.map((district) => (
+              <label
+                key={district.trtdstId}
+                className="hover:border-primary/50 flex cursor-pointer items-center gap-3 rounded-sm border border-border bg-background px-4 py-3 text-[1.3rem] text-label transition-colors hover:bg-accent"
+              >
                 <input
                   type="checkbox"
                   className="size-4 accent-blue-600"
                   checked={selectedDistrictIds.includes(district.trtdstId)}
                   disabled={formLocked}
-                  onChange={(event) => setSelectedDistrictIds((current) => event.target.checked
-                    ? [...current, district.trtdstId]
-                    : current.filter((id) => id !== district.trtdstId))}
+                  onChange={(event) =>
+                    setSelectedDistrictIds((current) =>
+                      event.target.checked
+                        ? [...current, district.trtdstId]
+                        : current.filter((id) => id !== district.trtdstId),
+                    )
+                  }
                 />
                 <span>{district.trtdstNm}</span>
               </label>
-            ))}
-          </div>
-        </section>
-
+            ))
+          )}
+        </div>
       </section>
-    </main>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/exmn/ui/ExmnPplUnitDetailTable.tsx b/apps/sn/src/features/exmn/ui/ExmnPplUnitDetailTable.tsx
index 0b466d634..d883c25d6 100644
--- a/apps/sn/src/features/exmn/ui/ExmnPplUnitDetailTable.tsx
+++ b/apps/sn/src/features/exmn/ui/ExmnPplUnitDetailTable.tsx
@@ -12,20 +12,7 @@ const SEVERITY_LABELS: Record<ExmnDetailSeverity, string> = {
 };
 
 const COLUMN_WIDTHS = [
-  120,
-  72,
-  82,
-  88,
-  230,
-  62,
-  62,
-  82,
-  82,
-  78,
-  82,
-  82,
-  150,
-  150,
+  120, 72, 82, 88, 230, 62, 62, 82, 82, 78, 82, 82, 150, 150,
 ] as const;
 
 interface ExmnPplUnitDetailTableProps {
@@ -73,7 +60,7 @@ export function ExmnPplUnitDetailTable({
   const tableWidth = COLUMN_WIDTHS.reduce((sum, width) => sum + width, 0);
 
   return (
-    <div className="min-h-0 flex-1 overflow-auto border border-border bg-background">
+    <div className="min-h-0 flex-1 overflow-x-auto overflow-y-visible border border-border bg-background">
       <table
         className="border-separate border-spacing-0 text-center text-[1.05rem] text-foreground"
         style={{ width: "100%", minWidth: `${tableWidth}px` }}
@@ -83,95 +70,179 @@ export function ExmnPplUnitDetailTable({
             <col key={`unit-column-${index}`} style={{ width: `${width}px` }} />
           ))}
         </colgroup>
-        <thead className="sticky top-0 z-30 bg-[#eaf3fb] text-[1.2rem] font-medium leading-[1.2] text-[#647784]">
+        <thead className="sticky top-0 z-30 bg-primary text-center text-[1.2rem] font-medium leading-[1.2] text-primary-foreground">
           <tr>
-            <th rowSpan={2} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">관로번호</th>
-            <th rowSpan={2} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">단위<br />구간</th>
-            <th rowSpan={2} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">단위<br />길이<br />(m)</th>
-            <th rowSpan={2} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">결함<br />위치<br />(m)</th>
-            <th colSpan={6} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">결함</th>
-            <th colSpan={2} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">등급점수(점)</th>
-            <th rowSpan={2} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">조사중단사유</th>
-            <th rowSpan={2} className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">비고</th>
+            <th
+              rowSpan={2}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              관로번호
+            </th>
+            <th
+              rowSpan={2}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              단위
+              <br />
+              구간
+            </th>
+            <th
+              rowSpan={2}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              단위
+              <br />
+              길이
+              <br />
+              (m)
+            </th>
+            <th
+              rowSpan={2}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              결함
+              <br />
+              위치
+              <br />
+              (m)
+            </th>
+            <th
+              colSpan={6}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              결함
+            </th>
+            <th
+              colSpan={2}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              등급점수(점)
+            </th>
+            <th
+              rowSpan={2}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              조사중단사유
+            </th>
+            <th
+              rowSpan={2}
+              className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+            >
+              비고
+            </th>
           </tr>
           <tr>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">종류</th>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">코드</th>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">등급</th>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">발생<br />위치</th>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">침입수<br />가점</th>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">연속<br />결함</th>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">구조적</th>
-            <th className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2">운영적</th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              종류
+            </th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              코드
+            </th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              등급
+            </th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              발생
+              <br />
+              위치
+            </th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              침입수
+              <br />
+              가점
+            </th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              연속
+              <br />
+              결함
+            </th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              구조적
+            </th>
+            <th className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground">
+              운영적
+            </th>
           </tr>
         </thead>
         <tbody>
-          {rows.length > 0 ? rows.map((row, index) => {
-            const pipeSpan = pipeSpans.get(row.pipeNo);
-            const unitKey = `${row.pipeNo}::${row.unitSeq}`;
-            const unitSpan = unitSpans.get(unitKey);
-            const showPipeCell = pipeSpan?.firstIndex === index;
-            const showUnitCells = unitSpan?.firstIndex === index;
+          {rows.length > 0 ? (
+            rows.map((row, index) => {
+              const pipeSpan = pipeSpans.get(row.pipeNo);
+              const unitKey = `${row.pipeNo}::${row.unitSeq}`;
+              const unitSpan = unitSpans.get(unitKey);
+              const showPipeCell = pipeSpan?.firstIndex === index;
+              const showUnitCells = unitSpan?.firstIndex === index;
 
-            return (
-              <tr
-                key={`${row.pipeNo}-${row.unitSeq}-${row.defectPositionM}-${row.code}-${index}`}
-                className="sn-popup-grid-row sn-popup-grid-row-hover"
-              >
-                {showPipeCell && (
-                  <td
-                    rowSpan={pipeSpan?.count}
-                    className="border-b border-r border-border bg-background px-2 py-2.5 align-middle font-medium text-primary"
-                  >
-                    {row.pipeNo}
+              return (
+                <tr
+                  key={`${row.pipeNo}-${row.unitSeq}-${row.defectPositionM}-${row.code}-${index}`}
+                  className="transition-colors hover:bg-container"
+                >
+                  {showPipeCell && (
+                    <td
+                      rowSpan={pipeSpan?.count}
+                      className="border-b border-r border-border bg-background px-2 py-2.5 align-middle font-medium text-primary"
+                    >
+                      {row.pipeNo}
+                    </td>
+                  )}
+                  {showUnitCells && (
+                    <>
+                      <td
+                        rowSpan={unitSpan?.count}
+                        className="border-b border-r border-border bg-background px-2 py-2.5 align-middle font-medium"
+                      >
+                        {row.unitSeq}
+                      </td>
+                      <td
+                        rowSpan={unitSpan?.count}
+                        className="border-b border-r border-border bg-background px-2 py-2.5 align-middle"
+                      >
+                        {row.unitLengthM}
+                      </td>
+                    </>
+                  )}
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {formatOptionalValue(row.defectPositionM)}
                   </td>
-                )}
-                {showUnitCells && (
-                  <>
-                    <td
-                      rowSpan={unitSpan?.count}
-                      className="border-b border-r border-border bg-background px-2 py-2.5 align-middle font-medium"
-                    >
-                      {row.unitSeq}
-                    </td>
-                    <td
-                      rowSpan={unitSpan?.count}
-                      className="border-b border-r border-border bg-background px-2 py-2.5 align-middle"
-                    >
-                      {row.unitLengthM}
-                    </td>
-                  </>
-                )}
-                <td className="border-b border-r border-border px-2 py-2.5">
-                  {formatOptionalValue(row.defectPositionM)}
-                </td>
-                <td className="border-b border-r border-border px-2 py-2.5 text-left">{row.defectName}</td>
-                <td className="border-b border-r border-border px-2 py-2.5">{row.code}</td>
-                <td className="border-b border-r border-border px-2 py-2.5">
-                  {row.severity ? SEVERITY_LABELS[row.severity] : "-"}
-                </td>
-                <td className="border-b border-r border-border px-2 py-2.5">{formatOptionalValue(row.occurrencePosition)}</td>
-                <td className="border-b border-r border-border px-2 py-2.5">
-                  {formatOptionalValue(row.infiltrationBonus)}
-                </td>
-                <td className="border-b border-r border-border px-2 py-2.5">
-                  {row.continuous == null ? "-" : row.continuous ? "Y" : "N"}
-                </td>
-                <td className="border-b border-r border-border px-2 py-2.5">{formatOptionalValue(row.structuralScore)}</td>
-                <td className="border-b border-r border-border px-2 py-2.5">{formatOptionalValue(row.operationalScore)}</td>
-                <td className="border-b border-r border-border px-2 py-2.5">
-                  {formatOptionalValue(row.surveyStopReason)}
-                </td>
-                <td className="border-b border-r border-border px-2 py-2.5">
-                  {formatOptionalValue(row.remark)}
-                </td>
-              </tr>
-            );
-          }) : (
+                  <td className="border-b border-r border-border px-2 py-2.5 text-left">
+                    {row.defectName}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {row.code}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {row.severity ? SEVERITY_LABELS[row.severity] : "-"}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {formatOptionalValue(row.occurrencePosition)}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {formatOptionalValue(row.infiltrationBonus)}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {row.continuous == null ? "-" : row.continuous ? "Y" : "N"}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {formatOptionalValue(row.structuralScore)}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {formatOptionalValue(row.operationalScore)}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {formatOptionalValue(row.surveyStopReason)}
+                  </td>
+                  <td className="border-b border-r border-border px-2 py-2.5">
+                    {formatOptionalValue(row.remark)}
+                  </td>
+                </tr>
+              );
+            })
+          ) : (
             <tr>
               <td
                 colSpan={COLUMN_WIDTHS.length}
-                className="sn-popup-empty-cell h-28 border-b border-r border-border text-center"
+                className="h-28 border-b border-r border-border text-center text-muted-foreground"
               >
                 {emptyMessage}
               </td>
diff --git a/apps/sn/src/features/exmn/ui/ExmnRegistrationPage.tsx b/apps/sn/src/features/exmn/ui/ExmnRegistrationPage.tsx
index 62c5d3687..707fe0bc4 100644
--- a/apps/sn/src/features/exmn/ui/ExmnRegistrationPage.tsx
+++ b/apps/sn/src/features/exmn/ui/ExmnRegistrationPage.tsx
@@ -2,24 +2,32 @@
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import { fileDownload } from "@/components/lib/utils";
-import { CtpvSggPrcsFcltSelectBox } from "@/components/ui/ctpvSggPrcsFcltSelectBox";
 import { getStartYearArray } from "@/components/ui/YearRangeSelectBox";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import useStore from "@/store/useStore";
 import {
   Button,
   Input,
   Label,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components/ui";
-import { SearchDiv, SelectBox } from "@common/business_components/ui";
-import type { UiTableSort } from "@common/business_components/ui";
-import ListDiv from "@common/business_components/ui/list_div";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import {
+  STANDARD_ROW_NUMBER_HEADER,
+  StandardDataTable,
+  getStandardRowNumber,
+} from "@common/business_components";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
   downloadExmnBusinessReport,
@@ -30,23 +38,22 @@ import type {
   ExmnBusinessSearchParams,
 } from "../model/exmn-business-types";
 import { ExmnStatusDetailPanel } from "./ExmnStatusDetailPanel";
+import { EXMN_TABLE_HEADER_CLASS } from "./ExmnStandardDataTable";
 
-const ACTION_BUTTON_CLASS =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white";
-
-// 목록 페이지네이션을 제거하고 한 번에 받아 내부 스크롤로 표시할 최대 사업 건수다.
+// 서버 호환을 위해 전체 후보를 한 번에 받고 공통 표에서 10건씩 페이지 표시한다.
 const BUSINESS_LIST_SCROLL_FETCH_SIZE = 1000;
+const BUSINESS_LIST_PAGE_SIZE = 10;
 
 const BUSINESS_TABLE_HEAD = [
-  { id: "rowNumber", title: "NO", widthPercent: 5, sortable: true },
-  { id: "bizCyclText", title: "사업차수", widthPercent: 6, sortable: true, sortKey: "bizCycl" },
-  { id: "bizYr", title: "사업년도", widthPercent: 7, sortable: true },
-  { id: "ctpvNm", title: "시도", widthPercent: 9, sortable: true },
-  { id: "sggNm", title: "시군구", widthPercent: 9, sortable: true },
-  { id: "bizNm", title: "사업명", widthPercent: 26, sortable: true },
-  { id: "trtdstCntText", title: "처리구역·분구(개소)", widthPercent: 8, sortable: true, sortKey: "trtdstCnt" },
-  { id: "prcisExmnPrlgText", title: "정밀조사 연장(km)", widthPercent: 8, sortable: true, sortKey: "prcisExmnPrlg" },
-  { id: "reportYnText", title: "보고서", widthPercent: 22, sortable: true, sortKey: "reportYn" },
+  { id: "rowNumber", title: STANDARD_ROW_NUMBER_HEADER },
+  { id: "bizCyclText", title: "사업차수" },
+  { id: "bizYr", title: "사업년도" },
+  { id: "ctpvNm", title: "시도" },
+  { id: "sggNm", title: "시군구" },
+  { id: "bizNm", title: "사업명" },
+  { id: "trtdstCntText", title: "처리구역·분구(개소)" },
+  { id: "prcisExmnPrlgText", title: "정밀조사 연장(km)" },
+  { id: "reportYnText", title: "보고서" },
 ];
 
 interface BusinessFilters {
@@ -71,133 +78,77 @@ const EMPTY_FILTERS: BusinessFilters = {
 
 type Notice = { type: "success" | "error" | "info"; text: string } | null;
 
-/** 조회 목록에 공통 비교 규칙을 적용해 정렬 헤더와 실제 행 순서를 일치시킨다. */
-const sortBusinessList = (
-  source: ExmnBusiness[],
-  nextSort: UiTableSort | undefined,
-) => {
-  if (!nextSort) return source;
-  // NO는 서버 엔티티 필드가 아니라 현재 조회 결과의 기본 순번이므로 원본 순서를 정·역순으로 사용한다.
-  if (nextSort.key === "rowNumber") {
-    return nextSort.direction === "desc" ? [...source].reverse() : [...source];
-  }
-
-  const getSortValue = (business: ExmnBusiness) => {
-    switch (nextSort.key) {
-      case "bizCycl": return business.bizCycl ?? 0;
-      case "bizYr": return business.bizYr;
-      case "ctpvNm": return business.ctpvNm;
-      case "sggNm": return business.sggNm;
-      case "bizNm": return business.bizNm;
-      case "trtdstCnt": return business.trtdstCnt;
-      case "prcisExmnPrlg": return business.prcisExmnPrlg;
-      case "reportYn": return business.reportYn ?? "N";
-      default: return business.bizNm;
-    }
-  };
-
-  return [...source].sort((left, right) => {
-    const leftValue = getSortValue(left);
-    const rightValue = getSortValue(right);
-    const comparison = typeof leftValue === "number" && typeof rightValue === "number"
-      ? leftValue - rightValue
-      : String(leftValue).localeCompare(String(rightValue), "ko");
-    return nextSort.direction === "desc" ? comparison * -1 : comparison;
-  });
-};
-
 /** 사업정보 조회·등록과 선택 사업의 조사결과 등록 진입을 제공하는 SFR-010-004 메인 화면이다. */
 export function ExmnRegistrationPage() {
-  const pageRef = useRef<HTMLDivElement>(null);
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   /** React 개발 모드의 effect 재실행에서도 최초 목록 조회를 한 번만 수행한다. */
   const initialBusinessesLoadedRef = useRef(false);
-  // 입력 중 조건과 실제 서버 조회 조건을 분리해 정렬 시 동일 조건을 재사용한다.
-  const [draftFilters, setDraftFilters] = useState<BusinessFilters>(EMPTY_FILTERS);
-  const [appliedFilters, setAppliedFilters] = useState<BusinessFilters>(EMPTY_FILTERS);
+  // 입력 중 조건과 실제 서버 조회 조건을 분리해 조회·초기화 동작을 명확히 유지한다.
+  const [draftFilters, setDraftFilters] =
+    useState<BusinessFilters>(EMPTY_FILTERS);
+  const [appliedFilters, setAppliedFilters] =
+    useState<BusinessFilters>(EMPTY_FILTERS);
   const [businesses, setBusinesses] = useState<ExmnBusiness[]>([]);
-  const [total, setTotal] = useState(0);
-  const [sort, setSort] = useState<UiTableSort>();
+  const [totalElements, setTotalElements] = useState(0);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: BUSINESS_LIST_PAGE_SIZE,
+  });
   // 선택 사업 ID는 서버 재조회 뒤에도 같은 행을 복원할 수 있도록 객체와 별도로 유지한다.
-  const [selectedBusinessId, setSelectedBusinessId] = useState<string | null>(null);
+  const [selectedBusinessId, setSelectedBusinessId] = useState<string | null>(
+    null,
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [notice, setNotice] = useState<Notice>(null);
 
-  /**
-   * 공통 헤더와 레이아웃은 변경하지 않고, 이 화면이 시작되는 지점부터
-   * 뷰포트 하단까지만 조사관리 영역으로 사용한다.
-   * 부모 높이가 확정되어야 상세 그리드의 flex-1 / overflow-y-auto가 동작한다.
-   */
+  /** 팝업과 동일한 행정구역 공통코드를 검색 Select에 준비한다. */
   useEffect(() => {
-    const pageElement = pageRef.current;
-    if (!pageElement) return;
+    if (ctpv.length === 0) void fetchCtpv();
+    if (sgg.length === 0) void fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
 
-    const previousHtmlOverflow = document.documentElement.style.overflow;
-    const previousBodyOverflow = document.body.style.overflow;
-    const footerElement = document.querySelector<HTMLElement>("footer");
-
-    const updatePageHeight = () => {
-      const pageTop = pageElement.getBoundingClientRect().top;
-      const footerHeight = footerElement?.getBoundingClientRect().height ?? 0;
-      const bottomGap = 8;
-      pageElement.style.height = `${Math.max(
-        0,
-        window.innerHeight - pageTop - footerHeight - bottomGap,
-      )}px`;
-    };
-
-    document.documentElement.style.overflow = "hidden";
-    document.body.style.overflow = "hidden";
-    updatePageHeight();
-    window.addEventListener("resize", updatePageHeight);
-    const footerResizeObserver = footerElement
-      ? new ResizeObserver(updatePageHeight)
-      : null;
-    footerResizeObserver?.observe(footerElement);
-
-    return () => {
-      window.removeEventListener("resize", updatePageHeight);
-      footerResizeObserver?.disconnect();
-      document.documentElement.style.overflow = previousHtmlOverflow;
-      document.body.style.overflow = previousBodyOverflow;
-    };
-  }, []);
+  const availableSgg = useMemo(() => {
+    if (draftFilters.ctpvCd === "0") return sgg;
+    return sgg.filter((option) =>
+      String(option.val).startsWith(draftFilters.ctpvCd.slice(0, 2)),
+    );
+  }, [draftFilters.ctpvCd, sgg]);
 
   const selectedBusiness = useMemo(
-    () => businesses.find((business) => business.exmnBizId === selectedBusinessId) ?? null,
+    () =>
+      businesses.find(
+        (business) => business.exmnBizId === selectedBusinessId,
+      ) ?? null,
     [businesses, selectedBusinessId],
   );
 
-  /** 조사사업 목록 헤더의 정렬 상태를 오름차순·내림차순·기본 순서로 순환한다. */
-  const handleBusinessSort = (head: (typeof BUSINESS_TABLE_HEAD)[number]) => {
-    if (!("sortable" in head) || !head.sortable) return;
-
-    const key = "sortKey" in head && head.sortKey ? head.sortKey : head.id;
-    const nextSort: UiTableSort | undefined = sort?.key !== key
-      ? { key, direction: "asc" }
-      : sort.direction === "asc"
-        ? { key, direction: "desc" }
-        : undefined;
-    setSort(nextSort);
-    void fetchBusinesses(appliedFilters, nextSort);
-  };
-
   /** 사업 목록의 숫자·행정구역·사업보고서 파일명을 표시 전용 값으로 변환한다. */
-  const businessRows = useMemo(() => businesses.map((business, index) => ({
-    ...business,
-    rowNumber: sort?.key === "rowNumber" && sort.direction === "desc"
-      ? businesses.length - index
-      : index + 1,
-    bizCyclText: business.bizCycl == null ? "-" : `${business.bizCycl}차`,
-    trtdstCntText: Number(business.trtdstCnt ?? 0).toLocaleString("ko-KR"),
-    prcisExmnPrlgText: Number(business.prcisExmnPrlg ?? 0).toLocaleString("ko-KR", { maximumFractionDigits: 3 }),
-    reportYnText: business.bizRptpFileName?.trim()
-      || (business.reportYn === "Y" || business.bizRptpAtchFileId ? "있음" : "없음"),
-  })), [businesses, sort]);
+  const businessRows = useMemo(
+    () =>
+      businesses.map((business, index) => ({
+        ...business,
+        rowNumber: getStandardRowNumber({
+          total: totalElements,
+          rowIndex: index,
+        }),
+        bizCyclText: business.bizCycl == null ? "-" : `${business.bizCycl}차`,
+        trtdstCntText: Number(business.trtdstCnt ?? 0).toLocaleString("ko-KR"),
+        prcisExmnPrlgText: Number(business.prcisExmnPrlg ?? 0).toLocaleString(
+          "ko-KR",
+          { maximumFractionDigits: 3 },
+        ),
+        reportYnText:
+          business.bizRptpFileName?.trim() ||
+          (business.reportYn === "Y" || business.bizRptpAtchFileId
+            ? "있음"
+            : "없음"),
+      })),
+    [businesses, totalElements],
+  );
 
   /** 화면 조건을 행정구역 이름과 목록 내부 스크롤용 단일 서버 Page 계약으로 변환한다. */
   const buildSearchParams = (
     filters: BusinessFilters,
-    nextSort: UiTableSort | undefined,
   ): ExmnBusinessSearchParams => ({
     bizCycl: filters.bizCycl || undefined,
     bizYr: filters.bizYr !== "0" ? filters.bizYr : undefined,
@@ -206,32 +157,32 @@ export function ExmnRegistrationPage() {
     bizNm: filters.bizNm || undefined,
     page: 0,
     size: BUSINESS_LIST_SCROLL_FETCH_SIZE,
-    sort: nextSort && nextSort.key !== "rowNumber"
-      ? `${nextSort.key},${nextSort.direction}`
-      : undefined,
   });
 
-  /** 지정 조회조건·정렬로 스크롤 표시용 사업 목록을 읽고 선택 행을 가능한 경우 유지한다. */
-  const fetchBusinesses = async (
-    filters: BusinessFilters,
-    nextSort = sort,
-  ) => {
+  /** 지정 조회조건으로 사업 목록을 읽고 선택 행을 가능한 경우 유지한다. */
+  const fetchBusinesses = async (filters: BusinessFilters) => {
     setIsLoading(true);
     setNotice(null);
     try {
-      const result = await getExmnBusinesses(buildSearchParams(filters, nextSort));
-      const content = sortBusinessList(result.content, nextSort);
+      const result = await getExmnBusinesses(buildSearchParams(filters));
+      const content = result.content;
       setBusinesses(content);
-      setTotal(result.totalElements);
-      setSelectedBusinessId((current) => content.some((item) => item.exmnBizId === current) ? current : null);
+      setTotalElements(result.totalElements);
+      setSelectedBusinessId((current) =>
+        content.some((item) => item.exmnBizId === current) ? current : null,
+      );
+      setPagination((current) => ({ ...current, pageIndex: 0 }));
       return true;
     } catch (error) {
       setBusinesses([]);
-      setTotal(0);
+      setTotalElements(0);
       setSelectedBusinessId(null);
       setNotice({
         type: "error",
-        text: error instanceof Error ? error.message : "조사사업 목록 조회 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "조사사업 목록 조회 중 오류가 발생했습니다.",
       });
       return false;
     } finally {
@@ -243,7 +194,7 @@ export function ExmnRegistrationPage() {
   useEffect(() => {
     if (initialBusinessesLoadedRef.current) return;
     initialBusinessesLoadedRef.current = true;
-    void fetchBusinesses(EMPTY_FILTERS, undefined);
+    void fetchBusinesses(EMPTY_FILTERS);
     // 최초 진입 시점의 빈 조회조건으로 한 번만 실행한다.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -251,14 +202,25 @@ export function ExmnRegistrationPage() {
   /** 입력 중 조건을 확정하고 첫 페이지를 조회한다. */
   const handleSearch = async () => {
     setAppliedFilters(draftFilters);
-    await fetchBusinesses(draftFilters, sort);
+    await fetchBusinesses(draftFilters);
+  };
+
+  /** CS 초기화 버튼으로 모든 검색조건과 페이지를 최초 조회 기준으로 복원한다. */
+  const handleReset = async () => {
+    setDraftFilters(EMPTY_FILTERS);
+    setAppliedFilters(EMPTY_FILTERS);
+    setSelectedBusinessId(null);
+    await fetchBusinesses(EMPTY_FILTERS);
   };
 
   /** 목록의 보고서 링크에서 첨부서비스 원본 PDF를 내려받는다. */
   const handleReportDownload = async (business: ExmnBusiness) => {
     const attachmentId = business.bizRptpAtchFileId?.trim();
     if (!attachmentId) {
-      setNotice({ type: "error", text: "다운로드할 사업보고서 첨부파일 정보가 없습니다." });
+      setNotice({
+        type: "error",
+        text: "다운로드할 사업보고서 첨부파일 정보가 없습니다.",
+      });
       return;
     }
     setIsLoading(true);
@@ -272,7 +234,10 @@ export function ExmnRegistrationPage() {
     } catch (error) {
       setNotice({
         type: "error",
-        text: error instanceof Error ? error.message : "사업보고서 다운로드 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "사업보고서 다운로드 중 오류가 발생했습니다.",
       });
     } finally {
       setIsLoading(false);
@@ -286,14 +251,20 @@ export function ExmnRegistrationPage() {
       sourcePath: window.location.pathname,
     });
     if (!popup) {
-      setNotice({ type: "error", text: "사업등록 팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요." });
+      setNotice({
+        type: "error",
+        text: "사업등록 팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.",
+      });
     }
   };
 
   /** 선택 사업을 기존 등록 팝업의 수정 모드로 열어 기본정보·처리분구·양식을 다시 관리한다. */
   const openBusinessUpdate = () => {
     if (!selectedBusiness) {
-      setNotice({ type: "error", text: "사업 목록에서 수정할 사업을 먼저 선택해주세요." });
+      setNotice({
+        type: "error",
+        text: "사업 목록에서 수정할 사업을 먼저 선택해주세요.",
+      });
       return;
     }
     setNotice(null);
@@ -302,14 +273,20 @@ export function ExmnRegistrationPage() {
       sourcePath: window.location.pathname,
     });
     if (!popup) {
-      setNotice({ type: "error", text: "사업수정 팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요." });
+      setNotice({
+        type: "error",
+        text: "사업수정 팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.",
+      });
     }
   };
 
   /** 선택 사업 컨텍스트를 전달해 공통 WindowPopup 결과등록 화면을 연다. */
   const openResultRegister = () => {
     if (!selectedBusiness) {
-      setNotice({ type: "error", text: "사업 목록에서 대상 사업을 먼저 선택해주세요." });
+      setNotice({
+        type: "error",
+        text: "사업 목록에서 대상 사업을 먼저 선택해주세요.",
+      });
       return;
     }
     setNotice(null);
@@ -327,7 +304,10 @@ export function ExmnRegistrationPage() {
       sourcePath: window.location.pathname,
     });
     if (!popup) {
-      setNotice({ type: "error", text: "결과등록 팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요." });
+      setNotice({
+        type: "error",
+        text: "결과등록 팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.",
+      });
     }
   };
 
@@ -335,84 +315,266 @@ export function ExmnRegistrationPage() {
   useEffect(() => {
     const handlePopupMessage = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) return;
-      if (event.data?.type === WINDOW_POPUP_MESSAGE_TYPE.EXMN_BUSINESS_CREATED) {
+      if (
+        event.data?.type === WINDOW_POPUP_MESSAGE_TYPE.EXMN_BUSINESS_CREATED
+      ) {
         setSelectedBusinessId(null);
-        void fetchBusinesses(appliedFilters, sort).then((refreshed) => {
-          if (refreshed) setNotice({ type: "success", text: "조사사업이 등록되었습니다." });
+        void fetchBusinesses(appliedFilters).then((refreshed) => {
+          if (refreshed)
+            setNotice({ type: "success", text: "조사사업이 등록되었습니다." });
         });
         return;
       }
 
-      if (event.data?.type === WINDOW_POPUP_MESSAGE_TYPE.EXMN_BUSINESS_UPDATED) {
-        void fetchBusinesses(appliedFilters, sort).then((refreshed) => {
-          if (refreshed) setNotice({ type: "success", text: "조사사업이 수정되었습니다." });
+      if (
+        event.data?.type === WINDOW_POPUP_MESSAGE_TYPE.EXMN_BUSINESS_UPDATED
+      ) {
+        void fetchBusinesses(appliedFilters).then((refreshed) => {
+          if (refreshed)
+            setNotice({ type: "success", text: "조사사업이 수정되었습니다." });
         });
         return;
       }
 
-      if (event.data?.type === WINDOW_POPUP_MESSAGE_TYPE.EXMN_RESULT_COMMITTED) {
-        void fetchBusinesses(appliedFilters, sort).then((refreshed) => {
-          if (refreshed) setNotice({ type: "success", text: "조사결과 최종 저장과 PPL/MNHL 집계를 완료했습니다." });
+      if (
+        event.data?.type === WINDOW_POPUP_MESSAGE_TYPE.EXMN_RESULT_COMMITTED
+      ) {
+        void fetchBusinesses(appliedFilters).then((refreshed) => {
+          if (refreshed)
+            setNotice({
+              type: "success",
+              text: "조사결과 최종 저장과 PPL/MNHL 집계를 완료했습니다.",
+            });
         });
       }
     };
 
     window.addEventListener("message", handlePopupMessage);
     return () => window.removeEventListener("message", handlePopupMessage);
-  }, [appliedFilters, sort]);
+  }, [appliedFilters]);
+
+  /** 보고서 다운로드와 행 선택을 유지하며 조사사업 목록을 공통 DataTable 열로 변환한다. */
+  const columns = useMemo<ColumnDef<(typeof businessRows)[number]>[]>(
+    () =>
+      BUSINESS_TABLE_HEAD.map((head) => ({
+        id: head.id,
+        accessorFn: (row) => row[head.id as keyof typeof row],
+        header: head.title,
+        cell: ({ row, getValue }) => {
+          const business = row.original;
+          const isReportCell = head.id === "reportYnText";
+          const reportAvailable =
+            isReportCell && Boolean(business.bizRptpAtchFileId?.trim());
+          const value = String(getValue() ?? "");
+
+          if (reportAvailable) {
+            return (
+              <button
+                type="button"
+                className="hover:text-primary/80 block w-full truncate font-semibold text-primary underline underline-offset-4"
+                aria-label={`${business.reportYnText} 다운로드`}
+                title={`${business.reportYnText} 다운로드`}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  void handleReportDownload(business);
+                }}
+              >
+                {value}
+              </button>
+            );
+          }
+
+          return (
+            <span
+              className="block min-w-0 whitespace-normal break-words"
+              title={value}
+            >
+              {value}
+            </span>
+          );
+        },
+        meta: {
+          width:
+            head.id === "bizNm"
+              ? 240
+              : head.id === "reportYnText"
+                ? 170
+                : head.id === "trtdstCntText" || head.id === "prcisExmnPrlgText"
+                  ? 125
+                  : head.id === "rowNumber"
+                    ? 60
+                    : 90,
+          align: "center" as const,
+        },
+      })),
+    [],
+  );
+
+  const table = useReactTable({
+    data: businessRows,
+    columns,
+    state: {
+      pagination,
+      rowSelection: selectedBusinessId ? { [selectedBusinessId]: true } : {},
+    },
+    getRowId: (row) => row.exmnBizId,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
 
   return (
-    <div
-      ref={pageRef}
-      className="sn-exmn-registration-page flex min-h-0 flex-col overflow-hidden"
-    >
+    <div className="sn-exmn-registration-page flex min-h-0 flex-col">
       <LoadingOverlay isLoading={isLoading} />
-      <SearchDiv>
-        <div className="flex w-full flex-wrap items-center gap-y-3 px-5 py-4">
-          <div className="mr-8 flex items-center gap-2">
-            <Label className="whitespace-nowrap text-xl font-medium text-gray-600">사업차수</Label>
-            <Input type="number" min={0} className="h-[3.2rem] w-24 text-base" value={draftFilters.bizCycl} onChange={(event) => setDraftFilters((current) => ({ ...current, bizCycl: event.target.value }))} />
+      <div className="card card-border !mt-6">
+        <form
+          className="flex flex-wrap items-center gap-2 p-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void handleSearch();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">
+              사업차수
+            </Label>
+            <Input
+              type="number"
+              min={0}
+              className="w-[8rem]"
+              value={draftFilters.bizCycl}
+              onChange={(event) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  bizCycl: event.target.value,
+                }))
+              }
+            />
           </div>
-          <SelectBox
-            label="사업년도"
-            labelClass="whitespace-nowrap text-xl font-medium text-gray-600"
-            className="mr-8 flex items-center gap-2"
-            selectClass="w-28 rounded-lg bg-white"
-            selectArray={getStartYearArray({ placeholder: "전체" })}
-            value={draftFilters.bizYr}
-            onSelectValue={(value) => setDraftFilters((current) => ({ ...current, bizYr: String(value) }))}
-          />
-          <CtpvSggPrcsFcltSelectBox
-            sido={draftFilters.ctpvCd}
-            sigungu={draftFilters.sggCd}
-            onSidoChange={(ctpvCd) => setDraftFilters((current) => ({
-              ...current,
-              ctpvCd,
-              sggCd: "0",
-              sggNm: "",
-            }))}
-            onSigunguChange={(sggCd) => setDraftFilters((current) => ({ ...current, sggCd }))}
-            setCtpvName={(ctpvNm) => setDraftFilters((current) => ({
-              ...current,
-              ctpvNm: ctpvNm === "전체" ? "" : ctpvNm,
-            }))}
-            setSggName={(sggNm) => setDraftFilters((current) => ({
-              ...current,
-              sggNm: sggNm === "전체" ? "" : sggNm,
-            }))}
-          />
-          <div className="mr-8 flex items-center gap-2">
-            <Label className="whitespace-nowrap text-xl font-medium text-gray-600">사업명</Label>
-            <Input className="h-[3.2rem] w-[32rem] text-base" value={draftFilters.bizNm} onChange={(event) => setDraftFilters((current) => ({ ...current, bizNm: event.target.value }))} onKeyDown={(event) => { if (event.key === "Enter") void handleSearch(); }} />
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">
+              사업년도
+            </Label>
+            <Select
+              value={draftFilters.bizYr}
+              onValueChange={(value) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  bizYr: String(value),
+                }))
+              }
+            >
+              <SelectTrigger className="w-[11rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {getStartYearArray({ placeholder: "전체" }).map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-          <div className="ml-auto flex shrink-0 items-center gap-2">
-            <Button className={ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={() => void handleSearch()}>조회</Button>
-            <Button className={ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={openBusinessUpdate}>수정</Button>
-            <Button className={ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={openBusinessRegister}>사업등록</Button>
-            <Button className={ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={openResultRegister}>결과등록</Button>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시도</Label>
+            <Select
+              value={draftFilters.ctpvCd}
+              onValueChange={(value) => {
+                const ctpvCd = String(value);
+                const selected = ctpv.find(
+                  (option) => String(option.val) === ctpvCd,
+                );
+                setDraftFilters((current) => ({
+                  ...current,
+                  ctpvCd,
+                  ctpvNm: ctpvCd === "0" ? "" : (selected?.text ?? ""),
+                  sggCd: "0",
+                  sggNm: "",
+                }));
+              }}
+            >
+              <SelectTrigger className="w-[14rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[{ val: "0", text: "전체" }, ...ctpv].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-        </div>
-      </SearchDiv>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시군구</Label>
+            <Select
+              value={draftFilters.sggCd}
+              onValueChange={(value) => {
+                const sggCd = String(value);
+                const selected = availableSgg.find(
+                  (option) => String(option.val) === sggCd,
+                );
+                setDraftFilters((current) => ({
+                  ...current,
+                  sggCd,
+                  sggNm: sggCd === "0" ? "" : (selected?.text ?? ""),
+                }));
+              }}
+            >
+              <SelectTrigger className="w-[14rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[{ val: "0", text: "전체" }, ...availableSgg].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">사업명</Label>
+            <Input
+              className="w-[24rem]"
+              value={draftFilters.bizNm}
+              onChange={(event) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  bizNm: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <Button type="submit" className="w-[7.4rem]" disabled={isLoading}>
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="w-[8.8rem]"
+            disabled={isLoading}
+            onClick={() => void handleReset()}
+          >
+            초기화
+          </Button>
+        </form>
+      </div>
 
       {notice && (
         <div
@@ -421,7 +583,7 @@ export function ExmnRegistrationPage() {
             notice.type === "error"
               ? "border-red-200 bg-red-50 text-red-700"
               : notice.type === "info"
-                ? "border-blue-200 bg-blue-50 text-blue-700"
+                ? "border-primary bg-primary-transparent text-primary"
                 : "border-emerald-200 bg-emerald-50 text-emerald-700"
           }`}
         >
@@ -429,170 +591,44 @@ export function ExmnRegistrationPage() {
         </div>
       )}
 
-      <ListDiv className="mt-4 min-h-0 shrink-0 overflow-hidden">
-        <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-medium">조사사업 목록 <span className="text-base text-gray-500">총 {total.toLocaleString("ko-KR")}건</span></h3>
-        </div>
-        <div className="relative mx-[1.2rem]" style={{ marginTop: "0.6rem" }}>
-          <div
-            className="overflow-x-hidden overflow-y-auto"
-            style={{
-              maxHeight: "16rem",
-              scrollbarGutter: "stable",
-            }}
-          >
-            <div
-              className="card !m-0"
-              style={{ paddingTop: 0, paddingBottom: 0 }}
-            >
-            <Table variant="secondary" className="table-fixed">
-            <colgroup>
-              {BUSINESS_TABLE_HEAD.map((head) => (
-                <col key={head.id} style={{ width: `${head.widthPercent}%` }} />
-              ))}
-            </colgroup>
-            <TableHeader
-              className="font-bold"
-              style={{ position: "static", zIndex: "auto" }}
-            >
-              <TableRow>
-                {BUSINESS_TABLE_HEAD.map((head) => {
-                  const sortKey = "sortKey" in head && head.sortKey ? head.sortKey : head.id;
-                  const direction = sort?.key === sortKey ? sort.direction : undefined;
-                  const sortable = "sortable" in head && head.sortable;
-                  const compactHeader = head.id === "trtdstCntText"
-                    || head.id === "prcisExmnPrlgText";
-                  return (
-                    <TableHead
-                      key={head.id}
-                      className={`sticky top-0 z-20 whitespace-nowrap bg-[#eaf3fb] text-center ${
-                        compactHeader ? "!px-1" : ""
-                      }`}
-                      style={{
-                        borderTopWidth: 0,
-                        boxShadow: "inset 0 1px 0 var(--border)",
-                      }}
-                      aria-sort={
-                        sortable
-                          ? direction === "asc"
-                            ? "ascending"
-                            : direction === "desc"
-                              ? "descending"
-                              : "none"
-                          : undefined
-                      }
-                    >
-                      {sortable ? (
-                        <button
-                          type="button"
-                          className="inline-flex w-full items-center justify-center gap-1 whitespace-nowrap"
-                          aria-label={`${head.title} 정렬`}
-                          onClick={() => handleBusinessSort(head)}
-                        >
-                          <span className={compactHeader ? "text-[1.2rem]" : undefined}>
-                            {head.title}
-                          </span>
-                          {direction === "asc" ? (
-                            <span
-                              className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
-                              aria-hidden="true"
-                            >
-                              ▲
-                            </span>
-                          ) : direction === "desc" ? (
-                            <span
-                              className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
-                              aria-hidden="true"
-                            >
-                              ▼
-                            </span>
-                          ) : (
-                            <span
-                              className="inline-flex flex-col items-center gap-px text-[6px] leading-none text-[#475569]"
-                              aria-hidden="true"
-                            >
-                              <span>▲</span>
-                              <span>▼</span>
-                            </span>
-                          )}
-                        </button>
-                      ) : head.title}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            </TableHeader>
-            <TableBody className="text-center">
-              {businessRows.length > 0 ? businessRows.map((business) => {
-                const selected = business.exmnBizId === selectedBusinessId;
-                return (
-                  <TableRow
-                    key={business.exmnBizId}
-                    data-state={selected ? "selected" : undefined}
-                    className="cursor-pointer"
-                    onClick={() => setSelectedBusinessId(business.exmnBizId)}
-                  >
-                    {BUSINESS_TABLE_HEAD.map((head) => {
-                      const isReportCell = head.id === "reportYnText";
-                      const reportAvailable = isReportCell && Boolean(business.bizRptpAtchFileId?.trim());
-                      return (
-                        <TableCell key={head.id} className="!p-0">
-                          <button
-                            type="button"
-                            className={`flex min-h-[4rem] min-w-0 w-full cursor-pointer items-center justify-center px-2 py-[1.2rem] text-[1.3rem] ${
-                              reportAvailable
-                                ? "font-semibold text-blue-600 underline underline-offset-4 hover:text-blue-800"
-                                : selected
-                                  ? "font-bold"
-                                  : "font-normal"
-                            }`}
-                            aria-label={reportAvailable
-                              ? `${business.reportYnText} 다운로드`
-                              : undefined}
-                            title={reportAvailable
-                              ? `${business.reportYnText} 다운로드`
-                              : undefined}
-                            onClick={(event) => {
-                              if (reportAvailable) {
-                                event.stopPropagation();
-                                void handleReportDownload(business);
-                                return;
-                              }
-                              setSelectedBusinessId(business.exmnBizId);
-                            }}
-                          >
-                            <span className={isReportCell ? "block min-w-0 w-full truncate" : undefined}>
-                              {String(business[head.id as keyof typeof business] ?? "")}
-                            </span>
-                          </button>
-                        </TableCell>
-                      );
-                    })}
-                  </TableRow>
-                );
-              }) : (
-                <TableRow>
-                  <TableCell colSpan={BUSINESS_TABLE_HEAD.length} className="h-24 text-center text-gray-500">
-                    조회된 결과가 없습니다.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-            </Table>
-            </div>
-          </div>
-          <span
-            aria-hidden="true"
-            className="pointer-events-none absolute z-30"
-            style={{
-              right: "calc(0.6rem + 17px)",
-              bottom: 0,
-              left: "0.6rem",
-              borderTop: "1px solid var(--border)",
-            }}
-          />
-        </div>
-      </ListDiv>
+      <div className="mt-4 min-w-0">
+        <StandardDataTable
+          table={table}
+          title="조사 목록"
+          className={EXMN_TABLE_HEADER_CLASS}
+          scrollMode="horizontal"
+          minTableWidth="110rem"
+          onRowClick={(row) => setSelectedBusinessId(row.exmnBizId)}
+          actions={
+            <>
+              <Button
+                type="button"
+                color="primary"
+                disabled={isLoading}
+                onClick={openBusinessRegister}
+              >
+                사업등록
+              </Button>
+              <Button
+                type="button"
+                color="primary"
+                disabled={isLoading}
+                onClick={openResultRegister}
+              >
+                결과등록
+              </Button>
+              <Button
+                type="button"
+                color="primary"
+                disabled={isLoading}
+                onClick={openBusinessUpdate}
+              >
+                수정
+              </Button>
+            </>
+          }
+        />
+      </div>
       <ExmnStatusDetailPanel business={selectedBusiness} />
     </div>
   );
diff --git a/apps/sn/src/features/exmn/ui/ExmnResultRegisterPopupPage.tsx b/apps/sn/src/features/exmn/ui/ExmnResultRegisterPopupPage.tsx
index d0b99d0cb..e5475141f 100644
--- a/apps/sn/src/features/exmn/ui/ExmnResultRegisterPopupPage.tsx
+++ b/apps/sn/src/features/exmn/ui/ExmnResultRegisterPopupPage.tsx
@@ -4,7 +4,13 @@ import { handleUpload } from "@/components/lib/utils";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import { postPopupMessageAndClose } from "@/features/windowPopup/lib/popupMessage";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
-import { Button } from "@common/components/ui";
+import {
+  StandardFormField,
+  StandardFormSection,
+  StandardPopupLayout,
+} from "@common/business_components";
+import { Button } from "@common/components";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import type { HttpResponse } from "tus-js-client";
 import { useEffect, useState } from "react";
 import {
@@ -26,13 +32,6 @@ import type {
   ExmnImportValidationResult,
 } from "../model/exmn-business-types";
 
-const POPUP_BUTTON_SIZE_CLASS =
-  "h-10 w-[9.6rem] rounded-sm px-4 !text-[1.2rem] font-medium";
-const POPUP_ACTION_BUTTON_CLASS =
-  `${POPUP_BUTTON_SIZE_CLASS} !text-white disabled:!text-white`;
-const FIND_BUTTON_CLASS =
-  "inline-flex h-10 cursor-pointer items-center justify-center rounded-sm bg-blue-600 px-3 !text-[1.2rem] font-medium !text-white hover:bg-blue-700";
-
 const FILE_TYPES: ExmnFileType[] = [
   "EXMN_EXCEL",
   "PPL_EXMN_PDF",
@@ -47,13 +46,14 @@ const VALIDATION_FILE_TYPES: ExmnFileType[] = [
   "MNHL_EXMN_PDF",
 ];
 
-const VALIDATION_BUTTON_FILE_TYPES = new Set<ExmnFileType>(VALIDATION_FILE_TYPES);
+const VALIDATION_BUTTON_FILE_TYPES = new Set<ExmnFileType>(
+  VALIDATION_FILE_TYPES,
+);
 
 /** 파일별로 실제 수행하는 검토 항목과 아직 적용하지 않은 범위를 사용자 문구로 정의한다. */
-const VALIDATION_CHECK_GUIDES: Partial<Record<
-  ExmnFileType,
-  { checkedItems: string[]; pendingNote?: string }
->> = {
+const VALIDATION_CHECK_GUIDES: Partial<
+  Record<ExmnFileType, { checkedItems: string[]; pendingNote?: string }>
+> = {
   EXMN_EXCEL: {
     checkedItems: [
       "처리분구별 관로·맨홀 시트와 필수값",
@@ -69,10 +69,7 @@ const VALIDATION_CHECK_GUIDES: Partial<Record<
     ],
   },
   MNHL_EXMN_PDF: {
-    checkedItems: [
-      "PDF 파일 형식",
-      "조사결과 Excel 구조 및 저장 가능 여부",
-    ],
+    checkedItems: ["PDF 파일 형식", "조사결과 Excel 구조 및 저장 가능 여부"],
     pendingNote: "PDF 내부 맨홀번호 대조는 검토 기준 협의 후 적용 예정입니다.",
   },
 };
@@ -85,7 +82,9 @@ interface SelectedFile {
 type SelectedFiles = Partial<Record<ExmnFileType, SelectedFile>>;
 type Notice = { type: "success" | "error" | "info"; text: string } | null;
 type FileValidationStatus = "success" | "error";
-type FileValidationResults = Partial<Record<ExmnFileType, ExmnImportValidationResult>>;
+type FileValidationResults = Partial<
+  Record<ExmnFileType, ExmnImportValidationResult>
+>;
 type FileValidationMessages = Partial<Record<ExmnFileType, string[]>>;
 
 interface ExmnResultRegisterPopupPageProps {
@@ -102,7 +101,8 @@ const buildImportFormData = (
   const formData = new FormData();
   if (files.EXMN_EXCEL) formData.append("exmnFile", files.EXMN_EXCEL.file);
   if (files.PPL_EXMN_PDF) formData.append("pplFile", files.PPL_EXMN_PDF.file);
-  if (files.MNHL_EXMN_PDF) formData.append("mnhlFile", files.MNHL_EXMN_PDF.file);
+  if (files.MNHL_EXMN_PDF)
+    formData.append("mnhlFile", files.MNHL_EXMN_PDF.file);
   if (validation?.fileHash) formData.append("fileHash", validation.fileHash);
   if (validationType) formData.append("validationType", validationType);
   return formData;
@@ -112,51 +112,60 @@ const buildImportFormData = (
 const uploadAttachment = (
   selected: SelectedFile,
   onProgress: (percentage: string) => void,
-): Promise<ExmnAttachmentKey> => new Promise((resolve, reject) => {
-  let settled = false;
-  const rejectOnce = (error: Error) => {
-    if (settled) return;
-    settled = true;
-    reject(error);
-  };
-  const resolveFromResponse = (response: HttpResponse) => {
-    if (settled) return;
-    try {
-      const fileInfo = response.getHeader("X-File-Info");
-      if (!fileInfo) throw new Error("첨부서비스가 파일키를 반환하지 않았습니다.");
-      const parsed = JSON.parse(fileInfo) as { atflCd?: string; atflId?: string };
-      if (!parsed.atflCd || !parsed.atflId) {
-        throw new Error("첨부서비스 파일키 형식이 올바르지 않습니다.");
-      }
+): Promise<ExmnAttachmentKey> =>
+  new Promise((resolve, reject) => {
+    let settled = false;
+    const rejectOnce = (error: Error) => {
+      if (settled) return;
       settled = true;
-      resolve({
-        atflCd: parsed.atflCd,
-        atflId: parsed.atflId,
-        fileName: selected.file.name,
-      });
-    } catch (error) {
-      rejectOnce(error instanceof Error
-        ? error
-        : new Error("첨부파일 응답을 해석할 수 없습니다."));
-    }
-  };
+      reject(error);
+    };
+    const resolveFromResponse = (response: HttpResponse) => {
+      if (settled) return;
+      try {
+        const fileInfo = response.getHeader("X-File-Info");
+        if (!fileInfo)
+          throw new Error("첨부서비스가 파일키를 반환하지 않았습니다.");
+        const parsed = JSON.parse(fileInfo) as {
+          atflCd?: string;
+          atflId?: string;
+        };
+        if (!parsed.atflCd || !parsed.atflId) {
+          throw new Error("첨부서비스 파일키 형식이 올바르지 않습니다.");
+        }
+        settled = true;
+        resolve({
+          atflCd: parsed.atflCd,
+          atflId: parsed.atflId,
+          fileName: selected.file.name,
+        });
+      } catch (error) {
+        rejectOnce(
+          error instanceof Error
+            ? error
+            : new Error("첨부파일 응답을 해석할 수 없습니다."),
+        );
+      }
+    };
 
-  handleUpload(selected.fileList, {
-    handleProgress: onProgress,
-    handleResponse: resolveFromResponse,
-    handleError: rejectOnce,
+    handleUpload(selected.fileList, {
+      handleProgress: onProgress,
+      handleResponse: resolveFromResponse,
+      handleError: rejectOnce,
+    });
   });
-});
 
 /** 공통 WindowPopup 안에서 조사 파일 5종을 선택·검토·최종 저장하는 화면이다. */
 export function ExmnResultRegisterPopupPage({
   exmnBizId,
   businessSummary,
 }: ExmnResultRegisterPopupPageProps) {
+  const { confirm } = useConfirm();
   const [detail, setDetail] = useState<ExmnBusinessDetail | null>(null);
   const [files, setFiles] = useState<SelectedFiles>({});
   /** 파일별 서버 검토 결과를 보관해 다른 파일 검토 후에도 결과와 건수를 유지한다. */
-  const [validationResults, setValidationResults] = useState<FileValidationResults>({});
+  const [validationResults, setValidationResults] =
+    useState<FileValidationResults>({});
   const [fileValidationStatuses, setFileValidationStatuses] = useState<
     Partial<Record<ExmnFileType, FileValidationStatus>>
   >({});
@@ -185,7 +194,10 @@ export function ExmnResultRegisterPopupPage({
   /** 팝업 진입 시 선택 사업의 처리분구·첨부 상세를 읽는다. */
   useEffect(() => {
     if (!exmnBizId) {
-      setNotice({ type: "error", text: "결과를 등록할 조사사업 식별자가 없습니다." });
+      setNotice({
+        type: "error",
+        text: "결과를 등록할 조사사업 식별자가 없습니다.",
+      });
       return;
     }
     let active = true;
@@ -198,7 +210,10 @@ export function ExmnResultRegisterPopupPage({
         if (!active) return;
         setNotice({
           type: "error",
-          text: error instanceof Error ? error.message : "선택 사업 상세 조회 중 오류가 발생했습니다.",
+          text:
+            error instanceof Error
+              ? error.message
+              : "선택 사업 상세 조회 중 오류가 발생했습니다.",
         });
       })
       .finally(() => {
@@ -210,11 +225,15 @@ export function ExmnResultRegisterPopupPage({
   }, [exmnBizId]);
 
   /** 파일 변경 시 이전 검토결과를 폐기하고 확장자·크기 규칙을 즉시 확인한다. */
-  const handleFileChange = (fileType: ExmnFileType, fileList: FileList | null) => {
+  const handleFileChange = (
+    fileType: ExmnFileType,
+    fileList: FileList | null,
+  ) => {
     setUploadStatus("");
-    const invalidatedTypes: ExmnFileType[] = fileType === "EXMN_EXCEL"
-      ? ["EXMN_EXCEL", "PPL_EXMN_PDF", "MNHL_EXMN_PDF"]
-      : [fileType];
+    const invalidatedTypes: ExmnFileType[] =
+      fileType === "EXMN_EXCEL"
+        ? ["EXMN_EXCEL", "PPL_EXMN_PDF", "MNHL_EXMN_PDF"]
+        : [fileType];
     setFileValidationStatuses((current) => {
       const next = { ...current };
       invalidatedTypes.forEach((type) => delete next[type]);
@@ -277,7 +296,10 @@ export function ExmnResultRegisterPopupPage({
     ) as Partial<Record<ExmnFileType, File>>;
     const validationMessage = validateExmnFiles(fileMap);
     if (validationMessage) {
-      setFileValidationStatuses((current) => ({ ...current, [fileType]: "error" }));
+      setFileValidationStatuses((current) => ({
+        ...current,
+        [fileType]: "error",
+      }));
       setValidationResults((current) => {
         const next = { ...current };
         delete next[fileType];
@@ -309,13 +331,19 @@ export function ExmnResultRegisterPopupPage({
       }));
       setNotice(null);
     } catch (error) {
-      const message = error instanceof Error ? error.message : "조사파일 검토 중 오류가 발생했습니다.";
+      const message =
+        error instanceof Error
+          ? error.message
+          : "조사파일 검토 중 오류가 발생했습니다.";
       setValidationResults((current) => {
         const next = { ...current };
         delete next[fileType];
         return next;
       });
-      setFileValidationStatuses((current) => ({ ...current, [fileType]: "error" }));
+      setFileValidationStatuses((current) => ({
+        ...current,
+        [fileType]: "error",
+      }));
       setFileValidationMessages((current) => ({
         ...current,
         [fileType]: [message],
@@ -330,22 +358,33 @@ export function ExmnResultRegisterPopupPage({
   const handleCommit = async () => {
     const excelValidation = validationResults.EXMN_EXCEL;
     if (
-      !excelValidation?.valid
-      || fileValidationStatuses.EXMN_EXCEL !== "success"
-      || fileValidationStatuses.PPL_EXMN_PDF !== "success"
-    ) return;
+      !excelValidation?.valid ||
+      fileValidationStatuses.EXMN_EXCEL !== "success" ||
+      fileValidationStatuses.PPL_EXMN_PDF !== "success"
+    )
+      return;
+    if (!(await confirm("조사결과를 저장하시겠습니까?"))) return;
     setIsLoading(true);
     setNotice(null);
     try {
       await uploadAndLinkAttachments();
-      await commitExmnImport(exmnBizId, buildImportFormData(files, excelValidation));
-      postPopupMessageAndClose(WINDOW_POPUP_MESSAGE_TYPE.EXMN_RESULT_COMMITTED, {
+      await commitExmnImport(
         exmnBizId,
-      });
+        buildImportFormData(files, excelValidation),
+      );
+      postPopupMessageAndClose(
+        WINDOW_POPUP_MESSAGE_TYPE.EXMN_RESULT_COMMITTED,
+        {
+          exmnBizId,
+        },
+      );
     } catch (error) {
       setNotice({
         type: "error",
-        text: error instanceof Error ? error.message : "조사결과 최종 저장 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "조사결과 최종 저장 중 오류가 발생했습니다.",
       });
     } finally {
       setIsLoading(false);
@@ -359,201 +398,244 @@ export function ExmnResultRegisterPopupPage({
   const excelValidation = validationResults.EXMN_EXCEL;
 
   return (
-    <main className="sn-popup-page">
-      <LoadingOverlay isLoading={isLoading} />
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">조사 결과 업로드</h1>
-        <div>
+    <StandardPopupLayout
+      title="조사 결과 업로드"
+      showDefaultCancelAction={false}
+      actions={
+        <>
           <Button
             type="button"
-            color="white"
-            size="sm"
-            className="sn-popup-header-button h-10 w-auto px-3 !text-[1.2rem]"
+            color="primary"
             disabled={
-              isLoading
-              || !excelValidation?.valid
-              || fileValidationStatuses.EXMN_EXCEL !== "success"
-              || fileValidationStatuses.PPL_EXMN_PDF !== "success"
+              isLoading ||
+              !excelValidation?.valid ||
+              fileValidationStatuses.EXMN_EXCEL !== "success" ||
+              fileValidationStatuses.PPL_EXMN_PDF !== "success"
             }
             onClick={() => void handleCommit()}
           >
             저장
           </Button>
-        </div>
-      </header>
-
-      <section className="flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto px-4 pb-3 pt-3">
-        {notice && notice.type !== "success" && (
-          <div role="alert" className={`whitespace-pre-line rounded border px-4 py-3 text-[1.3rem] ${
+          <Button
+            type="button"
+            color="white"
+            disabled={isLoading}
+            onClick={() => window.close()}
+          >
+            취소
+          </Button>
+        </>
+      }
+      bodyClassName="space-y-3 overflow-x-hidden"
+    >
+      <LoadingOverlay isLoading={isLoading} />
+      {notice && notice.type !== "success" && (
+        <div
+          role="alert"
+          className={`whitespace-pre-line rounded-sm border px-4 py-3 text-[1.3rem] ${
             notice.type === "error"
               ? "border-red-200 bg-red-50 text-red-700"
-              : notice.type === "success"
-                ? "border-emerald-200 bg-emerald-50 text-emerald-700"
-                : "border-blue-200 bg-blue-50 text-blue-700"
-          }`}>{notice.text}</div>
-        )}
-
-        <section
-          className="rounded-md border border-border bg-secondary p-3"
-          aria-label="선택 조사사업 요약"
+              : "border-primary bg-primary-transparent text-primary"
+          }`}
         >
-          <div className="flex min-w-0 flex-wrap items-center gap-x-7 gap-y-2">
-            <div className="flex shrink-0 items-center gap-2">
-              <span className="whitespace-nowrap text-xl font-medium text-gray-600">사업차수</span>
-              <span className="whitespace-nowrap text-[1.3rem] font-semibold text-black">
-                {detail?.bizCycl ?? businessSummary.bizCycl ?? "-"}차
-              </span>
-            </div>
-            <div className="flex shrink-0 items-center gap-2">
-              <span className="whitespace-nowrap text-xl font-medium text-gray-600">사업년도</span>
-              <span className="whitespace-nowrap text-[1.3rem] font-semibold text-black">
-                {detail?.bizYr ?? businessSummary.bizYr ?? "-"}
-              </span>
-            </div>
-            <div className="flex shrink-0 items-center gap-2">
-              <span className="whitespace-nowrap text-xl font-medium text-gray-600">행정구역</span>
-              <span
-                className="max-w-[22rem] truncate text-[1.3rem] font-semibold text-black"
-                title={`${detail?.ctpvNm ?? businessSummary.ctpvNm} ${detail?.sggNm ?? businessSummary.sggNm}`}
-              >
-                {detail?.ctpvNm ?? businessSummary.ctpvNm} {detail?.sggNm ?? businessSummary.sggNm}
-              </span>
-            </div>
-            <div className="flex min-w-[24rem] flex-1 items-center gap-2">
-              <span className="shrink-0 whitespace-nowrap text-xl font-medium text-gray-600">사업명</span>
-              <span
-                className="min-w-0 truncate text-[1.3rem] font-semibold text-black"
-                title={detail?.bizNm ?? businessSummary.bizNm}
-              >
-                {detail?.bizNm ?? businessSummary.bizNm ?? "-"}
-              </span>
-            </div>
-          </div>
-        </section>
+          {notice.text}
+        </div>
+      )}
 
-        <section className="overflow-hidden border border-border">
-          <div
-            className="grid items-center gap-3 bg-[#eaf3fb] px-3 py-2.5 text-center text-[1.3rem] font-medium text-label"
-            style={{ gridTemplateColumns: "180px minmax(0, 1fr) 80px 112px" }}
+      <StandardFormSection title="선택 조사사업" columns={2}>
+        <StandardFormField label="사업차수" columns={2}>
+          <p className="flex min-h-[3.2rem] items-center text-[1.3rem] font-medium text-label">
+            {detail?.bizCycl ?? businessSummary.bizCycl ?? "-"}차
+          </p>
+        </StandardFormField>
+        <StandardFormField label="사업년도" columns={2}>
+          <p className="flex min-h-[3.2rem] items-center text-[1.3rem] font-medium text-label">
+            {detail?.bizYr ?? businessSummary.bizYr ?? "-"}
+          </p>
+        </StandardFormField>
+        <StandardFormField label="행정구역" columns={2}>
+          <p
+            className="flex min-h-[3.2rem] min-w-0 items-center truncate text-[1.3rem] font-medium text-label"
+            title={`${detail?.ctpvNm ?? businessSummary.ctpvNm} ${detail?.sggNm ?? businessSummary.sggNm}`}
           >
-            <span>파일 구분</span><span>선택 파일</span><span>찾기</span><span>데이터 검토</span>
+            {detail?.ctpvNm ?? businessSummary.ctpvNm}{" "}
+            {detail?.sggNm ?? businessSummary.sggNm}
+          </p>
+        </StandardFormField>
+        <StandardFormField label="사업명" columns={2}>
+          <p
+            className="flex min-h-[3.2rem] min-w-0 items-center truncate text-[1.3rem] font-medium text-label"
+            title={detail?.bizNm ?? businessSummary.bizNm}
+          >
+            {detail?.bizNm ?? businessSummary.bizNm ?? "-"}
+          </p>
+        </StandardFormField>
+      </StandardFormSection>
+
+      <section className="overflow-hidden rounded-sm border border-border bg-background">
+        <div
+          className="grid items-center gap-3 bg-primary px-3 py-3 text-center text-[1.3rem] font-semibold text-primary-foreground"
+          style={{ gridTemplateColumns: "180px minmax(0, 1fr) 80px 112px" }}
+        >
+          <span>파일 구분</span>
+          <span>선택 파일</span>
+          <span>찾기</span>
+          <span>데이터 검토</span>
+        </div>
+        {FILE_TYPES.map((fileType) => {
+          const rule = EXMN_FILE_RULES[fileType];
+          const selected = files[fileType];
+          const validationStatus = fileValidationStatuses[fileType];
+          const inputId = `exmn-popup-file-${fileType}`;
+          const canValidate = VALIDATION_BUTTON_FILE_TYPES.has(fileType);
+          return (
+            <div
+              key={fileType}
+              className="grid items-center gap-3 border-t border-border px-3 py-3 text-[1.3rem] text-label"
+              style={{ gridTemplateColumns: "180px minmax(0, 1fr) 80px 112px" }}
+            >
+              <label htmlFor={inputId} className="font-medium text-label">
+                {(fileType === "EXMN_EXCEL" ||
+                  fileType === "PPL_EXMN_PDF" ||
+                  fileType === "MNHL_EXMN_PDF") && (
+                  <span className="text-red-500">* </span>
+                )}
+                {rule.label}
+              </label>
+              <div
+                className={`flex min-w-0 items-center gap-2 rounded-md border px-3 py-1.5 ${
+                  validationStatus === "success"
+                    ? "border-emerald-300 bg-emerald-50 font-semibold text-emerald-700"
+                    : validationStatus === "error"
+                      ? "border-red-300 bg-red-50 font-semibold text-red-700"
+                      : selected
+                        ? "border-primary bg-primary-transparent font-semibold text-primary"
+                        : "border-border bg-background text-label"
+                }`}
+                title={selected?.file.name}
+              >
+                <span className="min-w-0 flex-1 truncate">
+                  {selected?.file.name ||
+                    `${rule.extensions.map((extension) => `.${extension}`).join(", ")} 파일`}
+                </span>
+                {validationStatus && (
+                  <span className="shrink-0 text-xs">
+                    {validationStatus === "success" ? "검토 완료" : "검토 실패"}
+                  </span>
+                )}
+              </div>
+              <div className="text-center">
+                <input
+                  id={inputId}
+                  type="file"
+                  className="sr-only"
+                  accept={rule.extensions
+                    .map((extension) => `.${extension}`)
+                    .join(",")}
+                  disabled={isLoading}
+                  onChange={(event) =>
+                    handleFileChange(fileType, event.target.files)
+                  }
+                />
+                <Button
+                  type="button"
+                  size="sm"
+                  className="w-full px-3"
+                  disabled={isLoading}
+                  onClick={() => document.getElementById(inputId)?.click()}
+                >
+                  찾기
+                </Button>
+              </div>
+              <div className="text-center">
+                {canValidate ? (
+                  <Button
+                    className="w-full px-3"
+                    size="sm"
+                    disabled={isLoading}
+                    onClick={() => void handleValidate(fileType)}
+                  >
+                    데이터 검토
+                  </Button>
+                ) : (
+                  <span className="text-muted-foreground">-</span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </section>
+
+      {visibleValidationTypes.length > 0 && (
+        <section
+          className="overflow-hidden rounded-sm border border-border bg-background"
+          aria-label="데이터 검토 내역"
+        >
+          <div className="flex items-center border-b border-border bg-container px-4 py-3">
+            <h2 className="text-[1.3rem] font-semibold text-label">
+              데이터 검토 내역
+            </h2>
           </div>
-          {FILE_TYPES.map((fileType) => {
-            const rule = EXMN_FILE_RULES[fileType];
-            const selected = files[fileType];
-            const validationStatus = fileValidationStatuses[fileType];
-            const inputId = `exmn-popup-file-${fileType}`;
-            const canValidate = VALIDATION_BUTTON_FILE_TYPES.has(fileType);
+          {visibleValidationTypes.map((fileType) => {
+            const status = fileValidationStatuses[fileType]!;
+            const result = validationResults[fileType];
+            const messages = fileValidationMessages[fileType] ?? [];
+            const guide = VALIDATION_CHECK_GUIDES[fileType];
+            const countText =
+              fileType === "EXMN_EXCEL"
+                ? `관로 ${result?.summary.pplCount ?? 0}건 · 맨홀 ${result?.summary.mnhlCount ?? 0}건`
+                : fileType === "PPL_EXMN_PDF"
+                  ? `Excel 관로 ${result?.summary.pplCount ?? 0}건 기준`
+                  : "";
             return (
               <div
                 key={fileType}
-                className="grid items-center gap-3 border-t border-border px-3 py-3 text-[1.3rem] text-label"
-                style={{ gridTemplateColumns: "180px minmax(0, 1fr) 80px 112px" }}
+                className="grid items-start gap-3 border-t border-border px-3 py-2.5 text-[1.3rem] text-label"
+                style={{ gridTemplateColumns: "180px 88px minmax(0, 1fr)" }}
               >
-                <label htmlFor={inputId} className="font-medium text-gray-600">
-                  {(fileType === "EXMN_EXCEL" || fileType === "PPL_EXMN_PDF" || fileType === "MNHL_EXMN_PDF") && <span className="text-red-500">* </span>}
-                  {rule.label}
-                </label>
-                <div
-                  className={`flex min-w-0 items-center gap-2 rounded-md border px-3 py-1.5 ${
-                    validationStatus === "success"
-                      ? "border-emerald-300 bg-emerald-50 font-semibold text-emerald-700"
-                      : validationStatus === "error"
-                        ? "border-red-300 bg-red-50 font-semibold text-red-700"
-                        : selected
-                          ? "border-blue-300 bg-blue-50 font-semibold text-blue-700"
-                          : "border-[#9fb2c4] bg-white text-gray-600"
+                <span className="font-medium text-label">
+                  {EXMN_FILE_RULES[fileType].label}
+                </span>
+                <span
+                  className={`inline-flex w-fit rounded-full px-2.5 py-1 text-xs font-semibold ${
+                    status === "success"
+                      ? "bg-emerald-100 text-emerald-700"
+                      : "bg-red-100 text-red-700"
                   }`}
-                  title={selected?.file.name}
                 >
-                  <span className="min-w-0 flex-1 truncate">
-                    {selected?.file.name || `${rule.extensions.map((extension) => `.${extension}`).join(", ")} 파일`}
-                  </span>
-                  {validationStatus && (
-                    <span className="shrink-0 text-xs">
-                      {validationStatus === "success" ? "검토 완료" : "검토 실패"}
-                    </span>
+                  {status === "success" ? "검토 완료" : "검토 실패"}
+                </span>
+                <div className="min-w-0">
+                  {status === "success" && countText && (
+                    <p className="mb-1 font-medium text-label">{countText}</p>
+                  )}
+                  <p className="leading-5 text-label">
+                    {guide?.checkedItems.join(" · ")}
+                  </p>
+                  {guide?.pendingNote && (
+                    <p className="mt-1 text-amber-700">{guide.pendingNote}</p>
+                  )}
+                  {status === "error" && messages.length > 0 && (
+                    <p
+                      className="mt-1 truncate text-red-700"
+                      title={messages.join("\n")}
+                    >
+                      {messages[0]}
+                      {messages.length > 1
+                        ? ` 외 ${messages.length - 1}건`
+                        : ""}
+                    </p>
                   )}
-                </div>
-                <div className="text-center">
-                  <input
-                    id={inputId}
-                    type="file"
-                    className="sr-only"
-                    accept={rule.extensions.map((extension) => `.${extension}`).join(",")}
-                    disabled={isLoading}
-                    onChange={(event) => handleFileChange(fileType, event.target.files)}
-                  />
-                  <label htmlFor={inputId} className={FIND_BUTTON_CLASS}>찾기</label>
-                </div>
-                <div className="text-center">
-                  {canValidate ? (
-                    <Button color="green" className={POPUP_ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={() => void handleValidate(fileType)}>데이터 검토</Button>
-                  ) : <span className="text-gray-400">-</span>}
                 </div>
               </div>
             );
           })}
         </section>
+      )}
 
-        {visibleValidationTypes.length > 0 && (
-          <section className="overflow-hidden border border-border" aria-label="데이터 검토 내역">
-            <div className="flex items-center bg-[#eaf3fb] px-3 py-2.5">
-              <h2 className="text-[1.3rem] font-medium text-label">데이터 검토 내역</h2>
-            </div>
-            {visibleValidationTypes.map((fileType) => {
-              const status = fileValidationStatuses[fileType]!;
-              const result = validationResults[fileType];
-              const messages = fileValidationMessages[fileType] ?? [];
-              const guide = VALIDATION_CHECK_GUIDES[fileType];
-              const countText = fileType === "EXMN_EXCEL"
-                ? `관로 ${result?.summary.pplCount ?? 0}건 · 맨홀 ${result?.summary.mnhlCount ?? 0}건`
-                : fileType === "PPL_EXMN_PDF"
-                  ? `Excel 관로 ${result?.summary.pplCount ?? 0}건 기준`
-                  : "";
-              return (
-                <div
-                  key={fileType}
-                  className="grid items-start gap-3 border-t border-border px-3 py-2.5 text-[1.3rem] text-label"
-                  style={{ gridTemplateColumns: "180px 88px minmax(0, 1fr)" }}
-                >
-                  <span className="font-medium text-gray-600">
-                    {EXMN_FILE_RULES[fileType].label}
-                  </span>
-                  <span className={`inline-flex w-fit rounded-full px-2.5 py-1 text-xs font-semibold ${
-                    status === "success"
-                      ? "bg-emerald-100 text-emerald-700"
-                      : "bg-red-100 text-red-700"
-                  }`}>
-                    {status === "success" ? "검토 완료" : "검토 실패"}
-                  </span>
-                  <div className="min-w-0">
-                    {status === "success" && countText && (
-                      <p className="mb-1 font-medium text-label">{countText}</p>
-                    )}
-                    <p className="leading-5 text-label">
-                      {guide?.checkedItems.join(" · ")}
-                    </p>
-                    {guide?.pendingNote && (
-                      <p className="mt-1 text-amber-700">{guide.pendingNote}</p>
-                    )}
-                    {status === "error" && messages.length > 0 && (
-                      <p className="mt-1 truncate text-red-700" title={messages.join("\n")}>
-                        {messages[0]}
-                        {messages.length > 1 ? ` 외 ${messages.length - 1}건` : ""}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </section>
-        )}
-
-        {uploadStatus && (
-          <p className="text-right text-[1.3rem] text-blue-700">{uploadStatus}</p>
-        )}
-      </section>
-    </main>
+      {uploadStatus && (
+        <p className="text-right text-[1.3rem] text-primary">{uploadStatus}</p>
+      )}
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/exmn/ui/ExmnStandardDataTable.tsx b/apps/sn/src/features/exmn/ui/ExmnStandardDataTable.tsx
new file mode 100644
index 000000000..81d32e112
--- /dev/null
+++ b/apps/sn/src/features/exmn/ui/ExmnStandardDataTable.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
+import {
+  StandardDataTable,
+  getStandardRowNumber,
+  type ScrollMode,
+  type UiHeadProps,
+} from "@common/business_components";
+
+type ExmnStandardDataTableProps<T extends Record<string, unknown>> = {
+  rows: T[];
+  headlist: UiHeadProps[];
+  title: ReactNode;
+  total: number;
+  page: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+  actions?: ReactNode;
+  loading?: boolean;
+  scrollMode?: ScrollMode;
+  minTableWidth?: string;
+  clickableHeadIds?: string[];
+  onCellClick?: (row: T, rowIndex: number, headId: string) => void;
+  onRowClick?: (row: T, rowIndex: number) => void;
+  rowId?: (row: T, rowIndex: number) => string;
+};
+
+const ROW_NUMBER_IDS = new Set(["no", "rowNo", "rowNumber"]);
+const EXMN_TABLE_HEADER_HEIGHT_REM = 5.6;
+const EXMN_TABLE_HEADER_CLASS = "[&_thead_th]:!h-[5.6rem]";
+
+const formatValue = (value: unknown) => {
+  if (value === null || value === undefined || value === "") return "-";
+  return typeof value === "number"
+    ? value.toLocaleString("ko-KR")
+    : String(value);
+};
+
+/** 조사관리 표를 CS 목록 규격과 역순 순번 계약으로 연결한다. */
+export function ExmnStandardDataTable<T extends Record<string, unknown>>({
+  rows,
+  headlist,
+  title,
+  total,
+  page,
+  pageSize,
+  onPageChange,
+  actions,
+  loading = false,
+  scrollMode = "none",
+  minTableWidth = "100%",
+  clickableHeadIds = [],
+  onCellClick,
+  onRowClick,
+  rowId,
+}: ExmnStandardDataTableProps<T>) {
+  const columns = useMemo<ColumnDef<T>[]>(
+    () =>
+      headlist.map((head) => ({
+        id: head.id,
+        accessorFn: (row) => row[head.id],
+        header: ROW_NUMBER_IDS.has(head.id) ? "순번" : head.title,
+        cell: ({ row, getValue }) => {
+          const value = ROW_NUMBER_IDS.has(head.id)
+            ? getStandardRowNumber({
+                total,
+                rowIndex: row.index,
+                pageIndex: page - 1,
+                pageSize,
+              })
+            : formatValue(getValue());
+          const clickable =
+            Boolean(onCellClick) && clickableHeadIds.includes(head.id);
+          return clickable ? (
+            <button
+              type="button"
+              className="hover:text-primary/80 w-full cursor-pointer text-primary underline underline-offset-4"
+              onClick={(event) => {
+                event.stopPropagation();
+                onCellClick?.(row.original, row.index, head.id);
+              }}
+            >
+              {value}
+            </button>
+          ) : (
+            value
+          );
+        },
+        meta: {
+          align:
+            head.align === "left" || head.align === "right"
+              ? head.align
+              : "center",
+        },
+      })),
+    [clickableHeadIds, headlist, onCellClick, page, pageSize, total],
+  );
+  const pagination: PaginationState = {
+    pageIndex: Math.max(page - 1, 0),
+    pageSize,
+  };
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { pagination },
+    rowCount: total,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row, index) => rowId?.(row, index) ?? String(index),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      if (next.pageIndex !== pagination.pageIndex) {
+        onPageChange(next.pageIndex + 1);
+      }
+    },
+  });
+
+  return (
+    <StandardDataTable
+      table={table}
+      title={title}
+      actions={actions}
+      loading={loading}
+      className={EXMN_TABLE_HEADER_CLASS}
+      scrollMode={scrollMode}
+      minTableWidth={minTableWidth}
+      onRowClick={
+        onRowClick ? (row) => onRowClick(row, rows.indexOf(row)) : undefined
+      }
+    />
+  );
+}
+
+export { EXMN_TABLE_HEADER_CLASS, EXMN_TABLE_HEADER_HEIGHT_REM };
+export type { ExmnStandardDataTableProps };
diff --git a/apps/sn/src/features/exmn/ui/ExmnStatusDetailPanel.tsx b/apps/sn/src/features/exmn/ui/ExmnStatusDetailPanel.tsx
index 59b4ac0ce..9e15265f7 100644
--- a/apps/sn/src/features/exmn/ui/ExmnStatusDetailPanel.tsx
+++ b/apps/sn/src/features/exmn/ui/ExmnStatusDetailPanel.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import LoadingOverlay from "@/components/ui/LoadingBar";
 import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
 import {
   Button,
@@ -10,8 +11,6 @@ import {
   TableHeader,
   TableRow,
 } from "@common/components/ui";
-import type { UiTableSort } from "@common/business_components/ui";
-import ListDiv from "@common/business_components/ui/list_div";
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
   downloadExmnSectionSummary,
@@ -23,38 +22,29 @@ import type {
   ExmnSectionSummaryRow,
 } from "../model/exmn-business-types";
 import type { ExmnDetailDefectType } from "../model/exmn-detail-table";
+import { EXMN_TABLE_HEADER_HEIGHT_REM } from "./ExmnStandardDataTable";
 
-const ACTION_BUTTON_CLASS =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white";
-const DOWNLOAD_BUTTON_CLASS =
-  "rounded-sm px-4 py-2 text-sm font-medium !text-white disabled:!text-white";
-
-// 목록 그리드와 같이 헤더 1행 + 본문 6행만 보이게 해 다음 행 일부가 노출되지 않게 한다.
-// 최초 화면의 본문 6행은 합계 1행 + 데이터 5행이며, 스크롤 후에는 데이터 6행이 온전히 보인다.
+// 상세 본문 행 높이는 유지하되 세로 이동은 CS 목록과 같이 브라우저 기본 스크롤에 맡긴다.
 const SUMMARY_GRID_ROW_HEIGHT_REM = 3.2;
-const SUMMARY_GRID_VISIBLE_BODY_ROW_COUNT = 6;
-const SUMMARY_GRID_MAX_HEIGHT = `${
-  SUMMARY_GRID_ROW_HEIGHT_REM * (SUMMARY_GRID_VISIBLE_BODY_ROW_COUNT + 1)
-}rem`;
 
 const PIPE_SUMMARY_TABLE_HEAD = [
-  { id: "rowNumber", title: "NO", widthPercent: 6, sortable: true },
-  { id: "trtdstNm", title: "처리분구", widthPercent: 18, sortable: true },
-  { id: "trgtPrlgText", title: "대상연장(m)", widthPercent: 13, sortable: true },
-  { id: "drvngDstncText", title: "주행거리(m)", widthPercent: 13, sortable: true },
-  { id: "wholeCountText", title: "총 이상항목(개소)", widthPercent: 15, sortable: true },
-  { id: "structuralCountText", title: "구조적결함(개소)", widthPercent: 14, sortable: true },
-  { id: "operationalCountText", title: "운영적결함(개소)", widthPercent: 14, sortable: true },
-  { id: "etcCountText", title: "기타", widthPercent: 7, sortable: true },
+  { id: "rowNumber", title: "순번", widthPercent: 6 },
+  { id: "trtdstNm", title: "처리분구", widthPercent: 18 },
+  { id: "trgtPrlgText", title: "대상연장(m)", widthPercent: 13 },
+  { id: "drvngDstncText", title: "주행거리(m)", widthPercent: 13 },
+  { id: "wholeCountText", title: "총 이상항목(개소)", widthPercent: 15 },
+  { id: "structuralCountText", title: "구조적결함(개소)", widthPercent: 14 },
+  { id: "operationalCountText", title: "운영적결함(개소)", widthPercent: 14 },
+  { id: "etcCountText", title: "기타", widthPercent: 7 },
 ];
 
 const MANHOLE_SUMMARY_TABLE_HEAD = [
-  { id: "rowNumber", title: "NO", widthPercent: 8, sortable: true },
-  { id: "trtdstNm", title: "처리분구", widthPercent: 28, sortable: true },
-  { id: "wholeCountText", title: "총 이상항목(개소)", widthPercent: 18, sortable: true },
-  { id: "structuralCountText", title: "구조적결함(개소)", widthPercent: 17, sortable: true },
-  { id: "operationalCountText", title: "운영적결함(개소)", widthPercent: 17, sortable: true },
-  { id: "etcCountText", title: "기타", widthPercent: 12, sortable: true },
+  { id: "rowNumber", title: "순번", widthPercent: 8 },
+  { id: "trtdstNm", title: "처리분구", widthPercent: 28 },
+  { id: "wholeCountText", title: "총 이상항목(개소)", widthPercent: 18 },
+  { id: "structuralCountText", title: "구조적결함(개소)", widthPercent: 17 },
+  { id: "operationalCountText", title: "운영적결함(개소)", widthPercent: 17 },
+  { id: "etcCountText", title: "기타", widthPercent: 12 },
 ];
 
 type Notice = { type: "info" | "error"; text: string } | null;
@@ -78,34 +68,6 @@ const saveBlob = (blob: Blob, fileName: string) => {
   URL.revokeObjectURL(objectUrl);
 };
 
-const getSummarySortValue = (row: DisplaySummaryRow, key: string) => {
-  const value = row[key];
-  if (key !== "trtdstNm") {
-    const numericValue = Number(String(value ?? "").replaceAll(",", ""));
-    if (Number.isFinite(numericValue)) return numericValue;
-  }
-  return String(value ?? "");
-};
-
-/** 합계 행을 제외한 처리분구별 상세 행만 현재 정렬 상태에 맞춰 정렬한다. */
-const sortSummaryRows = (
-  rows: DisplaySummaryRow[],
-  sort: UiTableSort | undefined,
-) => {
-  if (!sort) return rows;
-  return [...rows].sort((left, right) => {
-    const leftValue = getSummarySortValue(left, sort.key);
-    const rightValue = getSummarySortValue(right, sort.key);
-    const comparison = typeof leftValue === "number" && typeof rightValue === "number"
-      ? leftValue - rightValue
-      : String(leftValue).localeCompare(String(rightValue), "ko", {
-        numeric: true,
-        sensitivity: "base",
-      });
-    return sort.direction === "desc" ? comparison * -1 : comparison;
-  });
-};
-
 interface DisplaySummaryRow extends Record<string, string | number> {
   trtdstId: string;
   rowNumber: string | number;
@@ -119,9 +81,10 @@ interface DisplaySummaryRow extends Record<string, string | number> {
 }
 
 /** 동일 조사현황 화면에서 선택 사업의 관로·맨홀 처리분구 집계를 펼쳐 표시한다. */
-export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps) {
+export function ExmnStatusDetailPanel({
+  business,
+}: ExmnStatusDetailPanelProps) {
   const [jobType, setJobType] = useState<ExmnJobType>("PPL");
-  const [summarySort, setSummarySort] = useState<UiTableSort>();
   const [summaryRows, setSummaryRows] = useState<ExmnSectionSummaryRow[]>([]);
   /** 상세보기 팝업에 전달할 현재 선택 처리분구다. */
   const [selectedTrtdstId, setSelectedTrtdstId] = useState<string | null>(null);
@@ -132,13 +95,11 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
 
   useEffect(() => {
     setJobType("PPL");
-    setSummarySort(undefined);
     setSelectedTrtdstId(null);
     setNotice(null);
   }, [business?.exmnBizId]);
 
   useEffect(() => {
-    setSummarySort(undefined);
     setSelectedTrtdstId(null);
   }, [jobType]);
 
@@ -161,47 +122,65 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
       .catch((error: unknown) => {
         if (summaryRequestIdRef.current !== requestId) return;
         setSummaryRows([]);
-        setNotice({ type: "error", text: error instanceof Error ? error.message : "조사 상세현황 조회 중 오류가 발생했습니다." });
+        setNotice({
+          type: "error",
+          text:
+            error instanceof Error
+              ? error.message
+              : "조사 상세현황 조회 중 오류가 발생했습니다.",
+        });
       })
       .finally(() => {
         if (summaryRequestIdRef.current === requestId) setIsLoading(false);
       });
 
     return () => {
-      if (summaryRequestIdRef.current === requestId) summaryRequestIdRef.current += 1;
+      if (summaryRequestIdRef.current === requestId)
+        summaryRequestIdRef.current += 1;
     };
   }, [business, jobType]);
 
   const summaryTable = useMemo(() => {
-    const getCounts = (row: ExmnSectionSummaryRow) => jobType === "PPL"
-      ? {
-        whole: row.pplExmnWholAnmlyArtclCnt,
-        structural: row.pplExmnStrctDfcCnt,
-        operational: row.pplExmnOperDfcCnt,
-        etc: row.pplExmnEtcCnt,
-      }
-      : {
-        whole: row.mnhlExmnWholAnmlyArtclCnt,
-        structural: row.mnhlExmnStrctDfcCnt,
-        operational: row.mnhlExmnOperDfcCnt,
-        etc: row.mnhlExmnEtcCnt,
-      };
-    const totals = summaryRows.reduce((sum, row) => {
-      const counts = getCounts(row);
-      return {
-        trgtPrlg: sum.trgtPrlg + row.trgtPrlg,
-        drvngDstnc: sum.drvngDstnc + row.drvngDstnc,
-        whole: sum.whole + counts.whole,
-        structural: sum.structural + counts.structural,
-        operational: sum.operational + counts.operational,
-        etc: sum.etc + counts.etc,
-      };
-    }, { trgtPrlg: 0, drvngDstnc: 0, whole: 0, structural: 0, operational: 0, etc: 0 });
+    const getCounts = (row: ExmnSectionSummaryRow) =>
+      jobType === "PPL"
+        ? {
+            whole: row.pplExmnWholAnmlyArtclCnt,
+            structural: row.pplExmnStrctDfcCnt,
+            operational: row.pplExmnOperDfcCnt,
+            etc: row.pplExmnEtcCnt,
+          }
+        : {
+            whole: row.mnhlExmnWholAnmlyArtclCnt,
+            structural: row.mnhlExmnStrctDfcCnt,
+            operational: row.mnhlExmnOperDfcCnt,
+            etc: row.mnhlExmnEtcCnt,
+          };
+    const totals = summaryRows.reduce(
+      (sum, row) => {
+        const counts = getCounts(row);
+        return {
+          trgtPrlg: sum.trgtPrlg + row.trgtPrlg,
+          drvngDstnc: sum.drvngDstnc + row.drvngDstnc,
+          whole: sum.whole + counts.whole,
+          structural: sum.structural + counts.structural,
+          operational: sum.operational + counts.operational,
+          etc: sum.etc + counts.etc,
+        };
+      },
+      {
+        trgtPrlg: 0,
+        drvngDstnc: 0,
+        whole: 0,
+        structural: 0,
+        operational: 0,
+        etc: 0,
+      },
+    );
     const rows: DisplaySummaryRow[] = summaryRows.map((row, index) => {
       const counts = getCounts(row);
       return {
         trtdstId: row.trtdstId,
-        rowNumber: index + 1,
+        rowNumber: summaryRows.length - index,
         trtdstNm: row.trtdstNm,
         trgtPrlgText: formatNumber(row.trgtPrlg),
         drvngDstncText: formatNumber(row.drvngDstnc),
@@ -212,7 +191,7 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
       };
     });
     return {
-      rows: sortSummaryRows(rows, summarySort),
+      rows,
       totals: {
         trgtPrlgText: formatNumber(totals.trgtPrlg),
         drvngDstncText: formatNumber(totals.drvngDstnc),
@@ -222,24 +201,12 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
         etcCountText: formatNumber(totals.etc),
       } as Record<string, string>,
     };
-  }, [jobType, summaryRows, summarySort]);
+  }, [jobType, summaryRows]);
 
-  const summaryColumns = jobType === "PPL" ? PIPE_SUMMARY_TABLE_HEAD : MANHOLE_SUMMARY_TABLE_HEAD;
-  const selectedSummaryRow = summaryTable.rows.find(
-    (row) => row.trtdstId === selectedTrtdstId,
-  ) ?? null;
-
-  /** 상세현황 헤더를 오름차순·내림차순·기본 순서로 순환한다. */
-  const handleSummarySort = (column: (typeof summaryColumns)[number]) => {
-    const key = column.id;
-    setSummarySort((current) => (
-      current?.key !== key
-        ? { key, direction: "asc" }
-        : current.direction === "asc"
-          ? { key, direction: "desc" }
-          : undefined
-    ));
-  };
+  const summaryColumns =
+    jobType === "PPL" ? PIPE_SUMMARY_TABLE_HEAD : MANHOLE_SUMMARY_TABLE_HEAD;
+  const selectedSummaryRow =
+    summaryTable.rows.find((row) => row.trtdstId === selectedTrtdstId) ?? null;
 
   /** 선택 사업·처리분구와 현재 조사유형을 하수관망도 초기 조회 계약으로 전달한다. */
   const openExmnMap = () => {
@@ -252,7 +219,8 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
       trtdstId: selectedSummaryRow.trtdstId,
       trtdstNm: selectedSummaryRow.trtdstNm,
     });
-    if (business.bizCycl != null) query.set("bizCycl", String(business.bizCycl));
+    if (business.bizCycl != null)
+      query.set("bizCycl", String(business.bizCycl));
     window.location.assign(`/map?${query.toString()}`);
   };
 
@@ -260,7 +228,10 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
   const handleSummaryDownload = async () => {
     if (!business || summaryTable.rows.length === 0 || isDownloading) {
       if (summaryTable.rows.length === 0) {
-        setNotice({ type: "info", text: "다운로드할 조사 상세현황 데이터가 없습니다." });
+        setNotice({
+          type: "info",
+          text: "다운로드할 조사 상세현황 데이터가 없습니다.",
+        });
       }
       return;
     }
@@ -269,16 +240,23 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
     setNotice(null);
     try {
       const jobTypeLabel = jobType === "PPL" ? "관로조사" : "맨홀조사";
-      const fileName = `${business.bizNm}_${jobTypeLabel}_조사상세현황.xlsx`
-        .replace(/[\\/:*?"<>|]/g, "_");
-      const blob = await downloadExmnSectionSummary(business.exmnBizId, jobType);
+      const fileName =
+        `${business.bizNm}_${jobTypeLabel}_조사상세현황.xlsx`.replace(
+          /[\\/:*?"<>|]/g,
+          "_",
+        );
+      const blob = await downloadExmnSectionSummary(
+        business.exmnBizId,
+        jobType,
+      );
       saveBlob(blob, fileName);
     } catch (error) {
       setNotice({
         type: "error",
-        text: error instanceof Error
-          ? error.message
-          : "조사 상세현황 다운로드 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "조사 상세현황 다운로드 중 오류가 발생했습니다.",
       });
     } finally {
       setIsDownloading(false);
@@ -331,7 +309,8 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
   if (!business) return null;
 
   return (
-    <ListDiv className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden">
+    <section className="card card-border mt-4 !p-0">
+      <LoadingOverlay isLoading={isLoading} />
       <div className="card-header flex min-h-[5.2rem] flex-wrap items-center gap-3">
         <h3 className="mr-3 text-2xl font-medium">조사 상세현황</h3>
         <div
@@ -340,18 +319,21 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
           aria-busy={isLoading}
           className="flex items-center gap-1"
         >
-          {([
-            { value: "PPL", label: "관로조사" },
-            { value: "MNHL", label: "맨홀조사" },
-          ] as const).map((tab) => (
+          {(
+            [
+              { value: "PPL", label: "관로조사" },
+              { value: "MNHL", label: "맨홀조사" },
+            ] as const
+          ).map((tab) => (
             <button
               key={tab.value}
               type="button"
               role="tab"
               aria-selected={jobType === tab.value}
-              className={`inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md border text-[1.4rem] font-semibold transition-colors ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${jobType === tab.value
-                ? "border-primary bg-primary text-white"
-                : "border-border bg-background text-muted-foreground hover:bg-accent"
+              className={`inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md border text-[1.4rem] font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+                jobType === tab.value
+                  ? "border-primary bg-primary text-primary-foreground"
+                  : "border-border bg-background text-muted-foreground hover:bg-accent"
               }`}
               style={{ width: "8rem", height: "3.2rem" }}
               onClick={() => handleJobTypeChange(tab.value)}
@@ -362,17 +344,28 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
         </div>
         <div className="ml-auto flex items-center gap-2">
           <Button
-            className={ACTION_BUTTON_CLASS}
-            size="sm"
+            color="primary"
+            disabled={
+              isLoading || isDownloading || summaryTable.rows.length === 0
+            }
+            onClick={() => void handleSummaryDownload()}
+          >
+            {isDownloading ? "엑셀다운로드 중..." : "엑셀다운로드"}
+          </Button>
+          <Button
+            color="white"
             disabled={!selectedSummaryRow}
-            title={selectedSummaryRow ? `${selectedSummaryRow.trtdstNm} 상세보기` : "처리분구 행을 먼저 선택해주세요."}
+            title={
+              selectedSummaryRow
+                ? `${selectedSummaryRow.trtdstNm} 상세보기`
+                : "처리분구 행을 먼저 선택해주세요."
+            }
             onClick={() => openSurveyDetailPopup()}
           >
             상세보기
           </Button>
           <Button
-            className={ACTION_BUTTON_CLASS}
-            size="sm"
+            color="white"
             disabled={!selectedSummaryRow}
             title={
               selectedSummaryRow
@@ -383,108 +376,57 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
           >
             지도보기
           </Button>
-          <Button
-            color="green"
-            className={DOWNLOAD_BUTTON_CLASS}
-            size="sm"
-            disabled={isLoading || isDownloading || summaryTable.rows.length === 0}
-            onClick={() => void handleSummaryDownload()}
-          >
-            {isDownloading ? "다운로드 중..." : "다운로드"}
-          </Button>
         </div>
       </div>
 
       {notice && (
-        <div role="alert" className={`mx-4 mt-3 rounded border px-4 py-3 text-sm ${notice.type === "error" ? "border-red-200 bg-red-50 text-red-700" : "border-blue-200 bg-blue-50 text-blue-700"}`}>{notice.text}</div>
+        <div
+          role="alert"
+          className={`mx-4 mt-3 rounded border px-4 py-3 text-sm ${notice.type === "error" ? "border-red-200 bg-red-50 text-red-700" : "border-primary bg-primary-transparent text-primary"}`}
+        >
+          {notice.text}
+        </div>
       )}
 
-      <div className="flex min-h-0 flex-1 flex-col pb-0 pt-3">
-        <div className="mx-[1.2rem] mb-2 flex items-center gap-2">
-          <h4 className="text-lg font-semibold text-gray-700">{jobType === "PPL" ? "관로조사" : "맨홀조사"} 종합집계표</h4>
-          {isLoading && <span role="status" className="text-sm text-muted-foreground">조회 중...</span>}
-        </div>
-        <div className="relative mx-[1.2rem] mb-[1.2rem] min-h-0 overflow-hidden">
-          <div
-            className="overflow-x-hidden overflow-y-auto"
-            style={{ maxHeight: SUMMARY_GRID_MAX_HEIGHT, scrollbarGutter: "stable" }}
-          >
+      <div className="pb-0 pt-3">
+        <div className="relative mx-[1.2rem] mb-[1.2rem] min-w-0 overflow-hidden">
+          <div className="overflow-x-auto overflow-y-visible">
             <div
               className="card !m-0"
               style={{ paddingTop: 0, paddingBottom: 0 }}
             >
-              <Table variant="secondary" className="table-fixed">
+              <Table variant="default" className="table-fixed">
                 <colgroup>
                   {summaryColumns.map((column) => (
-                    <col key={column.id} style={{ width: `${column.widthPercent}%` }} />
+                    <col
+                      key={column.id}
+                      style={{ width: `${column.widthPercent}%` }}
+                    />
                   ))}
                 </colgroup>
                 <TableHeader
                   className="font-bold"
                   style={{ position: "static", zIndex: "auto" }}
                 >
-                  <TableRow style={{ height: `${SUMMARY_GRID_ROW_HEIGHT_REM}rem` }}>
-                    {summaryColumns.map((column) => {
-                      const direction = summarySort?.key === column.id
-                        ? summarySort.direction
-                        : undefined;
-                      return (
-                        <TableHead
-                          key={column.id}
-                          className="sticky top-0 z-20 bg-[#eaf3fb] text-center !py-[0.8rem]"
-                          style={{
-                            borderTopWidth: 0,
-                            boxShadow: "inset 0 1px 0 var(--border)",
-                          }}
-                          aria-sort={
-                            direction === "asc"
-                              ? "ascending"
-                              : direction === "desc"
-                                ? "descending"
-                                : "none"
-                          }
-                        >
-                          <button
-                            type="button"
-                            className="inline-flex w-full items-center justify-center gap-1.5"
-                            aria-label={`${column.title} 정렬`}
-                            onClick={() => handleSummarySort(column)}
-                          >
-                            <span>{column.title}</span>
-                            {direction === "asc" ? (
-                              <span
-                                className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
-                                aria-hidden="true"
-                              >
-                                ▲
-                              </span>
-                            ) : direction === "desc" ? (
-                              <span
-                                className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
-                                aria-hidden="true"
-                              >
-                                ▼
-                              </span>
-                            ) : (
-                              <span
-                                className="inline-flex flex-col items-center gap-px text-[6px] leading-none text-[#475569]"
-                                aria-hidden="true"
-                              >
-                                <span>▲</span>
-                                <span>▼</span>
-                              </span>
-                            )}
-                          </button>
-                        </TableHead>
-                      );
-                    })}
+                  <TableRow
+                    style={{ height: `${EXMN_TABLE_HEADER_HEIGHT_REM}rem` }}
+                  >
+                    {summaryColumns.map((column) => (
+                      <TableHead
+                        key={column.id}
+                        className="sticky top-0 z-20 !py-[1.2rem] text-center"
+                        style={{ height: `${EXMN_TABLE_HEADER_HEIGHT_REM}rem` }}
+                      >
+                        {column.title}
+                      </TableHead>
+                    ))}
                   </TableRow>
                 </TableHeader>
                 <TableBody className="text-center">
                   {summaryTable.rows.length > 0 ? (
                     <>
                       <TableRow
-                        className="text-gray-700"
+                        className="text-label"
                         style={{
                           height: `${SUMMARY_GRID_ROW_HEIGHT_REM}rem`,
                           backgroundColor: "#d2deef",
@@ -514,7 +456,9 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
                             key={row.trtdstId}
                             data-state={selected ? "selected" : undefined}
                             className="cursor-pointer"
-                            style={{ height: `${SUMMARY_GRID_ROW_HEIGHT_REM}rem` }}
+                            style={{
+                              height: `${SUMMARY_GRID_ROW_HEIGHT_REM}rem`,
+                            }}
                             onClick={() => handleSummaryRowSelect(row)}
                           >
                             {summaryColumns.map((column) => {
@@ -526,8 +470,11 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
                                     : null;
                               const defectCount = defectType
                                 ? Number(
-                                  String(row[column.id] ?? "0").replaceAll(",", ""),
-                                )
+                                    String(row[column.id] ?? "0").replaceAll(
+                                      ",",
+                                      "",
+                                    ),
+                                  )
                                 : 0;
                               const opensFilteredDetail =
                                 defectType !== null && defectCount > 0;
@@ -546,17 +493,21 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
                                     type="button"
                                     className={`flex w-full cursor-pointer items-center justify-center px-2 py-[0.8rem] text-[1.3rem] ${
                                       opensFilteredDetail
-                                        ? "font-semibold text-blue-600 underline underline-offset-4 hover:text-blue-800"
+                                        ? "hover:text-primary/80 font-semibold text-primary underline underline-offset-4"
                                         : selected
                                           ? "font-bold"
                                           : "font-normal"
                                     }`}
-                                    style={{ minHeight: `${SUMMARY_GRID_ROW_HEIGHT_REM}rem` }}
+                                    style={{
+                                      minHeight: `${SUMMARY_GRID_ROW_HEIGHT_REM}rem`,
+                                    }}
                                     aria-label={
                                       opensFilteredDetail
                                         ? `${row.trtdstNm} ${
-                                          defectType === "STRUCTURAL" ? "구조적" : "운영적"
-                                        } 결함 상세보기`
+                                            defectType === "STRUCTURAL"
+                                              ? "구조적"
+                                              : "운영적"
+                                          } 결함 상세보기`
                                         : undefined
                                     }
                                     title={
@@ -584,9 +535,9 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
                   ) : (
                     <TableRow>
                       <TableCell
-                      colSpan={summaryColumns.length}
-                      className="h-24 text-center text-gray-500"
-                      style={{ borderBottomWidth: 0 }}
+                        colSpan={summaryColumns.length}
+                        className="h-24 text-center text-muted-foreground"
+                        style={{ borderBottomWidth: 0 }}
                       >
                         조회된 결과가 없습니다.
                       </TableCell>
@@ -596,18 +547,8 @@ export function ExmnStatusDetailPanel({ business }: ExmnStatusDetailPanelProps)
               </Table>
             </div>
           </div>
-          <span
-            aria-hidden="true"
-            className="pointer-events-none absolute z-30"
-            style={{
-              right: "calc(0.6rem + 17px)",
-              bottom: 0,
-              left: "0.6rem",
-              borderTop: "1px solid var(--border)",
-            }}
-          />
         </div>
       </div>
-    </ListDiv>
+    </section>
   );
 }
diff --git a/apps/sn/src/features/exmn/ui/ExmnSurveyDetailPopupPage.tsx b/apps/sn/src/features/exmn/ui/ExmnSurveyDetailPopupPage.tsx
index fe438ffaf..03ea221c0 100644
--- a/apps/sn/src/features/exmn/ui/ExmnSurveyDetailPopupPage.tsx
+++ b/apps/sn/src/features/exmn/ui/ExmnSurveyDetailPopupPage.tsx
@@ -3,9 +3,19 @@
 import type { UIEvent } from "react";
 import { useEffect, useMemo, useState } from "react";
 
-import type { UiTableSort } from "@common/business_components/ui/table";
-import { Button, Input } from "@common/components/ui";
+import { StandardPopupLayout } from "@common/business_components";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
 import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
+import LoadingOverlay from "@/components/ui/LoadingBar";
 
 import {
   getExmnFacilityDetails,
@@ -116,22 +126,6 @@ const getFixedCellValue = (
 };
 
 /** 고정 열의 숫자·한글·번호 혼합 값을 공통 그리드와 같은 방향으로 비교한다. */
-const compareFixedColumnValue = (
-  left: ExmnSurveyDetailRow,
-  right: ExmnSurveyDetailRow,
-  columnId: ExmnDetailFixedColumnId,
-) => {
-  const leftValue = getFixedCellValue(left, columnId);
-  const rightValue = getFixedCellValue(right, columnId);
-  if (typeof leftValue === "number" && typeof rightValue === "number") {
-    return leftValue - rightValue;
-  }
-  return String(leftValue ?? "").localeCompare(String(rightValue ?? ""), "ko-KR", {
-    numeric: true,
-    sensitivity: "base",
-  });
-};
-
 /** 현재 화면에 노출하는 결함 열만 합산해 행의 대·중·소 합계를 계산한다. */
 const getVisibleAnomalyTotals = (
   row: ExmnSurveyDetailRow,
@@ -155,24 +149,27 @@ export function ExmnSurveyDetailPopupPage({
   defectType,
 }: ExmnSurveyDetailPopupPageProps) {
   /** 현재 조사유형에 실제 결과가 등록된 처리분구 목록과 팝업 조회 대상이다. */
-  const [districtOptions, setDistrictOptions] = useState<ExmnSectionSummaryRow[]>([]);
+  const [districtOptions, setDistrictOptions] = useState<
+    ExmnSectionSummaryRow[]
+  >([]);
   const [selectedTrtdstId, setSelectedTrtdstId] = useState(trtdstId);
   /** 관로 상세보기의 전체 관로 집계와 본단위구간 등급표를 전환하는 표시 모드다. */
   const [detailMode, setDetailMode] = useState<ExmnPplDetailMode>("PIPE");
   /** 관로·맨홀 번호 조회 입력값과 실제 적용값을 분리해 조회 버튼 동작을 재현한다. */
   const [detailNumberKeyword, setDetailNumberKeyword] = useState("");
-  const [appliedDetailNumberKeyword, setAppliedDetailNumberKeyword] = useState("");
+  const [appliedDetailNumberKeyword, setAppliedDetailNumberKeyword] =
+    useState("");
   /** 같은 검색어로 다시 조회해도 서버 요청을 새로 실행하기 위한 순번이다. */
   const [searchRequestSeq, setSearchRequestSeq] = useState(0);
-  /** 고정 열 헤더의 오름차순·내림차순·기본 정렬 상태다. */
-  const [sort, setSort] = useState<UiTableSort>();
   /** 가로 스크롤 위치를 기준으로 요약 라벨과 고정 열 경계선 위치를 함께 보정한다. */
   const [tableScrollLeft, setTableScrollLeft] = useState(0);
   /** 다운로드 미연결 등 현재 팝업 안내 메시지를 표시한다. */
   const [notice, setNotice] = useState<Notice>(null);
   /** 실제 DB 상세조회 결과와 요청 상태다. */
   const [actualRows, setActualRows] = useState<ExmnSurveyDetailRow[]>([]);
-  const [actualUnitRows, setActualUnitRows] = useState<ExmnPplUnitDetailRow[]>([]);
+  const [actualUnitRows, setActualUnitRows] = useState<ExmnPplUnitDetailRow[]>(
+    [],
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const definition = EXMN_DETAIL_TABLE_DEFINITIONS[jobType];
@@ -180,15 +177,17 @@ export function ExmnSurveyDetailPopupPage({
   const selectedDistrict = districtOptions.find(
     (district) => district.trtdstId === selectedTrtdstId,
   );
-  const selectedTrtdstNm = selectedDistrict?.trtdstNm
-    ?? (selectedTrtdstId === trtdstId ? trtdstNm : "");
+  const selectedTrtdstNm =
+    selectedDistrict?.trtdstNm ??
+    (selectedTrtdstId === trtdstId ? trtdstNm : "");
   /** 관로·맨홀 모두 확정 계산된 구조·운영 내부결함 등급을 공통 고정 열로 표시한다. */
   const fixedColumns = FIXED_COLUMNS;
   const summaryLabelColumnCount = 7;
   const fixedInfoScrollThreshold = useMemo(
-    () => fixedColumns
-      .slice(STICKY_COLUMN_COUNT, summaryLabelColumnCount)
-      .reduce((sum, column) => sum + column.width, 0),
+    () =>
+      fixedColumns
+        .slice(STICKY_COLUMN_COUNT, summaryLabelColumnCount)
+        .reduce((sum, column) => sum + column.width, 0),
     [fixedColumns, summaryLabelColumnCount],
   );
   const summaryLabelInitialOffset = useMemo(() => {
@@ -206,9 +205,12 @@ export function ExmnSurveyDetailPopupPage({
   const isDefectTypeView = defectType !== "ALL";
   /** 건수 링크 진입 시 선택한 구조·운영 그룹의 결함 열만 표에 남긴다. */
   const visibleDefectColumns = useMemo(
-    () => defectType === "ALL"
-      ? definition.defectColumns
-      : definition.defectColumns.filter((column) => column.group === defectType),
+    () =>
+      defectType === "ALL"
+        ? definition.defectColumns
+        : definition.defectColumns.filter(
+            (column) => column.group === defectType,
+          ),
     [defectType, definition],
   );
   /** 분류별 상세에서는 선택 결함이 한 건 이상 존재하는 시설 행만 표시한다. */
@@ -224,7 +226,9 @@ export function ExmnSurveyDetailPopupPage({
   }, [actualRows, defectType, visibleDefectColumns]);
   /** 조회 버튼으로 확정한 번호 조건을 현재 상세 행에 적용한다. */
   const filteredRows = useMemo(() => {
-    const normalizedKeyword = appliedDetailNumberKeyword.trim().toLocaleLowerCase("ko-KR");
+    const normalizedKeyword = appliedDetailNumberKeyword
+      .trim()
+      .toLocaleLowerCase("ko-KR");
     if (!normalizedKeyword) return scopedRows;
     return scopedRows.filter((row) =>
       row.pipeNo.toLocaleLowerCase("ko-KR").includes(normalizedKeyword),
@@ -233,21 +237,15 @@ export function ExmnSurveyDetailPopupPage({
   /** 본단위구간 최초 진입은 전체를 표시하고, 관로번호가 있으면 부분 일치로 좁힌다. */
   const unitRows = useMemo(() => {
     if (!isUnitMode) return [];
-    const normalizedKeyword = appliedDetailNumberKeyword.trim().toLocaleLowerCase("ko-KR");
+    const normalizedKeyword = appliedDetailNumberKeyword
+      .trim()
+      .toLocaleLowerCase("ko-KR");
     if (!normalizedKeyword) return actualUnitRows;
-    return actualUnitRows.filter(
-      (row) => row.pipeNo.toLocaleLowerCase("ko-KR").includes(normalizedKeyword),
+    return actualUnitRows.filter((row) =>
+      row.pipeNo.toLocaleLowerCase("ko-KR").includes(normalizedKeyword),
     );
   }, [actualUnitRows, appliedDetailNumberKeyword, isUnitMode]);
-  /** 보고서번호부터 주행거리까지의 고정 열에 선택 정렬을 적용한다. */
-  const rows = useMemo(() => {
-    if (!sort) return filteredRows;
-    const columnId = sort.key as ExmnDetailFixedColumnId;
-    const direction = sort.direction === "asc" ? 1 : -1;
-    return [...filteredRows].sort(
-      (left, right) => compareFixedColumnValue(left, right, columnId) * direction,
-    );
-  }, [filteredRows, sort]);
+  const rows = filteredRows;
 
   /** 팝업 문서 자체 스크롤을 잠그고 넓은 표의 스크롤은 표 영역에서만 처리한다. */
   useEffect(() => {
@@ -269,7 +267,6 @@ export function ExmnSurveyDetailPopupPage({
     setDetailMode("PIPE");
     setDetailNumberKeyword("");
     setAppliedDetailNumberKeyword("");
-    setSort(undefined);
     setNotice(null);
   }, [defectType, jobType]);
 
@@ -284,7 +281,7 @@ export function ExmnSurveyDetailPopupPage({
         setSelectedTrtdstId(
           districts.some((district) => district.trtdstId === trtdstId)
             ? trtdstId
-            : districts[0]?.trtdstId ?? trtdstId,
+            : (districts[0]?.trtdstId ?? trtdstId),
         );
       })
       .catch(() => {
@@ -393,58 +390,48 @@ export function ExmnSurveyDetailPopupPage({
     setNotice(null);
   };
 
-  /** 모드를 바꾸면 이전 표의 관로번호·정렬·안내 상태를 초기화한다. */
+  /** 모드를 바꾸면 이전 표의 관로번호·안내 상태를 초기화한다. */
   const handleDetailModeChange = (nextMode: ExmnPplDetailMode) => {
     if (nextMode === detailMode) return;
     setDetailMode(nextMode);
     setDetailNumberKeyword("");
     setAppliedDetailNumberKeyword("");
-    setSort(undefined);
     setTableScrollLeft(0);
     setNotice(null);
   };
 
-  /** 공통 UiTable 규칙대로 asc, desc, 기본 순서로 고정 열 정렬을 순환한다. */
-  const handleSortChange = (columnId: ExmnDetailFixedColumnId) => {
-    if (sort?.key !== columnId) {
-      setSort({ key: columnId, direction: "asc" });
-      return;
-    }
-    if (sort.direction === "asc") {
-      setSort({ key: columnId, direction: "desc" });
-      return;
-    }
-    setSort(undefined);
-  };
-
   /** 규격 열 경계가 사라지는 가로 스크롤 지점부터 고정 열 구분선을 활성화한다. */
   const handleTableScroll = (event: UIEvent<HTMLDivElement>) => {
     setTableScrollLeft(event.currentTarget.scrollLeft);
   };
 
-  const showStickyDivider = fixedInfoScrollThreshold === 0
-    ? tableScrollLeft > 0
-    : tableScrollLeft >= fixedInfoScrollThreshold;
+  const showStickyDivider =
+    fixedInfoScrollThreshold === 0
+      ? tableScrollLeft > 0
+      : tableScrollLeft >= fixedInfoScrollThreshold;
   const summaryLabelOffset = Math.max(
     0,
     summaryLabelInitialOffset - tableScrollLeft,
   );
 
   const totals = useMemo(
-    () => rows.reduce(
-      (sum, row) => ({
-        extensionM: sum.extensionM + row.extensionM,
-        drivingDistanceM: sum.drivingDistanceM + row.drivingDistanceM,
-        structuralGrade: sum.structuralGrade + Number(row.structuralGrade || 0),
-        operationalGrade: sum.operationalGrade + Number(row.operationalGrade || 0),
-      }),
-      {
-        extensionM: 0,
-        drivingDistanceM: 0,
-        structuralGrade: 0,
-        operationalGrade: 0,
-      },
-    ),
+    () =>
+      rows.reduce(
+        (sum, row) => ({
+          extensionM: sum.extensionM + row.extensionM,
+          drivingDistanceM: sum.drivingDistanceM + row.drivingDistanceM,
+          structuralGrade:
+            sum.structuralGrade + Number(row.structuralGrade || 0),
+          operationalGrade:
+            sum.operationalGrade + Number(row.operationalGrade || 0),
+        }),
+        {
+          extensionM: 0,
+          drivingDistanceM: 0,
+          structuralGrade: 0,
+          operationalGrade: 0,
+        },
+      ),
     [rows],
   );
 
@@ -460,10 +447,7 @@ export function ExmnSurveyDetailPopupPage({
   const defectSummary = useMemo(() => {
     const anomalySubtotals = { L: 0, M: 0, S: 0 };
     const defectSubtotals = Object.fromEntries(
-      visibleDefectColumns.map((column) => [
-        column.code,
-        { L: 0, M: 0, S: 0 },
-      ]),
+      visibleDefectColumns.map((column) => [column.code, { L: 0, M: 0, S: 0 }]),
     ) as Record<string, Record<ExmnDetailSeverity, number>>;
 
     rows.forEach((row) => {
@@ -491,9 +475,7 @@ export function ExmnSurveyDetailPopupPage({
       defectTotals: Object.fromEntries(
         visibleDefectColumns.map((column) => [
           column.code,
-          sumSeverities(
-            defectSubtotals[column.code] ?? { L: 0, M: 0, S: 0 },
-          ),
+          sumSeverities(defectSubtotals[column.code] ?? { L: 0, M: 0, S: 0 }),
         ]),
       ) as Record<string, number>,
     };
@@ -502,14 +484,18 @@ export function ExmnSurveyDetailPopupPage({
   /** 현재 화면에 표시된 관로·맨홀 상세 결과를 한글 헤더 엑셀로 내려받는다. */
   const handleDownload = async () => {
     const downloadDate = new Date().toISOString().slice(0, 10);
-    const safeFilePrefix = `${selectedTrtdstNm}_${definition.defectGroupTitle}조사_${
-      isUnitMode ? "본단위등급표" : defectTypeLabel
-    }`.replace(/[\\/:*?"<>|]/g, "_");
+    const safeFilePrefix =
+      `${selectedTrtdstNm}_${definition.defectGroupTitle}조사_${
+        isUnitMode ? "본단위등급표" : defectTypeLabel
+      }`.replace(/[\\/:*?"<>|]/g, "_");
 
     try {
       if (isUnitMode) {
         if (unitRows.length === 0) {
-          setNotice({ type: "info", text: "다운로드할 본단위구간 데이터가 없습니다." });
+          setNotice({
+            type: "info",
+            text: "다운로드할 본단위구간 데이터가 없습니다.",
+          });
           return;
         }
 
@@ -557,7 +543,10 @@ export function ExmnSurveyDetailPopupPage({
       }
 
       if (rows.length === 0) {
-        setNotice({ type: "info", text: "다운로드할 상세현황 데이터가 없습니다." });
+        setNotice({
+          type: "info",
+          text: "다운로드할 상세현황 데이터가 없습니다.",
+        });
         return;
       }
 
@@ -588,36 +577,41 @@ export function ExmnSurveyDetailPopupPage({
         });
       });
 
-      const detailDownloadRows: Record<string, string | number>[] = rows.map((row) => {
-        const anomalyTotals = getVisibleAnomalyTotals(row, visibleDefectColumns);
-        const result: Record<string, string | number> = {
-          reportNo: row.reportNo,
-          pipeNo: row.pipeNo,
-          upstreamManhole: row.upstreamManhole,
-          downstreamManhole: row.downstreamManhole,
-          drainageType: row.drainageTypeName?.trim() || row.drainageType,
-          pipeType: row.pipeTypeName?.trim() || row.pipeType,
-          specification: row.specification,
-          extensionM: row.extensionM,
-          drivingDistanceM: row.drivingDistanceM,
-        };
-        Object.assign(result, {
-          structuralGrade: row.structuralGrade,
-          operationalGrade: row.operationalGrade,
-        });
-        Object.assign(result, {
-          anomalyL: anomalyTotals.L,
-          anomalyM: anomalyTotals.M,
-          anomalyS: anomalyTotals.S,
-        });
-        visibleDefectColumns.forEach((column) => {
-          EXMN_DETAIL_SEVERITIES.forEach((severity) => {
-            result[`${column.code}_${severity}`] =
-              row.defectCounts[column.code]?.[severity] ?? 0;
+      const detailDownloadRows: Record<string, string | number>[] = rows.map(
+        (row) => {
+          const anomalyTotals = getVisibleAnomalyTotals(
+            row,
+            visibleDefectColumns,
+          );
+          const result: Record<string, string | number> = {
+            reportNo: row.reportNo,
+            pipeNo: row.pipeNo,
+            upstreamManhole: row.upstreamManhole,
+            downstreamManhole: row.downstreamManhole,
+            drainageType: row.drainageTypeName?.trim() || row.drainageType,
+            pipeType: row.pipeTypeName?.trim() || row.pipeType,
+            specification: row.specification,
+            extensionM: row.extensionM,
+            drivingDistanceM: row.drivingDistanceM,
+          };
+          Object.assign(result, {
+            structuralGrade: row.structuralGrade,
+            operationalGrade: row.operationalGrade,
           });
-        });
-        return result;
-      });
+          Object.assign(result, {
+            anomalyL: anomalyTotals.L,
+            anomalyM: anomalyTotals.M,
+            anomalyS: anomalyTotals.S,
+          });
+          visibleDefectColumns.forEach((column) => {
+            EXMN_DETAIL_SEVERITIES.forEach((severity) => {
+              result[`${column.code}_${severity}`] =
+                row.defectCounts[column.code]?.[severity] ?? 0;
+            });
+          });
+          return result;
+        },
+      );
       const subtotalRow: Record<string, string | number> = {
         reportNo: "소계",
         pipeNo: "",
@@ -672,7 +666,9 @@ export function ExmnSurveyDetailPopupPage({
 
       const subtotalExcelRow = rows.length + 2;
       const totalExcelRow = rows.length + 3;
-      const summaryLabelLastColumn = getExcelColumnName(summaryLabelColumnCount);
+      const summaryLabelLastColumn = getExcelColumnName(
+        summaryLabelColumnCount,
+      );
       const mergeRanges = [
         `A${subtotalExcelRow}:${summaryLabelLastColumn}${subtotalExcelRow}`,
         `A${totalExcelRow}:${summaryLabelLastColumn}${totalExcelRow}`,
@@ -683,9 +679,9 @@ export function ExmnSurveyDetailPopupPage({
         groupStartColumn += EXMN_DETAIL_SEVERITIES.length
       ) {
         mergeRanges.push(
-          `${getExcelColumnName(groupStartColumn)}${totalExcelRow}:${
-            getExcelColumnName(groupStartColumn + EXMN_DETAIL_SEVERITIES.length - 1)
-          }${totalExcelRow}`,
+          `${getExcelColumnName(groupStartColumn)}${totalExcelRow}:${getExcelColumnName(
+            groupStartColumn + EXMN_DETAIL_SEVERITIES.length - 1,
+          )}${totalExcelRow}`,
         );
       }
 
@@ -703,18 +699,20 @@ export function ExmnSurveyDetailPopupPage({
       console.error("조사 상세현황 엑셀 다운로드 오류:", error);
       setNotice({
         type: "info",
-        text: error instanceof Error
-          ? error.message
-          : "엑셀 다운로드 중 오류가 발생했습니다.",
+        text:
+          error instanceof Error
+            ? error.message
+            : "엑셀 다운로드 중 오류가 발생했습니다.",
       });
     }
   };
 
   const tableWidth = useMemo(
-    () => fixedColumns.reduce((sum, column) => sum + column.width, 0)
-      + (visibleDefectColumns.length + 1)
-        * EXMN_DETAIL_SEVERITIES.length
-        * SEVERITY_COLUMN_WIDTH,
+    () =>
+      fixedColumns.reduce((sum, column) => sum + column.width, 0) +
+      (visibleDefectColumns.length + 1) *
+        EXMN_DETAIL_SEVERITIES.length *
+        SEVERITY_COLUMN_WIDTH,
     [fixedColumns, visibleDefectColumns.length],
   );
   /** 본단위구간 요약은 조회된 한 관로의 단위 수와 상태·결함 기록 수를 사용한다. */
@@ -732,141 +730,147 @@ export function ExmnSurveyDetailPopupPage({
     : defectType === "ALL"
       ? `${selectedTrtdstNm} ${definition.defectGroupTitle}조사 집계표`
       : `${selectedTrtdstNm} ${definition.defectGroupTitle}조사 ${defectTypeLabel} 집계표`;
-  const visibleDefectGroupTitle = defectType === "ALL"
-    ? definition.defectGroupTitle
-    : `${definition.defectGroupTitle} ${defectTypeLabel}`;
+  const visibleDefectGroupTitle =
+    defectType === "ALL"
+      ? definition.defectGroupTitle
+      : `${definition.defectGroupTitle} ${defectTypeLabel}`;
 
   return (
-    <main className="sn-popup-page">
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">{popupTitle}</h1>
-      </header>
-
+    <StandardPopupLayout
+      title={popupTitle}
+      showDefaultCancelAction={false}
+      actions={
+        <>
+          <Button
+            type="button"
+            color="primary"
+            onClick={() => void handleDownload()}
+          >
+            엑셀다운로드
+          </Button>
+          <Button type="button" color="white" onClick={() => window.close()}>
+            취소
+          </Button>
+        </>
+      }
+      bodyClassName="flex flex-col overflow-hidden"
+    >
+      <LoadingOverlay isLoading={isLoading} />
       {notice && (
-        <div role="status" className="sn-popup-success-bar shrink-0 text-primary">
+        <div
+          role="status"
+          className="border-primary/20 mb-3 shrink-0 rounded-sm border bg-secondary px-4 py-2 text-[1.05rem] text-primary"
+        >
           {notice.text}
         </div>
       )}
 
-      <section className="sn-popup-section overflow-y-hidden">
+      <section className="flex min-h-0 flex-1 flex-col overflow-hidden">
         {!isDefectTypeView && (
-          <div className="flex flex-wrap items-end justify-between gap-4 border-b border-slate-200 bg-slate-50 pb-4">
-          <div className="flex flex-wrap items-end gap-3">
-            <label className="sn-popup-field" style={{ width: "180px" }}>
-              <div className="sn-popup-field-label">처리분구</div>
-              <select
-                className="sn-popup-input !text-[1.1rem]"
-                value={selectedTrtdstId}
-                aria-label="처리분구"
-                onChange={(event) => {
-                  setSelectedTrtdstId(event.target.value);
-                  setActualRows([]);
-                  setActualUnitRows([]);
-                  setDetailNumberKeyword("");
-                  setAppliedDetailNumberKeyword("");
-                  setSort(undefined);
-                  setNotice(null);
-                }}
-              >
-                {districtOptions.length > 0 ? (
-                  districtOptions.map((district) => (
-                    <option key={district.trtdstId} value={district.trtdstId}>
-                      {district.trtdstNm}
-                    </option>
-                  ))
-                ) : (
-                  <option value={trtdstId}>{trtdstNm}</option>
-                )}
-              </select>
-            </label>
-
-            <label className="sn-popup-field" style={{ width: "300px" }}>
-              <div className="sn-popup-field-label">관로번호</div>
-              <Input
-                className="sn-popup-input !text-[1.1rem]"
-                value={detailNumberKeyword}
-                placeholder="관로번호 입력"
-                onChange={(event) => setDetailNumberKeyword(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") handleSearch();
-                }}
-              />
-            </label>
-          </div>
-
-          <div className="flex flex-wrap items-end gap-3">
-            {jobType === "PPL" && (
-              <fieldset className="sn-popup-field" style={{ width: "180px" }}>
-                <div
-                  className="relative grid h-[2.8rem] grid-cols-2 rounded-full border border-[#cbd5e1] bg-white p-[2px] shadow-inner"
-                  role="group"
-                  aria-label="관로 상세보기 모드"
+          <div className="card card-border !m-0 mb-3 flex shrink-0 flex-wrap items-end justify-between gap-4 !p-3">
+            <div className="flex flex-wrap items-end gap-3">
+              <div className="grid w-[18rem] gap-1.5">
+                <Label htmlFor="exmn-detail-district">처리분구</Label>
+                <Select
+                  value={selectedTrtdstId}
+                  onValueChange={(value) => {
+                    setSelectedTrtdstId(value);
+                    setActualRows([]);
+                    setActualUnitRows([]);
+                    setDetailNumberKeyword("");
+                    setAppliedDetailNumberKeyword("");
+                    setNotice(null);
+                  }}
                 >
-                  <span
-                    aria-hidden="true"
-                    className="pointer-events-none absolute bottom-[2px] left-[2px] top-[2px] w-[calc(50%-2px)] rounded-full bg-primary shadow-sm transition-transform duration-200 ease-out"
-                    style={{
-                      transform: detailMode === "UNIT"
-                        ? "translateX(100%)"
-                        : "translateX(0)",
-                    }}
-                  />
-                  {(Object.keys(PPL_DETAIL_MODE_LABELS) as ExmnPplDetailMode[]).map(
-                    (mode) => (
-                      <button
+                  <SelectTrigger id="exmn-detail-district" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {districtOptions.length > 0 ? (
+                      districtOptions.map((district) => (
+                        <SelectItem
+                          key={district.trtdstId}
+                          value={district.trtdstId}
+                        >
+                          {district.trtdstNm}
+                        </SelectItem>
+                      ))
+                    ) : (
+                      <SelectItem value={trtdstId}>{trtdstNm}</SelectItem>
+                    )}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="grid w-[30rem] gap-1.5">
+                <Label htmlFor="exmn-detail-pipe-number">관로번호</Label>
+                <Input
+                  id="exmn-detail-pipe-number"
+                  value={detailNumberKeyword}
+                  placeholder="관로번호 입력"
+                  onChange={(event) =>
+                    setDetailNumberKeyword(event.target.value)
+                  }
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") handleSearch();
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-end gap-3">
+              {jobType === "PPL" && (
+                <fieldset className="grid gap-1.5">
+                  <legend className="mb-1 text-sm font-medium text-label">
+                    상세구분
+                  </legend>
+                  <div
+                    className="flex items-center gap-1"
+                    role="group"
+                    aria-label="관로 상세보기 모드"
+                  >
+                    {(
+                      Object.keys(PPL_DETAIL_MODE_LABELS) as ExmnPplDetailMode[]
+                    ).map((mode) => (
+                      <Button
                         key={mode}
                         type="button"
-                        className={[
-                          "relative z-10 rounded-full px-2 text-[0.95rem] font-semibold transition-colors duration-200",
-                          detailMode === mode ? "text-white" : "text-[#64748b]",
-                        ].join(" ")}
+                        color={detailMode === mode ? "primary" : "white"}
                         aria-pressed={detailMode === mode}
                         onClick={() => handleDetailModeChange(mode)}
                       >
                         {PPL_DETAIL_MODE_LABELS[mode]}
-                      </button>
-                    ),
-                  )}
-                </div>
-              </fieldset>
-            )}
+                      </Button>
+                    ))}
+                  </div>
+                </fieldset>
+              )}
 
-            <div className="sn-popup-actions">
-              <Button
-                type="button"
-                size="sm"
-                color="primary"
-                className="sn-popup-primary-button !text-[1.1rem]"
-                onClick={handleSearch}
-              >
-                조회
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                color="green"
-                className="sn-popup-primary-button !text-[1.1rem]"
-                onClick={() => void handleDownload()}
-              >
-                다운로드
-              </Button>
+              <div className="flex items-center gap-2">
+                <Button type="button" color="primary" onClick={handleSearch}>
+                  조회
+                </Button>
+                <Button
+                  type="button"
+                  color="white"
+                  onClick={() => {
+                    setDetailNumberKeyword("");
+                    setAppliedDetailNumberKeyword("");
+                    setNotice(null);
+                  }}
+                >
+                  초기화
+                </Button>
+              </div>
             </div>
           </div>
-          </div>
-        )}
-
-        {isLoading && (
-          <div className="shrink-0 border-b border-border bg-secondary px-4 py-2 text-[1.05rem] text-primary">
-            {isUnitMode
-              ? "본단위구간을 조회하고 있습니다."
-              : isDefectTypeView
-                ? `${defectTypeLabel} 상세를 조회하고 있습니다.`
-                : "조사 상세 집계를 조회하고 있습니다."}
-          </div>
         )}
 
         {loadError && (
-          <div role="alert" className="shrink-0 border border-red-200 bg-red-50 px-4 py-2 text-[1.05rem] text-red-700">
+          <div
+            role="alert"
+            className="shrink-0 border border-red-200 bg-red-50 px-4 py-2 text-[1.05rem] text-red-700"
+          >
             {loadError}
           </div>
         )}
@@ -876,31 +880,33 @@ export function ExmnSurveyDetailPopupPage({
             <h2 className="shrink-0 text-[1.25rem] font-semibold text-title">
               {tableTitle}
             </h2>
-            <span className="truncate text-[1.05rem] text-label">
-              조회 결과 총 {(isUnitMode ? unitRows.length : rows.length).toLocaleString("ko-KR")}건
-            </span>
           </div>
           <div className="flex shrink-0 items-center gap-7 whitespace-nowrap text-[1.05rem] text-label">
             {isUnitMode ? (
               <>
-                <span><strong className="mr-2 text-foreground">관로번호</strong>{appliedDetailNumberKeyword || "전체"}</span>
-                <span><strong className="mr-2 text-foreground">단위구간</strong>{unitSectionCount.toLocaleString("ko-KR")}개</span>
+                <span>
+                  <strong className="mr-2 text-foreground">관로번호</strong>
+                  {appliedDetailNumberKeyword || "전체"}
+                </span>
+                <span>
+                  <strong className="mr-2 text-foreground">단위구간</strong>
+                  {unitSectionCount.toLocaleString("ko-KR")}개
+                </span>
               </>
             ) : (
               <>
-                <span><strong className="mr-2 text-foreground">연장거리 합계</strong>{formatNumber(totals.extensionM)}m</span>
-                <span><strong className="mr-2 text-foreground">주행거리 합계</strong>{formatNumber(totals.drivingDistanceM)}m</span>
-                {isDefectTypeView && (
-                  <Button
-                    type="button"
-                    size="sm"
-                    color="green"
-                    className="sn-popup-primary-button !ml-1 !text-[1.05rem]"
-                    onClick={() => void handleDownload()}
-                  >
-                    다운로드
-                  </Button>
-                )}
+                <span>
+                  <strong className="mr-2 text-foreground">
+                    연장거리 합계
+                  </strong>
+                  {formatNumber(totals.extensionM)}m
+                </span>
+                <span>
+                  <strong className="mr-2 text-foreground">
+                    주행거리 합계
+                  </strong>
+                  {formatNumber(totals.drivingDistanceM)}m
+                </span>
               </>
             )}
           </div>
@@ -917,316 +923,321 @@ export function ExmnSurveyDetailPopupPage({
           />
         ) : (
           <div
-            className="min-h-0 flex-1 overflow-auto border border-border bg-background"
+            className="min-h-0 flex-1 overflow-x-auto overflow-y-visible border border-border bg-background"
             onScroll={handleTableScroll}
           >
-          <table
-            className="border-separate border-spacing-0 text-center text-[1.05rem] text-foreground"
-            style={{ width: `${tableWidth}px`, minWidth: `${tableWidth}px` }}
-          >
-            <colgroup>
-              {fixedColumns.map((column) => (
-                <col key={column.id} style={{ width: `${column.width}px` }} />
-              ))}
-              {Array.from({
-                length: (visibleDefectColumns.length + 1)
-                  * EXMN_DETAIL_SEVERITIES.length,
-              }).map((_, index) => (
-                <col key={`severity-col-${index}`} style={{ width: `${SEVERITY_COLUMN_WIDTH}px` }} />
-              ))}
-            </colgroup>
-            <thead className="sticky top-0 z-30 bg-[#eaf3fb] text-[1.3rem] font-medium leading-[1.2] text-[#647784]">
-              <tr>
-                {fixedColumns.map((column, columnIndex) => {
-                  const sticky = columnIndex < STICKY_COLUMN_COUNT;
-                  const direction = sort?.key === column.id ? sort.direction : undefined;
-                  const columnLabel = column.label;
-                  return (
-                    <th
-                      key={column.id}
-                      rowSpan={4}
-                      className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2"
-                      style={sticky ? {
-                        position: "sticky",
-                        left: columnIndex === 0 ? REPORT_COLUMN_LEFT : PIPE_COLUMN_LEFT,
-                        zIndex: 60,
-                        boxShadow:
-                          columnIndex === STICKY_COLUMN_COUNT - 1 && showStickyDivider
-                            ? STICKY_DIVIDER_SHADOW
-                            : undefined,
-                      } : undefined}
-                      aria-sort={
-                        direction === "asc"
-                          ? "ascending"
-                          : direction === "desc"
-                            ? "descending"
-                            : "none"
-                      }
-                    >
-                      <button
-                        type="button"
-                        className="inline-flex h-full w-full items-center justify-center gap-1.5"
-                        aria-label={`${columnLabel.replace("\n", " ")} 정렬`}
-                        onClick={() => handleSortChange(column.id)}
+            <table
+              className="border-separate border-spacing-0 text-center text-[1.05rem] text-foreground"
+              style={{ width: `${tableWidth}px`, minWidth: `${tableWidth}px` }}
+            >
+              <colgroup>
+                {fixedColumns.map((column) => (
+                  <col key={column.id} style={{ width: `${column.width}px` }} />
+                ))}
+                {Array.from({
+                  length:
+                    (visibleDefectColumns.length + 1) *
+                    EXMN_DETAIL_SEVERITIES.length,
+                }).map((_, index) => (
+                  <col
+                    key={`severity-col-${index}`}
+                    style={{ width: `${SEVERITY_COLUMN_WIDTH}px` }}
+                  />
+                ))}
+              </colgroup>
+              <thead className="sticky top-0 z-30 bg-primary text-center text-[1.3rem] font-medium leading-[1.2] text-primary-foreground">
+                <tr>
+                  {fixedColumns.map((column, columnIndex) => {
+                    const sticky = columnIndex < STICKY_COLUMN_COUNT;
+                    const columnLabel = column.label;
+                    return (
+                      <th
+                        key={column.id}
+                        rowSpan={4}
+                        className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+                        style={
+                          sticky
+                            ? {
+                                position: "sticky",
+                                left:
+                                  columnIndex === 0
+                                    ? REPORT_COLUMN_LEFT
+                                    : PIPE_COLUMN_LEFT,
+                                zIndex: 60,
+                                boxShadow:
+                                  columnIndex === STICKY_COLUMN_COUNT - 1 &&
+                                  showStickyDivider
+                                    ? STICKY_DIVIDER_SHADOW
+                                    : undefined,
+                              }
+                            : undefined
+                        }
                       >
-                        <span className="whitespace-pre-line">{columnLabel}</span>
-                        {direction === "asc" ? (
-                          <span
-                            className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
-                            aria-hidden="true"
-                          >
-                            ▲
-                          </span>
-                        ) : direction === "desc" ? (
-                          <span
-                            className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
-                            aria-hidden="true"
-                          >
-                            ▼
-                          </span>
-                        ) : (
-                          <span
-                            className="inline-flex flex-col items-center gap-px text-[6px] leading-none text-[#475569]"
-                            aria-hidden="true"
-                          >
-                            <span>▲</span>
-                            <span>▼</span>
-                          </span>
-                        )}
-                      </button>
-                    </th>
-                  );
-                })}
-                <th
-                  colSpan={(visibleDefectColumns.length + 1) * EXMN_DETAIL_SEVERITIES.length}
-                  className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2"
-                >
-                  이상항목
-                </th>
-              </tr>
-              <tr>
-                <th
-                  colSpan={EXMN_DETAIL_SEVERITIES.length}
-                  className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2"
-                >
-                  합계
-                </th>
-                <th
-                  colSpan={visibleDefectColumns.length * EXMN_DETAIL_SEVERITIES.length}
-                  className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2"
-                >
-                  {visibleDefectGroupTitle}
-                </th>
-              </tr>
-              <tr>
-                {EXMN_DETAIL_SEVERITIES.map((severity) => (
+                        <span className="whitespace-pre-line">
+                          {columnLabel}
+                        </span>
+                      </th>
+                    );
+                  })}
                   <th
-                    key={`total-${severity}`}
-                    rowSpan={2}
-                    className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2"
+                    colSpan={
+                      (visibleDefectColumns.length + 1) *
+                      EXMN_DETAIL_SEVERITIES.length
+                    }
+                    className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
                   >
-                    {SEVERITY_LABELS[severity]}
+                    이상항목
                   </th>
-                ))}
-                {visibleDefectColumns.map((column) => (
+                </tr>
+                <tr>
                   <th
-                    key={column.code}
                     colSpan={EXMN_DETAIL_SEVERITIES.length}
-                    title={`${column.label} (${column.code})`}
-                    className="border-b border-r border-border bg-[#eaf3fb] px-2 py-2 whitespace-nowrap"
+                    className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
                   >
-                    {column.label} ({column.code})
+                    합계
                   </th>
-                ))}
-              </tr>
-              <tr>
-                {visibleDefectColumns.flatMap((column) =>
-                  EXMN_DETAIL_SEVERITIES.map((severity) => (
+                  <th
+                    colSpan={
+                      visibleDefectColumns.length *
+                      EXMN_DETAIL_SEVERITIES.length
+                    }
+                    className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+                  >
+                    {visibleDefectGroupTitle}
+                  </th>
+                </tr>
+                <tr>
+                  {EXMN_DETAIL_SEVERITIES.map((severity) => (
                     <th
-                      key={`${column.code}-${severity}`}
-                      className="border-b border-r border-border bg-[#eaf3fb] px-2 py-1.5 font-medium"
+                      key={`total-${severity}`}
+                      rowSpan={2}
+                      className="border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
                     >
                       {SEVERITY_LABELS[severity]}
                     </th>
-                  )),
-                )}
-              </tr>
-            </thead>
-            <tbody>
-              {rows.length > 0 ? (
-                <>
-                  {rows.map((row) => {
-                    const visibleAnomalyTotals = getVisibleAnomalyTotals(
-                      row,
-                      visibleDefectColumns,
-                    );
-                    return (
-                      <tr key={row.reportNo} className="sn-popup-grid-row sn-popup-grid-row-hover">
-                      {fixedColumns.map((column, columnIndex) => {
-                        const sticky = columnIndex < STICKY_COLUMN_COUNT;
-                        return (
-                          <td
-                            key={`${row.reportNo}-${column.id}`}
-                            className="border-b border-r border-border bg-background px-2 py-2.5 whitespace-nowrap"
-                            style={sticky ? {
-                              position: "sticky",
-                              left: columnIndex === 0 ? REPORT_COLUMN_LEFT : PIPE_COLUMN_LEFT,
-                              zIndex: 10,
-                              boxShadow:
-                                columnIndex === STICKY_COLUMN_COUNT - 1
-                                  && showStickyDivider
-                                  ? STICKY_DIVIDER_SHADOW
-                                  : undefined,
-                            } : undefined}
-                          >
-                            {getFixedCellValue(row, column.id)}
-                          </td>
-                        );
-                      })}
+                  ))}
+                  {visibleDefectColumns.map((column) => (
+                    <th
+                      key={column.code}
+                      colSpan={EXMN_DETAIL_SEVERITIES.length}
+                      title={`${column.label} (${column.code})`}
+                      className="whitespace-nowrap border-b border-r border-border bg-primary px-2 py-2 text-center text-primary-foreground"
+                    >
+                      {column.label} ({column.code})
+                    </th>
+                  ))}
+                </tr>
+                <tr>
+                  {visibleDefectColumns.flatMap((column) =>
+                    EXMN_DETAIL_SEVERITIES.map((severity) => (
+                      <th
+                        key={`${column.code}-${severity}`}
+                        className="border-b border-r border-border bg-primary px-2 py-1.5 text-center font-medium text-primary-foreground"
+                      >
+                        {SEVERITY_LABELS[severity]}
+                      </th>
+                    )),
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.length > 0 ? (
+                  <>
+                    {rows.map((row) => {
+                      const visibleAnomalyTotals = getVisibleAnomalyTotals(
+                        row,
+                        visibleDefectColumns,
+                      );
+                      return (
+                        <tr
+                          key={row.reportNo}
+                          className="transition-colors hover:bg-container"
+                        >
+                          {fixedColumns.map((column, columnIndex) => {
+                            const sticky = columnIndex < STICKY_COLUMN_COUNT;
+                            return (
+                              <td
+                                key={`${row.reportNo}-${column.id}`}
+                                className="whitespace-nowrap border-b border-r border-border bg-background px-2 py-2.5"
+                                style={
+                                  sticky
+                                    ? {
+                                        position: "sticky",
+                                        left:
+                                          columnIndex === 0
+                                            ? REPORT_COLUMN_LEFT
+                                            : PIPE_COLUMN_LEFT,
+                                        zIndex: 10,
+                                        boxShadow:
+                                          columnIndex ===
+                                            STICKY_COLUMN_COUNT - 1 &&
+                                          showStickyDivider
+                                            ? STICKY_DIVIDER_SHADOW
+                                            : undefined,
+                                      }
+                                    : undefined
+                                }
+                              >
+                                {getFixedCellValue(row, column.id)}
+                              </td>
+                            );
+                          })}
+                          {EXMN_DETAIL_SEVERITIES.map((severity) => (
+                            <td
+                              key={`${row.reportNo}-total-${severity}`}
+                              className="border-b border-r border-border bg-background px-2 py-2.5"
+                            >
+                              {formatCount(visibleAnomalyTotals[severity])}
+                            </td>
+                          ))}
+                          {visibleDefectColumns.flatMap((column) =>
+                            EXMN_DETAIL_SEVERITIES.map((severity) => (
+                              <td
+                                key={`${row.reportNo}-${column.code}-${severity}`}
+                                className="border-b border-r border-border px-2 py-2.5"
+                              >
+                                {formatCount(
+                                  row.defectCounts[column.code]?.[severity],
+                                )}
+                              </td>
+                            )),
+                          )}
+                        </tr>
+                      );
+                    })}
+                    <tr className="bg-background font-medium">
+                      <td
+                        colSpan={STICKY_COLUMN_COUNT}
+                        className="sticky left-0 z-20 border-b border-border bg-background px-2 py-2.5 text-center align-middle"
+                        style={{
+                          boxShadow: showStickyDivider
+                            ? STICKY_DIVIDER_SHADOW
+                            : undefined,
+                        }}
+                      >
+                        <span
+                          className="inline-block whitespace-nowrap"
+                          style={{
+                            transform: `translateX(${summaryLabelOffset}px)`,
+                          }}
+                        >
+                          소계
+                        </span>
+                      </td>
+                      {summaryLabelColumnCount > STICKY_COLUMN_COUNT && (
+                        <td
+                          aria-hidden="true"
+                          colSpan={
+                            summaryLabelColumnCount - STICKY_COLUMN_COUNT
+                          }
+                          className="border-b border-r border-border bg-background px-2 py-2.5"
+                        />
+                      )}
+                      {fixedSummaryValues.map((summary) => (
+                        <td
+                          key={`subtotal-fixed-${summary.key}`}
+                          className="border-b border-r border-border bg-background px-2 py-2.5 text-center"
+                        >
+                          {summary.value}
+                        </td>
+                      ))}
                       {EXMN_DETAIL_SEVERITIES.map((severity) => (
                         <td
-                          key={`${row.reportNo}-total-${severity}`}
-                          className="border-b border-r border-border bg-background px-2 py-2.5"
+                          key={`subtotal-anomaly-${severity}`}
+                          className="border-b border-r border-border px-2 py-2.5"
                         >
-                          {formatCount(visibleAnomalyTotals[severity])}
+                          {formatCount(
+                            defectSummary.anomalySubtotals[severity],
+                          )}
                         </td>
                       ))}
                       {visibleDefectColumns.flatMap((column) =>
                         EXMN_DETAIL_SEVERITIES.map((severity) => (
                           <td
-                            key={`${row.reportNo}-${column.code}-${severity}`}
+                            key={`subtotal-${column.code}-${severity}`}
                             className="border-b border-r border-border px-2 py-2.5"
                           >
-                            {formatCount(row.defectCounts[column.code]?.[severity])}
+                            {formatCount(
+                              defectSummary.defectSubtotals[column.code]?.[
+                                severity
+                              ],
+                            )}
                           </td>
                         )),
                       )}
-                      </tr>
-                    );
-                  })}
-                  <tr className="bg-background font-medium">
-                    <td
-                      colSpan={STICKY_COLUMN_COUNT}
-                      className="sticky left-0 z-20 border-b border-border bg-background px-2 py-2.5 text-center align-middle"
-                      style={{
-                        boxShadow: showStickyDivider
-                          ? STICKY_DIVIDER_SHADOW
-                          : undefined,
-                      }}
-                    >
-                      <span
-                        className="inline-block whitespace-nowrap"
+                    </tr>
+                    <tr className="bg-secondary font-medium">
+                      <td
+                        colSpan={STICKY_COLUMN_COUNT}
+                        className="sticky left-0 z-20 border-b border-border bg-secondary px-2 py-2.5 text-center align-middle"
                         style={{
-                          transform: `translateX(${summaryLabelOffset}px)`,
+                          boxShadow: showStickyDivider
+                            ? STICKY_DIVIDER_SHADOW
+                            : undefined,
                         }}
                       >
-                        소계
-                      </span>
-                    </td>
-                    {summaryLabelColumnCount > STICKY_COLUMN_COUNT && (
-                      <td
-                        aria-hidden="true"
-                        colSpan={summaryLabelColumnCount - STICKY_COLUMN_COUNT}
-                        className="border-b border-r border-border bg-background px-2 py-2.5"
-                      />
-                    )}
-                    {fixedSummaryValues.map((summary) => (
-                      <td
-                        key={`subtotal-fixed-${summary.key}`}
-                        className="border-b border-r border-border bg-background px-2 py-2.5 text-center"
-                      >
-                        {summary.value}
-                      </td>
-                    ))}
-                    {EXMN_DETAIL_SEVERITIES.map((severity) => (
-                      <td
-                        key={`subtotal-anomaly-${severity}`}
-                        className="border-b border-r border-border px-2 py-2.5"
-                      >
-                        {formatCount(defectSummary.anomalySubtotals[severity])}
-                      </td>
-                    ))}
-                    {visibleDefectColumns.flatMap((column) =>
-                      EXMN_DETAIL_SEVERITIES.map((severity) => (
-                        <td
-                          key={`subtotal-${column.code}-${severity}`}
-                          className="border-b border-r border-border px-2 py-2.5"
+                        <span
+                          className="inline-block whitespace-nowrap"
+                          style={{
+                            transform: `translateX(${summaryLabelOffset}px)`,
+                          }}
                         >
-                          {formatCount(
-                            defectSummary.defectSubtotals[column.code]?.[severity],
-                          )}
-                        </td>
-                      )),
-                    )}
-                  </tr>
-                  <tr className="bg-[#dcdcdc] font-medium">
-                    <td
-                      colSpan={STICKY_COLUMN_COUNT}
-                      className="sticky left-0 z-20 border-b border-border bg-[#dcdcdc] px-2 py-2.5 text-center align-middle"
-                      style={{
-                        boxShadow: showStickyDivider
-                          ? STICKY_DIVIDER_SHADOW
-                          : undefined,
-                      }}
-                    >
-                      <span
-                        className="inline-block whitespace-nowrap"
-                        style={{
-                          transform: `translateX(${summaryLabelOffset}px)`,
-                        }}
-                      >
-                        합계
-                      </span>
-                    </td>
-                    {summaryLabelColumnCount > STICKY_COLUMN_COUNT && (
-                      <td
-                        aria-hidden="true"
-                        colSpan={summaryLabelColumnCount - STICKY_COLUMN_COUNT}
-                        className="border-b border-r border-border bg-[#dcdcdc] px-2 py-2.5"
-                      />
-                    )}
-                    {fixedSummaryValues.map((summary) => (
-                      <td
-                        key={`total-fixed-${summary.key}`}
-                        className="border-b border-r border-border bg-[#dcdcdc] px-2 py-2.5 text-center"
-                      >
-                        {summary.value}
+                          합계
+                        </span>
                       </td>
-                    ))}
-                    <td
-                      colSpan={EXMN_DETAIL_SEVERITIES.length}
-                      className="border-b border-r border-border px-2 py-2.5 text-center"
-                    >
-                      {formatCount(defectSummary.anomalyTotal)}
-                    </td>
-                    {visibleDefectColumns.map((column) => (
+                      {summaryLabelColumnCount > STICKY_COLUMN_COUNT && (
+                        <td
+                          aria-hidden="true"
+                          colSpan={
+                            summaryLabelColumnCount - STICKY_COLUMN_COUNT
+                          }
+                          className="border-b border-r border-border bg-secondary px-2 py-2.5"
+                        />
+                      )}
+                      {fixedSummaryValues.map((summary) => (
+                        <td
+                          key={`total-fixed-${summary.key}`}
+                          className="border-b border-r border-border bg-secondary px-2 py-2.5 text-center"
+                        >
+                          {summary.value}
+                        </td>
+                      ))}
                       <td
-                        key={`total-${column.code}`}
                         colSpan={EXMN_DETAIL_SEVERITIES.length}
                         className="border-b border-r border-border px-2 py-2.5 text-center"
                       >
-                        {formatCount(defectSummary.defectTotals[column.code])}
+                        {formatCount(defectSummary.anomalyTotal)}
                       </td>
-                    ))}
+                      {visibleDefectColumns.map((column) => (
+                        <td
+                          key={`total-${column.code}`}
+                          colSpan={EXMN_DETAIL_SEVERITIES.length}
+                          className="border-b border-r border-border px-2 py-2.5 text-center"
+                        >
+                          {formatCount(defectSummary.defectTotals[column.code])}
+                        </td>
+                      ))}
+                    </tr>
+                  </>
+                ) : (
+                  <tr>
+                    <td
+                      colSpan={
+                        fixedColumns.length +
+                        (visibleDefectColumns.length + 1) *
+                          EXMN_DETAIL_SEVERITIES.length
+                      }
+                      className="h-28 border-b border-r border-border text-center text-muted-foreground"
+                    >
+                      조회된 상세 결과가 없습니다.
+                    </td>
                   </tr>
-                </>
-              ) : (
-                <tr>
-                  <td
-                    colSpan={fixedColumns.length
-                      + (visibleDefectColumns.length + 1)
-                        * EXMN_DETAIL_SEVERITIES.length}
-                    className="sn-popup-empty-cell h-28 border-b border-r border-border text-center"
-                  >
-                    조회된 상세 결과가 없습니다.
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
+                )}
+              </tbody>
+            </table>
           </div>
         )}
       </section>
-    </main>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/exmn/ui/PplFacilityDetailModal.tsx b/apps/sn/src/features/exmn/ui/PplFacilityDetailModal.tsx
index bd809f3d8..09811e159 100644
--- a/apps/sn/src/features/exmn/ui/PplFacilityDetailModal.tsx
+++ b/apps/sn/src/features/exmn/ui/PplFacilityDetailModal.tsx
@@ -1,9 +1,16 @@
 "use client";
 
-import { Button } from "@common/components/ui";
-import { UiModal, UiTable } from "@common/business_components/ui";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@common/components/ui";
 import { useEffect, useMemo, useState } from "react";
 import type { PplFacility } from "../model/exmn-business-types";
+import { ExmnStandardDataTable } from "./ExmnStandardDataTable";
 
 const UNIT_TABLE_HEAD = [
   { id: "unitSeq", title: "단위", widthPercent: 8 },
@@ -51,91 +58,152 @@ export function PplFacilityDetailModal({
     setSelectedUnitSeq(facility?.unitSections?.[0]?.unitSeq ?? null);
   }, [facility, open]);
 
-  const unitRows = useMemo(() => (facility?.unitSections ?? []).map((unit) => ({
-    ...unit,
-    detailCount: unit.details?.length ?? 0,
-  })), [facility]);
+  const unitRows = useMemo(
+    () =>
+      (facility?.unitSections ?? []).map((unit) => ({
+        ...unit,
+        detailCount: unit.details?.length ?? 0,
+      })),
+    [facility],
+  );
 
   const selectedUnit = useMemo(
-    () => facility?.unitSections?.find((unit) => unit.unitSeq === selectedUnitSeq) ?? null,
+    () =>
+      facility?.unitSections?.find(
+        (unit) => unit.unitSeq === selectedUnitSeq,
+      ) ?? null,
     [facility, selectedUnitSeq],
   );
 
-  const detailRows = useMemo(() => (selectedUnit?.details ?? []).map((detail) => ({
-    ...detail,
-    typeText: detail.type ?? "-",
-    severityText: detail.severity ?? "-",
-    occurrencePositionText: detail.occurrencePosition ?? "-",
-    continuousText: detail.continuous == null ? "-" : detail.continuous ? "Y" : "N",
-    structuralScoreText: detail.structuralScore ?? "-",
-    operationalScoreText: detail.operationalScore ?? "-",
-    statusGroupText: detail.statusGroup ?? "-",
-  })), [selectedUnit]);
+  const detailRows = useMemo(
+    () =>
+      (selectedUnit?.details ?? []).map((detail) => ({
+        ...detail,
+        typeText: detail.type ?? "-",
+        severityText: detail.severity ?? "-",
+        occurrencePositionText: detail.occurrencePosition ?? "-",
+        continuousText:
+          detail.continuous == null ? "-" : detail.continuous ? "Y" : "N",
+        structuralScoreText: detail.structuralScore ?? "-",
+        operationalScoreText: detail.operationalScore ?? "-",
+        statusGroupText: detail.statusGroup ?? "-",
+      })),
+    [selectedUnit],
+  );
 
   return (
-    <UiModal
-      open={open}
-      onOpenChange={onOpenChange}
-      bodyClass="max-h-[94vh] max-w-[96vw] overflow-y-auto"
-      headerTitle="PPL 조사시설 상세"
-      headerTitleClass="text-xl font-semibold text-gray-800"
-      footerContent={<div className="flex w-full justify-end"><Button variant="outline" onClick={() => onOpenChange(false)}>닫기</Button></div>}
-      body={(
-        <div className="space-y-5 py-2">
-          <section className="grid grid-cols-4 gap-x-5 gap-y-3 rounded border bg-gray-50 p-4 text-sm">
-            <div><strong>보고서번호</strong><p className="mt-1 text-gray-600">{facility?.rptpNo || "-"}</p></div>
-            <div><strong>GIS 관로관리번호</strong><p className="mt-1 text-gray-600">{facility?.exmnFcltyGisMngNo || "-"}</p></div>
-            <div><strong>처리분구</strong><p className="mt-1 text-gray-600">{facility?.trtdstNm || "-"}</p></div>
-            <div><strong>상류/하류 맨홀</strong><p className="mt-1 text-gray-600">{facility?.upstmMnhlNo || "-"} / {facility?.dnstmMnhlNo || "-"}</p></div>
-            <div><strong>배수방식</strong><p className="mt-1 text-gray-600">{facility?.drgptnCd || "-"}</p></div>
-            <div><strong>관종/규격</strong><p className="mt-1 text-gray-600">{facility?.pptyCd || "-"} / {facility?.spcfctCd || "-"}</p></div>
-            <div><strong>연장/주행거리</strong><p className="mt-1 text-gray-600">{facility?.prlg ?? "-"} / {facility?.drvngDstnc ?? "-"}</p></div>
-            <div><strong>구조/운영 등급</strong><p className="mt-1 text-gray-600">{facility?.strctDfcGrdCd || "-"} / {facility?.operDfcGrdCd || "-"}</p></div>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[94vh] w-[96vw] !max-w-[96vw] flex-col overflow-hidden !p-0">
+        <DialogHeader className="card-header shrink-0 !space-y-0 px-5">
+          <DialogTitle className="text-[1.8rem] font-semibold text-label">
+            PPL 조사시설 상세
+          </DialogTitle>
+        </DialogHeader>
+        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
+          <section className="grid grid-cols-1 gap-x-5 gap-y-3 rounded border bg-secondary p-4 text-sm md:grid-cols-3">
+            <div>
+              <strong>보고서번호</strong>
+              <p className="mt-1 text-label">{facility?.rptpNo || "-"}</p>
+            </div>
+            <div>
+              <strong>GIS 관로관리번호</strong>
+              <p className="mt-1 text-label">
+                {facility?.exmnFcltyGisMngNo || "-"}
+              </p>
+            </div>
+            <div>
+              <strong>처리분구</strong>
+              <p className="mt-1 text-label">{facility?.trtdstNm || "-"}</p>
+            </div>
+            <div>
+              <strong>상류/하류 맨홀</strong>
+              <p className="mt-1 text-label">
+                {facility?.upstmMnhlNo || "-"} / {facility?.dnstmMnhlNo || "-"}
+              </p>
+            </div>
+            <div>
+              <strong>배수방식</strong>
+              <p className="mt-1 text-label">{facility?.drgptnCd || "-"}</p>
+            </div>
+            <div>
+              <strong>관종/규격</strong>
+              <p className="mt-1 text-label">
+                {facility?.pptyCd || "-"} / {facility?.spcfctCd || "-"}
+              </p>
+            </div>
+            <div>
+              <strong>연장/주행거리</strong>
+              <p className="mt-1 text-label">
+                {facility?.prlg ?? "-"} / {facility?.drvngDstnc ?? "-"}
+              </p>
+            </div>
+            <div>
+              <strong>구조/운영 등급</strong>
+              <p className="mt-1 text-label">
+                {facility?.strctDfcGrdCd || "-"} /{" "}
+                {facility?.operDfcGrdCd || "-"}
+              </p>
+            </div>
           </section>
 
           <section>
-            <h4 className="mb-2 font-semibold text-gray-700">단위 구간</h4>
-            <UiTable
-              headName=""
+            <ExmnStandardDataTable
+              rows={
+                unitRows as Array<
+                  (typeof unitRows)[number] & Record<string, unknown>
+                >
+              }
+              title="단위 구간 목록"
               headlist={UNIT_TABLE_HEAD}
-              tableData={unitRows}
               total={unitRows.length}
               pageSize={Math.max(unitRows.length, 1)}
-              curPage={1}
-              widthFixed
-              index={unitRows.findIndex((unit) => unit.unitSeq === selectedUnitSeq)}
-              cellClick={(index) => setSelectedUnitSeq(index == null ? null : unitRows[index]?.unitSeq ?? null)}
+              page={1}
+              onRowClick={(row) => setSelectedUnitSeq(row.unitSeq)}
               onPageChange={() => undefined}
             />
           </section>
 
-          <section className="rounded border bg-gray-50 p-3 text-sm text-gray-600">
-            <strong>조사중단사유:</strong> {selectedUnit?.surveyStopReason || "없음"}
-            <span className="mx-4 text-gray-300">|</span>
+          <section className="rounded border bg-secondary p-3 text-sm text-label">
+            <strong>조사중단사유:</strong>{" "}
+            {selectedUnit?.surveyStopReason || "없음"}
+            <span className="mx-4 text-muted-foreground">|</span>
             <strong>비고:</strong> {selectedUnit?.remark || "없음"}
           </section>
 
           <section>
-            <h4 className="mb-2 font-semibold text-gray-700">상태·결함 상세 기록</h4>
-            <UiTable
-              headName=""
+            <ExmnStandardDataTable
+              rows={
+                detailRows as Array<
+                  (typeof detailRows)[number] & Record<string, unknown>
+                >
+              }
+              title="상태·결함 상세 기록 목록"
               headlist={DETAIL_TABLE_HEAD}
-              tableData={detailRows}
               total={detailRows.length}
               pageSize={Math.max(detailRows.length, 1)}
-              curPage={1}
-              widthFixed
-              cellClick={undefined}
+              page={1}
               onPageChange={() => undefined}
+              scrollMode="horizontal"
+              minTableWidth="140rem"
             />
           </section>
 
           <section className="flex items-center justify-between rounded border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
-            <span>시설 보고서 파일 매핑 원천이 확정되기 전까지 보고서 조회는 제공하지 않습니다.</span>
-            <Button disabled title="보고서 매핑 모델 확정 필요">보고서 보기</Button>
+            <span>
+              시설 보고서 파일 매핑 원천이 확정되기 전까지 보고서 조회는
+              제공하지 않습니다.
+            </span>
+            <Button disabled title="보고서 매핑 모델 확정 필요">
+              보고서 보기
+            </Button>
           </section>
         </div>
-      )}
-    />
+        <DialogFooter className="card-footer shrink-0">
+          <Button color="white" onClick={() => onOpenChange(false)}>
+            닫기
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/sn/src/features/exmn/ui/PplSummaryModal.tsx b/apps/sn/src/features/exmn/ui/PplSummaryModal.tsx
index 453f1e94f..f875a1509 100644
--- a/apps/sn/src/features/exmn/ui/PplSummaryModal.tsx
+++ b/apps/sn/src/features/exmn/ui/PplSummaryModal.tsx
@@ -1,9 +1,15 @@
 "use client";
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
-import { Button, Input } from "@common/components/ui";
-import { UiModal, UiTable } from "@common/business_components/ui";
-import type { UiTableSort } from "@common/business_components/ui";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+} from "@common/components/ui";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   downloadPplExport,
@@ -18,29 +24,63 @@ import type {
   PplSummaryRow,
 } from "../model/exmn-business-types";
 import { PplFacilityDetailModal } from "./PplFacilityDetailModal";
-
-const ACTION_BUTTON_CLASS =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white";
+import { ExmnStandardDataTable } from "./ExmnStandardDataTable";
 
 const SUMMARY_TABLE_HEAD = [
-  { id: "trtdstNm", title: "처리분구", widthPercent: 20, sortable: true },
-  { id: "trgtPrlgText", title: "대상연장(m)", widthPercent: 13, sortable: true, sortKey: "trgtPrlg" },
-  { id: "drvngDstncText", title: "주행거리(m)", widthPercent: 13, sortable: true, sortKey: "drvngDstnc" },
-  { id: "pplExmnWholAnmlyArtclCnt", title: "PPL 전체이상", widthPercent: 14, sortable: true },
-  { id: "pplExmnStrctDfcCnt", title: "구조결함", widthPercent: 13, sortable: true },
-  { id: "pplExmnOperDfcCnt", title: "운영결함", widthPercent: 13, sortable: true },
-  { id: "pplExmnEtcCnt", title: "기타", widthPercent: 14, sortable: true },
+  { id: "trtdstNm", title: "처리분구", widthPercent: 20 },
+  {
+    id: "trgtPrlgText",
+    title: "대상연장(m)",
+    widthPercent: 13,
+  },
+  {
+    id: "drvngDstncText",
+    title: "주행거리(m)",
+    widthPercent: 13,
+  },
+  {
+    id: "pplExmnWholAnmlyArtclCnt",
+    title: "PPL 전체이상",
+    widthPercent: 14,
+  },
+  {
+    id: "pplExmnStrctDfcCnt",
+    title: "구조결함",
+    widthPercent: 13,
+  },
+  {
+    id: "pplExmnOperDfcCnt",
+    title: "운영결함",
+    widthPercent: 13,
+  },
+  { id: "pplExmnEtcCnt", title: "기타", widthPercent: 14 },
 ];
 
 const FACILITY_TABLE_HEAD = [
-  { id: "trtdstNm", title: "처리분구", widthPercent: 13, sortable: true },
-  { id: "rptpNo", title: "보고서번호", widthPercent: 12, sortable: true },
-  { id: "exmnFcltyGisMngNo", title: "GIS 관로관리번호", widthPercent: 18, sortable: true },
+  { id: "trtdstNm", title: "처리분구", widthPercent: 13 },
+  { id: "rptpNo", title: "보고서번호", widthPercent: 12 },
+  {
+    id: "exmnFcltyGisMngNo",
+    title: "GIS 관로관리번호",
+    widthPercent: 18,
+  },
   { id: "upstreamDownstream", title: "상류/하류 맨홀", widthPercent: 17 },
   { id: "pipeSpec", title: "관종/규격", widthPercent: 13 },
-  { id: "prlgText", title: "연장(m)", widthPercent: 9, sortable: true, sortKey: "prlg" },
-  { id: "strctDfcGrdCdText", title: "구조등급", widthPercent: 9, sortable: true, sortKey: "strctDfcGrdCd" },
-  { id: "operDfcGrdCdText", title: "운영등급", widthPercent: 9, sortable: true, sortKey: "operDfcGrdCd" },
+  {
+    id: "prlgText",
+    title: "연장(m)",
+    widthPercent: 9,
+  },
+  {
+    id: "strctDfcGrdCdText",
+    title: "구조등급",
+    widthPercent: 9,
+  },
+  {
+    id: "operDfcGrdCdText",
+    title: "운영등급",
+    widthPercent: 9,
+  },
 ];
 
 const SUMMARY_CLICKABLE_HEAD_IDS = [
@@ -53,6 +93,24 @@ const SUMMARY_CLICKABLE_HEAD_IDS = [
 type Notice = { type: "success" | "error"; text: string } | null;
 type PplDefectType = "ALL" | "STRUCTURAL" | "OPERATIONAL" | "ETC";
 
+type PplFacilityFilters = {
+  trtdstId: string;
+  sectionType: string;
+  gisManagementNo: string;
+  structuralGrade: string;
+  operationalGrade: string;
+  defectType: PplDefectType;
+};
+
+const DEFAULT_PPL_FACILITY_FILTERS: PplFacilityFilters = {
+  trtdstId: "",
+  sectionType: "",
+  gisManagementNo: "",
+  structuralGrade: "",
+  operationalGrade: "",
+  defectType: "ALL",
+};
+
 interface PplSummaryModalProps {
   open: boolean;
   business: ExmnBusiness | null;
@@ -74,16 +132,19 @@ const saveBlob = (blob: Blob, fileName: string) => {
 };
 
 /** 처리분구별 PPL 집계에서 결함 수를 따라 시설 목록과 단위 상세까지 탐색하는 모달이다. */
-export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModalProps) {
-  const [businessDetail, setBusinessDetail] = useState<ExmnBusinessDetail | null>(null);
+export function PplSummaryModal({
+  open,
+  business,
+  onOpenChange,
+}: PplSummaryModalProps) {
+  const [businessDetail, setBusinessDetail] =
+    useState<ExmnBusinessDetail | null>(null);
   const [summaryRows, setSummaryRows] = useState<PplSummaryRow[]>([]);
   const [summaryTotal, setSummaryTotal] = useState(0);
   const [summaryPage, setSummaryPage] = useState(0);
-  const [summarySort, setSummarySort] = useState<UiTableSort>();
   const [facilityRows, setFacilityRows] = useState<PplFacility[]>([]);
   const [facilityTotal, setFacilityTotal] = useState(0);
   const [facilityPage, setFacilityPage] = useState(0);
-  const [facilitySort, setFacilitySort] = useState<UiTableSort>();
   // 집계 건수 클릭과 상세 조회조건이 공유하는 처리분구·결함유형 컨텍스트다.
   const [trtdstId, setTrtdstId] = useState("");
   const [sectionType, setSectionType] = useState("");
@@ -91,60 +152,91 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
   const [structuralGrade, setStructuralGrade] = useState("");
   const [operationalGrade, setOperationalGrade] = useState("");
   const [defectType, setDefectType] = useState<PplDefectType>("ALL");
-  const [selectedFacility, setSelectedFacility] = useState<PplFacility | null>(null);
+  const [selectedFacility, setSelectedFacility] = useState<PplFacility | null>(
+    null,
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [notice, setNotice] = useState<Notice>(null);
 
-  const displayedSummaryRows = useMemo(() => summaryRows.map((row) => ({
-    ...row,
-    trgtPrlgText: formatNumber(row.trgtPrlg),
-    drvngDstncText: formatNumber(row.drvngDstnc),
-  })), [summaryRows]);
+  const displayedSummaryRows = useMemo(
+    () =>
+      summaryRows.map((row) => ({
+        ...row,
+        trgtPrlgText: formatNumber(row.trgtPrlg),
+        drvngDstncText: formatNumber(row.drvngDstnc),
+      })),
+    [summaryRows],
+  );
 
-  const displayedFacilityRows = useMemo(() => facilityRows.map((row) => ({
-    ...row,
-    upstreamDownstream: `${row.upstmMnhlNo || "-"} / ${row.dnstmMnhlNo || "-"}`,
-    pipeSpec: `${row.pptyCd || "-"} / ${row.spcfctCd || "-"}`,
-    prlgText: row.prlg == null ? "-" : formatNumber(row.prlg),
-    strctDfcGrdCdText: row.strctDfcGrdCd || "-",
-    operDfcGrdCdText: row.operDfcGrdCd || "-",
-  })), [facilityRows]);
+  const displayedFacilityRows = useMemo(
+    () =>
+      facilityRows.map((row) => ({
+        ...row,
+        upstreamDownstream: `${row.upstmMnhlNo || "-"} / ${row.dnstmMnhlNo || "-"}`,
+        pipeSpec: `${row.pptyCd || "-"} / ${row.spcfctCd || "-"}`,
+        prlgText: row.prlg == null ? "-" : formatNumber(row.prlg),
+        strctDfcGrdCdText: row.strctDfcGrdCd || "-",
+        operDfcGrdCdText: row.operDfcGrdCd || "-",
+      })),
+    [facilityRows],
+  );
 
   /** 현재 상세 필터로 PPL 시설 페이지를 요청한다. */
-  const fetchFacilities = useCallback(async (
-    nextPage = facilityPage,
-    nextSort = facilitySort,
-  ) => {
-    if (!business?.exmnBizId) return;
-    setIsLoading(true);
-    setNotice(null);
-    try {
-      const page = await getPplFacilities({
-        exmnBizId: business.exmnBizId,
-        trtdstId: trtdstId || undefined,
-        sectionType: sectionType || undefined,
-        gisManagementNo: gisManagementNo || undefined,
-        structuralGrade: structuralGrade || undefined,
-        operationalGrade: operationalGrade || undefined,
+  const fetchFacilities = useCallback(
+    async (
+      nextPage = facilityPage,
+      filters: PplFacilityFilters = {
+        trtdstId,
+        sectionType,
+        gisManagementNo,
+        structuralGrade,
+        operationalGrade,
         defectType,
-        page: nextPage,
-        size: 10,
-        sort: nextSort ? `${nextSort.key},${nextSort.direction}` : undefined,
-      });
-      setFacilityRows(page.content);
-      setFacilityTotal(page.totalElements);
-      setFacilityPage(page.number);
-    } catch (error) {
-      setFacilityRows([]);
-      setFacilityTotal(0);
-      setNotice({
-        type: "error",
-        text: error instanceof Error ? error.message : "PPL 시설 조회 중 오류가 발생했습니다.",
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  }, [business, defectType, facilityPage, facilitySort, gisManagementNo, operationalGrade, sectionType, structuralGrade, trtdstId]);
+      },
+    ) => {
+      if (!business?.exmnBizId) return;
+      setIsLoading(true);
+      setNotice(null);
+      try {
+        const page = await getPplFacilities({
+          exmnBizId: business.exmnBizId,
+          trtdstId: filters.trtdstId || undefined,
+          sectionType: filters.sectionType || undefined,
+          gisManagementNo: filters.gisManagementNo || undefined,
+          structuralGrade: filters.structuralGrade || undefined,
+          operationalGrade: filters.operationalGrade || undefined,
+          defectType: filters.defectType,
+          page: nextPage,
+          size: 10,
+        });
+        setFacilityRows(page.content);
+        setFacilityTotal(page.totalElements);
+        setFacilityPage(page.number);
+      } catch (error) {
+        setFacilityRows([]);
+        setFacilityTotal(0);
+        setNotice({
+          type: "error",
+          text:
+            error instanceof Error
+              ? error.message
+              : "PPL 시설 조회 중 오류가 발생했습니다.",
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      business,
+      defectType,
+      facilityPage,
+      gisManagementNo,
+      operationalGrade,
+      sectionType,
+      structuralGrade,
+      trtdstId,
+    ],
+  );
 
   /** 모달 진입과 집계 정렬·페이지 변경 시 사업 상세와 PPL 집계를 읽는다. */
   useEffect(() => {
@@ -158,7 +250,6 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
         trtdstId: trtdstId || undefined,
         page: summaryPage,
         size: 10,
-        sort: summarySort ? `${summarySort.key},${summarySort.direction}` : undefined,
       }),
     ])
       .then(([detail, page]) => {
@@ -173,7 +264,10 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
         setSummaryTotal(0);
         setNotice({
           type: "error",
-          text: error instanceof Error ? error.message : "PPL 집계 조회 중 오류가 발생했습니다.",
+          text:
+            error instanceof Error
+              ? error.message
+              : "PPL 집계 조회 중 오류가 발생했습니다.",
         });
       })
       .finally(() => {
@@ -182,17 +276,15 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
     return () => {
       active = false;
     };
-  }, [business, open, summaryPage, summarySort, trtdstId]);
+  }, [business, open, summaryPage, trtdstId]);
 
   /** 새 사업을 열 때 상세 필터·페이지·선택 시설을 초기화한다. */
   useEffect(() => {
     if (!open) return;
     setSummaryPage(0);
-    setSummarySort(undefined);
     setFacilityRows([]);
     setFacilityTotal(0);
     setFacilityPage(0);
-    setFacilitySort(undefined);
     setTrtdstId("");
     setSectionType("");
     setGisManagementNo("");
@@ -203,17 +295,21 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
   }, [business, open]);
 
   /** 집계의 전체·구조·운영·기타 건수를 클릭하면 해당 처리분구 시설 조회로 연결한다. */
-  const handleSummaryCellClick = (index: number | undefined, headId: string) => {
+  const handleSummaryCellClick = (
+    index: number | undefined,
+    headId: string,
+  ) => {
     if (index == null) return;
     const row = summaryRows[index];
     if (!row) return;
-    const nextDefectType: PplDefectType = headId === "pplExmnStrctDfcCnt"
-      ? "STRUCTURAL"
-      : headId === "pplExmnOperDfcCnt"
-        ? "OPERATIONAL"
-        : headId === "pplExmnEtcCnt"
-          ? "ETC"
-          : "ALL";
+    const nextDefectType: PplDefectType =
+      headId === "pplExmnStrctDfcCnt"
+        ? "STRUCTURAL"
+        : headId === "pplExmnOperDfcCnt"
+          ? "OPERATIONAL"
+          : headId === "pplExmnEtcCnt"
+            ? "ETC"
+            : "ALL";
     setTrtdstId(row.trtdstId);
     setDefectType(nextDefectType);
     setFacilityPage(0);
@@ -239,7 +335,13 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
       .catch((error: unknown) => {
         setFacilityRows([]);
         setFacilityTotal(0);
-        setNotice({ type: "error", text: error instanceof Error ? error.message : "PPL 시설 조회 중 오류가 발생했습니다." });
+        setNotice({
+          type: "error",
+          text:
+            error instanceof Error
+              ? error.message
+              : "PPL 시설 조회 중 오류가 발생했습니다.",
+        });
       })
       .finally(() => setIsLoading(false));
   };
@@ -250,9 +352,18 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
     setIsLoading(true);
     setNotice(null);
     try {
-      saveBlob(await downloadPplExport(business.exmnBizId, trtdstId || undefined), `${business.bizNm}_PPL집계.xlsx`);
+      saveBlob(
+        await downloadPplExport(business.exmnBizId, trtdstId || undefined),
+        `${business.bizNm}_PPL집계.xlsx`,
+      );
     } catch (error) {
-      setNotice({ type: "error", text: error instanceof Error ? error.message : "PPL 엑셀 다운로드 중 오류가 발생했습니다." });
+      setNotice({
+        type: "error",
+        text:
+          error instanceof Error
+            ? error.message
+            : "PPL 엑셀 다운로드 중 오류가 발생했습니다.",
+      });
     } finally {
       setIsLoading(false);
     }
@@ -260,107 +371,198 @@ export function PplSummaryModal({ open, business, onOpenChange }: PplSummaryModa
 
   return (
     <>
-      <UiModal
-        open={open}
-        onOpenChange={onOpenChange}
-        bodyClass="max-h-[94vh] max-w-[96vw] overflow-y-auto"
-        headerTitle="PPL 조사 집계·상세"
-        headerTitleClass="text-xl font-semibold text-gray-800"
-        footerContent={<div className="flex w-full justify-end"><Button variant="outline" onClick={() => onOpenChange(false)}>닫기</Button></div>}
-        body={(
-          <div className="relative space-y-5 py-2">
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="flex max-h-[94vh] w-[96vw] !max-w-[96vw] flex-col overflow-hidden !p-0">
+          <DialogHeader className="card-header shrink-0 !space-y-0 px-5">
+            <DialogTitle className="text-[1.8rem] font-semibold text-label">
+              PPL 조사 집계·상세
+            </DialogTitle>
+          </DialogHeader>
+          <div className="relative min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
             <LoadingOverlay isLoading={isLoading} />
             {notice && (
-              <div role="alert" className={`rounded border px-4 py-3 text-sm ${notice.type === "error" ? "border-red-200 bg-red-50 text-red-700" : "border-emerald-200 bg-emerald-50 text-emerald-700"}`}>{notice.text}</div>
+              <div
+                role="alert"
+                className={`rounded border px-4 py-3 text-sm ${notice.type === "error" ? "border-red-200 bg-red-50 text-red-700" : "border-emerald-200 bg-emerald-50 text-emerald-700"}`}
+              >
+                {notice.text}
+              </div>
             )}
-            <div className="rounded border bg-gray-50 px-4 py-3 text-sm text-gray-600">
+            <div className="rounded border bg-secondary px-4 py-3 text-sm text-label">
               <strong>{business?.bizNm ?? "선택 사업"}</strong>
-              <span className="mx-3 text-gray-300">|</span>{business?.bizYr}년 {business?.bizCycl ?? "-"}차
-              <span className="mx-3 text-gray-300">|</span>{business?.ctpvNm} {business?.sggNm}
+              <span className="mx-3 text-muted-foreground">|</span>
+              {business?.bizYr}년 {business?.bizCycl ?? "-"}차
+              <span className="mx-3 text-muted-foreground">|</span>
+              {business?.ctpvNm} {business?.sggNm}
             </div>
 
             <section>
-              <div className="mb-2 flex items-center justify-between">
-                <h4 className="font-semibold text-gray-700">처리분구별 PPL 집계</h4>
-                <Button className={ACTION_BUTTON_CLASS} disabled={isLoading} onClick={() => void handleExport()}>엑셀 다운로드</Button>
-              </div>
-              <UiTable
-                headName=""
+              <ExmnStandardDataTable
+                rows={
+                  displayedSummaryRows as Array<
+                    (typeof displayedSummaryRows)[number] &
+                      Record<string, unknown>
+                  >
+                }
+                title="처리분구별 PPL 집계 목록"
                 headlist={SUMMARY_TABLE_HEAD}
-                tableData={displayedSummaryRows}
                 total={summaryTotal}
                 pageSize={10}
-                curPage={summaryPage + 1}
-                widthFixed
+                page={summaryPage + 1}
                 clickableHeadIds={SUMMARY_CLICKABLE_HEAD_IDS}
-                cellClassName={(_, headId) => SUMMARY_CLICKABLE_HEAD_IDS.includes(headId) ? "text-blue-600 underline" : ""}
-                cellClick={handleSummaryCellClick}
+                onCellClick={(_row, index, headId) =>
+                  handleSummaryCellClick(index, headId)
+                }
                 onPageChange={(page) => setSummaryPage(page - 1)}
-                sort={summarySort}
-                onSortChange={(sort) => {
-                  setSummarySort(sort);
-                  setSummaryPage(0);
-                }}
+                actions={
+                  <Button
+                    disabled={isLoading}
+                    onClick={() => void handleExport()}
+                  >
+                    엑셀다운로드
+                  </Button>
+                }
               />
             </section>
 
-            <section className="rounded border border-gray-200 p-4">
-              <div className="grid grid-cols-6 gap-3">
-                <label className="text-sm font-medium text-gray-600">처리분구
-                  <select className="mt-1 h-10 w-full rounded border bg-white px-2" value={trtdstId} onChange={(event) => setTrtdstId(event.target.value)}>
+            <section className="rounded border border-border p-4">
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+                <label className="text-sm font-medium text-label">
+                  처리분구
+                  <select
+                    className="mt-1 h-10 w-full rounded border bg-background px-2"
+                    value={trtdstId}
+                    onChange={(event) => setTrtdstId(event.target.value)}
+                  >
                     <option value="">전체</option>
-                    {(businessDetail?.districts ?? []).map((district) => <option key={district.trtdstId} value={district.trtdstId}>{district.trtdstNm}</option>)}
+                    {(businessDetail?.districts ?? []).map((district) => (
+                      <option key={district.trtdstId} value={district.trtdstId}>
+                        {district.trtdstNm}
+                      </option>
+                    ))}
                   </select>
                 </label>
-                <label className="text-sm font-medium text-gray-600">구간 구분
-                  <select className="mt-1 h-10 w-full rounded border bg-white px-2" value={sectionType} onChange={(event) => setSectionType(event.target.value)}>
-                    <option value="">전체</option><option value="PIPE">관로</option><option value="UNIT">단위구간</option>
+                <label className="text-sm font-medium text-label">
+                  구간 구분
+                  <select
+                    className="mt-1 h-10 w-full rounded border bg-background px-2"
+                    value={sectionType}
+                    onChange={(event) => setSectionType(event.target.value)}
+                  >
+                    <option value="">전체</option>
+                    <option value="PIPE">관로</option>
+                    <option value="UNIT">단위구간</option>
                   </select>
                 </label>
-                <label className="col-span-2 text-sm font-medium text-gray-600">GIS 관로관리번호
-                  <Input className="mt-1 h-10 text-base" value={gisManagementNo} onChange={(event) => setGisManagementNo(event.target.value)} />
+                <label className="col-span-2 text-sm font-medium text-label">
+                  GIS 관로관리번호
+                  <Input
+                    className="mt-1 h-10 text-base"
+                    value={gisManagementNo}
+                    onChange={(event) => setGisManagementNo(event.target.value)}
+                  />
                 </label>
-                <label className="text-sm font-medium text-gray-600">구조등급
-                  <select className="mt-1 h-10 w-full rounded border bg-white px-2" value={structuralGrade} onChange={(event) => setStructuralGrade(event.target.value)}>
-                    <option value="">전체</option>{[1, 2, 3, 4, 5].map((grade) => <option key={grade} value={grade}>{grade}등급</option>)}
+                <label className="text-sm font-medium text-label">
+                  구조등급
+                  <select
+                    className="mt-1 h-10 w-full rounded border bg-background px-2"
+                    value={structuralGrade}
+                    onChange={(event) => setStructuralGrade(event.target.value)}
+                  >
+                    <option value="">전체</option>
+                    {[1, 2, 3, 4, 5].map((grade) => (
+                      <option key={grade} value={grade}>
+                        {grade}등급
+                      </option>
+                    ))}
                   </select>
                 </label>
-                <label className="text-sm font-medium text-gray-600">운영등급
-                  <select className="mt-1 h-10 w-full rounded border bg-white px-2" value={operationalGrade} onChange={(event) => setOperationalGrade(event.target.value)}>
-                    <option value="">전체</option>{[1, 2, 3, 4, 5].map((grade) => <option key={grade} value={grade}>{grade}등급</option>)}
+                <label className="text-sm font-medium text-label">
+                  운영등급
+                  <select
+                    className="mt-1 h-10 w-full rounded border bg-background px-2"
+                    value={operationalGrade}
+                    onChange={(event) =>
+                      setOperationalGrade(event.target.value)
+                    }
+                  >
+                    <option value="">전체</option>
+                    {[1, 2, 3, 4, 5].map((grade) => (
+                      <option key={grade} value={grade}>
+                        {grade}등급
+                      </option>
+                    ))}
                   </select>
                 </label>
               </div>
               <div className="mt-3 flex items-center justify-between">
-                <span className="text-sm text-gray-500">결함 분류: {defectType}</span>
-                <Button className={ACTION_BUTTON_CLASS} disabled={isLoading} onClick={() => void fetchFacilities(0)}>상세 조회</Button>
+                <span className="text-sm text-muted-foreground">
+                  결함 분류: {defectType}
+                </span>
+                <Button
+                  disabled={isLoading}
+                  onClick={() => void fetchFacilities(0)}
+                >
+                  조회
+                </Button>
+                <Button
+                  color="white"
+                  disabled={isLoading}
+                  onClick={() => {
+                    setTrtdstId(DEFAULT_PPL_FACILITY_FILTERS.trtdstId);
+                    setSectionType(DEFAULT_PPL_FACILITY_FILTERS.sectionType);
+                    setGisManagementNo(
+                      DEFAULT_PPL_FACILITY_FILTERS.gisManagementNo,
+                    );
+                    setStructuralGrade(
+                      DEFAULT_PPL_FACILITY_FILTERS.structuralGrade,
+                    );
+                    setOperationalGrade(
+                      DEFAULT_PPL_FACILITY_FILTERS.operationalGrade,
+                    );
+                    setDefectType(DEFAULT_PPL_FACILITY_FILTERS.defectType);
+                    setFacilityPage(0);
+                    setSelectedFacility(null);
+                    void fetchFacilities(0, DEFAULT_PPL_FACILITY_FILTERS);
+                  }}
+                >
+                  초기화
+                </Button>
               </div>
             </section>
 
             <section>
-              <h4 className="mb-2 font-semibold text-gray-700">PPL 시설 목록</h4>
-              <UiTable
-                headName=""
+              <ExmnStandardDataTable
+                rows={
+                  displayedFacilityRows as Array<
+                    (typeof displayedFacilityRows)[number] &
+                      Record<string, unknown>
+                  >
+                }
+                title="PPL 시설 목록"
                 headlist={FACILITY_TABLE_HEAD}
-                tableData={displayedFacilityRows}
                 total={facilityTotal}
                 pageSize={10}
-                curPage={facilityPage + 1}
-                widthFixed
-                cellClick={(index) => setSelectedFacility(index == null ? null : facilityRows[index] ?? null)}
+                page={facilityPage + 1}
+                onRowClick={(_row, index) =>
+                  setSelectedFacility(facilityRows[index] ?? null)
+                }
                 onPageChange={(page) => void fetchFacilities(page - 1)}
-                sort={facilitySort}
-                onSortChange={(sort) => {
-                  setFacilitySort(sort);
-                  setFacilityPage(0);
-                  void fetchFacilities(0, sort);
-                }}
+                scrollMode="horizontal"
+                minTableWidth="120rem"
               />
-              <p className="mt-2 text-right text-sm text-gray-500">시설 행을 선택하면 단위 구간과 상태·결함 상세가 열립니다.</p>
+              <p className="mt-2 text-right text-sm text-muted-foreground">
+                시설 행을 선택하면 단위 구간과 상태·결함 상세가 열립니다.
+              </p>
             </section>
           </div>
-        )}
-      />
+          <DialogFooter className="card-footer shrink-0">
+            <Button color="white" onClick={() => onOpenChange(false)}>
+              닫기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
       <PplFacilityDetailModal
         open={Boolean(selectedFacility)}
         facility={selectedFacility}
diff --git a/apps/sn/src/features/exmn/ui/TrtdstManagementPage.tsx b/apps/sn/src/features/exmn/ui/TrtdstManagementPage.tsx
index a56d05c4f..ea002d9e3 100644
--- a/apps/sn/src/features/exmn/ui/TrtdstManagementPage.tsx
+++ b/apps/sn/src/features/exmn/ui/TrtdstManagementPage.tsx
@@ -2,47 +2,56 @@
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import useStore from "@/store/useStore";
-import { Button, Input } from "@common/components/ui";
 import {
-  SearchDiv,
-  SearchFormLeft,
-  SearchFormRight,
-  SelectBox,
-  UiTable,
-} from "@common/business_components/ui";
-import type { UiTableSort } from "@common/business_components/ui";
-import ListDiv from "@common/business_components/ui/list_div";
+  STANDARD_ROW_NUMBER_HEADER,
+  StandardDataTable,
+  getStandardRowNumber,
+} from "@common/business_components";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   getTrtdstReferences,
   getTrtdstSettings,
   saveTrtdstSettings,
 } from "../api/trtdst-api";
-import { buildTrtdstBatchItems, validateTrtdstRows } from "../lib/trtdst-validation";
+import {
+  buildTrtdstBatchItems,
+  validateTrtdstRows,
+} from "../lib/trtdst-validation";
 import {
   TRTDST_ROW_STATUS_LABEL,
   type TrtdstSettingDto,
   type TrtdstTableRow,
 } from "../model/trtdst-types";
 
-/** 처리분구 목록 표에 표시할 공통 열 정의다. */
+/** 처리분구 목록 표에 표시할 업무 비종속 열 정의다. */
 const TRTDST_TABLE_HEAD = [
-  { id: "rowNumber", title: "NO", widthPercent: 8, sortable: true },
-  { id: "ctpvNm", title: "시도", widthPercent: 22, sortable: true },
-  { id: "sggNm", title: "시군구", widthPercent: 22, sortable: true },
-  { id: "trtdstNm", title: "처리분구명", widthPercent: 48, sortable: true },
-];
+  { id: "rowNumber", title: STANDARD_ROW_NUMBER_HEADER, width: 80 },
+  { id: "ctpvNm", title: "시도", width: 220 },
+  { id: "sggNm", title: "시군구", width: 220 },
+  { id: "trtdstNm", title: "처리분구명", width: 480 },
+] as const;
 
 /** 시도·시군구 선택박스에서 공통으로 사용하는 전체 옵션이다. */
 const ALL_OPTION = { val: "0", text: "전체" };
 
-/** 처리분구 한글·숫자 값을 화면 목록에서 자연스럽게 비교하는 정렬 기준이다. */
-const TRTDST_COLLATOR = new Intl.Collator("ko", { numeric: true, sensitivity: "base" });
-
-/** 처리분구 화면의 주요 동작 버튼에 공통으로 적용하는 시각 규칙이다. */
-const PRIMARY_ACTION_BUTTON_CLASS =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white";
-
 /** 화면 상단에 노출하는 성공·오류 메시지 상태다. */
 type Notice = { type: "success" | "error"; text: string } | null;
 
@@ -61,48 +70,60 @@ const createLocalKey = () =>
     ? `client:${crypto.randomUUID()}`
     : `client:${Date.now()}-${Math.random().toString(36).slice(2)}`;
 
-/** 서버 처리분구 목록을 UiTable과 변경 추적에 필요한 행 구조로 변환한다. */
-const toTableRows = (items: TrtdstSettingDto[]): TrtdstTableRow[] =>
-  items.map((item, index) => ({
-    ...item,
-    trtdstId: String(item.trtdstId),
-    ctpvNm: String(item.ctpvNm ?? "").trim(),
-    sggNm: String(item.sggNm ?? "").trim(),
-    trtdstNm: String(item.trtdstNm ?? "").trim(),
-    useYn: item.useYn ?? "Y",
-    localKey: `server:${item.trtdstId}`,
-    rowNumber: index + 1,
-    rowStatus: "clean",
-    rowStatusLabel: TRTDST_ROW_STATUS_LABEL.clean,
-    originalTrtdstNm: String(item.trtdstNm ?? "").trim(),
+/** 화면의 현재 행 순서를 전체 건수에서 시작하는 공통 내림차순 순번으로 정규화한다. */
+const withDescendingRowNumbers = (rows: TrtdstTableRow[]): TrtdstTableRow[] =>
+  rows.map((row, index) => ({
+    ...row,
+    rowNumber: getStandardRowNumber({ total: rows.length, rowIndex: index }),
   }));
 
+/** 서버 처리분구 목록을 공통 표와 변경 추적에 필요한 행 구조로 변환한다. */
+const toTableRows = (items: TrtdstSettingDto[]): TrtdstTableRow[] =>
+  withDescendingRowNumbers(
+    items.map((item) => ({
+      ...item,
+      trtdstId: String(item.trtdstId),
+      ctpvNm: String(item.ctpvNm ?? "").trim(),
+      sggNm: String(item.sggNm ?? "").trim(),
+      trtdstNm: String(item.trtdstNm ?? "").trim(),
+      useYn: item.useYn ?? "Y",
+      localKey: `server:${item.trtdstId}`,
+      rowNumber: 0,
+      rowStatus: "clean",
+      rowStatusLabel: TRTDST_ROW_STATUS_LABEL.clean,
+      originalTrtdstNm: String(item.trtdstNm ?? "").trim(),
+    })),
+  );
+
 /** 저장 성공 직후 삭제 행을 제거하고 추가·수정 행을 서버 반영 상태로 정규화한다. */
 const toSavedTableRows = (
   rows: TrtdstTableRow[],
   savedItems: TrtdstSettingDto[] = [],
 ): TrtdstTableRow[] =>
-  rows
-    .filter((row) => row.rowStatus !== "deletePending")
-    .map((row, index) => {
-      const saved = savedItems.find((item) =>
-        row.trtdstId
-          ? String(item.trtdstId) === row.trtdstId
-          : String(item.ctpvNm).trim() === row.ctpvNm
-            && String(item.sggNm).trim() === row.sggNm
-            && String(item.trtdstNm).trim() === row.trtdstNm.trim());
-      const trtdstNm = String(saved?.trtdstNm ?? row.trtdstNm).trim();
-      return {
-        ...row,
-        ...saved,
-        trtdstId: String(saved?.trtdstId ?? row.trtdstId),
-        trtdstNm,
-        rowNumber: index + 1,
-        rowStatus: "clean",
-        rowStatusLabel: TRTDST_ROW_STATUS_LABEL.clean,
-        originalTrtdstNm: trtdstNm,
-      };
-    });
+  withDescendingRowNumbers(
+    rows
+      .filter((row) => row.rowStatus !== "deletePending")
+      .map((row) => {
+        const saved = savedItems.find((item) =>
+          row.trtdstId
+            ? String(item.trtdstId) === row.trtdstId
+            : String(item.ctpvNm).trim() === row.ctpvNm &&
+              String(item.sggNm).trim() === row.sggNm &&
+              String(item.trtdstNm).trim() === row.trtdstNm.trim(),
+        );
+        const trtdstNm = String(saved?.trtdstNm ?? row.trtdstNm).trim();
+        return {
+          ...row,
+          ...saved,
+          trtdstId: String(saved?.trtdstId ?? row.trtdstId),
+          trtdstNm,
+          rowNumber: 0,
+          rowStatus: "clean",
+          rowStatusLabel: TRTDST_ROW_STATUS_LABEL.clean,
+          originalTrtdstNm: trtdstNm,
+        };
+      }),
+  );
 
 /** 알 수 없는 API 오류에서도 서버 메시지 또는 안전한 기본 문구를 반환한다. */
 const getErrorMessage = (error: unknown, fallback: string) =>
@@ -111,15 +132,18 @@ const getErrorMessage = (error: unknown, fallback: string) =>
 /** 사업등록 후보로 사용할 처리분구 기준정보를 직접 관리하는 FE-0 화면이다. */
 export function TrtdstManagementPage() {
   const { ctpv, sgg } = useStore();
+  const { confirm } = useConfirm();
 
   // 조회와 추가 대상 행정구역 코드 상태다. 이름은 공통 코드 목록에서 해석해 API에 전달한다.
   const [ctpvCd, setCtpvCd] = useState("0");
   const [sggCd, setSggCd] = useState("0");
   // 서버 조회 결과와 사용자의 미저장 변경을 함께 보관한다.
   const [rows, setRows] = useState<TrtdstTableRow[]>([]);
-  // 공통 UiTable 헤더의 asc·desc·기본 순환 상태를 현재 조회 결과에 적용한다.
-  const [sort, setSort] = useState<UiTableSort>();
-  // UiTable 선택 행은 저장·재조회 중에도 로컬 키 기준으로 명확히 추적한다.
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  // DataTable 선택 행은 저장·재조회 중에도 로컬 키 기준으로 명확히 추적한다.
   const [selectedRowKey, setSelectedRowKey] = useState<string | null>(null);
   // 조회·삭제 참조 확인·저장 요청 중 화면의 중복 조작을 막는다.
   const [isLoading, setIsLoading] = useState(false);
@@ -128,21 +152,27 @@ export function TrtdstManagementPage() {
   // 수정 버튼으로 편집을 시작한 기존 행을 로컬 키로 추적한다.
   const [editingRowKey, setEditingRowKey] = useState<string | null>(null);
   // 선택박스의 임시 값과 분리해 저장 후에도 마지막으로 실행한 조회조건을 재사용한다.
-  const [appliedRegion, setAppliedRegion] = useState<AppliedRegion>(EMPTY_APPLIED_REGION);
+  const [appliedRegion, setAppliedRegion] =
+    useState<AppliedRegion>(EMPTY_APPLIED_REGION);
   // 개발 모드의 Effect 재실행에서도 최초 전체 조회를 한 번만 요청하기 위해 state 대신 ref로 기록한다.
   const initialLoadRequestedRef = useRef(false);
 
   /** 현재 시도에 속한 시군구만 선택 후보로 제공한다. */
   const availableSgg = useMemo(() => {
     if (ctpvCd === "0") return sgg;
-    return sgg.filter((option) => String(option.val).startsWith(ctpvCd.slice(0, 2)));
+    return sgg.filter((option) =>
+      String(option.val).startsWith(ctpvCd.slice(0, 2)),
+    );
   }, [ctpvCd, sgg]);
 
   /** 현재 선택 코드에 해당하는 행정구역 이름을 API 계약용으로 해석한다. */
-  const selectedRegion = useMemo(() => ({
-    ctpvNm: ctpv.find((option) => String(option.val) === ctpvCd)?.text ?? "",
-    sggNm: sgg.find((option) => String(option.val) === sggCd)?.text ?? "",
-  }), [ctpv, ctpvCd, sgg, sggCd]);
+  const selectedRegion = useMemo(
+    () => ({
+      ctpvNm: ctpv.find((option) => String(option.val) === ctpvCd)?.text ?? "",
+      sggNm: sgg.find((option) => String(option.val) === sggCd)?.text ?? "",
+    }),
+    [ctpv, ctpvCd, sgg, sggCd],
+  );
 
   /** 선택된 로컬 키와 일치하는 화면 행을 반환한다. */
   const selectedRow = useMemo(
@@ -150,28 +180,6 @@ export function TrtdstManagementPage() {
     [rows, selectedRowKey],
   );
 
-  /** 백엔드 정렬 계약 전까지 현재 조회된 전체 처리분구 목록을 공통 UiTable 상태대로 정렬한다. */
-  const displayedRows = useMemo(() => {
-    if (!sort) return rows;
-
-    return [...rows].sort((left, right) => {
-      const leftValue = left[sort.key as keyof TrtdstTableRow];
-      const rightValue = right[sort.key as keyof TrtdstTableRow];
-      const comparison = sort.key === "rowNumber"
-        ? Number(leftValue ?? 0) - Number(rightValue ?? 0)
-        : TRTDST_COLLATOR.compare(String(leftValue ?? ""), String(rightValue ?? ""));
-
-      if (comparison === 0) return left.rowNumber - right.rowNumber;
-      return sort.direction === "asc" ? comparison : -comparison;
-    });
-  }, [rows, sort]);
-
-  /** UiTable의 제어 선택 인덱스를 로컬 키에서 계산한다. */
-  const selectedRowIndex = useMemo(
-    () => displayedRows.findIndex((row) => row.localKey === selectedRowKey),
-    [displayedRows, selectedRowKey],
-  );
-
   /** 미저장 추가·수정·삭제대기가 있는지 계산한다. */
   const hasChanges = useMemo(
     () => rows.some((row) => row.rowStatus !== "clean"),
@@ -191,13 +199,17 @@ export function TrtdstManagementPage() {
       setRows(toTableRows(items));
       setSelectedRowKey(null);
       setEditingRowKey(null);
+      setPagination((current) => ({ ...current, pageIndex: 0 }));
       return true;
     } catch (error) {
       setSelectedRowKey(null);
       setEditingRowKey(null);
       setNotice({
         type: "error",
-        text: getErrorMessage(error, "처리분구 목록 조회 중 오류가 발생했습니다."),
+        text: getErrorMessage(
+          error,
+          "처리분구 목록 조회 중 오류가 발생했습니다.",
+        ),
       });
       return false;
     } finally {
@@ -214,7 +226,12 @@ export function TrtdstManagementPage() {
 
   /** 조회 전 미저장 변경 유실 여부를 확인한 뒤 목록을 다시 읽는다. */
   const handleSearch = async () => {
-    if (hasChanges && !window.confirm("저장하지 않은 변경사항이 있습니다. 버리고 다시 조회하시겠습니까?")) {
+    if (
+      hasChanges &&
+      !(await confirm(
+        "저장하지 않은 변경사항이 있습니다. 버리고 다시 조회하시겠습니까?",
+      ))
+    ) {
       return;
     }
     const nextRegion: AppliedRegion = {
@@ -226,6 +243,23 @@ export function TrtdstManagementPage() {
     }
   };
 
+  /** CS 검색영역의 초기화 동작으로 지역과 페이지를 전체 조회 기준으로 복원한다. */
+  const handleReset = async () => {
+    if (
+      hasChanges &&
+      !(await confirm(
+        "저장하지 않은 변경사항이 있습니다. 버리고 초기화하시겠습니까?",
+      ))
+    ) {
+      return;
+    }
+    setCtpvCd("0");
+    setSggCd("0");
+    if (await fetchRows(EMPTY_APPLIED_REGION)) {
+      setAppliedRegion(EMPTY_APPLIED_REGION);
+    }
+  };
+
   /** 선택한 처리분구의 명칭 셀을 그리드 안에서 편집할 수 있게 전환한다. */
   const handleEdit = () => {
     setNotice(null);
@@ -234,7 +268,10 @@ export function TrtdstManagementPage() {
       return;
     }
     if (selectedRow.rowStatus === "deletePending") {
-      setNotice({ type: "error", text: "삭제대기 행은 삭제취소 후 수정할 수 있습니다." });
+      setNotice({
+        type: "error",
+        text: "삭제대기 행은 삭제취소 후 수정할 수 있습니다.",
+      });
       return;
     }
     setEditingRowKey(selectedRow.localKey);
@@ -244,26 +281,31 @@ export function TrtdstManagementPage() {
   const handleAdd = () => {
     setNotice(null);
     if (!selectedRegion.ctpvNm || !selectedRegion.sggNm) {
-      setNotice({ type: "error", text: "추가할 시도와 시군구를 먼저 선택해주세요." });
+      setNotice({
+        type: "error",
+        text: "추가할 시도와 시군구를 먼저 선택해주세요.",
+      });
       return;
     }
 
     const localKey = createLocalKey();
-    setRows((current) => [
-      ...current,
-      {
-        trtdstId: "",
-        ctpvNm: selectedRegion.ctpvNm,
-        sggNm: selectedRegion.sggNm,
-        trtdstNm: "",
-        useYn: "Y",
-        localKey,
-        rowNumber: current.length + 1,
-        rowStatus: "added",
-        rowStatusLabel: TRTDST_ROW_STATUS_LABEL.added,
-        originalTrtdstNm: "",
-      },
-    ]);
+    setRows((current) =>
+      withDescendingRowNumbers([
+        ...current,
+        {
+          trtdstId: "",
+          ctpvNm: selectedRegion.ctpvNm,
+          sggNm: selectedRegion.sggNm,
+          trtdstNm: "",
+          useYn: "Y",
+          localKey,
+          rowNumber: 0,
+          rowStatus: "added",
+          rowStatusLabel: TRTDST_ROW_STATUS_LABEL.added,
+          originalTrtdstNm: "",
+        },
+      ]),
+    );
     setSelectedRowKey(localKey);
     setEditingRowKey(null);
   };
@@ -271,20 +313,23 @@ export function TrtdstManagementPage() {
   /** 추가 또는 수정 중인 행의 처리분구명을 변경 추적 상태와 함께 갱신한다. */
   const handleRowNameChange = (localKey: string, trtdstNm: string) => {
     const nextName = trtdstNm.slice(0, 100);
-    setRows((current) => current.map((row) => {
-      if (row.localKey !== localKey) return row;
-      const rowStatus = row.rowStatus === "added"
-        ? "added"
-        : nextName.trim() === row.originalTrtdstNm
-          ? "clean"
-          : "modified";
-      return {
-        ...row,
-        trtdstNm: nextName,
-        rowStatus,
-        rowStatusLabel: TRTDST_ROW_STATUS_LABEL[rowStatus],
-      };
-    }));
+    setRows((current) =>
+      current.map((row) => {
+        if (row.localKey !== localKey) return row;
+        const rowStatus =
+          row.rowStatus === "added"
+            ? "added"
+            : nextName.trim() === row.originalTrtdstNm
+              ? "clean"
+              : "modified";
+        return {
+          ...row,
+          trtdstNm: nextName,
+          rowStatus,
+          rowStatusLabel: TRTDST_ROW_STATUS_LABEL[rowStatus],
+        };
+      }),
+    );
     setNotice(null);
   };
 
@@ -296,22 +341,32 @@ export function TrtdstManagementPage() {
       return;
     }
     if (selectedRow.rowStatus === "added") {
-      setRows((current) => current
-        .filter((row) => row.localKey !== selectedRow.localKey)
-        .map((row, index) => ({ ...row, rowNumber: index + 1 })));
+      if (!(await confirm("선택한 처리분구를 삭제하시겠습니까?"))) return;
+      setRows((current) =>
+        withDescendingRowNumbers(
+          current.filter((row) => row.localKey !== selectedRow.localKey),
+        ),
+      );
       setSelectedRowKey(null);
       setEditingRowKey(null);
       return;
     }
     if (selectedRow.rowStatus === "deletePending") {
-      const restoredStatus = selectedRow.trtdstNm === selectedRow.originalTrtdstNm ? "clean" : "modified";
-      setRows((current) => current.map((row) => row.localKey === selectedRow.localKey
-        ? {
-            ...row,
-            rowStatus: restoredStatus,
-            rowStatusLabel: TRTDST_ROW_STATUS_LABEL[restoredStatus],
-          }
-        : row));
+      const restoredStatus =
+        selectedRow.trtdstNm === selectedRow.originalTrtdstNm
+          ? "clean"
+          : "modified";
+      setRows((current) =>
+        current.map((row) =>
+          row.localKey === selectedRow.localKey
+            ? {
+                ...row,
+                rowStatus: restoredStatus,
+                rowStatusLabel: TRTDST_ROW_STATUS_LABEL[restoredStatus],
+              }
+            : row,
+        ),
+      );
       setEditingRowKey(null);
       return;
     }
@@ -321,7 +376,9 @@ export function TrtdstManagementPage() {
       const references = await getTrtdstReferences(selectedRow.trtdstId);
       const businessCount = Number(references?.businessCount ?? 0);
       const facilityCount = Number(references?.facilityCount ?? 0);
-      const totalCount = Number(references?.totalCount ?? businessCount + facilityCount);
+      const totalCount = Number(
+        references?.totalCount ?? businessCount + facilityCount,
+      );
       if (totalCount > 0) {
         setNotice({
           type: "error",
@@ -329,14 +386,26 @@ export function TrtdstManagementPage() {
         });
         return;
       }
-      setRows((current) => current.map((row) => row.localKey === selectedRow.localKey
-        ? { ...row, rowStatus: "deletePending", rowStatusLabel: TRTDST_ROW_STATUS_LABEL.deletePending }
-        : row));
+      if (!(await confirm("선택한 처리분구를 삭제하시겠습니까?"))) return;
+      setRows((current) =>
+        current.map((row) =>
+          row.localKey === selectedRow.localKey
+            ? {
+                ...row,
+                rowStatus: "deletePending",
+                rowStatusLabel: TRTDST_ROW_STATUS_LABEL.deletePending,
+              }
+            : row,
+        ),
+      );
       setEditingRowKey(null);
     } catch (error) {
       setNotice({
         type: "error",
-        text: getErrorMessage(error, "처리분구 참조 여부 확인 중 오류가 발생했습니다."),
+        text: getErrorMessage(
+          error,
+          "처리분구 참조 여부 확인 중 오류가 발생했습니다.",
+        ),
       });
     } finally {
       setIsLoading(false);
@@ -356,6 +425,7 @@ export function TrtdstManagementPage() {
       setNotice({ type: "error", text: "저장할 변경사항이 없습니다." });
       return;
     }
+    if (!(await confirm("변경사항을 저장하시겠습니까?"))) return;
 
     setIsLoading(true);
     try {
@@ -384,65 +454,145 @@ export function TrtdstManagementPage() {
     } catch (error) {
       setNotice({
         type: "error",
-        text: getErrorMessage(error, "처리분구 일괄 저장 중 오류가 발생했습니다."),
+        text: getErrorMessage(
+          error,
+          "처리분구 일괄 저장 중 오류가 발생했습니다.",
+        ),
       });
     } finally {
       setIsLoading(false);
     }
   };
 
+  /** 인라인 편집과 변경 상태 표시를 유지한 채 공통 DataTable 열로 변환한다. */
+  const columns = useMemo<ColumnDef<TrtdstTableRow>[]>(
+    () =>
+      TRTDST_TABLE_HEAD.map((head) => ({
+        id: head.id,
+        accessorKey: head.id,
+        header: head.title,
+        cell: ({ row, getValue }) => {
+          const item = row.original;
+          const isNameEditable =
+            item.rowStatus === "added" || item.localKey === editingRowKey;
+          if (head.id === "trtdstNm" && isNameEditable) {
+            return (
+              <Input
+                aria-label={`${item.ctpvNm} ${item.sggNm} 처리분구명`}
+                value={item.trtdstNm}
+                maxLength={100}
+                autoFocus
+                className="h-9 bg-background text-center"
+                placeholder="처리분구명 입력"
+                onChange={(event) =>
+                  handleRowNameChange(item.localKey, event.target.value)
+                }
+              />
+            );
+          }
+
+          const statusClass =
+            item.rowStatus === "deletePending"
+              ? "text-muted-foreground line-through"
+              : item.rowStatus === "added"
+                ? "font-semibold text-primary"
+                : item.rowStatus === "modified"
+                  ? "font-semibold text-amber-700"
+                  : "";
+          return (
+            <span className={statusClass}>{String(getValue() ?? "")}</span>
+          );
+        },
+        meta: { width: head.width, align: "center" as const },
+      })),
+    [editingRowKey],
+  );
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: {
+      pagination,
+      rowSelection: selectedRowKey ? { [selectedRowKey]: true } : {},
+    },
+    getRowId: (row) => row.localKey,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
   return (
     <>
       <LoadingOverlay isLoading={isLoading} />
-      <SearchDiv>
-        <SearchFormLeft>
-          <div
-            style={{
-              gridColumn: "1 / -1",
-              display: "flex",
-              alignItems: "center",
-              columnGap: "2rem",
-            }}
-          >
-            <div style={{ width: "16rem", flex: "0 0 16rem" }}>
-              <SelectBox
-                label="시도"
-                labelClass="w-16 whitespace-nowrap text-xl text-gray-600"
-                className=""
-                selectClass="w-48 rounded-lg bg-white"
-                selectArray={[ALL_OPTION, ...ctpv]}
-                value={ctpvCd}
-                onSelectValue={(value) => {
-                  setCtpvCd(String(value));
-                  setSggCd("0");
-                }}
-              />
-            </div>
-            <div style={{ width: "17rem", flex: "0 0 17rem" }}>
-              <SelectBox
-                label="시군구"
-                labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                className=""
-                selectClass="w-48 rounded-lg bg-white"
-                selectArray={[ALL_OPTION, ...availableSgg]}
-                value={sggCd}
-                onSelectValue={(value) => setSggCd(String(value))}
-              />
-            </div>
+      <div className="card card-border !mt-6">
+        <form
+          className="flex flex-wrap items-center gap-2 p-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void handleSearch();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시도</Label>
+            <Select
+              value={ctpvCd}
+              onValueChange={(value) => {
+                setCtpvCd(String(value));
+                setSggCd("0");
+              }}
+            >
+              <SelectTrigger className="w-[14rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[ALL_OPTION, ...ctpv].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-        </SearchFormLeft>
-        <SearchFormRight className="ml-auto flex shrink-0 items-center justify-end px-4">
-          <Button
-            className={PRIMARY_ACTION_BUTTON_CLASS}
-            style={{ transform: "translateX(0.6rem)" }}
-            size="sm"
-            disabled={isLoading}
-            onClick={() => void handleSearch()}
-          >
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시군구</Label>
+            <Select
+              value={sggCd}
+              onValueChange={(value) => setSggCd(String(value))}
+            >
+              <SelectTrigger className="w-[14rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[ALL_OPTION, ...availableSgg].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Button type="submit" className="w-[7.4rem]" disabled={isLoading}>
             조회
           </Button>
-        </SearchFormRight>
-      </SearchDiv>
+          <Button
+            type="button"
+            color="white"
+            className="w-[8.8rem]"
+            disabled={isLoading}
+            onClick={() => void handleReset()}
+          >
+            초기화
+          </Button>
+        </form>
+      </div>
 
       {notice && (
         <div
@@ -457,63 +607,54 @@ export function TrtdstManagementPage() {
         </div>
       )}
 
-      <ListDiv className="mt-4">
-        <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-medium">처리분구 목록 <span className="text-base text-gray-500">총 {rows.length.toLocaleString("ko-KR")}건</span></h3>
-          <div className="flex items-center gap-2">
-            <Button className={PRIMARY_ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={handleEdit}>수정</Button>
-            <Button className={PRIMARY_ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={handleAdd}>추가</Button>
-            <Button className={PRIMARY_ACTION_BUTTON_CLASS} size="sm" disabled={isLoading} onClick={() => void handleDelete()}>
-              {selectedRow?.rowStatus === "deletePending" ? "삭제취소" : "삭제"}
-            </Button>
-            <Button
-              className={PRIMARY_ACTION_BUTTON_CLASS}
-              size="sm"
-              disabled={isLoading || !hasChanges}
-              onClick={() => void handleSave()}
-            >
-              저장
-            </Button>
-          </div>
-        </div>
-        <UiTable<TrtdstTableRow>
-          headName=""
-          headlist={TRTDST_TABLE_HEAD}
-          tableData={displayedRows}
-          total={rows.length}
-          pageSize={Math.max(displayedRows.length, 1)}
-          curPage={1}
-          index={selectedRowIndex}
-          widthFixed
-          cellClick={(index) => setSelectedRowKey(index === undefined ? null : displayedRows[index]?.localKey ?? null)}
-          onPageChange={() => undefined}
-          sort={sort}
-          onSortChange={setSort}
-          renderCell={(row, headId) => {
-            const isNameEditable = row.rowStatus === "added" || row.localKey === editingRowKey;
-            if (headId !== "trtdstNm" || !isNameEditable) return undefined;
-
-            return (
-              <Input
-                aria-label={`${row.ctpvNm} ${row.sggNm} 처리분구명`}
-                value={row.trtdstNm}
-                maxLength={100}
-                autoFocus
-                className="h-9 bg-white text-center"
-                placeholder="처리분구명 입력"
-                onChange={(event) => handleRowNameChange(row.localKey, event.target.value)}
-              />
-            );
-          }}
-          rowClassName={(row) => row.rowStatus === "deletePending"
-            ? "!bg-red-50 text-gray-400 line-through"
-            : row.rowStatus === "added"
-              ? "!bg-blue-50"
-              : row.rowStatus === "modified"
-                ? "!bg-amber-50"
-                : ""}
+      <div className="mt-4 min-w-0">
+        <StandardDataTable
+          table={table}
+          title="처리분구 목록"
+          scrollMode="none"
+          onRowClick={(row) => setSelectedRowKey(row.localKey)}
+          actions={
+            <>
+              <Button
+                type="button"
+                color="primary"
+                disabled={isLoading}
+                onClick={handleAdd}
+              >
+                추가
+              </Button>
+              <Button
+                type="button"
+                color="primary"
+                disabled={isLoading}
+                onClick={handleEdit}
+              >
+                수정
+              </Button>
+              <Button
+                type="button"
+                color="primary"
+                disabled={isLoading || !hasChanges}
+                onClick={() => void handleSave()}
+              >
+                저장
+              </Button>
+              <Button
+                type="button"
+                color={
+                  selectedRow?.rowStatus === "deletePending" ? "white" : "red"
+                }
+                disabled={isLoading}
+                onClick={() => void handleDelete()}
+              >
+                {selectedRow?.rowStatus === "deletePending"
+                  ? "삭제취소"
+                  : "삭제"}
+              </Button>
+            </>
+          }
         />
-      </ListDiv>
+      </div>
     </>
   );
 }
diff --git a/apps/sn/src/features/obsltPpl/ui/ObsltPplFormPage.tsx b/apps/sn/src/features/obsltPpl/ui/ObsltPplFormPage.tsx
index 4c03555d5..7a31497fd 100644
--- a/apps/sn/src/features/obsltPpl/ui/ObsltPplFormPage.tsx
+++ b/apps/sn/src/features/obsltPpl/ui/ObsltPplFormPage.tsx
@@ -1,20 +1,25 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import moment from "moment";
 
-import { SelectBox } from "@common/business_components/ui";
+import {
+  StandardFormField,
+  StandardFormSection,
+} from "@common/business_components";
 import {
   Button,
   Input,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from "@common/components/ui";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+} from "@common/components";
 
 import { formatDate } from "../../common/util";
 import {
@@ -37,6 +42,7 @@ import type {
 } from "../model/obslt-ppl-types";
 
 import LoadingOverlay from "@/components/ui/LoadingBar";
+import { useAlertStore } from "@/shared/lib";
 import useStore from "@/store/useStore";
 
 type FormKey = keyof ObsltPplBusinessSaveRequest;
@@ -47,6 +53,8 @@ const BIZ_SE_OPTIONS = [
   { text: "정밀조사", val: "정밀조사" },
   { text: "정비사업", val: "정비사업" },
 ];
+const EMPTY_SELECT_VALUE = "__none__";
+type FieldSpan = 1 | 2 | 3;
 
 /** 등록·수정 표에서 필드 순서, 라벨, 입력 종류와 필수 여부를 한 곳에서 관리한다. */
 const FIELDS: Array<{
@@ -57,7 +65,7 @@ const FIELDS: Array<{
   placeholder?: string;
 }> = [
   { key: "bizSe", label: "사업구분", required: true },
-  { key: "prcisExmnCycl", label: "정밀조사차수" },
+  { key: "prcisExmnCycl", label: "정밀조사 차수" },
   { key: "bizCd", label: "사업코드", required: true },
   { key: "envoNm", label: "환경청" },
   { key: "bizNm", label: "사업명", required: true },
@@ -70,11 +78,11 @@ const FIELDS: Array<{
   { key: "evdncDcmntSbmsnStts", label: "증빙서류 제출여부" },
   { key: "bgngYmd", label: "착수(착공) 예정일자", placeholder: "YYYY-MM-DD" },
   { key: "cmcnYmd", label: "준공(예정)일자", placeholder: "YYYY-MM-DD" },
-  { key: "bizPrplDlyRsnCn", label: "사업추진 부진사유" },
+  { key: "bizPrplDlyRsnCn", label: "사업추진 부진사유", type: "textarea" },
   { key: "bizPicNm", label: "담당자 이름" },
   { key: "bizPicCnpl", label: "담당자 연락처" },
-  { key: "rmrkCn", label: "비고", },
-  { key: "pbcpOpnnCn", label: "공단의견", },
+  { key: "rmrkCn", label: "비고", type: "textarea" },
+  { key: "pbcpOpnnCn", label: "공단 의견", type: "textarea" },
 ];
 
 const NUMBER_KEYS = new Set<FormKey>([
@@ -144,6 +152,8 @@ const toRequest = (form: FormState): ObsltPplBusinessSaveRequest =>
 export function ObsltPplFormPage({ id }: { id?: string }) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
   const isModify = Boolean(id);
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   const [form, setForm] = useState<FormState>(createEmptyForm);
@@ -157,15 +167,8 @@ export function ObsltPplFormPage({ id }: { id?: string }) {
   const listQueryString = searchParams.toString();
   const listHref = `/oper/obsltPplBiz${listQueryString ? `?${listQueryString}` : ""}`;
 
-  const ctpvOptions = useMemo(
-    () => [{ text: "전체", val: "0", hidden: true }, ...ctpv],
-    [ctpv],
-  );
   const representativeSggOptions = useMemo(
-    () => [
-      { text: "전체", val: "0", hidden: true },
-      ...buildObsltPplRepresentativeSggOptions(sgg, ctpvCd),
-    ],
+    () => buildObsltPplRepresentativeSggOptions(sgg, ctpvCd),
     [ctpvCd, sgg],
   );
 
@@ -245,8 +248,9 @@ export function ObsltPplFormPage({ id }: { id?: string }) {
     try {
       if (id) await updateObsltPplBusiness(id, toRequest(form));
       else await createObsltPplBusiness(toRequest(form));
-      window.alert(isModify ? "수정되었습니다." : "등록되었습니다.");
-      router.push(listHref);
+      alert(isModify ? "수정되었습니다." : "등록되었습니다.", () =>
+        router.push(listHref),
+      );
     } catch (error) {
       setNotice(
         error instanceof Error ? error.message : "저장하지 못했습니다.",
@@ -258,12 +262,11 @@ export function ObsltPplFormPage({ id }: { id?: string }) {
 
   /** 사용자 확인 후 현재 사업을 논리삭제하고 목록으로 이동한다. */
   const handleDelete = async () => {
-    if (!id || !window.confirm("삭제하시겠습니까?")) return;
+    if (!id || !(await confirm("삭제하시겠습니까?"))) return;
     setLoading(true);
     try {
       await deleteObsltPplBusiness(id);
-      window.alert("삭제되었습니다.");
-      router.push(listHref);
+      alert("삭제되었습니다.", () => router.push(listHref));
     } catch (error) {
       setNotice(
         error instanceof Error ? error.message : "삭제하지 못했습니다.",
@@ -273,153 +276,258 @@ export function ObsltPplFormPage({ id }: { id?: string }) {
     }
   };
 
+  const renderField = (key: FormKey, span: FieldSpan = 1) => {
+    const field = FIELDS.find((candidate) => candidate.key === key);
+    if (!field) return null;
+
+    const fieldId = `obslt-ppl-${field.key}`;
+    let control: ReactNode;
+
+    if (field.key === "bizSe") {
+      control = (
+        <Select
+          value={form.bizSe}
+          onValueChange={(value) => {
+            clearFieldError("bizSe");
+            setForm((current) => ({ ...current, bizSe: String(value) }));
+          }}
+        >
+          <SelectTrigger id={fieldId} className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {BIZ_SE_OPTIONS.map((option) => (
+              <SelectItem key={option.val} value={option.val}>
+                {option.text}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    } else if (field.key === "envoNm") {
+      control = (
+        <Select
+          value={form.envoNm || EMPTY_SELECT_VALUE}
+          onValueChange={(value) => {
+            clearFieldError("envoNm");
+            setForm((current) => ({
+              ...current,
+              envoNm: value === EMPTY_SELECT_VALUE ? "" : String(value),
+            }));
+          }}
+        >
+          <SelectTrigger id={fieldId} className="w-full">
+            <SelectValue placeholder="환경청 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={EMPTY_SELECT_VALUE}>선택</SelectItem>
+            {OBSLT_PPL_ENV_OFFICES.map((office) => (
+              <SelectItem key={office.name} value={office.name}>
+                {office.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    } else if (field.type === "textarea") {
+      control = (
+        <Textarea
+          id={fieldId}
+          className="min-h-[7.2rem] resize-y !text-[1.3rem]"
+          value={form[field.key]}
+          placeholder={field.placeholder}
+          onChange={(event) => {
+            clearFieldError(field.key);
+            setForm((current) => ({
+              ...current,
+              [field.key]: event.target.value,
+            }));
+          }}
+        />
+      );
+    } else {
+      control = (
+        <Input
+          id={fieldId}
+          className="w-full !text-[1.3rem]"
+          type={field.type === "number" ? "number" : "text"}
+          step={field.type === "number" ? "any" : undefined}
+          maxLength={DATE_KEYS.has(field.key) ? 10 : undefined}
+          value={form[field.key]}
+          placeholder={field.placeholder}
+          onChange={(event) => {
+            clearFieldError(field.key);
+            setForm((current) => ({
+              ...current,
+              [field.key]: DATE_KEYS.has(field.key)
+                ? formatDateInput(event.target.value)
+                : event.target.value,
+            }));
+          }}
+        />
+      );
+    }
+
+    return (
+      <StandardFormField
+        key={field.key}
+        id={fieldId}
+        label={field.label}
+        required={field.required}
+        error={fieldErrors[field.key]}
+        span={span}
+      >
+        {control}
+      </StandardFormField>
+    );
+  };
+
   return (
     <div className="card card-border !mt-6">
       <LoadingOverlay isLoading={loading} />
       <div className="card-header">
         <h3 className="text-2xl font-medium text-label">
-          노후하수관로 사업 {isModify ? "수정" : "등록"}
+          노후 하수관로 정비사업 {isModify ? "상세/수정" : "등록"}
         </h3>
       </div>
-      <div className="card">
-        <Table variant="secondary">
-          <colgroup>
-            <col width="18%" />
-            <col width="82%" />
-          </colgroup>
-          <TableBody>
-            <TableRow>
-              <TableHead data-required>시도,시군구 선택</TableHead>
-              <TableCell className="border">
-                <div className="flex flex-wrap items-center gap-3">
-                  <SelectBox
-                    label="시도"
-                    className=""
-                    labelClass="w-16 whitespace-nowrap text-[1.3rem] text-gray-600"
-                    selectClass="h-11 w-[180px] rounded-lg bg-white"
-                    selectArray={ctpvOptions}
-                    value={ctpvCd}
-                    onSelectValue={(value) => {
-                      const nextCtpvCd = String(value);
-                      clearFieldError("region");
-                      setCtpvCd(nextCtpvCd);
-                      setSggCd("0");
-                      setForm((current) => ({
-                        ...current,
-                        ctpvNm:
-                          ctpv.find(
-                            (option) => String(option.val) === nextCtpvCd,
-                          )?.text ?? "",
-                        sigunNm: "",
-                        sggCd: "",
-                      }));
-                    }}
-                  />
-                  <SelectBox
-                    label="시군구"
-                    className=""
-                    labelClass="w-20 whitespace-nowrap text-[1.3rem] text-gray-600"
-                    selectClass="h-11 w-[220px] rounded-lg bg-white"
-                    selectArray={representativeSggOptions}
-                    value={sggCd}
-                    onSelectValue={(value) => {
-                      const nextSggCd = String(value);
-                      const selectedOption = representativeSggOptions.find(
-                        (option) => String(option.val) === nextSggCd,
-                      );
-                      clearFieldError("region");
-                      setSggCd(nextSggCd);
-                      setForm((current) => ({
-                        ...current,
-                        sigunNm: selectedOption?.text ?? "",
-                        sggCd: nextSggCd === "0" ? "" : nextSggCd,
-                      }));
-                    }}
-                  />
-                </div>
-                {fieldErrors.region && (
-                  <p className="mt-1 text-[1.2rem] text-red-600" role="alert">
-                    {fieldErrors.region}
-                  </p>
-                )}
-              </TableCell>
-            </TableRow>
-            {FIELDS.map((field) => (
-              <TableRow key={field.key}>
-                <TableHead data-required={field.required || undefined}>
-                  {field.label}
-                </TableHead>
-                <TableCell className="border">
-                  {field.key === "bizSe" ? (
-                    <SelectBox
-                      className=""
-                      selectClass="h-11 rounded-lg bg-white"
-                      selectArray={BIZ_SE_OPTIONS}
-                      value={form.bizSe}
-                      onSelectValue={(value) => {
-                        clearFieldError("bizSe");
-                        setForm({ ...form, bizSe: String(value) });
-                      }}
-                    />
-                  ) : field.type === "textarea" ? (
-                    <textarea
-                      className="min-h-24 w-full rounded border bg-white p-3 text-[1.3rem]"
-                      value={form[field.key]}
-                      placeholder={field.placeholder}
-                      onChange={(e) => {
-                        clearFieldError(field.key);
-                        setForm({ ...form, [field.key]: e.target.value });
-                      }}
-                    />
-                  ) : (
-                    <Input
-                      className="!text-[1.3rem]"
-                      type={field.type === "number" ? "number" : "text"}
-                      step={field.type === "number" ? "any" : undefined}
-                      maxLength={DATE_KEYS.has(field.key) ? 10 : undefined}
-                      value={form[field.key]}
-                      placeholder={field.placeholder}
-                      onChange={(e) => {
-                        clearFieldError(field.key);
-                        setForm({
-                          ...form,
-                          [field.key]: DATE_KEYS.has(field.key)
-                            ? formatDateInput(e.target.value)
-                            : e.target.value,
-                        });
-                      }}
-                    />
-                  )}
-                  {fieldErrors[field.key] && (
-                    <p className="mt-1 text-[1.2rem] text-red-600" role="alert">
-                      {fieldErrors[field.key]}
-                    </p>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+      <div className="card space-y-4">
         {notice && (
-          <p className="mt-3 text-sm text-red-600" role="alert">
+          <p
+            className="rounded-sm border border-red-200 bg-red-50 px-4 py-3 text-[1.3rem] text-red-700"
+            role="alert"
+          >
             {notice}
           </p>
         )}
-        <div className="mt-5 flex justify-end gap-2">
-          <Button size="sm" onClick={() => router.push(listHref)}>
-            목록
-          </Button>
+
+        <StandardFormSection title="기본 정보">
+          {renderField("bizSe")}
+          {renderField("prcisExmnCycl")}
+          {renderField("bizCd")}
+          {renderField("bizNm", 2)}
+          {renderField("prplPrst")}
+        </StandardFormSection>
+
+        <StandardFormSection title="지역 및 일정">
+          <StandardFormField
+            id="obslt-ppl-ctpv"
+            label="시도"
+            required
+            error={fieldErrors.region}
+          >
+            <Select
+              value={ctpvCd}
+              onValueChange={(value) => {
+                const nextCtpvCd = String(value);
+                clearFieldError("region");
+                setCtpvCd(nextCtpvCd);
+                setSggCd("0");
+                setForm((current) => ({
+                  ...current,
+                  ctpvNm:
+                    ctpv.find((option) => String(option.val) === nextCtpvCd)
+                      ?.text ?? "",
+                  sigunNm: "",
+                  sggCd: "",
+                }));
+              }}
+            >
+              <SelectTrigger id="obslt-ppl-ctpv" className="w-full">
+                <SelectValue placeholder="시도 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="0" disabled>
+                  선택
+                </SelectItem>
+                {ctpv.map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </StandardFormField>
+
+          <StandardFormField id="obslt-ppl-sgg" label="시군구">
+            <Select
+              value={sggCd}
+              onValueChange={(value) => {
+                const nextSggCd = String(value);
+                const selectedOption = representativeSggOptions.find(
+                  (option) => String(option.val) === nextSggCd,
+                );
+                clearFieldError("region");
+                setSggCd(nextSggCd);
+                setForm((current) => ({
+                  ...current,
+                  sigunNm: selectedOption?.text ?? "",
+                  sggCd: nextSggCd === "0" ? "" : nextSggCd,
+                }));
+              }}
+            >
+              <SelectTrigger id="obslt-ppl-sgg" className="w-full">
+                <SelectValue placeholder="시군구 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="0">선택</SelectItem>
+                {representativeSggOptions.map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </StandardFormField>
+
+          {renderField("envoNm")}
+          {renderField("bgngYr")}
+          {renderField("cmcnYr")}
+          {renderField("evdncDcmntSbmsnStts")}
+          {renderField("bgngYmd")}
+          {renderField("cmcnYmd", 2)}
+        </StandardFormSection>
+
+        <StandardFormSection title="사업량">
+          {renderField("planPrlg")}
+          {renderField("frhfyrExpcPrlg")}
+          {renderField("rmndPrlg")}
+        </StandardFormSection>
+
+        <StandardFormSection title="담당자 및 의견">
+          {renderField("bizPicNm")}
+          {renderField("bizPicCnpl", 2)}
+          {renderField("bizPrplDlyRsnCn", 3)}
+          {renderField("rmrkCn", 3)}
+          {renderField("pbcpOpnnCn", 3)}
+        </StandardFormSection>
+
+        <div className="flex justify-center gap-4 pb-8 pt-6">
           <Button
-            size="sm"
-            className="rounded-sm bg-blue-600 px-4 py-2 !text-white hover:bg-blue-700"
+            type="button"
+            size="default"
             onClick={() => void handleSave()}
           >
             저장
           </Button>
+          <Button
+            type="button"
+            size="default"
+            color="white"
+            onClick={() => router.push(listHref)}
+          >
+            취소
+          </Button>
           {isModify && (
             <Button
-              size="sm"
-              className="rounded-sm bg-red-600 px-4 py-2 !text-white hover:bg-red-700"
+              type="button"
+              size="default"
+              color="red"
               onClick={() => void handleDelete()}
             >
               삭제
diff --git a/apps/sn/src/features/obsltPpl/ui/ObsltPplListPage.tsx b/apps/sn/src/features/obsltPpl/ui/ObsltPplListPage.tsx
index d53746f53..1f13d8c34 100644
--- a/apps/sn/src/features/obsltPpl/ui/ObsltPplListPage.tsx
+++ b/apps/sn/src/features/obsltPpl/ui/ObsltPplListPage.tsx
@@ -7,14 +7,25 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 import {
-  SearchDiv,
-  SearchFormLeft,
-  SearchFormRight,
-  SelectBox,
-  UiTable,
-} from "@common/business_components/ui";
-import ListDiv from "@common/business_components/ui/list_div";
-import { Button, Input, Label } from "@common/components/ui";
+  StandardDataTable,
+  getStandardRowNumber,
+} from "@common/business_components";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
 
 import {
   getAllObsltPplBusinesses,
@@ -38,8 +49,6 @@ import { openWindowPopup } from "../../windowPopup/lib/openWindowPopup";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "../../windowPopup/model/types";
 
 const DEFAULT_LIST_SIZE = 10;
-const ACTION_BUTTON_CLASS =
-  "rounded-sm bg-blue-600 px-4 py-2 text-sm font-medium !text-white hover:bg-blue-700 disabled:!text-white";
 const BIZ_SE_OPTIONS = [
   { text: "전체", val: "0" },
   { text: "정밀조사", val: "정밀조사" },
@@ -50,6 +59,12 @@ const ALL_REGION_OPTION = { text: "전체", val: "0" };
 type ObsltPplTableRow = ObsltPplBusiness & {
   rowNumber: number;
 };
+type ObsltPplTableColumn = {
+  id: keyof ObsltPplTableRow;
+  title: string;
+  width: number;
+  align?: "left" | "center" | "right";
+};
 type ObsltPplSearch = {
   bizSe: string;
   ctpvNm: string;
@@ -74,31 +89,42 @@ const createListQueryString = (
   return params.toString();
 };
 
-const TABLE_HEADLIST = [
-  { id: "rowNumber", title: "NO", widthPercent: 4 },
-  { id: "bizSe", title: "사업구분", widthPercent: 6 },
-  { id: "prcisExmnCycl", title: "정밀조사차수", widthPercent: 6 },
-  { id: "bizCd", title: "사업코드", widthPercent: 7 },
-  //{ id: "sggCd", title: "시군구코드", widthPercent: 6 },
-  { id: "ctpvNm", title: "시도", widthPercent: 6 },
-  { id: "sigunNm", title: "시군", widthPercent: 6 },
-  { id: "envoNm", title: "환경청", widthPercent: 8 },
-  { id: "bizNm", title: "사업명", widthPercent: 16 },
-  { id: "prplPrst", title: "추진현황", widthPercent: 6 },
-  { id: "bgngYr", title: "착수년도", widthPercent: 5 },
-  { id: "cmcnYr", title: "준공(예정)년도", widthPercent: 6 },
-  { id: "planPrlg", title: "계획연장(km)", widthPercent: 6 },
-  { id: "frhfyrExpcPrlg", title: "상반기(예상)연장(km)", widthPercent: 8 },
-  { id: "rmndPrlg", title: "잔여연장(km)", widthPercent: 6 },
-  { id: "evdncDcmntSbmsnStts", title: "증빙서류\n제출여부", widthPercent: 6 },
-  { id: "bgngYmd", title: "착수일자", widthPercent: 7 },
-  { id: "cmcnYmd", title: "준공(예정)일자", widthPercent: 7 },
-  { id: "bizPrplDlyRsnCn", title: "사업추진 부진사유", widthPercent: 26 },
-  { id: "bizPicNm", title: "담당자 이름", widthPercent: 6 },
-  { id: "bizPicCnpl", title: "담당자 연락처", widthPercent: 8 },
-  { id: "rmrkCn", title: "비고", widthPercent: 10 },
-  { id: "pbcpOpnnCn", title: "공단\n의견", widthPercent: 2 },
+/** 다열 목록은 화면별 CSS 대신 공통 스크롤 표에 전달할 실제 컬럼 폭만 정의한다. */
+const TABLE_COLUMNS: ObsltPplTableColumn[] = [
+  { id: "rowNumber", title: "순번", width: 60 },
+  { id: "bizSe", title: "사업구분", width: 85 },
+  { id: "prcisExmnCycl", title: "정밀조사\n차수", width: 85 },
+  { id: "bizCd", title: "사업코드", width: 105 },
+  { id: "ctpvNm", title: "시도", width: 90 },
+  { id: "sigunNm", title: "시군구", width: 90 },
+  { id: "envoNm", title: "환경청", width: 120 },
+  { id: "bizNm", title: "사업명", width: 240, align: "left" },
+  { id: "prplPrst", title: "추진현황", width: 85 },
+  { id: "bgngYr", title: "착수년도", width: 75 },
+  { id: "cmcnYr", title: "준공(예정)\n년도", width: 90 },
+  { id: "planPrlg", title: "계획연장\n(km)", width: 95, align: "right" },
+  {
+    id: "frhfyrExpcPrlg",
+    title: "상반기(예상)\n연장(km)",
+    width: 120,
+    align: "right",
+  },
+  { id: "rmndPrlg", title: "잔여연장\n(km)", width: 95, align: "right" },
+  { id: "evdncDcmntSbmsnStts", title: "증빙서류\n제출여부", width: 90 },
+  { id: "bgngYmd", title: "착수일자", width: 105 },
+  { id: "cmcnYmd", title: "준공(예정)\n일자", width: 110 },
+  {
+    id: "bizPrplDlyRsnCn",
+    title: "사업추진 부진사유",
+    width: 300,
+    align: "left",
+  },
+  { id: "bizPicNm", title: "담당자 이름", width: 90 },
+  { id: "bizPicCnpl", title: "담당자 연락처", width: 120 },
+  { id: "rmrkCn", title: "비고", width: 160, align: "left" },
+  { id: "pbcpOpnnCn", title: "공단\n의견", width: 90, align: "left" },
 ];
+const TABLE_MIN_WIDTH = "280rem";
 
 const EMPTY_PAGE: ObsltPplPage = {
   content: [],
@@ -108,8 +134,6 @@ const EMPTY_PAGE: ObsltPplPage = {
   size: DEFAULT_LIST_SIZE,
 };
 
-const DATE_FIELD_SET = new Set<keyof ObsltPplBusiness>(["bgngYmd", "cmcnYmd"]);
-
 /** 목록 표시값을 공통 포맷으로 정리한다. */
 const formatBusinessForDisplay = (row: ObsltPplBusiness): ObsltPplBusiness => ({
   ...row,
@@ -118,6 +142,13 @@ const formatBusinessForDisplay = (row: ObsltPplBusiness): ObsltPplBusiness => ({
   cmcnYmd: formatDate(row.cmcnYmd) || null,
 });
 
+/** 공통 DataTable 셀에 표시할 문자열을 null과 숫자까지 일관되게 변환한다. */
+const formatTableValue = (value: unknown) => {
+  if (typeof value === "number") return value.toLocaleString("ko-KR");
+  if (value === null || value === undefined) return "";
+  return String(value);
+};
+
 /** 노후하수관로 사업 목록, 검색, xlsx 업로드·다운로드 진입점을 제공한다. */
 export function ObsltPplListPage() {
   const router = useRouter();
@@ -140,7 +171,6 @@ export function ObsltPplListPage() {
   const [rows, setRows] = useState<ObsltPplTableRow[]>([]);
   const [loading, setLoading] = useState(false);
   const [notice, setNotice] = useState("");
-  const [resetPageNo, setResetPageNo] = useState(false);
   // 선택박스의 코드와 API 검색에 사용하는 행정구역명을 함께 관리한다.
   const [ctpvCd, setCtpvCd] = useState(() => searchParams.get("ctpvCd") ?? "0");
   const [sggCd, setSggCd] = useState(() => searchParams.get("sggCd") ?? "0");
@@ -159,6 +189,67 @@ export function ObsltPplListPage() {
     return buildObsltPplRepresentativeSggOptions(sgg, ctpvCd);
   }, [ctpvCd, sgg]);
 
+  /** 공통 DataTable이 표시할 22개 업무 컬럼과 폭·정렬 규칙을 구성한다. */
+  const columns = useMemo<ColumnDef<ObsltPplTableRow>[]>(
+    () =>
+      TABLE_COLUMNS.map((column) => ({
+        id: column.id,
+        accessorFn: (row) => row[column.id],
+        header: () => (
+          <span className="whitespace-pre-line">{column.title}</span>
+        ),
+        cell: ({ getValue }) => {
+          const displayValue = formatTableValue(getValue());
+          return (
+            <span
+              className="block whitespace-normal break-words"
+              title={displayValue}
+            >
+              {displayValue}
+            </span>
+          );
+        },
+        meta: {
+          width: column.width,
+          align: column.align ?? "center",
+        },
+      })),
+    [],
+  );
+  const pagination: PaginationState = {
+    pageIndex: page - 1,
+    pageSize: DEFAULT_LIST_SIZE,
+  };
+
+  /** 서버 페이지 번호와 URL 복귀 조건을 공통 DataTable 페이지 상태에 연결한다. */
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { pagination },
+    rowCount: data.totalElements,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => String(row.obsltSwagePplBizSn),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      const nextPage = next.pageIndex + 1;
+      if (nextPage === page) return;
+
+      setPage(nextPage);
+      const queryString = createListQueryString(
+        nextPage,
+        appliedSearch,
+        appliedCtpvCd,
+        appliedSggCd,
+      );
+      router.replace(
+        `/oper/obsltPplBiz${queryString ? `?${queryString}` : ""}`,
+        { scroll: false },
+      );
+    },
+  });
+
   /** 공통 레이아웃에서 아직 지역 데이터를 불러오지 못한 경우 공통 store 조회를 보완한다. */
   useEffect(() => {
     if (ctpv.length === 0) void fetchCtpv();
@@ -184,9 +275,12 @@ export function ObsltPplListPage() {
         setRows(
           result.content.map((row, index) => ({
             ...formatBusinessForDisplay(row),
-            rowNumber:
-              result.totalElements -
-              ((targetPage - 1) * DEFAULT_LIST_SIZE + index),
+            rowNumber: getStandardRowNumber({
+              total: result.totalElements,
+              rowIndex: index,
+              pageIndex: targetPage - 1,
+              pageSize: DEFAULT_LIST_SIZE,
+            }),
           })),
         );
       } catch (error) {
@@ -199,7 +293,6 @@ export function ObsltPplListPage() {
         setRows([]);
       } finally {
         setLoading(false);
-        setResetPageNo(false);
       }
     },
     [appliedSearch, page],
@@ -221,8 +314,7 @@ export function ObsltPplListPage() {
         `최종확정예산사업 ${inserted.toLocaleString()}건을 등록했습니다.${skipped ? ` 이미 등록된 ${skipped.toLocaleString()}건은 제외했습니다.` : ""}`,
       );
       setPage(1);
-      setResetPageNo(true);
-      void load(1, appliedSearch);
+      if (page === 1) void load(1, appliedSearch);
     };
     window.addEventListener("message", receivePopupMessage);
     return () => window.removeEventListener("message", receivePopupMessage);
@@ -256,9 +348,8 @@ export function ObsltPplListPage() {
       setNotice(
         `총 ${result.importedCount.toLocaleString()}건을 저장했습니다. (정밀조사 ${result.precisionSurveyCount.toLocaleString()}건, 정비사업 ${result.maintenanceCount.toLocaleString()}건)`,
       );
-      setResetPageNo(true);
       setPage(1);
-      await load(1, appliedSearch);
+      if (page === 1) await load(1, appliedSearch);
     } catch (error) {
       setNotice(
         error instanceof Error ? error.message : "업로드하지 못했습니다.",
@@ -289,236 +380,245 @@ export function ObsltPplListPage() {
   };
 
   /** 입력 중 조건을 실제 조회조건으로 확정하고 첫 페이지를 다시 조회한다. */
-  const handleSearch = async () => {
+  const handleSearch = () => {
     const nextSearch = { ...search };
     setNotice("");
     setAppliedSearch(nextSearch);
     setAppliedCtpvCd(ctpvCd);
     setAppliedSggCd(sggCd);
-    setResetPageNo(true);
     const queryString = createListQueryString(1, nextSearch, ctpvCd, sggCd);
     router.replace(`/oper/obsltPplBiz${queryString ? `?${queryString}` : ""}`, {
       scroll: false,
     });
-    if (page === 1) {
-      await load(1, nextSearch);
-      return;
-    }
     setPage(1);
   };
 
+  /** CS 목록 화면과 같은 초기화 동작으로 기본 사업구분과 전체 지역을 다시 조회한다. */
+  const handleReset = () => {
+    const nextSearch: ObsltPplSearch = {
+      bizSe: "정밀조사",
+      ctpvNm: "",
+      sigunNm: "",
+      bizNm: "",
+    };
+    setSearch(nextSearch);
+    setAppliedSearch(nextSearch);
+    setCtpvCd("0");
+    setSggCd("0");
+    setAppliedCtpvCd("0");
+    setAppliedSggCd("0");
+    setNotice("");
+    setPage(1);
+    router.replace("/oper/obsltPplBiz?bizSe=정밀조사", { scroll: false });
+  };
+
+  /** 적용된 목록 조건을 보존한 채 신규 등록 화면으로 이동한다. */
+  const handleRegister = () => {
+    const queryString = createListQueryString(
+      page,
+      appliedSearch,
+      appliedCtpvCd,
+      appliedSggCd,
+    );
+    router.push(
+      `/oper/obsltPplBiz/register${queryString ? `?${queryString}` : ""}`,
+    );
+  };
+
+  /** 선택한 목록 행의 수정·상세 화면을 현재 목록 복귀 조건과 함께 연다. */
+  const handleOpenDetail = (row: ObsltPplTableRow) => {
+    const queryString = createListQueryString(
+      page,
+      appliedSearch,
+      appliedCtpvCd,
+      appliedSggCd,
+    );
+    router.push(
+      `/oper/obsltPplBiz/register/${row.obsltSwagePplBizSn}${queryString ? `?${queryString}` : ""}`,
+    );
+  };
+
   return (
     <>
       <LoadingOverlay isLoading={loading} />
-      <SearchDiv>
-        <SearchFormLeft>
-          <div className="flex items-center gap-4">
-            <div className="flex items-center space-x-2">
-              <div className="flex items-center">
-                <SelectBox
-                  label="사업구분"
-                  className=""
-                  labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[120px] rounded-lg bg-white"
-                  selectArray={BIZ_SE_OPTIONS}
-                  value={search.bizSe}
-                  onSelectValue={(value) =>
-                    setSearch((current) => ({
-                      ...current,
-                      bizSe: String(value),
-                    }))
-                  }
-                />
-              </div>
-              <div className="flex items-center">
-                <SelectBox
-                  label="시도"
-                  className=""
-                  labelClass="w-16 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[140px] rounded-lg bg-white"
-                  selectArray={[ALL_REGION_OPTION, ...ctpv]}
-                  value={ctpvCd}
-                  onSelectValue={(value) => {
-                    const nextCtpvCd = String(value);
-                    setCtpvCd(nextCtpvCd);
-                    setSggCd("0");
-                    setSearch((current) => ({
-                      ...current,
-                      ctpvNm:
-                        ctpv.find((option) => String(option.val) === nextCtpvCd)
-                          ?.text ?? "",
-                      sigunNm: "",
-                    }));
-                  }}
-                />
-              </div>
-              <div className="flex items-center">
-                <SelectBox
-                  label="시군구"
-                  className=""
-                  labelClass="w-20 whitespace-nowrap text-xl text-gray-600"
-                  selectClass="w-[140px] rounded-lg bg-white"
-                  selectArray={[ALL_REGION_OPTION, ...availableSgg]}
-                  value={sggCd}
-                  onSelectValue={(value) => {
-                    const nextSggCd = String(value);
-                    setSggCd(nextSggCd);
-                    const selectedOption = availableSgg.find(
-                      (option) => String(option.val) === nextSggCd,
-                    );
-                    setSearch((current) => ({
-                      ...current,
-                      sigunNm: selectedOption?.text ?? "",
-                    }));
-                  }}
-                />
-              </div>
-              <div className="flex items-center">
-                <Label className="w-20 text-xl text-gray-600">사업명</Label>
-                <Input
-                  className="w-[220px] !text-2xl"
-                  value={search.bizNm}
-                  onChange={(event) =>
-                    setSearch((current) => ({
-                      ...current,
-                      bizNm: event.target.value,
-                    }))
-                  }
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter") {
-                      event.preventDefault();
-                      void handleSearch();
-                    }
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        </SearchFormLeft>
-        <SearchFormRight className="ml-auto flex shrink-0 items-center justify-end px-4">
+      <div className="card card-border !mt-6">
+        <form
+          className="flex flex-wrap items-center gap-2 p-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSearch();
+          }}
+        >
           <div className="flex items-center gap-2">
-            <Button
-              className={ACTION_BUTTON_CLASS}
-              size="sm"
-              onClick={() => void handleSearch()}
+            <Label className="mr-2 whitespace-nowrap text-label">
+              사업구분
+            </Label>
+            <Select
+              value={search.bizSe}
+              onValueChange={(value) =>
+                setSearch((current) => ({
+                  ...current,
+                  bizSe: String(value),
+                }))
+              }
             >
-              조회
-            </Button>
-            <Button
-              className={ACTION_BUTTON_CLASS}
-              size="sm"
-              onClick={() => {
-                const queryString = createListQueryString(
-                  page,
-                  appliedSearch,
-                  appliedCtpvCd,
-                  appliedSggCd,
-                );
-                router.push(
-                  `/oper/obsltPplBiz/register${queryString ? `?${queryString}` : ""}`,
-                );
+              <SelectTrigger className="w-[12rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {BIZ_SE_OPTIONS.map((option) => (
+                  <SelectItem key={option.val} value={option.val}>
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시도</Label>
+            <Select
+              value={ctpvCd}
+              onValueChange={(value) => {
+                const nextCtpvCd = String(value);
+                setCtpvCd(nextCtpvCd);
+                setSggCd("0");
+                setSearch((current) => ({
+                  ...current,
+                  ctpvNm:
+                    ctpv.find((option) => String(option.val) === nextCtpvCd)
+                      ?.text ?? "",
+                  sigunNm: "",
+                }));
               }}
             >
-              등록
-            </Button>
-            <Button
-              className={ACTION_BUTTON_CLASS}
-              size="sm"
-              onClick={handleOpenCfmtnBgt}
-            >
-              최종확정예산사업
-            </Button>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept=".xlsx"
-              className="hidden"
-              onChange={(event) => void handleUpload(event.target.files?.[0])}
-            />
-            <Button
-              className={ACTION_BUTTON_CLASS}
-              size="sm"
-              onClick={() => fileInputRef.current?.click()}
-            >
-              업로드
-            </Button>
-            <Button
-              className="rounded-sm bg-green-600 px-4 py-2 text-sm font-medium !text-white hover:bg-green-700"
-              size="sm"
-              onClick={() => void handleDownload()}
-            >
-              엑셀다운로드
-            </Button>
+              <SelectTrigger className="w-[14rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[ALL_REGION_OPTION, ...ctpv].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-        </SearchFormRight>
-      </SearchDiv>
+
+          <div className="flex items-center gap-2">
+            <Label className="mr-2 whitespace-nowrap text-label">시군구</Label>
+            <Select
+              value={sggCd}
+              onValueChange={(value) => {
+                const nextSggCd = String(value);
+                setSggCd(nextSggCd);
+                const selectedOption = availableSgg.find(
+                  (option) => String(option.val) === nextSggCd,
+                );
+                setSearch((current) => ({
+                  ...current,
+                  sigunNm: selectedOption?.text ?? "",
+                }));
+              }}
+            >
+              <SelectTrigger className="w-[14rem]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[ALL_REGION_OPTION, ...availableSgg].map((option) => (
+                  <SelectItem
+                    key={String(option.val)}
+                    value={String(option.val)}
+                  >
+                    {option.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label
+              htmlFor="obslt-ppl-biz-name"
+              className="mr-2 whitespace-nowrap text-label"
+            >
+              사업명
+            </Label>
+            <Input
+              id="obslt-ppl-biz-name"
+              className="w-[22rem] rounded-sm !text-[1.3rem]"
+              value={search.bizNm}
+              onChange={(event) =>
+                setSearch((current) => ({
+                  ...current,
+                  bizNm: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <Button type="submit" className="w-[7.4rem]">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="w-[8.8rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
+        </form>
+      </div>
 
       {notice && (
         <div
           role="status"
-          className="mx-[1.2rem] mt-4 rounded border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-700"
+          className="mx-[1.2rem] mt-4 rounded-sm border border-primary bg-primary-transparent px-4 py-3 text-[1.3rem] text-primary"
         >
           {notice}
         </div>
       )}
 
-      <ListDiv className="overflow-x-auto">
-        <div className="w-[130%]">
-          <div className="card-header flex items-center justify-between">
-            <h3 className="text-2xl font-medium">
-              노후하수관로 정밀조사 및 정비사업 현황{" "}
-              <span className="text-base text-gray-500">
-                ({data.totalElements.toLocaleString("ko-KR")}건)
-              </span>
-            </h3>
-          </div>
-          <UiTable<ObsltPplTableRow>
-            headName=""
-            headlist={TABLE_HEADLIST}
-            tableData={rows}
-            pageSize={DEFAULT_LIST_SIZE}
-            total={data.totalElements}
-            curPage={page}
-            widthFixed
-            onPageChange={(nextPage) => {
-              setPage(nextPage);
-              const queryString = createListQueryString(
-                nextPage,
-                appliedSearch,
-                appliedCtpvCd,
-                appliedSggCd,
-              );
-              router.replace(
-                `/oper/obsltPplBiz${queryString ? `?${queryString}` : ""}`,
-                { scroll: false },
-              );
-            }}
-            resetPageNo={resetPageNo}
-            cellClick={(index) => {
-              if (typeof index !== "number" || !rows[index]) return;
-              const queryString = createListQueryString(
-                page,
-                appliedSearch,
-                appliedCtpvCd,
-                appliedSggCd,
-              );
-              router.push(
-                `/oper/obsltPplBiz/register/${rows[index].obsltSwagePplBizSn}${queryString ? `?${queryString}` : ""}`,
-              );
-            }}
-            renderCell={(row, headId) => {
-              if (!DATE_FIELD_SET.has(headId as keyof ObsltPplBusiness))
-                return undefined;
-              return formatDate(
-                row[headId as keyof ObsltPplTableRow] as
-                  | string
-                  | null
-                  | undefined,
-              );
-            }}
-          />
-        </div>
-      </ListDiv>
+      <div className="mt-4 w-full min-w-0 max-w-full overflow-hidden">
+        <StandardDataTable
+          table={table}
+          title="노후 하수관로 정비사업 목록"
+          scrollMode="horizontal"
+          minTableWidth={TABLE_MIN_WIDTH}
+          className="table-fixed"
+          onRowClick={handleOpenDetail}
+          actions={
+            <>
+              <Button type="button" onClick={() => void handleDownload()}>
+                엑셀다운로드
+              </Button>
+              <Button type="button" onClick={handleRegister}>
+                등록
+              </Button>
+              <Button type="button" onClick={handleOpenCfmtnBgt}>
+                최종확정예산사업
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".xlsx"
+                className="hidden"
+                onChange={(event) => void handleUpload(event.target.files?.[0])}
+              />
+              <Button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                업로드
+              </Button>
+            </>
+          }
+        />
+      </div>
     </>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/model/popupDefinitions.ts b/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
index 8fcacc05d..2f0c363c6 100644
--- a/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
+++ b/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
@@ -4,13 +4,13 @@ export const windowPopupDefinitions = {
   cfmtnBgt: {
     key: "cfmtnBgt",
     title: "최종확정예산사업",
-    width: 1500,
-    height: 900,
+    width: 1400,
+    height: 720,
     requiredParams: ["bizSe"],
   },
   exmnBusinessRegister: {
     key: "exmnBusinessRegister",
-    title: "사업정보 등록",
+    title: "조사사업 등록",
     width: 1000,
     height: 620,
   },
@@ -34,13 +34,6 @@ export const windowPopupDefinitions = {
     width: 1280,
     height: 900,
   },
-  dredgingDetail: {
-    key: "dredgingDetail",
-    title: "준설결과 상세",
-    width: 1280,
-    height: 900,
-    requiredParams: ["dredgingJobSn", "pipeFid", "longitude", "latitude"],
-  },
   dredgingEdit: {
     key: "dredgingEdit",
     title: "준설결과 수정",
@@ -70,13 +63,13 @@ export const windowPopupDefinitions = {
   },
   floodPreUpload: {
     key: "floodPreUpload",
-    title: "도시침수 예방사업 등록",
+    title: "도시침수예방사업 등록",
     width: 860,
     height: 360,
   },
   floodPreTable: {
     key: "floodPreTable",
-    title: "도시침수 예방사업 상세",
+    title: "도시침수예방사업 상세",
     width: 1400,
     height: 900,
     requiredParams: ["fileNm", "atflId"],
@@ -96,21 +89,22 @@ export const windowPopupDefinitions = {
   },
   mapSearch: {
     key: "mapSearch",
-    title: "관망도 검색",
+    title: "정보검색",
     width: 1280,
     height: 980,
+    maximize: true,
   },
   inftwtResultPopup: {
     key: "inftwtResultPopup",
     title: "침입수 분석결과",
     width: 1280,
-    height: 900,
+    height: 830,
   },
   rdiiResultPopup: {
     key: "rdiiResultPopup",
     title: "RDII 분석결과",
-    width: 1280,
-    height: 900,
+    width: 1400,
+    height: 830,
   },
   infilChart: {
     key: "infilChart",
@@ -143,7 +137,7 @@ export const windowPopupDefinitions = {
   },
   agedPipePopup: {
     key: "agedPipePopup",
-    title: "노후 하수관로 관리 ",
+    title: "노후 하수관로 목록",
     width: 850,
     height: 600,
     placement: "browser-left",
@@ -173,13 +167,13 @@ export const windowPopupDefinitions = {
     key: "pipeAnalysisPopup",
     title: "관로분석",
     width: 1180,
-    height: 820,
+    height: 950,
   },
   pipeAnalysisDetailPopup: {
     key: "pipeAnalysisDetailPopup",
     title: "관로현황",
     width: 1180,
-    height: 760,
+    height: 820,
   },
   repairHistoryPopup: {
     key: "repairHistoryPopup",
@@ -198,7 +192,7 @@ export const windowPopupDefinitions = {
     key: "agedPipeStatusByCtpvPopup",
     title: "시도별 노후관로현황",
     width: 1160,
-    height: 760,
+    height: 790,
   },
   fldngHstryPopup: {
     key: "fldngHstryPopup",
diff --git a/apps/sn/src/features/windowPopup/registry.tsx b/apps/sn/src/features/windowPopup/registry.tsx
index da5b58080..a6c9d8d5e 100644
--- a/apps/sn/src/features/windowPopup/registry.tsx
+++ b/apps/sn/src/features/windowPopup/registry.tsx
@@ -1,42 +1,128 @@
+"use client";
+
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import dynamic from "next/dynamic";
+import type { ComponentType } from "react";
+
 import {
   windowPopupDefinitions,
   type WindowPopupKey,
 } from "./model/popupDefinitions";
-import type { WindowPopupRegistryItem } from "./model/types";
-import AgedPipePopupContent from "./ui/AgedPipePopupContent";
-import AgedPipeStatusByCtpvPopupContent from "./ui/AgedPipeStatusByCtpvPopupContent";
-import DredgingRegisterPopupContent from "./ui/DredgingRegisterPopupContent";
-import DredgingDetailPopupContent from "./ui/DredgingDetailPopupContent";
-import DredgingEditPopupContent from "./ui/DredgingEditPopupContent";
-import ExmnBusinessRegisterPopupContent from "./ui/ExmnBusinessRegisterPopupContent";
-import ExmnPipeReportPopupContent from "./ui/ExmnPipeReportPopupContent";
-import ExmnResultRegisterPopupContent from "./ui/ExmnResultRegisterPopupContent";
-import ExmnSurveyDetailPopupContent from "./ui/ExmnSurveyDetailPopupContent";
-import FloodPreTablePopupContent from "./ui/FloodPreTablePopupContent";
-import FloodPreUploadPopupContent from "./ui/FloodPreUploadPopupContent";
-import InfilChartPopupContent from "./ui/InfilChartPopupContent";
-import InftwtResultPopupContent from "./ui/InftwtResultPopupContent";
-import OldPpUploadPopupContent from "./ui/OldPpUploadPopupContent";
-import OldPpTablePopupContent from "./ui/OldPpTablePopupContent";
-import RdiiChartPopupContent from "./ui/RdiiChartPopupContent";
-import RdiiResultPopupContent from "./ui/RdiiResultPopupContent";
-import ReportFilesPopupContent from "./ui/ReportFilesPopupContent";
-import ReportTabPopupContent from "./ui/ReportTabPopupContent";
-import SearchModalPopupContent from "./ui/SearchModalPopupContent";
-import SinkholePopupContent from "./ui/SinkholePopupContent";
-import SbmrgDngrMapPopupContent from "./ui/SbmrgDngrMapPopupContent";
-import FloodDngrMapPopupContent from "./ui/FloodDngrMapPopupContent";
-import SscDetailPopupContent from "./ui/SscDetailPopupContent";
-import type { WindowPopupContentProps } from "./model/types";
+import type {
+  WindowPopupContentProps,
+  WindowPopupRegistryItem,
+} from "./model/types";
 import FeaturePlaceholderPopupContent from "./ui/FeaturePlaceholderPopupContent";
-import FldngHstryPopupContent from "./ui/FldngHstryPopupContent";
-import GisEditSessionPopupContent from "./ui/GisEditSessionPopupContent";
-import GisManagementPopupContent from "./ui/GisManagementPopupContent";
-import PipeAnalysisPopupContent from "./ui/PipeAnalysisPopupContent";
-import PipeAnalysisDetailPopupContent from "./ui/PipeAnalysisDetailPopupContent";
-import RepairHistoryPopupContent from "./ui/RepairHistoryPopupContent";
-import WaterRiskPopupContent from "./ui/WaterRiskPopupContent";
-import CfmtnBgtPopupContent from "../cfmtnBgt/ui/CfmtnBgtPopupContent";
+
+type WindowPopupModule = {
+  default: ComponentType<WindowPopupContentProps>;
+};
+
+const PopupChunkLoading = () => (
+  <div className="relative min-h-dvh">
+    <LoadingOverlay isLoading />
+  </div>
+);
+
+const loadPopupContent = (loader: () => Promise<WindowPopupModule>) =>
+  dynamic(loader, {
+    ssr: false,
+    loading: PopupChunkLoading,
+  });
+
+const CfmtnBgtPopupContent = loadPopupContent(
+  () => import("../cfmtnBgt/ui/CfmtnBgtPopupContent"),
+);
+const AgedPipePopupContent = loadPopupContent(
+  () => import("./ui/AgedPipePopupContent"),
+);
+const AgedPipeStatusByCtpvPopupContent = loadPopupContent(
+  () => import("./ui/AgedPipeStatusByCtpvPopupContent"),
+);
+const DredgingRegisterPopupContent = loadPopupContent(
+  () => import("./ui/DredgingRegisterPopupContent"),
+);
+const DredgingEditPopupContent = loadPopupContent(
+  () => import("./ui/DredgingEditPopupContent"),
+);
+const ExmnBusinessRegisterPopupContent = loadPopupContent(
+  () => import("./ui/ExmnBusinessRegisterPopupContent"),
+);
+const ExmnPipeReportPopupContent = loadPopupContent(
+  () => import("./ui/ExmnPipeReportPopupContent"),
+);
+const ExmnResultRegisterPopupContent = loadPopupContent(
+  () => import("./ui/ExmnResultRegisterPopupContent"),
+);
+const ExmnSurveyDetailPopupContent = loadPopupContent(
+  () => import("./ui/ExmnSurveyDetailPopupContent"),
+);
+const FloodPreTablePopupContent = loadPopupContent(
+  () => import("./ui/FloodPreTablePopupContent"),
+);
+const FloodPreUploadPopupContent = loadPopupContent(
+  () => import("./ui/FloodPreUploadPopupContent"),
+);
+const InfilChartPopupContent = loadPopupContent(
+  () => import("./ui/InfilChartPopupContent"),
+);
+const InftwtResultPopupContent = loadPopupContent(
+  () => import("./ui/InftwtResultPopupContent"),
+);
+const OldPpUploadPopupContent = loadPopupContent(
+  () => import("./ui/OldPpUploadPopupContent"),
+);
+const OldPpTablePopupContent = loadPopupContent(
+  () => import("./ui/OldPpTablePopupContent"),
+);
+const RdiiChartPopupContent = loadPopupContent(
+  () => import("./ui/RdiiChartPopupContent"),
+);
+const RdiiResultPopupContent = loadPopupContent(
+  () => import("./ui/RdiiResultPopupContent"),
+);
+const ReportFilesPopupContent = loadPopupContent(
+  () => import("./ui/ReportFilesPopupContent"),
+);
+const ReportTabPopupContent = loadPopupContent(
+  () => import("./ui/ReportTabPopupContent"),
+);
+const SearchModalPopupContent = loadPopupContent(
+  () => import("./ui/SearchModalPopupContent"),
+);
+const SinkholePopupContent = loadPopupContent(
+  () => import("./ui/SinkholePopupContent"),
+);
+const SbmrgDngrMapPopupContent = loadPopupContent(
+  () => import("./ui/SbmrgDngrMapPopupContent"),
+);
+const FloodDngrMapPopupContent = loadPopupContent(
+  () => import("./ui/FloodDngrMapPopupContent"),
+);
+const SscDetailPopupContent = loadPopupContent(
+  () => import("./ui/SscDetailPopupContent"),
+);
+const FldngHstryPopupContent = loadPopupContent(
+  () => import("./ui/FldngHstryPopupContent"),
+);
+const GisEditSessionPopupContent = loadPopupContent(
+  () => import("./ui/GisEditSessionPopupContent"),
+);
+const GisManagementPopupContent = loadPopupContent(
+  () => import("./ui/GisManagementPopupContent"),
+);
+const PipeAnalysisPopupContent = loadPopupContent(
+  () => import("./ui/PipeAnalysisPopupContent"),
+);
+const PipeAnalysisDetailPopupContent = loadPopupContent(
+  () => import("./ui/PipeAnalysisDetailPopupContent"),
+);
+const RepairHistoryPopupContent = loadPopupContent(
+  () => import("./ui/RepairHistoryPopupContent"),
+);
+const WaterRiskPopupContent = loadPopupContent(
+  () => import("./ui/WaterRiskPopupContent"),
+);
 
 const FloodPredictionPlaceholderPopupContent = (
   _props: WindowPopupContentProps,
@@ -73,10 +159,6 @@ export const windowPopupRegistry = {
     ...windowPopupDefinitions.dredgingRegister,
     component: DredgingRegisterPopupContent,
   },
-  dredgingDetail: {
-    ...windowPopupDefinitions.dredgingDetail,
-    component: DredgingDetailPopupContent,
-  },
   dredgingEdit: {
     ...windowPopupDefinitions.dredgingEdit,
     component: DredgingEditPopupContent,
diff --git a/apps/sn/src/features/windowPopup/ui/DredgingEditPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/DredgingEditPopupContent.tsx
index 8ab7bf42e..cf863a025 100644
--- a/apps/sn/src/features/windowPopup/ui/DredgingEditPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/DredgingEditPopupContent.tsx
@@ -5,7 +5,7 @@ import DredgingDetailPopupPage from "@/app/(with-base-layout)/oper/dredging/comp
 import { postPopupMessage } from "../lib/popupMessage";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "../model/types";
 import type { WindowPopupContentProps } from "../model/types";
-import { buildDredgingPopupRecord } from "./DredgingDetailPopupContent";
+import { buildDredgingPopupRecord } from "./dredgingPopupRecord";
 
 /** 상세 화면과 같은 구조에서 선택 관로의 사진·위치·준설일자를 수정한다. */
 export default function DredgingEditPopupContent({
diff --git a/apps/sn/src/features/windowPopup/ui/DredgingRegisterPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/DredgingRegisterPopupContent.tsx
index cc05abe62..47fb95d24 100644
--- a/apps/sn/src/features/windowPopup/ui/DredgingRegisterPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/DredgingRegisterPopupContent.tsx
@@ -12,7 +12,7 @@ export default function DredgingRegisterPopupContent() {
   }, []);
 
   if (!isMounted) {
-    return <div className="min-h-dvh bg-[#f3f7fa]" suppressHydrationWarning />;
+    return <div className="min-h-dvh bg-container" suppressHydrationWarning />;
   }
 
   return <DredgingRegisterPopupPage />;
diff --git a/apps/sn/src/features/windowPopup/ui/ExmnBusinessRegisterPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ExmnBusinessRegisterPopupContent.tsx
index 31d225c71..9e5e1e739 100644
--- a/apps/sn/src/features/windowPopup/ui/ExmnBusinessRegisterPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/ExmnBusinessRegisterPopupContent.tsx
@@ -6,10 +6,12 @@ import type { WindowPopupContentProps } from "../model/types";
 
 /** query parameter가 단일 문자열인지 안전하게 해석한다. */
 const getParam = (value: string | string[] | undefined) =>
-  Array.isArray(value) ? value[0] ?? "" : value ?? "";
+  Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
 
 /** 조사사업 등록 WindowPopup을 실제 업무 화면에 연결한다. */
-export default function ExmnBusinessRegisterPopupContent({ searchParams }: WindowPopupContentProps) {
+export default function ExmnBusinessRegisterPopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
@@ -17,7 +19,7 @@ export default function ExmnBusinessRegisterPopupContent({ searchParams }: Windo
   }, []);
 
   if (!isMounted) {
-    return <div className="min-h-dvh bg-[#f3f7fa]" suppressHydrationWarning />;
+    return <div className="min-h-dvh bg-container" suppressHydrationWarning />;
   }
 
   return (
diff --git a/apps/sn/src/features/windowPopup/ui/ExmnPipeReportPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ExmnPipeReportPopupContent.tsx
index 4e1608b41..b34be8eef 100644
--- a/apps/sn/src/features/windowPopup/ui/ExmnPipeReportPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/ExmnPipeReportPopupContent.tsx
@@ -3,11 +3,13 @@
 import { useEffect, useState } from "react";
 
 import { downloadExmnPipeReport } from "@/features/exmn/api/exmn-business-api";
+import { StandardPopupLayout } from "@common/business_components";
+import { Button } from "@common/components";
 
 import type { WindowPopupContentProps } from "../model/types";
 
 const getParam = (value: string | string[] | undefined) =>
-  Array.isArray(value) ? value[0] ?? "" : value ?? "";
+  Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
 
 /** 공통 Blob API 오류 문자열에서 백엔드의 사용자 안내 메시지만 추출한다. */
 const getReportErrorMessage = (error: unknown) => {
@@ -15,7 +17,9 @@ const getReportErrorMessage = (error: unknown) => {
     return "관로 조사보고서를 불러오지 못했습니다.";
   }
 
-  const backendMessage = error.message.match(/"message":"((?:\\.|[^"\\])*)"/)?.[1];
+  const backendMessage = error.message.match(
+    /"message":"((?:\\.|[^"\\])*)"/,
+  )?.[1];
   if (!backendMessage) return error.message;
 
   try {
@@ -66,16 +70,23 @@ export default function ExmnPipeReportPopupContent({
   }, [exmnBizId, pipeNumber]);
 
   return (
-    <main className="sn-popup-page">
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">관로 조사보고서</h1>
-        <span className="text-[1.05rem] text-white">
-          관로번호 {pipeNumber}
-          {reportNo ? ` · 보고서번호 ${reportNo}` : ""}
-        </span>
-      </header>
-
-      <section className="min-h-0 flex-1 bg-container p-3">
+    <StandardPopupLayout
+      title="관로 조사보고서"
+      showDefaultCancelAction={false}
+      actions={
+        <>
+          <span className="text-[1.05rem] text-label">
+            관로번호 {pipeNumber}
+            {reportNo ? ` · 보고서번호 ${reportNo}` : ""}
+          </span>
+          <Button type="button" color="white" onClick={() => window.close()}>
+            취소
+          </Button>
+        </>
+      }
+      bodyClassName="flex min-h-0 flex-1 p-3"
+    >
+      <section className="min-h-0 flex-1">
         {errorMessage ? (
           <div className="flex h-full items-center justify-center rounded-sm border border-red-200 bg-red-50 p-6 text-center text-[1.1rem] text-red-700">
             {errorMessage}
@@ -84,14 +95,14 @@ export default function ExmnPipeReportPopupContent({
           <iframe
             title={`${pipeNumber} 관로 조사보고서`}
             src={reportUrl}
-            className="h-full w-full border border-border bg-white"
+            className="h-full w-full border border-border bg-background"
           />
         ) : (
-          <div className="flex h-full items-center justify-center rounded-sm border border-border bg-white text-[1.1rem] text-muted-foreground">
+          <div className="flex h-full items-center justify-center rounded-sm border border-border bg-background text-[1.1rem] text-muted-foreground">
             조사보고서를 불러오는 중입니다.
           </div>
         )}
       </section>
-    </main>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/ExmnResultRegisterPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ExmnResultRegisterPopupContent.tsx
index 22a8e0d51..621812695 100644
--- a/apps/sn/src/features/windowPopup/ui/ExmnResultRegisterPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/ExmnResultRegisterPopupContent.tsx
@@ -7,10 +7,12 @@ import type { WindowPopupContentProps } from "../model/types";
 
 /** query parameter가 단일 문자열인지 안전하게 해석한다. */
 const getParam = (value: string | string[] | undefined) =>
-  Array.isArray(value) ? value[0] ?? "" : value ?? "";
+  Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
 
 /** 부모 목록이 전달한 선택 사업 요약을 팝업 표시 계약으로 복원한다. */
-const buildBusinessSummary = (searchParams: WindowPopupContentProps["searchParams"]): ExmnBusiness => ({
+const buildBusinessSummary = (
+  searchParams: WindowPopupContentProps["searchParams"],
+): ExmnBusiness => ({
   exmnBizId: getParam(searchParams.exmnBizId),
   bizYr: getParam(searchParams.bizYr),
   bizNm: getParam(searchParams.bizNm),
@@ -24,7 +26,9 @@ const buildBusinessSummary = (searchParams: WindowPopupContentProps["searchParam
 });
 
 /** 선택 조사사업의 결과등록 WindowPopup을 실제 업로드 화면에 연결한다. */
-export default function ExmnResultRegisterPopupContent({ searchParams }: WindowPopupContentProps) {
+export default function ExmnResultRegisterPopupContent({
+  searchParams,
+}: WindowPopupContentProps) {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
@@ -32,7 +36,7 @@ export default function ExmnResultRegisterPopupContent({ searchParams }: WindowP
   }, []);
 
   if (!isMounted) {
-    return <div className="min-h-dvh bg-[#f3f7fa]" suppressHydrationWarning />;
+    return <div className="min-h-dvh bg-container" suppressHydrationWarning />;
   }
 
   const businessSummary = buildBusinessSummary(searchParams);
diff --git a/apps/sn/src/features/windowPopup/ui/ExmnSurveyDetailPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ExmnSurveyDetailPopupContent.tsx
index b314b6406..a684fd121 100644
--- a/apps/sn/src/features/windowPopup/ui/ExmnSurveyDetailPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/ExmnSurveyDetailPopupContent.tsx
@@ -1,6 +1,9 @@
 "use client";
 
-import type { ExmnBusiness, ExmnJobType } from "@/features/exmn/model/exmn-business-types";
+import type {
+  ExmnBusiness,
+  ExmnJobType,
+} from "@/features/exmn/model/exmn-business-types";
 import type { ExmnDetailDefectType } from "@/features/exmn/model/exmn-detail-table";
 import { ExmnSurveyDetailPopupPage } from "@/features/exmn/ui/ExmnSurveyDetailPopupPage";
 import { useEffect, useState } from "react";
@@ -8,7 +11,7 @@ import type { WindowPopupContentProps } from "../model/types";
 
 /** query parameter가 단일 문자열인지 안전하게 해석한다. */
 const getParam = (value: string | string[] | undefined) =>
-  Array.isArray(value) ? value[0] ?? "" : value ?? "";
+  Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
 
 /** 상세보기 버튼이 전달한 조사유형을 PPL·MNHL 두 값으로 제한한다. */
 const getJobType = (value: string | string[] | undefined): ExmnJobType =>
@@ -51,7 +54,7 @@ export default function ExmnSurveyDetailPopupContent({
   }, []);
 
   if (!isMounted) {
-    return <div className="min-h-dvh bg-[#f3f7fa]" suppressHydrationWarning />;
+    return <div className="min-h-dvh bg-container" suppressHydrationWarning />;
   }
 
   return (
diff --git a/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
index a38a8b46b..502c24eb1 100644
--- a/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
@@ -4,22 +4,21 @@ type Props = {
 
 export default function FeaturePlaceholderPopupContent({ title }: Props) {
   return (
-    <main className="sn-popup-page">
-      <header className="sn-popup-header">
-        <h1 className="sn-popup-title">{title}</h1>
-      </header>
-
-      <section className="flex flex-1 items-center justify-center bg-container p-8">
-        <div className="w-full max-w-[520px] rounded-md border border-border bg-background p-8 text-center shadow-sm">
-          <h2 className="text-[1.35rem] font-semibold text-foreground">{title}</h2>
-          <p className="mt-4 text-[1.1rem] leading-7 text-label">
-            현재는 팝업 창 구조만 우선 연결했습니다.
+    <StandardPopupLayout title={title}>
+      <section className="card card-border !m-0 flex flex-1 items-center justify-center p-8">
+        <div className="w-full max-w-[560px] rounded-md border border-dashed border-border bg-container px-8 py-10 text-center">
+          <h2 className="text-[1.4rem] font-semibold text-foreground">
+            서비스 준비 중입니다.
+          </h2>
+          <p className="mt-4 text-[1.15rem] leading-7 text-label">
+            {title} 기능은 현재 제공을 준비하고 있습니다.
           </p>
           <p className="mt-2 text-[1.05rem] leading-7 text-muted-foreground">
-            상세 기능은 추후 단계에서 구현될 예정입니다.
+            기능이 준비되면 이 화면에서 조회할 수 있습니다.
           </p>
         </div>
       </section>
-    </main>
+    </StandardPopupLayout>
   );
 }
+import { StandardPopupLayout } from "@common/business_components";
diff --git a/apps/sn/src/features/windowPopup/ui/FloodPreTablePopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FloodPreTablePopupContent.tsx
index bbc342b70..620ac38d7 100644
--- a/apps/sn/src/features/windowPopup/ui/FloodPreTablePopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/FloodPreTablePopupContent.tsx
@@ -1,9 +1,20 @@
-import TableModal from "@/app/(with-base-layout)/oper/floodPre/tableModal";
+"use client";
+
+import dynamic from "next/dynamic";
+
+import { StandardPopupLayout } from "@common/business_components";
 import { windowPopupDefinitions } from "../model/popupDefinitions";
 import type { WindowPopupContentProps } from "../model/types";
 import PopupMissingParams from "./PopupMissingParams";
 import { getPopupParamValue } from "./popupContentUtils";
 
+// 엑셀 파서는 브라우저 전용 의존성을 포함한다. 다른 WindowPopup까지 SSR 단계에서
+// 함께 실패하지 않도록 해당 상세 팝업을 실제로 열 때만 클라이언트에서 불러온다.
+const TableModal = dynamic(
+  () => import("@/app/(with-base-layout)/oper/floodPre/tableModal"),
+  { ssr: false },
+);
+
 export default function FloodPreTablePopupContent({
   searchParams,
 }: WindowPopupContentProps) {
@@ -24,13 +35,11 @@ export default function FloodPreTablePopupContent({
   }
 
   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>
+    <StandardPopupLayout
+      title={windowPopupDefinitions.floodPreTable.title}
+      bodyClassName="overflow-hidden"
+    >
+      <TableModal fileNm={fileNm} atflId={atflId} />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/FloodPreUploadPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FloodPreUploadPopupContent.tsx
index 629c6be53..0f9f40bb2 100644
--- a/apps/sn/src/features/windowPopup/ui/FloodPreUploadPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/FloodPreUploadPopupContent.tsx
@@ -4,11 +4,15 @@ 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 { useAlertStore } from "@/shared/lib";
+import { StandardPopupLayout } from "@common/business_components";
 import { postPopupMessageAndClose } from "../lib/popupMessage";
 import { windowPopupDefinitions } from "../model/popupDefinitions";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "../model/types";
 
 export default function FloodPreUploadPopupContent() {
+  const alert = useAlertStore((state) => state.setMessage);
+
   const handleSubmit = async (
     fileNm: string,
     year: string,
@@ -26,17 +30,20 @@ export default function FloodPreUploadPopupContent() {
     });
 
     if (data) {
-      alert("파일이 등록되었습니다.");
-      postPopupMessageAndClose(WINDOW_POPUP_MESSAGE_TYPE.FLOOD_PRE_UPLOAD_COMPLETED);
+      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>
+    <StandardPopupLayout
+      title={windowPopupDefinitions.floodPreUpload.title}
+      bodyClassName="[&>div>div.card]:!m-0 [&>div>div:first-child]:hidden"
+    >
+      <OperFileUploadForm title="" onSubmit={handleSubmit} />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/GisEditSessionPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/GisEditSessionPopupContent.tsx
index 28a60967c..99bfb0309 100644
--- a/apps/sn/src/features/windowPopup/ui/GisEditSessionPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/GisEditSessionPopupContent.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { StandardPopupLayout } from "@common/business_components";
+import { Button } from "@common/components";
 
 import GisEditSessionPanel from "@/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel";
 import type { GisEditSessionSnapshot } from "@/app/(map-layout)/map/components/gisEdit/gisEditTypes";
@@ -21,13 +23,19 @@ const EMPTY_SNAPSHOT: GisEditSessionSnapshot = {
   focusedChangeId: null,
 };
 
-const postMessageToOpener = (type: string, payload?: Record<string, unknown>) => {
+const postMessageToOpener = (
+  type: string,
+  payload?: Record<string, unknown>,
+) => {
   if (typeof window === "undefined" || !window.opener) return;
   window.opener.postMessage({ type, payload }, window.location.origin);
 };
 
-export default function GisEditSessionPopupContent(_props: WindowPopupContentProps) {
-  const [snapshot, setSnapshot] = useState<GisEditSessionSnapshot>(EMPTY_SNAPSHOT);
+export default function GisEditSessionPopupContent(
+  _props: WindowPopupContentProps,
+) {
+  const [snapshot, setSnapshot] =
+    useState<GisEditSessionSnapshot>(EMPTY_SNAPSHOT);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -46,43 +54,52 @@ export default function GisEditSessionPopupContent(_props: WindowPopupContentPro
   }, []);
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-[#f6f8fb]">
-      <header className="flex min-h-[48px] items-center justify-between gap-3 border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.2rem] font-semibold text-white">
-          {windowPopupDefinitions.gisEditSessionPopup.title}
-        </h1>
-        <button
+    <StandardPopupLayout
+      title={windowPopupDefinitions.gisEditSessionPopup.title}
+      actions={
+        <Button
           type="button"
-          className="rounded border border-white/70 bg-white/10 px-3 py-1.5 text-[12px] font-semibold text-white transition hover:bg-white/20"
+          color="white"
           onClick={() => {
-            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_SHOW_INLINE);
+            postMessageToOpener(
+              WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_SHOW_INLINE,
+            );
           }}
         >
           화면에서 보기
-        </button>
-      </header>
-
-      <section className="flex-1 overflow-hidden p-3">
+        </Button>
+      }
+    >
+      <section className="card card-border !m-0 flex-1 overflow-hidden p-3">
         <GisEditSessionPanel
           {...snapshot}
           className="h-full shadow-none"
           variant="popup"
           onRemoveFocusedChange={() => {
-            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_FOCUSED_CHANGE);
+            postMessageToOpener(
+              WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_FOCUSED_CHANGE,
+            );
           }}
           onRemoveLastChange={() => {
-            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_LAST_CHANGE);
+            postMessageToOpener(
+              WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_LAST_CHANGE,
+            );
           }}
           onClearChanges={() => {
-            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_CLEAR_CHANGES);
+            postMessageToOpener(
+              WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_CLEAR_CHANGES,
+            );
           }}
           onFocusChange={(changeId) => {
-            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_FOCUS_CHANGE, {
-              changeId,
-            });
+            postMessageToOpener(
+              WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_FOCUS_CHANGE,
+              {
+                changeId,
+              },
+            );
           }}
         />
       </section>
-    </main>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/InftwtResultPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/InftwtResultPopupContent.tsx
index 66bb296e2..ce74291ea 100644
--- a/apps/sn/src/features/windowPopup/ui/InftwtResultPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/InftwtResultPopupContent.tsx
@@ -12,8 +12,8 @@ export default function InftwtResultPopupContent() {
   }, []);
 
   if (!isMounted) {
-    return <div className="h-dvh bg-white" suppressHydrationWarning />;
+    return <div className="h-dvh bg-background" suppressHydrationWarning />;
   }
 
   return <InftwtResultPopupPage />;
-}
\ No newline at end of file
+}
diff --git a/apps/sn/src/features/windowPopup/ui/MapPopupDataTable.tsx b/apps/sn/src/features/windowPopup/ui/MapPopupDataTable.tsx
new file mode 100644
index 000000000..f6783006e
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/MapPopupDataTable.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+} from "@tanstack/react-table";
+
+import {
+  StandardDataTable,
+  getStandardRowNumber,
+  type ScrollMode,
+  type UiHeadProps,
+} from "@common/business_components";
+
+type MapPopupDataTableProps<T extends Record<string, unknown>> = {
+  rows: T[];
+  headlist: UiHeadProps[];
+  title: ReactNode;
+  total: number;
+  page: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+  actions?: ReactNode;
+  loading?: boolean;
+  scrollMode?: ScrollMode;
+  minTableWidth?: string;
+  emptyMessage?: string;
+  viewPagination?: boolean;
+  fillAvailableHeight?: boolean;
+  rowId?: (row: T, index: number) => string;
+  selectedRowId?: string;
+  onRowClick?: (row: T, index: number) => void;
+  onCellClick?: (row: T, rowIndex: number, columnId: string) => void;
+  clickableHeadIds?: string[];
+  renderCell?: (
+    row: T,
+    headId: string,
+    rowIndex: number,
+  ) => ReactNode | undefined;
+};
+
+const ROW_NUMBER_IDS = new Set(["no", "rowNo", "rowNumber"]);
+
+const formatCellValue = (value: unknown) => {
+  if (value === null || value === undefined || value === "") return "-";
+  if (typeof value === "number") return value.toLocaleString("ko-KR");
+  return String(value);
+};
+
+/** 지도 WindowPopup 목록을 CS 공통 표·순번·페이징 규칙으로 연결한다. */
+export default function MapPopupDataTable<T extends Record<string, unknown>>({
+  rows,
+  headlist,
+  title,
+  total,
+  page,
+  pageSize,
+  onPageChange,
+  actions,
+  loading = false,
+  scrollMode = "none",
+  minTableWidth = "100%",
+  emptyMessage,
+  viewPagination = true,
+  fillAvailableHeight = false,
+  rowId,
+  selectedRowId,
+  onRowClick,
+  onCellClick,
+  clickableHeadIds,
+  renderCell,
+}: MapPopupDataTableProps<T>) {
+  const visibleHeads = useMemo(
+    () =>
+      headlist.filter(
+        (head) => head.visible !== false && head.id && head.id.length > 1,
+      ),
+    [headlist],
+  );
+  const columns = useMemo<ColumnDef<T>[]>(
+    () =>
+      visibleHeads.map((head) => ({
+        id: head.id,
+        accessorFn: (row) => row[head.id],
+        header: ROW_NUMBER_IDS.has(head.id) ? "순번" : head.title,
+        cell: ({ row, getValue }) => {
+          const rowIndex = row.index;
+          const rendered = renderCell?.(row.original, head.id, rowIndex);
+          const value = ROW_NUMBER_IDS.has(head.id)
+            ? getStandardRowNumber({
+                total,
+                rowIndex,
+                pageIndex: page - 1,
+                pageSize,
+              })
+            : rendered === undefined
+              ? formatCellValue(getValue())
+              : rendered;
+          const isClickable =
+            Boolean(onCellClick) &&
+            (!clickableHeadIds || clickableHeadIds.includes(head.id));
+
+          return isClickable ? (
+            <button
+              type="button"
+              className="w-full cursor-pointer text-inherit"
+              onClick={(event) => {
+                event.stopPropagation();
+                onCellClick?.(row.original, rowIndex, head.id);
+              }}
+            >
+              {value}
+            </button>
+          ) : (
+            value
+          );
+        },
+        meta: {
+          align:
+            head.align === "left" || head.align === "right"
+              ? head.align
+              : "center",
+          width: head.widthPercent,
+        },
+      })),
+    [
+      clickableHeadIds,
+      onCellClick,
+      page,
+      pageSize,
+      renderCell,
+      total,
+      visibleHeads,
+    ],
+  );
+  const pagination: PaginationState = {
+    pageIndex: Math.max(page - 1, 0),
+    pageSize,
+  };
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: {
+      pagination,
+      rowSelection: selectedRowId ? { [selectedRowId]: true } : {},
+    },
+    rowCount: total,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row, index) => rowId?.(row, index) ?? String(index),
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      if (next.pageIndex === pagination.pageIndex) return;
+      onPageChange(next.pageIndex + 1);
+    },
+  });
+
+  return (
+    <StandardDataTable
+      table={table}
+      title={title}
+      actions={actions}
+      loading={loading}
+      emptyMessage={emptyMessage}
+      flushOuterMargin
+      className="!w-full !max-w-full"
+      scrollMode={scrollMode}
+      minTableWidth={minTableWidth}
+      viewPagination={viewPagination}
+      fillAvailableHeight={fillAvailableHeight}
+      onRowClick={
+        onRowClick ? (row) => onRowClick(row, rows.indexOf(row)) : undefined
+      }
+    />
+  );
+}
+
+export type { MapPopupDataTableProps };
diff --git a/apps/sn/src/features/windowPopup/ui/OldPpTablePopupContent.tsx b/apps/sn/src/features/windowPopup/ui/OldPpTablePopupContent.tsx
index 3d3439d9c..62a1e6dc5 100644
--- a/apps/sn/src/features/windowPopup/ui/OldPpTablePopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/OldPpTablePopupContent.tsx
@@ -1,9 +1,20 @@
-import TableModal from "@/app/(with-base-layout)/oper/oldPp/tableModal";
+"use client";
+
+import dynamic from "next/dynamic";
+
+import { StandardPopupLayout } from "@common/business_components";
 import { windowPopupDefinitions } from "../model/popupDefinitions";
 import type { WindowPopupContentProps } from "../model/types";
 import PopupMissingParams from "./PopupMissingParams";
 import { getPopupParamValue } from "./popupContentUtils";
 
+// 엑셀 파서는 브라우저 전용 의존성을 포함한다. 다른 WindowPopup까지 SSR 단계에서
+// 함께 실패하지 않도록 해당 상세 팝업을 실제로 열 때만 클라이언트에서 불러온다.
+const TableModal = dynamic(
+  () => import("@/app/(with-base-layout)/oper/oldPp/tableModal"),
+  { ssr: false },
+);
+
 export default function OldPpTablePopupContent({
   searchParams,
 }: WindowPopupContentProps) {
@@ -24,13 +35,11 @@ export default function OldPpTablePopupContent({
   }
 
   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>
+    <StandardPopupLayout
+      title={windowPopupDefinitions.oldPpTable.title}
+      bodyClassName="overflow-hidden"
+    >
+      <TableModal fileNm={fileNm} atflId={atflId} />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/OldPpUploadPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/OldPpUploadPopupContent.tsx
index e8e1b1e52..3af698e5a 100644
--- a/apps/sn/src/features/windowPopup/ui/OldPpUploadPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/OldPpUploadPopupContent.tsx
@@ -4,11 +4,15 @@ 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 { useAlertStore } from "@/shared/lib";
+import { StandardPopupLayout } from "@common/business_components";
 import { postPopupMessageAndClose } from "../lib/popupMessage";
 import { windowPopupDefinitions } from "../model/popupDefinitions";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "../model/types";
 
 export default function OldPpUploadPopupContent() {
+  const alert = useAlertStore((state) => state.setMessage);
+
   const handleSubmit = async (
     fileNm: string,
     year: string,
@@ -26,17 +30,20 @@ export default function OldPpUploadPopupContent() {
     });
 
     if (data) {
-      alert("파일이 등록되었습니다.");
-      postPopupMessageAndClose(WINDOW_POPUP_MESSAGE_TYPE.OLD_PP_UPLOAD_COMPLETED);
+      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>
+    <StandardPopupLayout
+      title={windowPopupDefinitions.oldPpUpload.title}
+      bodyClassName="[&>div>div.card]:!m-0 [&>div>div:first-child]:hidden"
+    >
+      <OperFileUploadForm title="" onSubmit={handleSubmit} />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/PopupMissingParams.tsx b/apps/sn/src/features/windowPopup/ui/PopupMissingParams.tsx
index 32b8bb088..fae700d27 100644
--- a/apps/sn/src/features/windowPopup/ui/PopupMissingParams.tsx
+++ b/apps/sn/src/features/windowPopup/ui/PopupMissingParams.tsx
@@ -1,3 +1,5 @@
+import { StandardPopupLayout } from "@common/business_components";
+
 export default function PopupMissingParams({
   title,
   missingParams,
@@ -6,14 +8,17 @@ export default function PopupMissingParams({
   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>
+    <StandardPopupLayout title={title}>
+      <section className="card card-border !m-0 flex flex-1 items-center justify-center p-8 text-center">
+        <div>
+          <p className="text-[1.3rem] text-label">
+            팝업을 여는 데 필요한 값이 누락되었습니다.
+          </p>
+          <p className="mt-2 text-[1.15rem] text-muted-foreground">
+            누락된 값: {missingParams.join(", ")}
+          </p>
+        </div>
+      </section>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/PopupSearchPanel.tsx b/apps/sn/src/features/windowPopup/ui/PopupSearchPanel.tsx
new file mode 100644
index 000000000..e7d4f871a
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/PopupSearchPanel.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { cn } from "@common/components";
+
+type PopupSearchPanelProps = {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+/** WindowPopup 조회조건의 외곽 카드, 패딩과 가로 스크롤 규칙을 한 곳에서 관리한다. */
+export default function PopupSearchPanel({
+  children,
+  className,
+  contentClassName,
+}: PopupSearchPanelProps) {
+  return (
+    <section
+      data-popup-search-panel
+      className={cn(
+        "card card-border !m-0 w-full min-w-0 shrink-0 !p-[1.2rem]",
+        className,
+      )}
+    >
+      <div className={cn("min-w-0", contentClassName)}>{children}</div>
+    </section>
+  );
+}
+
+export type { PopupSearchPanelProps };
diff --git a/apps/sn/src/features/windowPopup/ui/RdiiResultPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/RdiiResultPopupContent.tsx
index c3e6f3039..d72d727fa 100644
--- a/apps/sn/src/features/windowPopup/ui/RdiiResultPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/RdiiResultPopupContent.tsx
@@ -12,8 +12,8 @@ export default function RdiiResultPopupContent() {
   }, []);
 
   if (!isMounted) {
-    return <div className="h-dvh bg-white" suppressHydrationWarning />;
+    return <div className="h-dvh bg-background" suppressHydrationWarning />;
   }
 
   return <RdiiResultPopupPage />;
-}
\ No newline at end of file
+}
diff --git a/apps/sn/src/features/windowPopup/ui/ReportFilesPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ReportFilesPopupContent.tsx
index de3064383..8a029bfd6 100644
--- a/apps/sn/src/features/windowPopup/ui/ReportFilesPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/ReportFilesPopupContent.tsx
@@ -3,11 +3,13 @@
 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 { useAlertStore } from "@/shared/lib";
+import { StandardPopupLayout } from "@common/business_components";
 import { windowPopupDefinitions } from "../model/popupDefinitions";
 import type { WindowPopupContentProps } from "../model/types";
 import PopupMissingParams from "./PopupMissingParams";
 import { getPopupParamValue } from "./popupContentUtils";
+import MapPopupDataTable from "./MapPopupDataTable";
 
 type ReportDataFile = {
   no?: number;
@@ -18,7 +20,7 @@ type ReportDataFile = {
 };
 
 const REPORT_FILES_HEADLIST = [
-  { id: "no", title: "NO" },
+  { id: "no", title: "순번" },
   { id: "fileTitle", title: "파일명" },
   { id: "regDt", title: "등록일자" },
 ];
@@ -26,6 +28,7 @@ const REPORT_FILES_HEADLIST = [
 export default function ReportFilesPopupContent({
   searchParams,
 }: WindowPopupContentProps) {
+  const alert = useAlertStore((state) => state.setMessage);
   const clsfSystmSn = getPopupParamValue(searchParams.clsfSystmSn);
   const [files, setFiles] = useState<ReportDataFile[]>([]);
   const [allFiles, setAllFiles] = useState<ReportDataFile[]>([]);
@@ -38,11 +41,10 @@ export default function ReportFilesPopupContent({
     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,
-        }));
+        const result = await getDcData(
+          `/api/v1/file?clsfSystmSn=${clsfSystmSn}`,
+        );
+        const normalized = (result ?? []).map((item: ReportDataFile) => item);
         setAllFiles(normalized);
       } catch (error) {
         console.error("보고서 파일 목록 조회 실패:", error);
@@ -60,7 +62,11 @@ export default function ReportFilesPopupContent({
     setFiles(paged);
   }, [allFiles, curPage]);
 
-  const handleDownload = async (fileSn: string, fileTitle: string, filePath: string) => {
+  const handleDownload = async (
+    fileSn: string,
+    fileTitle: string,
+    filePath: string,
+  ) => {
     if (!filePath) {
       alert("filePath 정보가 없으므로 다운로드가 불가합니다.");
       return;
@@ -96,26 +102,22 @@ export default function ReportFilesPopupContent({
   }
 
   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>
+    <StandardPopupLayout title={windowPopupDefinitions.reportFiles.title}>
+      <LoadingOverlay isLoading={isLoading} />
+      <MapPopupDataTable
+        rows={files as Array<ReportDataFile & Record<string, unknown>>}
+        headlist={REPORT_FILES_HEADLIST}
+        title="보고서 파일 목록"
+        total={allFiles.length}
+        page={curPage}
+        pageSize={10}
+        onPageChange={setCurPage}
+        clickableHeadIds={["fileTitle"]}
+        onCellClick={(row) =>
+          void handleDownload(row.fileSn, row.fileTitle, row.filePath)
+        }
+        rowId={(row, index) => row.fileSn || String(index)}
+      />
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
index 14af20da4..c988e9038 100644
--- a/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
@@ -1,6 +1,7 @@
-"use client";
+"use client";
 
 import ReportTab from "@/app/(map-layout)/map/searchModal/reportTab";
+import { StandardPopupLayout } from "@common/business_components";
 import { useEffect, useState } from "react";
 import { windowPopupDefinitions } from "../model/popupDefinitions";
 import type { WindowPopupContentProps } from "../model/types";
@@ -18,15 +19,12 @@ export default function ReportTabPopupContent({
   }, []);
 
   if (!isMounted) {
-    return <div className="h-dvh bg-white" suppressHydrationWarning />;
+    return <div className="h-dvh bg-background" suppressHydrationWarning />;
   }
 
   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">
+    <StandardPopupLayout title={windowPopupDefinitions.reportTab.title}>
+      <div className="card card-border !m-0 min-h-0 flex-1 overflow-hidden">
         <ReportTab
           open={true}
           isSearch={false}
@@ -34,6 +32,6 @@ export default function ReportTabPopupContent({
           sggNm={sggNm || undefined}
         />
       </div>
-    </div>
+    </StandardPopupLayout>
   );
 }
diff --git a/apps/sn/src/features/windowPopup/ui/WindowPopupRenderer.tsx b/apps/sn/src/features/windowPopup/ui/WindowPopupRenderer.tsx
new file mode 100644
index 000000000..320cd9afd
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/WindowPopupRenderer.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import type { WindowPopupKey } from "../model/popupDefinitions";
+import { windowPopupRegistry } from "../registry";
+
+type WindowPopupRendererProps = {
+  popupKey: WindowPopupKey;
+  searchParams: Record<string, string | string[] | undefined>;
+};
+
+/**
+ * WindowPopup 구현들은 지도·엑셀처럼 브라우저 전용 모듈을 포함할 수 있다.
+ * 레지스트리를 클라이언트 경계 안에서 해석해 다른 팝업의 의존성이 SSR을 막지 않게 한다.
+ */
+export default function WindowPopupRenderer({
+  popupKey,
+  searchParams,
+}: WindowPopupRendererProps) {
+  const PopupComponent = windowPopupRegistry[popupKey].component;
+
+  return <PopupComponent searchParams={searchParams} />;
+}
diff --git a/apps/sn/src/features/windowPopup/ui/DredgingDetailPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/dredgingPopupRecord.ts
similarity index 83%
rename from apps/sn/src/features/windowPopup/ui/DredgingDetailPopupContent.tsx
rename to apps/sn/src/features/windowPopup/ui/dredgingPopupRecord.ts
index 9edbfc824..1694f8fbc 100644
--- a/apps/sn/src/features/windowPopup/ui/DredgingDetailPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/dredgingPopupRecord.ts
@@ -1,8 +1,5 @@
-"use client";
-
-import DredgingDetailPopupPage from "@/app/(with-base-layout)/oper/dredging/components/DredgingDetailPopupPage";
-
 import type { DredgingRecord } from "@/app/(with-base-layout)/oper/dredging/lib/types";
+
 import type { WindowPopupContentProps } from "../model/types";
 
 const getParam = (value: string | string[] | undefined) =>
@@ -20,7 +17,7 @@ const getNullableNumber = (value: string | string[] | undefined) => {
   return Number.isFinite(parsed) ? parsed : null;
 };
 
-/** 목록 행의 직렬화된 값을 준설 상세 화면 모델로 복원한다. */
+/** 목록 행의 직렬화된 값을 준설 수정 화면 모델로 복원한다. */
 export const buildDredgingPopupRecord = (
   searchParams: WindowPopupContentProps["searchParams"],
 ): DredgingRecord => ({
@@ -43,16 +40,10 @@ export const buildDredgingPopupRecord = (
   latitude: getNumber(searchParams.latitude),
   snappedLongitude: getNumber(searchParams.snappedLongitude),
   snappedLatitude: getNumber(searchParams.snappedLatitude),
+  registrationMode:
+    getParam(searchParams.registrationMode) === "MANUAL" ? "MANUAL" : "PHOTO",
   registrationSource:
     getParam(searchParams.registrationSource) === "MANUAL" ? "MANUAL" : "EXIF",
   matchDistanceMeters: getNumber(searchParams.matchDistanceMeters),
   isMock: getParam(searchParams.isMock) === "true",
 });
-
-export default function DredgingDetailPopupContent({
-  searchParams,
-}: WindowPopupContentProps) {
-  return (
-    <DredgingDetailPopupPage record={buildDredgingPopupRecord(searchParams)} />
-  );
-}
diff --git a/apps/sn/src/shared/lib/bbs-notice-menu.ts b/apps/sn/src/shared/lib/bbs-notice-menu.ts
index a621ed669..1289e6b78 100644
--- a/apps/sn/src/shared/lib/bbs-notice-menu.ts
+++ b/apps/sn/src/shared/lib/bbs-notice-menu.ts
@@ -1,12 +1,12 @@
-import type { MenuItem } from "@/src/entities/menu";
+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)
-    );
+  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/sn/src/shared/lib/statistics-menu-url.ts b/apps/sn/src/shared/lib/statistics-menu-url.ts
index c20dded4c..1d503c739 100644
--- a/apps/sn/src/shared/lib/statistics-menu-url.ts
+++ b/apps/sn/src/shared/lib/statistics-menu-url.ts
@@ -1,84 +1,84 @@
-import type { MenuItem } from "@/src/entities/menu";
+import type { MenuItem } from "@/entities/menu";
 
 export type ParsedStatisticsMenuUrl = {
-    categoryFromPath: string | null;
-    componentName: string | null;
-    rawUrlPath: string;
+  categoryFromPath: string | null;
+  componentName: string | null;
+  rawUrlPath: string;
 };
 
 /** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
 export function parseStatisticsMenuUrlPath(
-    urlPath: string,
+  urlPath: string,
 ): ParsedStatisticsMenuUrl {
-    const trimmed = (urlPath ?? "").trim();
-    if (!trimmed) {
-        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+  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;
     }
+  }
 
-    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 };
+  return { categoryFromPath, componentName, rawUrlPath: trimmed };
 }
 
 /** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
 export function resolveStatisticsCategory(
-    urlPath: string,
-    parentEngNm: string,
+  urlPath: string,
+  parentEngNm: string,
 ): string {
-    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
-    return categoryFromPath || parentEngNm || "";
+  const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+  return categoryFromPath || parentEngNm || "";
 }
 
 /** 탭 ID·URL `?tab=` 값 - 컴포넌트 파일명(확장자 제외) */
 export function resolveStatisticsTabId(urlPath: string): string {
-    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
-    return componentName || rawUrlPath;
+  const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+  return componentName || rawUrlPath;
 }
 
 /** `@/src/components/statistics/{category}/{Component}` 또는 루트 컴포넌트 경로 */
 export function buildStatisticsComponentImportPath(
-    urlPath: string,
-    parentEngNm: string,
+  urlPath: string,
+  parentEngNm: string,
 ): string {
-    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
-    const category = resolveStatisticsCategory(urlPath, parentEngNm);
-    const name = componentName || urlPath;
-    if (!category) {
-        return `@/src/components/statistics/${name}`;
-    }
-    return `@/src/components/statistics/${category}/${name}`;
+  const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+  const category = resolveStatisticsCategory(urlPath, parentEngNm);
+  const name = componentName || urlPath;
+  if (!category) {
+    return `@/src/components/statistics/${name}`;
+  }
+  return `@/src/components/statistics/${category}/${name}`;
 }
 
 export function menuMatchesStatisticsTabId(
-    menu: MenuItem,
-    tabId: string,
+  menu: MenuItem,
+  tabId: string,
 ): boolean {
-    if (!tabId) return false;
-    if (menu.urlPath === tabId) return true;
-    return resolveStatisticsTabId(menu.urlPath) === tabId;
+  if (!tabId) return false;
+  if (menu.urlPath === tabId) return true;
+  return resolveStatisticsTabId(menu.urlPath) === tabId;
 }
diff --git a/package.json b/package.json
index 872758b31..d99144da0 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "dev:wr": "turbo run dev --filter=wr",
     "dev:fo": "turbo run dev --filter=fo",
     "dev:dm": "turbo run dev --filter=dm",
+    "dev:ui-regression": "pnpm --parallel --filter sn --filter wr --filter dm --filter fo run dev",
     "dev:st": "turbo run dev --filter=st",
     "preview:components": "turbo run storybook --filter=@common/components",
     "preinstall": "npx only-allow pnpm",
diff --git a/packages/common/business_components/package.json b/packages/common/business_components/package.json
index c56278dd3..d716c1a13 100644
--- a/packages/common/business_components/package.json
+++ b/packages/common/business_components/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
+    "@tanstack/react-table": "^8.21.2",
     "axios": "1.8.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -91,4 +92,4 @@
     ]
   },
   "packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
-}
\ No newline at end of file
+}
diff --git a/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx b/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx
index 9b408183b..1320856bd 100644
--- a/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx
+++ b/packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx
@@ -26,45 +26,50 @@ export type MonthPickerProps = {
   currentMonth: Date;
   onMonthChange: (
     newMonth: Date | undefined,
-    shouldClosePopover?: boolean
+    shouldClosePopover?: boolean,
   ) => void;
   startYear?: number;
   yearReadOnly?: boolean;
   enableMonth?: string[];
 };
 
-export function MonthPicker({ currentMonth, onMonthChange, startYear, yearReadOnly, enableMonth }: MonthPickerProps) {
-
+export function MonthPicker({
+  currentMonth,
+  onMonthChange,
+  startYear,
+  yearReadOnly,
+  enableMonth,
+}: MonthPickerProps) {
   const today = startOfToday();
-const currentYear = today.getFullYear();
+  const currentYear = today.getFullYear();
   const yearFromProp = format(currentMonth, "yyyy");
-const selectedYear = parseInt(yearFromProp);
+  const selectedYear = parseInt(yearFromProp);
 
   // 현재 월의 시작 날짜
   const fullYearStart = parse(yearFromProp, "yyyy", new Date());
 
   const yearEnd =
     selectedYear === currentYear ? today : endOfYear(fullYearStart);
-  
-  
-
 
   // startYear가 없으면 기존과 동일하게 (현재년도 - 20년부터 현재년도까지)
   // startYear가 있으면 해당 년도부터 현재년도까지, 내림차순으로 정렬
-  const yearRange = startYear 
-    ? Array.from({ length: currentYear - startYear + 1 }, (_, i) => currentYear - i)
+  const yearRange = startYear
+    ? Array.from(
+        { length: currentYear - startYear + 1 },
+        (_, i) => currentYear - i,
+      )
     : Array.from({ length: 21 }, (_, i) => currentYear - 20 + i);
 
   const months = eachMonthOfInterval({ start: fullYearStart, end: yearEnd });
 
   const getMonthButtonClass = (month: Date) =>
     cn(
-      "inline-flex h-9 w-16 items-center justify-center rounded-md p-0 text-sm font-normal ring-offset-white transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:opacity-100 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:focus-visible:ring-slate-800",
+      "inline-flex h-9 w-16 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:opacity-100",
       isEqual(month, currentMonth) &&
-        "bg-slate-900 text-slate-50 hover:bg-slate-900 hover:text-slate-50 focus:bg-slate-900 focus:text-slate-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50 dark:hover:text-slate-900 dark:focus:bg-slate-50 dark:focus:text-slate-900",
+        "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
       // !isEqual(month, currentMonth) &&
       //   isEqual(month, getStartOfCurrentMonth()) &&
-      //   "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50"
+      //   "bg-accent text-accent-foreground"
     );
 
   return (
@@ -81,12 +86,12 @@ const selectedYear = parseInt(yearFromProp);
                 const newDate = new Date(
                   selectedYearNum,
                   currentMonth.getMonth(),
-                  1
+                  1,
                 );
                 onMonthChange(newDate, false);
               }}
             >
-              <SelectTrigger className="w-[140px] h-9 text-base">
+              <SelectTrigger className="h-9 w-[140px] text-base">
                 <SelectValue placeholder="년도" />
               </SelectTrigger>
               <SelectContent>
@@ -108,20 +113,26 @@ const selectedYear = parseInt(yearFromProp);
             {months.map((month) => (
               <div
                 key={month.toString()}
-                className="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md dark:[&:has([aria-selected])]:bg-slate-800"
+                className="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
                 role="presentation"
               >
                 <button
                   name="month"
                   className={getMonthButtonClass(month)}
-                  disabled={isFuture(month) || (enableMonth && !enableMonth?.includes(format(month, 'MMM', { locale: ko })))}
+                  disabled={
+                    isFuture(month) ||
+                    (enableMonth &&
+                      !enableMonth?.includes(
+                        format(month, "MMM", { locale: ko }),
+                      ))
+                  }
                   role="gridcell"
                   tabIndex={-1}
                   type="button"
                   onClick={() => onMonthChange(month, true)}
                 >
                   <time dateTime={format(month, "yyyy-MM-dd")}>
-                  {format(month, 'MMM', { locale: ko })}
+                    {format(month, "MMM", { locale: ko })}
                   </time>
                 </button>
               </div>
diff --git a/packages/common/business_components/src/ui/excel/excelStyle.tsx b/packages/common/business_components/src/ui/excel/excelStyle.tsx
index 1a654775c..e6e4261b3 100644
--- a/packages/common/business_components/src/ui/excel/excelStyle.tsx
+++ b/packages/common/business_components/src/ui/excel/excelStyle.tsx
@@ -1,83 +1,97 @@
 // import type { sheetParameter } from '@/index';
-import * as XlsxPopulate from '@xlsx/xlsx-populate';
-import type { SheetParameter } from './index';
+import type * as XlsxPopulateTypes from "@xlsx/xlsx-populate";
+import type { SheetParameter } from "./index";
 
+const loadXlsxPopulate = () => import("@xlsx/xlsx-populate");
 
+const makeCellStyle = (styleQ: XlsxPopulateTypes.StyleQuery) => {
+  styleQ.fill({ type: "solid", color: { rgb: "9bc1e7" } });
+  styleQ.borderEach({ style: "thin", color: { rgb: "FFFFFF" } });
+  styleQ.wrapText(true);
+  // styleQ.fontColor({rgb:"FFFFFF"});
+  styleQ.fontSize(13);
+  styleQ.horizontalAlignment("center");
+  styleQ.verticalAlignment("center");
+  styleQ.bold(true);
+};
 
-const makeCellStyle =(styleQ: XlsxPopulate.StyleQuery )=>{
-        styleQ.fill({ type: "solid", color: {rgb:"9bc1e7"} });
-        styleQ.borderEach( { style: "thin", color: { rgb: "FFFFFF" } } );
-        styleQ.wrapText(true);
-        // styleQ.fontColor({rgb:"FFFFFF"});
-        styleQ.fontSize(13);
-        styleQ.horizontalAlignment("center");
-        styleQ.verticalAlignment("center");
-        styleQ.bold(true);
-}
+const makeExcelFile = async (
+  workbook: XlsxPopulateTypes.Workbook,
+  fileNm: string,
+) => {
+  const outputData = await workbook.output("array-buffer");
+  const blob = new Blob([outputData], { type: "application/octet-stream" });
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  link.download = fileNm + ".xlsx";
+  link.click();
+};
 
-const makeExcelFile = async(workbook: XlsxPopulate.Workbook,fileNm:string)=>{
-    const outputData = await workbook.output("array-buffer");
-    const blob = new Blob([outputData], { type: "application/octet-stream" });
-    const link = document.createElement("a");
-    link.href = URL.createObjectURL(blob);
-    link.download = fileNm+".xlsx";
-    link.click();
+export const excelStyle = async (
+  data: ArrayBuffer,
+  range: string = "A1:V3",
+  fileNm: string,
+) => {
+  const XlsxPopulate = await loadXlsxPopulate();
+  const workbook = await XlsxPopulate.Workbook.fromData(data);
+  const rangeCells = workbook.activeSheet(0)?.sheet(0)?.range(range);
+  console.log(rangeCells);
+  rangeCells?.style((styleQ) => {
+    makeCellStyle(styleQ);
+  });
+  makeExcelFile(workbook, fileNm);
+};
 
-}
+export const excelArrayStyle = async (
+  data: ArrayBuffer,
+  range: SheetParameter[],
+  fileNm: string,
+) => {
+  const XlsxPopulate = await loadXlsxPopulate();
+  const workbook = await XlsxPopulate.Workbook.fromData(data);
+  if (range) {
+    range.forEach((item, index) => {
+      const rangeCells = workbook
+        .activeSheet(index)
+        ?.sheet(index)
+        ?.range(item.headerRange);
+      console.log(rangeCells);
+      rangeCells?.style((styleQ) => {
+        makeCellStyle(styleQ);
+      });
 
-
-export const excelStyle = async (data: ArrayBuffer, range: string = "A1:V3", fileNm:string) => {
-    const workbook = await XlsxPopulate.Workbook.fromData(data);
-    const rangeCells = workbook.activeSheet(0)?.sheet(0)?.range(range);
-    console.log(rangeCells);
-    rangeCells?.style((styleQ)=>{
-        makeCellStyle(styleQ)
-    });
-    makeExcelFile(workbook, fileNm)
-
-    
-}
-
-
-export const excelArrayStyle = async (data: ArrayBuffer, range: SheetParameter[], fileNm: string) => {
-    const workbook = await XlsxPopulate.Workbook.fromData(data);
-    if (range) {
-        range.forEach((item, index) => {
-            const rangeCells = workbook.activeSheet(index)?.sheet(index)?.range(item.headerRange);
-            console.log(rangeCells);
-            rangeCells?.style((styleQ) => {
-                makeCellStyle(styleQ)
-            });
-
-            // 모든 데이터 셀에 세로 가운데 정렬 적용
-            if (item.data && item.data.length > 0) {
-                const numCols = item.data[0]?.length || 0;
-                const numRows = item.data.length;
-                const lastColLetter = getExcelColumnLetter(numCols);
-                const dataRange = workbook.activeSheet(index)?.sheet(index)?.range(`A1:${lastColLetter}${numRows}`);
-                dataRange?.style((styleQ) => {
-                    styleQ.verticalAlignment("center");
-                });
-            }
+      // 모든 데이터 셀에 세로 가운데 정렬 적용
+      if (item.data && item.data.length > 0) {
+        const numCols = item.data[0]?.length || 0;
+        const numRows = item.data.length;
+        const lastColLetter = getExcelColumnLetter(numCols);
+        const dataRange = workbook
+          .activeSheet(index)
+          ?.sheet(index)
+          ?.range(`A1:${lastColLetter}${numRows}`);
+        dataRange?.style((styleQ) => {
+          styleQ.verticalAlignment("center");
         });
-    }
-    makeExcelFile(workbook, fileNm)
-
-}
+      }
+    });
+  }
+  makeExcelFile(workbook, fileNm);
+};
 
 export const excelStyleWithKoreanHeaders = async (
-  data: ArrayBuffer, 
-  range: string = "A1:V3", 
+  data: ArrayBuffer,
+  range: string = "A1:V3",
   fileNm: string,
   headerMapping: { [key: string]: string },
   sampleData: any,
-  mergeRanges?: string[]
+  mergeRanges?: string[],
 ) => {
+  const XlsxPopulate = await loadXlsxPopulate();
   const workbook = await XlsxPopulate.Workbook.fromData(data);
   const sheet = workbook.activeSheet();
-  
+
   if (!sheet) {
-    throw new Error('워크시트를 찾을 수 없습니다.');
+    throw new Error("워크시트를 찾을 수 없습니다.");
   }
 
   // 1. 영문 헤더를 한글로 교체
@@ -97,7 +111,7 @@ export const excelStyleWithKoreanHeaders = async (
   // 3. 모든 데이터 셀에 세로 가운데 정렬 적용
   const numCols = englishHeaders.length;
   const numRows = sheet.usedRange()?.endCell()?.rowNumber() || 1;
-  
+
   if (numRows > 1) {
     const lastColLetter = getExcelColumnLetter(numCols);
     const dataRange = sheet.range(`A1:${lastColLetter}${numRows}`);
@@ -117,14 +131,12 @@ export const excelStyleWithKoreanHeaders = async (
   await makeExcelFile(workbook, fileNm);
 };
 
-
 const getExcelColumnLetter = (colIndex: number): string => {
-    let letter = '';
-    while (colIndex > 0) {
-      const mod = (colIndex - 1) % 26;
-      letter = String.fromCharCode(65 + mod) + letter;
-      colIndex = Math.floor((colIndex - 1) / 26);
-    }
-    return letter;
-  };
-  
+  let letter = "";
+  while (colIndex > 0) {
+    const mod = (colIndex - 1) % 26;
+    letter = String.fromCharCode(65 + mod) + letter;
+    colIndex = Math.floor((colIndex - 1) / 26);
+  }
+  return letter;
+};
diff --git a/packages/common/business_components/src/ui/form_ui/index.tsx b/packages/common/business_components/src/ui/form_ui/index.tsx
index 39aa83b5d..1253d799e 100644
--- a/packages/common/business_components/src/ui/form_ui/index.tsx
+++ b/packages/common/business_components/src/ui/form_ui/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import "./form-ui.css";
 
 import React, { useCallback, useEffect, useState } from "react";
diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index ae419bd83..68882a2a6 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/packages/common/business_components/src/ui/index.ts
@@ -17,6 +17,9 @@ export * from "./search_input_select";
 // export * from "./search_input_address";
 export * from "./search_address";
 export * from "./select";
+export * from "./standard_data_table";
+export * from "./standard_form";
+export * from "./standard_popup";
 export * from "./tab";
 export * from "./table";
 export * from "./table_div";
@@ -24,5 +27,5 @@ export * from "./title";
 export * from "./sdmInsertForm";
 export * from "./popover_ui";
 export * from "./date_month_picker";
-export * from "./date_picker_range"
+export * from "./date_picker_range";
 export * from "./map/GisOverlay";
diff --git a/packages/common/business_components/src/ui/loadingBar/index.tsx b/packages/common/business_components/src/ui/loadingBar/index.tsx
index 7c6df0114..e797bd55f 100644
--- a/packages/common/business_components/src/ui/loadingBar/index.tsx
+++ b/packages/common/business_components/src/ui/loadingBar/index.tsx
@@ -13,6 +13,7 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
   if (!isLoading) return null;
 
   return (
+    // 화면을 차단하는 로딩 오버레이는 배경 콘텐츠를 가리는 의미색이므로 반투명 검정을 유지한다.
     <div
       className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 ${customZindex || "z-50"}`}
     >
diff --git a/packages/common/business_components/src/ui/map/searchBar/SearchInputText.tsx b/packages/common/business_components/src/ui/map/searchBar/SearchInputText.tsx
index 97ba51fb7..e82343968 100644
--- a/packages/common/business_components/src/ui/map/searchBar/SearchInputText.tsx
+++ b/packages/common/business_components/src/ui/map/searchBar/SearchInputText.tsx
@@ -77,7 +77,7 @@ export default function SearchInputText({
     } else if (e.key === "ArrowDown") {
       e.preventDefault();
       setHighlightIndex((prev) =>
-        prev < searchList.length - 1 ? prev + 1 : prev
+        prev < searchList.length - 1 ? prev + 1 : prev,
       );
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
@@ -93,17 +93,19 @@ export default function SearchInputText({
         onKeyDown={handleKeyDown}
         placeholder="시설명을 입력하세요"
         className={
-          className + " rounded-lg border px-2 py-1 text-sm h-[29.5px]"
+          className + " h-[29.5px] rounded-lg border px-2 py-1 text-sm"
         }
       />
       {showResults && (
-        <div className="absolute z-10 mt-1 max-h-200 w-full overflow-auto rounded border bg-white shadow">
+        <div className="max-h-200 absolute z-10 mt-1 w-full overflow-auto rounded border border-border bg-popover text-popover-foreground shadow">
           {searchList.length > 0 ? (
             searchList.map((item, index) => (
               <div
                 key={index}
-                className={`cursor-pointer px-3 py-1 hover:bg-gray-100 ${
-                  highlightIndex === index ? "bg-blue-100" : ""
+                className={`cursor-pointer px-3 py-1 hover:bg-accent hover:text-accent-foreground ${
+                  highlightIndex === index
+                    ? "bg-accent text-accent-foreground"
+                    : ""
                 }`}
                 onClick={() => handleSelect(item)}
               >
@@ -111,7 +113,7 @@ export default function SearchInputText({
               </div>
             ))
           ) : (
-            <div className="px-3 py-2 text-sm text-gray-500">
+            <div className="px-3 py-2 text-sm text-muted-foreground">
               검색 결과가 없습니다.
             </div>
           )}
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 01e1cd6da..12001a39a 100644
--- a/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
+++ b/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx
@@ -3,7 +3,12 @@ import { SelectBox, type SelectDataType } from "../../../ui";
 import { Button } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import GisApp from "../lib/gis.core";
-import { getSigunguCenter, moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
+import {
+  getSigunguCenter,
+  moveMapToCenter,
+  sidoCenter,
+  sigunguCenter,
+} from "./utils";
 // import { getGeometryCenter } from "./utils";
 
 const geoserverUrl =
@@ -46,20 +51,31 @@ export const ProcSearchBar = ({
   const [sigunData, setSigunData] = useState<CenterSelectDataType[]>([
     { text: "시군구", val: "0" },
   ]);
-  const [filteredSigunData, setFilteredSigunData] = useState<CenterSelectDataType[]>([
-    { text: "시군구", val: "0" },
-  ]);
+  const [filteredSigunData, setFilteredSigunData] = useState<
+    CenterSelectDataType[]
+  >([{ text: "시군구", val: "0" }]);
   const [facilityData, setFacilityData] = useState<SelectDataType[]>(() => [
-    { text: facilityLayerFilter?.label ?? DEFAULT_SWAGE_PRCS_FCLT_LABEL, val: "0" },
+    {
+      text: facilityLayerFilter?.label ?? DEFAULT_SWAGE_PRCS_FCLT_LABEL,
+      val: "0",
+    },
   ]);
   const [facilityValue, setFacilityValue] = useState("0");
-  const [pendingExternalFacilityName, setPendingExternalFacilityName] = useState("");
+  const [pendingExternalFacilityName, setPendingExternalFacilityName] =
+    useState("");
 
   const [facilityType, setFacilityType] = useState(
-    facilityTypes?.length === 1 && facilityTypes[0] ? facilityTypes[0].val : "0",
+    facilityTypes?.length === 1 && facilityTypes[0]
+      ? facilityTypes[0].val
+      : "0",
   );
   const defaultFacilityData = useCallback(
-    () => [{ text: facilityLayerFilter?.label ?? DEFAULT_SWAGE_PRCS_FCLT_LABEL, val: "0" }],
+    () => [
+      {
+        text: facilityLayerFilter?.label ?? DEFAULT_SWAGE_PRCS_FCLT_LABEL,
+        val: "0",
+      },
+    ],
     [facilityLayerFilter?.label],
   );
 
@@ -71,7 +87,7 @@ export const ProcSearchBar = ({
       .map((f: any) => ({
         text: String(f.properties.mctpv_korn_nm ?? "").trim(),
         val: String(f.properties.mctpv_cd ?? "").trim(),
-        center: sidoCenter[String(f.properties.mctpv_cd ?? "").trim()] //getGeometryCenter(f.geometry) ?? undefined,
+        center: sidoCenter[String(f.properties.mctpv_cd ?? "").trim()], //getGeometryCenter(f.geometry) ?? undefined,
       }))
       .sort((a: any, b: any) => {
         // 커스텀 순서 정의
@@ -85,14 +101,14 @@ export const ProcSearchBar = ({
           "울산광역시",
           "세종특별자치시",
           "경기도",
-          "강원특별자치도",  // 경기도 다음에 배치
+          "강원특별자치도", // 경기도 다음에 배치
           "충청북도",
           "충청남도",
-          "전북특별자치도",  // 충청남도 다음에 배치
+          "전북특별자치도", // 충청남도 다음에 배치
           "전라남도",
           "경상북도",
           "경상남도",
-          "제주특별자치도"
+          "제주특별자치도",
         ];
 
         const indexA = customOrder.indexOf(a.text);
@@ -108,7 +124,7 @@ export const ProcSearchBar = ({
         if (indexB !== -1) return 1;
 
         // 둘 다 커스텀 순서에 없으면 기본 알파벳 순서
-        return a.text.localeCompare(b.text, 'ko');
+        return a.text.localeCompare(b.text, "ko");
       });
     setSidoData([{ text: "시도", val: "0" }, ...list]);
   };
@@ -122,7 +138,7 @@ export const ProcSearchBar = ({
       .map((f: any) => ({
         text: String(f.properties.sgg_korn_nm ?? "").trim(),
         val: String(f.properties.sgg_cd ?? "").trim(),
-        center: sigunguCenter[String(f.properties.sgg_cd ?? "").trim()] //getGeometryCenter(f.geometry) ?? undefined,
+        center: sigunguCenter[String(f.properties.sgg_cd ?? "").trim()], //getGeometryCenter(f.geometry) ?? undefined,
       }))
       .sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
 
@@ -140,7 +156,8 @@ export const ProcSearchBar = ({
       const type = currentFacilityType ?? facilityType;
       if (!type || type === "0") return;
 
-      const activeFacilityFilter = type === "tb_il_swage_prcs_fclt" ? facilityLayerFilter : undefined;
+      const activeFacilityFilter =
+        type === "tb_il_swage_prcs_fclt" ? facilityLayerFilter : undefined;
       if (activeFacilityFilter?.disabled) {
         setFacilityData(defaultFacilityData());
         setFacilityValue("0");
@@ -163,7 +180,8 @@ export const ProcSearchBar = ({
         const escapeCqlText = (value: string) => value.replace(/'/g, "''");
         const cqlFilters = [`ctpv_nm='${escapeCqlText(sidoNm)}'`];
         if (sggNm) cqlFilters.push(`sgg_nm='${escapeCqlText(sggNm)}'`);
-        if (activeFacilityFilter?.cqlFilter) cqlFilters.push(activeFacilityFilter.cqlFilter);
+        if (activeFacilityFilter?.cqlFilter)
+          cqlFilters.push(activeFacilityFilter.cqlFilter);
         const params = new URLSearchParams({
           typeName: `hasudo:${type}`,
           cql_filter: cqlFilters.join(" AND "),
@@ -218,7 +236,9 @@ export const ProcSearchBar = ({
         }));
       }
 
-      const sorted = list.slice().sort((a, b) => a.text.localeCompare(b.text, "ko"));
+      const sorted = list
+        .slice()
+        .sort((a, b) => a.text.localeCompare(b.text, "ko"));
       setFacilityData([...defaultFacilityData(), ...sorted]);
       setFacilityValue("0");
     },
@@ -240,7 +260,17 @@ export const ProcSearchBar = ({
 
     setFacilityData(defaultFacilityData());
     setFacilityValue("0");
-  }, [defaultFacilityData, facilityLayerFilter?.cqlFilter, facilityLayerFilter?.disabled, facilityType, fetchFacilitiesByRegion, sidoData, sidoValue, sigunData, sigunValue]);
+  }, [
+    defaultFacilityData,
+    facilityLayerFilter?.cqlFilter,
+    facilityLayerFilter?.disabled,
+    facilityType,
+    fetchFacilitiesByRegion,
+    sidoData,
+    sidoValue,
+    sigunData,
+    sigunValue,
+  ]);
 
   useEffect(() => {
     if (!pendingExternalFacilityName) return;
@@ -252,7 +282,6 @@ export const ProcSearchBar = ({
     setPendingExternalFacilityName("");
   }, [facilityData, pendingExternalFacilityName]);
 
-
   const initializeSigunData = useCallback(
     (nextSidoCd: string) => {
       if (nextSidoCd === "0") {
@@ -294,7 +323,8 @@ export const ProcSearchBar = ({
 
       if (type === "sggCd") {
         setSigunValue(val);
-        const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
+        const sidoNm =
+          sidoData.find((item) => item.val === sidoValue)?.text || "";
         const sggNm = sigunData.find((item) => item.val === val)?.text || "";
         const sggCd = sigunData.find((item) => item.val === val)?.val || "";
         if (sidoNm) fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, facilityType);
@@ -305,9 +335,12 @@ export const ProcSearchBar = ({
         setFacilityType(val);
         setFacilityValue("0");
         setFacilityData(defaultFacilityData());
-        const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
-        const sggNm = sigunData.find((item) => item.val === sigunValue)?.text || "";
-        const sggCd = sigunData.find((item) => item.val === sigunValue)?.val || "";
+        const sidoNm =
+          sidoData.find((item) => item.val === sidoValue)?.text || "";
+        const sggNm =
+          sigunData.find((item) => item.val === sigunValue)?.text || "";
+        const sggCd =
+          sigunData.find((item) => item.val === sigunValue)?.val || "";
         if (sidoNm) fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, val);
         return;
       }
@@ -322,7 +355,16 @@ export const ProcSearchBar = ({
         }
       }
     },
-    [defaultFacilityData, fetchFacilitiesByRegion, initializeSigunData, sigunData, sigunValue, sidoData, sidoValue, facilityType],
+    [
+      defaultFacilityData,
+      fetchFacilitiesByRegion,
+      initializeSigunData,
+      sigunData,
+      sigunValue,
+      sidoData,
+      sidoValue,
+      facilityType,
+    ],
   );
 
   const handleSearch = useCallback(() => {
@@ -346,7 +388,15 @@ export const ProcSearchBar = ({
     }
 
     moveMapToCenter(gisMaps, selectedSido.center, sidoSearchZoom);
-  }, [gisMaps, sidoValue, sigunValue, sidoData, filteredSigunData, sigunData, sidoSearchZoom]);
+  }, [
+    gisMaps,
+    sidoValue,
+    sigunValue,
+    sidoData,
+    filteredSigunData,
+    sigunData,
+    sidoSearchZoom,
+  ]);
 
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -370,7 +420,9 @@ export const ProcSearchBar = ({
 
       if (nextCtpvCd !== "0") {
         const prefix = nextCtpvCd.substring(0, 2);
-        const filtered = sigunData.filter((item) => item.val.startsWith(prefix));
+        const filtered = sigunData.filter((item) =>
+          item.val.startsWith(prefix),
+        );
         setFilteredSigunData([{ text: "시군구", val: "0" }, ...filtered]);
       }
 
@@ -392,9 +444,15 @@ export const ProcSearchBar = ({
       }
     };
 
-    window.addEventListener(INFTWT_PROC_SEARCH_EVENT, handleExternalSearch as EventListener);
+    window.addEventListener(
+      INFTWT_PROC_SEARCH_EVENT,
+      handleExternalSearch as EventListener,
+    );
     return () => {
-      window.removeEventListener(INFTWT_PROC_SEARCH_EVENT, handleExternalSearch as EventListener);
+      window.removeEventListener(
+        INFTWT_PROC_SEARCH_EVENT,
+        handleExternalSearch as EventListener,
+      );
     };
   }, [gisMaps, initializeSigunData, sigunData, sidoSearchZoom]);
 
@@ -418,36 +476,47 @@ export const ProcSearchBar = ({
     <div className="grid grid-cols-4 gap-4">
       <div className="col-span-4">
         <div className="card card-border flex">
-          <div className="col-span-10 flex flex-row ml-5">
+          <div className="col-span-10 ml-5 flex flex-row items-center">
             <SelectBox
               labelClass="w-[40px]"
               className="mr-10 w-[150px]"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-background"
               label=""
               selectArray={sidoData}
-              onSelectValue={(val: any) => onSelectValue(val.toString(), "ctpvCd")}
+              onSelectValue={(val: any) =>
+                onSelectValue(val.toString(), "ctpvCd")
+              }
               value={sidoValue}
             />
             <SelectBox
               labelClass="w-[65px]"
               className="mr-10 w-[150px]"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-background"
               label=""
               selectArray={filteredSigunData}
-              onSelectValue={(val: any) => onSelectValue(val.toString(), "sggCd")}
+              onSelectValue={(val: any) =>
+                onSelectValue(val.toString(), "sggCd")
+              }
               value={sigunValue}
             />
             <SelectBox
               labelClass="w-[60px]"
               className="mr-5 w-[180px]"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-background"
               label=""
               selectArray={facilityData}
-              onSelectValue={(val: any) => onSelectValue(val.toString(), "fcltCd")}
+              onSelectValue={(val: any) =>
+                onSelectValue(val.toString(), "fcltCd")
+              }
               value={facilityValue}
             />
-            <div className="flex flex-row space-x-2">
-              <Button color="primary" className="mx-2 mt-1" size="sm" onClick={handleSearch}>
+            <div className="flex flex-row items-center space-x-2">
+              <Button
+                color="primary"
+                className="mx-2"
+                size="default"
+                onClick={handleSearch}
+              >
                 조회
               </Button>
             </div>
@@ -457,4 +526,3 @@ export const ProcSearchBar = ({
     </div>
   );
 };
-
diff --git a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
index e13965768..d4a9a25b6 100644
--- a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
+++ b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx
@@ -38,16 +38,18 @@ export const SearchBar = ({
   gisMaps,
   facilityTypes,
   onFeatureFocus,
-  onInit = () => { },
+  onInit = () => {},
 }: SearchBarProps) => {
   const [sidoValue, setSidoValue] = useState("0");
   const [sigunValue, setSigunValue] = useState("0");
   const [facilityType, setFacilityType] = useState(
-    facilityTypes?.length === 1 && facilityTypes[0] ? facilityTypes[0].val : "0"
+    facilityTypes?.length === 1 && facilityTypes[0]
+      ? facilityTypes[0].val
+      : "0",
   );
   const [fcltyNm, setFcltyNm] = useState("");
   const [searchList, setSearchList] = useState<{ fnm: string; fid: string }[]>(
-    []
+    [],
   );
 
   const [sidoData, setSidoData] = useState<CenterSelectDataType[]>([
@@ -56,9 +58,9 @@ export const SearchBar = ({
   const [sigunData, setSigunData] = useState<CenterSelectDataType[]>([
     { text: "시군구", val: "0" },
   ]);
-  const [filteredSigunData, setFilteredSigunData] = useState<CenterSelectDataType[]>([
-    { text: "시군구", val: "0" },
-  ]);
+  const [filteredSigunData, setFilteredSigunData] = useState<
+    CenterSelectDataType[]
+  >([{ text: "시군구", val: "0" }]);
 
   const fetchSido = async () => {
     const res = await fetch("/cms-service/api/v1/code/cache/ADSTDSTRCD/Y");
@@ -82,14 +84,14 @@ export const SearchBar = ({
           "울산광역시",
           "세종특별자치시",
           "경기도",
-          "강원특별자치도",  // 경기도 다음에 배치
+          "강원특별자치도", // 경기도 다음에 배치
           "충청북도",
           "충청남도",
-          "전북특별자치도",  // 충청남도 다음에 배치
+          "전북특별자치도", // 충청남도 다음에 배치
           "전라남도",
           "경상북도",
           "경상남도",
-          "제주특별자치도"
+          "제주특별자치도",
         ];
 
         const indexA = customOrder.indexOf(a.text);
@@ -105,7 +107,7 @@ export const SearchBar = ({
         if (indexB !== -1) return 1;
 
         // 둘 다 커스텀 순서에 없으면 기본 알파벳 순서
-        return a.text.localeCompare(b.text, 'ko');
+        return a.text.localeCompare(b.text, "ko");
       });
     const sigunList = json
       .filter((item: any) => item.lwpoCd?.length > 2)
@@ -114,7 +116,7 @@ export const SearchBar = ({
         text: item.lwpoCdNm,
         center: getSigunguCenter(item.lwpoCd),
       }));
-      //.sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
+    //.sort((a: any, b: any) => a.text.localeCompare(b.text, 'ko'));
     setSidoData([{ text: "시도", val: "0" }, ...sidoList]);
     setSigunData(sigunList);
   };
@@ -131,7 +133,7 @@ export const SearchBar = ({
       setFilteredSigunData([{ text: "시군구", val: "0" }, ...filtered]);
       setSigunValue("0");
     },
-    [sigunData]
+    [sigunData],
   );
 
   useEffect(() => {
@@ -155,7 +157,7 @@ export const SearchBar = ({
         setFcltyNm("");
       }
     },
-    [initializeSigunData]
+    [initializeSigunData],
   );
 
   const handleSearch = async () => {
@@ -206,8 +208,10 @@ export const SearchBar = ({
     if (type === "tb_il_swage_prcs_fclt") {
       // 하수처리시설
       let cqlFilter = `swtrmt_fclt_nm like '%${fcltyNm}%'`;
-      if (sggNm !== "시군구" && sggNm) cqlFilter = `sgg_nm='${sggNm}' and ` + cqlFilter; 
-      if (sidoNm !== "시도" && sidoNm) cqlFilter = `ctpv_nm='${sidoNm}' and ` + cqlFilter; 
+      if (sggNm !== "시군구" && sggNm)
+        cqlFilter = `sgg_nm='${sggNm}' and ` + cqlFilter;
+      if (sidoNm !== "시도" && sidoNm)
+        cqlFilter = `ctpv_nm='${sidoNm}' and ` + cqlFilter;
       url += encodeURIComponent(cqlFilter);
       const res = await fetch(url);
       const json = await res.json();
@@ -241,7 +245,7 @@ export const SearchBar = ({
       });
       const procJson2 = await procRes2.json();
       const procResult2 = (procJson2.data || []).map(
-        (item: any) => item.bscFctCd
+        (item: any) => item.bscFctCd,
       );
 
       const res = await fetch(url, {
@@ -383,12 +387,12 @@ export const SearchBar = ({
     <div className="grid grid-cols-4 gap-4">
       <div className="col-span-4">
         <div className="card card-border flex">
-          <div className="col-span-10 flex flex-row">
+          <div className="col-span-10 flex flex-row items-center">
             {facilityTypes.length > 1 && (
               <SelectBox
                 labelClass="w-[120px]"
                 className="mr-5 w-[150px]"
-                selectClass="rounded-lg bg-white"
+                selectClass="rounded-lg bg-background"
                 label=""
                 selectArray={[
                   { text: "시설 구분", val: "0" },
@@ -403,7 +407,7 @@ export const SearchBar = ({
             <SelectBox
               labelClass="w-[40px]"
               className="mr-5 w-[150px]"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-background"
               label=""
               selectArray={sidoData}
               onSelectValue={(val: any) =>
@@ -414,7 +418,7 @@ export const SearchBar = ({
             <SelectBox
               labelClass="w-[65px]"
               className="mr-5 w-[150px]"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-background"
               label=""
               selectArray={filteredSigunData}
               onSelectValue={(val: any) =>
@@ -439,20 +443,20 @@ export const SearchBar = ({
               className="mr-5 w-[150px]"
             />
           </div>
-          <div className="flex flex-row space-x-2">
+          <div className="flex flex-row items-center space-x-2">
             <Button
               color="primary"
-              className="mx-2 mt-1"
-              size="sm"
+              className="mx-2"
+              size="default"
               onClick={handleSearch}
             >
               조회
             </Button>
             {onInit && (
               <Button
-                color="primary"
-                className="mx-2 mt-1"
-                size="sm"
+                color="white"
+                className="mx-2"
+                size="default"
                 onClick={handleInit}
               >
                 초기화
@@ -463,4 +467,4 @@ export const SearchBar = ({
       </div>
     </div>
   );
-}
+};
diff --git a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
index b68dd7b3f..17ecc6611 100644
--- a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
+++ b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx
@@ -1,4 +1,6 @@
-import { Button, Input } from "@common/components";
+"use client";
+
+import { Button, Input } from "@common/components";
 import { AsYouType } from "libphonenumber-js";
 import React, { useCallback, useEffect, useState } from "react";
 import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
@@ -66,9 +68,9 @@ interface FormSchema {
 interface SdmRegFormProps {
   form: UseFormReturn<FormSchema>;
   onCheckboxChange?: (checked: boolean) => void;
-  selectSidoData: SelectDataType[];  //시/도 데이터
+  selectSidoData: SelectDataType[]; //시/도 데이터
   selectSigunData: SelectDataType[]; //시/군/구 데이터
-  dataList: DemandCompType[];        //수요처 목록
+  dataList: DemandCompType[]; //수요처 목록
   rtnValue: (searchText: string, pageCnt: number) => void;
   setIsDuplicate: (value: boolean) => void;
   updateList?: DemandCompType;
@@ -82,8 +84,8 @@ type FieldComponent = (
 
 const getReadonlyInputClassName = (isReadonly?: boolean) =>
   isReadonly
-    ? "!text-xl text-gray-600 bg-gray-100 cursor-default"
-    : "!text-xl text-gray-600";
+    ? "cursor-default bg-secondary !text-xl text-muted-foreground"
+    : "!text-xl text-label";
 
 export function SdmRegForm({
   form,
@@ -320,203 +322,208 @@ export function SdmRegForm({
     form.setValue("zip", zoneNo, { shouldValidate: true });
   }, [form, zoneNo]);
 
-
   const formFields: Array<{
     name: keyof FormSchema;
     label: string;
     component: FieldComponent;
   }> = [
-      {
-        name: "dmdCoNm",
-        label: "회사명",
-        component: (field) => (
-          <SdmSearchForm
-            rtnData={setRtnData}
-            label="수요처명"
-            initValue={updateCoNm}
-            dataList={dataList}
-            rtnValue={setRtnValue}
-            rtnText={setRtnText}
-            readOnly={readOnly}
-            {...field}
-          />
-        ),
-      },
-      {
-        name: "dmdInfoId",
-        label: "사업자등록번호",
-        component: (field) => (
+    {
+      name: "dmdCoNm",
+      label: "회사명",
+      component: (field) => (
+        <SdmSearchForm
+          rtnData={setRtnData}
+          label="수요처명"
+          initValue={updateCoNm}
+          dataList={dataList}
+          rtnValue={setRtnValue}
+          rtnText={setRtnText}
+          readOnly={readOnly}
+          {...field}
+        />
+      ),
+    },
+    {
+      name: "dmdInfoId",
+      label: "사업자등록번호",
+      component: (field) => (
+        <Input
+          placeholder="사업자등록번호를 입력하세요"
+          type="text"
+          className={getReadonlyInputClassName(readOnly)}
+          onChange={(e) => bznNoChange(e, "dmdInfoId", field)}
+          value={formatBusinessNumber(field.value ?? "")}
+          readOnly={!!readOnly}
+        />
+      ),
+    },
+    {
+      name: "bznmTotNo",
+      label: "",
+      component: (field) => (
+        <FormUi
+          label="종사업자등록번호"
+          onCheckboxChange={handleCheckboxChange}
+          isDisabled={isBznmTotNoDisabled}
+        >
           <Input
-            placeholder="사업자등록번호를 입력하세요"
+            placeholder="여러사업장이 있을 경우 입력해주세요"
             type="text"
-            className={getReadonlyInputClassName(readOnly)}
-            onChange={(e) => bznNoChange(e, "dmdInfoId", field)}
-            value={formatBusinessNumber(field.value ?? "")}
+            className={`${getReadonlyInputClassName(readOnly)} !mt-5`}
+            disabled={isBznmTotNoDisabled}
+            onChange={(e) => bznNoChange(e, "bznmTotNo", field)}
+            // {...field}
+            value={field.value ?? ""}
             readOnly={!!readOnly}
           />
-        ),
-      },
-      {
-        name: "bznmTotNo",
-        label: "",
-        component: (field) => (
-          <FormUi
-            label="종사업자등록번호"
-            onCheckboxChange={handleCheckboxChange}
-            isDisabled={isBznmTotNoDisabled}
-          >
-            <Input
-              placeholder="여러사업장이 있을 경우 입력해주세요"
-              type="text"
-              className={`${getReadonlyInputClassName(readOnly)} !mt-5`}
-              disabled={isBznmTotNoDisabled}
-              onChange={(e) => bznNoChange(e, "bznmTotNo", field)}
-              // {...field}
-              value={field.value ?? ""}
-              readOnly={!!readOnly}
-            />
-          </FormUi>
-        ),
-      },
-      {
-        name: "daddr",
-        label: "사업자주소",
-        component: (field) =>
-          openNetwork ? (
-            <div>
-              <div className="flex items-center gap-2">
-                {/* 우편번호 */}
-                <Input
-                  type="text"
-                  className={`${getReadonlyInputClassName(true)} w-64`}
-                  readOnly={true}
-                  value={form.watch("zip") ?? ""}
-                  placeholder="우편번호"
-                />
-                <Button type="button" className="px-4 py-2 rounded-md" onClick={() => setIsZipModalOpen(true)}>우편번호 검색</Button>
-              </div>
-              {/* 주소 */}
+        </FormUi>
+      ),
+    },
+    {
+      name: "daddr",
+      label: "사업자주소",
+      component: (field) =>
+        openNetwork ? (
+          <div>
+            <div className="flex items-center gap-2">
+              {/* 우편번호 */}
               <Input
                 type="text"
-                className={getReadonlyInputClassName(true)}
+                className={`${getReadonlyInputClassName(true)} w-64`}
                 readOnly={true}
-                value={address ?? ""}
-                placeholder="주소"
-              />
-              {/* 상세 주소 */}
-              <Input
-                placeholder="상세 주소를 입력하세요"
-                type="text"
-                className={getReadonlyInputClassName(readOnly)}
-                readOnly={readOnly}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  setDetailedAddress(value);
-                  form.setValue("daddr2", value, { shouldValidate: true });
-                }}
-                value={detailedAddress ?? ""}
+                value={form.watch("zip") ?? ""}
+                placeholder="우편번호"
               />
+              <Button
+                type="button"
+                className="rounded-md px-4 py-2"
+                onClick={() => setIsZipModalOpen(true)}
+              >
+                우편번호 검색
+              </Button>
             </div>
-          ) : (
+            {/* 주소 */}
             <Input
-              placeholder="주소를 입력하세요"
               type="text"
-              className={getReadonlyInputClassName(readOnly)}
-              readOnly={readOnly}
-              {...field}
-              value={field.value ?? ""}
+              className={getReadonlyInputClassName(true)}
+              readOnly={true}
+              value={address ?? ""}
+              placeholder="주소"
             />
-          ),
-      },
-      {
-        name: "ctpvCd",
-        label: "시도",
-        component: (field) => (
-          <Input
-            placeholder="시도"
-            type="text"
-            className={getReadonlyInputClassName(true)}
-            onChange={(e) => {
-              field.onChange(e.target.value);
-            }}
-            value={
-              selectSidoData.find((item) => item.val === field.value?.trim())
-                ?.text ?? ""
-            }
-            readOnly={true}
-          />
-        ),
-      },
-      {
-        name: "sggCd",
-        label: "시군구",
-        component: (field) => (
-          <Input
-            placeholder="시군구"
-            type="text"
-            className={getReadonlyInputClassName(true)}
-            onChange={(e) => {
-              field.onChange(e.target.value);
-            }}
-            value={
-              selectSigunData.find((item) => item.val === field.value?.trim())
-                ?.text ?? ""
-            }
-            readOnly={true}
-          />
-        ),
-      },
-      {
-        name: "telno",
-        label: "전화번호",
-        component: (field) => {
-          const formattedValue = formatPhoneNumber(field.value ?? ""); // 초기 렌더링 시에도 포맷 적용
-
-          return (
+            {/* 상세 주소 */}
             <Input
-              placeholder="전화번호를 입력하세요"
+              placeholder="상세 주소를 입력하세요"
               type="text"
               className={getReadonlyInputClassName(readOnly)}
-              value={formattedValue}
               readOnly={readOnly}
               onChange={(e) => {
-                const value = e.target.value.replace(/\D/g, ""); // 숫자만 저장
-                field.onChange(value);
+                const value = e.target.value;
+                setDetailedAddress(value);
+                form.setValue("daddr2", value, { shouldValidate: true });
               }}
+              value={detailedAddress ?? ""}
             />
-          );
-        },
-      },
+          </div>
+        ) : (
+          <Input
+            placeholder="주소를 입력하세요"
+            type="text"
+            className={getReadonlyInputClassName(readOnly)}
+            readOnly={readOnly}
+            {...field}
+            value={field.value ?? ""}
+          />
+        ),
+    },
+    {
+      name: "ctpvCd",
+      label: "시도",
+      component: (field) => (
+        <Input
+          placeholder="시도"
+          type="text"
+          className={getReadonlyInputClassName(true)}
+          onChange={(e) => {
+            field.onChange(e.target.value);
+          }}
+          value={
+            selectSidoData.find((item) => item.val === field.value?.trim())
+              ?.text ?? ""
+          }
+          readOnly={true}
+        />
+      ),
+    },
+    {
+      name: "sggCd",
+      label: "시군구",
+      component: (field) => (
+        <Input
+          placeholder="시군구"
+          type="text"
+          className={getReadonlyInputClassName(true)}
+          onChange={(e) => {
+            field.onChange(e.target.value);
+          }}
+          value={
+            selectSigunData.find((item) => item.val === field.value?.trim())
+              ?.text ?? ""
+          }
+          readOnly={true}
+        />
+      ),
+    },
+    {
+      name: "telno",
+      label: "전화번호",
+      component: (field) => {
+        const formattedValue = formatPhoneNumber(field.value ?? ""); // 초기 렌더링 시에도 포맷 적용
 
-      {
-        name: "dmdAplyPswd",
-        label: "패스워드",
-        component: (field) => (
+        return (
           <Input
-            placeholder="패스워드를 입력하세요"
-            type="password"
+            placeholder="전화번호를 입력하세요"
+            type="text"
             className={getReadonlyInputClassName(readOnly)}
+            value={formattedValue}
             readOnly={readOnly}
-            {...field}
-            value={field.value ?? ""}
+            onChange={(e) => {
+              const value = e.target.value.replace(/\D/g, ""); // 숫자만 저장
+              field.onChange(value);
+            }}
           />
-        ),
+        );
       },
-      {
-        name: "dmdAplyPswdConfirm",
-        label: "패스워드확인",
-        component: (field) => (
-          <Input
-            placeholder="패스워드를 입력하세요"
-            type="password"
-            className={getReadonlyInputClassName(readOnly)}
-            readOnly={readOnly}
-            {...field}
-            value={field.value ?? ""}
-          />
-        ),
-      },
-    ];
+    },
+
+    {
+      name: "dmdAplyPswd",
+      label: "패스워드",
+      component: (field) => (
+        <Input
+          placeholder="패스워드를 입력하세요"
+          type="password"
+          className={getReadonlyInputClassName(readOnly)}
+          readOnly={readOnly}
+          {...field}
+          value={field.value ?? ""}
+        />
+      ),
+    },
+    {
+      name: "dmdAplyPswdConfirm",
+      label: "패스워드확인",
+      component: (field) => (
+        <Input
+          placeholder="패스워드를 입력하세요"
+          type="password"
+          className={getReadonlyInputClassName(readOnly)}
+          readOnly={readOnly}
+          {...field}
+          value={field.value ?? ""}
+        />
+      ),
+    },
+  ];
 
   return (
     <>
@@ -550,18 +557,21 @@ export function SdmRegForm({
                 <div className="mb-4">
                   <label
                     htmlFor={inputId}
-                    className="block text-xl font-medium text-gray-800"
+                    className="block text-xl font-medium text-label"
                   >
                     {label}
                     {isRequired && <span className="ml-1 text-red-500">*</span>}
                   </label>
 
-                  {React.cloneElement(component(field) as React.ReactElement<any>, {
-                    id: inputId,
-                    "aria-required": isRequired,
-                    "aria-invalid": !!error,
-                    "aria-describedby": error ? errorId : undefined,
-                  })}
+                  {React.cloneElement(
+                    component(field) as React.ReactElement<any>,
+                    {
+                      id: inputId,
+                      "aria-required": isRequired,
+                      "aria-invalid": !!error,
+                      "aria-describedby": error ? errorId : undefined,
+                    },
+                  )}
 
                   {error?.message && (
                     <p
diff --git a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
index b39e7585e..6616954c5 100644
--- a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
+++ b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx
@@ -16,73 +16,95 @@ type thisProps = {
   rtnValue: (searchText: string, pageCnt: number) => void;
   rtnInputData: (data: DemandCompType) => void;
   bodyClassNm?: string;
-  updateList?:DemandCompType;
-  readOnly?:boolean;
-  openNetwork:boolean;
-}
+  updateList?: DemandCompType;
+  readOnly?: boolean;
+  openNetwork: boolean;
+};
 
-const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean ,updateList?:DemandCompType) => z.object({
-  ctpvCd: z.string().min(1, "시/도를 선택해주세요"),
-  sggCd: z.string().min(1, "시/군/구를 선택해주세요"),
-  dmdCoNm: z.string()
-    .min(1, "회사명을 입력해주세요")
-    .max(20, "회사명은 20자 이내로 입력해주세요"),
-  dmdInfoId: z.string()
-    .min(1, "사업자등록번호를 입력해주세요")
-    .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다")
-    .refine(() => isBznmTotNoDisabled ? !isDuplicate : true, "이미 등록된 사업자등록번호입니다"),
-  zip: z.string().optional(),
-  bznmTotNo: isBznmTotNoDisabled 
-    ? z.string().optional()
-    : z.string()
-      .length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다")
-      .refine(() => !isDuplicate, "이미 등록된 사업자등록번호입니다"),
-  daddr: z.string()
-    .min(1, "주소를 입력해주세요")
-    // .min(6, "주소는 6자 이상 입력해주세요")
-    .max(40, "주소는 40자 이내로 입력해주세요"),
-  daddr2: z.string().optional(),
-  telno: z.string()
-    .min(8, "전화번호는 8자 이상 입력해주세요")
-    .max(11, "전화번호는 11자 이내로 입력해주세요")
-    .regex(/^[0-9]+$/, "전화번호는 숫자만 입력 가능합니다"),
-    rgtr: z.string().optional(),
-    mdfr: z.string().nullish(),
-    dmdAplyPswd	: updateList?.dmdInfoId // 업데이트일경우
-    ? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
-    : z.string().optional()
-    .refine((val) => !val || (val.length >= 8 && val.length <= 16), "패스워드는 8자 이상 16자 이내로 입력해주세요"),
-  dmdAplyPswdConfirm: updateList?.dmdInfoId // 업데이트일경우
-  ? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
-  :z.string()
-    .min(1, "패스워드확인을 입력해주세요"),
-}).refine((data) => {
-  // 패스워드 확인 검증
-  if (data.dmdAplyPswd && data.dmdAplyPswdConfirm) {
-    return data.dmdAplyPswd === data.dmdAplyPswdConfirm;
-  }
-  return true;
-}, {
-  message: "패스워드가 일치하지 않습니다",
-  path: ["dmdAplyPswdConfirm"], // 에러를 패스워드 확인 필드에 표시
-});
+const createFormSchema = (
+  isBznmTotNoDisabled: boolean,
+  isDuplicate: boolean,
+  updateList?: DemandCompType,
+) =>
+  z
+    .object({
+      ctpvCd: z.string().min(1, "시/도를 선택해주세요"),
+      sggCd: z.string().min(1, "시/군/구를 선택해주세요"),
+      dmdCoNm: z
+        .string()
+        .min(1, "회사명을 입력해주세요")
+        .max(20, "회사명은 20자 이내로 입력해주세요"),
+      dmdInfoId: z
+        .string()
+        .min(1, "사업자등록번호를 입력해주세요")
+        .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다")
+        .refine(
+          () => (isBznmTotNoDisabled ? !isDuplicate : true),
+          "이미 등록된 사업자등록번호입니다",
+        ),
+      zip: z.string().optional(),
+      bznmTotNo: isBznmTotNoDisabled
+        ? z.string().optional()
+        : z
+            .string()
+            .length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다")
+            .refine(() => !isDuplicate, "이미 등록된 사업자등록번호입니다"),
+      daddr: z
+        .string()
+        .min(1, "주소를 입력해주세요")
+        // .min(6, "주소는 6자 이상 입력해주세요")
+        .max(40, "주소는 40자 이내로 입력해주세요"),
+      daddr2: z.string().optional(),
+      telno: z
+        .string()
+        .min(8, "전화번호는 8자 이상 입력해주세요")
+        .max(11, "전화번호는 11자 이내로 입력해주세요")
+        .regex(/^[0-9]+$/, "전화번호는 숫자만 입력 가능합니다"),
+      rgtr: z.string().optional(),
+      mdfr: z.string().nullish(),
+      dmdAplyPswd: updateList?.dmdInfoId // 업데이트일경우
+        ? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
+        : z
+            .string()
+            .optional()
+            .refine(
+              (val) => !val || (val.length >= 8 && val.length <= 16),
+              "패스워드는 8자 이상 16자 이내로 입력해주세요",
+            ),
+      dmdAplyPswdConfirm: updateList?.dmdInfoId // 업데이트일경우
+        ? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
+        : z.string().min(1, "패스워드확인을 입력해주세요"),
+    })
+    .refine(
+      (data) => {
+        // 패스워드 확인 검증
+        if (data.dmdAplyPswd && data.dmdAplyPswdConfirm) {
+          return data.dmdAplyPswd === data.dmdAplyPswdConfirm;
+        }
+        return true;
+      },
+      {
+        message: "패스워드가 일치하지 않습니다",
+        path: ["dmdAplyPswdConfirm"], // 에러를 패스워드 확인 필드에 표시
+      },
+    );
 
 type FormSchema = z.infer<ReturnType<typeof createFormSchema>>;
 
 const defaultValues: FormSchema = {
-  ctpvCd: '',
-  sggCd: '',
-  dmdCoNm: '',
-  dmdInfoId: '',
-  zip: '',
-  bznmTotNo: '',
-  daddr: '',
-  daddr2: '',
-  telno: '',
-  rgtr: '',
-  mdfr: '',
-  dmdAplyPswd: '',
-  dmdAplyPswdConfirm: '',
+  ctpvCd: "",
+  sggCd: "",
+  dmdCoNm: "",
+  dmdInfoId: "",
+  zip: "",
+  bznmTotNo: "",
+  daddr: "",
+  daddr2: "",
+  telno: "",
+  rgtr: "",
+  mdfr: "",
+  dmdAplyPswd: "",
+  dmdAplyPswdConfirm: "",
 };
 
 /**
@@ -92,14 +114,26 @@ const defaultValues: FormSchema = {
  * @param dataList 수요처 목록
  * @param rtnValue 검색 결과(텍스트) 콜백
  * @param rtnInputData 수요처관리 콜백 : 등록/수정 처리
- * @returns 
+ * @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 [isDuplicate, setIsDuplicate] = useState(false);
-  const formSchema = createFormSchema(isBznmTotNoDisabled, isDuplicate, updateList  );
+  const formSchema = createFormSchema(
+    isBznmTotNoDisabled,
+    isDuplicate,
+    updateList,
+  );
 
   const form = useForm<FormSchema>({
     resolver: zodResolver(formSchema),
@@ -107,37 +141,40 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
     mode: "onChange",
     criteriaMode: "all",
     shouldFocusError: false,
-    shouldUnregister: false
+    shouldUnregister: false,
   });
 
   // 체크박스 상태가 변경될 때마다 bznmTotNo 필드의 에러를 초기화
   useEffect(() => {
-    if (isBznmTotNoDisabled===true) {
-      form.clearErrors('bznmTotNo');
-      form.setValue('bznmTotNo', '');
+    if (isBznmTotNoDisabled === true) {
+      form.clearErrors("bznmTotNo");
+      form.setValue("bznmTotNo", "");
     }
   }, [isBznmTotNoDisabled, form]);
 
-  const setRtnValue = useCallback((searchText: string, pageCnt: number) => {
-    rtnValue(searchText, pageCnt);
-  }, [rtnValue]);
+  const setRtnValue = useCallback(
+    (searchText: string, pageCnt: number) => {
+      rtnValue(searchText, pageCnt);
+    },
+    [rtnValue],
+  );
 
   const onSubmit: SubmitHandler<FormSchema> = async (data) => {
     try {
       // form 에러 체크
       const formErrors = form.formState.errors;
-       
-      const myUUID =  getCookie('token-id') ||'c475824c-0e82-4a06-a282-2b55a20df265';
 
-      if (Object.keys(formErrors).length > 0 ) {
-        const errorMessage = Object.values(formErrors)[0]?.message || '입력값을 확인해주세요.';
+      const myUUID =
+        getCookie("token-id") || "c475824c-0e82-4a06-a282-2b55a20df265";
+
+      if (Object.keys(formErrors).length > 0) {
+        const errorMessage =
+          Object.values(formErrors)[0]?.message || "입력값을 확인해주세요.";
         toast.error(errorMessage);
         return;
       }
 
-
-     
-      const dmdInfoId = data.dmdInfoId + (data.bznmTotNo || '0000');
+      const dmdInfoId = data.dmdInfoId + (data.bznmTotNo || "0000");
       const formData = {
         ...data,
         dmdCoSn: updateList?.dmdCoSn ?? "",
@@ -145,32 +182,40 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
         bzmnNo: data.dmdInfoId,
         daddr: data.daddr?.trim() || "",
         daddr2: data.daddr2?.trim() || "",
-        rgtr: myUUID ,
+        rgtr: myUUID,
       };
 
-      
       /* await insertSdmData(formData); */
       rtnInputData(formData as unknown as DemandCompType); // 수요처 등록/수정 처리
-      
 
       //router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
     } catch (error) {
-      console.error('Error submitting form:', error);
+      console.error("Error submitting form:", error);
     }
   };
-  
+
   return (
     <>
       <div className="mb-8">
         <h2 className="px-[1.8rem] pt-[2rem] text-[2.4rem] font-semibold text-title">
-          {!updateList ? '수요처 등록' : readOnly == true ? '수요처 상세정보' : '수요처 수정'}
+          {!updateList
+            ? "수요처 등록"
+            : readOnly == true
+              ? "수요처 상세정보"
+              : "수요처 수정"}
         </h2>
       </div>
 
-      <div className= {bodyClassNm?bodyClassNm:"!max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6"}>
+      <div
+        className={
+          bodyClassNm
+            ? bodyClassNm
+            : "mx-auto !max-w-3xl rounded-lg bg-background p-6 shadow-md"
+        }
+      >
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <SdmRegForm 
+            <SdmRegForm
               form={form}
               onCheckboxChange={setIsBznmTotNoDisabled}
               selectSidoData={selectSidoData}
@@ -183,16 +228,16 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
               openNetwork={openNetwork}
             />
             <div className="flex justify-center pt-4">
-            {readOnly==true?<>
-          </>:
-           <Button 
-           type="submit" 
-           className="w-32 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200"
-         >
-           {updateList ?'수정' :'등록'} 
-         </Button>
-            } 
-            
+              {readOnly == true ? (
+                <></>
+              ) : (
+                <Button
+                  type="submit"
+                  className="hover:bg-primary/90 w-32 rounded-md bg-primary px-4 py-2 font-semibold text-primary-foreground transition-colors duration-200"
+                >
+                  {updateList ? "수정" : "등록"}
+                </Button>
+              )}
             </div>
           </form>
         </FormProvider>
diff --git a/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx b/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx
index 94edc3836..2611fc830 100644
--- a/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx
+++ b/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx
@@ -1,4 +1,6 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { DemandCompType } from "./form";
 
 export type thisProps = {
@@ -8,7 +10,7 @@ export type thisProps = {
   rtnValue: (searchText: string, pageCnt: number) => void;
   rtnData: (item: DemandCompType) => void;
   rtnText: (text: string) => void;
-  readOnly?:boolean
+  readOnly?: boolean;
 };
 
 /**
@@ -26,7 +28,7 @@ export const SdmSearchForm = ({
   dataList = [],
   rtnData = () => {},
   rtnText = () => {},
-  readOnly
+  readOnly,
 }: thisProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [textValue, setTextValue] = useState(initValue || "");
@@ -84,18 +86,18 @@ export const SdmSearchForm = ({
         value={textValue}
         onChange={handleInputChange}
         /* onFocus={() => setIsOpen(true)} */
-        className="h-[3.2rem] w-full rounded-md border border-gray-300 pl-3 !text-xl text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="h-[3.2rem] w-full rounded-md border border-input bg-background pl-3 !text-xl text-label focus:outline-none focus:ring-2 focus:ring-ring"
         placeholder={`${label}을(를) 입력하세요`}
         readOnly={readOnly}
       />
       {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="absolute left-0 top-full z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-border bg-popover text-popover-foreground shadow-lg">
           <div className="max-h-72">
             {dataList && dataList.length > 0 ? (
               dataList.map((item: DemandCompType, index: number) => (
                 <div
                   key={index}
-                  className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-gray-100"
+                  className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-accent hover:text-accent-foreground"
                   onClick={() => handleSuggestionClick(item)}
                   role="button"
                   tabIndex={0}
@@ -107,16 +109,20 @@ export const SdmSearchForm = ({
                 >
                   {item.dmdInfoId.substring(10, 14) !== "0000" ? (
                     <>
-                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      <span className="text-muted-foreground">
+                        사업자번호 :{" "}
+                      </span>{" "}
                       {item.dmdInfoId.substring(0, 10)}&nbsp;
-                      <span className="text-gray-500">
+                      <span className="text-muted-foreground">
                         종사업자번호 :{" "}
                       </span>{" "}
                       {item.dmdInfoId.substring(10, 14)}&nbsp;
                     </>
                   ) : (
                     <>
-                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      <span className="text-muted-foreground">
+                        사업자번호 :{" "}
+                      </span>{" "}
                       {item.dmdInfoId.substring(0, 10)}&nbsp;
                     </>
                   )}
@@ -124,7 +130,7 @@ export const SdmSearchForm = ({
                 </div>
               ))
             ) : (
-              <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl hover:bg-gray-100">
+              <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl hover:bg-accent hover:text-accent-foreground">
                 검색 결과가 없습니다.
               </div>
             )}
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 013cb7a38..fa8913aba 100644
--- a/packages/common/business_components/src/ui/search_address/SearchAddressModal.tsx
+++ b/packages/common/business_components/src/ui/search_address/SearchAddressModal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * 주소검색
  */
@@ -21,9 +23,9 @@ interface SearchAddressModalProps {
 
 /**
  * 주소 검색 값 감시
- * @param value 
- * @param delay 
- * @returns 
+ * @param value
+ * @param delay
+ * @returns
  */
 function useDebouncedValue<T>(value: T, delay = 250) {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -36,7 +38,11 @@ function useDebouncedValue<T>(value: T, delay = 250) {
   return debouncedValue;
 }
 
-export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddressModalProps) {
+export function SearchAddressModal({
+  open,
+  onOpenChange,
+  onSelect,
+}: SearchAddressModalProps) {
   const PAGE_SIZE = 10;
   const [curPage, setCurPage] = useState<number>(1);
   const [searchInput, setSearchInput] = useState<string>("");
@@ -46,9 +52,13 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
   const [searchMessage, setSearchMessage] = useState<string>("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [showSuggestions, setShowSuggestions] = useState<boolean>(true);
-  const [searchQuery, setSearchQuery] = useState<ZipSearchParams | undefined>(undefined);
+  const [searchQuery, setSearchQuery] = useState<ZipSearchParams | undefined>(
+    undefined,
+  );
   const [isResetPage, setIsResetPage] = useState<boolean>(false);
-  const [selectedRowIndex, setSelectedRowIndex] = useState<number | undefined>(undefined);
+  const [selectedRowIndex, setSelectedRowIndex] = useState<number | undefined>(
+    undefined,
+  );
   const [selectedZip, setSelectedZip] = useState<Zip>();
   const [isSelectedZip, setIsSelectedZip] = useState<boolean>(false);
 
@@ -195,16 +205,20 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
     }
   };
 
-  const showSuggest = open && showSuggestions && searchInput.trim().length >= 1 && suggestions.length > 0;
+  const showSuggest =
+    open &&
+    showSuggestions &&
+    searchInput.trim().length >= 1 &&
+    suggestions.length > 0;
 
   return (
     <UiModal
       headerTitle="주소 검색"
-      headerTitleClass="text-2xl font-bold text-gray-900"
+      headerTitleClass="text-2xl font-bold text-foreground"
       open={open}
       onOpenChange={onOpenChange}
       bodyClass={`
-          ${zipTotalElements > -1 ? 'h-[80vh]' : 'h-[30vh]'}
+          ${zipTotalElements > -1 ? "h-[80vh]" : "h-[30vh]"}
           w-[30vw]
           min-w-[500px]
           max-w-[90vw]
@@ -221,10 +235,7 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
         `}
       body={
         <>
-          <form
-            onSubmit={handleSearch}
-            className="mb-4 w-full space-y-2"
-          >
+          <form onSubmit={handleSearch} className="mb-4 w-full space-y-2">
             <div className="card card-border !m-0 flex flex-col gap-3 p-4">
               <div className="relative">
                 <div className="flex items-center gap-4">
@@ -239,30 +250,37 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
                       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">
+                      <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground 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"
+                            className="flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-accent hover:text-accent-foreground"
                             onClick={() => {
                               setSearchInput(suggestion);
                               setShowSuggestions(false);
                               setSuggestions([]);
                             }}
                           >
-                            <span className="truncate text-gray-800">{suggestion}</span>
-                            <span className="ml-4 text-gray-400">↵</span>
+                            <span className="truncate text-label">
+                              {suggestion}
+                            </span>
+                            <span className="ml-4 text-muted-foreground">
+                              ↵
+                            </span>
                           </button>
                         ))}
                       </div>
                     )}
                   </div>
-                  <Button className="rounded-md shrink-0" type="submit">검색</Button>
+                  <Button className="shrink-0 rounded-md" type="submit">
+                    검색
+                  </Button>
                 </div>
               </div>
-              <div className="text-sm text-gray-600">
-                {searchMessage || "도로명과 건물번호를 함께 입력해 주세요. 예) 테헤란로 152-1"}
+              <div className="text-sm text-muted-foreground">
+                {searchMessage ||
+                  "도로명과 건물번호를 함께 입력해 주세요. 예) 테헤란로 152-1"}
               </div>
             </div>
           </form>
@@ -288,7 +306,11 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
             </div>
           )}
           {zipTotalElements === 0 && (
-            <div className={cn("flex h-96 flex-col items-center justify-center gap-4")}>
+            <div
+              className={cn(
+                "flex h-96 flex-col items-center justify-center gap-4",
+              )}
+            >
               <i className="diveicon di-info-circle text-3xl" />
               조회된 데이터가 없습니다.
             </div>
@@ -296,9 +318,22 @@ export function SearchAddressModal({ open, onOpenChange, onSelect }: SearchAddre
         </>
       }
       footerContent={
-        <div className="w-full flex justify-center items-center gap-4">
-          <Button className="rounded-md" size="lg" onClick={handleConfirm} disabled={!isSelectedZip}>선택</Button>
-          <Button className="rounded-md" size="lg" onClick={() => onOpenChange(false)}>취소</Button>
+        <div className="flex w-full items-center justify-center gap-4">
+          <Button
+            className="rounded-md"
+            size="lg"
+            onClick={handleConfirm}
+            disabled={!isSelectedZip}
+          >
+            선택
+          </Button>
+          <Button
+            className="rounded-md"
+            size="lg"
+            onClick={() => onOpenChange(false)}
+          >
+            취소
+          </Button>
         </div>
       }
       useDirectRender={true}
diff --git a/packages/common/business_components/src/ui/search_input_address/index.tsx b/packages/common/business_components/src/ui/search_input_address/index.tsx
index 185e954c4..3db1f90cf 100644
--- a/packages/common/business_components/src/ui/search_input_address/index.tsx
+++ b/packages/common/business_components/src/ui/search_input_address/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // import { Input } from "@common/components/ui";
 // import React, { useCallback, useEffect, useRef, useState } from "react";
 // import { findAddress, searchFilter, type addressType } from "./findAddress";
@@ -91,18 +93,18 @@
 //         value={textValue}
 //         onChange={handleInputChange}
 //         /* onFocus={() => setIsOpen(true)} */
-//         className="h-[3.2rem] w-full rounded-md border border-gray-300 pl-3 !text-xl text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+//         className="h-[3.2rem] w-full rounded-md border border-input bg-background pl-3 !text-xl text-label focus:outline-none focus:ring-2 focus:ring-ring"
 //         placeholder={`주소를 입력하세요`}
 //         readOnly={readonly}
 //       />
 //       {isOpen && (
-//         <div className="absolute left-0 right-0 z-50 mt-2 max-h-72 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+//         <div className="absolute left-0 right-0 z-50 mt-2 max-h-72 overflow-auto rounded-md border border-border bg-popover text-popover-foreground shadow-lg">
 //           <div className="max-h-72">
 //             {searchList && searchList.length > 0 ? (
 //               searchList.map((item: addressType, index: number) => (
 //                 <div
 //                   key={index}
-//                   className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-gray-100"
+//                   className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-accent hover:text-accent-foreground"
 //                   onClick={() => handleSuggestionClick(item.roadAddrPart1)}
 //                   role="button"
 //                   tabIndex={0}
@@ -117,7 +119,7 @@
 //                 </div>
 //               ))
 //             ) : (
-//               <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl hover:bg-gray-100">
+//               <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl hover:bg-accent hover:text-accent-foreground">
 //                 검색 결과가 없습니다.
 //               </div>
 //             )}
diff --git a/packages/common/business_components/src/ui/select/index.tsx b/packages/common/business_components/src/ui/select/index.tsx
index 851d0539d..9dbfedb83 100644
--- a/packages/common/business_components/src/ui/select/index.tsx
+++ b/packages/common/business_components/src/ui/select/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import "./select.css";
 
 // selectBox
diff --git a/packages/common/business_components/src/ui/select/lib/selectBox.tsx b/packages/common/business_components/src/ui/select/lib/selectBox.tsx
index da0761733..a56bbdb9d 100644
--- a/packages/common/business_components/src/ui/select/lib/selectBox.tsx
+++ b/packages/common/business_components/src/ui/select/lib/selectBox.tsx
@@ -1,14 +1,14 @@
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "../../../lib/utils"
+import { cn } from "../../../lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -17,8 +17,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-14 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-xl ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-inset focus:ring-ring focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      "flex h-[3.2rem] w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-[1.3rem] ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-inset focus:ring-ring focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
     )}
     {...props}
   >
@@ -27,8 +27,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -38,14 +38,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -55,15 +55,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -86,7 +86,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -94,8 +94,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -106,8 +106,8 @@ const SelectLabel = React.forwardRef<
     className={cn("py-1.5 pl-8 pr-2 text-lg font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-lg outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -129,8 +129,8 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -141,12 +141,18 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
-  Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue
-}
-
-
-
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/packages/common/business_components/src/ui/standard_data_table/index.tsx b/packages/common/business_components/src/ui/standard_data_table/index.tsx
new file mode 100644
index 000000000..a6c1e0ab2
--- /dev/null
+++ b/packages/common/business_components/src/ui/standard_data_table/index.tsx
@@ -0,0 +1,316 @@
+"use client";
+
+import "./standard-data-table.css";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import type { Table as TableInstance } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import {
+  Button,
+  DataTable,
+  LoadingWithAnimation,
+  cn,
+} from "@common/components";
+
+type ScrollMode = "none" | "horizontal" | "vertical" | "both";
+
+type StandardDataTableProps<T> = {
+  table: TableInstance<T>;
+  title?: ReactNode;
+  total?: number;
+  actions?: ReactNode;
+  loading?: boolean;
+  emptyMessage?: string;
+  variant?: "default" | "secondary" | "line";
+  className?: string;
+  scrollMode?: ScrollMode;
+  minTableWidth?: string;
+  maxHeight?: string;
+  viewPagination?: boolean;
+  /** 팝업처럼 부모가 카드 간격을 직접 관리할 때 바깥 카드의 기본 margin을 제거한다. */
+  flushOuterMargin?: boolean;
+  /** 빈 목록일 때 부모의 남은 높이를 채워 팝업·페이지의 과도한 바깥 여백을 줄인다. */
+  fillAvailableHeight?: boolean;
+  onRowClick?: (row: T) => void;
+};
+
+type StandardDataTableStyle = CSSProperties & {
+  "--standard-data-table-min-width"?: string;
+  "--standard-data-table-max-height"?: string;
+};
+
+const DEFAULT_PAGINATION_MARGIN_TOP = 24;
+
+const STANDARD_ROW_NUMBER_HEADER = "순번";
+
+type StandardRowNumberParams = {
+  total: number;
+  rowIndex: number;
+  pageIndex?: number;
+  pageSize?: number;
+};
+
+/** 전체 건수를 기준으로 현재 페이지의 순번을 큰 값부터 계산한다. */
+function getStandardRowNumber({
+  total,
+  rowIndex,
+  pageIndex = 0,
+  pageSize = 0,
+}: StandardRowNumberParams) {
+  return Math.max(total - (pageIndex * pageSize + rowIndex), 0);
+}
+
+/** 스크롤 영역 밖에서 공통 DataTable과 같은 페이지 이동 규칙을 제공한다. */
+function StandardDataTablePagination<T>({
+  table,
+  marginTop,
+}: {
+  table: TableInstance<T>;
+  marginTop: number;
+}) {
+  const pageCount = table.getPageCount();
+  const currentPage = table.getState().pagination.pageIndex;
+  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.from(
+    { length: Math.max(endPage - startPage, 0) },
+    (_, index) => startPage + index,
+  );
+
+  return (
+    <div
+      className="flex items-center justify-center space-x-2"
+      style={{ marginTop }}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        color="white"
+        className="hidden size-10 p-0 lg:flex"
+        onClick={() => table.setPageIndex(0)}
+        disabled={!table.getCanPreviousPage()}
+        aria-label="첫 페이지로"
+      >
+        <span className="flex -space-x-2" aria-hidden="true">
+          <ChevronLeft className="size-4" />
+          <ChevronLeft className="size-4" />
+        </span>
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        color="white"
+        className="size-10 p-0"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+        aria-label="이전 페이지로"
+      >
+        <ChevronLeft className="size-4" />
+      </Button>
+      <div className="flex items-center justify-center text-sm font-medium">
+        {pageNumbers.map((pageNumber) => (
+          <Button
+            key={pageNumber}
+            type="button"
+            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={() => table.setPageIndex(pageNumber)}
+            aria-label={`${pageNumber + 1} 페이지`}
+            aria-current={currentPage === pageNumber ? "page" : undefined}
+          >
+            {pageNumber + 1}
+          </Button>
+        ))}
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        color="white"
+        className="size-10 p-0"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+        aria-label="다음 페이지로"
+      >
+        <ChevronRight className="size-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        color="white"
+        className="hidden size-10 p-0 lg:flex"
+        onClick={() =>
+          table.setPageIndex(Math.max(table.getPageCount() - 1, 0))
+        }
+        disabled={!table.getCanNextPage()}
+        aria-label="마지막 페이지로"
+      >
+        <span className="flex -space-x-2" aria-hidden="true">
+          <ChevronRight className="size-4" />
+          <ChevronRight className="size-4" />
+        </span>
+      </Button>
+    </div>
+  );
+}
+
+function StandardDataTable<T>({
+  table,
+  title,
+  total,
+  actions,
+  loading = false,
+  emptyMessage = "조회된 데이터가 없습니다.",
+  variant = "default",
+  className,
+  scrollMode = "none",
+  minTableWidth = "100%",
+  maxHeight = "none",
+  viewPagination = true,
+  flushOuterMargin = false,
+  fillAvailableHeight = false,
+  onRowClick,
+}: StandardDataTableProps<T>) {
+  const rowCount = table.getRowModel().rows.length;
+  const shouldFillAvailableHeight = fillAvailableHeight && rowCount === 0;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [paginationMarginTop, setPaginationMarginTop] = useState(
+    DEFAULT_PAGINATION_MARGIN_TOP,
+  );
+  const scrollClassName = cn(
+    "standard-data-table__scroll",
+    scrollMode === "horizontal" && "overflow-x-auto overflow-y-visible",
+    scrollMode === "vertical" && "overflow-x-hidden overflow-y-auto",
+    scrollMode === "both" && "overflow-auto",
+  );
+  const scrollStyle: StandardDataTableStyle = {
+    "--standard-data-table-min-width": minTableWidth,
+    "--standard-data-table-max-height": maxHeight,
+  };
+
+  /** 실제 가로 스크롤바가 차지하는 높이만큼 페이징 여백을 줄여 CS의 24px 체감 간격을 유지한다. */
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+
+    const updatePaginationMargin = () => {
+      const hasHorizontalOverflow =
+        scrollElement.scrollWidth > scrollElement.clientWidth + 1;
+      const horizontalScrollbarHeight = hasHorizontalOverflow
+        ? Math.max(scrollElement.offsetHeight - scrollElement.clientHeight, 0)
+        : 0;
+      const nextMargin = Math.max(
+        DEFAULT_PAGINATION_MARGIN_TOP - horizontalScrollbarHeight,
+        0,
+      );
+
+      setPaginationMarginTop((currentMargin) =>
+        currentMargin === nextMargin ? currentMargin : nextMargin,
+      );
+    };
+
+    updatePaginationMargin();
+
+    const resizeObserver = new ResizeObserver(updatePaginationMargin);
+    resizeObserver.observe(scrollElement);
+    const tableElement = scrollElement.querySelector("table");
+    if (tableElement) resizeObserver.observe(tableElement);
+    window.addEventListener("resize", updatePaginationMargin);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updatePaginationMargin);
+    };
+  }, [maxHeight, minTableWidth, rowCount, scrollMode]);
+
+  return (
+    <div
+      className={cn(
+        "standard-data-table card card-border min-w-0 overflow-hidden",
+        flushOuterMargin && "!m-0",
+        shouldFillAvailableHeight ? "flex min-h-0 flex-1 flex-col" : "shrink-0",
+        className,
+      )}
+    >
+      {title || actions ? (
+        <div className="card-header flex flex-wrap items-center justify-between gap-4">
+          <h3 className="text-2xl font-medium text-label">
+            {title}
+            {typeof total === "number" ? (
+              <span className="ml-2 text-base font-normal text-muted-foreground">
+                총 {total.toLocaleString("ko-KR")}건
+              </span>
+            ) : null}
+          </h3>
+          {actions ? (
+            <div className="flex flex-wrap gap-2">{actions}</div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div
+        className={cn(
+          "card !m-[1.2rem] min-w-0 overflow-hidden !p-0",
+          shouldFillAvailableHeight && "flex min-h-0 flex-1 flex-col",
+        )}
+      >
+        <div
+          ref={scrollRef}
+          className={cn(
+            scrollClassName,
+            shouldFillAvailableHeight && "min-h-96 flex-1",
+          )}
+          style={scrollStyle}
+        >
+          {loading || rowCount === 0 ? (
+            <div
+              className={cn(
+                "flex items-center justify-center text-[1.3rem] text-muted-foreground",
+                shouldFillAvailableHeight ? "h-full" : "h-96",
+              )}
+            >
+              {loading ? (
+                <LoadingWithAnimation color="primary" />
+              ) : (
+                emptyMessage
+              )}
+            </div>
+          ) : (
+            <DataTable
+              table={table}
+              variant={variant}
+              className={cn("w-full", className)}
+              viewPagination={false}
+              onRowClick={onRowClick}
+            />
+          )}
+        </div>
+        {viewPagination && !loading && rowCount > 0 ? (
+          <StandardDataTablePagination
+            table={table}
+            marginTop={paginationMarginTop}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export { STANDARD_ROW_NUMBER_HEADER, StandardDataTable, getStandardRowNumber };
+export type { ScrollMode, StandardDataTableProps, StandardRowNumberParams };
diff --git a/packages/common/business_components/src/ui/standard_data_table/standard-data-table.css b/packages/common/business_components/src/ui/standard_data_table/standard-data-table.css
new file mode 100644
index 000000000..ec5c00cbb
--- /dev/null
+++ b/packages/common/business_components/src/ui/standard_data_table/standard-data-table.css
@@ -0,0 +1,23 @@
+@tailwind components;
+
+@layer components {
+  .standard-data-table {
+    width: calc(100% - 1.2rem);
+    max-width: calc(100% - 1.2rem);
+  }
+
+  .standard-data-table__scroll {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    max-height: var(--standard-data-table-max-height, none);
+  }
+
+  .standard-data-table__scroll table {
+    min-width: var(--standard-data-table-min-width, 100%);
+  }
+
+  .standard-data-table__scroll thead th {
+    text-align: center;
+  }
+}
diff --git a/packages/common/business_components/src/ui/standard_form/index.tsx b/packages/common/business_components/src/ui/standard_form/index.tsx
new file mode 100644
index 000000000..1b5f21614
--- /dev/null
+++ b/packages/common/business_components/src/ui/standard_form/index.tsx
@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+
+import { Label } from "@common/components";
+
+type StandardFormColumns = 2 | 3;
+type StandardFormFieldSpan = 1 | 2 | 3;
+
+const SECTION_GRID_CLASS: Record<StandardFormColumns, string> = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-2 xl:grid-cols-3",
+};
+
+const FIELD_SPAN_CLASS: Record<
+  StandardFormColumns,
+  Record<StandardFormFieldSpan, string>
+> = {
+  2: {
+    1: "",
+    2: "md:col-span-2",
+    3: "md:col-span-2",
+  },
+  3: {
+    1: "",
+    2: "md:col-span-2 xl:col-span-2",
+    3: "md:col-span-2 xl:col-span-3",
+  },
+};
+
+type StandardFormSectionProps = {
+  title: ReactNode;
+  children: ReactNode;
+  columns?: StandardFormColumns;
+  className?: string;
+};
+
+type StandardFormFieldProps = {
+  id?: string;
+  label: ReactNode;
+  required?: boolean;
+  error?: ReactNode;
+  span?: StandardFormFieldSpan;
+  columns?: StandardFormColumns;
+  children: ReactNode;
+  className?: string;
+};
+
+/** CS 표형 입력의 섹션 헤더와 반응형 2~3열 배치를 업무 화면에 공통 제공한다. */
+function StandardFormSection({
+  title,
+  children,
+  columns = 3,
+  className = "",
+}: StandardFormSectionProps) {
+  return (
+    <section
+      className={`overflow-hidden rounded-sm border border-border bg-background ${className}`}
+    >
+      <h4 className="border-b border-border bg-container px-4 py-3 text-[1.4rem] font-semibold text-label">
+        {title}
+      </h4>
+      <div
+        className={`grid grid-cols-1 gap-px bg-border ${SECTION_GRID_CLASS[columns]}`}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}
+
+/** 라벨·필수 표시·검증 문구·입력 영역을 한 셀로 묶고 섹션 열 수에 맞춰 병합한다. */
+function StandardFormField({
+  id,
+  label,
+  required = false,
+  error,
+  span = 1,
+  columns = 3,
+  children,
+  className = "",
+}: StandardFormFieldProps) {
+  return (
+    <div
+      className={`grid min-w-0 grid-cols-[9rem_minmax(0,1fr)] bg-background sm:grid-cols-[11.5rem_minmax(0,1fr)] ${FIELD_SPAN_CLASS[columns][span]} ${className}`}
+    >
+      <Label
+        htmlFor={id}
+        className="flex min-h-[5.6rem] items-center border-r border-border bg-secondary px-4 py-3 text-[1.25rem] font-medium leading-5 text-label"
+      >
+        {required ? <span className="mr-1 text-red-600">*</span> : null}
+        {label}
+      </Label>
+      <div className="min-w-0 p-3">
+        {children}
+        {error ? (
+          <p className="mt-1 text-[1.2rem] text-red-600" role="alert">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export { StandardFormField, StandardFormSection };
+export type {
+  StandardFormColumns,
+  StandardFormFieldProps,
+  StandardFormFieldSpan,
+  StandardFormSectionProps,
+};
diff --git a/packages/common/business_components/src/ui/standard_popup/index.tsx b/packages/common/business_components/src/ui/standard_popup/index.tsx
new file mode 100644
index 000000000..d5b53c0a2
--- /dev/null
+++ b/packages/common/business_components/src/ui/standard_popup/index.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Button, cn } from "@common/components";
+
+type StandardPopupLayoutProps = {
+  title: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  /** 이미 업무별 취소 액션을 제공하는 화면에서만 false로 설정한다. */
+  showDefaultCancelAction?: boolean;
+  onCancel?: () => void;
+};
+
+/** CS 카드형 화면 규칙을 별도 창 팝업에도 동일하게 제공한다. */
+function StandardPopupLayout({
+  title,
+  actions,
+  children,
+  footer,
+  className,
+  bodyClassName,
+  showDefaultCancelAction = true,
+  onCancel,
+}: StandardPopupLayoutProps) {
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+      return;
+    }
+    window.close();
+  };
+
+  return (
+    <main className="flex h-dvh min-h-0 flex-col bg-container p-3">
+      <section
+        className={cn(
+          "card card-border !m-0 flex min-h-0 flex-1 flex-col overflow-hidden !p-[0.6rem]",
+          className,
+        )}
+      >
+        <header className="card-header min-h-[5.2rem] shrink-0 gap-3">
+          <h1 className="min-w-0 text-[1.8rem] font-semibold text-label">
+            {title}
+          </h1>
+          {actions || showDefaultCancelAction ? (
+            <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+              {actions}
+              {showDefaultCancelAction ? (
+                <Button
+                  type="button"
+                  color="white"
+                  onClick={handleCancel}
+                  data-testid="window-popup-cancel"
+                >
+                  취소
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+        </header>
+
+        <div
+          className={cn(
+            "flex min-h-0 flex-1 flex-col gap-[1.2rem] overflow-y-auto bg-background p-3",
+            bodyClassName,
+          )}
+        >
+          {children}
+        </div>
+
+        {footer ? (
+          <footer className="card-footer shrink-0">{footer}</footer>
+        ) : null}
+      </section>
+    </main>
+  );
+}
+
+export { StandardPopupLayout };
+export type { StandardPopupLayoutProps };
diff --git a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
index b13d2542e..a680456aa 100644
--- a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
+++ b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
@@ -39,21 +39,21 @@ const HeadMakeColSpan = ({
         <span>{head.title}</span>
         {direction === "asc" ? (
           <span
-            className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
+            className="inline-flex min-w-2 justify-center text-[8px] leading-none text-primary"
             aria-hidden="true"
           >
             ▲
           </span>
         ) : direction === "desc" ? (
           <span
-            className="inline-flex min-w-2 justify-center text-[8px] leading-none text-[#1d4ed8]"
+            className="inline-flex min-w-2 justify-center text-[8px] leading-none text-primary"
             aria-hidden="true"
           >
             ▼
           </span>
         ) : (
           <span
-            className="inline-flex flex-col items-center gap-px text-[6px] leading-none text-[#475569]"
+            className="inline-flex flex-col items-center gap-px text-[6px] leading-none text-muted-foreground"
             aria-hidden="true"
           >
             <span>▲</span>
@@ -76,7 +76,7 @@ const HeadMakeColSpan = ({
         colSpan={head.colSpan || 1}
         rowSpan={head.rowSpan || 1}
         style={{ whiteSpace: "pre-line" }}
-        className="bg-gray-50"
+        className="bg-secondary"
         aria-sort={
           sortable
             ? direction === "asc"
@@ -94,7 +94,7 @@ const HeadMakeColSpan = ({
 
   if (maxRow === 0) {
     return (
-      <TableRow className="bg-gray-50">
+      <TableRow className="bg-secondary">
         {upHeadList
           .filter((item) => item.visible !== false)
           .map((head) => renderHead(head, head.id))}
@@ -105,7 +105,7 @@ const HeadMakeColSpan = ({
   return (
     <>
       {Array.from({ length: maxRow + 1 }, (_, rowIndex) => (
-        <TableRow key={`${rowIndex} headerRow`} className="bg-gray-50">
+        <TableRow key={`${rowIndex} headerRow`} className="bg-secondary">
           {upHeadList
             .filter((item) => item.visible !== false && item.row === rowIndex)
             .map((head, index) =>
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 5505217e5..f6556e475 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -31,7 +31,11 @@ type UiTableProps<T extends object> = {
   onPageChange: (page: number) => void;
   cellClassName?: (row: T, headId: string, rowIndex: number) => string;
   rowClassName?: (row: T, rowIndex: number) => string;
-  renderCell?: (row: T, headId: string, rowIndex: number) => React.ReactNode | undefined;
+  renderCell?: (
+    row: T,
+    headId: string,
+    rowIndex: number,
+  ) => React.ReactNode | undefined;
   className?: string;
   resetPageNo?: boolean;
   children?: React.ReactNode | undefined;
@@ -145,11 +149,12 @@ export function UiTable<T extends object = Record<string, unknown>>({
     const maxRow = list?.reduce((max, head) => Math.max(max, head.row || 0), 0);
     return list
       .filter((h) => h.visible !== false)
-      .filter((h) => ((h.row ?? 0) + (h.rowSpan ?? 1) - 1) >= maxRow);
+      .filter((h) => (h.row ?? 0) + (h.rowSpan ?? 1) - 1 >= maxRow);
   };
 
   const leafCols = getLeafCols(headlist);
-  const totalLabel = typeof total === "number" ? total.toLocaleString("ko-KR") : " ";
+  const totalLabel =
+    typeof total === "number" ? total.toLocaleString("ko-KR") : " ";
   const hasTotal = typeof total === "number";
 
   return (
@@ -174,12 +179,21 @@ export function UiTable<T extends object = Record<string, unknown>>({
       ) : (
         <></>
       )}
-      <div className={`card ${noOuterMargin ? "!m-0" : "!m-[1.2rem]"} ${className}`}>
+      <div
+        className={`card ${noOuterMargin ? "!m-0" : "!m-[1.2rem]"} ${className}`}
+      >
         <Table variant="secondary" className={widthFixed ? "table-fixed" : ""}>
           {widthFixed ? (
             <colgroup>
               {leafCols.map((col) => (
-                <col key={col.id} style={{ width: col.widthPercent ? `${col.widthPercent}%` : undefined }} />
+                <col
+                  key={col.id}
+                  style={{
+                    width: col.widthPercent
+                      ? `${col.widthPercent}%`
+                      : undefined,
+                  }}
+                />
               ))}
             </colgroup>
           ) : (
@@ -212,21 +226,31 @@ export function UiTable<T extends object = Record<string, unknown>>({
                         head.id.length > 1 &&
                         (boldArray.includes(index) ? (
                           <TableCell
-                            className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${isHeadClickable(head.id) && idx === index
-                              ? "cursor-pointer !font-[1000]"
-                              : isHeadClickable(head.id)
-                                ? "cursor-pointer"
-                                : ""
-                              } ${cellClassName ? cellClassName(el, head.id, index) : ""} sticky top-20 z-40 bg-secondary !font-bold whitespace-pre-line`}
-                            style={{ top: `${headerHeight + index * 32 - 4}px` }}
+                            className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${
+                              isHeadClickable(head.id) && idx === index
+                                ? "cursor-pointer !font-[1000]"
+                                : isHeadClickable(head.id)
+                                  ? "cursor-pointer"
+                                  : ""
+                            } ${cellClassName ? cellClassName(el, head.id, index) : ""} sticky top-20 z-40 whitespace-pre-line bg-secondary !font-bold`}
+                            style={{
+                              top: `${headerHeight + index * 32 - 4}px`,
+                            }}
                             onClick={() => handleCellClick(index, head.id)}
                             key={`cell-${head.id}-${index}`}
                           >
                             {(() => {
-                              const renderedCell = renderCell?.(el, head.id, index);
-                              if (renderedCell !== undefined) return renderedCell;
+                              const renderedCell = renderCell?.(
+                                el,
+                                head.id,
+                                index,
+                              );
+                              if (renderedCell !== undefined)
+                                return renderedCell;
 
-                              const cellValue = (el as Record<string, unknown>)[head.id];
+                              const cellValue = (el as Record<string, unknown>)[
+                                head.id
+                              ];
                               return typeof cellValue !== "number"
                                 ? String(cellValue ?? "")
                                 : String(cellValue).includes(".")
@@ -234,38 +258,58 @@ export function UiTable<T extends object = Record<string, unknown>>({
                                       .split(".")
                                       .map((part, index) =>
                                         index === 0
-                                          ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                                          ? part.replace(
+                                              /\B(?=(\d{3})+(?!\d))/g,
+                                              ",",
+                                            )
                                           : part,
                                       )
                                       .join(".")
-                                  : String(cellValue ?? "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                                  : String(cellValue ?? "").replace(
+                                      /\B(?=(\d{3})+(?!\d))/g,
+                                      ",",
+                                    );
                             })()}
                           </TableCell>
                         ) : (
                           <TableCell
-                            className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${isHeadClickable(head.id) && idx === index
-                              ? "cursor-pointer !font-[1000]"
-                              : isHeadClickable(head.id)
-                                ? "cursor-pointer"
-                                : ""
-                              } ${cellClassName ? cellClassName(el, head.id, index) : ""} mt-[${boldArray.length * 40}px] whitespace-pre-line`}
+                            className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${
+                              isHeadClickable(head.id) && idx === index
+                                ? "cursor-pointer !font-[1000]"
+                                : isHeadClickable(head.id)
+                                  ? "cursor-pointer"
+                                  : ""
+                            } ${cellClassName ? cellClassName(el, head.id, index) : ""} mt-[${boldArray.length * 40}px] whitespace-pre-line`}
                             onClick={() => handleCellClick(index, head.id)}
                             key={`cell-${head.id}-${index}`}
                           >
                             {(() => {
-                              const renderedCell = renderCell?.(el, head.id, index);
-                              if (renderedCell !== undefined) return renderedCell;
+                              const renderedCell = renderCell?.(
+                                el,
+                                head.id,
+                                index,
+                              );
+                              if (renderedCell !== undefined)
+                                return renderedCell;
 
-                              const cellValue = (el as Record<string, unknown>)[head.id];
+                              const cellValue = (el as Record<string, unknown>)[
+                                head.id
+                              ];
                               return typeof cellValue === "object" &&
                                 cellValue !== null &&
                                 "chk" in (cellValue as object) &&
                                 "readonly" in (cellValue as object) ? (
                                 <Checkbox
-                                  checked={(cellValue as ChkClass)?.chk === true}
+                                  checked={
+                                    (cellValue as ChkClass)?.chk === true
+                                  }
                                   onCheckedChange={(checked) => {
-                                    if ((cellValue as ChkClass).readonly == true) return;
-                                    (cellValue as ChkClass).chk = Boolean(checked);
+                                    if (
+                                      (cellValue as ChkClass).readonly == true
+                                    )
+                                      return;
+                                    (cellValue as ChkClass).chk =
+                                      Boolean(checked);
                                   }}
                                 >
                                   <Check className="h-6 w-6 text-primary" />
@@ -274,7 +318,8 @@ export function UiTable<T extends object = Record<string, unknown>>({
                                 <Checkbox
                                   checked={cellValue === true}
                                   onCheckedChange={(checked) => {
-                                    (el as Record<string, unknown>)[head.id] = checked;
+                                    (el as Record<string, unknown>)[head.id] =
+                                      checked;
                                   }}
                                 >
                                   <Check className="h-6 w-6 text-primary" />
@@ -285,11 +330,19 @@ export function UiTable<T extends object = Record<string, unknown>>({
                                 String(cellValue)
                                   .split(".")
                                   .map((part, index) =>
-                                    index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part,
+                                    index === 0
+                                      ? part.replace(
+                                          /\B(?=(\d{3})+(?!\d))/g,
+                                          ",",
+                                        )
+                                      : part,
                                   )
                                   .join(".")
                               ) : (
-                                String(cellValue ?? "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                                String(cellValue ?? "").replace(
+                                  /\B(?=(\d{3})+(?!\d))/g,
+                                  ",",
+                                )
                               );
                             })()}
                           </TableCell>
@@ -308,7 +361,7 @@ export function UiTable<T extends object = Record<string, unknown>>({
                         (item.colSpan || ["A", "B", "C"].includes(item.id)),
                     ).length
                   }
-                  className="h-24 text-center text-gray-500"
+                  className="h-24 text-center text-muted-foreground"
                 >
                   조회된 결과가 없습니다.
                 </TableCell>