diff --git a/apps/as/app/(with-base-layout)/design-cnstn/[id]/edit/page.tsx b/apps/as/app/(with-base-layout)/design-cnstn/[id]/edit/page.tsx
new file mode 100644
index 000000000..e5df52e22
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/design-cnstn/[id]/edit/page.tsx
@@ -0,0 +1,10 @@
+import { DesignEditPage } from "@/pages/design-cnstn";
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function Page({ params }: PageProps) {
+  const { id } = await params;
+  return <DesignEditPage id={id} />;
+}
diff --git a/apps/as/app/(with-base-layout)/design-cnstn/[id]/page.tsx b/apps/as/app/(with-base-layout)/design-cnstn/[id]/page.tsx
new file mode 100644
index 000000000..1b0fc983c
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/design-cnstn/[id]/page.tsx
@@ -0,0 +1,10 @@
+import { DesignViewPage } from "@/pages/design-cnstn";
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function Page({ params }: PageProps) {
+  const { id } = await params;
+  return <DesignViewPage id={id} />;
+}
diff --git a/apps/as/app/(with-base-layout)/design-cnstn/page.tsx b/apps/as/app/(with-base-layout)/design-cnstn/page.tsx
new file mode 100644
index 000000000..cced4a877
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/design-cnstn/page.tsx
@@ -0,0 +1,3 @@
+import { DesignListPage } from "@/pages/design-cnstn";
+
+export default DesignListPage;
diff --git a/apps/as/app/(with-base-layout)/design-cnstn/regist/page.tsx b/apps/as/app/(with-base-layout)/design-cnstn/regist/page.tsx
new file mode 100644
index 000000000..567b634d5
--- /dev/null
+++ b/apps/as/app/(with-base-layout)/design-cnstn/regist/page.tsx
@@ -0,0 +1,12 @@
+import { DesignRegistPage } from "@/pages/design-cnstn";
+import { parseTaskSeComCdFromApi } from "@/pages/design-cnstn/lib/design-cnstn-regist-schema";
+
+interface PageProps {
+  searchParams: Promise<{ taskSeComCd?: string }>;
+}
+
+export default async function Page({ searchParams }: PageProps) {
+  const params = await searchParams;
+  const taskSeComCd = parseTaskSeComCdFromApi(params.taskSeComCd);
+  return <DesignRegistPage taskSeComCd={taskSeComCd.length ? taskSeComCd : undefined} />;
+}
diff --git a/apps/as/app/api/proxy/[...url]/route.ts b/apps/as/app/api/proxy/[...url]/route.ts
index b32008942..d54f08656 100644
--- a/apps/as/app/api/proxy/[...url]/route.ts
+++ b/apps/as/app/api/proxy/[...url]/route.ts
@@ -68,7 +68,7 @@ async function handler(
         cookieStore.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
           sameSite: "strict",
-          domain: getCookieDomain(),
+          domain: COOKIE_DOMAIN,
           path: "/",
         });
       }
@@ -92,14 +92,3 @@ export async function PUT(request: Request, props: { params: Promise<{ url: stri
   const params = await props.params;
   return handler(request, params, "PUT");
 }
-
-function getCookieDomain(): string | undefined {
-  if (typeof window === "undefined") return undefined;
-
-  if (COOKIE_DOMAIN) return COOKIE_DOMAIN;
-
-  const { hostname } = window.location;
-  if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
-
-  return hostname;
-}
diff --git a/apps/as/next.config.ts b/apps/as/next.config.ts
index be9b410eb..b8c17efb2 100644
--- a/apps/as/next.config.ts
+++ b/apps/as/next.config.ts
@@ -3,6 +3,7 @@ import { withSentryConfig } from "@sentry/nextjs";
 import path from "path";
 
 const nextConfig: NextConfig = {
+  output: "standalone",
   reactStrictMode: true,
   transpilePackages: ["@common/assets"],
   outputFileTracingRoot: path.join(__dirname, "../../"),
diff --git a/apps/as/src/app/providers/index.tsx b/apps/as/src/app/providers/index.tsx
index 20ec0b72e..2a0ac6e69 100644
--- a/apps/as/src/app/providers/index.tsx
+++ b/apps/as/src/app/providers/index.tsx
@@ -27,7 +27,9 @@ export function Providers({ children }: ProvidersProps) {
           </AuthWrapper>
         </ConfirmProvider>
       </StoreProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
+      <div style={{ fontSize: "1.4rem" }}>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </div>
     </QueryClientProvider>
   );
 }
diff --git a/apps/as/src/entities/auth/api/auth-service.ts b/apps/as/src/entities/auth/api/auth-service.ts
index 934471c50..b7158bf80 100644
--- a/apps/as/src/entities/auth/api/auth-service.ts
+++ b/apps/as/src/entities/auth/api/auth-service.ts
@@ -1,14 +1,8 @@
 import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
-import { type AuthPayload, type AuthService, getRemainingMs } from "@common/auth";
+import { type AuthPayload, type AuthService } from "@common/auth";
 
 import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
-import {
-  clearRefreshTimer,
-  removeToken,
-  setToken,
-  setupRefreshTimer,
-  tokenManager,
-} from "../lib/token-manager";
+import { clearRefreshTimer, setToken, tokenManager } from "../lib/token-manager";
 
 async function login(payload: AuthPayload): Promise<void> {
   const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
@@ -32,10 +26,10 @@ async function login(payload: AuthPayload): Promise<void> {
   setToken(CLAIM_NAME, accessToken);
   setToken(AUTH_USER_ID, tokenId);
 
-  const remainingMs = getRemainingMs(accessToken);
-  if (remainingMs > 0) {
-    setupRefreshTimer(silentRefresh, remainingMs);
-  }
+  // const remainingMs = getRemainingMs(accessToken);
+  // if (remainingMs > 0) {
+  //   setupRefreshTimer(silentRefresh, remainingMs);
+  // }
 }
 
 async function silentRefresh(): Promise<void> {
@@ -64,10 +58,10 @@ async function silentRefresh(): Promise<void> {
     setToken(CLAIM_NAME, accessToken);
     setToken(AUTH_USER_ID, tokenId);
 
-    const remainingMs = getRemainingMs(accessToken);
-    if (remainingMs > 0) {
-      setupRefreshTimer(silentRefresh, remainingMs);
-    }
+    // const remainingMs = getRemainingMs(accessToken);
+    // if (remainingMs > 0) {
+    //   setupRefreshTimer(silentRefresh, remainingMs);
+    // }
   } catch (error) {
     console.error(`[silentRefresh] Failed at ${new Date().toISOString()}`, error);
     tokenManager.clearAuthToken();
@@ -79,8 +73,6 @@ async function silentRefresh(): Promise<void> {
 
 async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
-  removeToken("site-id-key");
-  removeToken("site-theme-key");
   clearDeviceId();
 
   if (typeof window !== "undefined") {
diff --git a/apps/as/src/entities/code/ui/code-select.tsx b/apps/as/src/entities/code/ui/code-select.tsx
index e803e9285..74d011bcd 100644
--- a/apps/as/src/entities/code/ui/code-select.tsx
+++ b/apps/as/src/entities/code/ui/code-select.tsx
@@ -18,13 +18,7 @@ interface CodeSelectProps extends React.ComponentPropsWithoutRef<typeof Select>
   className?: string;
 }
 
-function CodeSelect({
-  upCd,
-  useYn,
-  placeholder = "선택",
-  className,
-  ...props
-}: CodeSelectProps) {
+function CodeSelect({ upCd, useYn, placeholder = "선택", className, ...props }: CodeSelectProps) {
   const listQuery = useCodeList(useYn ? undefined : upCd);
   const listByUseYnQuery = useCodeListByUseYn(useYn ? upCd : undefined, useYn ?? "");
 
@@ -34,7 +28,7 @@ function CodeSelect({
   return (
     <Select {...props} disabled={props.disabled || isLoading}>
       <SelectTrigger className={cn("w-[12rem]", className)}>
-        <SelectValue placeholder={isLoading ? "로딩 중…" : placeholder} />
+        <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>
         {codes?.map((item) => (
diff --git a/apps/as/src/entities/design-cnstn/api/design-cnstn-biz-cst-service.ts b/apps/as/src/entities/design-cnstn/api/design-cnstn-biz-cst-service.ts
new file mode 100644
index 000000000..427f6e65a
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/api/design-cnstn-biz-cst-service.ts
@@ -0,0 +1,58 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  DesignCnstnBizCstId,
+  DesignCnstnBizCstResponseDto,
+  DesignCnstnBizCstSaveRequestDto,
+  DesignCnstnBizCstSearchDto,
+  DesignCnstnBizCstService,
+  DesignCnstnBizCstUpdateRequestDto,
+} from "../model/design-cnstn-biz-cst-interface";
+
+const BASE = ENDPOINT.AS_SERVICE.DESIGN_CNSTN_BIZ_CST;
+
+async function findPage(
+  searchDto: DesignCnstnBizCstSearchDto,
+): Promise<PageResponse<DesignCnstnBizCstResponseDto>> {
+  const response = await client.get<PageResponse<DesignCnstnBizCstResponseDto>>(BASE, {
+    params: searchDto,
+  });
+  return response.data;
+}
+
+async function findById(
+  designCnstnDocNo: string,
+  acntgSeCd: string,
+): Promise<DesignCnstnBizCstResponseDto> {
+  const response = await client.get<DesignCnstnBizCstResponseDto>(
+    `${BASE}/${designCnstnDocNo}/${acntgSeCd}`,
+  );
+  return response.data;
+}
+
+async function save(body: DesignCnstnBizCstSaveRequestDto): Promise<DesignCnstnBizCstId> {
+  const response = await client.post<DesignCnstnBizCstId>(BASE, body);
+  return response.data;
+}
+
+async function update(
+  designCnstnDocNo: string,
+  acntgSeCd: string,
+  body: DesignCnstnBizCstUpdateRequestDto,
+): Promise<void> {
+  await client.put<void>(`${BASE}/${designCnstnDocNo}/${acntgSeCd}`, body);
+}
+
+async function deleteDesignCnstnBizCst(designCnstnDocNo: string, acntgSeCd: string): Promise<void> {
+  await client.delete<void>(`${BASE}/${designCnstnDocNo}/${acntgSeCd}`);
+}
+
+export const designCnstnBizCstService = {
+  findPage,
+  findById,
+  save,
+  update,
+  delete: deleteDesignCnstnBizCst,
+} satisfies DesignCnstnBizCstService;
diff --git a/apps/as/src/entities/design-cnstn/api/design-cnstn-biz-scl-service.ts b/apps/as/src/entities/design-cnstn/api/design-cnstn-biz-scl-service.ts
new file mode 100644
index 000000000..d4cc8cabf
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/api/design-cnstn-biz-scl-service.ts
@@ -0,0 +1,58 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  DesignCnstnBizSclId,
+  DesignCnstnBizSclResponseDto,
+  DesignCnstnBizSclSaveRequestDto,
+  DesignCnstnBizSclSearchDto,
+  DesignCnstnBizSclService,
+  DesignCnstnBizSclUpdateRequestDto,
+} from "../model/design-cnstn-biz-scl-interface";
+
+const BASE = ENDPOINT.AS_SERVICE.DESIGN_CNSTN_BIZ_SCL;
+
+async function findPage(
+  searchDto: DesignCnstnBizSclSearchDto,
+): Promise<PageResponse<DesignCnstnBizSclResponseDto>> {
+  const response = await client.get<PageResponse<DesignCnstnBizSclResponseDto>>(BASE, {
+    params: searchDto,
+  });
+  return response.data;
+}
+
+async function findById(
+  designCnstnDocNo: string,
+  cnstpSeCd: string,
+): Promise<DesignCnstnBizSclResponseDto> {
+  const response = await client.get<DesignCnstnBizSclResponseDto>(
+    `${BASE}/${designCnstnDocNo}/${cnstpSeCd}`,
+  );
+  return response.data;
+}
+
+async function save(body: DesignCnstnBizSclSaveRequestDto): Promise<DesignCnstnBizSclId> {
+  const response = await client.post<DesignCnstnBizSclId>(BASE, body);
+  return response.data;
+}
+
+async function update(
+  designCnstnDocNo: string,
+  cnstpSeCd: string,
+  body: DesignCnstnBizSclUpdateRequestDto,
+): Promise<void> {
+  await client.put<void>(`${BASE}/${designCnstnDocNo}/${cnstpSeCd}`, body);
+}
+
+async function deleteDesignCnstnBizScl(designCnstnDocNo: string, cnstpSeCd: string): Promise<void> {
+  await client.delete<void>(`${BASE}/${designCnstnDocNo}/${cnstpSeCd}`);
+}
+
+export const designCnstnBizSclService = {
+  findPage,
+  findById,
+  save,
+  update,
+  delete: deleteDesignCnstnBizScl,
+} satisfies DesignCnstnBizSclService;
diff --git a/apps/as/src/entities/design-cnstn/api/design-cnstn-esntl-atch-file-service.ts b/apps/as/src/entities/design-cnstn/api/design-cnstn-esntl-atch-file-service.ts
new file mode 100644
index 000000000..a47993149
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/api/design-cnstn-esntl-atch-file-service.ts
@@ -0,0 +1,63 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  DesignCnstnEsntlAtchFileId,
+  DesignCnstnEsntlAtchFileResponseDto,
+  DesignCnstnEsntlAtchFileSaveRequestDto,
+  DesignCnstnEsntlAtchFileSearchDto,
+  DesignCnstnEsntlAtchFileService,
+  DesignCnstnEsntlAtchFileUpdateRequestDto,
+} from "../model/design-cnstn-esntl-atch-file-interface";
+
+const BASE = ENDPOINT.AS_SERVICE.DESIGN_CNSTN_ESNTL_ATCH_FILE;
+
+async function findPage(
+  searchDto: DesignCnstnEsntlAtchFileSearchDto,
+): Promise<PageResponse<DesignCnstnEsntlAtchFileResponseDto>> {
+  const response = await client.get<PageResponse<DesignCnstnEsntlAtchFileResponseDto>>(BASE, {
+    params: searchDto,
+  });
+  return response.data;
+}
+
+async function findById(
+  designCnstnDocNo: string,
+  esntlAtchFileId: string,
+): Promise<DesignCnstnEsntlAtchFileResponseDto> {
+  const response = await client.get<DesignCnstnEsntlAtchFileResponseDto>(
+    `${BASE}/${designCnstnDocNo}/${esntlAtchFileId}`,
+  );
+  return response.data;
+}
+
+async function save(
+  body: DesignCnstnEsntlAtchFileSaveRequestDto,
+): Promise<DesignCnstnEsntlAtchFileId> {
+  const response = await client.post<DesignCnstnEsntlAtchFileId>(BASE, body);
+  return response.data;
+}
+
+async function update(
+  designCnstnDocNo: string,
+  esntlAtchFileId: string,
+  body: DesignCnstnEsntlAtchFileUpdateRequestDto,
+): Promise<void> {
+  await client.put<void>(`${BASE}/${designCnstnDocNo}/${esntlAtchFileId}`, body);
+}
+
+async function deleteDesignCnstnEsntlAtchFile(
+  designCnstnDocNo: string,
+  esntlAtchFileId: string,
+): Promise<void> {
+  await client.delete<void>(`${BASE}/${designCnstnDocNo}/${esntlAtchFileId}`);
+}
+
+export const designCnstnEsntlAtchFileService = {
+  findPage,
+  findById,
+  save,
+  update,
+  delete: deleteDesignCnstnEsntlAtchFile,
+} satisfies DesignCnstnEsntlAtchFileService;
diff --git a/apps/as/src/entities/design-cnstn/api/design-cnstn-mng-service.ts b/apps/as/src/entities/design-cnstn/api/design-cnstn-mng-service.ts
new file mode 100644
index 000000000..3fc3e52ae
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/api/design-cnstn-mng-service.ts
@@ -0,0 +1,61 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  DesignCnstnApplySaveRequestDto,
+  DesignCnstnMngDetResponseDto,
+  DesignCnstnMngResponseDto,
+  DesignCnstnMngSaveRequestDto,
+  DesignCnstnMngSearchDto,
+  DesignCnstnMngService,
+  DesignCnstnMngUpdateRequestDto,
+} from "../model/design-cnstn-mng-interface";
+
+const BASE = ENDPOINT.AS_SERVICE.DESIGN_CNSTN;
+
+async function findPage(
+  searchDto: DesignCnstnMngSearchDto,
+): Promise<PageResponse<DesignCnstnMngResponseDto>> {
+  const response = await client.get<PageResponse<DesignCnstnMngResponseDto>>(BASE, {
+    params: searchDto,
+  });
+  return response.data;
+}
+
+async function findById(id: string): Promise<DesignCnstnMngDetResponseDto> {
+  const response = await client.get<DesignCnstnMngDetResponseDto>(`${BASE}/${id}`);
+  return response.data;
+}
+
+async function save(body: DesignCnstnMngSaveRequestDto): Promise<string> {
+  const response = await client.post<string>(BASE, body);
+  return response.data;
+}
+
+async function saveApply(body: DesignCnstnApplySaveRequestDto): Promise<string> {
+  const response = await client.post<string>(`${BASE}/save-apply`, body);
+  return response.data;
+}
+
+async function update(id: string, body: DesignCnstnMngUpdateRequestDto): Promise<void> {
+  await client.put<void>(`${BASE}/${id}`, body);
+}
+
+async function techReview(id: string, body: DesignCnstnApplySaveRequestDto): Promise<void> {
+  await client.post<void>(`${BASE}/${id}/tech-review`, body);
+}
+
+async function deleteDesignCnstnMng(id: string): Promise<void> {
+  await client.delete<void>(`${BASE}/${id}`);
+}
+
+export const designCnstnMngService = {
+  findPage,
+  findById,
+  save,
+  saveApply,
+  update,
+  techReview,
+  delete: deleteDesignCnstnMng,
+} satisfies DesignCnstnMngService;
diff --git a/apps/as/src/entities/design-cnstn/api/design-cnstn-rvw-opnn-service.ts b/apps/as/src/entities/design-cnstn/api/design-cnstn-rvw-opnn-service.ts
new file mode 100644
index 000000000..514a0423f
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/api/design-cnstn-rvw-opnn-service.ts
@@ -0,0 +1,61 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
+
+import type {
+  DesignCnstnRvwOpnnId,
+  DesignCnstnRvwOpnnResponseDto,
+  DesignCnstnRvwOpnnSaveRequestDto,
+  DesignCnstnRvwOpnnSearchDto,
+  DesignCnstnRvwOpnnService,
+  DesignCnstnRvwOpnnUpdateRequestDto,
+} from "../model/design-cnstn-rvw-opnn-interface";
+
+const BASE = ENDPOINT.AS_SERVICE.DESIGN_CNSTN_RVW_OPNN;
+
+async function findPage(
+  searchDto: DesignCnstnRvwOpnnSearchDto,
+): Promise<PageResponse<DesignCnstnRvwOpnnResponseDto>> {
+  const response = await client.get<PageResponse<DesignCnstnRvwOpnnResponseDto>>(BASE, {
+    params: searchDto,
+  });
+  return response.data;
+}
+
+async function findById(
+  designCnstnDocNo: string,
+  rvwOpnnSn: number,
+): Promise<DesignCnstnRvwOpnnResponseDto> {
+  const response = await client.get<DesignCnstnRvwOpnnResponseDto>(
+    `${BASE}/${designCnstnDocNo}/${rvwOpnnSn}`,
+  );
+  return response.data;
+}
+
+async function save(body: DesignCnstnRvwOpnnSaveRequestDto): Promise<DesignCnstnRvwOpnnId> {
+  const response = await client.post<DesignCnstnRvwOpnnId>(BASE, body);
+  return response.data;
+}
+
+async function update(
+  designCnstnDocNo: string,
+  rvwOpnnSn: number,
+  body: DesignCnstnRvwOpnnUpdateRequestDto,
+): Promise<void> {
+  await client.put<void>(`${BASE}/${designCnstnDocNo}/${rvwOpnnSn}`, body);
+}
+
+async function deleteDesignCnstnRvwOpnn(
+  designCnstnDocNo: string,
+  rvwOpnnSn: number,
+): Promise<void> {
+  await client.delete<void>(`${BASE}/${designCnstnDocNo}/${rvwOpnnSn}`);
+}
+
+export const designCnstnRvwOpnnService = {
+  findPage,
+  findById,
+  save,
+  update,
+  delete: deleteDesignCnstnRvwOpnn,
+} satisfies DesignCnstnRvwOpnnService;
diff --git a/apps/as/src/entities/design-cnstn/api/queries.ts b/apps/as/src/entities/design-cnstn/api/queries.ts
new file mode 100644
index 000000000..bafc9784a
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/api/queries.ts
@@ -0,0 +1,411 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  DesignCnstnBizCstSaveRequestDto,
+  DesignCnstnBizCstSearchDto,
+  DesignCnstnBizCstUpdateRequestDto,
+} from "../model/design-cnstn-biz-cst-interface";
+import type {
+  DesignCnstnBizSclSaveRequestDto,
+  DesignCnstnBizSclSearchDto,
+  DesignCnstnBizSclUpdateRequestDto,
+} from "../model/design-cnstn-biz-scl-interface";
+import type {
+  DesignCnstnEsntlAtchFileSaveRequestDto,
+  DesignCnstnEsntlAtchFileSearchDto,
+  DesignCnstnEsntlAtchFileUpdateRequestDto,
+} from "../model/design-cnstn-esntl-atch-file-interface";
+import type {
+  DesignCnstnApplySaveRequestDto,
+  DesignCnstnMngSaveRequestDto,
+  DesignCnstnMngSearchDto,
+  DesignCnstnMngUpdateRequestDto,
+} from "../model/design-cnstn-mng-interface";
+import type {
+  DesignCnstnRvwOpnnSaveRequestDto,
+  DesignCnstnRvwOpnnSearchDto,
+  DesignCnstnRvwOpnnUpdateRequestDto,
+} from "../model/design-cnstn-rvw-opnn-interface";
+
+import { designCnstnBizCstService } from "./design-cnstn-biz-cst-service";
+import { designCnstnBizSclService } from "./design-cnstn-biz-scl-service";
+import { designCnstnEsntlAtchFileService } from "./design-cnstn-esntl-atch-file-service";
+import { designCnstnMngService } from "./design-cnstn-mng-service";
+import { designCnstnRvwOpnnService } from "./design-cnstn-rvw-opnn-service";
+
+export const designCnstnMngBaseKey = [ENDPOINT.AS_SERVICE.DESIGN_CNSTN] as const;
+export const designCnstnBizCstBaseKey = [ENDPOINT.AS_SERVICE.DESIGN_CNSTN_BIZ_CST] as const;
+export const designCnstnBizSclBaseKey = [ENDPOINT.AS_SERVICE.DESIGN_CNSTN_BIZ_SCL] as const;
+export const designCnstnEsntlAtchFileBaseKey = [
+  ENDPOINT.AS_SERVICE.DESIGN_CNSTN_ESNTL_ATCH_FILE,
+] as const;
+export const designCnstnRvwOpnnBaseKey = [ENDPOINT.AS_SERVICE.DESIGN_CNSTN_RVW_OPNN] as const;
+
+/* ─── DesignCnstnMng ─── */
+
+export function useDesignCnstnMngPage(params: DesignCnstnMngSearchDto) {
+  return useQuery({
+    queryKey: [...designCnstnMngBaseKey, "findPage", params],
+    queryFn: () => designCnstnMngService.findPage(params),
+  });
+}
+
+export function useDesignCnstnMng(id: string | null | undefined) {
+  return useQuery({
+    queryKey: [...designCnstnMngBaseKey, "findById", id],
+    queryFn: () => designCnstnMngService.findById(id!),
+    enabled: Boolean(id),
+  });
+}
+
+export function useSaveDesignCnstnMng() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: DesignCnstnMngSaveRequestDto) => designCnstnMngService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useSaveApplyDesignCnstnMng() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: DesignCnstnApplySaveRequestDto) => designCnstnMngService.saveApply(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateDesignCnstnMng() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: DesignCnstnMngUpdateRequestDto }) =>
+      designCnstnMngService.update(id, body),
+    onSuccess: (_data, { id }) => {
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...designCnstnMngBaseKey, "findById", id],
+      });
+    },
+  });
+}
+
+export function useTechReviewDesignCnstnMng() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: DesignCnstnApplySaveRequestDto }) =>
+      designCnstnMngService.techReview(id, body),
+    onSuccess: (_data, { id }) => {
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...designCnstnMngBaseKey, "findById", id],
+      });
+    },
+  });
+}
+
+export function useDeleteDesignCnstnMng() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => designCnstnMngService.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+/* ─── DesignCnstnBizCst ─── */
+
+export function useDesignCnstnBizCstPage(params: DesignCnstnBizCstSearchDto) {
+  return useQuery({
+    queryKey: [...designCnstnBizCstBaseKey, "findPage", params],
+    queryFn: () => designCnstnBizCstService.findPage(params),
+  });
+}
+
+export function useDesignCnstnBizCst(
+  designCnstnDocNo: string | null | undefined,
+  acntgSeCd: string | null | undefined,
+) {
+  return useQuery({
+    queryKey: [...designCnstnBizCstBaseKey, "findById", designCnstnDocNo, acntgSeCd],
+    queryFn: () => designCnstnBizCstService.findById(designCnstnDocNo!, acntgSeCd!),
+    enabled: Boolean(designCnstnDocNo && acntgSeCd),
+  });
+}
+
+export function useSaveDesignCnstnBizCst() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: DesignCnstnBizCstSaveRequestDto) => designCnstnBizCstService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnBizCstBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateDesignCnstnBizCst() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      acntgSeCd,
+      body,
+    }: {
+      designCnstnDocNo: string;
+      acntgSeCd: string;
+      body: DesignCnstnBizCstUpdateRequestDto;
+    }) => designCnstnBizCstService.update(designCnstnDocNo, acntgSeCd, body),
+    onSuccess: (_data, { designCnstnDocNo, acntgSeCd }) => {
+      queryClient.invalidateQueries({ queryKey: designCnstnBizCstBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...designCnstnBizCstBaseKey, "findById", designCnstnDocNo, acntgSeCd],
+      });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useDeleteDesignCnstnBizCst() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      acntgSeCd,
+    }: {
+      designCnstnDocNo: string;
+      acntgSeCd: string;
+    }) => designCnstnBizCstService.delete(designCnstnDocNo, acntgSeCd),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnBizCstBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+/* ─── DesignCnstnBizScl ─── */
+
+export function useDesignCnstnBizSclPage(params: DesignCnstnBizSclSearchDto) {
+  return useQuery({
+    queryKey: [...designCnstnBizSclBaseKey, "findPage", params],
+    queryFn: () => designCnstnBizSclService.findPage(params),
+  });
+}
+
+export function useDesignCnstnBizScl(
+  designCnstnDocNo: string | null | undefined,
+  cnstpSeCd: string | null | undefined,
+) {
+  return useQuery({
+    queryKey: [...designCnstnBizSclBaseKey, "findById", designCnstnDocNo, cnstpSeCd],
+    queryFn: () => designCnstnBizSclService.findById(designCnstnDocNo!, cnstpSeCd!),
+    enabled: Boolean(designCnstnDocNo && cnstpSeCd),
+  });
+}
+
+export function useSaveDesignCnstnBizScl() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: DesignCnstnBizSclSaveRequestDto) => designCnstnBizSclService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnBizSclBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateDesignCnstnBizScl() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      cnstpSeCd,
+      body,
+    }: {
+      designCnstnDocNo: string;
+      cnstpSeCd: string;
+      body: DesignCnstnBizSclUpdateRequestDto;
+    }) => designCnstnBizSclService.update(designCnstnDocNo, cnstpSeCd, body),
+    onSuccess: (_data, { designCnstnDocNo, cnstpSeCd }) => {
+      queryClient.invalidateQueries({ queryKey: designCnstnBizSclBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...designCnstnBizSclBaseKey, "findById", designCnstnDocNo, cnstpSeCd],
+      });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useDeleteDesignCnstnBizScl() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      cnstpSeCd,
+    }: {
+      designCnstnDocNo: string;
+      cnstpSeCd: string;
+    }) => designCnstnBizSclService.delete(designCnstnDocNo, cnstpSeCd),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnBizSclBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+/* ─── DesignCnstnEsntlAtchFile ─── */
+
+export function useDesignCnstnEsntlAtchFilePage(params: DesignCnstnEsntlAtchFileSearchDto) {
+  return useQuery({
+    queryKey: [...designCnstnEsntlAtchFileBaseKey, "findPage", params],
+    queryFn: () => designCnstnEsntlAtchFileService.findPage(params),
+  });
+}
+
+export function useDesignCnstnEsntlAtchFile(
+  designCnstnDocNo: string | null | undefined,
+  esntlAtchFileId: string | null | undefined,
+) {
+  return useQuery({
+    queryKey: [
+      ...designCnstnEsntlAtchFileBaseKey,
+      "findById",
+      designCnstnDocNo,
+      esntlAtchFileId,
+    ],
+    queryFn: () =>
+      designCnstnEsntlAtchFileService.findById(designCnstnDocNo!, esntlAtchFileId!),
+    enabled: Boolean(designCnstnDocNo && esntlAtchFileId),
+  });
+}
+
+export function useSaveDesignCnstnEsntlAtchFile() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: DesignCnstnEsntlAtchFileSaveRequestDto) =>
+      designCnstnEsntlAtchFileService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnEsntlAtchFileBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateDesignCnstnEsntlAtchFile() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      esntlAtchFileId,
+      body,
+    }: {
+      designCnstnDocNo: string;
+      esntlAtchFileId: string;
+      body: DesignCnstnEsntlAtchFileUpdateRequestDto;
+    }) => designCnstnEsntlAtchFileService.update(designCnstnDocNo, esntlAtchFileId, body),
+    onSuccess: (_data, { designCnstnDocNo, esntlAtchFileId }) => {
+      queryClient.invalidateQueries({ queryKey: designCnstnEsntlAtchFileBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [
+          ...designCnstnEsntlAtchFileBaseKey,
+          "findById",
+          designCnstnDocNo,
+          esntlAtchFileId,
+        ],
+      });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useDeleteDesignCnstnEsntlAtchFile() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      esntlAtchFileId,
+    }: {
+      designCnstnDocNo: string;
+      esntlAtchFileId: string;
+    }) => designCnstnEsntlAtchFileService.delete(designCnstnDocNo, esntlAtchFileId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnEsntlAtchFileBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+/* ─── DesignCnstnRvwOpnn ─── */
+
+export function useDesignCnstnRvwOpnnPage(params: DesignCnstnRvwOpnnSearchDto) {
+  return useQuery({
+    queryKey: [...designCnstnRvwOpnnBaseKey, "findPage", params],
+    queryFn: () => designCnstnRvwOpnnService.findPage(params),
+  });
+}
+
+export function useDesignCnstnRvwOpnn(
+  designCnstnDocNo: string | null | undefined,
+  rvwOpnnSn: number | null | undefined,
+) {
+  return useQuery({
+    queryKey: [...designCnstnRvwOpnnBaseKey, "findById", designCnstnDocNo, rvwOpnnSn],
+    queryFn: () => designCnstnRvwOpnnService.findById(designCnstnDocNo!, rvwOpnnSn!),
+    enabled: Boolean(designCnstnDocNo && rvwOpnnSn != null),
+  });
+}
+
+export function useSaveDesignCnstnRvwOpnn() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: DesignCnstnRvwOpnnSaveRequestDto) => designCnstnRvwOpnnService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnRvwOpnnBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateDesignCnstnRvwOpnn() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      rvwOpnnSn,
+      body,
+    }: {
+      designCnstnDocNo: string;
+      rvwOpnnSn: number;
+      body: DesignCnstnRvwOpnnUpdateRequestDto;
+    }) => designCnstnRvwOpnnService.update(designCnstnDocNo, rvwOpnnSn, body),
+    onSuccess: (_data, { designCnstnDocNo, rvwOpnnSn }) => {
+      queryClient.invalidateQueries({ queryKey: designCnstnRvwOpnnBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...designCnstnRvwOpnnBaseKey, "findById", designCnstnDocNo, rvwOpnnSn],
+      });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
+
+export function useDeleteDesignCnstnRvwOpnn() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      designCnstnDocNo,
+      rvwOpnnSn,
+    }: {
+      designCnstnDocNo: string;
+      rvwOpnnSn: number;
+    }) => designCnstnRvwOpnnService.delete(designCnstnDocNo, rvwOpnnSn),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: designCnstnRvwOpnnBaseKey });
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+    },
+  });
+}
diff --git a/apps/as/src/entities/design-cnstn/index.ts b/apps/as/src/entities/design-cnstn/index.ts
new file mode 100644
index 000000000..ed6b6e1ae
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/index.ts
@@ -0,0 +1,88 @@
+export { designCnstnBizCstService } from "./api/design-cnstn-biz-cst-service";
+export { designCnstnBizSclService } from "./api/design-cnstn-biz-scl-service";
+export { designCnstnEsntlAtchFileService } from "./api/design-cnstn-esntl-atch-file-service";
+export { designCnstnMngService } from "./api/design-cnstn-mng-service";
+export { designCnstnRvwOpnnService } from "./api/design-cnstn-rvw-opnn-service";
+export {
+  designCnstnBizCstBaseKey,
+  designCnstnBizSclBaseKey,
+  designCnstnEsntlAtchFileBaseKey,
+  designCnstnMngBaseKey,
+  designCnstnRvwOpnnBaseKey,
+  useDeleteDesignCnstnBizCst,
+  useDeleteDesignCnstnBizScl,
+  useDeleteDesignCnstnEsntlAtchFile,
+  useDeleteDesignCnstnMng,
+  useDeleteDesignCnstnRvwOpnn,
+  useDesignCnstnBizCst,
+  useDesignCnstnBizCstPage,
+  useDesignCnstnBizScl,
+  useDesignCnstnBizSclPage,
+  useDesignCnstnEsntlAtchFile,
+  useDesignCnstnEsntlAtchFilePage,
+  useDesignCnstnMng,
+  useDesignCnstnMngPage,
+  useDesignCnstnRvwOpnn,
+  useDesignCnstnRvwOpnnPage,
+  useSaveApplyDesignCnstnMng,
+  useSaveDesignCnstnBizCst,
+  useSaveDesignCnstnBizScl,
+  useSaveDesignCnstnEsntlAtchFile,
+  useSaveDesignCnstnMng,
+  useSaveDesignCnstnRvwOpnn,
+  useTechReviewDesignCnstnMng,
+  useUpdateDesignCnstnBizCst,
+  useUpdateDesignCnstnBizScl,
+  useUpdateDesignCnstnEsntlAtchFile,
+  useUpdateDesignCnstnMng,
+  useUpdateDesignCnstnRvwOpnn,
+} from "./api/queries";
+export type {
+  DesignCnstnBizCstId,
+  DesignCnstnBizCstResponseDto,
+  DesignCnstnBizCstSaveRequestDto,
+  DesignCnstnBizCstSearchDto,
+  DesignCnstnBizCstService,
+  DesignCnstnBizCstUpdateRequestDto,
+} from "./model/design-cnstn-biz-cst-interface";
+export type {
+  DesignCnstnBizSclId,
+  DesignCnstnBizSclResponseDto,
+  DesignCnstnBizSclSaveRequestDto,
+  DesignCnstnBizSclSearchDto,
+  DesignCnstnBizSclService,
+  DesignCnstnBizSclUpdateRequestDto,
+} from "./model/design-cnstn-biz-scl-interface";
+export type {
+  DesignCnstnEsntlAtchFileId,
+  DesignCnstnEsntlAtchFileResponseDto,
+  DesignCnstnEsntlAtchFileSaveRequestDto,
+  DesignCnstnEsntlAtchFileSearchDto,
+  DesignCnstnEsntlAtchFileService,
+  DesignCnstnEsntlAtchFileUpdateRequestDto,
+} from "./model/design-cnstn-esntl-atch-file-interface";
+export type {
+  AtflMngClientResponseDto,
+  BizCstItem,
+  BizCstTreeDto,
+  BizSclTreeDto,
+  BzScaleItem,
+  DesignCnstnApplySaveRequestDto,
+  DesignCnstnMngDetResponseDto,
+  DesignCnstnMngResponseDto,
+  DesignCnstnMngSaveRequestDto,
+  DesignCnstnMngSearchDto,
+  DesignCnstnMngService,
+  DesignCnstnMngUpdateRequestDto,
+  DesignCnstnRvwOpnnResponseDto,
+  DesignCnstnRvwOpnnSaveRequestDto,
+  ElaprDocPrgrsClientResponseDto,
+  EsntlAtchFileItem,
+  EsntlAtchFileMngTreeResponseDto,
+} from "./model/design-cnstn-mng-interface";
+export type {
+  DesignCnstnRvwOpnnId,
+  DesignCnstnRvwOpnnSearchDto,
+  DesignCnstnRvwOpnnService,
+  DesignCnstnRvwOpnnUpdateRequestDto,
+} from "./model/design-cnstn-rvw-opnn-interface";
diff --git a/apps/as/src/entities/design-cnstn/model/design-cnstn-biz-cst-interface.ts b/apps/as/src/entities/design-cnstn/model/design-cnstn-biz-cst-interface.ts
new file mode 100644
index 000000000..bbf6519e9
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/model/design-cnstn-biz-cst-interface.ts
@@ -0,0 +1,54 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+/** 백엔드 DesignCnstnBizCstId */
+export interface DesignCnstnBizCstId {
+  designCnstnMng: string;
+  acntgSeCd: string;
+}
+
+/** 백엔드 DesignCnstnBizCstSaveRequestDto */
+export interface DesignCnstnBizCstSaveRequestDto {
+  designCnstnDocNo: string;
+  acntgSeCd: string;
+  bscPlanAmt?: number;
+  bgtRfltAmt?: number;
+  tstmDesignAmt?: number;
+}
+
+/** 백엔드 DesignCnstnBizCstUpdateRequestDto */
+export interface DesignCnstnBizCstUpdateRequestDto {
+  bscPlanAmt?: number;
+  bgtRfltAmt?: number;
+  tstmDesignAmt?: number;
+}
+
+/** 백엔드 DesignCnstnBizCstSearchDto + Pageable */
+export interface DesignCnstnBizCstSearchDto extends PageableParams {
+  designCnstnDocNo?: string;
+  acntgSeCd?: string;
+}
+
+/** 백엔드 DesignCnstnBizCstResponseDto */
+export interface DesignCnstnBizCstResponseDto {
+  designCnstnDocNo: string;
+  acntgSeCd: string;
+  bscPlanAmt?: number;
+  bgtRfltAmt?: number;
+  tstmDesignAmt?: number;
+  regDt?: string;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface DesignCnstnBizCstService {
+  findPage(
+    searchDto: DesignCnstnBizCstSearchDto,
+  ): Promise<PageResponse<DesignCnstnBizCstResponseDto>>;
+  findById(designCnstnDocNo: string, acntgSeCd: string): Promise<DesignCnstnBizCstResponseDto>;
+  save(body: DesignCnstnBizCstSaveRequestDto): Promise<DesignCnstnBizCstId>;
+  update(
+    designCnstnDocNo: string,
+    acntgSeCd: string,
+    body: DesignCnstnBizCstUpdateRequestDto,
+  ): Promise<void>;
+  delete(designCnstnDocNo: string, acntgSeCd: string): Promise<void>;
+}
diff --git a/apps/as/src/entities/design-cnstn/model/design-cnstn-biz-scl-interface.ts b/apps/as/src/entities/design-cnstn/model/design-cnstn-biz-scl-interface.ts
new file mode 100644
index 000000000..b7fd92140
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/model/design-cnstn-biz-scl-interface.ts
@@ -0,0 +1,54 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+/** 백엔드 DesignCnstnBizSclId */
+export interface DesignCnstnBizSclId {
+  designCnstnMng: string;
+  cnstpSeCd: string;
+}
+
+/** 백엔드 DesignCnstnBizSclSaveRequestDto */
+export interface DesignCnstnBizSclSaveRequestDto {
+  designCnstnDocNo: string;
+  cnstpSeCd: string;
+  bscPlanQty?: number;
+  bgtRfltQty?: number;
+  tstmDesignQty?: number;
+}
+
+/** 백엔드 DesignCnstnBizSclUpdateRequestDto */
+export interface DesignCnstnBizSclUpdateRequestDto {
+  bscPlanQty?: number;
+  bgtRfltQty?: number;
+  tstmDesignQty?: number;
+}
+
+/** 백엔드 DesignCnstnBizSclSearchDto + Pageable */
+export interface DesignCnstnBizSclSearchDto extends PageableParams {
+  designCnstnDocNo?: string;
+  cnstpSeCd?: string;
+}
+
+/** 백엔드 DesignCnstnBizSclResponseDto */
+export interface DesignCnstnBizSclResponseDto {
+  designCnstnDocNo: string;
+  cnstpSeCd: string;
+  bscPlanQty?: number;
+  bgtRfltQty?: number;
+  tstmDesignQty?: number;
+  regDt?: string;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface DesignCnstnBizSclService {
+  findPage(
+    searchDto: DesignCnstnBizSclSearchDto,
+  ): Promise<PageResponse<DesignCnstnBizSclResponseDto>>;
+  findById(designCnstnDocNo: string, cnstpSeCd: string): Promise<DesignCnstnBizSclResponseDto>;
+  save(body: DesignCnstnBizSclSaveRequestDto): Promise<DesignCnstnBizSclId>;
+  update(
+    designCnstnDocNo: string,
+    cnstpSeCd: string,
+    body: DesignCnstnBizSclUpdateRequestDto,
+  ): Promise<void>;
+  delete(designCnstnDocNo: string, cnstpSeCd: string): Promise<void>;
+}
diff --git a/apps/as/src/entities/design-cnstn/model/design-cnstn-esntl-atch-file-interface.ts b/apps/as/src/entities/design-cnstn/model/design-cnstn-esntl-atch-file-interface.ts
new file mode 100644
index 000000000..82666b60a
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/model/design-cnstn-esntl-atch-file-interface.ts
@@ -0,0 +1,51 @@
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+/** 백엔드 DesignCnstnEsntlAtchFileId */
+export interface DesignCnstnEsntlAtchFileId {
+  designCnstnMng: string;
+  esntlAtchFileId: string;
+}
+
+/** 백엔드 DesignCnstnEsntlAtchFileSaveRequestDto */
+export interface DesignCnstnEsntlAtchFileSaveRequestDto {
+  designCnstnDocNo: string;
+  esntlAtchFileId: string;
+  atchFileGroupId?: string;
+}
+
+/** 백엔드 DesignCnstnEsntlAtchFileUpdateRequestDto */
+export interface DesignCnstnEsntlAtchFileUpdateRequestDto {
+  atchFileGroupId?: string;
+}
+
+/** 백엔드 DesignCnstnEsntlAtchFileSearchDto + Pageable */
+export interface DesignCnstnEsntlAtchFileSearchDto extends PageableParams {
+  designCnstnDocNo?: string;
+  esntlAtchFileId?: string;
+}
+
+/** 백엔드 DesignCnstnEsntlAtchFileResponseDto */
+export interface DesignCnstnEsntlAtchFileResponseDto {
+  designCnstnDocNo: string;
+  esntlAtchFileId: string;
+  atchFileGroupId?: string;
+  regDt?: string;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface DesignCnstnEsntlAtchFileService {
+  findPage(
+    searchDto: DesignCnstnEsntlAtchFileSearchDto,
+  ): Promise<PageResponse<DesignCnstnEsntlAtchFileResponseDto>>;
+  findById(
+    designCnstnDocNo: string,
+    esntlAtchFileId: string,
+  ): Promise<DesignCnstnEsntlAtchFileResponseDto>;
+  save(body: DesignCnstnEsntlAtchFileSaveRequestDto): Promise<DesignCnstnEsntlAtchFileId>;
+  update(
+    designCnstnDocNo: string,
+    esntlAtchFileId: string,
+    body: DesignCnstnEsntlAtchFileUpdateRequestDto,
+  ): Promise<void>;
+  delete(designCnstnDocNo: string, esntlAtchFileId: string): Promise<void>;
+}
diff --git a/apps/as/src/entities/design-cnstn/model/design-cnstn-mng-interface.ts b/apps/as/src/entities/design-cnstn/model/design-cnstn-mng-interface.ts
new file mode 100644
index 000000000..1ee2be991
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/model/design-cnstn-mng-interface.ts
@@ -0,0 +1,124 @@
+import type {
+  BizCstSaveBase,
+  BzScaleSaveBase,
+  EsntlAtchFileSaveBase,
+  PageableParams,
+  PageResponse,
+  PbadmsApplySaveHeader,
+  PbadmsMngDetResponseBase,
+} from "@/shared/model";
+
+import type {
+  DesignCnstnRvwOpnnResponseDto,
+  DesignCnstnRvwOpnnSaveRequestDto,
+} from "./design-cnstn-rvw-opnn-interface";
+
+export type {
+  DesignCnstnRvwOpnnResponseDto,
+  DesignCnstnRvwOpnnSaveRequestDto,
+} from "./design-cnstn-rvw-opnn-interface";
+export type {
+  AtflMngClientResponseDto,
+  BizCstTreeDto,
+  BizSclTreeDto,
+  ElaprDocPrgrsClientResponseDto,
+  EsntlAtchFileMngTreeResponseDto,
+} from "@/shared/model";
+
+/** 백엔드 DesignCnstnMngSaveRequestDto */
+export interface DesignCnstnMngSaveRequestDto {
+  designCnstnDocNo?: string;
+  admdstCd?: string;
+  envoSeComCd?: string;
+  taskSeComCd?: string;
+  bizNm?: string;
+  bizBgngYr?: string;
+  bizEndYr?: string;
+  bizCn?: string;
+  aplcntNm?: string;
+  aplcntMblTelno?: string;
+  aplcntOgdpNm?: string;
+  aplcntEmlAddr?: string;
+  dsgnrNm?: string;
+  dsgnrTelno?: string;
+  dsgnrOgdpNm?: string;
+  dsgnrEmlAddr?: string;
+  atchFileGroupId?: string;
+  prgrsSttsComCd?: string;
+}
+
+/** 백엔드 DesignCnstnMngUpdateRequestDto */
+export type DesignCnstnMngUpdateRequestDto = Omit<DesignCnstnMngSaveRequestDto, "designCnstnDocNo">;
+
+/** 백엔드 DesignCnstnMngSearchDto + Pageable */
+export interface DesignCnstnMngSearchDto extends PageableParams {
+  designCnstnDocNo?: string;
+  admdstCd?: string;
+  envoSeComCd?: string;
+  taskSeComCd?: string;
+  bizNm?: string;
+  bizBgngYr?: string;
+  bizEndYr?: string;
+  bizCn?: string;
+  aplcntNm?: string;
+  aplcntMblTelno?: string;
+  aplcntOgdpNm?: string;
+  aplcntEmlAddr?: string;
+  dsgnrNm?: string;
+  dsgnrTelno?: string;
+  dsgnrOgdpNm?: string;
+  dsgnrEmlAddr?: string;
+  atchFileGroupId?: string;
+}
+
+interface DesignCnstnMngResponseExtension {
+  designCnstnDocNo: string;
+  envoSeCdNm?: string;
+  taskSeCdNm?: string;
+  prgrsSttsCdNm?: string;
+  regDt?: string;
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfcnDt?: string;
+  sido?: string;
+  gugun?: string;
+}
+
+/** 백엔드 DesignCnstnMngResponseDto */
+export type DesignCnstnMngResponseDto = Omit<DesignCnstnMngSaveRequestDto, "designCnstnDocNo"> &
+  DesignCnstnMngResponseExtension;
+
+/** 백엔드 DesignCnstnApplySaveRequestDto.BzScaleItem */
+export type BzScaleItem = BzScaleSaveBase;
+
+/** 백엔드 DesignCnstnApplySaveRequestDto.BizCstItem */
+export type BizCstItem = BizCstSaveBase;
+
+/** 백엔드 DesignCnstnApplySaveRequestDto.EsntlAtchFileItem */
+export type EsntlAtchFileItem = EsntlAtchFileSaveBase;
+
+/** 백엔드 DesignCnstnMngDetResponseDto */
+export type DesignCnstnMngDetResponseDto = PbadmsMngDetResponseBase<
+  DesignCnstnMngResponseDto,
+  DesignCnstnRvwOpnnResponseDto
+>;
+
+/** 백엔드 DesignCnstnApplySaveRequestDto */
+export interface DesignCnstnApplySaveRequestDto extends PbadmsApplySaveHeader {
+  designCnstnMng: DesignCnstnMngSaveRequestDto;
+  bzScaleList?: BzScaleItem[];
+  bizCstList?: BizCstItem[];
+  esntlAtchFileList?: EsntlAtchFileItem[];
+  rvwOpnnList?: DesignCnstnRvwOpnnSaveRequestDto[];
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface DesignCnstnMngService {
+  findPage(searchDto: DesignCnstnMngSearchDto): Promise<PageResponse<DesignCnstnMngResponseDto>>;
+  findById(id: string): Promise<DesignCnstnMngDetResponseDto>;
+  save(body: DesignCnstnMngSaveRequestDto): Promise<string>;
+  saveApply(body: DesignCnstnApplySaveRequestDto): Promise<string>;
+  update(id: string, body: DesignCnstnMngUpdateRequestDto): Promise<void>;
+  techReview(id: string, body: DesignCnstnApplySaveRequestDto): Promise<void>;
+  delete(id: string): Promise<void>;
+}
diff --git a/apps/as/src/entities/design-cnstn/model/design-cnstn-rvw-opnn-interface.ts b/apps/as/src/entities/design-cnstn/model/design-cnstn-rvw-opnn-interface.ts
new file mode 100644
index 000000000..8b9841ee6
--- /dev/null
+++ b/apps/as/src/entities/design-cnstn/model/design-cnstn-rvw-opnn-interface.ts
@@ -0,0 +1,59 @@
+import type { PageableParams, PageResponse, RvwOpnnResponseExtension } from "@/shared/model";
+
+/** 백엔드 DesignCnstnRvwOpnnId */
+export interface DesignCnstnRvwOpnnId {
+  designCnstnMng: string;
+  rvwOpnnSn: number;
+}
+
+/** 백엔드 DesignCnstnRvwOpnnSaveRequestDto */
+export interface DesignCnstnRvwOpnnSaveRequestDto {
+  designCnstnDocNo: string;
+  rvwOpnnSn?: number;
+  opnrSeComCd?: string;
+  opnrNm?: string;
+  rvwRsltCn?: string;
+  rvwRsltAnmlyYn?: string;
+  atchFileGroupId?: string;
+}
+
+/** 백엔드 DesignCnstnRvwOpnnUpdateRequestDto */
+export interface DesignCnstnRvwOpnnUpdateRequestDto {
+  opnrSeComCd?: string;
+  opnrNm?: string;
+  rvwRsltCn?: string;
+  rvwRsltAnmlyYn?: string;
+  atchFileGroupId?: string;
+}
+
+/** 백엔드 DesignCnstnRvwOpnnSearchDto + Pageable */
+export interface DesignCnstnRvwOpnnSearchDto extends PageableParams {
+  designCnstnDocNo?: string;
+  opnrNm?: string;
+  opnrSeComCd?: string;
+  rvwRsltCn?: string;
+  rvwRsltAnmlyYn?: string;
+  atchFileGroupId?: string;
+}
+
+/** 백엔드 DesignCnstnRvwOpnnResponseDto */
+export type DesignCnstnRvwOpnnResponseDto = Partial<
+  Pick<DesignCnstnRvwOpnnSaveRequestDto, "designCnstnDocNo" | "rvwOpnnSn">
+> &
+  Omit<DesignCnstnRvwOpnnSaveRequestDto, "designCnstnDocNo" | "rvwOpnnSn"> &
+  RvwOpnnResponseExtension;
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface DesignCnstnRvwOpnnService {
+  findPage(
+    searchDto: DesignCnstnRvwOpnnSearchDto,
+  ): Promise<PageResponse<DesignCnstnRvwOpnnResponseDto>>;
+  findById(designCnstnDocNo: string, rvwOpnnSn: number): Promise<DesignCnstnRvwOpnnResponseDto>;
+  save(body: DesignCnstnRvwOpnnSaveRequestDto): Promise<DesignCnstnRvwOpnnId>;
+  update(
+    designCnstnDocNo: string,
+    rvwOpnnSn: number,
+    body: DesignCnstnRvwOpnnUpdateRequestDto,
+  ): Promise<void>;
+  delete(designCnstnDocNo: string, rvwOpnnSn: number): Promise<void>;
+}
diff --git a/apps/as/src/entities/elapr/index.ts b/apps/as/src/entities/elapr/index.ts
index 577742c77..adec3e931 100644
--- a/apps/as/src/entities/elapr/index.ts
+++ b/apps/as/src/entities/elapr/index.ts
@@ -47,6 +47,12 @@ export {
   findCurrentUserPendingApprovalRequest,
   hasCurrentUserPendingApprovalRequest,
 } from "./lib/approval-request-utils";
+export {
+  APPROVER_STATUS_MAP,
+  type ApproverStatusConfig,
+  getApproverStatus,
+  sortByAtrzSeqNo,
+} from "./lib/approval-utils";
 export {
   buildElaprPrgrsSttsListFromApln,
   buildElaprPrgrsSttsListFromAplnRows,
@@ -102,3 +108,15 @@ export type {
   ElaprTmpltService,
   ElaprTmpltUpdateRequest,
 } from "./model/elapr-tmplt-interface";
+export type { ReviewerOption } from "./model/reviewer-option";
+export { AprvrPickerDialog } from "./ui/aprvr-picker-dialog";
+export { ElaprAplnPickerGrid } from "./ui/elapr-apln-picker-grid";
+export { ElaprApprovalDialog } from "./ui/elapr-approval-dialog";
+export { ElaprDocPrgrsStatus } from "./ui/elapr-doc-prgrs-status";
+export {
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
+} from "./ui/elapr-tmplt-picker-dialog";
+export { ElaprTmpltSelectTable } from "./ui/elapr-tmplt-select-table";
+export { SortableAplnPickerRow } from "./ui/sortable-apln-picker-row";
+export { SortablePrgrsSttsRow } from "./ui/sortable-prgrs-stts-row";
diff --git a/apps/as/src/entities/elapr/lib/apln-validators.ts b/apps/as/src/entities/elapr/lib/apln-validators.ts
index 3ab1bcd30..91f1a95cf 100644
--- a/apps/as/src/entities/elapr/lib/apln-validators.ts
+++ b/apps/as/src/entities/elapr/lib/apln-validators.ts
@@ -1,6 +1,5 @@
 import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
 
-const ATRZ_RECEIVER_CD = "ATRZ01";
 const ATRZ_FINAL_CD = "ATRZ99";
 
 interface AtrzOrderValidateRow {
@@ -16,14 +15,6 @@ export function getVisibleRows(rows: ElaprAplnRow[]): ElaprAplnRow[] {
 export function validateAtrzOrder(rows: AtrzOrderValidateRow[]): string | null {
   const visibleRows = rows.filter((row) => !row.isDeleted);
 
-  const receiverCount = visibleRows.filter((row) => row.atrzSeComCd === ATRZ_RECEIVER_CD).length;
-  if (receiverCount === 0) {
-    return "접수자는 반드시 등록해야 합니다.";
-  }
-  if (receiverCount > 1) {
-    return "접수자는 한 명만 등록할 수 있습니다.";
-  }
-
   const finalCount = visibleRows.filter((row) => row.atrzSeComCd === ATRZ_FINAL_CD).length;
   if (finalCount === 0) {
     return "최종승인자는 반드시 등록해야 합니다.";
@@ -32,10 +23,6 @@ export function validateAtrzOrder(rows: AtrzOrderValidateRow[]): string | null {
     return "최종승인자는 한 명만 등록할 수 있습니다.";
   }
 
-  if (receiverCount === 1 && visibleRows[0]?.atrzSeComCd !== ATRZ_RECEIVER_CD) {
-    return "접수자는 결재선 첫 번째에 배치해야 합니다.";
-  }
-
   if (finalCount === 1) {
     const lastRow = visibleRows[visibleRows.length - 1];
     if (lastRow?.atrzSeComCd !== ATRZ_FINAL_CD) {
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/approval-utils.ts b/apps/as/src/entities/elapr/lib/approval-utils.ts
similarity index 78%
rename from apps/as/src/pages/fnrs-cnsltn/lib/approval-utils.ts
rename to apps/as/src/entities/elapr/lib/approval-utils.ts
index d60d20b1c..00d7d7b2a 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/approval-utils.ts
+++ b/apps/as/src/entities/elapr/lib/approval-utils.ts
@@ -1,4 +1,4 @@
-import type { ElaprDocPrgrsClientResponseDto } from "@/entities/fnrs-cnsltn";
+import type { ElaprDocPrgrsClientResponseDto } from "@/shared/model";
 
 export interface ApproverStatusConfig {
   label: string;
@@ -7,9 +7,10 @@ export interface ApproverStatusConfig {
 
 export const APPROVER_STATUS_MAP: Record<string, ApproverStatusConfig> = {
   ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700" },
-  ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800" },
-  ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800" },
-  ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800" },
+  ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-700" },
+  ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-700" },
+  ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-700" },
+  ATRZ_PRGRS_999: { label: "결재안함", badgeClass: "bg-blue-100 text-blue-700" },
 };
 
 export function sortByAtrzSeqNo(
diff --git a/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts b/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts
index db6ee3e5c..6ea409344 100644
--- a/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts
+++ b/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts
@@ -4,6 +4,7 @@ import {
 } from "../model/elapr-prgrs-stts-interface";
 
 export const PRGRS_STTS_WAITING_CD = "ATRZ_PRGRS_001";
+export const PRGRS_STTS_APPROVED_CD = "ATRZ_PRGRS_003";
 
 /** 서버 행 비교용 최소 필드 */
 export interface PrgrsSttsServerRow {
@@ -11,6 +12,7 @@ export interface PrgrsSttsServerRow {
   aprvrUuid?: string;
   atrzSeComCd?: string;
   atrzSeqNo?: number;
+  dcarbYn?: string;
 }
 
 /** 결재선 그리드 로컬 행 — 진행상태 API 응답 + UI 보조 필드 */
@@ -29,6 +31,7 @@ export interface ElaprPrgrsSttsRow {
   ognzNm?: string;
   jbpsSeNm?: string;
   jbgdSeNm?: string;
+  dcarbYn?: string;
   isNew?: boolean;
   isDirty?: boolean;
   /** 소프트 삭제 — 최종 저장 시 mode:D */
@@ -41,6 +44,10 @@ export function isPrgrsSttsRowEditable(row: ElaprPrgrsSttsRow): boolean {
   return row.isNew === true || row.atrzPrgrsSttsComCd === PRGRS_STTS_WAITING_CD;
 }
 
+export function isPrgrsSttsRowDcarbable(row: ElaprPrgrsSttsRow): boolean {
+  return row.atrzPrgrsSttsComCd !== PRGRS_STTS_APPROVED_CD;
+}
+
 function getVisibleRows(rows: ElaprPrgrsSttsRow[]): ElaprPrgrsSttsRow[] {
   return rows.filter((row) => !row.isDeleted);
 }
@@ -85,7 +92,8 @@ function rowDiffersFromServer(row: ElaprPrgrsSttsRow, serverRow: PrgrsSttsServer
   return (
     row.aprvrUuid !== serverRow.aprvrUuid ||
     row.atrzSeComCd !== serverRow.atrzSeComCd ||
-    row.atrzSeqNo !== serverRow.atrzSeqNo
+    row.atrzSeqNo !== serverRow.atrzSeqNo ||
+    (row.dcarbYn ?? "N") !== (serverRow.dcarbYn ?? "N")
   );
 }
 
@@ -149,6 +157,7 @@ export function buildPrgrsSttsSavePayload(
         atrzSeComCd: row.atrzSeComCd,
         atrzSeqNo: row.atrzSeqNo,
         atrzPrgrsSttsComCd: row.atrzPrgrsSttsComCd,
+        dcarbYn: row.dcarbYn ?? "N",
       });
       continue;
     }
@@ -164,6 +173,7 @@ export function buildPrgrsSttsSavePayload(
         atrzSeComCd: row.atrzSeComCd,
         atrzSeqNo: row.atrzSeqNo,
         atrzPrgrsSttsComCd: row.atrzPrgrsSttsComCd,
+        dcarbYn: row.dcarbYn ?? "N",
       });
     }
   }
diff --git a/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts b/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
index 297e574a4..f4a884e75 100644
--- a/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
+++ b/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
@@ -24,7 +24,7 @@ function toRow(item: ElaprDocPrgrsClientResponseDto): ElaprPrgrsSttsRow {
     elaprPrgrsId: item.elaprPrgrsId,
     elaprDmndId: item.elaprDmndId,
     aprvrUuid: item.aprvrUuid,
-    aprvrNm: item.aprvrUuidNm,
+    aprvrNm: item.aprvrNm,
     atrzSeComCd: item.atrzSeComCd,
     atrzSeComNm: item.atrzSeComNm,
     atrzSeqNo: item.atrzSeqNo,
@@ -34,6 +34,7 @@ function toRow(item: ElaprDocPrgrsClientResponseDto): ElaprPrgrsSttsRow {
     ognzNm: item.ognzNm,
     jbpsSeNm: item.jbpsSeNm,
     jbgdSeNm: item.jbgdSeNm,
+    dcarbYn: item.dcarbYn ?? "N",
     isNew: false,
     isDirty: false,
     isDeleted: false,
@@ -71,6 +72,7 @@ export function usePrgrsSttsRows({ serverRows, elaprDmndId }: UsePrgrsSttsRowsOp
         aprvrUuid: "",
         aprvrNm: "",
         atrzPrgrsSttsComCd: PRGRS_STTS_WAITING_CD,
+        dcarbYn: "N",
         isNew: true,
         isDirty: true,
         isDeleted: false,
@@ -104,6 +106,33 @@ export function usePrgrsSttsRows({ serverRows, elaprDmndId }: UsePrgrsSttsRowsOp
     [editingRowKey],
   );
 
+  const setDcarbYn = useCallback(
+    (rowKey: string, checked: boolean) => {
+      if (editingRowKey != null && editingRowKey !== rowKey) return;
+
+      setRows((prev) => {
+        const target = prev.find((r) => r.rowKey === rowKey);
+        if (!target || target.isDeleted) return prev;
+
+        const nextYn = checked ? "Y" : "N";
+
+        return prev.map((row) => {
+          if (row.isDeleted) return row;
+
+          if (row.rowKey === rowKey) {
+            if ((row.dcarbYn ?? "N") === nextYn) return row;
+            return { ...row, dcarbYn: nextYn, isDirty: true };
+          }
+
+          if (!checked) return row;
+          if ((row.dcarbYn ?? "N") === "N") return row;
+          return { ...row, dcarbYn: "N", isDirty: true };
+        });
+      });
+    },
+    [editingRowKey],
+  );
+
   const cancelEdit = useCallback(() => {
     if (!editingRowKey) return;
 
@@ -202,6 +231,7 @@ export function usePrgrsSttsRows({ serverRows, elaprDmndId }: UsePrgrsSttsRowsOp
     addRow,
     startEdit,
     updateRow,
+    setDcarbYn,
     cancelEdit,
     commitEdit,
     markDeleted,
diff --git a/apps/as/src/entities/elapr/model/elapr-apln-interface.ts b/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
index a41add2cd..31e0d8a25 100644
--- a/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
+++ b/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
@@ -6,14 +6,14 @@ export const ELAPR_APLN_SAVE_MODE = {
   DELETE: "D",
 } as const;
 
-export type ElaprAplnSaveMode =
-  (typeof ELAPR_APLN_SAVE_MODE)[keyof typeof ELAPR_APLN_SAVE_MODE];
+export type ElaprAplnSaveMode = (typeof ELAPR_APLN_SAVE_MODE)[keyof typeof ELAPR_APLN_SAVE_MODE];
 
 export interface ElaprApln {
   aplnId: string;
   elaprTmpltId: string;
   aprvrUuid?: string;
   aprvrNm?: string;
+  aprvrUserId?: string;
   atrzSeComCd?: string;
   atrzSeComNm?: string;
   atrzSeqNo?: number;
diff --git a/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts b/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
index 5a3fbc689..a4eb14c7c 100644
--- a/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
+++ b/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
@@ -1,4 +1,4 @@
-import type { PageableParams, PageResponse } from "@/shared/model";
+import type { ElaprDocPrgrsClientResponseDto, PageableParams, PageResponse } from "@/shared/model";
 
 import type { ElaprPrgrsSttsSaveRequestDto } from "./elapr-prgrs-stts-interface";
 
@@ -33,23 +33,7 @@ export interface ElaprDmndSearchDto extends PageableParams {
 }
 
 /** 백엔드 ElaprDocPrgrsResponseDto */
-export interface ElaprDocPrgrsResponseDto {
-  elaprDocNo: string;
-  elaprDmndId: string;
-  elaprPrgrsId: string;
-  atrzSeqNo?: number;
-  atrzSeComCd: string;
-  atrzSeComNm?: string;
-  aprvrUuid?: string;
-  aprvrUuidNm?: string;
-  atrzPrgrsSttsComCd: string;
-  atrzPrgrsSttsComNm?: string;
-  rjctRsn?: string;
-  atrzDt?: string;
-  jbpsSeNm?: string;
-  jbgdSeNm?: string;
-  ognzNm?: string;
-}
+export type ElaprDocPrgrsResponseDto = ElaprDocPrgrsClientResponseDto;
 
 /** Controller public 메서드명·시그니처와 동일 */
 export interface ElaprDmndService {
diff --git a/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts b/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts
index 46dad56ec..7c24ff8eb 100644
--- a/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts
+++ b/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts
@@ -22,6 +22,7 @@ export interface ElaprPrgrsSttsResponseDto {
   atrzPrgrsSttsComNm?: string;
   rjctRsn?: string;
   atrzDt?: string;
+  dcarbYn?: string;
 }
 
 /** 백엔드 ElaprPrgrsSttsSaveRequestDto */
@@ -33,6 +34,7 @@ export interface ElaprPrgrsSttsSaveRequestDto {
   atrzSeComCd?: string;
   atrzSeqNo?: number;
   atrzPrgrsSttsComCd?: string;
+  dcarbYn?: string;
 }
 
 /** 백엔드 ElaprPrgrsSttsSearchDto */
diff --git a/apps/as/src/pages/fnrs-cnsltn/model/reviewer-option.ts b/apps/as/src/entities/elapr/model/reviewer-option.ts
similarity index 100%
rename from apps/as/src/pages/fnrs-cnsltn/model/reviewer-option.ts
rename to apps/as/src/entities/elapr/model/reviewer-option.ts
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/aprvr-picker-dialog.tsx b/apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx
similarity index 95%
rename from apps/as/src/pages/fnrs-cnsltn/ui/components/aprvr-picker-dialog.tsx
rename to apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx
index dd241a514..272f1f3cf 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/aprvr-picker-dialog.tsx
+++ b/apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx
@@ -17,7 +17,7 @@ import {
   TableRow,
 } from "@common/components";
 
-import { type ReviewerOption } from "../../model/reviewer-option";
+import { type ReviewerOption } from "../model/reviewer-option";
 
 const PAGE_SIZE = 500;
 
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx b/apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx
similarity index 90%
rename from apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx
rename to apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx
index a22a2e880..92c3d58c5 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx
@@ -6,13 +6,6 @@ import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
 import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  useAplnRows,
-  useDndSensors,
-  useElaprAplnPage,
-  validateAplnRow,
-} from "@/entities/elapr";
 import {
   Button,
   Skeleton,
@@ -23,7 +16,12 @@ import {
   TableRow,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
+import { useElaprAplnPage } from "../api/queries";
+import { validateAplnRow } from "../lib/apln-validators";
+import { useAplnRows } from "../lib/use-apln-rows";
+import { useDndSensors } from "../lib/use-dnd-sensors";
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+import type { ReviewerOption } from "../model/reviewer-option";
 
 import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortableAplnPickerRow } from "./sortable-apln-picker-row";
@@ -147,16 +145,14 @@ function ElaprAplnPickerGrid({
           <Table className="w-full">
             <colgroup>
               <col width="10%" />
-              <col width="30%" />
               <col width="10%" />
               <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
+              <col width="50%" />
+              <col width="20%" />
             </colgroup>
             <TableHeader>
               <TableRow>
                 <TableHead className="w-10" />
-                <TableHead>결재선아이디</TableHead>
                 <TableHead>결재순서</TableHead>
                 <TableHead>결재구분</TableHead>
                 <TableHead>결재자</TableHead>
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx b/apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx
similarity index 89%
rename from apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx
rename to apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx
index a6737ec3e..c4cb3956d 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx
@@ -9,29 +9,13 @@ import { AxiosError } from "axios";
 
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib";
-import {
-  buildPrgrsSttsSavePayload,
-  elaprPrgrsSttsService,
-  findCurrentUserPendingApprovalRequest,
-  hasUnsavedPrgrsSttsChanges,
-  isPrgrsSttsRowEditable,
-  useDndSensors,
-  useElaprDocPrgrsByDocNo,
-  usePrgrsSttsRows,
-  useSaveElaprPrgrsStts,
-  validateAllPrgrsSttsRows,
-  validateAtrzOrder,
-  validatePrgrsSttsRow,
-} from "@/entities/elapr";
 import {
   Button,
-  Checkbox,
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  Label,
   Skeleton,
   Table,
   TableBody,
@@ -41,7 +25,20 @@ import {
   Textarea,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
+import { elaprPrgrsSttsService } from "../api/elapr-prgrs-stts-service";
+import { useElaprDocPrgrsByDocNo, useSaveElaprPrgrsStts } from "../api/queries";
+import { validateAtrzOrder } from "../lib/apln-validators";
+import { findCurrentUserPendingApprovalRequest } from "../lib/approval-request-utils";
+import {
+  buildPrgrsSttsSavePayload,
+  hasUnsavedPrgrsSttsChanges,
+  isPrgrsSttsRowEditable,
+  validateAllPrgrsSttsRows,
+  validatePrgrsSttsRow,
+} from "../lib/prgrs-stts-save-utils";
+import { useDndSensors } from "../lib/use-dnd-sensors";
+import { usePrgrsSttsRows } from "../lib/use-prgrs-stts-rows";
+import type { ReviewerOption } from "../model/reviewer-option";
 
 import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
@@ -69,7 +66,6 @@ function ElaprApprovalDialog({
   const [isProcessing, setIsProcessing] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
   const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
-  const [finalApprovalYn, setFinalApprovalYn] = useState(false);
 
   const { data: elaprDocPrgrsList, isLoading } = useElaprDocPrgrsByDocNo(open ? elaprDocNo : null);
 
@@ -83,6 +79,7 @@ function ElaprApprovalDialog({
     addRow,
     startEdit,
     updateRow,
+    setDcarbYn,
     cancelEdit,
     commitEdit,
     markDeleted,
@@ -200,7 +197,6 @@ function ElaprApprovalDialog({
     try {
       await elaprPrgrsSttsService.process(currentUserPrgrs.elaprPrgrsId, {
         atrzPrgrsSttsComCd: "ATRZ_PRGRS_003",
-        finalApprovalYn,
       });
       alert("결재가 완료되었습니다.");
       queryClient.invalidateQueries({
@@ -313,12 +309,13 @@ function ElaprApprovalDialog({
               >
                 <Table className="w-full">
                   <colgroup>
+                    <col width="8%" />
                     <col width="8%" />
                     <col width="10%" />
-                    <col width="15%" />
-                    <col width="35%" />
-                    <col width="12%" />
-                    <col width="20%" />
+                    <col width="30%" />
+                    <col width="10%" />
+                    <col width="10%" />
+                    <col width="24%" />
                   </colgroup>
                   <TableHeader>
                     <TableRow>
@@ -326,6 +323,7 @@ function ElaprApprovalDialog({
                       <TableHead>결재순서</TableHead>
                       <TableHead>결재구분</TableHead>
                       <TableHead>결재자</TableHead>
+                      <TableHead>전결자 지정</TableHead>
                       <TableHead>결재상태</TableHead>
                       <TableHead>관리</TableHead>
                     </TableRow>
@@ -354,6 +352,7 @@ function ElaprApprovalDialog({
                             setPickingRowKey(row.rowKey);
                             setPickerOpen(true);
                           }}
+                          onToggleDcarb={(checked) => setDcarbYn(row.rowKey, checked)}
                         />
                       ))}
                     </SortableContext>
@@ -384,16 +383,6 @@ function ElaprApprovalDialog({
             </Button>
             {canApprove && (
               <div className="flex items-center gap-2">
-                <div className="mr-2 flex items-center gap-2">
-                  <Checkbox
-                    id="all-approve"
-                    checked={finalApprovalYn}
-                    onCheckedChange={(checked) => setFinalApprovalYn(checked === true)}
-                  />
-                  <Label htmlFor="all-approve" className="text-xl">
-                    전결
-                  </Label>
-                </div>
                 <Button onClick={handleApprove} disabled={isBusy}>
                   결재
                 </Button>
diff --git a/apps/as/src/entities/elapr/ui/elapr-doc-prgrs-status.tsx b/apps/as/src/entities/elapr/ui/elapr-doc-prgrs-status.tsx
new file mode 100644
index 000000000..731e39a07
--- /dev/null
+++ b/apps/as/src/entities/elapr/ui/elapr-doc-prgrs-status.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { Fragment } from "react";
+
+import { ChevronRight } from "lucide-react";
+
+import type { ElaprDocPrgrsClientResponseDto } from "@/shared/model";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import { cn, Skeleton } from "@common/components";
+
+import { useElaprDocPrgrsByDocNo } from "../api/queries";
+import { getApproverStatus, sortByAtrzSeqNo } from "../lib/approval-utils";
+
+const REJECT_STATUS_CD = "ATRZ_PRGRS_004";
+
+interface ElaprDocPrgrsStatusProps {
+  elaprDocNo: string | null | undefined;
+}
+
+function ElaprDocPrgrsStep({ item }: { item: ElaprDocPrgrsClientResponseDto }) {
+  const status = getApproverStatus(item.atrzPrgrsSttsComCd);
+  const isRejected = item.atrzPrgrsSttsComCd === REJECT_STATUS_CD;
+  const rjctRsn = item.rjctRsn?.trim();
+  const metaParts = [item.ognzNm, item.jbpsSeNm].filter(Boolean);
+
+  const statusBadge = (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-sm px-2 py-1 text-lg font-medium",
+        status.badgeClass,
+        isRejected && rjctRsn && "cursor-help underline decoration-dotted underline-offset-4",
+      )}
+    >
+      {status.label}
+    </span>
+  );
+
+  return (
+    <div className="flex min-w-[12rem] flex-1 flex-col items-center gap-3 p-4 text-center">
+      {isRejected && rjctRsn ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{statusBadge}</TooltipTrigger>
+          <TooltipContent sideOffset={4} className="max-w-md whitespace-pre-wrap">
+            {rjctRsn}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        statusBadge
+      )}
+      <div className="flex flex-col items-center gap-1">
+        <div className="flex items-center gap-2">
+          <span className="text-xl text-muted-foreground">[{item.atrzSeComNm || "-"}]</span>
+          <span className="text-xl font-semibold">{item.aprvrNm || item.aprvrUuid || "-"}</span>
+        </div>
+        {metaParts.length > 0 && (
+          <span className="text-base text-gray-500">{metaParts.join(" · ")}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ElaprDocPrgrsStatus({ elaprDocNo }: ElaprDocPrgrsStatusProps) {
+  const { data, isLoading } = useElaprDocPrgrsByDocNo(elaprDocNo);
+  const steps = sortByAtrzSeqNo(data ?? []);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-3 px-4 py-6">
+        <Skeleton className="h-24 flex-1 rounded-sm" />
+        <Skeleton className="h-24 flex-1 rounded-sm" />
+        <Skeleton className="h-24 flex-1 rounded-sm" />
+      </div>
+    );
+  }
+
+  if (steps.length === 0) {
+    return <div className="py-8 text-center text-xl text-gray-500">결재 정보가 없습니다.</div>;
+  }
+
+  return (
+    <div className="flex flex-wrap items-stretch justify-start gap-4 overflow-x-auto">
+      {steps.map((item, index) => (
+        <Fragment key={item.elaprPrgrsId ?? `${item.atrzSeqNo}-${item.aprvrUuid ?? index}`}>
+          <div className="flex items-center">
+            {index > 0 && <ChevronRight className="size-8 text-muted-foreground" />}
+          </div>
+          <ElaprDocPrgrsStep item={item} />
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export { ElaprDocPrgrsStatus };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx b/apps/as/src/entities/elapr/ui/elapr-tmplt-picker-dialog.tsx
similarity index 89%
rename from apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx
rename to apps/as/src/entities/elapr/ui/elapr-tmplt-picker-dialog.tsx
index 3f59f602b..aa70932e9 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-tmplt-picker-dialog.tsx
@@ -1,163 +1,166 @@
-"use client";
-
-import { useCallback, useState } from "react";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  type ElaprTmplt,
-  getVisibleRows,
-  useElaprTmpltPage,
-  validateAllRowsForSave,
-  validateAtrzOrder,
-  validateUniqueSeqNo,
-} from "@/entities/elapr";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@common/components";
-
-import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
-import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
-
-const PAGE_SIZE = 100;
-
-interface ElaprTmpltPickerConfirmPayload {
-  tmplt: ElaprTmplt;
-  aplnRows: ElaprAplnRow[];
-}
-
-interface ElaprTmpltPickerDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect?: (tmplt: ElaprTmplt) => void;
-  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
-}
-
-function ElaprTmpltPickerDialog({
-  open,
-  onClose,
-  onSelect,
-  onConfirm,
-}: ElaprTmpltPickerDialogProps) {
-  const alert = useAlertStore((state) => state.setMessage);
-  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
-  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
-  const [isEditingLocked, setIsEditingLocked] = useState(false);
-
-  const tmpltQuery = useElaprTmpltPage({
-    page: 0,
-    size: PAGE_SIZE,
-    sort: "regDt,desc",
-    docSeComCd: "FNRS",
-  });
-
-  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
-    setAplnRows(rows);
-  }, []);
-
-  const handleEditingLockedChange = useCallback((locked: boolean) => {
-    setIsEditingLocked(locked);
-  }, []);
-
-  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
-    setSelectedTmplt(tmplt);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-  }
-
-  function handleOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      setSelectedTmplt(null);
-      setAplnRows([]);
-      setIsEditingLocked(false);
-      onClose();
-    }
-  }
-
-  function handleConfirm() {
-    if (!selectedTmplt) {
-      alert("결재서식을 선택해 주세요.");
-      return;
-    }
-
-    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
-    if (rowsError) {
-      alert(rowsError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(aplnRows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const seqError = validateUniqueSeqNo(aplnRows);
-    if (seqError) {
-      alert(seqError);
-      return;
-    }
-
-    const visibleRows = getVisibleRows(aplnRows);
-
-    const payload: ElaprTmpltPickerConfirmPayload = {
-      tmplt: selectedTmplt,
-      aplnRows: visibleRows,
-    };
-
-    if (onConfirm) {
-      onConfirm(payload);
-    } else {
-      onSelect?.(selectedTmplt);
-    }
-
-    setSelectedTmplt(null);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-    onClose();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>결재선 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex gap-6">
-          <ElaprTmpltSelectTable
-            query={tmpltQuery}
-            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onSelectTmplt={handleSelectTmplt}
-          />
-          <ElaprAplnPickerGrid
-            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onRowsChange={handleRowsChange}
-            onEditingLockedChange={handleEditingLockedChange}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
-            닫기
-          </Button>
-          <Button
-            type="button"
-            disabled={!selectedTmplt || isEditingLocked}
-            onClick={handleConfirm}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { ElaprTmpltPickerDialog };
-export type { ElaprTmpltPickerConfirmPayload };
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@common/components";
+
+import { useElaprTmpltPage } from "../api/queries";
+import {
+  getVisibleRows,
+  validateAllRowsForSave,
+  validateAtrzOrder,
+  validateUniqueSeqNo,
+} from "../lib/apln-validators";
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+import type { ElaprTmplt } from "../model/elapr-tmplt-interface";
+
+import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
+import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
+
+const PAGE_SIZE = 100;
+
+interface ElaprTmpltPickerConfirmPayload {
+  tmplt: ElaprTmplt;
+  aplnRows: ElaprAplnRow[];
+}
+
+interface ElaprTmpltPickerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  docSeComCd: string;
+  onSelect?: (tmplt: ElaprTmplt) => void;
+  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
+}
+
+function ElaprTmpltPickerDialog({
+  open,
+  onClose,
+  docSeComCd,
+  onSelect,
+  onConfirm,
+}: ElaprTmpltPickerDialogProps) {
+  const alert = useAlertStore((state) => state.setMessage);
+  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
+  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
+  const [isEditingLocked, setIsEditingLocked] = useState(false);
+
+  const tmpltQuery = useElaprTmpltPage({
+    page: 0,
+    size: PAGE_SIZE,
+    sort: "regDt,desc",
+    docSeComCd,
+  });
+
+  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
+    setAplnRows(rows);
+  }, []);
+
+  const handleEditingLockedChange = useCallback((locked: boolean) => {
+    setIsEditingLocked(locked);
+  }, []);
+
+  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
+    setSelectedTmplt(tmplt);
+    setAplnRows([]);
+    setIsEditingLocked(false);
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      setSelectedTmplt(null);
+      setAplnRows([]);
+      setIsEditingLocked(false);
+      onClose();
+    }
+  }
+
+  function handleConfirm() {
+    if (!selectedTmplt) {
+      alert("결재서식을 선택해 주세요.");
+      return;
+    }
+
+    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
+    if (rowsError) {
+      alert(rowsError);
+      return;
+    }
+
+    const orderError = validateAtrzOrder(aplnRows);
+    if (orderError) {
+      alert(orderError);
+      return;
+    }
+
+    const seqError = validateUniqueSeqNo(aplnRows);
+    if (seqError) {
+      alert(seqError);
+      return;
+    }
+
+    const visibleRows = getVisibleRows(aplnRows);
+
+    const payload: ElaprTmpltPickerConfirmPayload = {
+      tmplt: selectedTmplt,
+      aplnRows: visibleRows,
+    };
+
+    if (onConfirm) {
+      onConfirm(payload);
+    } else {
+      onSelect?.(selectedTmplt);
+    }
+
+    setSelectedTmplt(null);
+    setAplnRows([]);
+    setIsEditingLocked(false);
+    onClose();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>결재선 선택</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex gap-6">
+          <ElaprTmpltSelectTable
+            query={tmpltQuery}
+            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
+            onSelectTmplt={handleSelectTmplt}
+          />
+          <ElaprAplnPickerGrid
+            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
+            onRowsChange={handleRowsChange}
+            onEditingLockedChange={handleEditingLockedChange}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
+            닫기
+          </Button>
+          <Button
+            type="button"
+            disabled={!selectedTmplt || isEditingLocked}
+            onClick={handleConfirm}
+          >
+            확인
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ElaprTmpltPickerDialog };
+export type { ElaprTmpltPickerConfirmPayload };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx b/apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx
similarity index 85%
rename from apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx
rename to apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx
index 50bdb33b9..b93ead98d 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx
@@ -7,9 +7,10 @@ import { createColumnHelper, getCoreRowModel, type RowSelectionState } from "@ta
 
 import { useDataTable } from "@/shared/lib";
 import type { PageResponse } from "@/shared/model";
-import type { ElaprTmplt } from "@/entities/elapr";
 import { Skeleton } from "@common/components";
 
+import type { ElaprTmplt } from "../model/elapr-tmplt-interface";
+
 const columnHelper = createColumnHelper<ElaprTmplt>();
 
 interface ElaprTmpltSelectTableProps {
@@ -35,18 +36,10 @@ function ElaprTmpltSelectTable({
 
   const columns = useMemo(
     () => [
-      columnHelper.accessor("elaprTmpltId", {
-        header: "전자결재서식아이디",
-        meta: { align: "left" },
-      }),
       columnHelper.accessor("elaprTmpltNm", {
         header: "결재서식명",
         meta: { align: "left" },
       }),
-      columnHelper.accessor("docSeComNm", {
-        header: "문서구분",
-        cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "—",
-      }),
     ],
     [],
   );
diff --git a/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx b/apps/as/src/entities/elapr/ui/sortable-apln-picker-row.tsx
similarity index 72%
rename from apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx
rename to apps/as/src/entities/elapr/ui/sortable-apln-picker-row.tsx
index 46af147ca..90d8380b7 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx
+++ b/apps/as/src/entities/elapr/ui/sortable-apln-picker-row.tsx
@@ -4,9 +4,19 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { MoveVertical } from "lucide-react";
 
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
-import type { ElaprAplnRow } from "@/entities/elapr";
-import { Button, TableCell, TableRow } from "@common/components";
+import { findCodeLabel, useCodeList } from "@/entities/code";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TableCell,
+  TableRow,
+} from "@common/components";
+
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
 
 interface SortableAplnPickerRowProps {
   row: ElaprAplnRow;
@@ -36,6 +46,7 @@ function SortableAplnPickerRow({
   onPickAprvr,
 }: SortableAplnPickerRowProps) {
   const { data: atrzSeCodes } = useCodeList("ATRZSE");
+  const selectableAtrzSeCodes = atrzSeCodes?.filter((code) => code.lwpoCd !== "ATRZ01");
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: row.rowKey,
@@ -66,31 +77,35 @@ function SortableAplnPickerRow({
           <MoveVertical className="!size-6" />
         </Button>
       </TableCell>
-      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
       <TableCell align="center">{displaySeqNo}</TableCell>
       <TableCell align="center">
         {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
+          <Select
             value={row.atrzSeComCd ?? ""}
             onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
+              onChange({ atrzSeComCd: v, atrzSeComNm: findCodeLabel(selectableAtrzSeCodes, v) })
             }
-            placeholder="결재구분"
-          />
+          >
+            <SelectTrigger className="min-w-[120px]">
+              <SelectValue placeholder="결재구분" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectableAtrzSeCodes?.map((code) => (
+                <SelectItem key={code.lwpoCd} value={code.lwpoCd}>
+                  {code.lwpoCdNm}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         ) : (
           atrzSeLabel || "-"
         )}
       </TableCell>
       <TableCell align="center">
-        <div className="flex items-center justify-center gap-4">
-          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
+        <div className="flex items-center justify-center gap-2">
+          <span>{row.aprvrNm || row.aprvrUuid || ""}</span>
           {isEditing && (
-            <Button type="button" size="sm" onClick={onPickAprvr}>
+            <Button type="button" size="sm" onClick={onPickAprvr} disabled={!row.atrzSeComCd}>
               선택
             </Button>
           )}
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-prgrs-stts-row.tsx b/apps/as/src/entities/elapr/ui/sortable-prgrs-stts-row.tsx
similarity index 74%
rename from apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-prgrs-stts-row.tsx
rename to apps/as/src/entities/elapr/ui/sortable-prgrs-stts-row.tsx
index 795c9d08d..601d272f2 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-prgrs-stts-row.tsx
+++ b/apps/as/src/entities/elapr/ui/sortable-prgrs-stts-row.tsx
@@ -5,11 +5,26 @@ import { CSS } from "@dnd-kit/utilities";
 import { MoveVertical } from "lucide-react";
 
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
-import { type ElaprPrgrsSttsRow, isPrgrsSttsRowEditable } from "@/entities/elapr";
-import { Button, cn, TableCell, TableRow } from "@common/components";
+import { findCodeLabel, useCodeList } from "@/entities/code";
+import {
+  Button,
+  Checkbox,
+  cn,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TableCell,
+  TableRow,
+} from "@common/components";
 
-import { getApproverStatus } from "../../lib/approval-utils";
+import { getApproverStatus } from "../lib/approval-utils";
+import {
+  type ElaprPrgrsSttsRow,
+  isPrgrsSttsRowDcarbable,
+  isPrgrsSttsRowEditable,
+} from "../lib/prgrs-stts-save-utils";
 
 interface SortablePrgrsSttsRowProps {
   row: ElaprPrgrsSttsRow;
@@ -23,6 +38,7 @@ interface SortablePrgrsSttsRowProps {
   onDelete: () => void;
   onChange: (patch: Partial<ElaprPrgrsSttsRow>) => void;
   onPickAprvr: () => void;
+  onToggleDcarb: (checked: boolean) => void;
 }
 
 function SortablePrgrsSttsRow({
@@ -37,8 +53,10 @@ function SortablePrgrsSttsRow({
   onDelete,
   onChange,
   onPickAprvr,
+  onToggleDcarb,
 }: SortablePrgrsSttsRowProps) {
   const { data: atrzSeCodes } = useCodeList("ATRZSE");
+  const selectableAtrzSeCodes = atrzSeCodes?.filter((code) => code.lwpoCd !== "ATRZ01");
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: row.rowKey,
@@ -52,6 +70,7 @@ function SortablePrgrsSttsRow({
   };
 
   const isEditable = isPrgrsSttsRowEditable(row);
+  const isDcarbable = isPrgrsSttsRowDcarbable(row);
   const rowDisabled = isLocked && !isEditing;
   const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
   const status = getApproverStatus(row.atrzPrgrsSttsComCd);
@@ -89,18 +108,23 @@ function SortablePrgrsSttsRow({
       <TableCell align="center">{displaySeqNo}</TableCell>
       <TableCell align="center">
         {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
+          <Select
             value={row.atrzSeComCd ?? ""}
             onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
+              onChange({ atrzSeComCd: v, atrzSeComNm: findCodeLabel(selectableAtrzSeCodes, v) })
             }
-            placeholder="결재구분"
-          />
+          >
+            <SelectTrigger className="min-w-[120px]">
+              <SelectValue placeholder="결재구분" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectableAtrzSeCodes?.map((code) => (
+                <SelectItem key={code.lwpoCd} value={code.lwpoCd}>
+                  {code.lwpoCdNm}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         ) : (
           atrzSeLabel || "-"
         )}
@@ -123,6 +147,15 @@ function SortablePrgrsSttsRow({
           )}
         </div>
       </TableCell>
+      <TableCell align="center">
+        {isDcarbable && !rowDisabled && (
+          <Checkbox
+            checked={row.dcarbYn === "Y"}
+            onCheckedChange={(checked) => onToggleDcarb(checked === true)}
+            aria-label="전결자 지정"
+          />
+        )}
+      </TableCell>
       <TableCell align="center">
         {isRejectedRow && rjctRsn ? (
           <Tooltip>
diff --git a/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
index 38ce8e69a..2bef72628 100644
--- a/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
+++ b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
@@ -65,6 +65,22 @@ async function techReview(id: string, payload: InstlSncnApplySaveRequestDto): Pr
   await client.post(`${BASE}/${id}/tech-review`, payload);
 }
 
+async function submitSupplement(
+  id: string,
+  payload: InstlSncnApplySaveRequestDto,
+): Promise<string> {
+  const response = await client.post<string>(`${BASE}/${id}/submitsupplement`, payload);
+  return response.data;
+}
+
+async function submitReqSupplement(
+  id: string,
+  payload: InstlSncnApplySaveRequestDto,
+): Promise<string> {
+  const response = await client.post<string>(`${BASE}/${id}/reqsupplement`, payload);
+  return response.data;
+}
+
 async function remove(id: string): Promise<void> {
   await client.delete(`${BASE}/${id}`);
 }
@@ -80,6 +96,8 @@ export const instlSncnService = {
   saveApply,
   update,
   techReview,
+  submitSupplement,
+  submitReqSupplement,
   remove,
   changePrgrsSttsComCd,
 } satisfies InstlSncnMngService;
diff --git a/apps/as/src/entities/instl-sncn/api/queries.ts b/apps/as/src/entities/instl-sncn/api/queries.ts
index ac651be47..f9d94dbff 100644
--- a/apps/as/src/entities/instl-sncn/api/queries.ts
+++ b/apps/as/src/entities/instl-sncn/api/queries.ts
@@ -99,6 +99,32 @@ export function useInstlSncnTechReview() {
   });
 }
 
+export function useInstlSncnSubmitSupplement() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: InstlSncnApplySaveRequestDto }) =>
+      instlSncnService.submitSupplement(id, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.all });
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.detail(variables.id) });
+    },
+  });
+}
+
+export function useInstlSncnSubmitReqSupplement() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: InstlSncnApplySaveRequestDto }) =>
+      instlSncnService.submitReqSupplement(id, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.all });
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.detail(variables.id) });
+    },
+  });
+}
+
 export function useInstlSncnRemove() {
   const queryClient = useQueryClient();
 
diff --git a/apps/as/src/entities/instl-sncn/index.ts b/apps/as/src/entities/instl-sncn/index.ts
index 9547dd6db..946e756f1 100644
--- a/apps/as/src/entities/instl-sncn/index.ts
+++ b/apps/as/src/entities/instl-sncn/index.ts
@@ -5,6 +5,8 @@ export {
   useInstlSncnList,
   useInstlSncnSidoCombo,
   useInstlSncnSigunguCombo,
+  useInstlSncnSubmitReqSupplement,
+  useInstlSncnSubmitSupplement,
   useInstlSncnTechReview,
 } from "./api/queries";
 export {
@@ -28,6 +30,7 @@ export {
   type InstlSncnMngSearchParams,
   type InstlSncnRvwOpnnResponseDto,
   type InstlSncnRvwOpnnSaveRequestDto,
+  type InstlSncnSplmntDmndResponseDto,
   type InstlSncnSplmntDmndSaveDto,
   type ReviewStepCode,
 } from "./model/instl-sncn-interface";
diff --git a/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
index 500cfb842..6ead54c13 100644
--- a/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
+++ b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
@@ -15,6 +15,7 @@ import type {
   PbadmsMngDetResponseBase,
   RvwOpnnResponseExtension,
   RvwOpnnSaveBase,
+  SplmntDmndResponseExtension,
   SplmntDmndSaveBase,
 } from "@/shared/model";
 
@@ -185,20 +186,26 @@ export interface InstlSncnRvwOpnnSaveRequestDto extends RvwOpnnSaveBase {
 /** 설치인가 보완요구 저장 DTO(배열 원소) */
 export type InstlSncnSplmntDmndSaveDto = SplmntDmndSaveBase;
 
+/** 설치인가 보완요구 응답 DTO */
+export type InstlSncnSplmntDmndResponseDto = InstlSncnSplmntDmndSaveDto &
+  SplmntDmndResponseExtension & {
+    instlSncnDocNo?: string;
+  };
+
 /** 설치인가 신청 - 통합 저장 요청 DTO */
 export interface InstlSncnApplySaveRequestDto extends PbadmsApplySaveHeader {
   /** 설치인가관리 정보 */
   instlSncnMng: InstlSncnMngSaveRequestDto;
   /** 사업규모 목록 */
-  bzScaleList: InstlSncnBzScaleSaveDto[];
+  bzScaleList?: InstlSncnBzScaleSaveDto[];
   /** 총사업비 목록 */
-  bizCstList: InstlSncnBizCstSaveRequestDto[];
+  bizCstList?: InstlSncnBizCstSaveRequestDto[];
   /** 체크리스트 검토결과 목록 */
-  cklstResultList: InstlSncnCklstResultSaveDto[];
+  cklstResultList?: InstlSncnCklstResultSaveDto[];
   /** 체크리스트 검토결과 맵 (rvwStpComCd -> 목록) */
   cklstResultMap?: Record<string, InstlSncnCklstResultSaveDto[]>;
   /** 필수첨부파일 목록 */
-  esntlAtchFileList: InstlSncnEsntlAtchFileSaveDto[];
+  esntlAtchFileList?: InstlSncnEsntlAtchFileSaveDto[];
   /** 검토의견 목록 */
   rvwOpnnList?: InstlSncnRvwOpnnSaveRequestDto[];
   /** 보완요구 목록 */
@@ -222,8 +229,11 @@ export type InstlSncnRvwOpnnResponseDto = InstlSncnRvwOpnnSaveRequestDto &
   };
 
 /** 설치인가관리 상세 응답 DTO */
-export interface InstlSncnMngDetResponse
-  extends PbadmsMngDetResponseBase<InstlSncnMngResponseDto, InstlSncnRvwOpnnResponseDto> {
+export interface InstlSncnMngDetResponse extends PbadmsMngDetResponseBase<
+  InstlSncnMngResponseDto,
+  InstlSncnRvwOpnnResponseDto,
+  InstlSncnSplmntDmndResponseDto
+> {
   detDto: InstlSncnMngResponseDto;
   bizSclList: BizSclTreeDto[];
   bizCstList: BizCstTreeDto[];
@@ -239,6 +249,8 @@ export interface InstlSncnMngService {
   saveApply: (payload: InstlSncnApplySaveRequestDto) => Promise<string>;
   update: (id: string, payload: InstlSncnMngUpdateRequestDto) => Promise<void>;
   techReview: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<void>;
+  submitSupplement: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<string>;
+  submitReqSupplement: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<string>;
   remove: (id: string) => Promise<void>;
   changePrgrsSttsComCd: (payload: DocPrgrsUpdateRequestDto) => Promise<void>;
 }
diff --git a/apps/as/src/pages/approval-line-management/model/columns.tsx b/apps/as/src/pages/approval-line-management/model/columns.tsx
index a7beb668b..35dcc4a74 100644
--- a/apps/as/src/pages/approval-line-management/model/columns.tsx
+++ b/apps/as/src/pages/approval-line-management/model/columns.tsx
@@ -14,10 +14,6 @@ interface CreateTmpltColumnsOptions {
 
 export function createTmpltColumns({ onEdit, onDelete }: CreateTmpltColumnsOptions) {
   return [
-    columnHelper.accessor("elaprTmpltId", {
-      header: "전자결재서식아이디",
-      meta: { align: "left" },
-    }),
     columnHelper.accessor("elaprTmpltNm", {
       header: "결재서식명",
       meta: { align: "left" },
diff --git a/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx b/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
index 11b9373ac..38b018809 100644
--- a/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
@@ -11,7 +11,7 @@ function ApprovalLineManagementPage() {
   const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
 
   return (
-    <div className="space-y-6 px-[1.8rem] pb-6">
+    <div className="grid grid-cols-1 gap-6 px-[1.8rem] xl:grid-cols-2">
       <ElaprTmpltList
         selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
         onSelectTmplt={setSelectedTmplt}
diff --git a/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
index 83c01c7ab..e703551d5 100644
--- a/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
@@ -186,20 +186,20 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
           <Table className="w-full">
             <colgroup>
-              <col width="10%" />
-              <col width="30%" />
+              <col width="5%" />
               <col width="10%" />
               <col width="10%" />
               <col width="15%" />
-              <col width="15%" />
+              <col width="25%" />
+              <col width="20%" />
               <col width="10%" />
             </colgroup>
             <TableHeader>
               <TableRow>
                 <TableHead className="w-10" />
-                <TableHead>결재선아이디</TableHead>
                 <TableHead>결재순서</TableHead>
                 <TableHead>결재구분</TableHead>
+                <TableHead>결재자 ID</TableHead>
                 <TableHead>결재자</TableHead>
                 <TableHead>등록일시</TableHead>
                 <TableHead>관리</TableHead>
diff --git a/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
index 94d28be22..b0a23ee1e 100644
--- a/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
@@ -4,9 +4,18 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Equal } from "lucide-react";
 
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
+import { findCodeLabel, useCodeList } from "@/entities/code";
 import type { ElaprAplnRow } from "@/entities/elapr";
-import { Button, TableCell, TableRow } from "@common/components";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TableCell,
+  TableRow,
+} from "@common/components";
 
 interface SortableAplnRowProps {
   row: ElaprAplnRow;
@@ -36,6 +45,7 @@ function SortableAplnRow({
   onPickAprvr,
 }: SortableAplnRowProps) {
   const { data: atrzSeCodes } = useCodeList("ATRZSE");
+  const selectableAtrzSeCodes = atrzSeCodes?.filter((code) => code.lwpoCd !== "ATRZ01");
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: row.rowKey,
@@ -49,7 +59,7 @@ function SortableAplnRow({
   };
 
   const rowDisabled = isLocked && !isEditing;
-  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
+  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(selectableAtrzSeCodes, row.atrzSeComCd);
 
   return (
     <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
@@ -66,31 +76,36 @@ function SortableAplnRow({
           <Equal className="!size-6" />
         </Button>
       </TableCell>
-      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
       <TableCell align="center">{displaySeqNo}</TableCell>
       <TableCell align="center">
         {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
+          <Select
             value={row.atrzSeComCd ?? ""}
             onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
+              onChange({ atrzSeComCd: v, atrzSeComNm: findCodeLabel(selectableAtrzSeCodes, v) })
             }
-            placeholder="결재구분"
-          />
+          >
+            <SelectTrigger className="min-w-[120px]">
+              <SelectValue placeholder="결재구분" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectableAtrzSeCodes?.map((code) => (
+                <SelectItem key={code.lwpoCd} value={code.lwpoCd}>
+                  {code.lwpoCdNm}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         ) : (
           atrzSeLabel || "-"
         )}
       </TableCell>
+      <TableCell align="center">{row.aprvrUserId ?? "-"}</TableCell>
       <TableCell align="center">
-        <div className="flex items-center justify-center gap-4">
-          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
+        <div className="flex items-center justify-center gap-1">
+          <span>{row.aprvrNm || row.aprvrUuid || ""}</span>
           {isEditing && (
-            <Button type="button" size="sm" onClick={onPickAprvr}>
+            <Button type="button" size="sm" onClick={onPickAprvr} disabled={!row.atrzSeComCd}>
               선택
             </Button>
           )}
diff --git a/apps/as/src/pages/design-cnstn/index.ts b/apps/as/src/pages/design-cnstn/index.ts
new file mode 100644
index 000000000..fcaaab3ed
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/index.ts
@@ -0,0 +1,5 @@
+export { DesignEditPage } from "./ui/design-edit-page";
+export { DesignFormPage } from "./ui/design-form-page";
+export { DesignListPage } from "./ui/design-list-page";
+export { DesignRegistPage } from "./ui/design-regist-page";
+export { DesignViewPage } from "./ui/design-view-page";
diff --git a/apps/as/src/pages/design-cnstn/lib/button-config.ts b/apps/as/src/pages/design-cnstn/lib/button-config.ts
new file mode 100644
index 000000000..2727092f2
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/lib/button-config.ts
@@ -0,0 +1,118 @@
+export const DESIGN_CNSTN_VIEW_BUTTON_ACTION = {
+  strg: "strg",
+  aply: "aply",
+  del: "del",
+  rqstRvw: "rqstRvw",
+  rvwStrg: "rvwStrg",
+  rvwCmptn: "rvwCmptn",
+  atrzAprv: "atrzAprv",
+  atrzRply: "atrzRply",
+} as const;
+
+export type DesignCnstnViewButtonAction =
+  (typeof DESIGN_CNSTN_VIEW_BUTTON_ACTION)[keyof typeof DESIGN_CNSTN_VIEW_BUTTON_ACTION];
+
+const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, DesignCnstnViewButtonAction[]>> = {
+  ROLE_USER05: {
+    "": [
+      DESIGN_CNSTN_VIEW_BUTTON_ACTION.strg,
+      DESIGN_CNSTN_VIEW_BUTTON_ACTION.aply,
+      DESIGN_CNSTN_VIEW_BUTTON_ACTION.del,
+    ],
+    CV: [
+      DESIGN_CNSTN_VIEW_BUTTON_ACTION.strg,
+      DESIGN_CNSTN_VIEW_BUTTON_ACTION.aply,
+      DESIGN_CNSTN_VIEW_BUTTON_ACTION.del,
+    ],
+  },
+};
+
+const ROLE_USER01_ATRZ_STATUS_CODES = ["CT", "CS"] as const;
+
+const ROLE_USER01_ATRZ_STATUS_ACTIONS: Record<
+  string,
+  Record<string, DesignCnstnViewButtonAction[]>
+> = {
+  CT: {
+    ATRZ01: [DESIGN_CNSTN_VIEW_BUTTON_ACTION.rqstRvw],
+  },
+  CS: {
+    ATRZ02: [DESIGN_CNSTN_VIEW_BUTTON_ACTION.rvwStrg, DESIGN_CNSTN_VIEW_BUTTON_ACTION.rvwCmptn],
+    ATRZ03: [DESIGN_CNSTN_VIEW_BUTTON_ACTION.atrzAprv],
+    ATRZ99: [DESIGN_CNSTN_VIEW_BUTTON_ACTION.atrzRply],
+  },
+};
+
+function resolveButtonConfigs(
+  actions: DesignCnstnViewButtonAction[],
+): DesignCnstnViewButtonAction[] {
+  return actions.map((action) => DESIGN_CNSTN_VIEW_BUTTON_ACTION[action]);
+}
+
+interface GetButtonConfigsOptions {
+  hasPendingApprovalRequest?: boolean;
+}
+
+function resolveRoleUser01AtrzButtonActions(
+  prgrsSttsComCd: string,
+  atrzSeComCdList: string[],
+  options?: GetButtonConfigsOptions,
+): DesignCnstnViewButtonAction[] {
+  if (prgrsSttsComCd === "CS" && options?.hasPendingApprovalRequest === false) {
+    return [];
+  }
+
+  const atrzStatusMap = ROLE_USER01_ATRZ_STATUS_ACTIONS[prgrsSttsComCd];
+  if (!atrzStatusMap || atrzSeComCdList.length === 0) return [];
+
+  const seen = new Set<DesignCnstnViewButtonAction>();
+  const actions: DesignCnstnViewButtonAction[] = [];
+
+  for (const atrzSeComCd of atrzSeComCdList) {
+    const mappedActions = atrzStatusMap[atrzSeComCd];
+    if (!mappedActions) continue;
+
+    for (const action of mappedActions) {
+      if (seen.has(action)) continue;
+      seen.add(action);
+      actions.push(action);
+    }
+  }
+
+  return actions;
+}
+
+export function needsRoleUser01AtrzResolve(
+  dtlInstCd: string | undefined,
+  prgrsSttsComCd: string,
+): boolean {
+  return (
+    dtlInstCd === "ROLE_USER01" &&
+    ROLE_USER01_ATRZ_STATUS_CODES.includes(
+      prgrsSttsComCd as (typeof ROLE_USER01_ATRZ_STATUS_CODES)[number],
+    )
+  );
+}
+
+export function getButtonConfigs(
+  dtlInstCd: string | undefined,
+  prgrsSttsComCd: string,
+  atrzSeComCdList?: string[],
+  options?: GetButtonConfigsOptions,
+): DesignCnstnViewButtonAction[] {
+  if (!dtlInstCd) return [];
+
+  if (needsRoleUser01AtrzResolve(dtlInstCd, prgrsSttsComCd)) {
+    return resolveButtonConfigs(
+      resolveRoleUser01AtrzButtonActions(prgrsSttsComCd, atrzSeComCdList ?? [], options),
+    );
+  }
+
+  const statusMap = ROLE_STATUS_BUTTON_ACTIONS[dtlInstCd];
+  if (!statusMap) return [];
+
+  const actions = statusMap[prgrsSttsComCd];
+  if (!actions) return [];
+
+  return resolveButtonConfigs(actions);
+}
diff --git a/apps/as/src/pages/design-cnstn/lib/design-cnstn-regist-schema.ts b/apps/as/src/pages/design-cnstn/lib/design-cnstn-regist-schema.ts
new file mode 100644
index 000000000..3eecde578
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/lib/design-cnstn-regist-schema.ts
@@ -0,0 +1,68 @@
+import { z } from "zod";
+
+export const designCnstnRegistSchema = z.object({
+  designCnstnMng: z.object({
+    bizNm: z.string().min(1, "사업명은 필수입니다"),
+    bizBgngYr: z.string().min(1, "사업시작연도는 필수입니다"),
+    bizEndYr: z.string().min(1, "사업종료연도는 필수입니다"),
+    bizCn: z.string().min(1, "사업내용은 필수입니다"),
+    taskSeComCd: z.array(z.string()).min(1, "구분은 필수입니다"),
+    dsgnrNm: z.string().min(1, "설계자 이름은 필수입니다"),
+    dsgnrTelno: z
+      .string()
+      .min(1, "설계자 전화번호는 필수입니다")
+      .regex(/^[0-9-]+$/, "숫자와 하이픈(-)만 입력 가능합니다"),
+    dsgnrOgdpNm: z.string().min(1, "설계자 소속은 필수입니다"),
+    dsgnrEmlAddr: z
+      .string()
+      .min(1, "설계자 이메일은 필수입니다")
+      .email("올바른 이메일 형식이 아닙니다"),
+    aplcntNm: z.string().optional(),
+    aplcntMblTelno: z.string().optional(),
+    aplcntOgdpNm: z.string().optional(),
+    aplcntEmlAddr: z.string().optional(),
+    designCnstnDocNo: z.string().optional(),
+    admdstCd: z.string().optional(),
+    envoSeComCd: z.string().optional(),
+    prgrsSttsComCd: z.string().optional(),
+    atchFileGroupId: z.string().optional(),
+    envoSeCdNm: z.string().optional(),
+    taskSeCdNm: z.string().optional(),
+    prgrsSttsCdNm: z.string().optional(),
+    sido: z.string().optional(),
+    gugun: z.string().optional(),
+    regDt: z.string().optional(),
+    rgtr: z.string().optional(),
+    rgtrNm: z.string().optional(),
+    mdfcnDt: z.string().optional(),
+  }),
+  bzScaleList: z.array(
+    z.object({
+      cnstpSeCd: z.string(),
+      bscPl: z.number(),
+      budgetReflct: z.number(),
+      thtiDsgn: z.number(),
+      diff: z.number().optional(),
+    }),
+  ),
+  esntlAtchFileList: z.array(
+    z.object({
+      esntlAtchFileId: z.string(),
+      atchFileGroupId: z.string(),
+    }),
+  ),
+  privacyConsent: z.enum(["Y", "N"], {
+    required_error: "개인정보 수집/이용 동의는 필수입니다",
+  }),
+});
+
+export type DesignCnstnRegistFormData = z.infer<typeof designCnstnRegistSchema>;
+
+export function formatTaskSeComCdForApi(taskSeComCd: string[]): string {
+  return taskSeComCd.join(",");
+}
+
+export function parseTaskSeComCdFromApi(taskSeComCd?: string): string[] {
+  if (!taskSeComCd) return [];
+  return taskSeComCd.split(",").filter(Boolean);
+}
diff --git a/apps/as/src/pages/design-cnstn/lib/form-data-mapper.ts b/apps/as/src/pages/design-cnstn/lib/form-data-mapper.ts
new file mode 100644
index 000000000..a34888317
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/lib/form-data-mapper.ts
@@ -0,0 +1,97 @@
+import type { IUserInfo } from "@/shared/store";
+import type { DesignCnstnMngDetResponseDto } from "@/entities/design-cnstn";
+
+import type { DesignCnstnRegistFormData } from "./design-cnstn-regist-schema";
+import { parseTaskSeComCdFromApi } from "./design-cnstn-regist-schema";
+
+function mapEsntlAtchFileList(esntlFileList: DesignCnstnMngDetResponseDto["esntlFileList"]) {
+  const esntlMap = new Map<string, string>();
+
+  for (const item of esntlFileList ?? []) {
+    if (!item.esntlAtchFileId || !item.atflCd) continue;
+    esntlMap.set(item.esntlAtchFileId, item.atflCd);
+  }
+
+  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
+    esntlAtchFileId,
+    atchFileGroupId,
+  }));
+}
+
+export function mapDetailToFormData(data: DesignCnstnMngDetResponseDto): DesignCnstnRegistFormData {
+  const detDto = data.detDto;
+  if (!detDto) {
+    throw new Error("상세 정보(detDto)가 없습니다.");
+  }
+
+  const bizSclList = data.bizSclList ?? [];
+
+  return {
+    designCnstnMng: {
+      designCnstnDocNo: detDto.designCnstnDocNo,
+      bizNm: detDto.bizNm ?? "",
+      bizBgngYr: detDto.bizBgngYr ?? "",
+      bizEndYr: detDto.bizEndYr ?? "",
+      bizCn: detDto.bizCn ?? "",
+      taskSeComCd: parseTaskSeComCdFromApi(detDto.taskSeComCd),
+      dsgnrNm: detDto.dsgnrNm ?? "",
+      dsgnrTelno: detDto.dsgnrTelno ?? "",
+      dsgnrOgdpNm: detDto.dsgnrOgdpNm ?? "",
+      dsgnrEmlAddr: detDto.dsgnrEmlAddr ?? "",
+      aplcntNm: detDto.aplcntNm ?? "",
+      aplcntMblTelno: detDto.aplcntMblTelno ?? "",
+      aplcntOgdpNm: detDto.aplcntOgdpNm ?? "",
+      aplcntEmlAddr: detDto.aplcntEmlAddr ?? "",
+      admdstCd: detDto.admdstCd,
+      envoSeComCd: detDto.envoSeComCd,
+      prgrsSttsComCd: detDto.prgrsSttsComCd,
+      atchFileGroupId: detDto.atchFileGroupId ?? "",
+      envoSeCdNm: detDto.envoSeCdNm,
+      taskSeCdNm: detDto.taskSeCdNm,
+      prgrsSttsCdNm: detDto.prgrsSttsCdNm,
+      sido: detDto.sido,
+      gugun: detDto.gugun,
+      regDt: detDto.regDt,
+      rgtr: detDto.rgtr,
+      rgtrNm: detDto.rgtrNm,
+      mdfcnDt: detDto.mdfcnDt,
+    },
+    bzScaleList: bizSclList.map((item) => ({
+      cnstpSeCd: item.cnstpSeCd,
+      bscPl: item.bscPlanQty,
+      budgetReflct: item.bgtRfltQty,
+      thtiDsgn: item.tstmDesignQty,
+      diff: item.tstmDesignQty - item.bgtRfltQty,
+    })),
+    esntlAtchFileList: mapEsntlAtchFileList(data.esntlFileList),
+    privacyConsent: "Y",
+  };
+}
+
+export function getCreateDefaultValues(
+  userInfo: IUserInfo | null,
+  taskSeComCd?: string[],
+): DesignCnstnRegistFormData {
+  return {
+    designCnstnMng: {
+      bizNm: "",
+      bizBgngYr: "",
+      bizEndYr: "",
+      bizCn: "",
+      taskSeComCd: taskSeComCd ?? [],
+      dsgnrNm: "",
+      dsgnrTelno: "",
+      dsgnrOgdpNm: "",
+      dsgnrEmlAddr: "",
+      aplcntNm: userInfo?.userName ?? "",
+      aplcntMblTelno: userInfo?.mphn ?? "",
+      aplcntOgdpNm: userInfo?.ogdpSeNm ?? "",
+      aplcntEmlAddr: userInfo?.email ?? "",
+      prgrsSttsComCd: "CV",
+      atchFileGroupId: "",
+    },
+    bzScaleList: [],
+    esntlAtchFileList: [],
+    privacyConsent: "N",
+  };
+}
diff --git a/apps/as/src/pages/design-cnstn/lib/review-opinion-utils.ts b/apps/as/src/pages/design-cnstn/lib/review-opinion-utils.ts
new file mode 100644
index 000000000..fd7da632b
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/lib/review-opinion-utils.ts
@@ -0,0 +1,94 @@
+import type {
+  DesignCnstnMngDetResponseDto,
+  DesignCnstnRvwOpnnResponseDto,
+  DesignCnstnRvwOpnnSaveRequestDto,
+} from "@/entities/design-cnstn";
+
+export interface ReviewOpinionFormData {
+  rvwRsltCn: string;
+  rvwRsltAnmlyYn: "Y" | "N" | "";
+  atchFileGroupId: string;
+  opnrSeComCd: string;
+  rvwOpnnSn?: number;
+}
+
+export interface ReviewOpinionGetFormDataResult {
+  formData: ReviewOpinionFormData;
+  rvwList: DesignCnstnRvwOpnnResponseDto[];
+}
+
+function hasReviewOpinionContent(formData: ReviewOpinionFormData) {
+  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
+}
+
+function mapServerItemToSaveDto(
+  item: DesignCnstnRvwOpnnResponseDto,
+  designCnstnDocNo: string,
+): DesignCnstnRvwOpnnSaveRequestDto | null {
+  if (item.rvwOpnnSn == null) return null;
+
+  return {
+    designCnstnDocNo,
+    rvwOpnnSn: item.rvwOpnnSn,
+    opnrSeComCd: item.opnrSeComCd,
+    opnrNm: item.opnrNm,
+    rvwRsltCn: item.rvwRsltCn,
+    rvwRsltAnmlyYn: item.rvwRsltAnmlyYn || undefined,
+    atchFileGroupId: item.atchFileGroupId || undefined,
+  };
+}
+
+function mapFormDataToSaveDto(
+  formData: ReviewOpinionFormData,
+  designCnstnDocNo: string,
+  opnrNm?: string,
+): DesignCnstnRvwOpnnSaveRequestDto {
+  const base = {
+    designCnstnDocNo,
+    opnrSeComCd: formData.opnrSeComCd,
+    opnrNm: opnrNm ?? "",
+    rvwRsltCn: formData.rvwRsltCn,
+    rvwRsltAnmlyYn: formData.rvwRsltAnmlyYn || undefined,
+    atchFileGroupId: formData.atchFileGroupId || undefined,
+  };
+
+  if (formData.rvwOpnnSn != null) {
+    return { ...base, rvwOpnnSn: formData.rvwOpnnSn };
+  }
+
+  return base as DesignCnstnRvwOpnnSaveRequestDto;
+}
+
+export function toRvwOpnnSaveDto(
+  data: DesignCnstnMngDetResponseDto,
+  result: ReviewOpinionGetFormDataResult | null | undefined,
+  opnrNm?: string,
+): DesignCnstnRvwOpnnSaveRequestDto[] | undefined {
+  if (!result || !data.detDto) return undefined;
+
+  const { formData, rvwList } = result;
+  const designCnstnDocNo = data.detDto.designCnstnDocNo;
+
+  const list: DesignCnstnRvwOpnnSaveRequestDto[] = rvwList
+    .map((item) => mapServerItemToSaveDto(item, designCnstnDocNo))
+    .filter((item): item is DesignCnstnRvwOpnnSaveRequestDto => item != null);
+
+  if (!hasReviewOpinionContent(formData)) {
+    return list.length > 0 ? list : undefined;
+  }
+
+  const formDto = mapFormDataToSaveDto(formData, designCnstnDocNo, opnrNm);
+
+  if (formData.rvwOpnnSn != null) {
+    const existingIndex = list.findIndex((item) => item.rvwOpnnSn === formData.rvwOpnnSn);
+    if (existingIndex >= 0) {
+      list[existingIndex] = formDto;
+    } else {
+      list.push(formDto);
+    }
+  } else {
+    list.push(formDto);
+  }
+
+  return list.length > 0 ? list : undefined;
+}
diff --git a/apps/as/src/pages/design-cnstn/lib/review-step-utils.ts b/apps/as/src/pages/design-cnstn/lib/review-step-utils.ts
new file mode 100644
index 000000000..f96b9b4ef
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/lib/review-step-utils.ts
@@ -0,0 +1,12 @@
+import type { ReviewStepCode } from "../model/view-types";
+
+export function getEditableReviewStep(
+  dtlInstCd?: string,
+  prgrsSttsComCd?: string,
+): ReviewStepCode | undefined {
+  if (dtlInstCd === "ROLE_USER01" && prgrsSttsComCd === "CS") {
+    return "KECO";
+  }
+
+  return undefined;
+}
diff --git a/apps/as/src/pages/design-cnstn/lib/save-payload-utils.ts b/apps/as/src/pages/design-cnstn/lib/save-payload-utils.ts
new file mode 100644
index 000000000..48fff8b26
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/lib/save-payload-utils.ts
@@ -0,0 +1,71 @@
+import type {
+  BizSclTreeDto,
+  BzScaleItem,
+  DesignCnstnApplySaveRequestDto,
+  DesignCnstnMngDetResponseDto,
+  EsntlAtchFileItem,
+  EsntlAtchFileMngTreeResponseDto,
+} from "@/entities/design-cnstn";
+
+import type { ReviewStepCode } from "../model/view-types";
+
+import { type ReviewOpinionGetFormDataResult, toRvwOpnnSaveDto } from "./review-opinion-utils";
+
+export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): BzScaleItem[] {
+  return bizSclList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      cnstpSeCd: node.cnstpSeCd,
+      bscPl: node.bscPlanQty,
+      budgetReflct: node.bgtRfltQty,
+      thtiDsgn: node.tstmDesignQty,
+    }));
+}
+
+export function toEsntlAtchFileSaveDto(
+  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
+): EsntlAtchFileItem[] {
+  const esntlMap = new Map<string, string>();
+
+  for (const item of esntlFileList) {
+    if (!item.esntlAtchFileId || !item.atflCd) continue;
+    esntlMap.set(item.esntlAtchFileId, item.atflCd);
+  }
+
+  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
+    esntlAtchFileId,
+    atchFileGroupId,
+  }));
+}
+
+export function buildSavePayload(
+  data: DesignCnstnMngDetResponseDto,
+  prgrsSttsComCd: string,
+): DesignCnstnApplySaveRequestDto {
+  const detDto = data.detDto;
+  if (!detDto) {
+    throw new Error("상세 정보(detDto)가 없습니다.");
+  }
+
+  return {
+    designCnstnMng: { ...detDto, prgrsSttsComCd },
+    bzScaleList: toBzScaleSaveDto(data.bizSclList ?? []),
+    esntlAtchFileList: toEsntlAtchFileSaveDto(data.esntlFileList ?? []),
+  };
+}
+
+export function buildTechReviewPayload(
+  data: DesignCnstnMngDetResponseDto,
+  prgrsSttsComCd: string,
+  techReViewSaveCd: string,
+  reviewStep: ReviewStepCode,
+  reviewOpinionFormData?: ReviewOpinionGetFormDataResult | null,
+  opnrNm?: string,
+): DesignCnstnApplySaveRequestDto {
+  return {
+    ...buildSavePayload(data, prgrsSttsComCd),
+    techReViewSaveCd,
+    rvwStpCd: reviewStep,
+    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
+  };
+}
diff --git a/apps/as/src/pages/design-cnstn/model/columns.tsx b/apps/as/src/pages/design-cnstn/model/columns.tsx
new file mode 100644
index 000000000..6cfdb7f70
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/model/columns.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { Fragment } from "react";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import { dayjs } from "@/shared/lib";
+import type { DesignCnstnMngResponseDto } from "@/entities/design-cnstn";
+import { Badge } from "@common/components";
+
+const columnHelper = createColumnHelper<DesignCnstnMngResponseDto>();
+
+const MAIN_STEP_LABELS = {
+  save: "저장",
+  apply: "신청완료",
+  review: "설계자문 검토",
+  reply: "설계검토 회신",
+} as const;
+
+const REVIEW_STATUS_CODES = new Set(["CS", "CR"]);
+
+type BadgeState = "completed" | "current" | "pending" | "action";
+
+interface ProgressBadge {
+  label: string;
+  state: BadgeState;
+}
+
+function buildProgressBadges(prgrsSttsComCd: string, prgrsSttsCdNm: string): ProgressBadge[] {
+  const reviewLabel = prgrsSttsCdNm || MAIN_STEP_LABELS.review;
+  const replyLabel = prgrsSttsCdNm || MAIN_STEP_LABELS.reply;
+
+  if (prgrsSttsComCd === "CV") {
+    return [
+      { label: MAIN_STEP_LABELS.save, state: "current" },
+      { label: MAIN_STEP_LABELS.apply, state: "pending" },
+      { label: MAIN_STEP_LABELS.review, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "CT") {
+    return [
+      { label: MAIN_STEP_LABELS.save, state: "completed" },
+      { label: MAIN_STEP_LABELS.apply, state: "current" },
+      { label: MAIN_STEP_LABELS.review, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (REVIEW_STATUS_CODES.has(prgrsSttsComCd)) {
+    return [
+      { label: MAIN_STEP_LABELS.save, state: "completed" },
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: reviewLabel, state: "action" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "CP" || prgrsSttsComCd === "EP") {
+    return [
+      { label: MAIN_STEP_LABELS.save, state: "completed" },
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.review, state: "completed" },
+      { label: replyLabel, state: "action" },
+    ];
+  }
+
+  return [{ label: prgrsSttsCdNm || prgrsSttsComCd || "-", state: "current" }];
+}
+
+function getBadgeColor(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "green";
+    case "current":
+      return "blue";
+    case "pending":
+      return "lightGray";
+    case "action":
+      return "orange";
+  }
+}
+
+function formatOptional(value: string | undefined) {
+  return value?.trim() ? value : "-";
+}
+
+interface ProgressStepBadgeProps {
+  prgrsSttsComCd: string;
+  prgrsSttsCdNm: string;
+}
+
+function ProgressStepBadge({ prgrsSttsComCd, prgrsSttsCdNm }: ProgressStepBadgeProps) {
+  const badges = buildProgressBadges(prgrsSttsComCd, prgrsSttsCdNm);
+
+  return (
+    <div className="flex flex-wrap items-center justify-start">
+      {badges.map((badge, index) => (
+        <Fragment key={`${badge.label}-${index}`}>
+          {index > 0 && <span className="mx-2">&gt;</span>}
+          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export function createDesignCnstnColumns() {
+  return [
+    columnHelper.accessor("sido", {
+      header: "시도",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("gugun", {
+      header: "시군구",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("bizNm", {
+      header: "사업명",
+      meta: { align: "left" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("taskSeCdNm", {
+      header: "업무구분",
+      meta: { align: "center" },
+      cell: ({ row }) => formatOptional(row.original.taskSeCdNm || row.original.taskSeComCd),
+    }),
+    columnHelper.accessor("aplcntNm", {
+      header: "담당자",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("envoSeCdNm", {
+      header: "해당기관",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.display({
+      id: "progress",
+      header: "진행상황",
+      meta: { align: "center" },
+      cell: ({ row }) => (
+        <ProgressStepBadge
+          prgrsSttsComCd={row.original.prgrsSttsComCd || ""}
+          prgrsSttsCdNm={row.original.prgrsSttsCdNm || ""}
+        />
+      ),
+    }),
+    columnHelper.accessor("regDt", {
+      header: "신청일",
+      meta: { align: "center" },
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return value ? dayjs(value).format("YYYY-MM-DD") : "-";
+      },
+    }),
+  ];
+}
diff --git a/apps/as/src/pages/design-cnstn/model/view-types.ts b/apps/as/src/pages/design-cnstn/model/view-types.ts
new file mode 100644
index 000000000..0f9b93431
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/model/view-types.ts
@@ -0,0 +1,15 @@
+export type ReviewStepCode = "LOCAL" | "ENV" | "KECO";
+
+export const REVIEW_STEP_LABELS: Record<ReviewStepCode, string> = {
+  LOCAL: "지자체",
+  ENV: "환경청",
+  KECO: "환경공단",
+};
+
+export const DESIGN_PROGRESS_ORDER = ["CV", "CT", "CS", "CR", "CP", "EP"] as const;
+
+export const ROLE_TO_REVIEW_STEP: Record<string, ReviewStepCode> = {
+  ROLE_USER05: "LOCAL",
+  ROLE_USER03: "ENV",
+  ROLE_USER01: "KECO",
+};
diff --git a/apps/as/src/pages/design-cnstn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/design-cnstn/ui/components/floating-action-buttons.tsx
new file mode 100644
index 000000000..9159fcdae
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/components/floating-action-buttons.tsx
@@ -0,0 +1,391 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useUserStore } from "@/shared/lib";
+import {
+  type DesignCnstnApplySaveRequestDto,
+  designCnstnMngBaseKey,
+  type DesignCnstnMngDetResponseDto,
+  designCnstnMngService,
+} from "@/entities/design-cnstn";
+import {
+  buildElaprPrgrsSttsListFromAplnRows,
+  ElaprApprovalDialog,
+  type ElaprDmndSaveRequestDto,
+  elaprDmndService,
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
+  hasCurrentUserPendingApprovalRequest,
+  useElaprDocPrgrsByDocNo,
+} from "@/entities/elapr";
+import { Button } from "@common/components";
+
+import {
+  DESIGN_CNSTN_VIEW_BUTTON_ACTION,
+  type DesignCnstnViewButtonAction,
+  getButtonConfigs,
+  needsRoleUser01AtrzResolve,
+} from "../../lib/button-config";
+import { buildSavePayload, buildTechReviewPayload } from "../../lib/save-payload-utils";
+import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
+
+interface FloatingActionButtonsProps {
+  data: DesignCnstnMngDetResponseDto;
+  docSeComCd: string;
+  designCnstnDocNo: string;
+  prgrsSttsComCd: string;
+  dtlInstCd: string | undefined;
+  atrzSeComCdList: string[];
+  isRvwLoginUserLoading: boolean;
+  techReviewOpinionRef?: React.RefObject<TechReviewOpinionSectionHandle | null>;
+  opnrNm?: string;
+}
+
+type ActiveDialog = "elaprTmplt" | "elaprApproval" | null;
+
+function FloatingActionButtons({
+  data,
+  docSeComCd,
+  designCnstnDocNo,
+  prgrsSttsComCd,
+  dtlInstCd,
+  atrzSeComCdList,
+  isRvwLoginUserLoading,
+  techReviewOpinionRef,
+  opnrNm,
+}: FloatingActionButtonsProps) {
+  const router = useRouter();
+  const { confirm } = useConfirm();
+  const queryClient = useQueryClient();
+  const userInfo = useUserStore((state) => state.userInfo);
+  const alert = useAlertStore((state) => state.setMessage);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [activeDialog, setActiveDialog] = useState<ActiveDialog>(null);
+
+  const docNo = data.detDto?.designCnstnDocNo ?? designCnstnDocNo;
+  const isRegister = data.detDto?.rgtr === userInfo?.userUnqId;
+
+  const needsAtrzResolve = needsRoleUser01AtrzResolve(dtlInstCd, prgrsSttsComCd);
+  const needsCsApprovalCheck = needsAtrzResolve && prgrsSttsComCd === "CS";
+  const { data: elaprDocPrgrsList = [], isLoading: isElaprDocPrgrsLoading } =
+    useElaprDocPrgrsByDocNo(needsCsApprovalCheck ? docNo : null);
+
+  const hasPendingApprovalRequest = hasCurrentUserPendingApprovalRequest(
+    elaprDocPrgrsList,
+    userInfo?.userUnqId,
+  );
+
+  const actionButtons = useMemo(() => {
+    if (needsAtrzResolve && isRvwLoginUserLoading) return [];
+    if (needsCsApprovalCheck && isElaprDocPrgrsLoading) return [];
+    return getButtonConfigs(dtlInstCd, prgrsSttsComCd, atrzSeComCdList, {
+      hasPendingApprovalRequest: needsCsApprovalCheck ? hasPendingApprovalRequest : undefined,
+    });
+  }, [
+    atrzSeComCdList,
+    dtlInstCd,
+    hasPendingApprovalRequest,
+    isElaprDocPrgrsLoading,
+    isRvwLoginUserLoading,
+    needsAtrzResolve,
+    needsCsApprovalCheck,
+    prgrsSttsComCd,
+  ]);
+
+  const canEdit =
+    isRegister && actionButtons.some((button) => button === DESIGN_CNSTN_VIEW_BUTTON_ACTION.strg);
+
+  function handleGoToList() {
+    router.push("/design-cnstn");
+  }
+
+  function handleEdit() {
+    router.push(`/design-cnstn/${designCnstnDocNo}/edit`);
+  }
+
+  function shouldShowButton(action: DesignCnstnViewButtonAction) {
+    return actionButtons.some((button) => button === action);
+  }
+
+  async function executeAction({
+    action,
+    request,
+    successMessage,
+  }: {
+    action: DesignCnstnViewButtonAction;
+    request?: unknown;
+    successMessage?: string;
+  }) {
+    const handler = buttonActionHandlers[action];
+    if (!handler) return;
+
+    setIsProcessing(true);
+    try {
+      await handler({
+        request,
+        data,
+        onSuccess: () => {
+          if (successMessage) alert(successMessage);
+          queryClient.invalidateQueries({
+            queryKey: [...designCnstnMngBaseKey, "findById", designCnstnDocNo],
+          });
+        },
+        onError: (error) => {
+          let errorMessage = "";
+          if (error instanceof AxiosError) {
+            errorMessage = error.response?.data?.message ?? "";
+          } else {
+            errorMessage = error.message ?? "처리 중 오류가 발생했습니다.";
+          }
+          alert(errorMessage);
+        },
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  }
+
+  async function handleStrgClick() {
+    const payload: DesignCnstnApplySaveRequestDto = buildSavePayload(data, "CV");
+    await executeAction({
+      action: DESIGN_CNSTN_VIEW_BUTTON_ACTION.strg,
+      request: payload,
+      successMessage: "저장되었습니다.",
+    });
+  }
+
+  async function handleAplyClick() {
+    const payload: DesignCnstnApplySaveRequestDto = buildSavePayload(data, "CT");
+    await executeAction({
+      action: DESIGN_CNSTN_VIEW_BUTTON_ACTION.aply,
+      request: payload,
+      successMessage: "신청 완료되었습니다.",
+    });
+    queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+  }
+
+  async function handleDelClick() {
+    if (!(await confirm("삭제하시겠습니까?"))) return;
+    await executeAction({
+      action: DESIGN_CNSTN_VIEW_BUTTON_ACTION.del,
+      successMessage: "삭제되었습니다.",
+    });
+    router.push("/design-cnstn");
+  }
+
+  function getReviewOpinionFormData() {
+    return techReviewOpinionRef?.current?.getFormData() ?? null;
+  }
+
+  async function handleElaprTmpltConfirm({ aplnRows }: ElaprTmpltPickerConfirmPayload) {
+    const payload: ElaprDmndSaveRequestDto = {
+      elaprDocNo: docNo,
+      dmndTtl: data.detDto?.bizNm ?? "",
+      dmndCn: data.detDto?.bizCn ?? "",
+      elaprPrgrsSttsList: buildElaprPrgrsSttsListFromAplnRows(aplnRows),
+    };
+    await executeAction({
+      action: DESIGN_CNSTN_VIEW_BUTTON_ACTION.rqstRvw,
+      request: payload,
+      successMessage: "검토자지정이 완료되었습니다.",
+    });
+    await queryClient.invalidateQueries({
+      queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", docNo],
+    });
+  }
+
+  async function handleRvwStrgClick() {
+    const payload = buildTechReviewPayload(
+      data,
+      "CS",
+      "SV",
+      "KECO",
+      getReviewOpinionFormData(),
+      opnrNm,
+    );
+
+    await executeAction({
+      action: DESIGN_CNSTN_VIEW_BUTTON_ACTION.rvwStrg,
+      request: payload,
+      successMessage: "저장되었습니다.",
+    });
+    techReviewOpinionRef?.current?.resetForm();
+  }
+
+  async function handleRvwCmptnClick() {
+    const payload = buildTechReviewPayload(
+      data,
+      "CS",
+      "CP",
+      "KECO",
+      getReviewOpinionFormData(),
+      opnrNm,
+    );
+
+    await executeAction({
+      action: DESIGN_CNSTN_VIEW_BUTTON_ACTION.rvwCmptn,
+      request: payload,
+    });
+    techReviewOpinionRef?.current?.resetForm();
+    setActiveDialog("elaprApproval");
+  }
+
+  return (
+    <>
+      <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
+        <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
+          <Button color="white" type="button" onClick={handleGoToList} disabled={isProcessing}>
+            목록
+          </Button>
+          {canEdit && (
+            <Button color="gray" onClick={handleEdit} disabled={isProcessing}>
+              수정
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.strg) && (
+            <Button onClick={handleStrgClick} disabled={isProcessing}>
+              저장
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.aply) && (
+            <Button color="green" onClick={handleAplyClick} disabled={isProcessing}>
+              신청완료
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.del) && (
+            <Button color="red" onClick={handleDelClick} disabled={isProcessing}>
+              삭제
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.rqstRvw) && (
+            <Button onClick={() => setActiveDialog("elaprTmplt")} disabled={isProcessing}>
+              검토자지정
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.rvwStrg) && (
+            <Button onClick={handleRvwStrgClick} disabled={isProcessing}>
+              저장
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.rvwCmptn) && (
+            <Button color="green" onClick={handleRvwCmptnClick} disabled={isProcessing}>
+              검토완료
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.atrzAprv) && (
+            <Button onClick={() => setActiveDialog("elaprApproval")} disabled={isProcessing}>
+              결재(승인)
+            </Button>
+          )}
+          {shouldShowButton(DESIGN_CNSTN_VIEW_BUTTON_ACTION.atrzRply) && (
+            <Button onClick={() => setActiveDialog("elaprApproval")} disabled={isProcessing}>
+              결재(회신)
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <ElaprTmpltPickerDialog
+        open={activeDialog === "elaprTmplt"}
+        onClose={() => setActiveDialog(null)}
+        docSeComCd={docSeComCd}
+        onConfirm={handleElaprTmpltConfirm}
+      />
+
+      <ElaprApprovalDialog
+        open={activeDialog === "elaprApproval"}
+        onOpenChange={(open) => setActiveDialog(open ? "elaprApproval" : null)}
+        elaprDocNo={data.detDto?.designCnstnDocNo ?? designCnstnDocNo}
+        currentUserUuid={userInfo?.userUnqId ?? ""}
+        onSuccess={() => {
+          queryClient.invalidateQueries({
+            queryKey: [...designCnstnMngBaseKey, "findById", designCnstnDocNo],
+          });
+        }}
+      />
+    </>
+  );
+}
+
+export { FloatingActionButtons };
+
+async function handleSaveApply(
+  context: ActionHandlerContext<DesignCnstnApplySaveRequestDto>,
+): Promise<void> {
+  try {
+    await designCnstnMngService.saveApply(context.request);
+    context.onSuccess?.();
+  } catch (error) {
+    context.onError?.(error as Error);
+  }
+}
+
+async function handleDel(context: ActionHandlerContext): Promise<void> {
+  try {
+    await designCnstnMngService.delete(context.data.detDto?.designCnstnDocNo ?? "");
+    context.onSuccess?.();
+  } catch (error) {
+    context.onError?.(error as Error);
+  }
+}
+
+async function handleTechReview(
+  context: ActionHandlerContext<DesignCnstnApplySaveRequestDto>,
+): Promise<void> {
+  try {
+    await designCnstnMngService.techReview(
+      context.data.detDto?.designCnstnDocNo ?? "",
+      context.request,
+    );
+    context.onSuccess?.();
+  } catch (error) {
+    context.onError?.(error as Error);
+  }
+}
+
+async function handleRqstRvw(
+  context: ActionHandlerContext<ElaprDmndSaveRequestDto>,
+): Promise<void> {
+  try {
+    await elaprDmndService.save(context.request);
+    context.onSuccess?.();
+  } catch (error) {
+    context.onError?.(error as Error);
+  }
+}
+
+async function handleAtrzAprv(context: ActionHandlerContext): Promise<void> {
+  context.onSuccess?.();
+}
+
+async function handleAtrzRply(context: ActionHandlerContext): Promise<void> {
+  context.onSuccess?.();
+}
+
+const buttonActionHandlers: Record<DesignCnstnViewButtonAction, ActionHandler> = {
+  strg: handleSaveApply,
+  aply: handleSaveApply,
+  del: handleDel,
+  rqstRvw: handleRqstRvw,
+  rvwStrg: handleTechReview,
+  rvwCmptn: handleTechReview,
+  atrzAprv: handleAtrzAprv,
+  atrzRply: handleAtrzRply,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface ActionHandlerContext<T = any> {
+  request: T;
+  data: DesignCnstnMngDetResponseDto;
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+type ActionHandler = (context: ActionHandlerContext) => Promise<void>;
diff --git a/apps/as/src/pages/design-cnstn/ui/design-edit-page.tsx b/apps/as/src/pages/design-cnstn/ui/design-edit-page.tsx
new file mode 100644
index 000000000..af2e71ace
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/design-edit-page.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useDesignCnstnMng } from "@/entities/design-cnstn";
+import { Skeleton } from "@common/components";
+
+import { DesignFormPage } from "./design-form-page";
+
+interface DesignEditPageProps {
+  id: string;
+}
+
+function DesignEditPage({ id }: DesignEditPageProps) {
+  const { data, isLoading } = useDesignCnstnMng(id);
+
+  if (isLoading) {
+    return (
+      <div className="mt-6 space-y-6 px-4">
+        <div className="space-y-2">
+          <Skeleton className="h-[4rem] w-full" />
+          <Skeleton className="h-[20rem] w-full" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-[4rem] w-full" />
+          <Skeleton className="h-[20rem] w-full" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-[4rem] w-full" />
+          <Skeleton className="h-[20rem] w-full" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!data?.detDto) {
+    return <div className="mt-6 text-[1.4rem]">상세 정보를 찾을 수 없습니다.</div>;
+  }
+
+  return <DesignFormPage id={id} mode="edit" initialData={data} />;
+}
+
+export { DesignEditPage };
diff --git a/apps/as/src/pages/design-cnstn/ui/design-form-page.tsx b/apps/as/src/pages/design-cnstn/ui/design-form-page.tsx
new file mode 100644
index 000000000..6c09a5320
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/design-form-page.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useAlertStore, useUserStore } from "@/shared/lib";
+import {
+  type DesignCnstnApplySaveRequestDto,
+  designCnstnMngBaseKey,
+  type DesignCnstnMngDetResponseDto,
+  designCnstnMngService,
+} from "@/entities/design-cnstn";
+import {
+  AttachmentsFormSection,
+  BusinessScaleFormSection,
+  ContactInfoFormSection,
+  PrivacyConsentSection,
+} from "@/widgets/pbadms-sprt";
+import { Button } from "@common/components";
+
+import {
+  type DesignCnstnRegistFormData,
+  designCnstnRegistSchema,
+  formatTaskSeComCdForApi,
+} from "../lib/design-cnstn-regist-schema";
+import { getCreateDefaultValues, mapDetailToFormData } from "../lib/form-data-mapper";
+
+import { BasicInfoFormSection } from "./sections/basic-info-form-section";
+
+interface DesignFormPageProps {
+  id?: string;
+  mode: "create" | "edit";
+  initialData?: DesignCnstnMngDetResponseDto;
+  taskSeComCd?: string[];
+}
+
+function DesignFormPage({ id, mode, initialData, taskSeComCd }: DesignFormPageProps) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const { confirm } = useConfirm();
+  const userInfo = useUserStore((state) => state.userInfo);
+  const alert = useAlertStore((state) => state.setMessage);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const isEditMode = mode === "edit";
+
+  const form = useForm<DesignCnstnRegistFormData>({
+    resolver: zodResolver(designCnstnRegistSchema),
+    mode: "onChange",
+    defaultValues:
+      isEditMode && initialData
+        ? mapDetailToFormData(initialData)
+        : getCreateDefaultValues(userInfo, taskSeComCd),
+  });
+
+  function buildFormPayload(
+    data: DesignCnstnRegistFormData,
+    prgrsSttsComCd: "CV" | "CT",
+  ): DesignCnstnApplySaveRequestDto {
+    const { taskSeComCd: formTaskSeComCd, ...designCnstnMngRest } = data.designCnstnMng;
+
+    return {
+      designCnstnMng: {
+        ...designCnstnMngRest,
+        taskSeComCd: formatTaskSeComCdForApi(formTaskSeComCd),
+        designCnstnDocNo: isEditMode ? initialData?.detDto?.designCnstnDocNo : undefined,
+        prgrsSttsComCd,
+      },
+      bzScaleList: data.bzScaleList,
+      esntlAtchFileList: data.esntlAtchFileList,
+    };
+  }
+
+  async function submitForm(
+    data: DesignCnstnRegistFormData,
+    prgrsSttsComCd: "CV" | "CT",
+  ): Promise<string | undefined> {
+    return designCnstnMngService.saveApply(buildFormPayload(data, prgrsSttsComCd));
+  }
+
+  async function onSave(data: DesignCnstnRegistFormData) {
+    if (isSubmitting) return;
+
+    try {
+      setIsSubmitting(true);
+      const designCnstnDocNo = await submitForm(data, "CV");
+      if (!designCnstnDocNo) return;
+
+      alert("저장되었습니다.");
+      router.push(`/design-cnstn/${designCnstnDocNo}/edit`);
+      if (isEditMode && id) {
+        queryClient.invalidateQueries({
+          queryKey: [...designCnstnMngBaseKey, "findById", id],
+        });
+      }
+    } catch (error) {
+      console.error("저장 실패:", error);
+      alert("저장 중 오류가 발생했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  async function onApply(data: DesignCnstnRegistFormData) {
+    if (isSubmitting) return;
+
+    try {
+      setIsSubmitting(true);
+      const designCnstnDocNo = await submitForm(data, "CT");
+      if (!designCnstnDocNo) return;
+
+      alert("신청 완료되었습니다.");
+      router.push(`/design-cnstn/${designCnstnDocNo}`);
+      queryClient.invalidateQueries({ queryKey: designCnstnMngBaseKey });
+      if (id) {
+        queryClient.invalidateQueries({
+          queryKey: [...designCnstnMngBaseKey, "findById", id],
+        });
+      }
+    } catch (error) {
+      console.error("신청 실패:", error);
+      alert("신청 중 오류가 발생했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  function handleApplyClick() {
+    form.handleSubmit(onApply)();
+  }
+
+  async function handleDelClick() {
+    if (isSubmitting) return;
+
+    const docNo = initialData?.detDto?.designCnstnDocNo;
+    if (!docNo) {
+      alert("문서번호가 없습니다.");
+      return;
+    }
+
+    if (!(await confirm("삭제하시겠습니까?"))) return;
+
+    try {
+      setIsSubmitting(true);
+      await designCnstnMngService.delete(docNo);
+      alert("삭제되었습니다.");
+      router.push("/design-cnstn");
+    } catch (error) {
+      console.error("삭제 실패:", error);
+      alert("삭제 중 오류가 발생했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSave)} className="mt-6 space-y-4">
+        <BasicInfoFormSection />
+        <ContactInfoFormSection fieldPrefix="designCnstnMng" />
+        <PrivacyConsentSection />
+        <BusinessScaleFormSection />
+        <AttachmentsFormSection
+          docSeComCd="CNFM"
+          fieldPrefix="designCnstnMng"
+          initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
+          initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
+        />
+
+        <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
+          <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
+            <Button
+              color="white"
+              type="button"
+              onClick={() => router.push("/design-cnstn")}
+              disabled={isSubmitting}
+            >
+              목록
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              저장
+            </Button>
+            {isEditMode && (
+              <>
+                <Button
+                  color="green"
+                  type="button"
+                  onClick={handleApplyClick}
+                  disabled={isSubmitting}
+                >
+                  신청완료
+                </Button>
+                <Button color="red" type="button" onClick={handleDelClick} disabled={isSubmitting}>
+                  삭제
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  );
+}
+
+export { DesignFormPage };
diff --git a/apps/as/src/pages/design-cnstn/ui/design-list-page.tsx b/apps/as/src/pages/design-cnstn/ui/design-list-page.tsx
new file mode 100644
index 000000000..9928a83b1
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/design-list-page.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useState } from "react";
+
+import type { PaginationState } from "@tanstack/react-table";
+
+import {
+  type CmCdAdstDstrComboResponseDto,
+  useFindGugunCombo,
+  useFindSidoCombo,
+} from "@/entities/adstdstr";
+import { CodeSelect } from "@/entities/code";
+import type { DesignCnstnMngSearchDto } from "@/entities/design-cnstn";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+
+import { DesignList } from "./design-list";
+
+const DEFAULT_PAGE_INDEX = 0;
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_SORT = "designCnstnDocNo,desc";
+const EMPTY_ADST_LIST: CmCdAdstDstrComboResponseDto[] = [];
+
+const DEFAULT_SEARCH_PARAMS: DesignCnstnMngSearchDto = {
+  bizNm: "",
+  taskSeComCd: "",
+  admdstCd: "",
+  page: DEFAULT_PAGE_INDEX,
+  size: DEFAULT_PAGE_SIZE,
+  sort: DEFAULT_SORT,
+};
+
+const ALL_SELECT_VALUE = "__ALL__";
+
+function DesignListPage() {
+  const [bizNm, setBizNm] = useState("");
+  const [taskSeComCd, setTaskSeComCd] = useState("");
+  const [sidoComCd, setSidoComCd] = useState("");
+  const [sggComCd, setSggComCd] = useState("");
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: DEFAULT_PAGE_INDEX,
+    pageSize: DEFAULT_PAGE_SIZE,
+  });
+  const [searchParams, setSearchParams] = useState<DesignCnstnMngSearchDto>(DEFAULT_SEARCH_PARAMS);
+
+  const { data: sidoData } = useFindSidoCombo();
+  const { data: gugunData } = useFindGugunCombo(sidoComCd);
+  const sidoOptions = sidoData ?? EMPTY_ADST_LIST;
+  const gugunOptions = gugunData ?? EMPTY_ADST_LIST;
+
+  const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setPagination((prev) => ({ ...prev, pageIndex: DEFAULT_PAGE_INDEX }));
+    setSearchParams({
+      ...DEFAULT_SEARCH_PARAMS,
+      bizNm,
+      taskSeComCd,
+      admdstCd: sggComCd || sidoComCd || "",
+      page: DEFAULT_PAGE_INDEX,
+      size: pagination.pageSize,
+    });
+  };
+
+  return (
+    <div className="space-y-4 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background">
+        <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
+          <div className="flex items-center gap-2">
+            <Label htmlFor="sidoComCd" className="whitespace-nowrap">
+              시도
+            </Label>
+            <Select
+              value={sidoComCd}
+              onValueChange={(value) => {
+                setSidoComCd(value === ALL_SELECT_VALUE ? "" : value);
+                setSggComCd("");
+              }}
+            >
+              <SelectTrigger id="sidoComCd" className="w-[12rem]">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL_SELECT_VALUE}>전체</SelectItem>
+                {sidoOptions.map((option) => (
+                  <SelectItem key={option.adstDstrCd} value={option.adstDstrCd}>
+                    {option.adstDstrNm}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <Label htmlFor="sggComCd" className="whitespace-nowrap">
+              시군구
+            </Label>
+            <Select
+              value={sggComCd}
+              onValueChange={(value) => setSggComCd(value === ALL_SELECT_VALUE ? "" : value)}
+              disabled={!sidoComCd}
+            >
+              <SelectTrigger id="sggComCd" className="w-[12rem]">
+                <SelectValue placeholder="전체" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL_SELECT_VALUE}>전체</SelectItem>
+                {gugunOptions.map((option) => (
+                  <SelectItem key={option.adstDstrCd} value={option.adstDstrCd}>
+                    {option.adstDstrNm}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <Label htmlFor="taskSeComCd" className="whitespace-nowrap">
+              구분
+            </Label>
+            <CodeSelect upCd="CNFM" value={taskSeComCd} onValueChange={setTaskSeComCd} />
+          </div>
+          <div className="flex w-[24rem] items-center gap-2">
+            <Label htmlFor="bizNm" className="whitespace-nowrap">
+              사업명
+            </Label>
+            <Input
+              id="bizNm"
+              value={bizNm}
+              onChange={(event) => setBizNm(event.target.value)}
+              placeholder="사업명"
+            />
+          </div>
+          <Button type="submit">조회</Button>
+        </form>
+      </section>
+
+      <DesignList
+        searchParams={searchParams}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+      />
+    </div>
+  );
+}
+
+export { DesignListPage };
diff --git a/apps/as/src/pages/design-cnstn/ui/design-list.tsx b/apps/as/src/pages/design-cnstn/ui/design-list.tsx
new file mode 100644
index 000000000..8a0986379
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/design-list.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+
+import { useDataTable, useUserStore } from "@/shared/lib";
+import {
+  type DesignCnstnMngResponseDto,
+  type DesignCnstnMngSearchDto,
+  useDesignCnstnMngPage,
+} from "@/entities/design-cnstn";
+import { TaskSePickerDialog } from "@/widgets/pbadms-sprt";
+import { Button } from "@common/components";
+
+import { formatTaskSeComCdForApi } from "../lib/design-cnstn-regist-schema";
+import { createDesignCnstnColumns } from "../model/columns";
+
+interface DesignListProps {
+  searchParams: DesignCnstnMngSearchDto;
+  pagination: PaginationState;
+  onPaginationChange: (pagination: PaginationState) => void;
+}
+
+function DesignList({ searchParams, pagination, onPaginationChange }: DesignListProps) {
+  const userInfo = useUserStore((state) => state.userInfo);
+  const router = useRouter();
+  const [isTaskSeDialogOpen, setIsTaskSeDialogOpen] = useState(false);
+
+  const queryParams = useMemo(
+    () => ({
+      bizNm: searchParams.bizNm,
+      taskSeComCd: searchParams.taskSeComCd,
+      admdstCd: searchParams.admdstCd,
+      page: pagination.pageIndex,
+      size: pagination.pageSize,
+      sort: searchParams.sort ?? "designCnstnDocNo,desc",
+    }),
+    [searchParams, pagination],
+  );
+
+  const pageQuery = useDesignCnstnMngPage(queryParams);
+  const columns = useMemo(() => createDesignCnstnColumns(), []);
+
+  const handleRowClick = (row: DesignCnstnMngResponseDto) => {
+    const canEdit = row.prgrsSttsComCd === "CV" && row.rgtr === userInfo?.userUnqId;
+
+    router.push(
+      canEdit
+        ? `/design-cnstn/${row.designCnstnDocNo}/edit`
+        : `/design-cnstn/${row.designCnstnDocNo}`,
+    );
+  };
+
+  const { tableComponent } = useDataTable({
+    query: pageQuery,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      onPaginationChange: (updater) => {
+        const next = typeof updater === "function" ? updater(pagination) : updater;
+        onPaginationChange(next);
+      },
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+      onRowClick: handleRowClick,
+    },
+  });
+
+  const handleConfirmTaskSe = (selectedCodes: string[]) => {
+    setIsTaskSeDialogOpen(false);
+    router.push(`/design-cnstn/regist?taskSeComCd=${formatTaskSeComCdForApi(selectedCodes)}`);
+  };
+
+  return (
+    <>
+      <section className="card card-border mx-0 bg-background pb-8 pt-0">
+        <div className="card-header flex items-center justify-between">
+          <h3 className="text-2xl font-semibold">설계자문 목록</h3>
+          <Button type="button" color="green" onClick={() => setIsTaskSeDialogOpen(true)}>
+            신청
+          </Button>
+        </div>
+        {tableComponent}
+      </section>
+      <TaskSePickerDialog
+        open={isTaskSeDialogOpen}
+        onOpenChange={setIsTaskSeDialogOpen}
+        onConfirm={handleConfirmTaskSe}
+        title="설계자문 신청"
+        codeUpCd="CNFM"
+      />
+    </>
+  );
+}
+
+export { DesignList };
diff --git a/apps/as/src/pages/design-cnstn/ui/design-regist-page.tsx b/apps/as/src/pages/design-cnstn/ui/design-regist-page.tsx
new file mode 100644
index 000000000..fa8130898
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/design-regist-page.tsx
@@ -0,0 +1,11 @@
+import { DesignFormPage } from "./design-form-page";
+
+interface DesignRegistPageProps {
+  taskSeComCd?: string[];
+}
+
+function DesignRegistPage({ taskSeComCd }: DesignRegistPageProps) {
+  return <DesignFormPage mode="create" taskSeComCd={taskSeComCd} />;
+}
+
+export { DesignRegistPage };
diff --git a/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx b/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx
new file mode 100644
index 000000000..aefd42317
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+
+import { useUserStore } from "@/shared/lib";
+import { useDesignCnstnMng } from "@/entities/design-cnstn";
+import { ElaprDocPrgrsStatus } from "@/entities/elapr";
+import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import { Skeleton } from "@common/components";
+
+import { needsRoleUser01AtrzResolve } from "../lib/button-config";
+import { getEditableReviewStep } from "../lib/review-step-utils";
+
+import { FloatingActionButtons } from "./components/floating-action-buttons";
+import { AttachmentsSection } from "./sections/attachments-section";
+import { BasicInfoSection } from "./sections/basic-info-section";
+import { BusinessScaleSection } from "./sections/business-scale-section";
+import { ContactInfoSection } from "./sections/contact-info-section";
+import {
+  TechReviewOpinionSection,
+  type TechReviewOpinionSectionHandle,
+} from "./sections/tech-review-opinion-section";
+
+interface DesignViewPageProps {
+  id: string;
+}
+
+function DesignViewPage({ id }: DesignViewPageProps) {
+  const userInfo = useUserStore((state) => state.userInfo);
+  const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
+  const { data, isLoading, isError } = useDesignCnstnMng(id);
+
+  const prgrsSttsComCd = data?.detDto?.prgrsSttsComCd || "";
+  const needsAtrzResolve = needsRoleUser01AtrzResolve(userInfo?.dtlInstCd, prgrsSttsComCd);
+  const { data: rvwLoginUserData, isLoading: isRvwLoginUserLoading } = useRvwMnpwMngLoginUserList(
+    {},
+    { enabled: needsAtrzResolve },
+  );
+  const atrzSeComCdList = useMemo(
+    () => rvwLoginUserData?.content?.map((item) => item.atrzSeComCd) ?? [],
+    [rvwLoginUserData],
+  );
+
+  if (isLoading) {
+    return (
+      <div className="mt-6 flex flex-col gap-4 px-6">
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem] rounded-xl" />
+          <Skeleton className="h-[16rem] rounded-xl" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem] rounded-xl" />
+          <Skeleton className="h-[16rem] rounded-xl" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem] rounded-xl" />
+          <Skeleton className="h-[32rem] rounded-xl" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !data?.detDto) {
+    return <div className="mt-6 text-[1.4rem]">상세 정보를 찾을 수 없습니다.</div>;
+  }
+
+  const detDto = data.detDto;
+  const bizSclList = data.bizSclList ?? [];
+  const esntlFileList = data.esntlFileList ?? [];
+  const etcFileList = data.etcFileList ?? [];
+  const rvwList = data.rvwList ?? [];
+
+  const editableReviewStep = getEditableReviewStep(
+    userInfo?.dtlInstCd,
+    detDto.prgrsSttsComCd || "",
+  );
+
+  return (
+    <div className="mt-6 space-y-4">
+      <BasicInfoSection det={detDto} />
+      <ContactInfoSection det={detDto} />
+      <SectionCollapsible title="결재현황">
+        <ElaprDocPrgrsStatus elaprDocNo={detDto.designCnstnDocNo} />
+      </SectionCollapsible>
+      <BusinessScaleSection bizSclList={bizSclList} />
+      <AttachmentsSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
+      <TechReviewOpinionSection
+        ref={techReviewOpinionRef}
+        rvwList={rvwList}
+        editableReviewStep={editableReviewStep}
+        atrzSeComCdList={atrzSeComCdList}
+        isAtrzLoading={needsAtrzResolve && isRvwLoginUserLoading}
+      />
+      <FloatingActionButtons
+        data={data}
+        docSeComCd="CNFM"
+        designCnstnDocNo={detDto.designCnstnDocNo}
+        prgrsSttsComCd={detDto.prgrsSttsComCd || ""}
+        dtlInstCd={userInfo?.dtlInstCd}
+        atrzSeComCdList={atrzSeComCdList}
+        isRvwLoginUserLoading={needsAtrzResolve && isRvwLoginUserLoading}
+        techReviewOpinionRef={techReviewOpinionRef}
+        opnrNm={userInfo?.userName}
+      />
+    </div>
+  );
+}
+
+export { DesignViewPage };
diff --git a/apps/as/src/pages/design-cnstn/ui/sections/attachments-section.tsx b/apps/as/src/pages/design-cnstn/ui/sections/attachments-section.tsx
new file mode 100644
index 000000000..082881231
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/sections/attachments-section.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { formatFileSize } from "@/shared/lib/file-utils";
+import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
+import type {
+  AtflMngClientResponseDto,
+  EsntlAtchFileMngTreeResponseDto,
+} from "@/entities/design-cnstn";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+
+interface AttachmentsSectionProps {
+  esntlFileList: EsntlAtchFileMngTreeResponseDto[];
+  etcFileList: AtflMngClientResponseDto[];
+}
+
+function AttachmentsSection({ esntlFileList, etcFileList }: AttachmentsSectionProps) {
+  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
+
+  return (
+    <>
+      {esntlFileList.length > 0 && (
+        <SectionCollapsible title="필수 첨부파일">
+          <div className="overflow-x-auto">
+            <Table variant="secondary">
+              <TableHeader>
+                <TableRow>
+                  <TableHead>필수 자료명</TableHead>
+                  <TableHead>파일명</TableHead>
+                  <TableHead className="w-[8rem] text-right">크기</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {esntlFileList.map((file) => (
+                  <TableRow key={file.esntlAtchFileId}>
+                    <TableCell className="pl-2 text-left">
+                      {file.esntlAtchFileNm}
+                      {file.esntlAtchYn === "Y" ? (
+                        <span className="ml-1 text-red-500">*</span>
+                      ) : null}
+                    </TableCell>
+                    <TableCell className="text-left">
+                      {file.atflCd ? (
+                        <a
+                          className="cursor-pointer text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(file.atflCd ?? "")}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {file.orgnlFileNm || "다운로드"}
+                        </a>
+                      ) : (
+                        <span className="text-gray-500">첨부없음</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">{formatFileSize(file.atflFlieSz)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </SectionCollapsible>
+      )}
+
+      <SectionCollapsible title="기타 첨부파일">
+        <div className="overflow-x-auto">
+          <Table variant="secondary">
+            <TableHeader>
+              <TableRow>
+                <TableHead>파일명</TableHead>
+                <TableHead className="w-[8rem] text-right">크기</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {etcFileList.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={2} className="py-12 text-center text-muted-foreground">
+                    등록된 기타첨부파일이 없습니다.
+                  </TableCell>
+                </TableRow>
+              ) : (
+                etcFileList.map((file) => (
+                  <TableRow key={file.atflId}>
+                    <TableCell className="text-left">
+                      {file.atflCd ? (
+                        <a
+                          className="cursor-pointer text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(file.atflCd)}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {file.orgnlFileNm || file.physFileNm || file.atflId}
+                        </a>
+                      ) : (
+                        <span>{file.orgnlFileNm || file.physFileNm || file.atflId}</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right text-gray-500">
+                      {formatFileSize(file.atflFlieSz)}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </SectionCollapsible>
+    </>
+  );
+}
+
+export { AttachmentsSection };
diff --git a/apps/as/src/pages/design-cnstn/ui/sections/basic-info-form-section.tsx b/apps/as/src/pages/design-cnstn/ui/sections/basic-info-form-section.tsx
new file mode 100644
index 000000000..124370ddc
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/sections/basic-info-form-section.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+import { useUserStore } from "@/shared/lib";
+import { Field, FieldError, FieldGroup } from "@/shared/ui/field";
+import { findCodeLabel, useCodeList } from "@/entities/code";
+import { type BnsApplyData, BnsPickerDialog } from "@/widgets/bns-picker";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import {
+  Button,
+  Input,
+  Table,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import type { DesignCnstnRegistFormData } from "../../lib/design-cnstn-regist-schema";
+
+function BasicInfoFormSection() {
+  const userInfo = useUserStore((state) => state.userInfo);
+  const { control, watch, setValue } = useFormContext<DesignCnstnRegistFormData>();
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const taskSeComCd = watch("designCnstnMng.taskSeComCd");
+  const { data: taskOptions } = useCodeList("CNFM");
+
+  function handleBnsSelect(data: BnsApplyData) {
+    setValue("designCnstnMng.bizNm", data.bizNm);
+    setValue("designCnstnMng.bizBgngYr", data.bizBgngYr);
+    setValue("designCnstnMng.bizEndYr", data.bizEndYr);
+    setValue("designCnstnMng.bizCn", data.bizCn);
+  }
+
+  const taskSeComCdLabel =
+    taskSeComCd
+      .map((code) => findCodeLabel(taskOptions, code))
+      .filter(Boolean)
+      .join(", ") || "-";
+
+  return (
+    <SectionCollapsible title="기본 정보">
+      <Table variant="secondary">
+        <colgroup>
+          <col width="15%" />
+          <col width="35%" />
+          <col width="15%" />
+          <col width="35%" />
+        </colgroup>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[20rem]" data-required>
+              사업명
+            </TableHead>
+            <TableCell colSpan={3}>
+              <Controller
+                name="designCnstnMng.bizNm"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <div className="flex gap-2">
+                      <Input
+                        {...field}
+                        id={field.name}
+                        placeholder="사업명 입력"
+                        aria-invalid={fieldState.invalid}
+                        className="w-[40rem]"
+                      />
+                      <Button type="button" onClick={() => setIsPickerOpen(true)}>
+                        사업찾기
+                      </Button>
+                    </div>
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead data-required>사업기간</TableHead>
+            <TableCell colSpan={3}>
+              <FieldGroup className="flex-row items-center gap-2">
+                <Controller
+                  name="designCnstnMng.bizBgngYr"
+                  control={control}
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid} className="w-auto">
+                      <Input
+                        {...field}
+                        id={field.name}
+                        placeholder="시작연도"
+                        className="max-w-[12rem]"
+                        aria-invalid={fieldState.invalid}
+                      />
+                      <FieldError errors={[fieldState.error]} />
+                    </Field>
+                  )}
+                />
+                <span>~</span>
+                <Controller
+                  name="designCnstnMng.bizEndYr"
+                  control={control}
+                  render={({ field, fieldState }) => (
+                    <Field data-invalid={fieldState.invalid} className="w-auto">
+                      <Input
+                        {...field}
+                        id={field.name}
+                        placeholder="종료연도"
+                        className="max-w-[12rem]"
+                        aria-invalid={fieldState.invalid}
+                      />
+                      <FieldError errors={[fieldState.error]} />
+                    </Field>
+                  )}
+                />
+              </FieldGroup>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead data-required>사업내용</TableHead>
+            <TableCell colSpan={3}>
+              <Controller
+                name="designCnstnMng.bizCn"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <Input
+                      {...field}
+                      id={field.name}
+                      placeholder="사업내용 입력"
+                      aria-invalid={fieldState.invalid}
+                    />
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead data-required>구분</TableHead>
+            <TableCell>{taskSeComCdLabel}</TableCell>
+            <TableHead>신청 지자체</TableHead>
+            <TableCell>{userInfo?.instSeNm}</TableCell>
+          </TableRow>
+        </TableHeader>
+      </Table>
+
+      <BnsPickerDialog
+        open={isPickerOpen}
+        onClose={() => setIsPickerOpen(false)}
+        onSelect={handleBnsSelect}
+      />
+    </SectionCollapsible>
+  );
+}
+
+export { BasicInfoFormSection };
diff --git a/apps/as/src/pages/design-cnstn/ui/sections/basic-info-section.tsx b/apps/as/src/pages/design-cnstn/ui/sections/basic-info-section.tsx
new file mode 100644
index 000000000..c5db62a50
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/sections/basic-info-section.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import type { DesignCnstnMngResponseDto } from "@/entities/design-cnstn";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import { Table, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+
+interface BasicInfoSectionProps {
+  det: DesignCnstnMngResponseDto;
+}
+
+function BasicInfoSection({ det }: BasicInfoSectionProps) {
+  return (
+    <SectionCollapsible title="기본 정보">
+      <Table variant="secondary">
+        <colgroup>
+          <col width="15%" />
+          <col width="35%" />
+          <col width="15%" />
+          <col width="35%" />
+        </colgroup>
+        <TableHeader>
+          <TableRow>
+            <TableHead>사업명</TableHead>
+            <TableCell>{det.bizNm || "-"}</TableCell>
+            <TableHead>사업기간</TableHead>
+            <TableCell>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead>사업내용</TableHead>
+            <TableCell colSpan={3}>{det.bizCn || "-"}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead>환경청구분</TableHead>
+            <TableCell>{det.envoSeCdNm || "-"}</TableCell>
+            <TableHead>구분</TableHead>
+            <TableCell>{det.taskSeCdNm || "-"}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead>신청지자체</TableHead>
+            <TableCell colSpan={3}>
+              {det.sido || "-"} {det.gugun || "-"}
+            </TableCell>
+          </TableRow>
+        </TableHeader>
+      </Table>
+    </SectionCollapsible>
+  );
+}
+
+export { BasicInfoSection };
diff --git a/apps/as/src/pages/design-cnstn/ui/sections/business-scale-section.tsx b/apps/as/src/pages/design-cnstn/ui/sections/business-scale-section.tsx
new file mode 100644
index 000000000..c18e6cf3e
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/sections/business-scale-section.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import type { BizSclTreeDto } from "@/entities/design-cnstn";
+import { fmtNumber, indentPx, SectionCollapsible } from "@/widgets/pbadms-sprt";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+
+interface BusinessScaleSectionProps {
+  bizSclList: BizSclTreeDto[];
+}
+
+function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
+  return (
+    <SectionCollapsible title="사업규모">
+      <div className="overflow-x-auto">
+        <Table variant="secondary">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[30rem]">구분</TableHead>
+              <TableHead>기본계획(A)</TableHead>
+              <TableHead>예산반영(B)</TableHead>
+              <TableHead>금회설계시(C)</TableHead>
+              <TableHead>증감(C-B)</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {bizSclList.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="py-12 text-center text-muted-foreground">
+                  조회된 사업규모 항목이 없습니다.
+                </TableCell>
+              </TableRow>
+            ) : (
+              bizSclList.map((node) => {
+                const pl = indentPx(node.indCnstpSeCdNm);
+                const bscPlanQty = Number(node.bscPlanQty) || 0;
+                const budgetReflct = Number(node.bgtRfltQty) || 0;
+                const tstmDesignQty = Number(node.tstmDesignQty) || 0;
+                const diff = tstmDesignQty - budgetReflct;
+
+                return (
+                  <TableRow key={node.cnstpSeCd}>
+                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                      {node.cnstpSeCdNm}
+                    </TableHead>
+                    <TableCell>
+                      <div className="text-right">{fmtNumber(bscPlanQty)}</div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-right">{fmtNumber(budgetReflct)}</div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-right">{fmtNumber(tstmDesignQty)}</div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-right">
+                        {diff > 0 ? `+${fmtNumber(diff)}` : fmtNumber(diff)}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </SectionCollapsible>
+  );
+}
+
+export { BusinessScaleSection };
diff --git a/apps/as/src/pages/design-cnstn/ui/sections/contact-info-section.tsx b/apps/as/src/pages/design-cnstn/ui/sections/contact-info-section.tsx
new file mode 100644
index 000000000..ae495450e
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/sections/contact-info-section.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import type { DesignCnstnMngResponseDto } from "@/entities/design-cnstn";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import { Table, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+
+interface ContactInfoSectionProps {
+  det: DesignCnstnMngResponseDto;
+}
+
+function ContactInfoSection({ det }: ContactInfoSectionProps) {
+  return (
+    <SectionCollapsible title="담당자 정보">
+      <Table variant="secondary">
+        <TableHeader>
+          {det.aplcntNm && (
+            <>
+              <TableRow>
+                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead>이름</TableHead>
+                <TableCell>{det.aplcntNm || "-"}</TableCell>
+                <TableHead>연락처</TableHead>
+                <TableCell>{det.aplcntMblTelno || "-"}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>소속</TableHead>
+                <TableCell>{det.aplcntOgdpNm || "-"}</TableCell>
+                <TableHead>이메일</TableHead>
+                <TableCell>{det.aplcntEmlAddr || "-"}</TableCell>
+              </TableRow>
+            </>
+          )}
+          {det.dsgnrNm && (
+            <>
+              <TableRow>
+                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead>이름</TableHead>
+                <TableCell>{det.dsgnrNm || "-"}</TableCell>
+                <TableHead>연락처</TableHead>
+                <TableCell>{det.dsgnrTelno || "-"}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableHead>소속</TableHead>
+                <TableCell>{det.dsgnrOgdpNm || "-"}</TableCell>
+                <TableHead>이메일</TableHead>
+                <TableCell>{det.dsgnrEmlAddr || "-"}</TableCell>
+              </TableRow>
+            </>
+          )}
+        </TableHeader>
+      </Table>
+    </SectionCollapsible>
+  );
+}
+
+export { ContactInfoSection };
diff --git a/apps/as/src/pages/design-cnstn/ui/sections/tech-review-opinion-section.tsx b/apps/as/src/pages/design-cnstn/ui/sections/tech-review-opinion-section.tsx
new file mode 100644
index 000000000..9c6985ffb
--- /dev/null
+++ b/apps/as/src/pages/design-cnstn/ui/sections/tech-review-opinion-section.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+
+import { PROXY_HOST } from "@/shared/config";
+import { dayjs, getDefaultFileKey, useTus } from "@/shared/lib";
+import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
+import { attachService } from "@/entities/attach";
+import type { DesignCnstnRvwOpnnResponseDto } from "@/entities/design-cnstn";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import {
+  Button,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+import type {
+  ReviewOpinionFormData,
+  ReviewOpinionGetFormDataResult,
+} from "../../lib/review-opinion-utils";
+import type { ReviewStepCode } from "../../model/view-types";
+import { REVIEW_STEP_LABELS } from "../../model/view-types";
+
+const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
+
+interface TechReviewOpinionSectionProps {
+  rvwList: DesignCnstnRvwOpnnResponseDto[];
+  editableReviewStep?: ReviewStepCode;
+  atrzSeComCdList?: string[];
+  isAtrzLoading?: boolean;
+}
+
+export interface TechReviewOpinionSectionHandle {
+  getFormData: () => ReviewOpinionGetFormDataResult | null;
+  resetForm: () => void;
+}
+
+interface TechReviewOpinionTableProps {
+  items: DesignCnstnRvwOpnnResponseDto[];
+}
+
+interface UploadedOpinionFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+const EMPTY_FORM_DATA: ReviewOpinionFormData = {
+  rvwRsltCn: "",
+  rvwRsltAnmlyYn: "",
+  atchFileGroupId: "",
+  opnrSeComCd: "",
+};
+
+function createRvwOpnnUploadKey(file: File) {
+  return `${RVW_OPNN_FILE_KEY_PREFIX}${getDefaultFileKey(file)}`;
+}
+
+function hasFormContent(formData: ReviewOpinionFormData) {
+  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
+}
+
+const TechReviewOpinionSection = forwardRef<
+  TechReviewOpinionSectionHandle,
+  TechReviewOpinionSectionProps
+>(function TechReviewOpinionSection({
+  rvwList,
+  editableReviewStep,
+  atrzSeComCdList = [],
+  isAtrzLoading = false,
+}, ref) {
+  const canWriteOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
+  const [formData, setFormData] = useState<ReviewOpinionFormData>({
+    ...EMPTY_FORM_DATA,
+    opnrSeComCd: editableReviewStep ?? "",
+  });
+  const [uploadedFile, setUploadedFile] = useState<UploadedOpinionFile | null>(null);
+
+  useEffect(() => {
+    setFormData((prev) => ({
+      ...prev,
+      opnrSeComCd: editableReviewStep ?? "",
+    }));
+  }, [editableReviewStep]);
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+
+      setFormData((prev) => ({ ...prev, atchFileGroupId: atflCd }));
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? { ...prev, atflCd, atflId } : prev));
+    },
+    onError: (_error, _file, fileKey) => {
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? null : prev));
+    },
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getFormData: () => {
+        if (!canWriteOpinion || !editableReviewStep || !hasFormContent(formData)) {
+          return null;
+        }
+
+        return {
+          formData: {
+            ...formData,
+            opnrSeComCd: editableReviewStep,
+          },
+          rvwList,
+        };
+      },
+      resetForm: () => {
+        setFormData({
+          ...EMPTY_FORM_DATA,
+          opnrSeComCd: editableReviewStep ?? "",
+        });
+        setUploadedFile(null);
+      },
+    }),
+    [canWriteOpinion, editableReviewStep, formData, rvwList],
+  );
+
+  const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
+  const hasKecoSection =
+    kecoRvwList.length > 0 || (editableReviewStep === "KECO" && canWriteOpinion);
+
+  if (!hasKecoSection) {
+    return null;
+  }
+
+  async function handleFileUpload(files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const fileKey = createRvwOpnnUploadKey(file);
+    const existingAtflCd = formData.atchFileGroupId;
+
+    setUploadedFile({ fileName: file.name, fileKey });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove() {
+    if (!uploadedFile) return;
+
+    uploads[uploadedFile.fileKey]?.abort();
+
+    if (uploadedFile.atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(uploadedFile.atflId);
+      } catch (error) {
+        console.error("검토의견 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    setUploadedFile(null);
+    setFormData((prev) => ({ ...prev, atchFileGroupId: "" }));
+  }
+
+  function renderOpinionForm(reviewStep: ReviewStepCode) {
+    if (editableReviewStep !== reviewStep || !canWriteOpinion) return null;
+
+    const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
+
+    return (
+      <div className="space-y-2">
+        <h4 className="text-xl font-semibold">검토의견 작성</h4>
+        <Table variant="secondary">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[12rem]">의견내용</TableHead>
+              <TableCell>
+                <Textarea
+                  value={formData.rvwRsltCn}
+                  onChange={(event) =>
+                    setFormData((prev) => ({ ...prev, rvwRsltCn: event.target.value }))
+                  }
+                  placeholder="의견내용을 입력하세요"
+                  rows={4}
+                  className="min-h-[8rem] !text-xl"
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>검토결과</TableHead>
+              <TableCell>
+                <FieldSet>
+                  <RadioGroup
+                    value={formData.rvwRsltAnmlyYn}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        rvwRsltAnmlyYn: value as ReviewOpinionFormData["rvwRsltAnmlyYn"],
+                      }))
+                    }
+                  >
+                    <div className="flex flex-wrap gap-4">
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-normal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="N" id={`rvw-opnn-normal-${reviewStep}`} />
+                          <span className="font-normal">정상</span>
+                        </Field>
+                      </FieldLabel>
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-abnormal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="Y" id={`rvw-opnn-abnormal-${reviewStep}`} />
+                          <span className="font-normal">이상</span>
+                        </Field>
+                      </FieldLabel>
+                    </div>
+                  </RadioGroup>
+                </FieldSet>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>첨부파일</TableHead>
+              <TableCell>
+                {uploadedFile ? (
+                  <div className="flex items-center gap-2">
+                    <span className="text-xl">{uploadedFile.fileName}</span>
+                    <Button
+                      size="icon"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        void handleFileRemove();
+                      }}
+                      disabled={uploading}
+                      className="size-8 !bg-destructive"
+                    >
+                      <i className="diveicon di-x text-xs" aria-label="삭제" />
+                    </Button>
+                  </div>
+                ) : (
+                  <label>
+                    <input
+                      type="file"
+                      className="hidden"
+                      onChange={(event) => {
+                        void handleFileUpload(event.target.files);
+                        event.target.value = "";
+                      }}
+                    />
+                    <Button size="sm" variant="outline" type="button" asChild>
+                      <span>파일 선택</span>
+                    </Button>
+                  </label>
+                )}
+              </TableCell>
+            </TableRow>
+          </TableHeader>
+        </Table>
+      </div>
+    );
+  }
+
+  return (
+    <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
+      <div className="space-y-6">
+        {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
+        {renderOpinionForm("KECO")}
+      </div>
+    </SectionCollapsible>
+  );
+});
+
+function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
+  return (
+    <div className="overflow-x-auto">
+      <Table variant="secondary">
+        <colgroup>
+          <col width="10%" />
+          <col width="55%" />
+          <col width="5%" />
+          <col width="20%" />
+          <col width="10%" />
+        </colgroup>
+        <TableHeader>
+          <TableRow>
+            <TableHead>의견자명</TableHead>
+            <TableHead>의견내용</TableHead>
+            <TableHead>검토결과</TableHead>
+            <TableHead>첨부파일</TableHead>
+            <TableHead>등록일시</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item) => (
+            <TableRow key={`${item.designCnstnDocNo}_${item.rvwOpnnSn}`}>
+              <TableCell align="center">{item.opnrNm}</TableCell>
+              <TableCell align="left">{item.rvwRsltCn || "-"}</TableCell>
+              <TableCell align="center">
+                {item.rvwRsltAnmlyYn === "Y" ? "이상" : item.rvwRsltAnmlyYn === "N" ? "정상" : "-"}
+              </TableCell>
+              <TableCell align="center">
+                {item.atchFileInfo?.atflCd ? (
+                  <a
+                    className="text-blue-600 hover:underline"
+                    href={`${PROXY_HOST}/attach-service/api/v1/atflcd/download/${item.atchFileInfo.atflCd}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {item.atchFileInfo.orgnlFileNm || "다운로드"}
+                  </a>
+                ) : (
+                  "-"
+                )}
+              </TableCell>
+              <TableCell align="center">
+                {item.regDt ? dayjs(item.regDt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+export { TechReviewOpinionSection };
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts b/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
index cc6d8d4b9..6fdba8073 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
@@ -2,7 +2,6 @@ export const FNRS_CNSLTN_VIEW_BUTTON_ACTION = {
   strg: "strg",
   aply: "aply",
   del: "del",
-  splmntCmptn: "splmntCmptn",
   fnrsCnsltnAncmnt: "fnrsCnsltnAncmnt",
   envoSbmsn: "envoSbmsn",
   rjct: "rjct",
@@ -15,7 +14,6 @@ export const FNRS_CNSLTN_VIEW_BUTTON_ACTION = {
   dmndSplmnt: "dmndSplmnt",
   atrzAprv: "atrzAprv",
   atrzRply: "atrzRply",
-  grndsChck: "grndsChck",
 } as const;
 
 export type FnrsCnsltnViewButtonAction =
@@ -33,7 +31,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, FnrsCnsltnViewBu
       FNRS_CNSLTN_VIEW_BUTTON_ACTION.aply,
       FNRS_CNSLTN_VIEW_BUTTON_ACTION.del,
     ],
-    SL: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn],
     TA: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.fnrsCnsltnAncmnt],
   },
   ROLE_USER04: {
@@ -44,10 +41,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, FnrsCnsltnViewBu
     LE: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRply, FNRS_CNSLTN_VIEW_BUTTON_ACTION.rqstTechRvw],
     TP: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRply],
   },
-  ROLE_USER01: {
-    TE: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.grndsChck],
-    SL: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn],
-  },
 };
 
 const ROLE_USER01_ATRZ_STATUS_CODES = ["ER", "TE"] as const;
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts b/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
index 276fe6e9c..8bfc0c317 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
@@ -83,6 +83,24 @@ export const fnrsCnsltnRegistSchema = z.object({
       atchFileGroupId: z.string(),
     }),
   ),
+  splmntDmndList: z.array(
+    z.object({
+      splmntDmndSn: z.number().optional(),
+      splmntArtclComCd: z.string().optional(),
+      splmntArtclCdNm: z.string().nullish(),
+      splmntDmndCn: z.string().optional(),
+      splmntDmndDt: z.string().optional(),
+      splmntDmndAtchFileGroupId: z.string().optional(),
+      splmntDmndAtchFileNm: z.string().optional(),
+      splmntCn: z.string().optional(),
+      splmntPicNm: z.string().optional(),
+      splmntCmptnDt: z.string().optional(),
+      splmntAtchFileGroupId: z.string().optional(),
+      splmntAtchFileNm: z.string().optional(),
+      splmntAtchFileAtflId: z.string().optional(),
+      cmptnYn: z.string().optional(),
+    }),
+  ),
   privacyConsent: z.enum(["Y", "N"], {
     required_error: "개인정보 수집/이용 동의는 필수입니다",
   }),
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts b/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
index d76887394..82707757d 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
@@ -34,6 +34,7 @@ export function mapDetailToFormData(data: FnrsCnsltnMngDetResponseDto): FnrsCnsl
   const bizCstList = data.bizCstList ?? [];
   const cklstResultList = data.cklstResultList;
   const esntlFileList = data.esntlFileList;
+  const splmntDmndList = data.splmntDmndList;
 
   return {
     fnrsCnsltnMng: {
@@ -94,6 +95,23 @@ export function mapDetailToFormData(data: FnrsCnsltnMngDetResponseDto): FnrsCnsl
         picRvwCn: item.picRvwCn,
       })) ?? [],
     esntlAtchFileList: mapEsntlAtchFileList(esntlFileList),
+    splmntDmndList:
+      splmntDmndList?.map((item) => ({
+        splmntDmndSn: item.splmntDmndSn,
+        splmntArtclComCd: item.splmntArtclComCd,
+        splmntArtclCdNm: item.splmntArtclCdNm,
+        splmntDmndCn: item.splmntDmndCn,
+        splmntDmndDt: item.splmntDmndDt,
+        splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId ?? "",
+        splmntDmndAtchFileNm: item.splmntDmndAtchFileInfo?.orgnlFileNm ?? "",
+        splmntCn: item.splmntCn ?? "",
+        splmntPicNm: item.splmntPicNm ?? "",
+        splmntCmptnDt: item.splmntCmptnDt ?? "",
+        splmntAtchFileGroupId: item.splmntAtchFileGroupId ?? "",
+        splmntAtchFileNm: item.splmntAtchFileInfo?.orgnlFileNm ?? "",
+        splmntAtchFileAtflId: item.splmntAtchFileInfo?.atflId ?? "",
+        cmptnYn: item.cmptnYn,
+      })) ?? [],
     privacyConsent: "Y",
   };
 }
@@ -130,6 +148,7 @@ export function getCreateDefaultValues(
     fnrsSharList: [],
     cklstResultList: [],
     esntlAtchFileList: [],
+    splmntDmndList: [],
     privacyConsent: "N",
   };
 }
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
index 3c6b5e3a6..fb34d7d0e 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
@@ -1,150 +1,167 @@
-import type {
-  BizCstItem,
-  BizCstTreeDto,
-  BizSclTreeDto,
-  BzScaleItem,
-  CklstResultItem,
-  EsntlAtchFileItem,
-  EsntlAtchFileMngTreeResponseDto,
-  FnrsCnsltnApplySaveRequestDto,
-  FnrsCnsltnMngDetResponseDto,
-  FnrsCnsltnMngResponseDto,
-  FnrsCnsltnSplmntDmndItem,
-} from "@/entities/fnrs-cnsltn";
-import { mapFnrsSharDetToFormList, toFnrsSharSaveList } from "@/widgets/pbadms-sprt";
-
-import type { ChecklistFormState, ReviewStepCode } from "../model/view-types";
-
-import { toCklstSaveDto } from "./checklist-utils";
-import { type ReviewOpinionGetFormDataResult, toRvwOpnnSaveDto } from "./review-opinion-utils";
-
-export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): BzScaleItem[] {
-  return bizSclList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      cnstpSeCd: node.cnstpSeCd,
-      bscPl: node.bscPlanQty,
-      budgetReflct: node.bgtRfltQty,
-      thtiDsgn: node.tstmDesignQty,
-    }));
-}
-
-export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): BizCstItem[] {
-  return bizCstList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      acntgSeCd: node.acntgSeCd,
-      bscPlanAmt: node.bscPlanAmt,
-      bgtRfltAmt: node.bgtRfltAmt,
-      tstmDesignAmt: node.tstmDesignAmt,
-    }));
-}
-
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): EsntlAtchFileItem[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
-export function buildSavePayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-): FnrsCnsltnApplySaveRequestDto {
-  const detDto = data.detDto;
-  if (!detDto) {
-    throw new Error("상세 정보(detDto)가 없습니다.");
-  }
-
-  const bizSclList = data.bizSclList ?? [];
-  const bizCstList = data.bizCstList ?? [];
-  const cklstResultList = data.cklstResultList ?? [];
-  const esntlFileList = data.esntlFileList ?? [];
-
-  return {
-    fnrsCnsltnMng: { ...detDto, prgrsSttsComCd },
-    bzScaleList: toBzScaleSaveDto(bizSclList),
-    bizCstList: toBizCstSaveDto(bizCstList),
-    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
-    fnrsSharList: toFnrsSharSaveList(mapFnrsSharDetToFormList(data.fnrsSharList ?? [])),
-  };
-}
-
-export function buildTechReviewReplyPayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-  techReViewSaveCd: string,
-  reviewOpinionFormData?: ReviewOpinionGetFormDataResult | null,
-  opnrNm?: string,
-): FnrsCnsltnApplySaveRequestDto {
-  return {
-    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
-    techReViewSaveCd,
-    rvwStpCd: reviewStep,
-    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
-  };
-}
-
-export function buildSupplementReqPayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  splmntDmndCn: string,
-): FnrsCnsltnApplySaveRequestDto {
-  const detDto = data.detDto;
-  if (!detDto) {
-    throw new Error("상세 정보(detDto)가 없습니다.");
-  }
-
-  const nextSn =
-    (data.splmntDmndList?.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) ?? 0) + 1;
-
-  const splmntDmndList: FnrsCnsltnSplmntDmndItem[] = [
-    ...(data.splmntDmndList ?? []),
-    {
-      splmntDmndSn: nextSn,
-      splmntDmndCn,
-      cmptnYn: "N",
-    },
-  ];
-
-  return {
-    fnrsCnsltnMng: detDto,
-    splmntDmndList,
-  };
-}
-
-export function buildSupplementSubmitPayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  checklistFormState: ChecklistFormState,
-): FnrsCnsltnApplySaveRequestDto {
-  return {
-    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
-    splmntDmndList: data.splmntDmndList,
-  };
-}
-
-export function buildTechReviewPayload(
-  det: FnrsCnsltnMngResponseDto,
-  cklstResultList: CklstResultItem[],
-): FnrsCnsltnApplySaveRequestDto {
-  return {
-    fnrsCnsltnMng: { ...det, prgrsSttsComCd: "ER" },
-    bzScaleList: [],
-    bizCstList: [],
-    cklstResultList,
-    esntlAtchFileList: [],
-  };
-}
+import type {
+  BizCstItem,
+  BizCstTreeDto,
+  BizSclTreeDto,
+  BzScaleItem,
+  CklstResultItem,
+  EsntlAtchFileItem,
+  EsntlAtchFileMngTreeResponseDto,
+  FnrsCnsltnApplySaveRequestDto,
+  FnrsCnsltnMngDetResponseDto,
+  FnrsCnsltnMngResponseDto,
+  FnrsCnsltnSplmntDmndItem,
+} from "@/entities/fnrs-cnsltn";
+import {
+  mapFnrsSharDetToFormList,
+  type SplmntDmndDialogConfirmPayload,
+  toFnrsSharSaveList,
+} from "@/widgets/pbadms-sprt";
+
+import type { ChecklistFormState, ReviewStepCode } from "../model/view-types";
+
+import { toCklstSaveDto } from "./checklist-utils";
+import { type ReviewOpinionGetFormDataResult, toRvwOpnnSaveDto } from "./review-opinion-utils";
+
+export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): BzScaleItem[] {
+  return bizSclList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      cnstpSeCd: node.cnstpSeCd,
+      bscPl: node.bscPlanQty,
+      budgetReflct: node.bgtRfltQty,
+      thtiDsgn: node.tstmDesignQty,
+    }));
+}
+
+export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): BizCstItem[] {
+  return bizCstList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      acntgSeCd: node.acntgSeCd,
+      bscPlanAmt: node.bscPlanAmt,
+      bgtRfltAmt: node.bgtRfltAmt,
+      tstmDesignAmt: node.tstmDesignAmt,
+    }));
+}
+
+export function toEsntlAtchFileSaveDto(
+  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
+): EsntlAtchFileItem[] {
+  const esntlMap = new Map<string, string>();
+
+  for (const item of esntlFileList) {
+    if (!item.esntlAtchFileId || !item.atflCd) continue;
+    esntlMap.set(item.esntlAtchFileId, item.atflCd);
+  }
+
+  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
+    esntlAtchFileId,
+    atchFileGroupId,
+  }));
+}
+
+export function buildSavePayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+): FnrsCnsltnApplySaveRequestDto {
+  const detDto = data.detDto;
+  if (!detDto) {
+    throw new Error("상세 정보(detDto)가 없습니다.");
+  }
+
+  const bizSclList = data.bizSclList ?? [];
+  const bizCstList = data.bizCstList ?? [];
+  const cklstResultList = data.cklstResultList ?? [];
+  const esntlFileList = data.esntlFileList ?? [];
+
+  return {
+    fnrsCnsltnMng: { ...detDto, prgrsSttsComCd },
+    bzScaleList: toBzScaleSaveDto(bizSclList),
+    bizCstList: toBizCstSaveDto(bizCstList),
+    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
+    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
+    fnrsSharList: toFnrsSharSaveList(mapFnrsSharDetToFormList(data.fnrsSharList ?? [])),
+  };
+}
+
+export function buildTechReviewReplyPayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+  techReViewSaveCd: string,
+  reviewOpinionFormData?: ReviewOpinionGetFormDataResult | null,
+  opnrNm?: string,
+): FnrsCnsltnApplySaveRequestDto {
+  return {
+    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
+    techReViewSaveCd,
+    rvwStpCd: reviewStep,
+    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
+  };
+}
+
+export function buildSupplementReqPayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  payload: SplmntDmndDialogConfirmPayload,
+  checklistFormState: ChecklistFormState,
+): FnrsCnsltnApplySaveRequestDto {
+  const existingItems: FnrsCnsltnSplmntDmndItem[] = (data.splmntDmndList ?? []).map((item) =>
+    toSplmntDmndSaveItem(item),
+  );
+
+  const nextSn = existingItems.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) + 1;
+
+  const newItems: FnrsCnsltnSplmntDmndItem[] = payload.items.map((item, index) => ({
+    splmntDmndSn: nextSn + index,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    cmptnYn: "N",
+  }));
+
+  return {
+    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
+    splmntDmndList: [...existingItems, ...newItems],
+  };
+}
+
+export function toSplmntDmndSaveItem(item: FnrsCnsltnSplmntDmndItem): FnrsCnsltnSplmntDmndItem {
+  return {
+    splmntDmndSn: item.splmntDmndSn,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndDt: item.splmntDmndDt,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    splmntCn: item.splmntCn,
+    splmntPicNm: item.splmntPicNm,
+    splmntCmptnDt: item.splmntCmptnDt,
+    splmntAtchFileGroupId: item.splmntAtchFileGroupId,
+    cmptnYn: item.cmptnYn,
+  };
+}
+
+export function buildSupplementSubmitPayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  checklistFormState: ChecklistFormState,
+): FnrsCnsltnApplySaveRequestDto {
+  return {
+    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
+    splmntDmndList: data.splmntDmndList,
+  };
+}
+
+export function buildTechReviewPayload(
+  det: FnrsCnsltnMngResponseDto,
+  cklstResultList: CklstResultItem[],
+): FnrsCnsltnApplySaveRequestDto {
+  return {
+    fnrsCnsltnMng: { ...det, prgrsSttsComCd: "ER" },
+    bzScaleList: [],
+    bizCstList: [],
+    cklstResultList,
+    esntlAtchFileList: [],
+  };
+}
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx
deleted file mode 100644
index a22a2e880..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  useAplnRows,
-  useDndSensors,
-  useElaprAplnPage,
-  validateAplnRow,
-} from "@/entities/elapr";
-import {
-  Button,
-  Skeleton,
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
-import { SortableAplnPickerRow } from "./sortable-apln-picker-row";
-
-interface ElaprAplnPickerGridProps {
-  elaprTmpltId: string | null;
-  onRowsChange?: (rows: ElaprAplnRow[]) => void;
-  onEditingLockedChange?: (locked: boolean) => void;
-}
-
-function ElaprAplnPickerGrid({
-  elaprTmpltId,
-  onRowsChange,
-  onEditingLockedChange,
-}: ElaprAplnPickerGridProps) {
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
-
-  const alert = useAlertStore((state) => state.setMessage);
-
-  const aplnQuery = useElaprAplnPage({
-    elaprTmpltId: elaprTmpltId ?? undefined,
-    page: 0,
-    size: 200,
-    sort: "atrzSeqNo,asc",
-  });
-
-  const {
-    rows,
-    visibleRows,
-    editingRowKey,
-    isEditingLocked,
-    addRow,
-    startEdit,
-    updateRow,
-    cancelEdit,
-    commitEdit,
-    markDeleted,
-    reorderRows,
-  } = useAplnRows({
-    elaprTmpltId,
-    serverRows: aplnQuery.data?.content,
-  });
-
-  useEffect(() => {
-    onRowsChange?.(rows);
-  }, [rows, onRowsChange]);
-
-  useEffect(() => {
-    onEditingLockedChange?.(isEditingLocked);
-  }, [isEditingLocked, onEditingLockedChange]);
-
-  const sensors = useDndSensors();
-  const isDisabled = !elaprTmpltId;
-  const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    reorderRows(String(active.id), String(over.id));
-  }
-
-  function handleRowChange(row: ElaprAplnRow, patch: Partial<ElaprAplnRow>) {
-    updateRow(row.rowKey, patch);
-  }
-
-  function handleRowSave(row: ElaprAplnRow) {
-    const fieldError = validateAplnRow(row);
-    if (fieldError) {
-      alert(fieldError);
-      return;
-    }
-
-    commitEdit(row.rowKey);
-  }
-
-  function handleRowDelete(row: ElaprAplnRow) {
-    markDeleted(row.rowKey);
-  }
-
-  function handleReviewerSelect(reviewer: ReviewerOption) {
-    if (!pickingRowKey) return;
-    updateRow(pickingRowKey, {
-      aprvrUuid: reviewer.uuid,
-      aprvrNm: reviewer.name,
-    });
-    setPickingRowKey(null);
-  }
-
-  return (
-    <section className="card card-border mx-0 min-h-[32rem] flex-1 pt-0">
-      <div className="card-header flex flex-wrap items-center justify-between gap-3">
-        <h3 className="text-2xl font-semibold">결재선 관리</h3>
-        <div className="flex flex-wrap items-center gap-3">
-          <Button
-            size="sm"
-            type="button"
-            color="green"
-            disabled={isDisabled || isEditingLocked}
-            onClick={addRow}
-          >
-            결재선 추가
-          </Button>
-        </div>
-      </div>
-
-      {aplnQuery.isPending && elaprTmpltId ? (
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-[4rem]" />
-          <Skeleton className="h-[16rem]" />
-        </div>
-      ) : !elaprTmpltId ? (
-        <p className="py-8 text-center text-lg text-muted-foreground">결재서식을 선택하세요.</p>
-      ) : visibleRows.length === 0 ? (
-        <p className="py-8 text-center text-lg text-muted-foreground">
-          등록된 결재선이 없습니다. [결재선 추가]로 결재자를 등록하세요.
-        </p>
-      ) : (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <Table className="w-full">
-            <colgroup>
-              <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
-              <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
-            </colgroup>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-10" />
-                <TableHead>결재선아이디</TableHead>
-                <TableHead>결재순서</TableHead>
-                <TableHead>결재구분</TableHead>
-                <TableHead>결재자</TableHead>
-                <TableHead>관리</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <SortableContext
-                items={visibleRows.map((r) => r.rowKey)}
-                strategy={verticalListSortingStrategy}
-              >
-                {visibleRows.map((row, index) => (
-                  <SortableAplnPickerRow
-                    key={row.rowKey}
-                    row={row}
-                    displaySeqNo={index + 1}
-                    isEditing={editingRowKey === row.rowKey}
-                    isLocked={isEditingLocked}
-                    dragDisabled={isEditingLocked || !row.atrzSeComCd}
-                    onStartEdit={() => startEdit(row.rowKey)}
-                    onSave={() => handleRowSave(row)}
-                    onCancel={cancelEdit}
-                    onDelete={() => handleRowDelete(row)}
-                    onChange={(patch) => handleRowChange(row, patch)}
-                    onPickAprvr={() => {
-                      setPickingRowKey(row.rowKey);
-                      setPickerOpen(true);
-                    }}
-                  />
-                ))}
-              </SortableContext>
-            </TableBody>
-          </Table>
-        </DndContext>
-      )}
-
-      <AprvrPickerDialog
-        open={pickerOpen}
-        onOpenChange={setPickerOpen}
-        atrzSeComCd={pickingRow?.atrzSeComCd ?? ""}
-        onSelect={handleReviewerSelect}
-      />
-    </section>
-  );
-}
-
-export { ElaprAplnPickerGrid };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
deleted file mode 100644
index a6737ec3e..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
+++ /dev/null
@@ -1,419 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { useQueryClient } from "@tanstack/react-query";
-import { AxiosError } from "axios";
-
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
-import {
-  buildPrgrsSttsSavePayload,
-  elaprPrgrsSttsService,
-  findCurrentUserPendingApprovalRequest,
-  hasUnsavedPrgrsSttsChanges,
-  isPrgrsSttsRowEditable,
-  useDndSensors,
-  useElaprDocPrgrsByDocNo,
-  usePrgrsSttsRows,
-  useSaveElaprPrgrsStts,
-  validateAllPrgrsSttsRows,
-  validateAtrzOrder,
-  validatePrgrsSttsRow,
-} from "@/entities/elapr";
-import {
-  Button,
-  Checkbox,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Label,
-  Skeleton,
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from "@common/components";
-
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
-import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
-
-interface ElaprApprovalDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  elaprDocNo: string;
-  currentUserUuid: string;
-  onSuccess: () => void;
-}
-
-const UNSAVED_PRGRS_STTS_MESSAGE = "결재선 변경 이력이 있습니다.\n결재선 저장을 해 주세요.";
-
-function ElaprApprovalDialog({
-  open,
-  onOpenChange,
-  elaprDocNo,
-  currentUserUuid,
-  onSuccess,
-}: ElaprApprovalDialogProps) {
-  const queryClient = useQueryClient();
-  const alert = useAlertStore((state) => state.setMessage);
-  const [rjctRsn, setRjctRsn] = useState("");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
-  const [finalApprovalYn, setFinalApprovalYn] = useState(false);
-
-  const { data: elaprDocPrgrsList, isLoading } = useElaprDocPrgrsByDocNo(open ? elaprDocNo : null);
-
-  const elaprDmndId = elaprDocPrgrsList?.[0]?.elaprDmndId;
-
-  const {
-    rows,
-    visibleRows,
-    editingRowKey,
-    isEditingLocked,
-    addRow,
-    startEdit,
-    updateRow,
-    cancelEdit,
-    commitEdit,
-    markDeleted,
-    reorderRows,
-  } = usePrgrsSttsRows({
-    serverRows: elaprDocPrgrsList,
-    elaprDmndId,
-  });
-
-  const savePrgrsSttsMutation = useSaveElaprPrgrsStts();
-  const sensors = useDndSensors();
-
-  const currentUserPrgrs = findCurrentUserPendingApprovalRequest(
-    elaprDocPrgrsList,
-    currentUserUuid,
-  );
-  const canApprove = Boolean(currentUserPrgrs?.elaprPrgrsId);
-
-  const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
-  const isBusy = isProcessing || savePrgrsSttsMutation.isPending;
-  const isPrgrsSttsUnsaved = hasUnsavedPrgrsSttsChanges(rows, elaprDocPrgrsList ?? []);
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    reorderRows(String(active.id), String(over.id));
-  }
-
-  function handleRowSave(rowKey: string) {
-    const row = rows.find((r) => r.rowKey === rowKey);
-    if (!row) return;
-
-    const fieldError = validatePrgrsSttsRow(row);
-    if (fieldError) {
-      alert(fieldError);
-      return;
-    }
-
-    commitEdit(rowKey);
-  }
-
-  function handleReviewerSelect(reviewer: ReviewerOption) {
-    if (!pickingRowKey) return;
-    updateRow(pickingRowKey, {
-      aprvrUuid: reviewer.uuid,
-      aprvrNm: reviewer.name,
-      ognzNm: reviewer.deptNm,
-    });
-    setPickingRowKey(null);
-  }
-
-  function assertPrgrsSttsSaved(): boolean {
-    if (isEditingLocked) {
-      alert(UNSAVED_PRGRS_STTS_MESSAGE);
-      return false;
-    }
-
-    if (isPrgrsSttsUnsaved) {
-      alert(UNSAVED_PRGRS_STTS_MESSAGE);
-      return false;
-    }
-
-    return true;
-  }
-
-  async function handleSavePrgrsStts() {
-    if (!elaprDmndId) {
-      alert("결재 요청 정보가 없습니다.");
-      return;
-    }
-
-    const validationError = validateAllPrgrsSttsRows(rows, isEditingLocked);
-    if (validationError) {
-      alert(validationError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(rows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const payload = buildPrgrsSttsSavePayload(rows, elaprDmndId, elaprDocPrgrsList ?? []);
-    if (payload.length === 0) {
-      alert("변경된 결재선이 없습니다.");
-      return;
-    }
-
-    setIsProcessing(true);
-    try {
-      await savePrgrsSttsMutation.mutateAsync(payload);
-      alert("결재선이 저장되었습니다.");
-      await queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", elaprDocNo],
-      });
-      onSuccess();
-    } catch (error: unknown) {
-      let errorMessage = "결재선 저장 중 오류가 발생했습니다.";
-      if (error instanceof AxiosError) {
-        errorMessage = error.response?.data?.message ?? errorMessage;
-      }
-      alert(errorMessage);
-    } finally {
-      setIsProcessing(false);
-    }
-  }
-
-  async function handleApprove() {
-    if (!currentUserPrgrs?.elaprPrgrsId) return;
-    if (!assertPrgrsSttsSaved()) return;
-
-    setIsProcessing(true);
-    try {
-      await elaprPrgrsSttsService.process(currentUserPrgrs.elaprPrgrsId, {
-        atrzPrgrsSttsComCd: "ATRZ_PRGRS_003",
-        finalApprovalYn,
-      });
-      alert("결재가 완료되었습니다.");
-      queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", elaprDocNo],
-      });
-      onSuccess();
-      onOpenChange(false);
-    } catch (error: unknown) {
-      let errorMessage = "";
-      if (error instanceof AxiosError) {
-        errorMessage = error.response?.data?.message ?? "";
-      } else {
-        errorMessage = "결재 처리 중 오류가 발생했습니다.";
-      }
-      alert(errorMessage);
-    } finally {
-      setIsProcessing(false);
-    }
-  }
-
-  async function handleReject() {
-    if (!currentUserPrgrs?.elaprPrgrsId) return;
-    if (!rjctRsn.trim()) {
-      alert("반려 사유를 입력해주세요.");
-      return;
-    }
-    if (!assertPrgrsSttsSaved()) return;
-
-    setIsProcessing(true);
-    try {
-      await elaprPrgrsSttsService.process(currentUserPrgrs.elaprPrgrsId, {
-        atrzPrgrsSttsComCd: "ATRZ_PRGRS_004",
-        rjctRsn: rjctRsn.trim(),
-      });
-      alert("반려 처리가 완료되었습니다.");
-      queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", elaprDocNo],
-      });
-      onSuccess();
-      onOpenChange(false);
-    } catch (error: unknown) {
-      let errorMessage = "";
-      if (error instanceof AxiosError) {
-        errorMessage = error.response?.data?.message ?? "";
-      } else {
-        errorMessage = "반려 처리 중 오류가 발생했습니다.";
-      }
-      alert(errorMessage);
-    } finally {
-      setIsProcessing(false);
-    }
-  }
-
-  function handleClose() {
-    setRjctRsn("");
-    setPickingRowKey(null);
-    onOpenChange(false);
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-[72rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>전자결재</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-6">
-          <div>
-            <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-              <h4 className="text-xl font-semibold">결재 진행 단계</h4>
-              <div className="flex items-center gap-2">
-                <Button
-                  size="sm"
-                  type="button"
-                  color="white"
-                  disabled={!elaprDmndId || isEditingLocked || isBusy}
-                  onClick={addRow}
-                >
-                  결재선 추가
-                </Button>
-                {elaprDmndId && (
-                  <Button
-                    size="sm"
-                    type="button"
-                    onClick={handleSavePrgrsStts}
-                    disabled={!isPrgrsSttsUnsaved || isEditingLocked || isBusy}
-                  >
-                    결재선 저장
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {isLoading ? (
-              <div className="space-y-3">
-                <Skeleton className="h-12 w-full" />
-                <Skeleton className="h-32 w-full" />
-              </div>
-            ) : visibleRows.length === 0 ? (
-              <div className="py-8 text-center text-gray-500">
-                {elaprDmndId
-                  ? "등록된 결재선이 없습니다. [결재선 추가]로 결재자를 등록하세요."
-                  : "결재 정보가 없습니다."}
-              </div>
-            ) : (
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-              >
-                <Table className="w-full">
-                  <colgroup>
-                    <col width="8%" />
-                    <col width="10%" />
-                    <col width="15%" />
-                    <col width="35%" />
-                    <col width="12%" />
-                    <col width="20%" />
-                  </colgroup>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10" />
-                      <TableHead>결재순서</TableHead>
-                      <TableHead>결재구분</TableHead>
-                      <TableHead>결재자</TableHead>
-                      <TableHead>결재상태</TableHead>
-                      <TableHead>관리</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    <SortableContext
-                      items={visibleRows.map((r) => r.rowKey)}
-                      strategy={verticalListSortingStrategy}
-                    >
-                      {visibleRows.map((row, index) => (
-                        <SortablePrgrsSttsRow
-                          key={row.rowKey}
-                          row={row}
-                          displaySeqNo={index + 1}
-                          isEditing={editingRowKey === row.rowKey}
-                          isLocked={isEditingLocked}
-                          dragDisabled={
-                            isEditingLocked || !isPrgrsSttsRowEditable(row) || !row.atrzSeComCd
-                          }
-                          onStartEdit={() => startEdit(row.rowKey)}
-                          onSave={() => handleRowSave(row.rowKey)}
-                          onCancel={cancelEdit}
-                          onDelete={() => markDeleted(row.rowKey)}
-                          onChange={(patch) => updateRow(row.rowKey, patch)}
-                          onPickAprvr={() => {
-                            setPickingRowKey(row.rowKey);
-                            setPickerOpen(true);
-                          }}
-                        />
-                      ))}
-                    </SortableContext>
-                  </TableBody>
-                </Table>
-              </DndContext>
-            )}
-          </div>
-
-          {canApprove && (
-            <div>
-              <h4 className="mb-3 text-xl font-semibold">반려 의견</h4>
-              <Textarea
-                value={rjctRsn}
-                onChange={(event) => setRjctRsn(event.target.value)}
-                placeholder="반려 시 사유를 입력하세요"
-                rows={4}
-                className="!text-xl"
-              />
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <div className="flex w-full items-center justify-between">
-            <Button type="button" color="white" onClick={handleClose} disabled={isBusy}>
-              취소
-            </Button>
-            {canApprove && (
-              <div className="flex items-center gap-2">
-                <div className="mr-2 flex items-center gap-2">
-                  <Checkbox
-                    id="all-approve"
-                    checked={finalApprovalYn}
-                    onCheckedChange={(checked) => setFinalApprovalYn(checked === true)}
-                  />
-                  <Label htmlFor="all-approve" className="text-xl">
-                    전결
-                  </Label>
-                </div>
-                <Button onClick={handleApprove} disabled={isBusy}>
-                  결재
-                </Button>
-                <Button color="red" onClick={handleReject} disabled={isBusy}>
-                  반려
-                </Button>
-              </div>
-            )}
-          </div>
-        </DialogFooter>
-      </DialogContent>
-
-      <AprvrPickerDialog
-        open={pickerOpen}
-        onOpenChange={setPickerOpen}
-        atrzSeComCd={pickingRow?.atrzSeComCd ?? ""}
-        onSelect={handleReviewerSelect}
-      />
-    </Dialog>
-  );
-}
-
-export { ElaprApprovalDialog };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
index bf3d02823..b4461ab1b 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
@@ -11,8 +11,11 @@ import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import {
   buildElaprPrgrsSttsListFromAplnRows,
+  ElaprApprovalDialog,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
   hasCurrentUserPendingApprovalRequest,
   useElaprDocPrgrsByDocNo,
 } from "@/entities/elapr";
@@ -23,8 +26,7 @@ import {
   type FnrsCnsltnMngDetResponseDto,
   fnrsCnsltnMngService,
 } from "@/entities/fnrs-cnsltn";
-import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import { TextInputDialog } from "@/widgets/pbadms-sprt";
+import { SplmntDmndDialog, type SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
 import { Button } from "@common/components";
 
 import {
@@ -37,24 +39,20 @@ import { computeReviewStepChecklistProgress } from "../../lib/checklist-utils";
 import {
   buildSavePayload,
   buildSupplementReqPayload,
-  buildSupplementSubmitPayload,
   buildTechReviewReplyPayload,
+  toSplmntDmndSaveItem,
 } from "../../lib/save-payload-utils";
 import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
-import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-import {
-  type ElaprTmpltPickerConfirmPayload,
-  ElaprTmpltPickerDialog,
-} from "./elapr-tmplt-picker-dialog";
-
 interface FloatingActionButtonsProps {
   data: FnrsCnsltnMngDetResponseDto;
   docSeComCd: string;
   fnrsCnsltnDocNo: string;
   prgrsSttsComCd: string;
   dtlInstCd: string | undefined;
+  atrzSeComCdList: string[];
+  isRvwLoginUserLoading: boolean;
   checklistFormState: ChecklistFormState;
   techReviewOpinionRef?: React.RefObject<TechReviewOpinionSectionHandle | null>;
   opnrNm?: string;
@@ -68,6 +66,8 @@ function FloatingActionButtons({
   fnrsCnsltnDocNo,
   prgrsSttsComCd,
   dtlInstCd,
+  atrzSeComCdList,
+  isRvwLoginUserLoading,
   checklistFormState,
   techReviewOpinionRef,
   opnrNm,
@@ -85,18 +85,9 @@ function FloatingActionButtons({
 
   const needsAtrzResolve = needsRoleUser01AtrzResolve(dtlInstCd, prgrsSttsComCd);
   const needsTeApprovalCheck = needsAtrzResolve && prgrsSttsComCd === "TE";
-  const { data: rvwLoginUserData, isLoading: isRvwLoginUserLoading } = useRvwMnpwMngLoginUserList(
-    {},
-    { enabled: needsAtrzResolve },
-  );
   const { data: elaprDocPrgrsList = [], isLoading: isElaprDocPrgrsLoading } =
     useElaprDocPrgrsByDocNo(needsTeApprovalCheck ? docNo : null);
 
-  const atrzSeComCdList = useMemo(
-    () => rvwLoginUserData?.content?.map((item) => item.atrzSeComCd) ?? [],
-    [rvwLoginUserData],
-  );
-
   const hasPendingApprovalRequest = hasCurrentUserPendingApprovalRequest(
     elaprDocPrgrsList,
     userInfo?.userUnqId,
@@ -222,15 +213,6 @@ function FloatingActionButtons({
     router.push("/fnrs-cnsltn");
   }
 
-  async function handleSplmntCmptnClick() {
-    const payload = buildSupplementSubmitPayload(data, checklistFormState);
-    await executeAction({
-      action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn,
-      request: payload,
-      successMessage: "보완완료 처리되었습니다.",
-    });
-  }
-
   async function handleFnrsCnsltnAncmntClick() {
     const payload: DocPrgrsUpdateRequestDto = {
       docNo,
@@ -383,15 +365,18 @@ function FloatingActionButtons({
       return;
     }
 
-    const payload = buildTechReviewReplyPayload(
-      data,
-      checklistFormState,
-      "KECO",
-      "TE",
-      "SV",
-      getReviewOpinionFormData(),
-      opnrNm,
-    );
+    const payload = {
+      ...buildTechReviewReplyPayload(
+        data,
+        checklistFormState,
+        "KECO",
+        "TE",
+        "SV",
+        getReviewOpinionFormData(),
+        opnrNm,
+      ),
+      splmntDmndList: (data.splmntDmndList ?? []).map(toSplmntDmndSaveItem),
+    };
 
     await executeAction({
       action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwCmptn,
@@ -405,12 +390,12 @@ function FloatingActionButtons({
     setActiveDialog("dmndSplmnt");
   }
 
-  async function handleDmndSplmntConfirm(splmntDmndCn: string) {
+  async function handleDmndSplmntConfirm(payload: SplmntDmndDialogConfirmPayload) {
     setActiveDialog(null);
-    const payload = buildSupplementReqPayload(data, splmntDmndCn);
+    const requestPayload = buildSupplementReqPayload(data, payload, checklistFormState);
     await executeAction({
       action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.dmndSplmnt,
-      request: payload,
+      request: requestPayload,
       successMessage: "보완요청이 처리되었습니다.",
     });
   }
@@ -442,11 +427,6 @@ function FloatingActionButtons({
               삭제
             </Button>
           )}
-          {shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn) && (
-            <Button onClick={handleSplmntCmptnClick} disabled={isProcessing}>
-              보완완료
-            </Button>
-          )}
           {shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.fnrsCnsltnAncmnt) && (
             <Button onClick={handleFnrsCnsltnAncmntClick} disabled={isProcessing}>
               재원협의 고시
@@ -513,14 +493,13 @@ function FloatingActionButtons({
       <ElaprTmpltPickerDialog
         open={activeDialog === "elaprTmplt"}
         onClose={() => setActiveDialog(null)}
+        docSeComCd={docSeComCd}
         onConfirm={handleElaprTmpltConfirm}
       />
 
-      <TextInputDialog
+      <SplmntDmndDialog
         open={activeDialog === "dmndSplmnt"}
         onOpenChange={() => setActiveDialog(null)}
-        title="보완요청 내용 입력"
-        placeholder="보완요청 내용을 입력하세요."
         isSubmitting={isProcessing}
         onConfirm={handleDmndSplmntConfirm}
       />
@@ -562,19 +541,6 @@ async function handleDel(context: ActionHandlerContext): Promise<void> {
   }
 }
 
-async function handleSplmntCmptn(
-  context: ActionHandlerContext<FnrsCnsltnApplySaveRequestDto>,
-): Promise<void> {
-  try {
-    const docNo = context.data.detDto?.fnrsCnsltnDocNo;
-    if (!docNo) throw new Error("문서번호가 없습니다.");
-    await fnrsCnsltnMngService.submitSupplement(docNo, context.request);
-    context.onSuccess?.();
-  } catch (error) {
-    context.onError?.(error as Error);
-  }
-}
-
 async function handleChangePrgrsSttsComCd(
   context: ActionHandlerContext<DocPrgrsUpdateRequestDto>,
 ): Promise<void> {
@@ -634,16 +600,10 @@ async function handleAtrzRply(context: ActionHandlerContext): Promise<void> {
   context.onSuccess?.();
 }
 
-async function handleGrndsChck(context: ActionHandlerContext): Promise<void> {
-  // TODO: 현장점검 등록 API 호출
-  context.onSuccess?.();
-}
-
 const buttonActionHandlers: Record<FnrsCnsltnViewButtonAction, ActionHandler> = {
   strg: handleSaveApply,
   aply: handleSaveApply,
   del: handleDel,
-  splmntCmptn: handleSplmntCmptn,
   fnrsCnsltnAncmnt: handleChangePrgrsSttsComCd,
   envoSbmsn: handleChangePrgrsSttsComCd,
   rjct: handleChangePrgrsSttsComCd,
@@ -656,7 +616,6 @@ const buttonActionHandlers: Record<FnrsCnsltnViewButtonAction, ActionHandler> =
   dmndSplmnt: handleDmndSplmnt,
   atrzAprv: handleAtrzAprv,
   atrzRply: handleAtrzRply,
-  grndsChck: handleGrndsChck,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx
deleted file mode 100644
index 46af147ca..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { MoveVertical } from "lucide-react";
-
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
-import type { ElaprAplnRow } from "@/entities/elapr";
-import { Button, TableCell, TableRow } from "@common/components";
-
-interface SortableAplnPickerRowProps {
-  row: ElaprAplnRow;
-  displaySeqNo: number;
-  isEditing: boolean;
-  isLocked: boolean;
-  dragDisabled: boolean;
-  onStartEdit: () => void;
-  onSave: () => void;
-  onCancel: () => void;
-  onDelete: () => void;
-  onChange: (patch: Partial<ElaprAplnRow>) => void;
-  onPickAprvr: () => void;
-}
-
-function SortableAplnPickerRow({
-  row,
-  displaySeqNo,
-  isEditing,
-  isLocked,
-  dragDisabled,
-  onStartEdit,
-  onSave,
-  onCancel,
-  onDelete,
-  onChange,
-  onPickAprvr,
-}: SortableAplnPickerRowProps) {
-  const { data: atrzSeCodes } = useCodeList("ATRZSE");
-
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: row.rowKey,
-    disabled: dragDisabled,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.6 : 1,
-  };
-
-  const rowDisabled = isLocked && !isEditing;
-  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
-
-  return (
-    <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
-      <TableCell align="center" className="w-10">
-        <Button
-          type="button"
-          size="icon"
-          className="cursor-grab !bg-transparent text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
-          disabled={dragDisabled}
-          {...attributes}
-          {...listeners}
-          aria-label="순서 변경"
-        >
-          <MoveVertical className="!size-6" />
-        </Button>
-      </TableCell>
-      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
-      <TableCell align="center">{displaySeqNo}</TableCell>
-      <TableCell align="center">
-        {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
-            value={row.atrzSeComCd ?? ""}
-            onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
-            }
-            placeholder="결재구분"
-          />
-        ) : (
-          atrzSeLabel || "-"
-        )}
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex items-center justify-center gap-4">
-          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
-          {isEditing && (
-            <Button type="button" size="sm" onClick={onPickAprvr}>
-              선택
-            </Button>
-          )}
-        </div>
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex justify-center gap-2">
-          {isEditing ? (
-            <>
-              <Button type="button" size="sm" onClick={onSave}>
-                확인
-              </Button>
-              <Button type="button" size="sm" color="white" onClick={onCancel}>
-                취소
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button
-                type="button"
-                size="sm"
-                color="white"
-                disabled={rowDisabled}
-                onClick={onStartEdit}
-              >
-                수정
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                color="gray"
-                disabled={rowDisabled}
-                onClick={onDelete}
-              >
-                삭제
-              </Button>
-            </>
-          )}
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export { SortableAplnPickerRow };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
index ddcd2074f..76c42f38f 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
@@ -11,6 +11,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import { useAcntgSeMngTree } from "@/entities/acntg";
 import {
+  type FnrsCnsltnApplySaveRequestDto,
   fnrsCnsltnMngBaseKey,
   type FnrsCnsltnMngDetResponseDto,
   fnrsCnsltnMngService,
@@ -28,6 +29,7 @@ import {
   isFormChecklistComplete,
   PrivacyConsentSection,
   recalculateFnrsSharTotals,
+  SplmntDmndFormSection,
   toFnrsSharSaveList,
   validateBizCstSharBalance,
 } from "@/widgets/pbadms-sprt";
@@ -56,6 +58,7 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
   const alert = useAlertStore((state) => state.setMessage);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const isEditMode = mode === "edit";
+  const isSplmntPrgrsStts = initialData?.detDto?.prgrsSttsComCd === "SL";
 
   const { data: masterSharTree = [] } = useFnrsSharSeMngTree();
   const { data: acntgTree = [] } = useAcntgSeMngTree();
@@ -73,10 +76,10 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
         : getCreateDefaultValues(userInfo, taskSeComCd),
   });
 
-  async function submitForm(
+  function buildFormPayload(
     data: FnrsCnsltnRegistFormData,
-    prgrsSttsComCd: "SV" | "ST",
-  ): Promise<string | undefined> {
+    prgrsSttsComCd: "SV" | "ST" | "TE",
+  ): FnrsCnsltnApplySaveRequestDto | undefined {
     const withTotals = recalculateFnrsSharTotals(data.fnrsSharList, sharItems);
     const validationMessage = validateBizCstSharBalance(
       data.bizCstList,
@@ -86,12 +89,12 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
     );
     if (validationMessage) {
       alert(validationMessage);
-      return;
+      return undefined;
     }
 
     const { taskSeComCd: formTaskSeComCd, ...fnrsCnsltnMngRest } = data.fnrsCnsltnMng;
 
-    const payload = {
+    return {
       fnrsCnsltnMng: {
         ...fnrsCnsltnMngRest,
         taskSeComCd: formatTaskSeComCdForApi(formTaskSeComCd),
@@ -106,11 +109,71 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
         selected: item.selected ?? undefined,
       })),
       esntlAtchFileList: data.esntlAtchFileList,
+      splmntDmndList: data.splmntDmndList.map(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ({ splmntAtchFileNm, splmntAtchFileAtflId, splmntDmndAtchFileNm, ...item }) => ({
+          ...item,
+          ...(prgrsSttsComCd === "TE" ? { cmptnYn: "Y" } : null),
+        }),
+      ),
     };
+  }
 
+  async function submitForm(
+    data: FnrsCnsltnRegistFormData,
+    prgrsSttsComCd: "SV" | "ST",
+  ): Promise<string | undefined> {
+    const payload = buildFormPayload(data, prgrsSttsComCd);
+    if (!payload) return undefined;
     return fnrsCnsltnMngService.saveApply(payload);
   }
 
+  async function submitSupplementForm(data: FnrsCnsltnRegistFormData): Promise<string | undefined> {
+    const docNo = initialData?.detDto?.fnrsCnsltnDocNo;
+    if (!docNo) return undefined;
+
+    const payload = buildFormPayload(data, "TE");
+    if (!payload) return undefined;
+
+    return fnrsCnsltnMngService.submitSupplement(docNo, payload);
+  }
+
+  async function onSplmntCmptn(data: FnrsCnsltnRegistFormData) {
+    if (isSubmitting) return;
+
+    const hasEmptySplmntCn = data.splmntDmndList?.some(
+      (item) => !item.splmntCn || !item.splmntCn.trim(),
+    );
+    if (hasEmptySplmntCn) {
+      alert("보완요청내용이 있습니다. 보완완료내용을 입력해 주세요.");
+      return;
+    }
+
+    const docNo = initialData?.detDto?.fnrsCnsltnDocNo;
+    if (!docNo) {
+      alert("문서번호가 없습니다.");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const result = await submitSupplementForm(data);
+      if (!result) return;
+
+      alert("보완완료 처리되었습니다.");
+      router.push(`/fnrs-cnsltn/${docNo}`);
+      queryClient.invalidateQueries({ queryKey: fnrsCnsltnMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...fnrsCnsltnMngBaseKey, "findById", docNo],
+      });
+    } catch (error) {
+      console.error("보완완료 실패:", error);
+      alert("보완완료 처리 중 오류가 발생했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
   async function onSave(data: FnrsCnsltnRegistFormData) {
     if (isSubmitting) return;
 
@@ -210,6 +273,7 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
           initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
           initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
         />
+        <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
 
         <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
           <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
@@ -221,23 +285,40 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
             >
               목록
             </Button>
-            <Button type="submit" disabled={isSubmitting}>
-              저장
-            </Button>
-            {isEditMode && (
+            {!isSplmntPrgrsStts ? (
               <>
-                <Button
-                  color="green"
-                  type="button"
-                  onClick={handleApplyClick}
-                  disabled={isSubmitting}
-                >
-                  신청완료
-                </Button>
-                <Button color="red" type="button" onClick={handleDelClick} disabled={isSubmitting}>
-                  삭제
+                <Button type="submit" disabled={isSubmitting}>
+                  저장
                 </Button>
+                {isEditMode && (
+                  <>
+                    <Button
+                      color="green"
+                      type="button"
+                      onClick={handleApplyClick}
+                      disabled={isSubmitting}
+                    >
+                      신청완료
+                    </Button>
+                    <Button
+                      color="red"
+                      type="button"
+                      onClick={handleDelClick}
+                      disabled={isSubmitting}
+                    >
+                      삭제
+                    </Button>
+                  </>
+                )}
               </>
+            ) : (
+              <Button
+                type="button"
+                onClick={form.handleSubmit(onSplmntCmptn)}
+                disabled={isSubmitting}
+              >
+                보완완료
+              </Button>
             )}
           </div>
         </div>
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
index 3e955ee0f..3ec2522d1 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
@@ -1,11 +1,15 @@
 "use client";
 
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 
 import { useUserStore } from "@/shared/lib";
+import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useFnrsCnsltnMng } from "@/entities/fnrs-cnsltn";
+import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
+import { SectionCollapsible, SupplementDemandSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
+import { needsRoleUser01AtrzResolve } from "../lib/button-config";
 import { getEditableReviewStep } from "../lib/review-step-utils";
 import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-checklist-form-state";
 
@@ -17,7 +21,6 @@ import { BusinessScaleSection } from "./sections/business-scale-section";
 import { ChecklistSection } from "./sections/checklist-section";
 import { ContactInfoSection } from "./sections/contact-info-section";
 import { FnrsSharSection } from "./sections/fnrs-shar-section";
-import { SupplementDemandSection } from "./sections/supplement-demand-section";
 import {
   TechReviewOpinionSection,
   type TechReviewOpinionSectionHandle,
@@ -34,6 +37,17 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
   const { formState: checklistFormState, setFormState: setChecklistFormState } =
     useChecklistFormState(data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST);
 
+  const prgrsSttsComCd = data?.detDto?.prgrsSttsComCd || "";
+  const needsAtrzResolve = needsRoleUser01AtrzResolve(userInfo?.dtlInstCd, prgrsSttsComCd);
+  const { data: rvwLoginUserData, isLoading: isRvwLoginUserLoading } = useRvwMnpwMngLoginUserList(
+    {},
+    { enabled: needsAtrzResolve },
+  );
+  const atrzSeComCdList = useMemo(
+    () => rvwLoginUserData?.content?.map((item) => item.atrzSeComCd) ?? [],
+    [rvwLoginUserData],
+  );
+
   if (isLoading) {
     return (
       <div className="mt-6 flex flex-col gap-4 px-6">
@@ -76,6 +90,9 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
     <div className="mt-6 space-y-4">
       <BasicInfoSection det={detDto} />
       <ContactInfoSection det={detDto} />
+      <SectionCollapsible title="결재현황">
+        <ElaprDocPrgrsStatus elaprDocNo={detDto.fnrsCnsltnDocNo} />
+      </SectionCollapsible>
       <BusinessScaleSection bizSclList={bizSclList} />
       <BusinessCostSection bizCstList={bizCstList} />
       <FnrsSharSection fnrsSharList={fnrsSharList} />
@@ -92,6 +109,8 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
         ref={techReviewOpinionRef}
         rvwList={rvwList}
         editableReviewStep={editableReviewStep}
+        atrzSeComCdList={atrzSeComCdList}
+        isAtrzLoading={needsAtrzResolve && isRvwLoginUserLoading}
       />
       <FloatingActionButtons
         data={data}
@@ -99,6 +118,8 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
         fnrsCnsltnDocNo={detDto.fnrsCnsltnDocNo}
         prgrsSttsComCd={detDto.prgrsSttsComCd || ""}
         dtlInstCd={userInfo?.dtlInstCd}
+        atrzSeComCdList={atrzSeComCdList}
+        isRvwLoginUserLoading={needsAtrzResolve && isRvwLoginUserLoading}
         checklistFormState={checklistFormState}
         techReviewOpinionRef={techReviewOpinionRef}
         opnrNm={userInfo?.userName}
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-section.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-section.tsx
index 7015a56d5..939af68fd 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-section.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-section.tsx
@@ -12,6 +12,12 @@ function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
       <Table variant="secondary">
+        <colgroup>
+          <col width="15%" />
+          <col width="35%" />
+          <col width="15%" />
+          <col width="35%" />
+        </colgroup>
         <TableHeader>
           <TableRow>
             <TableHead>사업명</TableHead>
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/sections/supplement-demand-section.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/sections/supplement-demand-section.tsx
deleted file mode 100644
index 339b803b1..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/sections/supplement-demand-section.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import { dayjs } from "@/shared/lib";
-import type { FnrsCnsltnSplmntDmndResponseDto } from "@/entities/fnrs-cnsltn";
-import { SectionCollapsible } from "@/widgets/pbadms-sprt";
-import {
-  Badge,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-interface SupplementDemandSectionProps {
-  splmntDmndList: FnrsCnsltnSplmntDmndResponseDto[];
-}
-
-function SupplementDemandSection({ splmntDmndList }: SupplementDemandSectionProps) {
-  if (splmntDmndList.length === 0) return null;
-
-  return (
-    <SectionCollapsible title="보완요청">
-      <Table variant="secondary">
-        <TableHeader>
-          <TableRow>
-            <TableHead className="w-[8rem]">항목</TableHead>
-            <TableHead>보완요청 내용</TableHead>
-            <TableHead>보완 내용</TableHead>
-            <TableHead className="w-[8rem]">완료여부</TableHead>
-            <TableHead className="w-[12rem]">요청일시</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {splmntDmndList.map((item) => (
-            <TableRow key={item.splmntDmndSn}>
-              <TableCell>{item.splmntArtclCdNm || "-"}</TableCell>
-              <TableCell className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</TableCell>
-              <TableCell className="whitespace-pre-wrap">{item.splmntCn || "-"}</TableCell>
-              <TableCell>
-                <Badge color={item.cmptnYn === "Y" ? "green" : "gray"}>
-                  {item.cmptnYn === "Y" ? "완료" : "미완료"}
-                </Badge>
-              </TableCell>
-              <TableCell>
-                {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </SectionCollapsible>
-  );
-}
-
-export { SupplementDemandSection };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/sections/tech-review-opinion-section.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/sections/tech-review-opinion-section.tsx
index dee5f6c8f..bc7a51af6 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/sections/tech-review-opinion-section.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/sections/tech-review-opinion-section.tsx
@@ -33,6 +33,8 @@ const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
 interface TechReviewOpinionSectionProps {
   rvwList: FnrsCnsltnRvwOpnnResponseDto[];
   editableReviewStep?: ReviewStepCode;
+  atrzSeComCdList?: string[];
+  isAtrzLoading?: boolean;
 }
 
 export interface TechReviewOpinionSectionHandle {
@@ -69,7 +71,13 @@ function hasFormContent(formData: ReviewOpinionFormData) {
 const TechReviewOpinionSection = forwardRef<
   TechReviewOpinionSectionHandle,
   TechReviewOpinionSectionProps
->(function TechReviewOpinionSection({ rvwList, editableReviewStep }, ref) {
+>(function TechReviewOpinionSection({
+  rvwList,
+  editableReviewStep,
+  atrzSeComCdList = [],
+  isAtrzLoading = false,
+}, ref) {
+  const canWriteKecoOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
   const [formData, setFormData] = useState<ReviewOpinionFormData>({
     ...EMPTY_FORM_DATA,
     opnrSeComCd: editableReviewStep ?? "",
@@ -102,6 +110,9 @@ const TechReviewOpinionSection = forwardRef<
         if (!editableReviewStep || !hasFormContent(formData)) {
           return null;
         }
+        if (editableReviewStep === "KECO" && !canWriteKecoOpinion) {
+          return null;
+        }
 
         return {
           formData: {
@@ -119,14 +130,15 @@ const TechReviewOpinionSection = forwardRef<
         setUploadedFile(null);
       },
     }),
-    [editableReviewStep, formData, rvwList],
+    [canWriteKecoOpinion, editableReviewStep, formData, rvwList],
   );
 
   const envRvwList = rvwList.filter((item) => item.opnrSeComCd === "ENV");
   const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
 
   const hasEnvSection = envRvwList.length > 0 || editableReviewStep === "ENV";
-  const hasKecoSection = kecoRvwList.length > 0 || editableReviewStep === "KECO";
+  const hasKecoSection =
+    kecoRvwList.length > 0 || (editableReviewStep === "KECO" && canWriteKecoOpinion);
 
   if (!hasEnvSection && !hasKecoSection) {
     return null;
@@ -170,6 +182,7 @@ const TechReviewOpinionSection = forwardRef<
 
   function renderOpinionForm(reviewStep: ReviewStepCode) {
     if (editableReviewStep !== reviewStep) return null;
+    if (reviewStep === "KECO" && !canWriteKecoOpinion) return null;
 
     const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
 
diff --git a/apps/as/src/pages/instl-sncn/lib/approval-utils.ts b/apps/as/src/pages/instl-sncn/lib/approval-utils.ts
deleted file mode 100644
index 83f22a011..000000000
--- a/apps/as/src/pages/instl-sncn/lib/approval-utils.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { ElaprDocPrgrsClientResponseDto } from "@/entities/instl-sncn";
-
-export interface ApproverStatusConfig {
-  label: string;
-  badgeClass: string;
-}
-
-export const APPROVER_STATUS_MAP: Record<string, ApproverStatusConfig> = {
-  ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700" },
-  ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800" },
-  ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800" },
-  ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800" },
-};
-
-export function sortByAtrzSeqNo(
-  list: ElaprDocPrgrsClientResponseDto[],
-): ElaprDocPrgrsClientResponseDto[] {
-  return list.slice().sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
-}
-
-export function getApproverStatus(status: string | undefined): ApproverStatusConfig {
-  return (
-    APPROVER_STATUS_MAP[status ?? ""] ?? {
-      label: status || "-",
-      badgeClass: "bg-gray-100 text-gray-700",
-    }
-  );
-}
diff --git a/apps/as/src/pages/instl-sncn/lib/button-config.ts b/apps/as/src/pages/instl-sncn/lib/button-config.ts
index 83ad6c54a..8dafefd31 100644
--- a/apps/as/src/pages/instl-sncn/lib/button-config.ts
+++ b/apps/as/src/pages/instl-sncn/lib/button-config.ts
@@ -2,7 +2,6 @@ export const INSTL_SNCN_VIEW_BUTTON_ACTION = {
   strg: "strg",
   aply: "aply",
   del: "del",
-  splmntCmptn: "splmntCmptn",
   instlSncnAncmnt: "instlSncnAncmnt",
   envoSbmsn: "envoSbmsn",
   rjct: "rjct",
@@ -15,7 +14,6 @@ export const INSTL_SNCN_VIEW_BUTTON_ACTION = {
   dmndSplmnt: "dmndSplmnt",
   atrzAprv: "atrzAprv",
   atrzRply: "atrzRply",
-  grndsChck: "grndsChck",
 } as const;
 
 export type InstlSncnViewButtonAction =
@@ -33,7 +31,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, InstlSncnViewBut
       INSTL_SNCN_VIEW_BUTTON_ACTION.aply,
       INSTL_SNCN_VIEW_BUTTON_ACTION.del,
     ],
-    SL: [INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn],
     TA: [INSTL_SNCN_VIEW_BUTTON_ACTION.instlSncnAncmnt],
   },
   ROLE_USER04: {
@@ -44,10 +41,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, InstlSncnViewBut
     LE: [INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply, INSTL_SNCN_VIEW_BUTTON_ACTION.rqstTechRvw],
     TP: [INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply],
   },
-  ROLE_USER01: {
-    TE: [INSTL_SNCN_VIEW_BUTTON_ACTION.grndsChck],
-    SL: [INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn],
-  },
 };
 
 const ROLE_USER01_ATRZ_STATUS_CODES = ["ER", "TE"] as const;
diff --git a/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts b/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
index 0b02454f8..a0a36a298 100644
--- a/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
@@ -24,7 +24,7 @@ function mapEsntlAtchFileList(esntlFileList: InstlSncnMngDetResponse["esntlFileL
 }
 
 export function mapDetailToFormData(data: InstlSncnMngDetResponse): InstlSncnRegistFormData {
-  const { detDto, bizSclList, bizCstList, cklstResultList, esntlFileList } = data;
+  const { detDto, bizSclList, bizCstList, cklstResultList, esntlFileList, splmntDmndList } = data;
 
   return {
     instlSncnMng: {
@@ -85,6 +85,23 @@ export function mapDetailToFormData(data: InstlSncnMngDetResponse): InstlSncnReg
         picRvwCn: item.picRvwCn,
       })) ?? [],
     esntlAtchFileList: mapEsntlAtchFileList(esntlFileList),
+    splmntDmndList:
+      splmntDmndList?.map((item) => ({
+        splmntDmndSn: item.splmntDmndSn,
+        splmntArtclComCd: item.splmntArtclComCd,
+        splmntArtclCdNm: item.splmntArtclCdNm,
+        splmntDmndCn: item.splmntDmndCn,
+        splmntDmndDt: item.splmntDmndDt,
+        splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId ?? "",
+        splmntDmndAtchFileNm: item.splmntDmndAtchFileInfo?.orgnlFileNm ?? "",
+        splmntCn: item.splmntCn ?? "",
+        splmntPicNm: item.splmntPicNm ?? "",
+        splmntCmptnDt: item.splmntCmptnDt ?? "",
+        splmntAtchFileGroupId: item.splmntAtchFileGroupId ?? "",
+        splmntAtchFileNm: item.splmntAtchFileInfo?.orgnlFileNm ?? "",
+        splmntAtchFileAtflId: item.splmntAtchFileInfo?.atflId ?? "",
+        cmptnYn: item.cmptnYn,
+      })) ?? [],
     privacyConsent: "Y",
   };
 }
@@ -116,6 +133,7 @@ export function getCreateDefaultValues(
     bizCstList: [],
     cklstResultList: [],
     esntlAtchFileList: [],
+    splmntDmndList: [],
     privacyConsent: "N",
   };
 }
diff --git a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
index ae55e92b9..5cc52d296 100644
--- a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
+++ b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
@@ -24,23 +24,23 @@ export const instlSncnRegistSchema = z.object({
     aplcntMblTelno: z.string().optional(),
     aplcntOgdpNm: z.string().optional(),
     aplcntEmlAddr: z.string().optional(),
-    instlSncnDocNo: z.string().optional(),
+    instlSncnDocNo: z.string().nullish(),
     admdstCd: z.string().optional(),
     envoSeComCd: z.string().optional(),
-    prgrsSttsComCd: z.string().optional(),
+    prgrsSttsComCd: z.string().nullish(),
     atchFileGroupId: z.string().optional(),
     rtlztnFcltSeComCd: z.string().optional(),
     rtlztnUsgSeComCd: z.string().optional(),
-    envoSeCdNm: z.string().optional(),
-    sncnSeCdNm: z.string().optional(),
-    taskSeCdNm: z.string().optional(),
-    prgrsSttsCdNm: z.string().optional(),
-    sido: z.string().optional(),
-    gugun: z.string().optional(),
-    regDt: z.string().optional(),
-    rgtr: z.string().optional(),
-    rgtrNm: z.string().optional(),
-    mdfcnDt: z.string().optional(),
+    envoSeCdNm: z.string().nullish(),
+    sncnSeCdNm: z.string().nullish(),
+    taskSeCdNm: z.string().nullish(),
+    prgrsSttsCdNm: z.string().nullish(),
+    sido: z.string().nullish(),
+    gugun: z.string().nullish(),
+    regDt: z.string().nullish(),
+    rgtr: z.string().nullish(),
+    rgtrNm: z.string().nullish(),
+    mdfcnDt: z.string().nullish(),
   }),
   bzScaleList: z.array(
     z.object({
@@ -66,7 +66,7 @@ export const instlSncnRegistSchema = z.object({
       cklstRvwSn: z.number(),
       rvwStpComCd: z.string(),
       selected: z.enum(["Y", "N"]).nullable(),
-      picRvwCn: z.string().nullable().optional(),
+      picRvwCn: z.string().nullish(),
     }),
   ),
   esntlAtchFileList: z.array(
@@ -75,6 +75,24 @@ export const instlSncnRegistSchema = z.object({
       atchFileGroupId: z.string(),
     }),
   ),
+  splmntDmndList: z.array(
+    z.object({
+      splmntDmndSn: z.number().optional(),
+      splmntArtclComCd: z.string().optional(),
+      splmntArtclCdNm: z.string().nullish(),
+      splmntDmndCn: z.string().optional(),
+      splmntDmndDt: z.string().optional(),
+      splmntDmndAtchFileGroupId: z.string().optional(),
+      splmntDmndAtchFileNm: z.string().optional(),
+      splmntCn: z.string().optional(),
+      splmntPicNm: z.string().optional(),
+      splmntCmptnDt: z.string().optional(),
+      splmntAtchFileGroupId: z.string().optional(),
+      splmntAtchFileNm: z.string().optional(),
+      splmntAtchFileAtflId: z.string().optional(),
+      cmptnYn: z.string().optional(),
+    }),
+  ),
   privacyConsent: z.enum(["Y", "N"], {
     required_error: "개인정보 수집/이용 동의는 필수입니다",
   }),
diff --git a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
index adea42a99..bb9bc18ab 100644
--- a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
@@ -1,104 +1,131 @@
-import type {
-  BizCstTreeDto,
-  BizSclTreeDto,
-  EsntlAtchFileMngTreeResponseDto,
-  InstlSncnApplySaveRequestDto,
-  InstlSncnBizCstSaveRequestDto,
-  InstlSncnBzScaleSaveDto,
-  InstlSncnCklstResultSaveDto,
-  InstlSncnEsntlAtchFileSaveDto,
-  InstlSncnMngDetResponse,
-  InstlSncnMngResponseDto,
-  ReviewStepCode,
-} from "@/entities/instl-sncn";
-
-import type { ChecklistFormState } from "../model/view-types";
-
-import { toCklstSaveDto } from "./checklist-utils";
-import { type ReviewOpinionFormData, toRvwOpnnSaveDto } from "./review-opinion-utils";
-
-export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): InstlSncnBzScaleSaveDto[] {
-  return bizSclList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      cnstpSeCd: node.cnstpSeCd,
-      bscPl: node.bscPlanQty,
-      budgetReflct: node.bgtRfltQty,
-      thtiDsgn: node.tstmDesignQty,
-      diff: node.tstmDesignQty - node.bgtRfltQty,
-    }));
-}
-
-export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): InstlSncnBizCstSaveRequestDto[] {
-  return bizCstList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      acntgSeCd: node.acntgSeCd,
-      bscPlanAmt: node.bscPlanAmt,
-      bgtRfltAmt: node.bgtRfltAmt,
-      tstmDesignAmt: node.tstmDesignAmt,
-    }));
-}
-
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): InstlSncnEsntlAtchFileSaveDto[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
-export function buildSavePayload(
-  data: InstlSncnMngDetResponse,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-): InstlSncnApplySaveRequestDto {
-  const { detDto, bizSclList, bizCstList, cklstResultList = [], esntlFileList } = data;
-
-  return {
-    instlSncnMng: { ...detDto, prgrsSttsComCd },
-    bzScaleList: toBzScaleSaveDto(bizSclList),
-    bizCstList: toBizCstSaveDto(bizCstList),
-    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
-  };
-}
-
-export function buildTechReviewReplyPayload(
-  data: InstlSncnMngDetResponse,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-  techReViewSaveCd: string,
-  reviewOpinionFormData?: ReviewOpinionFormData | null,
-  opnrNm?: string,
-): InstlSncnApplySaveRequestDto {
-  return {
-    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
-    techReViewSaveCd,
-    rvwStpCd: reviewStep,
-    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
-  };
-}
-
-export function buildTechReviewPayload(
-  det: InstlSncnMngResponseDto,
-  cklstResultList: InstlSncnCklstResultSaveDto[],
-): InstlSncnApplySaveRequestDto {
-  return {
-    instlSncnMng: { ...det, prgrsSttsComCd: "ER" },
-    bzScaleList: [],
-    bizCstList: [],
-    cklstResultList,
-    esntlAtchFileList: [],
-  };
-}
+import type {
+  BizCstTreeDto,
+  BizSclTreeDto,
+  EsntlAtchFileMngTreeResponseDto,
+  InstlSncnApplySaveRequestDto,
+  InstlSncnBizCstSaveRequestDto,
+  InstlSncnBzScaleSaveDto,
+  InstlSncnEsntlAtchFileSaveDto,
+  InstlSncnMngDetResponse,
+  InstlSncnSplmntDmndSaveDto,
+  ReviewStepCode,
+} from "@/entities/instl-sncn";
+import type { SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
+
+import type { ChecklistFormState } from "../model/view-types";
+
+import { toCklstSaveDto } from "./checklist-utils";
+import { type ReviewOpinionFormData, toRvwOpnnSaveDto } from "./review-opinion-utils";
+
+export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): InstlSncnBzScaleSaveDto[] {
+  return bizSclList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      cnstpSeCd: node.cnstpSeCd,
+      bscPl: node.bscPlanQty,
+      budgetReflct: node.bgtRfltQty,
+      thtiDsgn: node.tstmDesignQty,
+      diff: node.tstmDesignQty - node.bgtRfltQty,
+    }));
+}
+
+export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): InstlSncnBizCstSaveRequestDto[] {
+  return bizCstList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      acntgSeCd: node.acntgSeCd,
+      bscPlanAmt: node.bscPlanAmt,
+      bgtRfltAmt: node.bgtRfltAmt,
+      tstmDesignAmt: node.tstmDesignAmt,
+    }));
+}
+
+export function toEsntlAtchFileSaveDto(
+  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
+): InstlSncnEsntlAtchFileSaveDto[] {
+  const esntlMap = new Map<string, string>();
+
+  for (const item of esntlFileList) {
+    if (!item.esntlAtchFileId || !item.atflCd) continue;
+    esntlMap.set(item.esntlAtchFileId, item.atflCd);
+  }
+
+  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
+    esntlAtchFileId,
+    atchFileGroupId,
+  }));
+}
+
+export function buildSavePayload(
+  data: InstlSncnMngDetResponse,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+): InstlSncnApplySaveRequestDto {
+  const { detDto, bizSclList, bizCstList, cklstResultList = [], esntlFileList } = data;
+
+  return {
+    instlSncnMng: { ...detDto, prgrsSttsComCd },
+    bzScaleList: toBzScaleSaveDto(bizSclList),
+    bizCstList: toBizCstSaveDto(bizCstList),
+    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
+    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
+  };
+}
+
+export function buildTechReviewReplyPayload(
+  data: InstlSncnMngDetResponse,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+  techReViewSaveCd: string,
+  reviewOpinionFormData?: ReviewOpinionFormData | null,
+  opnrNm?: string,
+): InstlSncnApplySaveRequestDto {
+  return {
+    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
+    techReViewSaveCd,
+    rvwStpCd: reviewStep,
+    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
+  };
+}
+
+export function buildSupplementReqPayload(
+  data: InstlSncnMngDetResponse,
+  payload: SplmntDmndDialogConfirmPayload,
+  checklistFormState: ChecklistFormState,
+): InstlSncnApplySaveRequestDto {
+  const existingItems: InstlSncnSplmntDmndSaveDto[] = (data.splmntDmndList ?? []).map((item) =>
+    toSplmntDmndSaveItem(item),
+  );
+
+  const nextSn = existingItems.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) + 1;
+
+  const newItems: InstlSncnSplmntDmndSaveDto[] = payload.items.map((item, index) => ({
+    splmntDmndSn: nextSn + index,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    cmptnYn: "N",
+  }));
+
+  return {
+    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
+    splmntDmndList: [...existingItems, ...newItems],
+  };
+}
+
+export function toSplmntDmndSaveItem(item: InstlSncnSplmntDmndSaveDto): InstlSncnSplmntDmndSaveDto {
+  return {
+    splmntDmndSn: item.splmntDmndSn,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndDt: item.splmntDmndDt,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    splmntCn: item.splmntCn,
+    splmntPicNm: item.splmntPicNm,
+    splmntCmptnDt: item.splmntCmptnDt,
+    splmntAtchFileGroupId: item.splmntAtchFileGroupId,
+    cmptnYn: item.cmptnYn,
+  };
+}
diff --git a/apps/as/src/pages/instl-sncn/model/reviewer-option.ts b/apps/as/src/pages/instl-sncn/model/reviewer-option.ts
deleted file mode 100644
index 2c9a72ef8..000000000
--- a/apps/as/src/pages/instl-sncn/model/reviewer-option.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface ReviewerOption {
-  uuid: string;
-  name: string;
-  deptNm: string;
-}
diff --git a/apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx b/apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx
deleted file mode 100644
index dd241a514..000000000
--- a/apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client";
-
-import { RvwMnpwMngResponseDto, useRvwMnpwMngPage } from "@/entities/rvw-mnpw";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Skeleton,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-import { type ReviewerOption } from "../../model/reviewer-option";
-
-const PAGE_SIZE = 500;
-
-interface AprvrPickerDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  atrzSeComCd: string;
-  onSelect: (reviewer: ReviewerOption) => void;
-}
-
-function AprvrPickerDialog({ open, onOpenChange, atrzSeComCd, onSelect }: AprvrPickerDialogProps) {
-  const { data, isPending, isError } = useRvwMnpwMngPage(
-    {
-      atrzSeComCd,
-      page: 0,
-      size: PAGE_SIZE,
-      sort: "userUuidNm,asc",
-    },
-    { enabled: open },
-  );
-
-  const items = data?.content ?? [];
-
-  function fromRvwMnpwMng(item: RvwMnpwMngResponseDto): ReviewerOption {
-    return {
-      uuid: item.userUuid,
-      name: item.userUuidNm ?? "",
-      deptNm: item.ognzNm ?? "",
-    };
-  }
-
-  function handleSelect(item: (typeof items)[number]) {
-    onSelect(fromRvwMnpwMng(item));
-    onOpenChange(false);
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>검토인력 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="h-[36rem] overflow-auto">
-          {isPending ? (
-            <div className="flex flex-col gap-2">
-              <Skeleton className="h-[4rem]" />
-              <Skeleton className="h-[16rem]" />
-            </div>
-          ) : isError ? (
-            <p className="py-8 text-center text-lg text-muted-foreground">
-              검토인력 목록을 불러오지 못했습니다.
-            </p>
-          ) : items.length === 0 ? (
-            <p className="py-8 text-center text-lg text-muted-foreground">
-              배치된 검토인력이 없습니다.
-            </p>
-          ) : (
-            <Table className="w-full">
-              <colgroup>
-                <col width="25%" />
-                <col width="25%" />
-                <col width="15%" />
-                <col width="15%" />
-                <col width="20%" />
-              </colgroup>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>성명</TableHead>
-                  <TableHead>부서</TableHead>
-                  <TableHead>직위</TableHead>
-                  <TableHead>직급</TableHead>
-                  <TableHead>선택</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item) => (
-                  <TableRow key={`${item.atrzSeComCd}-${item.ognzSn}-${item.userUuid}`}>
-                    <TableCell align="center">{item.userUuidNm || item.userUuid}</TableCell>
-                    <TableCell align="center">{item.ognzNm || "-"}</TableCell>
-                    <TableCell align="center">{item.jbpsSeNm || "-"}</TableCell>
-                    <TableCell align="center">{item.jbgdSeNm || "-"}</TableCell>
-                    <TableCell align="center">
-                      <Button type="button" size="sm" onClick={() => handleSelect(item)}>
-                        선택
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
-            닫기
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { AprvrPickerDialog };
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-picker-dialog.tsx b/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-picker-dialog.tsx
deleted file mode 100644
index 945a2cfc0..000000000
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-picker-dialog.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  type ElaprTmplt,
-  getVisibleRows,
-  useElaprTmpltPage,
-  validateAllRowsForSave,
-  validateAtrzOrder,
-  validateUniqueSeqNo,
-} from "@/entities/elapr";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@common/components";
-
-import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
-import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
-
-const PAGE_SIZE = 100;
-
-interface ElaprTmpltPickerConfirmPayload {
-  tmplt: ElaprTmplt;
-  aplnRows: ElaprAplnRow[];
-}
-
-interface ElaprTmpltPickerDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect?: (tmplt: ElaprTmplt) => void;
-  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
-}
-
-function ElaprTmpltPickerDialog({
-  open,
-  onClose,
-  onSelect,
-  onConfirm,
-}: ElaprTmpltPickerDialogProps) {
-  const alert = useAlertStore((state) => state.setMessage);
-  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
-  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
-  const [isEditingLocked, setIsEditingLocked] = useState(false);
-
-  const tmpltQuery = useElaprTmpltPage({
-    page: 0,
-    size: PAGE_SIZE,
-    sort: "regDt,desc",
-    docSeComCd: "INSTL",
-  });
-
-  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
-    setAplnRows(rows);
-  }, []);
-
-  const handleEditingLockedChange = useCallback((locked: boolean) => {
-    setIsEditingLocked(locked);
-  }, []);
-
-  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
-    setSelectedTmplt(tmplt);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-  }
-
-  function handleOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      setSelectedTmplt(null);
-      setAplnRows([]);
-      setIsEditingLocked(false);
-      onClose();
-    }
-  }
-
-  function handleConfirm() {
-    if (!selectedTmplt) {
-      alert("결재서식을 선택해 주세요.");
-      return;
-    }
-
-    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
-    if (rowsError) {
-      alert(rowsError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(aplnRows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const seqError = validateUniqueSeqNo(aplnRows);
-    if (seqError) {
-      alert(seqError);
-      return;
-    }
-
-    const visibleRows = getVisibleRows(aplnRows);
-
-    const payload: ElaprTmpltPickerConfirmPayload = {
-      tmplt: selectedTmplt,
-      aplnRows: visibleRows,
-    };
-
-    if (onConfirm) {
-      onConfirm(payload);
-    } else {
-      onSelect?.(selectedTmplt);
-    }
-
-    setSelectedTmplt(null);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-    onClose();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>결재선 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex gap-6">
-          <ElaprTmpltSelectTable
-            query={tmpltQuery}
-            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onSelectTmplt={handleSelectTmplt}
-          />
-          <ElaprAplnPickerGrid
-            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onRowsChange={handleRowsChange}
-            onEditingLockedChange={handleEditingLockedChange}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
-            닫기
-          </Button>
-          <Button
-            type="button"
-            disabled={!selectedTmplt || isEditingLocked}
-            onClick={handleConfirm}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { ElaprTmpltPickerDialog };
-export type { ElaprTmpltPickerConfirmPayload };
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx b/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx
deleted file mode 100644
index 50bdb33b9..000000000
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-
-import type { UseQueryResult } from "@tanstack/react-query";
-import { createColumnHelper, getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
-
-import { useDataTable } from "@/shared/lib";
-import type { PageResponse } from "@/shared/model";
-import type { ElaprTmplt } from "@/entities/elapr";
-import { Skeleton } from "@common/components";
-
-const columnHelper = createColumnHelper<ElaprTmplt>();
-
-interface ElaprTmpltSelectTableProps {
-  query: UseQueryResult<PageResponse<ElaprTmplt>>;
-  selectedTmpltId: string | null;
-  onSelectTmplt: (tmplt: ElaprTmplt | null) => void;
-}
-
-function ElaprTmpltSelectTable({
-  query,
-  selectedTmpltId,
-  onSelectTmplt,
-}: ElaprTmpltSelectTableProps) {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
-  useEffect(() => {
-    if (selectedTmpltId) {
-      setRowSelection({ [selectedTmpltId]: true });
-    } else {
-      setRowSelection({});
-    }
-  }, [selectedTmpltId]);
-
-  const columns = useMemo(
-    () => [
-      columnHelper.accessor("elaprTmpltId", {
-        header: "전자결재서식아이디",
-        meta: { align: "left" },
-      }),
-      columnHelper.accessor("elaprTmpltNm", {
-        header: "결재서식명",
-        meta: { align: "left" },
-      }),
-      columnHelper.accessor("docSeComNm", {
-        header: "문서구분",
-        cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "—",
-      }),
-    ],
-    [],
-  );
-
-  const { tableComponent } = useDataTable({
-    query,
-    tableOptions: {
-      columns,
-      state: { rowSelection },
-      enableRowSelection: true,
-      enableMultiRowSelection: false,
-      getRowId: (row) => row.elaprTmpltId,
-      onRowSelectionChange: (updater) => {
-        const next = typeof updater === "function" ? updater(rowSelection) : updater;
-        setRowSelection(next);
-        const selectedId = Object.keys(next)[0];
-        if (!selectedId) {
-          onSelectTmplt(null);
-          return;
-        }
-        const selected = query.data?.content.find((t) => t.elaprTmpltId === selectedId);
-        onSelectTmplt(selected ?? null);
-      },
-      getCoreRowModel: getCoreRowModel(),
-    },
-    dataTableOptions: {
-      onRowClick: (row) => {
-        setRowSelection({ [row.elaprTmpltId]: true });
-        onSelectTmplt(row);
-      },
-    },
-  });
-
-  return (
-    <section className="card card-border mx-0 min-h-[32rem] flex-[0.5] bg-background pt-0">
-      <div className="card-header h-[4.6rem]">
-        <h3 className="text-2xl font-semibold">전자결재서식</h3>
-      </div>
-      {query.isPending && (
-        <div className="flex flex-col gap-2 p-4">
-          <Skeleton className="h-[4rem]" />
-          <Skeleton className="h-[16rem]" />
-        </div>
-      )}
-      {query.isError && (
-        <p className="py-8 text-center text-lg text-muted-foreground">
-          결재서식 목록을 불러오지 못했습니다.
-        </p>
-      )}
-      {!query.isPending && !query.isError && tableComponent}
-    </section>
-  );
-}
-
-export { ElaprTmpltSelectTable };
diff --git a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
index ba1f79441..e3c0d8119 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
@@ -11,8 +11,11 @@ import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import {
   buildElaprPrgrsSttsListFromAplnRows,
+  ElaprApprovalDialog,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
   hasCurrentUserPendingApprovalRequest,
   useElaprDocPrgrsByDocNo,
 } from "@/entities/elapr";
@@ -23,8 +26,7 @@ import {
   type InstlSncnMngDetResponse,
   instlSncnService,
 } from "@/entities/instl-sncn";
-import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import { TextInputDialog } from "@/widgets/pbadms-sprt";
+import { SplmntDmndDialog, type SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
 import { Button } from "@common/components";
 
 import {
@@ -34,22 +36,23 @@ import {
   needsRoleUser01AtrzResolve,
 } from "../../lib/button-config";
 import { computeReviewStepChecklistProgress } from "../../lib/checklist-utils";
-import { buildSavePayload, buildTechReviewReplyPayload } from "../../lib/save-payload-utils";
+import {
+  buildSavePayload,
+  buildSupplementReqPayload,
+  buildTechReviewReplyPayload,
+  toSplmntDmndSaveItem,
+} from "../../lib/save-payload-utils";
 import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
-import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-import {
-  type ElaprTmpltPickerConfirmPayload,
-  ElaprTmpltPickerDialog,
-} from "./elapr-tmplt-picker-dialog";
-
 interface FloatingActionButtonsProps {
   data: InstlSncnMngDetResponse;
   docSeComCd: string;
   instlSncnDocNo: string;
   prgrsSttsComCd: string;
   dtlInstCd: string | undefined;
+  atrzSeComCdList: string[];
+  isRvwLoginUserLoading: boolean;
   checklistFormState: ChecklistFormState;
   techReviewOpinionRef?: React.RefObject<TechReviewOpinionSectionHandle | null>;
   opnrNm?: string;
@@ -63,6 +66,8 @@ function FloatingActionButtons({
   instlSncnDocNo,
   prgrsSttsComCd,
   dtlInstCd,
+  atrzSeComCdList,
+  isRvwLoginUserLoading,
   checklistFormState,
   techReviewOpinionRef,
   opnrNm,
@@ -80,18 +85,9 @@ function FloatingActionButtons({
 
   const needsAtrzResolve = needsRoleUser01AtrzResolve(dtlInstCd, prgrsSttsComCd);
   const needsTeApprovalCheck = needsAtrzResolve && prgrsSttsComCd === "TE";
-  const { data: rvwLoginUserData, isLoading: isRvwLoginUserLoading } = useRvwMnpwMngLoginUserList(
-    {},
-    { enabled: needsAtrzResolve },
-  );
   const { data: elaprDocPrgrsList = [], isLoading: isElaprDocPrgrsLoading } =
     useElaprDocPrgrsByDocNo(needsTeApprovalCheck ? docNo : null);
 
-  const atrzSeComCdList = useMemo(
-    () => rvwLoginUserData?.content?.map((item) => item.atrzSeComCd) ?? [],
-    [rvwLoginUserData],
-  );
-
   const hasPendingApprovalRequest = hasCurrentUserPendingApprovalRequest(
     elaprDocPrgrsList,
     userInfo?.userUnqId,
@@ -382,15 +378,18 @@ function FloatingActionButtons({
       return;
     }
 
-    const payload = buildTechReviewReplyPayload(
-      data,
-      checklistFormState,
-      "KECO",
-      "TE",
-      "SV",
-      getReviewOpinionFormData(),
-      opnrNm,
-    );
+    const payload = {
+      ...buildTechReviewReplyPayload(
+        data,
+        checklistFormState,
+        "KECO",
+        "TE",
+        "SV",
+        getReviewOpinionFormData(),
+        opnrNm,
+      ),
+      splmntDmndList: (data.splmntDmndList ?? []).map(toSplmntDmndSaveItem),
+    };
 
     await executeAction({
       action: INSTL_SNCN_VIEW_BUTTON_ACTION.rvwCmptn,
@@ -404,11 +403,12 @@ function FloatingActionButtons({
     setActiveDialog("dmndSplmnt");
   }
 
-  async function handleDmndSplmntConfirm(splmntCn: string) {
+  async function handleDmndSplmntConfirm(payload: SplmntDmndDialogConfirmPayload) {
     setActiveDialog(null);
+    const requestPayload = buildSupplementReqPayload(data, payload, checklistFormState);
     await executeAction({
       action: INSTL_SNCN_VIEW_BUTTON_ACTION.dmndSplmnt,
-      request: splmntCn,
+      request: requestPayload,
       successMessage: "보완요청이 처리되었습니다.",
     });
   }
@@ -440,16 +440,6 @@ function FloatingActionButtons({
               삭제
             </Button>
           )}
-          {shouldShowButton(INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn) && (
-            <Button
-              onClick={() =>
-                void executeAction({ action: INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn })
-              }
-              disabled={isProcessing}
-            >
-              보완완료
-            </Button>
-          )}
           {shouldShowButton(INSTL_SNCN_VIEW_BUTTON_ACTION.instlSncnAncmnt) && (
             <Button onClick={handleInstlSncnAncmntClick} disabled={isProcessing}>
               설치인가 고시
@@ -516,16 +506,15 @@ function FloatingActionButtons({
       <ElaprTmpltPickerDialog
         open={activeDialog === "elaprTmplt"}
         onClose={() => setActiveDialog(null)}
+        docSeComCd={docSeComCd}
         onConfirm={handleElaprTmpltConfirm}
       />
 
-      <TextInputDialog
+      <SplmntDmndDialog
         open={activeDialog === "dmndSplmnt"}
         onOpenChange={() => setActiveDialog(null)}
-        title="보완요청 내용 입력"
-        placeholder="보완요청 내용을 입력하세요."
         isSubmitting={isProcessing}
-        onConfirm={(value) => void handleDmndSplmntConfirm(value)}
+        onConfirm={handleDmndSplmntConfirm}
       />
 
       <ElaprApprovalDialog
@@ -565,11 +554,6 @@ async function handleDel(context: ActionHandlerContext): Promise<void> {
   }
 }
 
-async function handleSplmntCmptn(context: ActionHandlerContext): Promise<void> {
-  // TODO: 보완완료 API 호출
-  context.onSuccess?.();
-}
-
 async function handleChangePrgrsSttsComCd(
   context: ActionHandlerContext<DocPrgrsUpdateRequestDto>,
 ): Promise<void> {
@@ -603,9 +587,17 @@ async function handleDsgntRvwr(
   }
 }
 
-async function handleDmndSplmnt(context: ActionHandlerContext): Promise<void> {
-  // TODO: 보완요청 API 호출
-  context.onSuccess?.();
+async function handleDmndSplmnt(
+  context: ActionHandlerContext<InstlSncnApplySaveRequestDto>,
+): Promise<void> {
+  try {
+    const docNo = context.data.detDto.instlSncnDocNo;
+    if (!docNo) throw new Error("문서번호가 없습니다.");
+    await instlSncnService.submitReqSupplement(docNo, context.request);
+    context.onSuccess?.();
+  } catch (error) {
+    context.onError?.(error as Error);
+  }
 }
 
 async function handleAtrzAprv(context: ActionHandlerContext): Promise<void> {
@@ -618,16 +610,10 @@ async function handleAtrzRply(context: ActionHandlerContext): Promise<void> {
   context.onSuccess?.();
 }
 
-async function handleGrndsChck(context: ActionHandlerContext): Promise<void> {
-  // TODO: 현장점검 등록 API 호출
-  context.onSuccess?.();
-}
-
 const buttonActionHandlers: Record<InstlSncnViewButtonAction, ActionHandler> = {
   strg: handleSaveApply,
   aply: handleSaveApply,
   del: handleDel,
-  splmntCmptn: handleSplmntCmptn,
   instlSncnAncmnt: handleChangePrgrsSttsComCd,
   envoSbmsn: handleChangePrgrsSttsComCd,
   rjct: handleChangePrgrsSttsComCd,
@@ -640,7 +626,6 @@ const buttonActionHandlers: Record<InstlSncnViewButtonAction, ActionHandler> = {
   dmndSplmnt: handleDmndSplmnt,
   atrzAprv: handleAtrzAprv,
   atrzRply: handleAtrzRply,
-  grndsChck: handleGrndsChck,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx b/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx
deleted file mode 100644
index 795c9d08d..000000000
--- a/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { MoveVertical } from "lucide-react";
-
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
-import { type ElaprPrgrsSttsRow, isPrgrsSttsRowEditable } from "@/entities/elapr";
-import { Button, cn, TableCell, TableRow } from "@common/components";
-
-import { getApproverStatus } from "../../lib/approval-utils";
-
-interface SortablePrgrsSttsRowProps {
-  row: ElaprPrgrsSttsRow;
-  displaySeqNo: number;
-  isEditing: boolean;
-  isLocked: boolean;
-  dragDisabled: boolean;
-  onStartEdit: () => void;
-  onSave: () => void;
-  onCancel: () => void;
-  onDelete: () => void;
-  onChange: (patch: Partial<ElaprPrgrsSttsRow>) => void;
-  onPickAprvr: () => void;
-}
-
-function SortablePrgrsSttsRow({
-  row,
-  displaySeqNo,
-  isEditing,
-  isLocked,
-  dragDisabled,
-  onStartEdit,
-  onSave,
-  onCancel,
-  onDelete,
-  onChange,
-  onPickAprvr,
-}: SortablePrgrsSttsRowProps) {
-  const { data: atrzSeCodes } = useCodeList("ATRZSE");
-
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: row.rowKey,
-    disabled: dragDisabled,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.6 : 1,
-  };
-
-  const isEditable = isPrgrsSttsRowEditable(row);
-  const rowDisabled = isLocked && !isEditing;
-  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
-  const status = getApproverStatus(row.atrzPrgrsSttsComCd);
-  const isRejectedRow = row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_004";
-  const rjctRsn = row.rjctRsn?.trim();
-
-  const statusBadge = (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-sm px-3 py-1.5 text-lg font-semibold",
-        status.badgeClass,
-        isRejectedRow && rjctRsn && "cursor-help underline decoration-dotted underline-offset-4",
-      )}
-    >
-      {status.label}
-    </span>
-  );
-
-  return (
-    <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
-      <TableCell align="center" className="w-10">
-        {!dragDisabled && (
-          <Button
-            type="button"
-            size="icon"
-            className="cursor-grab !bg-transparent text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
-            {...attributes}
-            {...listeners}
-            aria-label="순서 변경"
-          >
-            <MoveVertical className="!size-6" />
-          </Button>
-        )}
-      </TableCell>
-      <TableCell align="center">{displaySeqNo}</TableCell>
-      <TableCell align="center">
-        {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
-            value={row.atrzSeComCd ?? ""}
-            onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
-            }
-            placeholder="결재구분"
-          />
-        ) : (
-          atrzSeLabel || "-"
-        )}
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex flex-col items-center gap-1">
-          <div className="flex items-center justify-center gap-2">
-            <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
-            {isEditing && (
-              <Button type="button" size="sm" onClick={onPickAprvr}>
-                선택
-              </Button>
-            )}
-          </div>
-          {!isEditing && (row.ognzNm || row.jbpsSeNm || row.jbgdSeNm) && (
-            <div className="text-base text-gray-500">
-              {row.ognzNm ?? ""}
-              {row.jbpsSeNm ? ` · ${row.jbpsSeNm}` : ""}
-            </div>
-          )}
-        </div>
-      </TableCell>
-      <TableCell align="center">
-        {isRejectedRow && rjctRsn ? (
-          <Tooltip>
-            <TooltipTrigger asChild>{statusBadge}</TooltipTrigger>
-            <TooltipContent sideOffset={4} className="max-w-md whitespace-pre-wrap">
-              {rjctRsn}
-            </TooltipContent>
-          </Tooltip>
-        ) : (
-          statusBadge
-        )}
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex justify-center gap-2">
-          {isEditing ? (
-            <>
-              <Button type="button" size="sm" onClick={onSave}>
-                확인
-              </Button>
-              <Button type="button" size="sm" color="white" onClick={onCancel}>
-                취소
-              </Button>
-            </>
-          ) : isEditable ? (
-            <>
-              <Button
-                type="button"
-                size="sm"
-                color="white"
-                disabled={rowDisabled}
-                onClick={onStartEdit}
-              >
-                수정
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                color="gray"
-                disabled={rowDisabled}
-                onClick={onDelete}
-              >
-                삭제
-              </Button>
-            </>
-          ) : (
-            <span className="text-sm text-muted-foreground">-</span>
-          )}
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export { SortablePrgrsSttsRow };
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
index 7ce7142cc..6cfd0f488 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
@@ -10,6 +10,7 @@ import { useQueryClient } from "@tanstack/react-query";
 
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import {
+  type InstlSncnApplySaveRequestDto,
   instlSncnKeys,
   type InstlSncnMngDetResponse,
   instlSncnService,
@@ -22,6 +23,7 @@ import {
   ContactInfoFormSection,
   isFormChecklistComplete,
   PrivacyConsentSection,
+  SplmntDmndFormSection,
 } from "@/widgets/pbadms-sprt";
 import { Button } from "@common/components";
 
@@ -48,6 +50,7 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
   const alert = useAlertStore((state) => state.setMessage);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const isEditMode = mode === "edit";
+  const isSplmntPrgrsStts = initialData?.detDto.prgrsSttsComCd === "SL";
 
   const form = useForm<InstlSncnRegistFormData>({
     resolver: zodResolver(instlSncnRegistSchema),
@@ -58,13 +61,13 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
         : getCreateDefaultValues(userInfo, taskSeComCd),
   });
 
-  async function submitForm(
+  function buildFormPayload(
     data: InstlSncnRegistFormData,
-    prgrsSttsComCd: "SV" | "ST",
-  ): Promise<string | undefined> {
+    prgrsSttsComCd: "SV" | "ST" | "TE",
+  ): InstlSncnApplySaveRequestDto {
     const { taskSeComCd: formTaskSeComCd, ...instlSncnMngRest } = data.instlSncnMng;
 
-    const payload = {
+    return {
       instlSncnMng: {
         ...instlSncnMngRest,
         instlSncnDocNo: isEditMode ? initialData?.detDto.instlSncnDocNo : undefined,
@@ -78,9 +81,61 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
         selected: item.selected,
       })),
       esntlAtchFileList: data.esntlAtchFileList,
+      splmntDmndList: data.splmntDmndList.map(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ({ splmntAtchFileNm, splmntAtchFileAtflId, splmntDmndAtchFileNm, ...item }) => ({
+          ...item,
+          ...(prgrsSttsComCd === "TE" ? { cmptnYn: "Y" } : null),
+        }),
+      ),
     };
+  }
 
-    return instlSncnService.saveApply(payload);
+  async function submitForm(
+    data: InstlSncnRegistFormData,
+    prgrsSttsComCd: "SV" | "ST",
+  ): Promise<string | undefined> {
+    return instlSncnService.saveApply(buildFormPayload(data, prgrsSttsComCd));
+  }
+
+  async function submitSupplementForm(data: InstlSncnRegistFormData): Promise<string | undefined> {
+    const docNo = initialData?.detDto.instlSncnDocNo;
+    if (!docNo) return undefined;
+    return instlSncnService.submitSupplement(docNo, buildFormPayload(data, "TE"));
+  }
+
+  async function onSplmntCmptn(data: InstlSncnRegistFormData) {
+    if (isSubmitting) return;
+
+    const hasEmptySplmntCn = data.splmntDmndList?.some(
+      (item) => !item.splmntCn || !item.splmntCn.trim(),
+    );
+    if (hasEmptySplmntCn) {
+      alert("보완요청내용이 있습니다. 보완완료내용을 입력해 주세요.");
+      return;
+    }
+
+    const docNo = initialData?.detDto.instlSncnDocNo;
+    if (!docNo) {
+      alert("문서번호가 없습니다.");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const result = await submitSupplementForm(data);
+      if (!result) return;
+
+      alert("보완완료 처리되었습니다.");
+      router.push(`/instl-sncn/${docNo}`);
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.list() });
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.detail(docNo) });
+    } catch (error) {
+      console.error("보완완료 실패:", error);
+      alert("보완완료 처리 중 오류가 발생했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
   }
 
   async function onSave(data: InstlSncnRegistFormData) {
@@ -131,10 +186,6 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
     }
   }
 
-  function handleApplyClick() {
-    form.handleSubmit(onApply)();
-  }
-
   async function handleDelClick() {
     if (isSubmitting) return;
 
@@ -150,6 +201,7 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
       setIsSubmitting(true);
       await instlSncnService.remove(docNo);
       alert("삭제되었습니다.");
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.list() });
       router.push("/instl-sncn");
     } catch (error) {
       console.error("삭제 실패:", error);
@@ -174,6 +226,7 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
           initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
           initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
         />
+        <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
 
         <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
           <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
@@ -185,23 +238,40 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
             >
               목록
             </Button>
-            <Button type="submit" disabled={isSubmitting}>
-              저장
-            </Button>
-            {isEditMode && (
+            {!isSplmntPrgrsStts ? (
               <>
-                <Button
-                  color="green"
-                  type="button"
-                  onClick={handleApplyClick}
-                  disabled={isSubmitting}
-                >
-                  신청완료
-                </Button>
-                <Button color="red" type="button" onClick={handleDelClick} disabled={isSubmitting}>
-                  삭제
+                <Button type="submit" disabled={isSubmitting}>
+                  저장
                 </Button>
+                {isEditMode && (
+                  <>
+                    <Button
+                      color="green"
+                      type="button"
+                      onClick={form.handleSubmit(onApply)}
+                      disabled={isSubmitting}
+                    >
+                      신청완료
+                    </Button>
+                    <Button
+                      color="red"
+                      type="button"
+                      onClick={handleDelClick}
+                      disabled={isSubmitting}
+                    >
+                      삭제
+                    </Button>
+                  </>
+                )}
               </>
+            ) : (
+              <Button
+                type="button"
+                onClick={form.handleSubmit(onSplmntCmptn)}
+                disabled={isSubmitting}
+              >
+                보완완료
+              </Button>
             )}
           </div>
         </div>
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
index 12ae43453..094072f1a 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
@@ -1,11 +1,15 @@
 "use client";
 
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 
 import { useUserStore } from "@/shared/lib";
+import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useInstlSncnDetail } from "@/entities/instl-sncn";
+import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
+import { SectionCollapsible, SupplementDemandSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
+import { needsRoleUser01AtrzResolve } from "../lib/button-config";
 import { getEditableReviewStep } from "../lib/review-step-utils";
 import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-checklist-form-state";
 
@@ -32,6 +36,17 @@ function InstlViewPage({ id }: InstlViewPageProps) {
   const { formState: checklistFormState, setFormState: setChecklistFormState } =
     useChecklistFormState(data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST);
 
+  const prgrsSttsComCd = data?.detDto?.prgrsSttsComCd || "";
+  const needsAtrzResolve = needsRoleUser01AtrzResolve(userInfo?.dtlInstCd, prgrsSttsComCd);
+  const { data: rvwLoginUserData, isLoading: isRvwLoginUserLoading } = useRvwMnpwMngLoginUserList(
+    {},
+    { enabled: needsAtrzResolve },
+  );
+  const atrzSeComCdList = useMemo(
+    () => rvwLoginUserData?.content?.map((item) => item.atrzSeComCd) ?? [],
+    [rvwLoginUserData],
+  );
+
   if (isLoading) {
     return (
       <div className="mt-6 flex flex-col gap-4 px-6">
@@ -63,6 +78,7 @@ function InstlViewPage({ id }: InstlViewPageProps) {
     esntlFileList,
     etcFileList,
     rvwList = [],
+    splmntDmndList = [],
   } = data;
 
   const editableReviewStep = getEditableReviewStep(
@@ -74,6 +90,9 @@ function InstlViewPage({ id }: InstlViewPageProps) {
     <div className="mt-6 space-y-4">
       <BasicInfoSection det={detDto} />
       <ContactInfoSection det={detDto} />
+      <SectionCollapsible title="결재현황">
+        <ElaprDocPrgrsStatus elaprDocNo={detDto.instlSncnDocNo} />
+      </SectionCollapsible>
       <BusinessScaleSection bizSclList={bizSclList} />
       <BusinessCostSection bizCstList={bizCstList} />
       <ChecklistSection
@@ -88,13 +107,18 @@ function InstlViewPage({ id }: InstlViewPageProps) {
         ref={techReviewOpinionRef}
         rvwList={rvwList}
         editableReviewStep={editableReviewStep}
+        atrzSeComCdList={atrzSeComCdList}
+        isAtrzLoading={needsAtrzResolve && isRvwLoginUserLoading}
       />
+      <SupplementDemandSection splmntDmndList={splmntDmndList} />
       <FloatingActionButtons
         data={data}
         docSeComCd="INSTL"
         instlSncnDocNo={detDto.instlSncnDocNo}
         prgrsSttsComCd={detDto.prgrsSttsComCd || ""}
         dtlInstCd={userInfo?.dtlInstCd}
+        atrzSeComCdList={atrzSeComCdList}
+        isRvwLoginUserLoading={needsAtrzResolve && isRvwLoginUserLoading}
         checklistFormState={checklistFormState}
         techReviewOpinionRef={techReviewOpinionRef}
         opnrNm={userInfo?.userName}
diff --git a/apps/as/src/pages/instl-sncn/ui/sections/basic-info-section.tsx b/apps/as/src/pages/instl-sncn/ui/sections/basic-info-section.tsx
index 890dc45d8..5413f0e0a 100644
--- a/apps/as/src/pages/instl-sncn/ui/sections/basic-info-section.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/sections/basic-info-section.tsx
@@ -12,6 +12,12 @@ function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
       <Table variant="secondary">
+        <colgroup>
+          <col width="15%" />
+          <col width="35%" />
+          <col width="15%" />
+          <col width="35%" />
+        </colgroup>
         <TableHeader>
           <TableRow>
             <TableHead>사업명</TableHead>
diff --git a/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx b/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx
index 175d31a42..2227492ed 100644
--- a/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx
@@ -29,6 +29,8 @@ const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
 interface TechReviewOpinionSectionProps {
   rvwList: InstlSncnRvwOpnnResponseDto[];
   editableReviewStep?: ReviewStepCode;
+  atrzSeComCdList?: string[];
+  isAtrzLoading?: boolean;
 }
 
 export interface TechReviewOpinionSectionHandle {
@@ -65,7 +67,13 @@ function hasFormContent(formData: ReviewOpinionFormData) {
 const TechReviewOpinionSection = forwardRef<
   TechReviewOpinionSectionHandle,
   TechReviewOpinionSectionProps
->(function TechReviewOpinionSection({ rvwList, editableReviewStep }, ref) {
+>(function TechReviewOpinionSection({
+  rvwList,
+  editableReviewStep,
+  atrzSeComCdList = [],
+  isAtrzLoading = false,
+}, ref) {
+  const canWriteKecoOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
   const [formData, setFormData] = useState<ReviewOpinionFormData>({
     ...EMPTY_FORM_DATA,
     opnrSeComCd: editableReviewStep ?? "",
@@ -98,6 +106,9 @@ const TechReviewOpinionSection = forwardRef<
         if (!editableReviewStep || !hasFormContent(formData)) {
           return null;
         }
+        if (editableReviewStep === "KECO" && !canWriteKecoOpinion) {
+          return null;
+        }
 
         return {
           ...formData,
@@ -112,14 +123,15 @@ const TechReviewOpinionSection = forwardRef<
         setUploadedFile(null);
       },
     }),
-    [editableReviewStep, formData],
+    [canWriteKecoOpinion, editableReviewStep, formData],
   );
 
   const envRvwList = rvwList.filter((item) => item.opnrSeComCd === "ENV");
   const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
 
   const hasEnvSection = envRvwList.length > 0 || editableReviewStep === "ENV";
-  const hasKecoSection = kecoRvwList.length > 0 || editableReviewStep === "KECO";
+  const hasKecoSection =
+    kecoRvwList.length > 0 || (editableReviewStep === "KECO" && canWriteKecoOpinion);
 
   if (!hasEnvSection && !hasKecoSection) {
     return null;
@@ -163,12 +175,13 @@ const TechReviewOpinionSection = forwardRef<
 
   function renderOpinionForm(reviewStep: ReviewStepCode) {
     if (editableReviewStep !== reviewStep) return null;
+    if (reviewStep === "KECO" && !canWriteKecoOpinion) return null;
 
     const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
 
     return (
-      <div className="p-2">
-        <h4 className="mb-4 text-xl font-semibold">검토의견 작성</h4>
+      <div className="space-y-2">
+        <h4 className="text-xl font-semibold">검토의견 작성</h4>
         <Table variant="secondary">
           <TableHeader>
             <TableRow>
@@ -267,14 +280,18 @@ const TechReviewOpinionSection = forwardRef<
     <>
       {hasEnvSection ? (
         <SectionCollapsible title={`${REVIEW_STEP_LABELS.ENV} 검토의견`}>
-          {envRvwList.length > 0 ? <TechReviewOpinionTable items={envRvwList} /> : null}
-          {renderOpinionForm("ENV")}
+          <div className="space-y-6">
+            {envRvwList.length > 0 ? <TechReviewOpinionTable items={envRvwList} /> : null}
+            {renderOpinionForm("ENV")}
+          </div>
         </SectionCollapsible>
       ) : null}
       {hasKecoSection ? (
         <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
-          {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
-          {renderOpinionForm("KECO")}
+          <div className="space-y-6">
+            {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
+            {renderOpinionForm("KECO")}
+          </div>
         </SectionCollapsible>
       ) : null}
     </>
diff --git a/apps/as/src/shared/config/api.ts b/apps/as/src/shared/config/api.ts
index 0aab98ed6..98992a063 100644
--- a/apps/as/src/shared/config/api.ts
+++ b/apps/as/src/shared/config/api.ts
@@ -17,6 +17,11 @@ export const ENDPOINT = {
     ADSTDSTR: "/as-service/api/v1/adstdstr",
     FNRS_CNSLTN_MNG: "/as-service/api/v1/fnrs-cnsltn-mng",
     FNRS_SHAR_SE: "/as-service/api/v1/fnrs-shar-se-mng",
+    DESIGN_CNSTN: "/as-service/api/v1/design-cnstn",
+    DESIGN_CNSTN_BIZ_CST: "/as-service/api/v1/design-cnstn-biz-cst",
+    DESIGN_CNSTN_BIZ_SCL: "/as-service/api/v1/design-cnstn-biz-scl",
+    DESIGN_CNSTN_ESNTL_ATCH_FILE: "/as-service/api/v1/design-cnstn-esntl-atch-file",
+    DESIGN_CNSTN_RVW_OPNN: "/as-service/api/v1/design-cnstn-rvw-opnn",
   },
   USER_SERVICE: {
     LOGIN: "/user-service/login",
diff --git a/apps/as/src/shared/model/pbadms-sprt.ts b/apps/as/src/shared/model/pbadms-sprt.ts
index fc0722eb2..2196ac07a 100644
--- a/apps/as/src/shared/model/pbadms-sprt.ts
+++ b/apps/as/src/shared/model/pbadms-sprt.ts
@@ -143,7 +143,8 @@ export interface ElaprDocPrgrsClientResponseDto {
   atrzSeComCd?: string;
   atrzSeComNm?: string;
   aprvrUuid?: string;
-  aprvrUuidNm?: string;
+  aprvrNm?: string;
+  aprvrUserId?: string;
   atrzPrgrsSttsComCd?: string;
   atrzPrgrsSttsComNm?: string;
   rjctRsn?: string | null;
@@ -151,6 +152,7 @@ export interface ElaprDocPrgrsClientResponseDto {
   jbpsSeNm?: string;
   jbgdSeNm?: string;
   ognzNm?: string;
+  dcarbYn?: string;
 }
 
 /** 사업규모 저장 공통 필드 */
diff --git a/apps/as/src/widgets/pbadms-sprt/index.ts b/apps/as/src/widgets/pbadms-sprt/index.ts
index aeee59a58..caab6fba0 100644
--- a/apps/as/src/widgets/pbadms-sprt/index.ts
+++ b/apps/as/src/widgets/pbadms-sprt/index.ts
@@ -30,5 +30,11 @@ export { ContactInfoFormSection } from "./ui/contact-info-form-section";
 export { FnrsSharFormSection } from "./ui/fnrs-shar-form-section";
 export { PrivacyConsentSection } from "./ui/privacy-consent-section";
 export { SectionCollapsible } from "./ui/section-collapsible";
+export {
+  SplmntDmndDialog,
+  type SplmntDmndDialogConfirmItem,
+  type SplmntDmndDialogConfirmPayload,
+} from "./ui/splmnt-dmnd-dialog";
+export { type SplmntDmndFormItem, SplmntDmndFormSection } from "./ui/splmnt-dmnd-form-section";
+export { SupplementDemandSection } from "./ui/supplement-demand-section";
 export { TaskSePickerDialog } from "./ui/task-se-picker-dialog";
-export { TextInputDialog } from "./ui/text-input-dialog";
diff --git a/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
index 59981f8d1..4fdd62292 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
@@ -1,6 +1,6 @@
 import { getDefaultFileKey } from "@/shared/lib";
 
-export type FieldPrefix = "fnrsCnsltnMng" | "instlSncnMng";
+export type FieldPrefix = "fnrsCnsltnMng" | "instlSncnMng" | "designCnstnMng";
 
 export const ETC_FILE_KEY_PREFIX = "etc::";
 
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx
index a77663e58..56c01d76e 100644
--- a/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx
+++ b/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx
@@ -29,7 +29,7 @@ import { buildChecklistTabs, syncCklstResultListFromTree } from "../lib/checklis
 
 import { SectionCollapsible } from "./section-collapsible";
 
-type FieldPrefix = "fnrsCnsltnMng" | "instlSncnMng";
+type FieldPrefix = "fnrsCnsltnMng" | "instlSncnMng" | "designCnstnMng";
 
 interface CklstResultListItem {
   cklstSn: number;
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx
index 1d6e31a16..0ccf5c580 100644
--- a/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx
+++ b/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx
@@ -7,7 +7,7 @@ import { Field, FieldError } from "@/shared/ui/field";
 import { SectionCollapsible } from "@/widgets/pbadms-sprt";
 import { Input, Table, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
 
-type FieldPrefix = "fnrsCnsltnMng" | "instlSncnMng";
+type FieldPrefix = "fnrsCnsltnMng" | "instlSncnMng" | "designCnstnMng";
 
 interface ContactInfoFormSectionProps {
   fieldPrefix: FieldPrefix;
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx
new file mode 100644
index 000000000..9373285c2
--- /dev/null
+++ b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+
+import { getDefaultFileKey, useTus } from "@/shared/lib";
+import { attachService } from "@/entities/attach";
+import { CodeSelect } from "@/entities/code";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+const SPLMNT_ARTCL_UP_CD = "SPLMNTARTCL";
+const SPLMNT_DMND_FILE_KEY_PREFIX = "splmnt-dmnd::";
+
+interface UploadedSplmntFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+interface SplmntDmndRow {
+  rowKey: string;
+  splmntArtclComCd: string;
+  splmntDmndCn: string;
+  splmntDmndAtchFileGroupId: string;
+  uploadedFile: UploadedSplmntFile | null;
+}
+
+interface SplmntDmndDialogConfirmItem {
+  splmntArtclComCd: string;
+  splmntDmndCn: string;
+  splmntDmndAtchFileGroupId?: string;
+}
+
+interface SplmntDmndDialogConfirmPayload {
+  items: SplmntDmndDialogConfirmItem[];
+}
+
+interface SplmntDmndDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  isSubmitting?: boolean;
+  onConfirm: (payload: SplmntDmndDialogConfirmPayload) => void;
+}
+
+function createRowKey() {
+  return `splmnt-row-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function createEmptyRow(): SplmntDmndRow {
+  return {
+    rowKey: createRowKey(),
+    splmntArtclComCd: "",
+    splmntDmndCn: "",
+    splmntDmndAtchFileGroupId: "",
+    uploadedFile: null,
+  };
+}
+
+function createUploadKey(rowKey: string, file: File) {
+  return `${SPLMNT_DMND_FILE_KEY_PREFIX}${rowKey}::${getDefaultFileKey(file)}`;
+}
+
+function getRowKeyFromFileKey(fileKey: string): string | null {
+  if (!fileKey.startsWith(SPLMNT_DMND_FILE_KEY_PREFIX)) return null;
+  const rest = fileKey.slice(SPLMNT_DMND_FILE_KEY_PREFIX.length);
+  const separatorIndex = rest.indexOf("::");
+  if (separatorIndex < 0) return null;
+  return rest.slice(0, separatorIndex);
+}
+
+function isRowsValid(rows: SplmntDmndRow[]) {
+  return rows.every((row) => row.splmntArtclComCd.trim() && row.splmntDmndCn.trim());
+}
+
+function SplmntDmndDialog({ open, onOpenChange, isSubmitting, onConfirm }: SplmntDmndDialogProps) {
+  const formId = useId();
+  const [rows, setRows] = useState<SplmntDmndRow[]>([createEmptyRow()]);
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setRows((prev) =>
+        prev.map((row) => {
+          if (row.rowKey !== rowKey || row.uploadedFile?.fileKey !== fileKey) return row;
+          return {
+            ...row,
+            splmntDmndAtchFileGroupId: atflCd,
+            uploadedFile: { ...row.uploadedFile, atflCd, atflId },
+          };
+        }),
+      );
+    },
+    onError: (_error, _file, fileKey) => {
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setRows((prev) =>
+        prev.map((row) => {
+          if (row.rowKey !== rowKey || row.uploadedFile?.fileKey !== fileKey) return row;
+          return { ...row, uploadedFile: null };
+        }),
+      );
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    setRows([createEmptyRow()]);
+  }, [open]);
+
+  const isAnyUploading = rows.some(
+    (row) => row.uploadedFile != null && (isUploading[row.uploadedFile.fileKey] ?? false),
+  );
+  const canSubmit = isRowsValid(rows) && !isAnyUploading && !isSubmitting;
+
+  function updateRow(rowKey: string, patch: Partial<SplmntDmndRow>) {
+    setRows((prev) => prev.map((row) => (row.rowKey === rowKey ? { ...row, ...patch } : row)));
+  }
+
+  function handleAddRow() {
+    setRows((prev) => [...prev, createEmptyRow()]);
+  }
+
+  function handleRemoveRow(rowKey: string) {
+    setRows((prev) => (prev.length <= 1 ? prev : prev.filter((row) => row.rowKey !== rowKey)));
+  }
+
+  async function handleFileUpload(rowKey: string, files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const fileKey = createUploadKey(rowKey, file);
+    const targetRow = rows.find((row) => row.rowKey === rowKey);
+    const existingAtflCd = targetRow?.splmntDmndAtchFileGroupId;
+
+    updateRow(rowKey, {
+      uploadedFile: { fileName: file.name, fileKey },
+    });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove(rowKey: string) {
+    const targetRow = rows.find((row) => row.rowKey === rowKey);
+    if (!targetRow?.uploadedFile) return;
+
+    const { fileKey, atflId } = targetRow.uploadedFile;
+    uploads[fileKey]?.abort();
+
+    if (atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(atflId);
+      } catch (error) {
+        console.error("보완요청 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    updateRow(rowKey, {
+      uploadedFile: null,
+      splmntDmndAtchFileGroupId: "",
+    });
+  }
+
+  function handleConfirm() {
+    if (!canSubmit) return;
+
+    onConfirm({
+      items: rows.map((row) => ({
+        splmntArtclComCd: row.splmntArtclComCd.trim(),
+        splmntDmndCn: row.splmntDmndCn.trim(),
+        splmntDmndAtchFileGroupId: row.splmntDmndAtchFileGroupId || undefined,
+      })),
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[100rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>보완요청</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <h4 className="text-xl font-semibold">보완 내용</h4>
+            <Button type="button" size="sm" color="green" onClick={handleAddRow}>
+              항목 추가
+            </Button>
+          </div>
+
+          <div className="overflow-x-auto">
+            <Table variant="secondary">
+              <colgroup>
+                <col width="20%" />
+                <col width="50%" />
+                <col width="20%" />
+                {rows.length > 1 ? <col width="10%" /> : null}
+              </colgroup>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>보완 항목</TableHead>
+                  <TableHead>보완 의견</TableHead>
+                  <TableHead>첨부파일</TableHead>
+                  {rows.length > 1 ? <TableHead>관리</TableHead> : null}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.map((row) => {
+                  const uploading = row.uploadedFile
+                    ? (isUploading[row.uploadedFile.fileKey] ?? false)
+                    : false;
+                  const fileInputId = `${formId}-${row.rowKey}-file`;
+
+                  return (
+                    <TableRow key={row.rowKey}>
+                      <TableCell align="center" className="align-top">
+                        <CodeSelect
+                          upCd={SPLMNT_ARTCL_UP_CD}
+                          value={row.splmntArtclComCd || undefined}
+                          onValueChange={(value) =>
+                            updateRow(row.rowKey, { splmntArtclComCd: value })
+                          }
+                          placeholder="보완항목 선택"
+                          className="w-full min-w-[12rem]"
+                        />
+                      </TableCell>
+                      <TableCell className="align-top">
+                        <Textarea
+                          value={row.splmntDmndCn}
+                          onChange={(event) =>
+                            updateRow(row.rowKey, { splmntDmndCn: event.target.value })
+                          }
+                          placeholder="보완 의견을 입력하세요."
+                          rows={4}
+                          className="min-h-[8rem] !text-xl"
+                        />
+                      </TableCell>
+                      <TableCell className="align-top">
+                        <div className="flex items-center gap-2">
+                          {row.uploadedFile ? (
+                            <div className="flex items-stretch gap-2">
+                              <span className="text-xl">{row.uploadedFile.fileName}</span>
+                              <Button
+                                type="button"
+                                size="icon"
+                                className="size-8 shrink-0 !bg-destructive"
+                                disabled={uploading}
+                                onClick={() => void handleFileRemove(row.rowKey)}
+                              >
+                                <i className="diveicon di-x text-xs" aria-label="삭제" />
+                              </Button>
+                            </div>
+                          ) : (
+                            <Button type="button" size="sm" disabled={uploading} asChild>
+                              <label htmlFor={fileInputId} className="cursor-pointer">
+                                파일추가
+                                <input
+                                  id={fileInputId}
+                                  type="file"
+                                  className="hidden"
+                                  onChange={(event) => {
+                                    void handleFileUpload(row.rowKey, event.target.files);
+                                    event.target.value = "";
+                                  }}
+                                />
+                              </label>
+                            </Button>
+                          )}
+                        </div>
+                      </TableCell>
+                      {rows.length > 1 ? (
+                        <TableCell align="center" className="align-top">
+                          <Button
+                            type="button"
+                            color="white"
+                            size="sm"
+                            onClick={() => handleRemoveRow(row.rowKey)}
+                          >
+                            삭제
+                          </Button>
+                        </TableCell>
+                      ) : null}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button type="button" onClick={handleConfirm} disabled={!canSubmit}>
+            보완요청
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { SplmntDmndDialog };
+export type { SplmntDmndDialogConfirmItem, SplmntDmndDialogConfirmPayload };
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx
new file mode 100644
index 000000000..28cb40497
--- /dev/null
+++ b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx
@@ -0,0 +1,324 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+
+import { Paperclip } from "lucide-react";
+
+import { dayjs, getDefaultFileKey, useTus } from "@/shared/lib";
+import { attachService, useDownloadAttachmentByAtflCd } from "@/entities/attach";
+import {
+  Badge,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+import { SectionCollapsible } from "./section-collapsible";
+
+const SPLMNT_CMPTN_FILE_KEY_PREFIX = "splmnt-cmptn::";
+
+interface UploadedSplmntFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+interface SplmntDmndFormItem {
+  splmntDmndSn?: number;
+  splmntArtclComCd?: string;
+  splmntArtclCdNm?: string | null;
+  splmntDmndCn?: string;
+  splmntDmndDt?: string;
+  splmntDmndAtchFileGroupId?: string;
+  splmntDmndAtchFileNm?: string;
+  splmntCn?: string;
+  splmntPicNm?: string;
+  splmntCmptnDt?: string;
+  splmntAtchFileGroupId?: string;
+  splmntAtchFileNm?: string;
+  splmntAtchFileAtflId?: string;
+  cmptnYn?: string;
+}
+
+interface SplmntDmndFormData {
+  splmntDmndList: SplmntDmndFormItem[];
+}
+
+interface SplmntDmndFormSectionProps {
+  readOnly?: boolean;
+}
+
+function createUploadKey(rowKey: string, file: File) {
+  return `${SPLMNT_CMPTN_FILE_KEY_PREFIX}${rowKey}::${getDefaultFileKey(file)}`;
+}
+
+function getRowKeyFromFileKey(fileKey: string): string | null {
+  if (!fileKey.startsWith(SPLMNT_CMPTN_FILE_KEY_PREFIX)) return null;
+  const rest = fileKey.slice(SPLMNT_CMPTN_FILE_KEY_PREFIX.length);
+  const separatorIndex = rest.indexOf("::");
+  if (separatorIndex < 0) return null;
+  return rest.slice(0, separatorIndex);
+}
+
+function getRowKey(item: SplmntDmndFormItem, index: number) {
+  return item.splmntDmndSn != null ? String(item.splmntDmndSn) : `idx-${index}`;
+}
+
+function SplmntDmndFormSection({ readOnly = false }: SplmntDmndFormSectionProps) {
+  const formId = useId();
+  const { control, setValue, getValues } = useFormContext<SplmntDmndFormData>();
+  const splmntDmndList = useWatch({ control, name: "splmntDmndList" }) ?? [];
+  const [uploadedFiles, setUploadedFiles] = useState<Record<string, UploadedSplmntFile | null>>({});
+  const initialFilesMappedRef = useRef(false);
+  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setUploadedFiles((prev) => {
+        const current = prev[rowKey];
+        if (!current || current.fileKey !== fileKey) return prev;
+        return {
+          ...prev,
+          [rowKey]: { ...current, atflCd, atflId },
+        };
+      });
+
+      const list = getValues("splmntDmndList") ?? [];
+      const index = list.findIndex((item, idx) => getRowKey(item, idx) === rowKey);
+      if (index < 0) return;
+
+      setValue(`splmntDmndList.${index}.splmntAtchFileGroupId`, atflCd, { shouldDirty: true });
+      setValue(`splmntDmndList.${index}.splmntAtchFileAtflId`, atflId, { shouldDirty: true });
+    },
+    onError: (_error, _file, fileKey) => {
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setUploadedFiles((prev) => {
+        const current = prev[rowKey];
+        if (!current || current.fileKey !== fileKey) return prev;
+        return { ...prev, [rowKey]: null };
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (initialFilesMappedRef.current) return;
+    if (splmntDmndList.length === 0) return;
+
+    const initial: Record<string, UploadedSplmntFile | null> = {};
+    for (let index = 0; index < splmntDmndList.length; index += 1) {
+      const item = splmntDmndList[index];
+      const rowKey = getRowKey(item, index);
+      if (item.splmntAtchFileGroupId && item.splmntAtchFileNm) {
+        initial[rowKey] = {
+          fileName: item.splmntAtchFileNm,
+          fileKey: `${SPLMNT_CMPTN_FILE_KEY_PREFIX}${rowKey}::initial`,
+          atflCd: item.splmntAtchFileGroupId,
+          atflId: item.splmntAtchFileAtflId,
+        };
+      } else {
+        initial[rowKey] = null;
+      }
+    }
+
+    setUploadedFiles(initial);
+    initialFilesMappedRef.current = true;
+  }, [splmntDmndList]);
+
+  if (splmntDmndList.length === 0) return null;
+
+  async function handleFileUpload(index: number, files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const item = splmntDmndList[index];
+    const rowKey = getRowKey(item, index);
+    const file = files[0];
+    const fileKey = createUploadKey(rowKey, file);
+    const existingAtflCd = item.splmntAtchFileGroupId;
+
+    setUploadedFiles((prev) => ({
+      ...prev,
+      [rowKey]: { fileName: file.name, fileKey },
+    }));
+    setValue(`splmntDmndList.${index}.splmntAtchFileNm`, file.name, { shouldDirty: true });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove(index: number) {
+    const item = splmntDmndList[index];
+    const rowKey = getRowKey(item, index);
+    const uploaded = uploadedFiles[rowKey];
+    if (!uploaded) return;
+
+    const { fileKey, atflId } = uploaded;
+    uploads[fileKey]?.abort();
+
+    if (atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(atflId);
+      } catch (error) {
+        console.error("보완완료 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    setUploadedFiles((prev) => ({ ...prev, [rowKey]: null }));
+    setValue(`splmntDmndList.${index}.splmntAtchFileGroupId`, "", { shouldDirty: true });
+    setValue(`splmntDmndList.${index}.splmntAtchFileNm`, "", { shouldDirty: true });
+    setValue(`splmntDmndList.${index}.splmntAtchFileAtflId`, "", { shouldDirty: true });
+  }
+
+  return (
+    <SectionCollapsible title="보완요청">
+      <div className="overflow-x-auto">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="12%" />
+            <col width="14%" />
+            <col width="22%" />
+            <col width="22%" />
+            <col width="18%" />
+            <col width="12%" />
+          </colgroup>
+          <TableHeader>
+            <TableRow>
+              <TableHead>보완항목</TableHead>
+              <TableHead>보완요청일시</TableHead>
+              <TableHead>보완요청내용</TableHead>
+              <TableHead>보완완료내용</TableHead>
+              <TableHead>파일첨부</TableHead>
+              <TableHead>완료여부</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {splmntDmndList.map((item, index) => {
+              const rowKey = getRowKey(item, index);
+              const uploaded = uploadedFiles[rowKey] ?? null;
+              const uploading = uploaded ? (isUploading[uploaded.fileKey] ?? false) : false;
+              const fileInputId = `${formId}-${rowKey}-file`;
+              const isRowReadOnly = readOnly || item.cmptnYn === "Y";
+
+              return (
+                <TableRow key={rowKey}>
+                  <TableCell align="center" className="align-top">
+                    {item.splmntArtclCdNm || "-"}
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</div>
+                      {item.splmntDmndAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntDmndAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {item.splmntDmndAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell className="align-top">
+                    {isRowReadOnly ? (
+                      <span className="whitespace-pre-wrap">{item.splmntCn || "-"}</span>
+                    ) : (
+                      <Controller
+                        control={control}
+                        name={`splmntDmndList.${index}.splmntCn`}
+                        render={({ field }) => (
+                          <Textarea
+                            value={field.value ?? ""}
+                            onChange={field.onChange}
+                            onBlur={field.onBlur}
+                            placeholder="보완완료 내용을 입력하세요."
+                            className="min-h-[6rem] !text-xl"
+                          />
+                        )}
+                      />
+                    )}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    {uploaded ? (
+                      <div className="flex items-stretch gap-2">
+                        {uploaded.atflCd || item.splmntAtchFileGroupId ? (
+                          <a
+                            className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                            onClick={() =>
+                              downloadAttachment((uploaded.atflCd || item.splmntAtchFileGroupId)!)
+                            }
+                          >
+                            <Paperclip className="my-1 size-5 shrink-0" />
+                            {uploaded.fileName}
+                          </a>
+                        ) : (
+                          <span className="text-xl">{uploaded.fileName}</span>
+                        )}
+                        {!isRowReadOnly ? (
+                          <Button
+                            type="button"
+                            size="icon"
+                            className="size-8 shrink-0 !bg-destructive"
+                            disabled={uploading}
+                            onClick={() => void handleFileRemove(index)}
+                          >
+                            <i className="diveicon di-x text-xs" aria-label="삭제" />
+                          </Button>
+                        ) : null}
+                      </div>
+                    ) : isRowReadOnly ? (
+                      <span>-</span>
+                    ) : (
+                      <Button type="button" size="sm" disabled={uploading} asChild>
+                        <label htmlFor={fileInputId} className="cursor-pointer">
+                          파일추가
+                          <input
+                            id={fileInputId}
+                            type="file"
+                            className="hidden"
+                            onChange={(event) => {
+                              void handleFileUpload(index, event.target.files);
+                              event.target.value = "";
+                            }}
+                          />
+                        </label>
+                      </Button>
+                    )}
+                  </TableCell>
+                  <TableCell align="center" className="align-top">
+                    <Badge size="lg" color={item.cmptnYn === "Y" ? "green" : "gray"}>
+                      {item.cmptnYn === "Y" ? "완료" : "미완료"}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </SectionCollapsible>
+  );
+}
+
+export { SplmntDmndFormSection };
+export type { SplmntDmndFormItem };
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/supplement-demand-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/supplement-demand-section.tsx
new file mode 100644
index 000000000..c4637fd4e
--- /dev/null
+++ b/apps/as/src/widgets/pbadms-sprt/ui/supplement-demand-section.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { Paperclip } from "lucide-react";
+
+import { dayjs } from "@/shared/lib";
+import type { SplmntDmndResponseExtension, SplmntDmndSaveBase } from "@/shared/model";
+import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
+import {
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { SectionCollapsible } from "./section-collapsible";
+
+type SplmntDmndItem = SplmntDmndSaveBase & SplmntDmndResponseExtension;
+
+interface SupplementDemandSectionProps {
+  splmntDmndList: SplmntDmndItem[];
+}
+
+function SupplementDemandSection({ splmntDmndList }: SupplementDemandSectionProps) {
+  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
+
+  return (
+    <SectionCollapsible title="보완요청 및 완료 현황">
+      <div className="overflow-x-auto">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="14%" />
+            <col width="8%" />
+            <col width="30%" />
+            <col width="8%" />
+            <col width="30%" />
+            <col width="10%" />
+          </colgroup>
+          <TableHeader>
+            <TableRow>
+              <TableHead>보완항목</TableHead>
+              <TableHead>보완요청일시</TableHead>
+              <TableHead>보완요청내용</TableHead>
+              <TableHead>보완완료일시</TableHead>
+              <TableHead>보완완료내용</TableHead>
+              <TableHead>완료여부</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {splmntDmndList.map((item) => {
+              const sn = item.splmntDmndSn;
+              const cmptnYn = item.cmptnYn ?? "N";
+              const dmndAtchFileNm = item.splmntDmndAtchFileInfo?.orgnlFileNm;
+              const cmptnAtchFileNm = item.splmntAtchFileInfo?.orgnlFileNm;
+
+              return (
+                <TableRow key={sn ?? `${item.splmntArtclComCd}-${item.splmntDmndDt}`}>
+                  <TableCell align="center" className="align-top">
+                    {item.splmntArtclCdNm || "-"}
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</div>
+                      {item.splmntDmndAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntDmndAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {dmndAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntCmptnDt
+                      ? dayjs(item.splmntCmptnDt).format("YYYY-MM-DD HH:mm")
+                      : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntCn || "-"}</div>
+                      {item.splmntAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {cmptnAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell align="center" className="align-top">
+                    <Badge size="lg" color={cmptnYn === "Y" ? "green" : "gray"}>
+                      {cmptnYn === "Y" ? "완료" : "미완료"}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </SectionCollapsible>
+  );
+}
+
+export { SupplementDemandSection };
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/text-input-dialog.tsx b/apps/as/src/widgets/pbadms-sprt/ui/text-input-dialog.tsx
deleted file mode 100644
index 168012416..000000000
--- a/apps/as/src/widgets/pbadms-sprt/ui/text-input-dialog.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Textarea,
-} from "@common/components";
-
-interface TextInputDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  placeholder?: string;
-  defaultValue?: string;
-  isSubmitting?: boolean;
-  onConfirm: (text: string) => void;
-}
-
-function TextInputDialog({
-  open,
-  onOpenChange,
-  title,
-  placeholder,
-  defaultValue,
-  isSubmitting,
-  onConfirm,
-}: TextInputDialogProps) {
-  const [value, setValue] = useState("");
-
-  useEffect(() => {
-    if (!open) return;
-    setValue(defaultValue ?? "");
-  }, [defaultValue, open]);
-
-  function handleConfirm() {
-    onConfirm(value.trim());
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[44rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader>
-
-        <Textarea
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          placeholder={placeholder}
-          rows={6}
-          className="!text-xl"
-        />
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
-            취소
-          </Button>
-          <Button
-            type="button"
-            onClick={handleConfirm}
-            disabled={isSubmitting || value.trim().length === 0}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { TextInputDialog };
diff --git a/apps/cm/app/api/proxy/[...url]/route.ts b/apps/cm/app/api/proxy/[...url]/route.ts
index 105b36fa7..57cfc86e8 100644
--- a/apps/cm/app/api/proxy/[...url]/route.ts
+++ b/apps/cm/app/api/proxy/[...url]/route.ts
@@ -2,6 +2,7 @@ import {
   ACCESS_TOKEN,
   AUTH_USER_ID,
   CLAIM_NAME,
+  COOKIE_DOMAIN,
   REFRESH_TOKEN,
   SERVER_API_URL,
   SITE_ID,
@@ -19,6 +20,10 @@ async function handler(
     "Content-Type": "application/json",
     "X-Site-Id": SITE_ID,
   };
+  const deviceId = request.headers.get("X-Device-Id");
+  if (deviceId) {
+    headers["X-Device-Id"] = deviceId;
+  }
   let body = {};
   const isRefreshHandler = params.url.includes("refresh");
 
@@ -57,40 +62,57 @@ async function handler(
     });
 
     console.log(`[Proxy] Response status: ${result.status}`);
-    console.log(`[Proxy] Response headers:`, Object.fromEntries(result.headers.entries()));
+    console.log(
+      `[Proxy] Response headers:`,
+      Object.fromEntries(result.headers.entries()),
+    );
 
     // 2FA 관련 엔드포인트인 경우 응답 본문도 확인
-    const is2FAEndpoint = params.url.includes("2fa") || params.url.includes("auth");
+    const is2FAEndpoint =
+      params.url.includes("2fa") || params.url.includes("auth");
     // 배너 API는 인증 없이 호출 가능
     const isBannerEndpoint = params.url.includes("bnrs");
     let responseData = {};
-    
+
     if (is2FAEndpoint || isBannerEndpoint) {
       try {
         responseData = await result.json();
-        console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} Response data:`, responseData);
+        console.log(
+          `[Proxy] ${is2FAEndpoint ? "2FA" : "Banner"} Response data:`,
+          responseData,
+        );
       } catch {
         // JSON 파싱 실패 시 빈 객체 사용
         console.log(`[Proxy] Failed to parse JSON response`);
       }
     }
 
-    const accessToken = result.headers.get(ACCESS_TOKEN) || result.headers.get('ss-token');
+    const accessToken =
+      result.headers.get(ACCESS_TOKEN) || result.headers.get("ss-token");
     const refreshToken = result.headers.get(REFRESH_TOKEN);
     const userId = result.headers.get(AUTH_USER_ID);
 
-    console.log(`[Proxy] Tokens - accessToken: ${!!accessToken}, userId: ${!!userId}, refreshToken: ${!!refreshToken}`);
-    console.log(`[Proxy] Available headers:`, Array.from(result.headers.keys()));
+    console.log(
+      `[Proxy] Tokens - accessToken: ${!!accessToken}, userId: ${!!userId}, refreshToken: ${!!refreshToken}`,
+    );
+    console.log(
+      `[Proxy] Available headers:`,
+      Array.from(result.headers.keys()),
+    );
 
     // 2FA 또는 배너 엔드포인트이고 실패한 경우 실제 오류 메시지 반환
     if (!result.ok && (is2FAEndpoint || isBannerEndpoint)) {
-      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint failed, returning actual error`);
+      console.log(
+        `[Proxy] ${is2FAEndpoint ? "2FA" : "Banner"} endpoint failed, returning actual error`,
+      );
       return NextResponse.json(responseData, { status: result.status });
     }
 
     // 2FA 또는 배너 엔드포인트이고 성공한 경우 (토큰이 헤더에 없을 수 있음)
     if (result.ok && (is2FAEndpoint || isBannerEndpoint)) {
-      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint succeeded, returning response data`);
+      console.log(
+        `[Proxy] ${is2FAEndpoint ? "2FA" : "Banner"} endpoint succeeded, returning response data`,
+      );
       return NextResponse.json(responseData, { status: result.status });
     }
 
@@ -114,6 +136,7 @@ async function handler(
         cookieStore.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
           sameSite: "lax",
+          domain: COOKIE_DOMAIN,
           path: "/",
         });
       }
diff --git a/apps/cm/package.json b/apps/cm/package.json
index ba980d55c..1f9f98815 100644
--- a/apps/cm/package.json
+++ b/apps/cm/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -12,7 +12,7 @@
     "@common/assets": "workspace:*",
     "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
-    "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -47,6 +47,7 @@
     "sonner": "^2.0.1",
     "tailwindcss-animate": "^1.0.7",
     "tus-js-client": "^4.3.1",
+    "uuid": "^14.0.1",
     "zod": "^3.24.2",
     "zustand": "^5.0.3"
   },
diff --git a/apps/cm/src/entities/auth/api/auth-service.ts b/apps/cm/src/entities/auth/api/auth-service.ts
index a8fa70622..073f95fe2 100644
--- a/apps/cm/src/entities/auth/api/auth-service.ts
+++ b/apps/cm/src/entities/auth/api/auth-service.ts
@@ -12,52 +12,36 @@ import {
 
 import {
   clearRefreshTimer,
-  removeToken,
   setToken,
   setupRefreshTimer,
   tokenManager,
 } from "../lib/token-manager";
-
-function resolveLoginError(message: string | undefined): string {
-  switch (message) {
-    case "Invalid Credentials":
-      return "아이디와 비밀번호가 일치하지 않습니다.";
-    case "User not found":
-      return "존재하지 않는 아이디입니다.";
-    case "User is not active":
-      return "활성화되지 않은 계정입니다.";
-    case "User is not verified":
-      return "이메일 인증이 필요합니다.";
-    default:
-      return message ?? "로그인에 실패했습니다.";
-  }
-}
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
 
 function completeSession(accessToken: string, tokenId: string): void {
   setToken(CLAIM_NAME, accessToken);
   setToken(AUTH_USER_ID, tokenId);
 
-  const remainingMs = getRemainingMs(accessToken);
-  if (remainingMs > 0) {
-    setupRefreshTimer(silentRefresh, remainingMs);
-  }
+  // const remainingMs = getRemainingMs(accessToken);
+  // if (remainingMs > 0) {
+  //   setupRefreshTimer(silentRefresh, remainingMs);
+  // }
 }
 
 async function login(payload: AuthPayload): Promise<void> {
   const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: {
+      "Content-Type": "application/json",
+      "X-Device-Id": getOrCreateDeviceId(),
+    },
     body: JSON.stringify(payload),
   });
 
   const data = await response.json();
 
-  if (!response.ok) {
-    throw new Error(resolveLoginError(data?.message));
-  }
-
-  const accessToken = data[ACCESS_TOKEN] as string | undefined;
-  const tokenId = data[AUTH_USER_ID] as string | undefined;
+  const accessToken = data[ACCESS_TOKEN];
+  const tokenId = data[AUTH_USER_ID];
 
   if (!accessToken || !tokenId) {
     throw new Error("인증 토큰을 받지 못했습니다.");
@@ -71,7 +55,12 @@ async function silentRefresh(): Promise<void> {
   try {
     const response = await fetch(
       `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-      { method: "PUT" },
+      {
+        method: "PUT",
+        headers: {
+          "X-Device-Id": getOrCreateDeviceId(),
+        },
+      },
     );
 
     const data = await response.json();
@@ -80,8 +69,8 @@ async function silentRefresh(): Promise<void> {
       throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
     }
 
-    const accessToken = data[ACCESS_TOKEN] as string | undefined;
-    const tokenId = data[AUTH_USER_ID] as string | undefined;
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
 
     if (!accessToken || !tokenId) {
       throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
@@ -102,8 +91,7 @@ async function silentRefresh(): Promise<void> {
 
 async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
-  removeToken("site-id-key");
-  removeToken("site-theme-key");
+  clearDeviceId();
 
   if (typeof window !== "undefined") {
     window.dispatchEvent(new CustomEvent("auth:logout"));
diff --git a/apps/cm/src/entities/auth/lib/auth-wrapper.tsx b/apps/cm/src/entities/auth/lib/auth-wrapper.tsx
index d1a2a48c3..87f932817 100644
--- a/apps/cm/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/cm/src/entities/auth/lib/auth-wrapper.tsx
@@ -18,10 +18,9 @@ import { getRemainingMs } from "@common/auth";
 import { isAtLoginRedirectUrl } from "@common/network";
 
 import { authService } from "../api/auth-service";
-
 import { getToken, setupRefreshTimer } from "./token-manager";
 
-const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
+export function AuthWrapper({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const userInfo = useUserStore((state) => state.userInfo);
   const setUserInfo = useUserStore((state) => state.setUserInfo);
@@ -31,9 +30,6 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
     if (token) {
       const remainingMs = getRemainingMs(token);
       if (remainingMs > 0) {
-        console.log(
-          `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
-        );
         setupRefreshTimer(authService.silentRefresh, remainingMs);
       }
     }
@@ -79,6 +75,4 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   }, []);
 
   return <>{children}</>;
-};
-
-export { AuthWrapper };
+}
diff --git a/apps/cm/src/entities/auth/lib/device-id.ts b/apps/cm/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..3683c7189
--- /dev/null
+++ b/apps/cm/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+  if (typeof window === "undefined") return "";
+
+  const existing = localStorage.getItem(DEVICE_ID_KEY);
+  if (existing) return existing;
+
+  const id = uuidv4();
+  localStorage.setItem(DEVICE_ID_KEY, id);
+  return id;
+}
+
+export function clearDeviceId(): void {
+  if (typeof window === "undefined") return;
+
+  localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx b/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
index 8faf518f1..e4a542cfa 100644
--- a/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
+++ b/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
@@ -882,11 +882,6 @@ function UserSignupModal({ open, onClose, onSuccess }: UserSignupModalProps) {
                 type="submit"
                 className="user-signup-submit-button"
                 disabled={isLoading}
-                onClick={(e) => {
-                  e.preventDefault();
-                  console.log("회원가입 버튼 클릭됨 - onClick");
-                  handleSubmit(e);
-                }}
               >
                 {isLoading ? "가입 중..." : "회원가입"}
               </button>
diff --git a/apps/cm/src/shared/config/env.ts b/apps/cm/src/shared/config/env.ts
index 5e1392b4d..4d8874f5c 100644
--- a/apps/cm/src/shared/config/env.ts
+++ b/apps/cm/src/shared/config/env.ts
@@ -1,7 +1,7 @@
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST =
   process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
+export const SERVER_API_URL = process.env.SERVER_API_URL;
 export const AUTH_LOGIN_REDIRECT_URL =
   process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "CS";
diff --git a/apps/cm/src/shared/config/index.ts b/apps/cm/src/shared/config/index.ts
index cd83447d5..ea6a6f16a 100644
--- a/apps/cm/src/shared/config/index.ts
+++ b/apps/cm/src/shared/config/index.ts
@@ -1,2 +1,3 @@
 export * from "./api";
+export * from "./auth";
 export * from "./env";
diff --git a/apps/cm/tsconfig.json b/apps/cm/tsconfig.json
index 5b8c29899..05cbfce70 100644
--- a/apps/cm/tsconfig.json
+++ b/apps/cm/tsconfig.json
@@ -22,12 +22,8 @@
         "name": "next"
       }
     ],
-    "baseUrl": "./src",
     "paths": {
-      "@/*": ["./*"],
-      "@common/components": ["../../../packages/common/components/src/"],
-      "@common/config": ["../../../packages/common/config/dist/"],
-      "@common/network": ["../../../packages/common/network/"]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
diff --git a/apps/cs/middleware.ts b/apps/cs/middleware.ts
index 98b741325..adc6077b9 100644
--- a/apps/cs/middleware.ts
+++ b/apps/cs/middleware.ts
@@ -41,7 +41,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    // console.log(logMessages.join("\n"));
+    console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl));
     return addSecurityHeaders(response);
@@ -58,7 +58,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    // console.log(logMessages.join("\n"));
+    console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl), {
       headers: requestHeaders,
@@ -83,7 +83,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Link API Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    // console.log(logMessages.join("\n"));
+    console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl), {
       headers: requestHeaders,
@@ -97,7 +97,7 @@ export function middleware(req: NextRequest) {
   }
 
   logMessages.push("\n--------------------------------\n");
-  // console.log(logMessages.join("\n"));
+  console.log(logMessages.join("\n"));
 
   const response = NextResponse.next();
   return addSecurityHeaders(response);
diff --git a/apps/cs/next.config.ts b/apps/cs/next.config.ts
index 1fdc9639b..d2dcc8d47 100644
--- a/apps/cs/next.config.ts
+++ b/apps/cs/next.config.ts
@@ -19,7 +19,7 @@ const nextConfig: NextConfig = {
     fetches: {
       fullUrl: true,
     },
-  },  
+  },
   async headers() {
     return [
       {
diff --git a/apps/cs/package.json b/apps/cs/package.json
index 8d2f6be96..ea5899360 100644
--- a/apps/cs/package.json
+++ b/apps/cs/package.json
@@ -50,6 +50,7 @@
     "sonner": "^2.0.1",
     "tailwindcss-animate": "^1.0.7",
     "tus-js-client": "^4.3.1",
+    "uuid": "^14.0.1",
     "zod": "^3.24.2",
     "zustand": "^5.0.3"
   },
diff --git a/apps/cs/src/entities/auth/api/auth-service.ts b/apps/cs/src/entities/auth/api/auth-service.ts
index 3efb1bf85..93c0bc0bb 100644
--- a/apps/cs/src/entities/auth/api/auth-service.ts
+++ b/apps/cs/src/entities/auth/api/auth-service.ts
@@ -4,50 +4,29 @@ import {
   CLAIM_NAME,
   ENDPOINT,
 } from "@/shared/config";
-import {
-  type AuthPayload,
-  type AuthService,
-  getRemainingMs,
-} from "@common/auth";
+import { type AuthPayload, type AuthService } from "@common/auth";
 
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
 import {
   clearRefreshTimer,
-  removeToken,
   setToken,
-  setupRefreshTimer,
   tokenManager,
 } from "../lib/token-manager";
 
-function resolveLoginError(message: string | undefined): string {
-  switch (message) {
-    case "Invalid Credentials":
-      return "아이디와 비밀번호가 일치하지 않습니다.";
-    case "User not found":
-      return "존재하지 않는 아이디입니다.";
-    case "User is not active":
-      return "활성화되지 않은 계정입니다.";
-    case "User is not verified":
-      return "이메일 인증이 필요합니다.";
-    default:
-      return message ?? "로그인에 실패했습니다.";
-  }
-}
-
 async function login(payload: AuthPayload): Promise<void> {
   const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: {
+      "Content-Type": "application/json",
+      "X-Device-Id": getOrCreateDeviceId(),
+    },
     body: JSON.stringify(payload),
   });
 
   const data = await response.json();
 
-  if (!response.ok) {
-    throw new Error(resolveLoginError(data?.message));
-  }
-
-  const accessToken = data[ACCESS_TOKEN] as string | undefined;
-  const tokenId = data[AUTH_USER_ID] as string | undefined;
+  const accessToken = data[ACCESS_TOKEN];
+  const tokenId = data[AUTH_USER_ID];
 
   if (!accessToken || !tokenId) {
     throw new Error("인증 토큰을 받지 못했습니다.");
@@ -56,10 +35,10 @@ async function login(payload: AuthPayload): Promise<void> {
   setToken(CLAIM_NAME, accessToken);
   setToken(AUTH_USER_ID, tokenId);
 
-  const remainingMs = getRemainingMs(accessToken);
-  if (remainingMs > 0) {
-    setupRefreshTimer(silentRefresh, remainingMs);
-  }
+  // const remainingMs = getRemainingMs(accessToken);
+  // if (remainingMs > 0) {
+  //   setupRefreshTimer(silentRefresh, remainingMs);
+  // }
 }
 
 async function silentRefresh(): Promise<void> {
@@ -67,7 +46,12 @@ async function silentRefresh(): Promise<void> {
   try {
     const response = await fetch(
       `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-      { method: "PUT" },
+      {
+        method: "PUT",
+        headers: {
+          "X-Device-Id": getOrCreateDeviceId(),
+        },
+      },
     );
 
     const data = await response.json();
@@ -76,8 +60,8 @@ async function silentRefresh(): Promise<void> {
       throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
     }
 
-    const accessToken = data[ACCESS_TOKEN] as string | undefined;
-    const tokenId = data[AUTH_USER_ID] as string | undefined;
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
 
     if (!accessToken || !tokenId) {
       throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
@@ -86,10 +70,10 @@ async function silentRefresh(): Promise<void> {
     setToken(CLAIM_NAME, accessToken);
     setToken(AUTH_USER_ID, tokenId);
 
-    const remainingMs = getRemainingMs(accessToken);
-    if (remainingMs > 0) {
-      setupRefreshTimer(silentRefresh, remainingMs);
-    }
+    // const remainingMs = getRemainingMs(accessToken);
+    // if (remainingMs > 0) {
+    //   setupRefreshTimer(silentRefresh, remainingMs);
+    // }
   } catch (error) {
     console.error(
       `[silentRefresh] Failed at ${new Date().toISOString()}`,
@@ -105,8 +89,7 @@ async function silentRefresh(): Promise<void> {
 
 async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
-  removeToken("site-id-key");
-  removeToken("site-theme-key");
+  clearDeviceId();
 
   if (typeof window !== "undefined") {
     window.dispatchEvent(new CustomEvent("auth:logout"));
diff --git a/apps/cs/src/entities/auth/lib/device-id.ts b/apps/cs/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..3683c7189
--- /dev/null
+++ b/apps/cs/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+  if (typeof window === "undefined") return "";
+
+  const existing = localStorage.getItem(DEVICE_ID_KEY);
+  if (existing) return existing;
+
+  const id = uuidv4();
+  localStorage.setItem(DEVICE_ID_KEY, id);
+  return id;
+}
+
+export function clearDeviceId(): void {
+  if (typeof window === "undefined") return;
+
+  localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/apps/dm/.env.local b/apps/dm/.env.local
index 4cef9d965..5d9ffae06 100644
--- a/apps/dm/.env.local
+++ b/apps/dm/.env.local
@@ -6,18 +6,18 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://localhost:3015
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-# NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-# NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+SERVER_API_URL = http://dev.onasys.co.kr:8000
+CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
+WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service
 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
-NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
-# NEXT_PUBLIC_GATEWAY_URL=http://localhost:8883  # local
+SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
+# GATEWAY_URL=http://localhost:8883  # local
 CONTENTS_INTRO = 31
 CONTENTS_EXAMPLE = 32
 
diff --git a/apps/dm/.env.mindone b/apps/dm/.env.mindone
index 1a11ec6a9..12ca17853 100644
--- a/apps/dm/.env.mindone
+++ b/apps/dm/.env.mindone
@@ -6,20 +6,17 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11315
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-#NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
-#NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
+SERVER_API_URL = http://dev.onasys.co.kr:8000
+CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
+NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
-NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
-NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
-# NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
-#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
+SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 CONTENTS_INTRO = 31
 CONTENTS_EXAMPLE = 32
 
diff --git a/apps/dm/.env.production b/apps/dm/.env.production
index b09c7da8a..fbe11a3a9 100644
--- a/apps/dm/.env.production
+++ b/apps/dm/.env.production
@@ -7,17 +7,17 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devreuse.hasuon.or.kr
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
-NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
+SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
-NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
 NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
-NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
+GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 CONTENTS_INTRO = 24
 CONTENTS_EXAMPLE = 25
 
diff --git a/apps/dm/app/(with-layout)/apply/dmdco/page.tsx b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
index 86262be44..fb893c8fb 100644
--- a/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
+++ b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
@@ -5,11 +5,13 @@
 
 import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import { useRouter } from "next/navigation";
+import { sha512 } from "js-sha512";
 import SubPageHeader from "@/components/SubPageHeader";
 import PostcodeModal from "@/components/PostcodeModal";
 import type { AddrItem } from "@/app/store/sdmMng/postcode-service";
 import { useDmStore } from "@/app/store";
 import { fetchType, getFetch, postFetch, putFetch } from "@/components/ui/api";
+import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
 import { getCookie } from "@common/components/lib";
 
 type Option = { value: string; label: string };
@@ -165,7 +167,7 @@ function Hr({ className = "" }: { className?: string }) {
 
 export default function DemandPlaceRegisterPage() {
   const router = useRouter();
-  const { Common, initializeCommonData } = useDmStore((state) => state);
+  const { Common, initializeCommonData, actionLogin } = useDmStore((state) => state);
   const { selectSidoData, selectSigunData } = Common;
 
   const [editMode, setEditMode] = useState(false);
@@ -424,7 +426,7 @@ export default function DemandPlaceRegisterPage() {
     };
 
     if (password) {
-      payload.dmdAplyPswd = password;
+      payload.dmdAplyPswd = sha512.hex(password);
     }
 
     try {
@@ -443,21 +445,20 @@ export default function DemandPlaceRegisterPage() {
 
         alert("수요처 수정 완료!");
       } else {
-        const response = await postFetch("/reuseFc/request", payload);
-        const responseJson = await response.json().catch(() => null);
-        const savedUser = responseJson?.data ?? payload;
+        await postFetch("/reuseFc/request", payload);
 
-        if (typeof window !== "undefined") {
-          const nextSessionUser = {
-            ...(sessionUser ?? {}),
-            ...savedUser,
-          };
-          delete nextSessionUser.dmdAplyPswd;
-          sessionStorage.setItem("user", JSON.stringify(nextSessionUser));
+        const loginSuccess = await actionLogin({
+          dmdInfoId: fullDmdInfoId,
+          dmdAplyPswd: sha512.hex(password),
+        } as DemandCompType);
+
+        if (!loginSuccess) {
+          alert("수요처 등록은 완료되었지만 자동 로그인에 실패하였습니다. 다시 로그인해 주세요.");
+          return;
         }
 
         alert("수요처 등록 완료!");
-        router.push("/apply/dmdinfo"); // 수요정보등록
+        router.push("/apply/dmdinfo");
       }
 
       setPw("");
diff --git a/apps/dm/app/store/index.tsx b/apps/dm/app/store/index.tsx
index 47170b3db..4291adfba 100644
--- a/apps/dm/app/store/index.tsx
+++ b/apps/dm/app/store/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type ReactNode, createContext, useContext, useRef } from 'react'
+import { type ReactNode, createContext, useContext, useEffect, useRef } from 'react'
 import { useStore } from 'zustand'
 import { type DmStore, StoreZus } from './store'
 
@@ -23,6 +23,11 @@ export const StoreProvider = ({
     // Create store instance if not initialized
     storeRef.current = StoreZus() as StoreApi
   }
+
+  useEffect(() => {
+    storeRef.current?.getState().hydrateLoginUser();
+  }, [])
+
   return (
     <StoreContext.Provider value={storeRef.current}>
       {children}
@@ -39,4 +44,4 @@ export const useDmStore = <T,>(
   }
 
   return useStore(storeContext, selector)
-}
\ No newline at end of file
+}
diff --git a/apps/dm/app/store/sdmMng/index.tsx b/apps/dm/app/store/sdmMng/index.tsx
index c51209515..904c0a6b0 100644
--- a/apps/dm/app/store/sdmMng/index.tsx
+++ b/apps/dm/app/store/sdmMng/index.tsx
@@ -43,6 +43,20 @@ export const sdmInfoFormSchema = z.object({
 
 export type SdmInfoFormData = z.infer<typeof sdmInfoFormSchema>;
 
+export type LoginUser = {
+  dmdCoNm?: string;
+  dmdInfoId?: string;
+  dmdCoSn?: number;
+  zip?: string;
+  daddr?: string;
+  daddr2?: string;
+  telno?: string;
+  ctpvCd?: string;
+  sggCd?: string;
+  rgtr?: string;
+  [key: string]: unknown;
+};
+
 const formatTelno = (telno?: string | null) => {
   const digits = (telno ?? '').replace(/\D/g, '');
 
@@ -512,7 +526,7 @@ const fetchUpdateSdmInfoData = async (data: SdmInfoFormData): Promise<boolean> =
   }
 }
 
-const postSdmLoginData = async (data: DemandCompType) => {
+const postSdmLoginData = async (data: DemandCompType): Promise<boolean> => {
   try {
     const res = await postFetch("/reuseFc/request/login", data);
     const jsonData = await res.json();
@@ -539,9 +553,23 @@ const postSdmLoginData = async (data: DemandCompType) => {
   } catch (error) {
     console.log(error);
     alert("수요처 로그인에 실패하였습니다.");
+    return false;
   }
 }
 
+const getStoredLoginUser = (): LoginUser | null => {
+  if (typeof window === "undefined") return null;
+
+  const sessionUser = sessionStorage.getItem("user");
+  if (!sessionUser) return null;
+
+  try {
+    return JSON.parse(sessionUser) as LoginUser;
+  } catch {
+    return null;
+  }
+};
+
 const getDemandCompList = async (searchText: string, pageCnt: number) => {
   try {
     const url = '/reuseFc/request/' + (searchText ? searchText : '') + '/' + pageCnt;
@@ -586,11 +614,12 @@ const fetchGetSimilarCaseList = async (part: string, value: number | string) =>
  ====================================*/
 export type SdmActions = {
   initializeSdmData: () => void;
+  hydrateLoginUser: () => void;
   insertSdmData: (data: DemandCompType) => Promise<void>;
   insertSdmInfoData: (data: SdmInfoFormData) => Promise<boolean>;
   updateSdmInfoData: (data: SdmInfoFormData) => Promise<boolean>;
   getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>;
-  actionLogin: (data: DemandCompType) => Promise<void>;
+  actionLogin: (data: DemandCompType) => Promise<boolean>;
   getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>;
   getSimilarCaseList: (part: string, value: number | string) => Promise<void>;
   actionLogout: () => Promise<void>;
@@ -616,6 +645,7 @@ export type SdmType = {
     // 로그인관련
     successNextPage: boolean;
     successLogin: boolean;
+    loginUser: LoginUser | null;
   }
 }
 
@@ -637,6 +667,7 @@ export const SdmState: SdmType = {
     // 로그인관련
     successNextPage: false,
     successLogin: false,
+    loginUser: null,
   }
 }
 
@@ -644,6 +675,15 @@ export const SdmReducer = (set: any): SdmActions => {
   return {
     initializeSdmData: async () => {
     },
+    hydrateLoginUser: () => {
+      const loginUser = getStoredLoginUser();
+      set((state: SdmType) => ({
+        Sdm: {
+          ...state.Sdm,
+          loginUser,
+        }
+      }))
+    },
 
     insertSdmData: async (data: DemandCompType) => {
       const preRes = await getSdmInfoStatusList(data.dmdInfoId);
@@ -743,14 +783,20 @@ export const SdmReducer = (set: any): SdmActions => {
       }))
     },
 
-    actionLogin: async (data: DemandCompType) => {
+    actionLogin: async (data: DemandCompType): Promise<boolean> => {
       const loginSuccess = await postSdmLoginData(data);
+      const loginUser = loginSuccess ? getStoredLoginUser() : undefined;
       set((state: SdmType) => ({
         Sdm: {
           ...state.Sdm,
           successLogin: loginSuccess,
+          loginUser:
+            loginSuccess
+              ? loginUser
+              : state.Sdm.loginUser,
         }
       }))
+      return loginSuccess;
     },
 
     // 유사사례 조회
@@ -792,6 +838,7 @@ export const SdmReducer = (set: any): SdmActions => {
         Sdm: {
           ...state.Sdm,
           successLogin: false,
+          loginUser: null,
         }
       }))
     },
diff --git a/apps/dm/components/TopNav.tsx b/apps/dm/components/TopNav.tsx
index 5e24ead78..741dbed2a 100644
--- a/apps/dm/components/TopNav.tsx
+++ b/apps/dm/components/TopNav.tsx
@@ -8,9 +8,6 @@ import LoginModal from "@/components/LoginModal";
 import { fetchAnonymousMenu, isMenuActive, type MenuItem } from "@/app/store/common";
 import { useDmStore } from "@/app/store";
 
-// const LS_TOKEN_KEY = "reuse_accessToken";
-const LS_USER_KEY = "user";
-
 const DEFAULT_NAV_ITEMS: Pick<MenuItem, "menuCd" | "menuKornNm" | "urlPath" | "newWndwYn">[] = [
   { menuCd: 1, menuKornNm: "물 재이용 소개", urlPath: "/intro", newWndwYn: "N" },
   { menuCd: 2, menuKornNm: "물 재이용 현황", urlPath: "/status", newWndwYn: "N" },
@@ -22,21 +19,11 @@ export default function TopNav() {
   const router = useRouter();
   const pathname = usePathname();
 
-  const { actionLogout } = useDmStore((state) => state);
+  const { actionLogout, Sdm } = useDmStore((state) => state);
+  const { loginUser } = Sdm;
   const [loginOpen, setLoginOpen] = useState(false);
-  const [userName, setUserName] = useState<string | null>(null);
   const [topMenus, setTopMenus] = useState<MenuItem[]>([]);
 
-  useEffect(() => {
-    const sessionUser = sessionStorage.getItem(LS_USER_KEY);
-    if (sessionUser) {
-      const parsed = JSON.parse(sessionUser) as { dmdCoNm?: string };
-      setUserName(parsed.dmdCoNm ?? "수요처");
-    } else {
-      setUserName(null);
-    }
-  }, []);
-
   useEffect(() => {
     let isMounted = true;
 
@@ -72,13 +59,13 @@ export default function TopNav() {
       otptYn: "Y",
     }));
   }, [topMenus]);
+
+  const userName = loginUser?.dmdCoNm ?? null;
+  const isLoggedIn = Boolean(loginUser);
   
   const openLogin = () => setLoginOpen(true);
 
   const logout = async () => {
-    // localStorage.removeItem(LS_TOKEN_KEY);
-    // localStorage.removeItem(LS_USER_KEY);
-    setUserName(null);
     await actionLogout();
     router.push("/main");
   };
@@ -113,7 +100,7 @@ export default function TopNav() {
                   active ? "text-sky-700" : "text-gray-800 hover:text-sky-700",
                 ].join(" ");
 
-                if (requiresLogin && !userName) {
+                if (requiresLogin && !isLoggedIn) {
                   return (
                     <button
                       key={item.menuCd}
@@ -149,7 +136,7 @@ export default function TopNav() {
 
             {/* ✅ 우측: 로그인 버튼 / 로그인 정보 + 로그아웃 */}
             <div className="flex items-center gap-3">
-              {!userName ? (
+              {!isLoggedIn ? (
                 <button
                   type="button"
                   onClick={openLogin}
@@ -197,10 +184,7 @@ export default function TopNav() {
       <LoginModal
         open={loginOpen}
         onClose={() => setLoginOpen(false)}
-        onSuccess={({ userName: nextUserName }) => {
-          // localStorage.setItem(LS_USER_KEY, nextUserName);
-          // if (accessToken) localStorage.setItem(LS_TOKEN_KEY, accessToken);
-          setUserName(nextUserName);
+        onSuccess={() => {
           setLoginOpen(false);
           router.refresh();
         }}
diff --git a/apps/dm/middleware.ts b/apps/dm/middleware.ts
index c2a228931..af427a9a6 100644
--- a/apps/dm/middleware.ts
+++ b/apps/dm/middleware.ts
@@ -1,14 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
 import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
-// import { SERVER_API_FO_URL, SERVER_API_WR_URL } from "./src/shared/config/env";
+import { SERVER_API_FO_URL, SERVER_API_WR_URL } from "./src/shared/config/env";
 
 // const CLAIM_NAME = "Authorization";
 // const AUTH_USER_ID = "token-id";
-const serverApiUrl = process.env.NEXT_PUBLIC_CS_SERVER_API_URL;
+const serverApiUrl = process.env.CS_SERVER_API_URL;
 const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
 const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
-const GATEWAY_URL = process.env.NEXT_PUBLIC_GATEWAY_URL || "";
-// const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
+const GATEWAY_URL = process.env.GATEWAY_URL || "";
+// const SEWERAGE_API_URL = process.env.SEWERAGE_API_URL || "";
 const BUSINESS_JUSO_API_URL = process.env.NEXT_PUBLIC_FINDADRESS_URL || "";
 const AdressKey = process.env.NEXT_PRIVATE_WR_ADDRESS_KEY || "";
 
@@ -117,12 +117,12 @@ export function middleware(req: NextRequest) {
 
   if (pathname.startsWith("/reuse-service")) {
     const queryParams = searchParams.toString();
-    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
+    const newUrl = `${SERVER_API_WR_URL}${pathname.replace("/reuse-service", "")}${queryParams ? `?${queryParams}` : ""}`;
     console.log(`[Middleware] Rewriting from '/reuse-service' path to: ${newUrl}`);
     return NextResponse.rewrite(new URL(newUrl));
   } else if (pathname.startsWith("/operation-service")) {
     const queryParams = searchParams.toString();
-    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
+    const newUrl = `${SERVER_API_FO_URL}${pathname.replace("/operation-service", "")}${queryParams ? `?${queryParams}` : ""}`;
     console.log(`[Middleware] Rewriting from '/operation-service' path to: ${newUrl}`);
     return NextResponse.rewrite(new URL(newUrl));
   } else if (pathname.startsWith("/sewerage-service")) {
diff --git a/apps/dm/package.json b/apps/dm/package.json
index 47e12bf51..9ea8ad7a4 100644
--- a/apps/dm/package.json
+++ b/apps/dm/package.json
@@ -6,7 +6,10 @@
     "dev": "next dev -p 3015",
     "build": "next build",
     "start:dm": "next start -p 3015",
-    "lint": "next lint"
+    "lint": "next lint",
+    "dev:e2e": "next dev --port 3016",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "@common/assets": "workspace:*",
@@ -27,6 +30,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.61.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
     "eslint-config-next": "15.3.8",
diff --git a/apps/dm/src/shared/config/env.ts b/apps/dm/src/shared/config/env.ts
index a9011b90e..b46b99fad 100644
--- a/apps/dm/src/shared/config/env.ts
+++ b/apps/dm/src/shared/config/env.ts
@@ -1,13 +1,12 @@
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DM";
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_DM_URL = process.env.NEXT_PUBLIC_DM_SERVER_API_URL ||'http://con.mind-one.co.kr:11035/api/v1';
-export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
-export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL||' http://con.mind-one.co.kr:11080/api/v1';
-export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+export const SERVER_API_FO_URL = process.env.FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
+export const SERVER_API_WR_URL = process.env.WR_SERVER_API_URL||' http://con.mind-one.co.kr:11080/api/v1';
+export const SERVER_API_CS_URL = process.env.CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
 export const SERVER_API_CS_TUS_URL = process.env.NEXT_PUBLIC_CS_TUS_UPLOAD ||'/attach-service/api/v1/tus/upload'
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
 export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL;
\ No newline at end of file
+export const SERVER_SEWERAGE_API_URL = process.env.SEWERAGE_API_URL;
\ No newline at end of file
diff --git a/apps/fo/.env.local b/apps/fo/.env.local
index 646d80c2c..e6349c58f 100644
--- a/apps/fo/.env.local
+++ b/apps/fo/.env.local
@@ -7,13 +7,14 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://localhost:3000
 NEXT_PUBLIC_SUB_DOMAIN = http://localhost:13000
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://localhost:3001/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
-NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com/dc-service
-NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service  # 개발 서버 API
+DC_URL     = https://apigateway.apps.rsonesoft.com/dc-service
+SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service  # 개발 서버 API
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 # NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
diff --git a/apps/fo/.env.mindone b/apps/fo/.env.mindone
index 2fd7e91c2..1e7525b27 100644
--- a/apps/fo/.env.mindone
+++ b/apps/fo/.env.mindone
@@ -7,13 +7,14 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300
 NEXT_PUBLIC_SUB_DOMAIN = http://con.mind-one.co.kr:13000
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
-NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com/dc-service
-NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service
+DC_URL     = https://apigateway.apps.rsonesoft.com/dc-service
+SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /
\ No newline at end of file
diff --git a/apps/fo/.env.production b/apps/fo/.env.production
index bd0d0f04b..183883e5a 100644
--- a/apps/fo/.env.production
+++ b/apps/fo/.env.production
@@ -7,14 +7,16 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devlarva.hasuon.or.kr
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
-NEXT_PUBLIC_SERVER_API_URL =  http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service
-NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service
-NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+SERVER_API_URL =  http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+FO_SERVER_API_URL =  http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
+CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
-NEXT_PUBLIC_DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000/dc-service
-NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
+DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000/dc-service
+SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
 NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
\ No newline at end of file
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
+NEXT_PUBLIC_COOKIE_DOMAIN=.hasuon.or.kr
\ No newline at end of file
diff --git a/apps/fo/app/(auth)/auth/layout.tsx b/apps/fo/app/(auth)/auth/layout.tsx
new file mode 100644
index 000000000..2e676e5e0
--- /dev/null
+++ b/apps/fo/app/(auth)/auth/layout.tsx
@@ -0,0 +1,17 @@
+import "@/src/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/apps/fo/app/(auth)/auth/login/page.tsx b/apps/fo/app/(auth)/auth/login/page.tsx
new file mode 100644
index 000000000..52bab35c9
--- /dev/null
+++ b/apps/fo/app/(auth)/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/src/auth/login";
+export default LoginPage;
diff --git a/apps/fo/app/api/proxy/[...url]/route.ts b/apps/fo/app/api/proxy/[...url]/route.ts
index cf6447b1a..39f4281e3 100644
--- a/apps/fo/app/api/proxy/[...url]/route.ts
+++ b/apps/fo/app/api/proxy/[...url]/route.ts
@@ -1,111 +1,124 @@
-/**
- * 📄 Proxy Route
- * API 프록시 라우트
- *
- * - 서버 API로의 요청 프록시 처리
- * - 쿠키 기반 인증 토큰 및 리프레시 토큰 관리
- * - POST 및 PUT 요청 핸들링
- * - 사용자 인증 정보 검증 및 응답 처리
- * - 에러 핸들링 및 상태 코드 반환
- * - 사이트 ID 및 헤더 설정
- */
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    COOKIE_DOMAIN,
+    REFRESH_TOKEN,
+    SERVER_API_URL,
+    SITE_ID,
+} from "@/src/shared/config";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
-const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
-const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
-const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
-
 async function handler(
-  request: Request,
-  params: { url: string[] },
-  method: "GET" | "POST" | "PUT" | "DELETE",
+    request: Request,
+    params: { url: string[] },
+    method: "GET" | "POST" | "PUT" | "DELETE",
 ) {
-  const cookieStore = await cookies();
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    "X-Site-Id": SITE_ID,
-  };
-  let body = {};
-  const isRefreshHandler = params.url.includes("refresh");
-
-  // silent refresh
-  if (isRefreshHandler) {
-    const refreshToken = cookieStore.get(REFRESH_TOKEN);
-    headers[CLAIM_NAME] = refreshToken?.value ?? "";
-
-    if (!headers[CLAIM_NAME]) {
-      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
+    const cookieStore = await cookies();
+    const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        "X-Site-Id": SITE_ID,
+    };
+    const deviceId = request.headers.get("X-Device-Id");
+    if (deviceId) {
+        headers["X-Device-Id"] = deviceId;
     }
-  }
+        
+    let body = {};
+    const isRefreshHandler = params.url.includes("refresh");
 
-  try {
-    if (!isRefreshHandler) {
-      body = await request.json();
+    // silent refresh
+    if (isRefreshHandler) {
+        const refreshToken = cookieStore.get(REFRESH_TOKEN);
+        headers[CLAIM_NAME] = refreshToken?.value ?? "";
+
+        if (!headers[CLAIM_NAME]) {
+            return NextResponse.json(
+                { message: "Can't refresh" },
+                { status: 401 },
+            );
+        }
     }
 
-    const result = await fetch(`${SERVER_API_URL}/${params.url.join("/")}`, {
-      method,
-      headers,
-      body: JSON.stringify(body),
-    });
+    try {
+        if (!isRefreshHandler) {
+            body = await request.json();
+        }
 
-    if (!result.ok) {
-      console.log("Invalid Credentials ");
-      return NextResponse.json(
-        { message: "Invalid Credentials" },
-        { status: 401 },
-      );
+        const result = await fetch(
+            `${SERVER_API_URL}/${params.url.join("/")}`,
+            {
+                method,
+                headers,
+                body: JSON.stringify(body),
+            },
+        );
+
+        if (!result.ok) {
+            return NextResponse.json(
+                { message: "Invalid Credentials" },
+                { status: 401 },
+            );
+        }
+
+        const accessToken = result.headers.get(ACCESS_TOKEN);
+        const refreshToken = result.headers.get(REFRESH_TOKEN);
+        const userId = result.headers.get(AUTH_USER_ID);
+
+        if (accessToken && userId) {
+            const response = NextResponse.json({
+                [ACCESS_TOKEN]: accessToken,
+                [AUTH_USER_ID]: userId,
+            });
+
+            if (refreshToken) {
+                cookieStore.set(REFRESH_TOKEN, refreshToken, {
+                    httpOnly: true,
+                    sameSite: "lax",
+                    domain: getCookieDomain(),
+                    path: "/",
+                });
+            }
+
+            return response;
+        }
+
+        return NextResponse.json(
+            { message: "Invalid Credentials" },
+            { status: 401 },
+        );
+    } catch (error) {
+        return NextResponse.json(
+            { message: "Server Error", error },
+            { status: 500 },
+        );
     }
-
-    const accessToken = result.headers.get(ACCESS_TOKEN);
-    const refreshToken = result.headers.get(REFRESH_TOKEN);
-    const userId = result.headers.get(AUTH_USER_ID);
-
-    if (accessToken && userId) {
-      const response = NextResponse.json({
-        [ACCESS_TOKEN]: accessToken,
-        [AUTH_USER_ID]: userId,
-      });
-
-      if (refreshToken) {
-        cookieStore.set(REFRESH_TOKEN, refreshToken, {
-          httpOnly: true,
-          sameSite: "lax",
-          path: "/",
-        });
-      }
-
-      return response;
-    }
-
-    return NextResponse.json(
-      { message: "Invalid Credentials" },
-      { status: 401 },
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Server Error", error },
-      { status: 500 },
-    );
-  }
 }
 
 export async function POST(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "POST");
+    const params = await props.params;
+    return handler(request, params, "POST");
 }
 
 export async function PUT(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "PUT");
+    const params = await props.params;
+    return handler(request, params, "PUT");
+}
+
+function getCookieDomain(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+
+  if (COOKIE_DOMAIN) return COOKIE_DOMAIN;
+
+  const { hostname } = window.location;
+  if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
+
+  return hostname;
 }
diff --git a/apps/fo/app/auth/login/page.tsx b/apps/fo/app/auth/login/page.tsx
deleted file mode 100644
index 0dbc42284..000000000
--- a/apps/fo/app/auth/login/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { LoginPage } from "@/src/features/auth/login";
-export default LoginPage;
diff --git a/apps/fo/app/auth/login/route-bak.ts b/apps/fo/app/auth/login/route-bak.ts
deleted file mode 100644
index 65bbce15e..000000000
--- a/apps/fo/app/auth/login/route-bak.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-export async function GET(request: NextRequest) {
-  const hostname = request.nextUrl.hostname;
-  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
-
-  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
-    return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경
-  } else {
-    return NextResponse.redirect(new URL(redirectUrl)); // 공단 환경
-  }
-}
\ No newline at end of file
diff --git a/apps/fo/app/components/api/config/env.ts b/apps/fo/app/components/api/config/env.ts
index 1c0ba8b0e..009916beb 100644
--- a/apps/fo/app/components/api/config/env.ts
+++ b/apps/fo/app/components/api/config/env.ts
@@ -1,5 +1,5 @@
 import { PROXY_HOST } from "@/src/shared/config/env";
 
-export const DEV_URL_FO = "/operation-service/api/v1";
+export const DEV_URL_FO = "/operation-service";
 export const LOCAL_URL = PROXY_HOST;
-export const DEV_URL_WR = "/reuse-service/api/v1";
\ No newline at end of file
+export const DEV_URL_WR = "/reuse-service";
diff --git a/apps/fo/app/components/api/index.ts b/apps/fo/app/components/api/index.ts
index 542e72947..5fab2ee12 100644
--- a/apps/fo/app/components/api/index.ts
+++ b/apps/fo/app/components/api/index.ts
@@ -1,14 +1,17 @@
 import { CLAIM_NAME, SITE_ID } from "@/src/shared/config/env";
 import { tokenManager } from "@/src/entities/auth/lib/token-manager";
+import { getRemainingMs } from "@common/auth";
 import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "./config/env";
 
 const LOGIN_PAGE_URL =
   process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
 
+// client 화면인 경우, 토큰 만료여부 점검하여 로그인 페이지로 이동
 const handleUnauthorizedResponse = () => {
   if (typeof window === "undefined") return;
 
-  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const accessToken = tokenManager.getToken(CLAIM_NAME);
+  const remainingMs = accessToken ? getRemainingMs(accessToken) : null;
   const isExpired = remainingMs === null || remainingMs <= 0;
 
   if (!isExpired) return;
diff --git a/apps/fo/app/page.tsx b/apps/fo/app/page.tsx
index 143dfdc90..351e87885 100644
--- a/apps/fo/app/page.tsx
+++ b/apps/fo/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoginApi } from "@/src/entities/auth";
+import { authService } from "@/src/entities/auth";
 import { useEffect } from "react";
 import { AUTH_USER_ID } from "@/src/shared/config";
 import { getCookie } from "@/src/shared/lib/cookie";
@@ -17,7 +17,7 @@ export default function Home() {
       if (!checkToken) {
         async function doLogin() {
           try {
-            await LoginApi.login({ userId: "CLEANWATER", password: "gktneh12!@" });
+            await authService.login({ userId: "CLEANWATER", password: "gktneh12!@" });
             window.location.href = "/pages/dashboard";
           } catch (err) {
             console.error("로그인 실패", err);
diff --git a/apps/fo/app/pages/(map-layout)/layout.tsx b/apps/fo/app/pages/(map-layout)/layout.tsx
index 69a60b7a2..9c45eabc8 100644
--- a/apps/fo/app/pages/(map-layout)/layout.tsx
+++ b/apps/fo/app/pages/(map-layout)/layout.tsx
@@ -3,6 +3,7 @@ import { NoFooterLayout } from "@common/components";
 import type { MenuItem } from "../../store/common";
 import { useFoStore } from "../../store";
 import { usePathname, useRouter } from "next/navigation";
+// import { authService } from "@/src/entities/auth";
 
 export default function RootLayout({
   children,
diff --git a/apps/fo/app/pages/(with-layout)/jwttest/page.tsx b/apps/fo/app/pages/(with-layout)/jwttest/page.tsx
new file mode 100644
index 000000000..c9df447ef
--- /dev/null
+++ b/apps/fo/app/pages/(with-layout)/jwttest/page.tsx
@@ -0,0 +1,220 @@
+/**
+ * JWT를 decoding하면 만료시간을 읽을 수 있다.
+ * JWT는 3부분으로 구성 : Header.Payload.Signature
+ * Payload 부분에 만료시간(exp)이 있다.
+ */
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { authService } from "@/src/entities/auth";
+import { CLAIM_NAME } from "@/src/shared/config";
+import { getCookie } from "@/src/shared/lib";
+
+interface JwtPayload {
+  sub?: string; // 토큰 subject. 일반적으로 사용자 식별자나 주체 정보
+  exp?: number; // 만료 시각(Unix timestamp, 초 단위)
+  iat?: number; // 토큰 발급 시각(Unix timestamp, 초 단위)
+  [key: string]: unknown; // 그 외 JWT payload에 포함될 수 있는 추가 클레임
+}
+
+interface JwtState {
+  token: string; // 쿠키에서 읽어온 JWT 원본 문자열
+  payload: JwtPayload | null; // JWT를 파싱한 payload 객체
+  exp: number | null; // payload에서 추출한 exp 값
+  expDateLocal: string | null; // exp를 로컬 시간 문자열로 변환한 값
+  remainingMs: number | null; // 현재 시각 기준 남은 시간(ms)
+  error: string | null; // 쿠키 없음, 파싱 실패 등 오류 메시지
+}
+
+const initialJwtState: JwtState = {
+  token: "",
+  payload: null,
+  exp: null,
+  expDateLocal: null,
+  remainingMs: null,
+  error: null,
+};
+
+function parseJwt(token: string): JwtPayload {
+  const parts = token.split(".");
+  if (parts.length !== 3) {
+    throw new Error("유효한 JWT 형식이 아닙니다.");
+  }
+
+  const base64Url = parts[1] ?? ""; // Payload를 가져온다.
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+  const jsonPayload = decodeURIComponent(
+    atob(padded)
+      .split("")
+      .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
+      .join("")
+  );
+
+  return JSON.parse(jsonPayload) as JwtPayload;
+}
+
+function formatRemainingMs(remainingMs: number | null): string {
+  if (remainingMs === null) return "-";
+  if (remainingMs <= 0) return "만료됨";
+
+  const totalSeconds = Math.floor(remainingMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${hours}시간 ${minutes}분 ${seconds}초`;
+}
+
+function readJwtState(): JwtState {
+  const token = getCookie(CLAIM_NAME) ?? "";
+
+  if (!token) {
+    return {
+      token: "",
+      payload: null,
+      exp: null,
+      expDateLocal: null,
+      remainingMs: null,
+      error: `${CLAIM_NAME} 쿠키가 없습니다.`,
+    };
+  }
+
+  try {
+    const payload = parseJwt(token);
+
+    if (typeof payload.exp !== "number") {
+      return {
+        token,
+        payload,
+        exp: null,
+        expDateLocal: null,
+        remainingMs: null,
+        error: "JWT payload에 exp 값이 없습니다.",
+      };
+    }
+
+    const expMs = payload.exp * 1000;
+
+    return {
+      token,
+      payload,
+      exp: payload.exp,
+      expDateLocal: new Date(expMs).toLocaleString(),
+      remainingMs: Math.max(expMs - Date.now(), 0),
+      error: null,
+    };
+  } catch (error) {
+    return {
+      token,
+      payload: null,
+      exp: null,
+      expDateLocal: null,
+      remainingMs: null,
+      error:
+        error instanceof Error
+          ? error.message
+          : "JWT 파싱 중 오류가 발생했습니다.",
+    };
+  }
+}
+
+export default function Page() {
+  const [jwtState, setJwtState] = useState<JwtState>(initialJwtState);
+  const isRefreshingRef = useRef(false);
+
+  const handleSilentRefresh = async () => {
+    try {
+      await authService.silentRefresh();
+    } catch (error) {
+      console.error("Manual silent refresh failed:", error);
+    } finally {
+      setJwtState(readJwtState());
+    }
+  };
+
+  useEffect(() => {
+    const syncJwtState = async () => {
+      const nextState = readJwtState();
+
+      if (
+        nextState.remainingMs !== null &&
+        nextState.remainingMs > 0 &&
+        nextState.remainingMs < 5 * 60 * 1000 &&
+        !isRefreshingRef.current
+      ) {
+        isRefreshingRef.current = true;
+        try {
+          await authService.silentRefresh();
+        } catch (error) {
+          console.error("JWT test silent refresh failed:", error);
+        }
+      }
+
+      setJwtState(readJwtState());
+
+      if (
+        nextState.remainingMs === null ||
+        nextState.remainingMs >= 5 * 60 * 1000 ||
+        nextState.remainingMs <= 0
+      ) {
+        isRefreshingRef.current = false;
+      }
+    };
+
+    void syncJwtState();
+    const timer = window.setInterval(() => {
+      void syncJwtState();
+    }, 1000);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="space-y-4 p-8 text-base">
+      <h1 className="text-2xl font-bold">JWT Exp Test</h1>
+
+      <button
+        type="button"
+        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+        onClick={() => {
+          void handleSilentRefresh();
+        }}
+      >
+        Silent Refresh 호출
+      </button>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">쿠키명</div>
+        <div>{CLAIM_NAME}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">exp</div>
+        <div>{jwtState.exp ?? "-"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">만료시각</div>
+        <div>{jwtState.expDateLocal ?? "-"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">남은시간</div>
+        <div>{formatRemainingMs(jwtState.remainingMs)}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">상태</div>
+        <div>{jwtState.error ?? "정상"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">payload</div>
+        <pre className="overflow-auto whitespace-pre-wrap break-all text-sm">
+          {jwtState.payload ? JSON.stringify(jwtState.payload, null, 2) : "-"}
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/fo/app/pages/(with-layout)/layout.tsx b/apps/fo/app/pages/(with-layout)/layout.tsx
index 38276b541..768d66670 100644
--- a/apps/fo/app/pages/(with-layout)/layout.tsx
+++ b/apps/fo/app/pages/(with-layout)/layout.tsx
@@ -7,6 +7,7 @@ import { useFoStore } from "@/app/store";
 import { usePathname, useRouter } from "next/navigation";
 import { useMenuStore } from "@/src/shared/lib";
 import { PageLayout } from "@/src/shared/ui/page-layout";
+import { authService } from "@/src/entities/auth";
 
 export default function RootLayout({
   children,
@@ -28,6 +29,7 @@ export default function RootLayout({
   return (
     <BaseLayout
       queryClient={queryClient}
+      authService={authService}
       currentPath={pathname ?? ""}
       handleMenuClick={handleClick}
     >
diff --git a/apps/fo/middleware.ts b/apps/fo/middleware.ts
index f9891ff7d..e3ee26b31 100644
--- a/apps/fo/middleware.ts
+++ b/apps/fo/middleware.ts
@@ -5,9 +5,9 @@ const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
 const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
 const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
-const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
+const SEWERAGE_API_URL = process.env.SEWERAGE_API_URL || "";
 const serverApiUrl = SERVER_API_CS_URL;
-const DC_URL = process.env.NEXT_PUBLIC_DC_URL || "";
+const DC_URL = process.env.DC_URL || "";
 
 /** 공통: URLSearchParams의 값을 decodeURIComponent 적용하여 querystring 생성 */
 function toDecodedQueryString(params: URLSearchParams): string {
diff --git a/apps/fo/package.json b/apps/fo/package.json
index 4dd6c3e3c..84b192049 100644
--- a/apps/fo/package.json
+++ b/apps/fo/package.json
@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "@common/assets": "workspace:*",
-    "@common/business_components": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
+    "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
+    "@common/business_components": "workspace:*",
     "@tailwindcss/vite": "^4.0.10",
     "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
@@ -32,7 +35,8 @@
     "react-hook-form": "^7.54.2",
     "zod": "^3.24.2",
     "axios": "^1.8.1",
-    "proj4": "^2.9.0"
+    "proj4": "^2.9.0",
+    "uuid": "^14.0.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/apps/fo/src/features/auth/login/index.ts b/apps/fo/src/auth/login/index.ts
similarity index 100%
rename from apps/fo/src/features/auth/login/index.ts
rename to apps/fo/src/auth/login/index.ts
diff --git a/apps/fo/src/auth/login/ui/login-page.tsx b/apps/fo/src/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..6398700b9
--- /dev/null
+++ b/apps/fo/src/auth/login/ui/login-page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { authService } from "@/src/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setErrorMessage("");
+
+        const formData = new FormData(e.target as HTMLFormElement);
+        const userId = formData.get("id") as string;
+        const password = formData.get("password") as string;
+
+        try {
+            await authService.login({ userId, password });
+            window.location.href = "/";
+        } catch (error) {
+            const message =
+                error instanceof Error
+                    ? error.message
+                    : "로그인에 실패했습니다.";
+            setErrorMessage(message);
+        }
+    };
+
+    return (
+        <div className="login fx">
+            <div className="left_box fx">
+                <div className="text">
+                    <h1>
+                        유역하수도통합플랫폼
+                        <br />
+                        <span>하수도통계 관리시스템</span>
+                    </h1>
+                    <p>
+                        유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을
+                        환영합니다.
+                    </p>
+                </div>
+                <div className="img">
+                    <Image
+                        src={images.logo}
+                        width={229}
+                        height={46}
+                        alt="logo"
+                    />
+                </div>
+            </div>
+            <form
+                id="loginForm"
+                name="loginForm"
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                <div className="login_box fx">
+                    <ul className="fx">
+                        <li>
+                            <h2>ID</h2>
+                            <div className="input_st st1">
+                                <i className="diveicon di-account-box" />
+                                <input
+                                    type="text"
+                                    className="id"
+                                    title="아이디를 입력하세요."
+                                    id="id"
+                                    name="id"
+                                    maxLength={12}
+                                />
+                            </div>
+                        </li>
+                        <li>
+                            <h2>PASSWORD</h2>
+                            <div className="input_st st2">
+                                <i className="diveicon di-key" />
+                                <input
+                                    type="password"
+                                    className="input_style"
+                                    maxLength={25}
+                                    title="비밀번호를 입력하세요."
+                                    id="password"
+                                    name="password"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                    <div className="bottom_box fx">
+                        <div className="checks fx">
+                            <input
+                                type="checkbox"
+                                name="checkId"
+                                title="로그인ID 저장여부"
+                                id="checkId"
+                            />
+                            <label htmlFor="checkId">아이디저장</label>
+                        </div>
+                        {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+                    </div>
+                    {errorMessage && (
+                        <div className="error_message">
+                            <span>{errorMessage}</span>
+                        </div>
+                    )}
+                    <button type="submit" className="login_btn fx">
+                        <span>LOGIN</span>
+                    </button>
+                    <div className="footer">
+                        <div className="copy fx">
+                            <p>copyright © 2023 KECO. All rights reserved.</p>
+                        </div>
+                        <div className="fot_btn fx">
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                                target="_blank"
+                            >
+                                개인정보처리방침
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                                target="_blank"
+                            >
+                                저작권정책안내
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                                target="_blank"
+                            >
+                                이메일무단수집거부
+                            </a>
+                        </div>
+                        <p className="addr fx">
+                            <span>
+                                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                                종합환경연구단지)
+                            </span>
+                            <span>
+                                전화 : (시스템) 032-590-4321, 3752, 4314 / (통
+                                계) 032-590-3723, 3722
+                            </span>
+                            <span>팩스 :032-590-3729</span>
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+export { LoginPage };
diff --git a/apps/fo/src/features/auth/login/ui/login.css b/apps/fo/src/auth/login/ui/login.css
similarity index 94%
rename from apps/fo/src/features/auth/login/ui/login.css
rename to apps/fo/src/auth/login/ui/login.css
index af73c9c68..e65180ae7 100644
--- a/apps/fo/src/features/auth/login/ui/login.css
+++ b/apps/fo/src/auth/login/ui/login.css
@@ -1,4 +1,4 @@
-/**
+/**
 * OLYM Cascading Style Sheets
 * File Name : login.css
 * Description : 로그인 스타일시트
@@ -24,7 +24,8 @@ body {
 }
 .login .left_box {
   width: 100%;
-  background: url(/images/bg_login.jpg) no-repeat center/cover;
+  background: url(../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
   flex-direction: column;
   justify-content: space-between;
   padding: 7% 5% 5% 5%;
@@ -117,6 +118,20 @@ body {
   color: #327af5;
   font-size: 20px;
 }
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
 .login .login_box .login_btn {
   position: relative;
   border-radius: 5px;
diff --git a/apps/fo/src/entities/auth/api/auth-service.ts b/apps/fo/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..2ea6bab12
--- /dev/null
+++ b/apps/fo/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,115 @@
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { getCookie } from "@/src/shared/lib";
+import {
+    type AuthPayload,
+    type AuthService,
+    getRemainingMs,
+} from "@common/auth";
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
+import {
+    clearRefreshTimer,
+    setToken,
+    setupRefreshTimer,
+    tokenManager,
+} from "../lib/token-manager";
+
+import { clearTabStorePersist } from "@/src/store/tab-store";
+
+async function login(payload: AuthPayload): Promise<void> {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "X-Device-Id": getOrCreateDeviceId(),
+        },
+        body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+        throw new Error("인증 토큰을 받지 못했습니다.");
+    }
+
+    const prevTokenId = getCookie(AUTH_USER_ID);
+    if (prevTokenId !== undefined && prevTokenId !== tokenId) {
+        clearTabStorePersist();
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+        setupRefreshTimer(silentRefresh, remainingMs);
+    }
+}
+
+async function silentRefresh(): Promise<void> {
+    console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+    try {
+        const response = await fetch(
+            `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+            {
+                method: "PUT",
+                headers: {
+                    "X-Device-Id": getOrCreateDeviceId(),
+                },
+            },
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+        }
+
+        const accessToken = data[ACCESS_TOKEN];
+        const tokenId = data[AUTH_USER_ID];
+
+        if (!accessToken || !tokenId) {
+            throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+        }
+
+        setToken(CLAIM_NAME, accessToken);
+        setToken(AUTH_USER_ID, tokenId);
+
+        const remainingMs = getRemainingMs(accessToken);
+        if (remainingMs > 0) {
+            setupRefreshTimer(silentRefresh, remainingMs);
+        }
+    } catch (error) {
+        console.error(
+            `[silentRefresh] Failed at ${new Date().toISOString()}`,
+            error,
+        );
+        tokenManager.clearAuthToken();
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("auth:logout"));
+        }
+    }
+}
+
+export async function logout(): Promise<void> {
+    tokenManager.clearAuthToken();
+    clearDeviceId();
+
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+}
+
+export const authService: AuthService = {
+    login,
+    silentRefresh,
+    declineSessionExtend: clearRefreshTimer,
+    logout,
+};
diff --git a/apps/fo/src/entities/auth/api/login-service.ts b/apps/fo/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 760858b99..000000000
--- a/apps/fo/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-
-import type { LoginService, ILogin } from "../model/login-interface";
-import { tokenManager } from "../lib/token-manager";
-import {PROXY_HOST, ACCESS_TOKEN, AUTH_USER_ID,SITE_ID, CLAIM_NAME, ENDPOINT, JWT_EXPIRATION_TIME } from "../../../shared/config";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      const response = await fetch( PROXY_HOST+ ENDPOINT.USER_SERVICE.LOGIN, {
-        method: "POST",
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-      // const data =  response.headers.get(ACCESS_TOKEN);
-      const accessToken = response.headers.get(ACCESS_TOKEN);
-      const tokenId =    response.headers.get(AUTH_USER_ID);
-      
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setToken("site-id-key", SITE_ID);
-      tokenManager.setupRefreshTimer(
-        () => this.silentRefresh(),
-        JWT_EXPIRATION_TIME,
-      );
-    } catch (error) {
-
-      console.log(' login err ' , error)
-      throw new Error(`Login failed: ${error}`);
-    }
-  }
-
-
-  public async silentRefresh(): Promise<void> {
-    console.log('  silentRefresh ')
-    
-    try {
-      const response = await fetch(PROXY_HOST+
-        `${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
-      );
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/fo/src/entities/auth/index.ts b/apps/fo/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/fo/src/entities/auth/index.ts
+++ b/apps/fo/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/fo/src/entities/auth/lib/auth-wrapper.tsx b/apps/fo/src/entities/auth/lib/auth-wrapper.tsx
index 21fd87180..0dc0661ea 100644
--- a/apps/fo/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/fo/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,68 +1,88 @@
 "use client";
 
 import { useEffect } from "react";
-import { client } from "@/src/shared/api";
-import type { IUserInfo } from "@/src/shared/store";
-import { isAtLoginRedirectUrl } from "@common/network";
-import { useUserStore, getCookie } from "@/src/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/src/shared/config";
+import { useRouter } from "next/navigation";
 
-const LOGIN_PAGE_URL =
-  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+import { isAxiosError } from "axios";
+
+import { client } from "@/src/shared/api";
+import {
+    AUTH_LOGIN_REDIRECT_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { useUserStore } from "@/src/shared/lib";
+import type { IUserInfo } from "@/src/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const { userInfo, setUserInfo } = useUserStore((state) => state);
+    const router = useRouter();
+    const userInfo = useUserStore((state) => state.userInfo);
+    const setUserInfo = useUserStore((state) => state.setUserInfo);
 
-  async function authCheck() {
-    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-      return;
-    }
-
-    const userId = getCookie(AUTH_USER_ID);
-    if (!userId) {
-      throw new Error("Missing required authentication tokens");
-    }
-
-    const response = await client.get<IUserInfo>(
-      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-    );
-    if (!userInfo) setUserInfo(response.data);
-  }
-
-  useEffect(() => {
-    (async () => {
-      try {
-        await authCheck();
-      } catch (error) {
-        console.error(error);
-        setUserInfo(null);
-        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-          return;
+    useEffect(() => {
+        // 페이지 새로고침 시 silentRefresh 타이머 복구
+        const token = getToken(CLAIM_NAME);
+        if (token) {
+            const remainingMs = getRemainingMs(token);
+            if (remainingMs > 0) {
+                console.log(
+                    `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+                );
+                setupRefreshTimer(authService.silentRefresh, remainingMs);
+            }
         }
 
-        // const hostname = window.location.hostname;
+        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
 
-        // // 개발 환경에서는 localhost 도메인 사용
-        // if (
-        //   hostname === "localhost" ||
-        //   hostname === "127.0.0.1" ||
-        //   hostname === "con.mind-one.co.kr"
-        // ) {
-        //   router.push("/"); // 개발시 홈으로 돌아가기
-        // }
+        async function authCheck() {
+            const userId = getToken(AUTH_USER_ID);
+            if (!userId) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+                return;
+            }
 
-        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-        // if (hostname.includes("hasuon.or.kr"))
-        //   window.location.assign(LOGIN_PAGE_URL); // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+            if (userInfo) return;
 
-        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
-        window.location.assign(LOGIN_PAGE_URL);
-      }
-    })();
-  }, []);
+            const response = await client.get<IUserInfo>(
+                `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+            );
+            setUserInfo(response.data);
+        }
 
-  return <>{children}</>;
+        authCheck().catch((error) => {
+            // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+            if (isAxiosError(error) && error.response?.status === 401) return;
+
+            console.error(error);
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        });
+    }, []);
+
+    // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+    useEffect(() => {
+        function handleAuthLogout() {
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        }
+
+        window.addEventListener("auth:logout", handleAuthLogout);
+        return () =>
+            window.removeEventListener("auth:logout", handleAuthLogout);
+    }, []);
+
+    return <>{children}</>;
 };
 
 export { AuthWrapper };
diff --git a/apps/fo/src/entities/auth/lib/device-id.ts b/apps/fo/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..f844fcbef
--- /dev/null
+++ b/apps/fo/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+    if (typeof window === "undefined") return "";
+
+    const existing = localStorage.getItem(DEVICE_ID_KEY);
+    if (existing) return existing;
+
+    const id = uuidv4();
+    localStorage.setItem(DEVICE_ID_KEY, id);
+    return id;
+}
+
+export function clearDeviceId(): void {
+    if (typeof window === "undefined") return;
+
+    localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/apps/fo/src/entities/auth/lib/token-manager.ts b/apps/fo/src/entities/auth/lib/token-manager.ts
index 5908dd091..172f2cc3a 100644
--- a/apps/fo/src/entities/auth/lib/token-manager.ts
+++ b/apps/fo/src/entities/auth/lib/token-manager.ts
@@ -1,109 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
+import { authConfig } from "@/src/shared/config/auth";
+import { createTokenManager } from "@common/auth";
 
-type JwtPayload = {
-  sub?: string;
-  exp?: number;
-  iat?: number;
-  [key: string]: unknown;
-};
+export const tokenManager = createTokenManager(authConfig);
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() {}
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  private parseJwt(token: string): JwtPayload {
-    const parts = token.split(".");
-    if (parts.length !== 3) {
-      throw new Error("유효한 JWT 형식이 아닙니다.");
-    }
-
-    const base64Url = parts[1] ?? "";
-    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
-    const jsonPayload = decodeURIComponent(
-      atob(padded)
-        .split("")
-        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
-        .join("")
-    );
-
-    return JSON.parse(jsonPayload) as JwtPayload;
-  }
-
-  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
-    const token = this.getToken(key);
-    if (!token) {
-      return null;
-    }
-
-    try {
-      const payload = this.parseJwt(token);
-      if (typeof payload.exp !== "number") {
-        return null;
-      }
-
-      return payload.exp * 1000 - Date.now();
-    } catch (error) {
-      console.error("JWT 파싱 오류:", error);
-      return null;
-    }
-  }
-
-  public isExpiredToken(key: string = CLAIM_NAME): boolean {
-    const remainingMs = this.getRemainingMsFromToken(key);
-    return remainingMs === null || remainingMs <= 0;
-  }
-
-  public setToken(key: string, value: string): void {
-    setCookie(key, value, {
-      secure: location.protocol === "https:",
-      sameSite: "lax",
-    });
-  }
-
-  public removeToken(key: string): void {
-    removeCookie(key);
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+    getToken,
+    setToken,
+    removeToken,
+    setupRefreshTimer,
+    clearRefreshTimer,
+    getAccessToken,
+    getRefreshToken,
+    getUserId,
+} = tokenManager;
diff --git a/apps/fo/src/entities/menu-authority/index.ts b/apps/fo/src/entities/menu-authority/index.ts
index 2a555b77e..d5991d01c 100644
--- a/apps/fo/src/entities/menu-authority/index.ts
+++ b/apps/fo/src/entities/menu-authority/index.ts
@@ -1,2 +1,9 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export {
+    menuAuthorityFormSchema,
+    type MenuAuthority,
+    type MenuAuthorityPayload,
+    type MenuAuthorityFormData,
+} from "./model/menu-authority-interface";
 export { AuthorityButton } from "./ui/authority-button";
 export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/fo/src/entities/menu/index.ts b/apps/fo/src/entities/menu/index.ts
index 04f63e38b..2bd1b1787 100644
--- a/apps/fo/src/entities/menu/index.ts
+++ b/apps/fo/src/entities/menu/index.ts
@@ -1,2 +1,3 @@
+export { MenuApi } from "./api/menu-service";
+export type { MenuItem, MenuService } from "./model/menu-interface";
 export { MenuWrapper } from "./lib/menu-wrapper";
-export type { MenuItem } from "./model/menu-interface";
diff --git a/apps/fo/src/features/auth/login/ui/login-page.tsx b/apps/fo/src/features/auth/login/ui/login-page.tsx
deleted file mode 100644
index fe14819f3..000000000
--- a/apps/fo/src/features/auth/login/ui/login-page.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useEffect } from "react";
-import { images } from "@common/assets";
-import { LoginApi } from "@/src/entities/auth";
-import "./login.css";
-
-function LoginPage() {
-  useEffect(() => {
-    const hostname = window.location.hostname;
-    if (hostname.includes("hasuon.or.kr")) {
-      window.location.href =
-        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
-    }
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target as HTMLFormElement);
-    const userId = formData.get("id") as string;
-    const password = formData.get("password") as string;
-
-    await LoginApi.login({ userId, password });
-    window.location.href = "/pages/dashboard";
-  };
-
-  return (
-    <div className="login fx">
-      <div className="left_box fx">
-        <div className="text">
-          <h1>
-            하수도정보시스템
-            <br />
-            <span>CMS 통합관리시스템</span>
-          </h1>
-          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
-        </div>
-        <div className="img">
-          <Image src={images.logo} width={229} height={46} alt="logo" />
-        </div>
-      </div>
-      <form
-        id="loginForm"
-        name="loginForm"
-        method="post"
-        onSubmit={handleSubmit}
-      >
-        <div className="login_box fx">
-          <ul className="fx">
-            <li>
-              <h2>ID</h2>
-              <div className="input_st st1">
-                <i className="diveicon di-account-box" />
-                <input
-                  type="text"
-                  className="id"
-                  title="아이디를 입력하세요."
-                  id="id"
-                  name="id"
-                  maxLength={12}
-                />
-              </div>
-            </li>
-            <li>
-              <h2>PASSWORD</h2>
-              <div className="input_st st2">
-                <i className="diveicon di-key" />
-                <input
-                  type="password"
-                  className="input_style"
-                  maxLength={25}
-                  title="비밀번호를 입력하세요."
-                  id="password"
-                  name="password"
-                />
-              </div>
-            </li>
-          </ul>
-          <div className="bottom_box fx">
-            <div className="checks fx">
-              <input
-                type="checkbox"
-                name="checkId"
-                title="로그인ID 저장여부"
-                id="checkId"
-              />
-              <label htmlFor="checkId">아이디저장</label>
-            </div>
-            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
-          </div>
-          <button type="submit" className="login_btn fx">
-            <span>LOGIN</span>
-          </button>
-          <div className="footer">
-            <div className="copy fx">
-              <p>copyright © 2023 KECO. All rights reserved.</p>
-            </div>
-            <div className="fot_btn fx">
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
-                target="_blank"
-              >
-                개인정보처리방침
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
-                target="_blank"
-              >
-                저작권정책안내
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
-                target="_blank"
-              >
-                이메일무단수집거부
-              </a>
-            </div>
-            <p className="addr fx">
-              <span>
-                주소 : (22689) 인천광역시 서구 환경로 42(경서동
-                종합환경연구단지)
-              </span>
-              <span>
-                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                3722
-              </span>
-              <span>팩스 :032-590-3729</span>
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export { LoginPage };
-
diff --git a/apps/fo/src/shared/config/api.ts b/apps/fo/src/shared/config/api.ts
index 3eba9fa91..eebb15c19 100644
--- a/apps/fo/src/shared/config/api.ts
+++ b/apps/fo/src/shared/config/api.ts
@@ -1,6 +1,6 @@
 import { PROXY_HOST } from "./env";
 
-export const BASE_URL = `${PROXY_HOST}/server`;
+export const BASE_URL = `${PROXY_HOST}`;
 
 export const ENDPOINT = {
   ATTACH_SERVICE: {
@@ -14,13 +14,21 @@ export const ENDPOINT = {
   },
   USER_SERVICE: {
     LOGIN: "/user-service/login",
+    LOGIN_2FA: "/user-service/api/v1/auth/login",
     USERS: "/user-service/api/v1/users",
     SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
     AUTHORIZATIONS: "/user-service/api/v1/authorizations",
     ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations",
     ROLES: "/user-service/api/v1/roles",
+    LOGINLOG: "/user-service/api/v1/login-logs",
+    PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
+    OTP_VERIFY: "/user-service/api/v1/auth/2fa/verify",
+    TWOFA_SETUP: "/user-service/api/v1/auth/2fa/setup",
+    TWOFA_ENABLE: "/user-service/api/v1/auth/2fa/enable",
+    USER_JOIN: "/user-service/api/v1/anonymouse/users/join",
   },
   CMS_SERVICE: {
+    DASHBOARD: "/cms-service/api/v1/dashboard",
     SITES: "/cms-service/api/v1/sites",
     IPS: "/cms-service/api/v1/site-ips",
     DOMAINS: "/cms-service/api/v1/site-dmns",
@@ -29,6 +37,8 @@ export const ENDPOINT = {
     MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
     MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
+    MENU_TEMPORARY_STORAGE: "/cms-service/api/v1/menu-tmpr-strg",
+    MENU_HISTORY: "/cms-service/api/v1/menu-hstry",
     CONTENTS: "/cms-service/api/v1/contents",
     CONTENTS_DETAILS: "/cms-service/api/v1/contents-details",
     ORGANIZATIONS: "/cms-service/api/v1/ognzs",
@@ -44,13 +54,32 @@ export const ENDPOINT = {
     SURVEY: "/cms-service/api/v1/srvy",
     SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem",
     SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl",
+    ZIPS: "/cms-service/api/v1/zips",
+    GROUPS: "/cms-service/api/v1/groups",
+    GROUP_USERS: "/cms-service/api/v1/group-users",
+    MANAGER_IP: "/cms-service/api/v1/mgrip",
+    APILOG: "/cms-service/api/v1/api-logs",
+    SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
+    CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
     BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
     POSTS: "/board-service/api/v1/posts",
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
+    POST_EVALUATION: "/board-service/api/v1/pstEvl",
   },
+  SEWERAGE_SERVICE: {
+    PPL_COUNTS: "/sewerage-service/api/v1/ms/pplCounts",
+    OLD_PPL_COUNTS: "/sewerage-service/api/v1/ms/oldPplCounts",
+  },    
+  IC_SERVICE: {
+    GROUPING_STATISTICS: "/ic-service/api/v1/nti/grouping-statistics",
+  },
+  DC_SERVICE: {
+    DATA_STATUS: "/dc-service/api/v1/dc/dataStatus",
+  },
+
 };
 
 export const JWT_EXPIRATION_TIME = 1800000;
diff --git a/apps/fo/src/shared/config/auth.ts b/apps/fo/src/shared/config/auth.ts
new file mode 100644
index 000000000..7c35ad9f0
--- /dev/null
+++ b/apps/fo/src/shared/config/auth.ts
@@ -0,0 +1,17 @@
+import type { AuthConfig } from "@common/auth";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/fo/src/shared/config/env.ts b/apps/fo/src/shared/config/env.ts
index 6e3bf223e..a198051e8 100644
--- a/apps/fo/src/shared/config/env.ts
+++ b/apps/fo/src/shared/config/env.ts
@@ -1,14 +1,30 @@
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "FO";
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL ||'http://con.mind-one.co.kr:11080/api/v1';
-export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
-export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+export const SERVER_API_WR_URL =
+    process.env.WR_SERVER_API_URL ||
+    "http://con.mind-one.co.kr:11083/reuse-service/api/v1";
+export const SERVER_API_FO_URL =
+    process.env.FO_SERVER_API_URL ||
+    "http://con.mind-one.co.kr:11083/operation-service/api/v1";
+export const SERVER_API_CS_URL =
+    process.env.CS_SERVER_API_URL ||
+    "http://dev.onasys.co.kr:8000";
+export const SERVER_API_URL =
+    process.env.CS_SERVER_API_URL ||
+    "http://dev.onasys.co.kr:8000";
+export const SERVER_API_CS_TUS_URL =
+    process.env.NEXT_PUBLIC_CS_TUS_UPLOAD ||
+    "/attach-service/api/v1/tus/upload";
+export const AUTH_LOGIN_REDIRECT_URL =
+    process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
 export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL;
+export const SERVER_SEWERAGE_API_URL = process.env.SEWERAGE_API_URL;
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+
 
 
 
diff --git a/apps/fo/src/shared/config/index.ts b/apps/fo/src/shared/config/index.ts
index cd83447d5..04e4f2df5 100644
--- a/apps/fo/src/shared/config/index.ts
+++ b/apps/fo/src/shared/config/index.ts
@@ -1,2 +1,4 @@
 export * from "./api";
 export * from "./env";
+
+export const DEFAULT_LIST_SIZE = 10;
diff --git a/apps/fo/src/shared/lib/bbs-notice-menu.ts b/apps/fo/src/shared/lib/bbs-notice-menu.ts
new file mode 100644
index 000000000..a621ed669
--- /dev/null
+++ b/apps/fo/src/shared/lib/bbs-notice-menu.ts
@@ -0,0 +1,12 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export const BBS_NOTICE_MENU_MARKER = "bbsnotice";
+
+export function isBbsNoticeMenu(item: MenuItem): boolean {
+    const marker = BBS_NOTICE_MENU_MARKER;
+    return (
+        item.urlPath?.toLowerCase().includes(marker) ||
+        item.menuEngNm?.toLowerCase().includes(marker) ||
+        item.menuPath?.toLowerCase().includes(marker)
+    );
+}
diff --git a/apps/fo/src/shared/lib/index.ts b/apps/fo/src/shared/lib/index.ts
index b8b4c52c0..1d0c4a3a8 100644
--- a/apps/fo/src/shared/lib/index.ts
+++ b/apps/fo/src/shared/lib/index.ts
@@ -4,3 +4,10 @@ export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
 export { usePrompt } from "./use-prompt";
 export { getCookie, setCookie, removeCookie } from "./cookie";
+export {
+    buildStatisticsComponentImportPath,
+    menuMatchesStatisticsTabId,
+    parseStatisticsMenuUrlPath,
+    resolveStatisticsCategory,
+    resolveStatisticsTabId,
+} from "./statistics-menu-url";
diff --git a/apps/fo/src/shared/lib/statistics-menu-url.ts b/apps/fo/src/shared/lib/statistics-menu-url.ts
new file mode 100644
index 000000000..c20dded4c
--- /dev/null
+++ b/apps/fo/src/shared/lib/statistics-menu-url.ts
@@ -0,0 +1,84 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export type ParsedStatisticsMenuUrl = {
+    categoryFromPath: string | null;
+    componentName: string | null;
+    rawUrlPath: string;
+};
+
+/** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
+export function parseStatisticsMenuUrlPath(
+    urlPath: string,
+): ParsedStatisticsMenuUrl {
+    const trimmed = (urlPath ?? "").trim();
+    if (!trimmed) {
+        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+    }
+
+    let pathPart = trimmed;
+    let queryString = "";
+    const queryIndex = trimmed.indexOf("?");
+    if (queryIndex >= 0) {
+        pathPart = trimmed.slice(0, queryIndex);
+        queryString = trimmed.slice(queryIndex + 1);
+    }
+
+    const tabParam = new URLSearchParams(queryString).get("tab")?.trim() || null;
+    const segments = pathPart.replace(/^\/+/, "").split("/").filter(Boolean);
+
+    let categoryFromPath: string | null = null;
+    if (segments[0] === "statistics" && segments.length >= 2) {
+        categoryFromPath = segments[1] ?? null;
+    }
+
+    let componentName = tabParam;
+    if (!componentName) {
+        if (!pathPart.includes("/") && !queryString) {
+            componentName = trimmed;
+        } else if (segments.length === 1 && segments[0] !== "statistics") {
+            componentName = segments[0] ?? null;
+        } else if (segments[0] === "statistics" && segments.length >= 3) {
+            componentName = segments[segments.length - 1] ?? null;
+        }
+    }
+
+    return { categoryFromPath, componentName, rawUrlPath: trimmed };
+}
+
+/** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
+export function resolveStatisticsCategory(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+    return categoryFromPath || parentEngNm || "";
+}
+
+/** 탭 ID·URL `?tab=` 값 - 컴포넌트 파일명(확장자 제외) */
+export function resolveStatisticsTabId(urlPath: string): string {
+    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+    return componentName || rawUrlPath;
+}
+
+/** `@/src/components/statistics/{category}/{Component}` 또는 루트 컴포넌트 경로 */
+export function buildStatisticsComponentImportPath(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+    const category = resolveStatisticsCategory(urlPath, parentEngNm);
+    const name = componentName || urlPath;
+    if (!category) {
+        return `@/src/components/statistics/${name}`;
+    }
+    return `@/src/components/statistics/${category}/${name}`;
+}
+
+export function menuMatchesStatisticsTabId(
+    menu: MenuItem,
+    tabId: string,
+): boolean {
+    if (!tabId) return false;
+    if (menu.urlPath === tabId) return true;
+    return resolveStatisticsTabId(menu.urlPath) === tabId;
+}
diff --git a/apps/fo/src/store/tab-store.ts b/apps/fo/src/store/tab-store.ts
new file mode 100644
index 000000000..0379b3601
--- /dev/null
+++ b/apps/fo/src/store/tab-store.ts
@@ -0,0 +1,327 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import type { MenuItem } from "@/src/entities/menu";
+import { MenuAuthorityApi } from "@/src/entities/menu-authority";
+import type { PageMenuAuthority } from "@/src/entities/menu-authority/model/menu-authority-interface";
+import { isBbsNoticeMenu } from "@/src/shared/lib/bbs-notice-menu";
+import { resolveStatisticsTabId } from "@/src/shared/lib/statistics-menu-url";
+
+export interface Tab {
+    id: string; // 고유 ID (urlPath)
+    label: string; // 탭에 표시될 이름
+    path: string; // 메뉴 경로
+    urlPath: string; // url 경로
+    parentEngNm: string; // 부모 menuEngNm
+    menuItem: MenuItem; // 메뉴 정보
+    /** undefined: 미조회, null: 조회했으나 없음/실패 */
+    pageMenuAuthority?: PageMenuAuthority | null;
+}
+
+async function fetchTabPageMenuAuthority(
+    menuCd: number,
+    apply: (authority: PageMenuAuthority | null) => void,
+): Promise<void> {
+    try {
+        const response = await MenuAuthorityApi.getPageMenuAuthority(menuCd);
+        apply(response?.[0] ?? null);
+    } catch {
+        apply(null);
+    }
+}
+
+function scheduleTabPageMenuAuthorityFetch(
+    get: () => TabStore,
+    set: (
+        partial:
+            | Partial<TabStore>
+            | ((state: TabStore) => Partial<TabStore>),
+    ) => void,
+    tabId: string,
+    menuCd: number,
+): void {
+    void fetchTabPageMenuAuthority(menuCd, (authority) => {
+        const { tabs } = get();
+        if (!tabs.some((tab) => tab.id === tabId)) return;
+        set((state) => ({
+            tabs: state.tabs.map((tab) =>
+                tab.id === tabId ? { ...tab, pageMenuAuthority: authority } : tab,
+            ),
+        }));
+    });
+}
+
+type TabStoreSetState = (
+    partial:
+        | Partial<TabStore>
+        | ((state: TabStore) => Partial<TabStore>),
+) => void;
+
+const tabStoreSetState: TabStoreSetState = (partial) => {
+    useTabStoreHook.setState(partial);
+};
+
+function ensureTabPageMenuAuthority(
+    get: () => TabStore,
+    set: TabStoreSetState,
+    tab: Tab,
+): void {
+    if (tab.pageMenuAuthority !== undefined) return;
+    scheduleTabPageMenuAuthorityFetch(get, set, tab.id, tab.menuItem.menuCd);
+}
+
+/** persist 복원·새로고침 후 활성 탭 메뉴 권한이 없으면 조회 */
+export function hydrateActiveTabPageMenuAuthority(): void {
+    const { tabs, activeTabId } = getTabStoreState();
+    if (!activeTabId) return;
+    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!tab) return;
+    ensureTabPageMenuAuthority(getTabStoreState, tabStoreSetState, tab);
+}
+
+interface TabStore {
+    tabs: Tab[];
+    activeTabId: string | null;
+    menuList: MenuItem[] | null;
+    addTab: (menuItem: MenuItem) => boolean;
+    removeTab: (tabId: string) => void;
+    setActiveTab: (tabId: string) => void;
+    setMenuList: (menuList: MenuItem[] | null) => void;
+    closeAllTabs: () => void;
+    closeOtherTabs: (tabId: string) => void;
+    closeTabsToLeft: (tabId: string) => void;
+    closeTabsToRight: (tabId: string) => void;
+}
+
+export const TAB_STORE_PERSIST_KEY = "st-tab-store";
+const TAB_STORE_VERSION = 1;
+const MAX_TABS = 10;
+
+function tabForPersist(tab: Tab): Tab {
+    return {
+        ...tab,
+        menuItem: { ...tab.menuItem, children: null },
+        pageMenuAuthority: undefined,
+    };
+}
+
+function normalizePersistedTab(tab: Tab): Tab {
+    const tabId = resolveStatisticsTabId(tab.urlPath || tab.id);
+    return tabId === tab.id ? tab : { ...tab, id: tabId };
+}
+
+function sanitizePersistedTabsAndActive(
+    tabs: Tab[],
+    activeTabId: string | null,
+): { tabs: Tab[]; activeTabId: string | null } {
+    let nextTabs = Array.isArray(tabs)
+        ? tabs.filter((tab) => !isBbsNoticeMenu(tab.menuItem)).map(normalizePersistedTab)
+        : [];
+    if (nextTabs.length > MAX_TABS) nextTabs = nextTabs.slice(0, MAX_TABS);
+
+    if (nextTabs.length === 0) {
+        return { tabs: [], activeTabId: null };
+    }
+
+    let nextActive = activeTabId;
+    if (nextActive && !nextTabs.some((t) => t.id === nextActive)) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+    if (nextActive == null && nextTabs.length > 0) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+
+    return { tabs: nextTabs, activeTabId: nextActive };
+}
+
+const useTabStoreHook = create<TabStore>()(
+    persist(
+        (set, get) => ({
+            tabs: [],
+            activeTabId: null,
+            menuList: null,
+            addTab: (menuItem: MenuItem) => {
+                if (isBbsNoticeMenu(menuItem)) {
+                    return false;
+                }
+
+                const { tabs, menuList } = get();
+                const tabId = resolveStatisticsTabId(menuItem.urlPath || "");
+
+                const existingTab = tabs.find((tab) => tab.id === tabId);
+
+                if (existingTab) {
+                    set({ activeTabId: tabId });
+                    ensureTabPageMenuAuthority(get, set, existingTab);
+                    return true;
+                }
+
+                if (tabs.length < MAX_TABS) {
+                    const newTab: Tab = {
+                        id: tabId,
+                        label: menuItem.menuKornNm,
+                        path: menuItem.menuPath,
+                        urlPath: menuItem.urlPath,
+                        parentEngNm:
+                            menuList?.find(
+                                (m) => m.menuCd === menuItem.parentId,
+                            )?.menuEngNm || "",
+                        menuItem,
+                        pageMenuAuthority: undefined,
+                    };
+
+                    set({
+                        tabs: [...tabs, newTab],
+                        activeTabId: tabId,
+                    });
+
+                    scheduleTabPageMenuAuthorityFetch(
+                        get,
+                        set,
+                        tabId,
+                        menuItem.menuCd,
+                    );
+
+                    return true;
+                }
+                return false;
+            },
+            removeTab: (tabId: string): void => {
+                const { tabs, activeTabId } = get();
+                const newTabs = tabs.filter((tab) => tab.id !== tabId);
+
+                let newActiveTabId = activeTabId;
+                if (activeTabId === tabId) {
+                    const closedTabIndex = tabs.findIndex(
+                        (tab) => tab.id === tabId,
+                    );
+                    if (newTabs.length > 0) {
+                        if (closedTabIndex > 0) {
+                            const prevTab = tabs[closedTabIndex - 1];
+                            newActiveTabId = prevTab ? prevTab.id : null;
+                        } else {
+                            const firstTab = newTabs[0];
+                            newActiveTabId = firstTab ? firstTab.id : null;
+                        }
+                    } else {
+                        newActiveTabId = null;
+                    }
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            setActiveTab: (tabId: string) => {
+                set({ activeTabId: tabId });
+                const tab = get().tabs.find((t) => t.id === tabId);
+                if (tab) ensureTabPageMenuAuthority(get, set, tab);
+            },
+            setMenuList: (menuList: MenuItem[] | null) => {
+                set({ menuList });
+            },
+            closeAllTabs: () => {
+                set({
+                    tabs: [],
+                    activeTabId: null,
+                });
+            },
+            closeOtherTabs: (tabId: string) => {
+                const { tabs } = get();
+                const tabToKeep = tabs.find((tab) => tab.id === tabId);
+
+                if (tabToKeep) {
+                    set({
+                        tabs: [tabToKeep],
+                        activeTabId: tabId,
+                    });
+                }
+            },
+            closeTabsToLeft: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index <= 0) return;
+
+                const newTabs = tabs.slice(index);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            closeTabsToRight: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index === -1 || index >= tabs.length - 1) return;
+
+                const newTabs = tabs.slice(0, index + 1);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+        }),
+        {
+            name: TAB_STORE_PERSIST_KEY,
+            version: TAB_STORE_VERSION,
+            storage: createJSONStorage(() => localStorage),
+            partialize: (state) => ({
+                tabs: state.tabs.map(tabForPersist),
+                activeTabId: state.activeTabId,
+            }),
+            merge: (persistedState, currentState) => {
+                const p = persistedState as Partial<
+                    Pick<TabStore, "tabs" | "activeTabId">
+                > | null;
+                const rawTabs = p?.tabs;
+                const rawActive = p?.activeTabId;
+                const { tabs, activeTabId } = sanitizePersistedTabsAndActive(
+                    (rawTabs as Tab[]) ?? [],
+                    typeof rawActive === "string" || rawActive === null
+                        ? rawActive
+                        : null,
+                );
+                return {
+                    ...currentState,
+                    tabs,
+                    activeTabId,
+                };
+            },
+            onRehydrateStorage: () => (state, error) => {
+                if (error || !state) return;
+                queueMicrotask(() => hydrateActiveTabPageMenuAuthority());
+            },
+        },
+    ),
+);
+
+export const useTabStore = useTabStoreHook;
+export const getTabStoreState = () => useTabStoreHook.getState();
+
+// 로그아웃 또는 사용자 전환 시 로컬 탭 스냅샷 제거 및 메모리 상태 초기화
+export function clearTabStorePersist(): void {
+    useTabStoreHook.getState().closeAllTabs();
+    useTabStoreHook.persist.clearStorage();
+}
diff --git a/apps/sn/.env.local b/apps/sn/.env.local
index 33b8ef842..337c819d2 100644
--- a/apps/sn/.env.local
+++ b/apps/sn/.env.local
@@ -11,9 +11,9 @@ NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 #NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr/openapi/Gettile.do?apiKey=04trYP9_xwLAfALjwZ-B8g&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&layer=korean_map&style=korean&tilematrixset=EPSG:5179&TileMatrix={z}&TileCol={x}&TileRow={y}
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_SEWERAGE_API_URL = http://localhost:8883
-NEXT_PUBLIC_DC_URL     = https://apigateway.apps.rsonesoft.com
+SERVER_API_URL = http://dev.onasys.co.kr:8000
+SEWERAGE_API_URL = http://localhost:8883
+# SEWERAGE_API_URL = http://con.mind-one.co.kr:11083
+DC_URL     = https://apigateway.apps.rsonesoft.com
 # NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /auth/login
-# NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883
diff --git a/apps/sn/.env.mindone b/apps/sn/.env.mindone
index dc567fea8..8a39a81a8 100644
--- a/apps/sn/.env.mindone
+++ b/apps/sn/.env.mindone
@@ -6,11 +6,11 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11302
 NEXT_PUBLIC_SUB_DOMAIN = http://con.mind-one.co.kr:13000
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
+SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
-NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083
-NEXT_PUBLIC_DC_URL = https://apigateway.apps.rsonesoft.com
+SEWERAGE_API_URL = http://con.mind-one.co.kr:11083
+DC_URL = https://apigateway.apps.rsonesoft.com
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /auth/login
\ No newline at end of file
diff --git a/apps/sn/.env.production b/apps/sn/.env.production
index 0b8189a78..f60cba1a1 100644
--- a/apps/sn/.env.production
+++ b/apps/sn/.env.production
@@ -8,10 +8,11 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devlion.hasuon.or.kr
 #NEXT_PUBLIC_SUB_DOMAIN = http://front-sn-feature.iipbs-web.svc.cluster.local:13000
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
 NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
-NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000
+SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000
+NEXT_PUBLIC_COOKIE_DOMAIN=.hasuon.or.kr
\ No newline at end of file
diff --git a/apps/sn/app/(auth)/auth/layout.tsx b/apps/sn/app/(auth)/auth/layout.tsx
new file mode 100644
index 000000000..42f63e71a
--- /dev/null
+++ b/apps/sn/app/(auth)/auth/layout.tsx
@@ -0,0 +1,17 @@
+import "../../../src/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/apps/sn/app/(auth)/auth/login/page.tsx b/apps/sn/app/(auth)/auth/login/page.tsx
new file mode 100644
index 000000000..8b642ac57
--- /dev/null
+++ b/apps/sn/app/(auth)/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/auth/login";
+export default LoginPage;
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 9162074f4..c4c3db13c 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx
@@ -1,18 +1,22 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import type { AgedPipeFilters } from "./agedPipeUtils";
+import { validateElapsedYears, type AgedPipeFilters } from "./agedPipeUtils";
+
+type MaybePromise<T = void> = T | Promise<T>;
 
 type Props = {
   filters: AgedPipeFilters;
   onFiltersChange: (filters: AgedPipeFilters) => void;
-  onApply: (filters?: AgedPipeFilters) => void;
+  onApply: (filters?: AgedPipeFilters) => MaybePromise;
+  compact?: boolean;
 };
 
 export default function AgedPipeLayerSettingPanel({
   filters,
   onFiltersChange,
   onApply,
+  compact = false,
 }: Props) {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [elapsedYearsText, setElapsedYearsText] = useState(String(filters.elapsedYears ?? ""));
@@ -21,17 +25,74 @@ export default function AgedPipeLayerSettingPanel({
     setElapsedYearsText(String(filters.elapsedYears ?? ""));
   }, [filters.elapsedYears]);
 
-  const commitElapsedYears = () => {
+  const commitElapsedYears = async () => {
+    const elapsedYears = elapsedYearsText === "" ? NaN : Number(elapsedYearsText);
+    if (!validateElapsedYears(elapsedYears)) {
+      alert("경과년도는 1년~100년 범위 내에서 입력해주세요.");
+      return;
+    }
+
     const nextFilters = {
       ...filters,
-      elapsedYears: elapsedYearsText === "" ? ("" as unknown as number) : Number(elapsedYearsText),
+      elapsedYears,
     };
     onFiltersChange(nextFilters);
-    onApply(nextFilters);
+    await onApply(nextFilters);
+    alert(`노후관로 경과년도 ${elapsedYears}년으로 반영되었습니다.`);
   };
 
+  const inputClass = "h-[22px] border border-[#ccd6df] px-[2px] text-center text-[1rem] leading-none text-[#222]";
+  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 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-w-0 items-center gap-1">
+        {indicator}
+        <label htmlFor="aged-pipe-elapsed-years" className="shrink-0">노후관로 경과년도(년)</label>
+      </div>
+      <div className="ml-auto flex shrink-0 items-center gap-1">
+        <input
+          id="aged-pipe-elapsed-years"
+          className={numberInputClass}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          autoComplete="off"
+          value={elapsedYearsText}
+          onFocus={(event) => event.currentTarget.select()}
+          onChange={(event) => {
+            const digits = event.target.value.replace(/[^0-9]/g, "");
+            setElapsedYearsText(digits);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") void commitElapsedYears();
+          }}
+        />
+        <button
+          type="button"
+          className={applyButtonClass}
+          onClick={() => void commitElapsedYears()}
+          title="적용"
+          aria-label="경과년도 적용"
+        >
+          ✓
+        </button>
+      </div>
+    </div>
+  );
+
+  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)]">
+        {settingRow}
+      </div>
+    );
+  }
+
   return (
-    <div className="overflow-hidden rounded-sm border border-red-100 bg-red-50/35">
+    <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">
         <button
           type="button"
@@ -39,41 +100,14 @@ export default function AgedPipeLayerSettingPanel({
           onClick={() => setIsCollapsed((value) => !value)}
           title={isCollapsed ? "펼치기" : "접기"}
         >
-          {isCollapsed ? "›" : "⌄"}
+          {isCollapsed ? "+" : "-"}
         </button>
         <span className="text-[1.2rem] font-semibold text-red-700">노후관로 설정</span>
       </div>
 
       {!isCollapsed && (
         <div className="px-2 py-2">
-          <div className="flex min-h-[30px] items-center gap-1 whitespace-nowrap text-[1.2rem] text-[#333]">
-            <label htmlFor="aged-pipe-elapsed-years">경과년도(년)</label>
-            <input
-              id="aged-pipe-elapsed-years"
-              className="h-[22px] w-14 border border-[#ccd6df] px-1 text-center text-[1.2rem]"
-              type="text"
-              inputMode="numeric"
-              pattern="[0-9]*"
-              autoComplete="off"
-              value={elapsedYearsText}
-              onFocus={(event) => event.currentTarget.select()}
-              onChange={(event) => {
-                const digits = event.target.value.replace(/[^0-9]/g, "");
-                setElapsedYearsText(digits);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") commitElapsedYears();
-              }}
-            />
-            <button
-              type="button"
-              className="grid h-[22px] w-[22px] place-items-center rounded-full bg-[#31a83b] text-[1.4rem] font-bold leading-none text-white"
-              onClick={commitElapsedYears}
-              title="적용"
-            >
-              ✓
-            </button>
-          </div>
+          {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 1b6542816..c900fe2c2 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
@@ -196,17 +196,25 @@ 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="flex h-screen flex-col overflow-hidden bg-white">
+    <main className="sn-popup-page w-full max-w-full overflow-x-hidden overflow-y-hidden">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">노후관로 현황</h1>
+      <header 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="border border-white/30 px-3 py-1 text-[1.05rem] text-white"
+            className="sn-popup-header-button"
             onClick={handleMinimize}
           >
             최소화
@@ -215,17 +223,17 @@ export default function AgedPipePopupPage() {
       </header>
 
       {downloadProgressText ? (
-        <div className="border-b border-slate-200 bg-emerald-50 px-5 py-2 text-[1rem] text-emerald-700">
+        <div className="sn-popup-success-bar">
           {downloadProgressText}
         </div>
       ) : null}
 
-      <section className="overflow-y-auto p-4">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[160px_320px_320px_auto] md:items-end md:justify-between">
-          <label className="block md:max-w-[160px]">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">경과년도</div>
+      <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="h-10 !text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               type="text"
               inputMode="numeric"
               pattern="[0-9]*"
@@ -244,10 +252,10 @@ export default function AgedPipePopupPage() {
             />
           </label>
 
-          <label className="block md:max-w-[320px]">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-label">시도</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.ctpvCd}
               onChange={(event) =>
                 setFilters({
@@ -266,10 +274,10 @@ export default function AgedPipePopupPage() {
             </select>
           </label>
 
-          <label className="block md:max-w-[320px]">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-label">시군구</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.sggCd}
               onChange={(event) => setFilters({ ...filters, sggCd: event.target.value })}
             >
@@ -282,12 +290,12 @@ export default function AgedPipePopupPage() {
             </select>
           </label>
 
-          <div className="flex flex-wrap justify-end gap-2 md:pr-3">
+          <div className="sn-popup-actions">
             <Button
               type="button"
               size="sm"
               color="primary"
-              className="h-10 px-5 !text-[1.1rem]"
+              className="sn-popup-primary-button !text-[1.1rem]"
               onClick={() => void handleSearch(1)}
             >
               조회
@@ -295,8 +303,8 @@ export default function AgedPipePopupPage() {
             <Button
               type="button"
               size="sm"
-              color="green"
-              className="h-10 px-5 !text-[1.1rem]"
+              color="primary"
+              className="sn-popup-primary-button !text-[1.1rem]"
               onClick={handleDownload}
             >
               다운로드
@@ -304,19 +312,65 @@ export default function AgedPipePopupPage() {
           </div>
         </div>
 
-        <UiTable<AgedPipeRow>
-          headName={<>노후관로 조회 결과 총 {total.toLocaleString()}건</>}
-          tableData={rows}
-          headlist={AGED_PIPE_LIST_HEADLIST}
-          pageSize={10}
-          total={total}
-          cellClick={(index) => handleRowClick(index)}
-          onPageChange={(page) => void handleSearch(page)}
-          curPage={currentPage}
-          index={selectedIndex}
-          widthFixed={true}
-        />
+        <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"
+          />
+        </div>
       </section>
+      <style jsx global>{`
+        .aged-pipe-popup-table .card-header {
+          margin-bottom: 0.6rem;
+        }
+
+        .aged-pipe-popup-table .card-header h3 {
+          font-size: 1.7rem;
+          line-height: 1.25;
+        }
+
+        .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>
   );
 }
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 e273d9c1c..8419e929c 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/agedPipeUtils.ts
@@ -59,9 +59,9 @@ export const AGED_PIPE_LIST_HEADLIST = [
   { id: "instlYmd", title: "설치일자", widthPercent: 12 },
   { id: "pdmtVl", title: "관경(mm)", widthPercent: 10 },
   { id: "prlgVl", title: "연장(m)", widthPercent: 10 },
-  { id: "usgCd", title: "용도", widthPercent: 14 },
+  { id: "usgCd", title: "용도", widthPercent: 12 },
   { id: "mqltCd", title: "재질", widthPercent: 18 },
-  { id: "elapsedYears", title: "경과년도", widthPercent: 12, align: "right" },
+  { id: "elapsedYears", title: "경과년도", widthPercent: 8, align: "right" },
 ];
 
 export const AGED_PIPE_EXCEL_FIELDS = [
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 53cf75946..51aff4d1b 100644
--- a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
+++ b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
@@ -1,11 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState, type ComponentType, type ReactNode } from "react";
 import {
   ChartColumnBig,
   ChevronLeft,
   ChevronRight,
-  History,
   PanelsTopLeft,
   PencilRuler,
   Search,
@@ -16,36 +15,95 @@ import {
 import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
 
 type Props = {
-  onOpenPopup: (popupKey: WindowPopupKey) => void;
+  onOpenPopup: (popupKey: WindowPopupKey) => Window | null;
   onOpenInfoSearch: () => void;
+  onToggleGisEdit?: () => void;
+  isGisEditActive?: boolean;
+  isInfoSearchActive?: boolean;
+  initialActiveKey?: WindowPopupKey | null;
 };
 
+type MenuIconProps = {
+  isActive: boolean;
+};
+
+const InftwtMenuIcon = ({ isActive }: MenuIconProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`h-[15px] w-[15px] shrink-0 ${isActive ? "text-primary" : "text-label"}`}
+    aria-hidden="true"
+    fill="none"
+  >
+    <path
+      d="M12 2.8C9.5 6.5 6.7 9.8 6.7 13.3A5.3 5.3 0 0 0 12 18.6a5.3 5.3 0 0 0 5.3-5.3c0-3.5-2.8-6.8-5.3-10.5Z"
+      fill="currentColor"
+      fillOpacity="0.14"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.5 13.4c0-1.2.8-2.6 1.9-4.2"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      opacity="0.9"
+    />
+  </svg>
+);
+
 const ANALYSIS_POPUP_ITEMS: Array<{
   key: WindowPopupKey | "infoSearch";
   label: string;
-  icon: typeof ChartColumnBig;
+  icon?: ComponentType<{ className?: string }>;
+  renderIcon?: (props: MenuIconProps) => ReactNode;
 }> = [
   { key: "infoSearch", label: "정보검색", icon: Search },
   { key: "pipeAnalysisPopup", label: "관로분석", icon: ChartColumnBig },
   { key: "floodPredictionMapPopup", label: "침수예측지도", icon: Waves },
-  { key: "floodHistoryPopup", label: "침수발생이력", icon: History },
   { key: "gisEditPopup", label: "GIS 편집", icon: PencilRuler },
   { key: "gisManagementPopup", label: "GIS 관리", icon: Settings2 },
   { key: "flowRiskPopup", label: "통수 위험", icon: TriangleAlert },
+  { key: "inftwtResultPopup", label: "침입수 분석결과", renderIcon: InftwtMenuIcon },
+  { key: "rdiiResultPopup", label: "RDII 분석결과", icon: ChartColumnBig },
 ];
 
-export default function AnalysisPopupMenu({ onOpenPopup, onOpenInfoSearch }: Props) {
+export default function AnalysisPopupMenu({
+  onOpenPopup,
+  onOpenInfoSearch,
+  onToggleGisEdit,
+  isGisEditActive = false,
+  isInfoSearchActive = false,
+  initialActiveKey = null,
+}: Props) {
   const [isOpen, setIsOpen] = useState(true);
-  const [activeKey, setActiveKey] = useState<WindowPopupKey | "infoSearch" | null>(null);
+  const [activeKey, setActiveKey] = useState<WindowPopupKey | "infoSearch" | null>(initialActiveKey);
+
+  useEffect(() => {
+    if (!isGisEditActive && activeKey === "gisEditPopup") {
+      setActiveKey(null);
+    }
+  }, [activeKey, isGisEditActive]);
+
+  useEffect(() => {
+    if (!isInfoSearchActive && activeKey === "infoSearch") {
+      setActiveKey(null);
+    }
+  }, [activeKey, isInfoSearchActive]);
+
+  useEffect(() => {
+    if (!initialActiveKey) return;
+    setActiveKey((currentKey) => currentKey ?? initialActiveKey);
+  }, [initialActiveKey]);
 
   return (
     <div className="absolute right-[0.55rem] top-[20px] z-[45]">
       <div className="relative">
         {isOpen ? (
-          <div className="absolute right-[28px] w-[132px] overflow-hidden rounded-[6px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
-            <div className="flex h-[36px] items-center gap-2 border-b border-[#e5eaf1] bg-[#f8fafc] px-[10px] text-[13px] font-bold text-[#1f2937]">
+          <div className="absolute right-[28px] w-[154px] overflow-hidden rounded-[6px] border border-border bg-background shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
+            <div className="flex h-[36px] items-center gap-2 border-b border-border bg-secondary px-[10px] text-[13px] font-bold text-foreground">
               <div className="flex items-center gap-2">
-                <PanelsTopLeft className="h-4 w-4 text-[#1e88e5]" />
+                <PanelsTopLeft className="h-4 w-4 text-primary" />
                 <span>분석도구</span>
               </div>
             </div>
@@ -53,7 +111,9 @@ export default function AnalysisPopupMenu({ onOpenPopup, onOpenInfoSearch }: Pro
             <div className="flex flex-col gap-1 p-[6px]">
               {ANALYSIS_POPUP_ITEMS.map((item) => {
                 const Icon = item.icon;
-                const isActive = activeKey === item.key;
+                const isActive = item.key === "gisEditPopup"
+                  ? isGisEditActive
+                  : activeKey === item.key;
 
                 return (
                   <button
@@ -61,10 +121,16 @@ export default function AnalysisPopupMenu({ onOpenPopup, onOpenInfoSearch }: Pro
                     type="button"
                     className={`relative flex h-[34px] items-center gap-[7px] rounded-[5px] border px-[8px] pl-[10px] text-left text-[12px] font-semibold transition ${
                       isActive
-                        ? "border-[#b9dcff] bg-[#eaf4ff] font-bold text-[#0f5fa8] before:absolute before:left-0 before:top-[7px] before:bottom-[7px] before:w-[3px] before:rounded-r-[2px] before:bg-[#1e88e5]"
-                        : "border-transparent bg-white text-[#374151] hover:border-[#cfe5ff] hover:bg-[#eef6ff] hover:text-[#1e3a5f]"
+                        ? "border-primary bg-secondary font-bold text-primary before:absolute before:left-0 before:top-[7px] before:bottom-[7px] before:w-[3px] before:rounded-r-[2px] before:bg-primary"
+                        : "border-transparent bg-background text-foreground hover:border-border hover:bg-accent hover:text-primary"
                     }`}
                     onClick={() => {
+                      if (item.key === "gisEditPopup" && onToggleGisEdit) {
+                        setActiveKey(item.key);
+                        onToggleGisEdit();
+                        return;
+                      }
+
                       setActiveKey(item.key);
 
                       if (item.key === "infoSearch") {
@@ -72,15 +138,30 @@ export default function AnalysisPopupMenu({ onOpenPopup, onOpenInfoSearch }: Pro
                         return;
                       }
 
-                      onOpenPopup(item.key);
+                      const popupWindow = onOpenPopup(item.key);
+                      if (!popupWindow) {
+                        setActiveKey(null);
+                        return;
+                      }
+
+                      const closeWatcher = window.setInterval(() => {
+                        if (!popupWindow.closed) return;
+                        window.clearInterval(closeWatcher);
+                        setActiveKey((currentKey) =>
+                          currentKey === item.key ? null : currentKey,
+                        );
+                      }, 300);
                     }}
                   >
-                    <Icon
-                      className={`h-[15px] w-[15px] shrink-0 ${
-                        isActive ? "text-[#1e88e5]" : "text-[#64748b]"
-                      }`}
-                    />
-                    <span className="break-keep whitespace-normal">{item.label}</span>
+                    {item.renderIcon ? item.renderIcon({ isActive }) : null}
+                    {Icon ? (
+                      <Icon
+                        className={`h-[15px] w-[15px] shrink-0 ${
+                          isActive ? "text-primary" : "text-label"
+                        }`}
+                      />
+                    ) : null}
+                    <span className="whitespace-nowrap">{item.label}</span>
                   </button>
                 );
               })}
@@ -90,7 +171,7 @@ export default function AnalysisPopupMenu({ onOpenPopup, onOpenInfoSearch }: Pro
 
         <button
           type="button"
-          className="absolute right-0 top-0 flex h-[36px] w-[20px] items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#64748b] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] hover:text-[#1e88e5]"
+          className="absolute right-0 top-0 flex h-[36px] w-[20px] items-center justify-center rounded-[4px] border border-border bg-background text-label shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-accent hover:text-primary"
           onClick={() => setIsOpen((value) => !value)}
           title={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
           aria-label={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
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 81e14a83f..6818b45e4 100644
--- a/apps/sn/app/(map-layout)/map/components/common/table.ts
+++ b/apps/sn/app/(map-layout)/map/components/common/table.ts
@@ -1,7 +1,9 @@
 // 하수관로
 export const MsSwagePplCol = [
   { id: 'fclt_mng_no', title: '시설관리번호' },
+  { id: 'mngInstNm', title: '관리기관' },
   { id: 'inst_mng_no', title: '기관관리번호' },
+  { id: 'flowDirectionBasis', title: '유하방향 근거' },
   { id: 'instl_ymd', title: '설치일자' },
   { id: 'elapsedYears', title: '경과년도' },
   { id: 'mapsht_no', title: '도엽번호' },
@@ -33,6 +35,7 @@ export const MsSwagePplCol2 = [
   { id: 'rowNumber', title: '일련\n번호' },
   { id: 'fcltMngNo', title: '시설\n관리번호' },
   { id: 'instMngNo', title: '기관\n관리번호' },
+  { id: 'flowDirectionBasis', title: '유하방향\n근거' },
   { id: 'ctpvNm', title: '시도' },
   { id: 'sggNm', title: '시군구' },
   { id: "swtrmt_zone_nm", title: "처리구역" },
diff --git a/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryDetailPanel.tsx b/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryDetailPanel.tsx
new file mode 100644
index 000000000..66ed55078
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryDetailPanel.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { formatFloodArea, formatFloodDepth, type FloodHistoryItem } from "./floodHistoryTypes";
+
+type Props = {
+  detail: FloodHistoryItem;
+  onClose: () => void;
+  position: {
+    left: number;
+    top: number;
+  };
+};
+
+type DetailTab = "year" | "disaster" | "rainfall";
+
+const renderRows = (rows: Array<[string, string]>) => (
+  <table className="w-full table-fixed border-collapse">
+    <colgroup>
+      <col className="w-[42%]" />
+      <col className="w-[58%]" />
+    </colgroup>
+    <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]">
+            {label}
+          </th>
+          <td className="border border-[#d8e3ee] bg-white px-3 py-[7px] text-[1.02rem] text-[#1f2937]">
+            {value}
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+export default function FloodHistoryDetailPanel({ 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],
+  );
+
+  const disasterRows = useMemo(
+    () => [
+      ["침수재해명", 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],
+  );
+
+  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)]"
+      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>
+        <button
+          type="button"
+          className="rounded-[4px] px-[4px] text-[13px] leading-none text-[#7b8ba1] transition hover:bg-[#eef5fb] hover:text-[#35597d]"
+          onClick={onClose}
+        >
+          ×
+        </button>
+      </div>
+
+      <div className="border-b border-[#d8e3ee] bg-[#f8fbfe] px-[6px] pt-[6px]">
+        <div className="flex gap-[4px]">
+        {[
+          ["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>
+          );
+        })}
+        </div>
+      </div>
+
+      <div className="bg-white p-[6px]">
+        <div className="overflow-hidden rounded-[6px] border border-[#d8e3ee] bg-white">
+          {renderRows(currentRows)}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx
new file mode 100644
index 000000000..f9ae60995
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx
@@ -0,0 +1,408 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+import { downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+import UiPageNations from "@common/business_components/ui/table/uiPageNations";
+import useStore from "@/store/useStore";
+import {
+  buildFloodHistoryYearOptions,
+  buildFloodHistoryTableRows,
+  FLOOD_HISTORY_DEFAULT_FILTERS,
+  FLOOD_HISTORY_DOWNLOAD_HEADERS,
+  FLOOD_HISTORY_ITEMS,
+  FLOOD_HISTORY_PAGE_SIZE,
+  FLOOD_HISTORY_ROW_SELECT_MESSAGE,
+  formatFloodArea,
+  formatFloodDepth,
+  normalizeFloodHistoryFilters,
+  type FloodHistoryFilters,
+  type FloodHistoryItem,
+} from "./floodHistoryTypes";
+
+const resolveOptionText = (
+  code: string,
+  options: Array<{ text: string; val: string | number }>,
+  prefixLength?: number,
+) => {
+  const normalized = String(code ?? "").trim();
+  if (!normalized || normalized === "0") return "";
+  const lookup = prefixLength ? normalized.slice(0, prefixLength) : normalized;
+  return options.find((item) => String(item.val).trim() === lookup)?.text ?? "";
+};
+
+const GRID_COLUMNS = [
+  { id: "rowNo", title: "NO", width: "64px", align: "center" },
+  { id: "ctpvNm", title: "시도", width: "90px", align: "center" },
+  { id: "sggNm", title: "시군구", width: "100px", align: "center" },
+  { id: "startDateDisplay", title: "침수시작일자", width: "118px", align: "center" },
+  { id: "endDateDisplay", title: "침수종료일자", width: "118px", align: "center" },
+  { id: "startTimeDisplay", title: "침수시작시간", width: "98px", align: "center" },
+  { id: "endTimeDisplay", title: "침수종료시간", width: "98px", align: "center" },
+  { id: "floodYearDisplay", title: "침수년도", width: "96px", align: "center" },
+  { id: "floodHourDisplay", title: "침수시간", width: "100px", align: "center" },
+  { id: "disasterName", title: "침수재해명", width: "190px", align: "left" },
+  { id: "districtNameDisplay", title: "침수지구명", width: "150px", align: "left" },
+  { id: "causeCodeDisplay", title: "침수원인상세코드", width: "132px", align: "center" },
+  { id: "causeDetailDisplay", title: "침수원인상세", width: "190px", align: "left" },
+  { id: "avgFloodDepthDisplay", title: "평균침수위", width: "104px", align: "right" },
+  { id: "floodAreaDisplay", title: "침수면적", width: "104px", align: "right" },
+  { id: "exmnYearDisplay", title: "조사년도", width: "96px", align: "center" },
+  { id: "damageAmountDisplay", title: "피해금액", width: "132px", align: "right" },
+] as const;
+
+const buildDownloadRows = (rows: FloodHistoryItem[]) =>
+  rows.map((row, index) => ({
+    rowNo: index + 1,
+    ctpvNm: row.ctpvNm,
+    sggNm: row.sggNm,
+    disasterName: row.disasterName,
+    exmnYearDisplay: `${row.exmnYear}년`,
+    avgFloodDepthDisplay: formatFloodDepth(row.avgFloodDepthM),
+    floodAreaDisplay: formatFloodArea(row.floodAreaHa),
+    causeDetailDisplay: row.causeDetailName,
+    startDateDisplay: row.startDate,
+    endDateDisplay: row.endDate,
+    startTimeDisplay: row.startTime,
+    endTimeDisplay: row.endTime,
+    causeCodeDisplay: row.causeDetailCode,
+    districtNameDisplay: row.districtName,
+    damageAmountDisplay: row.damageAmount,
+    floodHourDisplay: row.floodHour,
+    floodYearDisplay: `${row.floodYear}년`,
+  }));
+
+export default function FloodHistoryPopupPage() {
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  // 조회조건 draft는 popup 내부에서 사용자가 편집 중인 값이다.
+  const [filters, setFilters] = useState<FloodHistoryFilters>(FLOOD_HISTORY_DEFAULT_FILTERS);
+  // 적용된 조회조건과 선택행은 다운로드/페이지 이동에도 같은 기준을 유지하기 위해 분리한다.
+  const [appliedFilters, setAppliedFilters] = useState<FloodHistoryFilters>(FLOOD_HISTORY_DEFAULT_FILTERS);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedHistoryId, setSelectedHistoryId] = useState("");
+
+  useEffect(() => {
+    if (ctpv.length === 0) void fetchCtpv();
+    if (sgg.length === 0) void fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
+
+  const floodYearOptions = useMemo(
+    () => buildFloodHistoryYearOptions(FLOOD_HISTORY_ITEMS),
+    [],
+  );
+
+  const sggOptions = useMemo(
+    () =>
+      filters.ctpvCd === "0"
+        ? sgg
+        : sgg.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2))),
+    [filters.ctpvCd, sgg],
+  );
+
+  const filteredRows = useMemo(() => {
+    const normalized = normalizeFloodHistoryFilters(appliedFilters);
+    const selectedCtpvName = resolveOptionText(normalized.ctpvCd, ctpv as any, 2);
+    const selectedSggName = resolveOptionText(normalized.sggCd, sgg as any, 5);
+    const disasterToken = normalized.disasterName.toLocaleLowerCase("ko-KR");
+
+    return FLOOD_HISTORY_ITEMS.filter((item) => {
+      if (selectedCtpvName && item.ctpvNm !== selectedCtpvName) return false;
+      if (selectedSggName && item.sggNm !== selectedSggName) return false;
+      if (normalized.floodYear && item.floodYear !== normalized.floodYear) return false;
+      if (
+        disasterToken &&
+        !item.disasterName.toLocaleLowerCase("ko-KR").includes(disasterToken) &&
+        !item.districtName.toLocaleLowerCase("ko-KR").includes(disasterToken)
+      ) {
+        return false;
+      }
+      return true;
+    }).sort((left, right) => {
+      if (left.floodYear !== right.floodYear) {
+        return Number(right.floodYear) - Number(left.floodYear);
+      }
+      return left.disasterName.localeCompare(right.disasterName, "ko");
+    });
+  }, [appliedFilters, ctpv, sgg]);
+
+  const pagedRows = useMemo(() => {
+    const start = (currentPage - 1) * FLOOD_HISTORY_PAGE_SIZE;
+    const end = start + FLOOD_HISTORY_PAGE_SIZE;
+    return buildFloodHistoryTableRows(
+      filteredRows.slice(start, end),
+      currentPage,
+      FLOOD_HISTORY_PAGE_SIZE,
+    );
+  }, [currentPage, filteredRows]);
+
+  const handleSearch = () => {
+    const normalized = normalizeFloodHistoryFilters(filters);
+
+    if (normalized.sggCd !== "0" && normalized.ctpvCd === "0") {
+      alert("시도를 먼저 선택하세요.");
+      return;
+    }
+    if (normalized.floodYear && normalized.floodYear.length !== 4) {
+      alert("침수발생년도는 4자리 연도로 입력하세요.");
+      return;
+    }
+
+    setAppliedFilters(normalized);
+    setCurrentPage(1);
+    setSelectedHistoryId("");
+  };
+
+  const handleDownload = async () => {
+    if (filteredRows.length === 0) {
+      alert("다운로드할 침수발생이력 데이터가 없습니다.");
+      return;
+    }
+
+    await downloadExcelWithKoreanHeaders({
+      data: buildDownloadRows(filteredRows) as unknown as JSON[],
+      fileName: `침수흔적도_${new Date().toISOString().slice(0, 10)}.xlsx`,
+      sheetNameArray: ["침수흔적도"],
+      headerRange: "A1:Q1",
+      headerMapping: FLOOD_HISTORY_DOWNLOAD_HEADERS,
+    });
+  };
+
+  const handleRowDoubleClick = (row: FloodHistoryItem) => {
+    window.opener?.postMessage(
+      {
+        type: FLOOD_HISTORY_ROW_SELECT_MESSAGE,
+        row,
+        openDetail: false,
+      },
+      window.location.origin,
+    );
+    window.close();
+  };
+
+  const handleRowClick = (row: FloodHistoryItem) => {
+    setSelectedHistoryId(row.historyId);
+    // popup을 유지한 채 메인 지도에 mock 침수흔적/침수심 preview를 먼저 보여준다.
+    window.opener?.postMessage(
+      {
+        type: FLOOD_HISTORY_ROW_SELECT_MESSAGE,
+        row,
+        openDetail: false,
+      },
+      window.location.origin,
+    );
+  };
+
+  return (
+    <main className="sn-popup-page">
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">침수흔적도 목록</h1>
+        <div />
+      </header>
+
+      <section className="sn-popup-section">
+        <div className="sn-popup-filter-panel-compact">
+          <div className="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>
+
+          <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="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>
+              {floodYearOptions.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") handleSearch();
+              }}
+            />
+          </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={handleSearch}
+            >
+              조회
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              color="primary"
+              className="sn-popup-primary-button !text-[1.1rem]"
+              onClick={() => void handleDownload()}
+            >
+              다운로드
+            </Button>
+          </div>
+        </div>
+        </div>
+
+        <div className="mt-3 flex min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              침수흔적도 조회 결과 {filteredRows.length.toLocaleString("ko-KR")}건
+            </h3>
+          </div>
+
+          <div className="card !m-[1.2rem] !mt-0 min-h-0 flex-1 overflow-x-auto overflow-y-auto">
+            <Table variant="secondary" className="w-max min-w-full">
+              <colgroup>
+                {GRID_COLUMNS.map((head) => (
+                  <col key={head.id} style={{ width: head.width }} />
+                ))}
+              </colgroup>
+              <TableHeader className="font-bold">
+                <TableRow>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">NO</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">시도</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">시군구</TableHead>
+                  <TableHead colSpan={4} className="whitespace-nowrap">강우 분석정보</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">침수재해명</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">침수년도</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">침수시간</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">침수지구명</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">침수원인상세코드</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">침수원인상세</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">평균침수위</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">침수면적</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">조사년도</TableHead>
+                  <TableHead rowSpan={2} className="whitespace-nowrap">피해금액</TableHead>
+                </TableRow>
+                <TableRow>
+                  <TableHead className="whitespace-nowrap">침수시작일자</TableHead>
+                  <TableHead className="whitespace-nowrap">침수종료일자</TableHead>
+                  <TableHead className="whitespace-nowrap">침수시작시간</TableHead>
+                  <TableHead className="whitespace-nowrap">침수종료시간</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody className="text-center">
+                {pagedRows.length > 0 ? (
+                  pagedRows.map((row) => {
+                    const isSelected = selectedHistoryId === row.historyId;
+
+                    return (
+                      <TableRow
+                        key={row.historyId}
+                        className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row-hover"}`}
+                        onClick={() => handleRowClick(row)}
+                        onDoubleClick={() => handleRowDoubleClick(row)}
+                      >
+                        <TableCell>{row.rowNo}</TableCell>
+                        <TableCell>{row.ctpvNm}</TableCell>
+                        <TableCell>{row.sggNm}</TableCell>
+                        <TableCell>{row.startDateDisplay}</TableCell>
+                        <TableCell>{row.endDateDisplay}</TableCell>
+                        <TableCell>{row.startTimeDisplay}</TableCell>
+                        <TableCell>{row.endTimeDisplay}</TableCell>
+                        <TableCell className="text-left">{row.disasterName}</TableCell>
+                        <TableCell>{row.floodYearDisplay}</TableCell>
+                        <TableCell>{row.floodHourDisplay}</TableCell>
+                        <TableCell className="text-left">{row.districtNameDisplay}</TableCell>
+                        <TableCell>{row.causeCodeDisplay}</TableCell>
+                        <TableCell className="text-left">{row.causeDetailDisplay}</TableCell>
+                        <TableCell className="text-right">{row.avgFloodDepthDisplay}</TableCell>
+                        <TableCell className="text-right">{row.floodAreaDisplay}</TableCell>
+                        <TableCell>{row.exmnYearDisplay}</TableCell>
+                        <TableCell className="text-right">{row.damageAmountDisplay}</TableCell>
+                      </TableRow>
+                    );
+                  })
+                ) : (
+                  <TableRow>
+                     <TableCell colSpan={GRID_COLUMNS.length} className="sn-popup-empty-cell h-24 text-center">
+                      조회된 데이터가 없습니다.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+
+          {filteredRows.length > 0 ? (
+            <UiPageNations
+              total={filteredRows.length}
+              cur={currentPage}
+              pageSize={FLOOD_HISTORY_PAGE_SIZE}
+              onPageChange={setCurrentPage}
+            />
+          ) : null}
+
+          <div className="sn-popup-help-text">
+            행 클릭 시 메인 지도에 미리 표시되고, 더블클릭하면 팝업을 닫습니다. 상세정보는 지도 위 침수흔적 영역을 클릭해 확인합니다.
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/floodHistory/floodHistoryTypes.ts b/apps/sn/app/(map-layout)/map/components/floodHistory/floodHistoryTypes.ts
new file mode 100644
index 000000000..fd6ef484e
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/floodHistory/floodHistoryTypes.ts
@@ -0,0 +1,458 @@
+"use client";
+
+export const FLOOD_HISTORY_POPUP_KEY = "floodHistoryPopup";
+export const FLOOD_HISTORY_ROW_SELECT_MESSAGE = "SN_FLOOD_HISTORY_ROW_SELECT";
+export const FLOOD_HISTORY_LAYER_TYPE = "tb_sn_flood_trace_mock";
+export const FLOOD_HISTORY_LAYER_NAME = "침수흔적도";
+export const FLOOD_HISTORY_AREA_LAYER_ID = "SN_FLOOD_HISTORY_AREA";
+export const FLOOD_HISTORY_DEPTH_LAYER_ID = "SN_FLOOD_HISTORY_DEPTH";
+export const FLOOD_HISTORY_PAGE_SIZE = 10;
+
+export type FloodHistoryFilters = {
+  ctpvCd: string;
+  sggCd: string;
+  floodYear: string;
+  disasterName: string;
+};
+
+export type FloodHistoryDepthZone = {
+  zoneId: string;
+  depthLabel: string;
+  color: string;
+  ring: [number, number][];
+};
+
+export type FloodHistoryItem = {
+  historyId: string;
+  ctpvNm: string;
+  sggNm: string;
+  floodYear: string;
+  exmnYear: string;
+  disasterName: string;
+  districtName: string;
+  floodAreaHa: number;
+  avgFloodDepthM: number;
+  floodDepthM: number;
+  gradeLabel: string;
+  startDate: string;
+  endDate: string;
+  startTime: string;
+  endTime: string;
+  floodHour: string;
+  causeDetailCode: string;
+  causeDetailName: string;
+  damageAmount: string;
+  rainStartTime: string;
+  rainEndTime: string;
+  totalRainfallMm: number;
+  rainfallIntensityMmHr: number;
+  areaRing: [number, number][];
+  depthZones: FloodHistoryDepthZone[];
+};
+
+export type FloodHistoryTableRow = FloodHistoryItem & {
+  rowNo: number;
+  exmnYearDisplay: string;
+  avgFloodDepthDisplay: string;
+  floodAreaDisplay: string;
+  causeDetailDisplay: string;
+  startDateDisplay: string;
+  endDateDisplay: string;
+  startTimeDisplay: string;
+  endTimeDisplay: string;
+  causeCodeDisplay: string;
+  districtNameDisplay: string;
+  damageAmountDisplay: string;
+  floodHourDisplay: string;
+  floodYearDisplay: string;
+};
+
+export const FLOOD_HISTORY_DEFAULT_FILTERS: FloodHistoryFilters = {
+  ctpvCd: "0",
+  sggCd: "0",
+  floodYear: "",
+  disasterName: "",
+};
+
+export const FLOOD_HISTORY_DOWNLOAD_HEADERS: Record<string, string> = {
+  rowNo: "NO",
+  ctpvNm: "시도",
+  sggNm: "시군구",
+  disasterName: "침수재해명",
+  exmnYearDisplay: "조사년도",
+  avgFloodDepthDisplay: "평균침수위",
+  floodAreaDisplay: "침수면적",
+  causeDetailDisplay: "침수원인상세",
+  startDateDisplay: "침수시작일자",
+  endDateDisplay: "침수종료일자",
+  startTimeDisplay: "침수시작시간",
+  endTimeDisplay: "침수종료시간",
+  causeCodeDisplay: "침수원인상세코드",
+  districtNameDisplay: "침수지구명",
+  damageAmountDisplay: "피해금액",
+  floodHourDisplay: "침수시간",
+  floodYearDisplay: "침수년도",
+};
+
+export const FLOOD_HISTORY_DEPTH_LEGEND_ITEMS = [
+  { color: "#fff27a", label: "0.0~0.5m" },
+  { color: "#c2f13d", label: "0.5~1.0m" },
+  { color: "#67d8ff", label: "1.0~2.0m" },
+  { color: "#8f8bff", label: "2.0~5.0m" },
+  { color: "#f2528b", label: "5.0m 이상" },
+] as const;
+
+const toRadian = (degree: number) => (degree * Math.PI) / 180;
+
+const createIrregularRing = ({
+  centerX,
+  centerY,
+  radiusX,
+  radiusY,
+  scales,
+  rotationDeg = 0,
+}: {
+  centerX: number;
+  centerY: number;
+  radiusX: number;
+  radiusY: number;
+  scales: number[];
+  rotationDeg?: number;
+}): [number, number][] => {
+  const rotation = toRadian(rotationDeg);
+  const points = scales.map((scale, index) => {
+    const angle = rotation + (Math.PI * 2 * index) / scales.length;
+    const jitterX = radiusX * scale * Math.cos(angle);
+    const jitterY = radiusY * scale * Math.sin(angle);
+    return [centerX + jitterX, centerY + jitterY] as [number, number];
+  });
+
+  return [...points, points[0]];
+};
+
+const createDepthZones = (
+  historyId: string,
+  centerX: number,
+  centerY: number,
+): FloodHistoryDepthZone[] => {
+  return [
+    {
+      zoneId: `${historyId}-depth-1`,
+      depthLabel: "0.0~0.5m",
+      color: "#fff27a",
+      ring: createIrregularRing({
+        centerX: centerX - 5200,
+        centerY: centerY - 2600,
+        radiusX: 3600,
+        radiusY: 2900,
+        rotationDeg: -18,
+        scales: [1.02, 0.78, 0.9, 1.08, 0.86, 0.72, 0.94, 1.04],
+      }),
+    },
+    {
+      zoneId: `${historyId}-depth-2`,
+      depthLabel: "0.5~1.0m",
+      color: "#c2f13d",
+      ring: createIrregularRing({
+        centerX: centerX + 2600,
+        centerY: centerY - 1200,
+        radiusX: 4300,
+        radiusY: 3600,
+        rotationDeg: 12,
+        scales: [1.04, 0.88, 1.02, 0.8, 0.92, 1.08, 0.84, 0.95],
+      }),
+    },
+    {
+      zoneId: `${historyId}-depth-3`,
+      depthLabel: "1.0~2.0m",
+      color: "#67d8ff",
+      ring: createIrregularRing({
+        centerX: centerX - 600,
+        centerY: centerY + 2600,
+        radiusX: 5600,
+        radiusY: 4700,
+        rotationDeg: 8,
+        scales: [1.12, 0.86, 0.94, 1.06, 0.82, 0.97, 1.04, 0.9, 1.08, 0.84],
+      }),
+    },
+    {
+      zoneId: `${historyId}-depth-4`,
+      depthLabel: "2.0~5.0m",
+      color: "#8f8bff",
+      ring: createIrregularRing({
+        centerX: centerX + 4200,
+        centerY: centerY + 5200,
+        radiusX: 3200,
+        radiusY: 2500,
+        rotationDeg: 26,
+        scales: [1.05, 0.82, 1.08, 0.88, 0.96, 0.78, 1.02, 0.9],
+      }),
+    },
+    {
+      zoneId: `${historyId}-depth-5`,
+      depthLabel: "5.0m 이상",
+      color: "#f2528b",
+      ring: createIrregularRing({
+        centerX: centerX + 600,
+        centerY: centerY - 5200,
+        radiusX: 1500,
+        radiusY: 1350,
+        rotationDeg: -10,
+        scales: [1.0, 0.8, 1.06, 0.84, 0.94, 0.76, 0.98],
+      }),
+    },
+  ];
+};
+
+const createHistory = (
+  item: Omit<FloodHistoryItem, "areaRing" | "depthZones"> & {
+    centerX: number;
+    centerY: number;
+    width: number;
+    height: number;
+  },
+): FloodHistoryItem => {
+  const { centerX, centerY, width, height, ...detail } = item;
+
+  return {
+    ...detail,
+    areaRing: createIrregularRing({
+      centerX,
+      centerY,
+      radiusX: width / 2,
+      radiusY: height / 2,
+      rotationDeg: 9,
+      scales: [1.08, 0.9, 1.04, 0.82, 0.98, 1.12, 0.88, 0.96, 1.03, 0.86],
+    }),
+    depthZones: createDepthZones(detail.historyId, centerX, centerY),
+  };
+};
+
+export const FLOOD_HISTORY_ITEMS: FloodHistoryItem[] = [
+  createHistory({
+    historyId: "FH-2024-001",
+    ctpvNm: "부산광역시",
+    sggNm: "중구",
+    floodYear: "2024",
+    exmnYear: "2025",
+    disasterName: "중앙동 저지대 침수",
+    districtName: "중앙동 저지대",
+    floodAreaHa: 1.8,
+    avgFloodDepthM: 0.62,
+    floodDepthM: 0.62,
+    gradeLabel: "1등급",
+    startDate: "2024-07-18",
+    endDate: "2024-07-18",
+    startTime: "14:10",
+    endTime: "18:20",
+    floodHour: "4.2시간",
+    causeDetailCode: "FC-01",
+    causeDetailName: "집중강우",
+    damageAmount: "120,000,000원",
+    rainStartTime: "13:50",
+    rainEndTime: "18:20",
+    totalRainfallMm: 91,
+    rainfallIntensityMmHr: 31,
+    centerX: 1122000,
+    centerY: 1705000,
+    width: 18000,
+    height: 14000,
+  }),
+  createHistory({
+    historyId: "FH-2023-002",
+    ctpvNm: "경상남도",
+    sggNm: "창원시",
+    floodYear: "2023",
+    exmnYear: "2024",
+    disasterName: "팔용동 공단 배수지연 침수",
+    districtName: "팔용동 공단",
+    floodAreaHa: 4.8,
+    avgFloodDepthM: 1.92,
+    floodDepthM: 1.92,
+    gradeLabel: "2등급",
+    startDate: "2023-08-11",
+    endDate: "2023-08-11",
+    startTime: "09:40",
+    endTime: "15:10",
+    floodHour: "5.5시간",
+    causeDetailCode: "FC-04",
+    causeDetailName: "배수시설 처리능력 초과",
+    damageAmount: "340,000,000원",
+    rainStartTime: "08:55",
+    rainEndTime: "15:05",
+    totalRainfallMm: 138,
+    rainfallIntensityMmHr: 42,
+    centerX: 1081000,
+    centerY: 1778000,
+    width: 25000,
+    height: 17000,
+  }),
+  createHistory({
+    historyId: "FH-2022-003",
+    ctpvNm: "울산광역시",
+    sggNm: "남구",
+    floodYear: "2022",
+    exmnYear: "2023",
+    disasterName: "태화강 제내지 도로 침수",
+    districtName: "여천동 하류부",
+    floodAreaHa: 3.1,
+    avgFloodDepthM: 1.15,
+    floodDepthM: 1.15,
+    gradeLabel: "2등급",
+    startDate: "2022-09-06",
+    endDate: "2022-09-06",
+    startTime: "07:20",
+    endTime: "12:40",
+    floodHour: "5.3시간",
+    causeDetailCode: "FC-02",
+    causeDetailName: "하천 수위 상승",
+    damageAmount: "210,000,000원",
+    rainStartTime: "06:30",
+    rainEndTime: "11:50",
+    totalRainfallMm: 117,
+    rainfallIntensityMmHr: 37,
+    centerX: 1168000,
+    centerY: 1811000,
+    width: 22000,
+    height: 16000,
+  }),
+  createHistory({
+    historyId: "FH-2021-004",
+    ctpvNm: "부산광역시",
+    sggNm: "서구",
+    floodYear: "2021",
+    exmnYear: "2022",
+    disasterName: "서대신동 급경사지 유출 침수",
+    districtName: "서대신동 일원",
+    floodAreaHa: 2.4,
+    avgFloodDepthM: 0.85,
+    floodDepthM: 0.85,
+    gradeLabel: "1등급",
+    startDate: "2021-07-07",
+    endDate: "2021-07-07",
+    startTime: "16:00",
+    endTime: "20:10",
+    floodHour: "4.1시간",
+    causeDetailCode: "FC-03",
+    causeDetailName: "우수관로 월류",
+    damageAmount: "175,000,000원",
+    rainStartTime: "15:20",
+    rainEndTime: "19:50",
+    totalRainfallMm: 104,
+    rainfallIntensityMmHr: 29,
+    centerX: 1111000,
+    centerY: 1709000,
+    width: 20000,
+    height: 14500,
+  }),
+  createHistory({
+    historyId: "FH-2020-005",
+    ctpvNm: "부산광역시",
+    sggNm: "영도구",
+    floodYear: "2020",
+    exmnYear: "2021",
+    disasterName: "청학동 해안도로 월파 침수",
+    districtName: "청학동 해안부",
+    floodAreaHa: 1.2,
+    avgFloodDepthM: 0.48,
+    floodDepthM: 0.48,
+    gradeLabel: "1등급",
+    startDate: "2020-10-22",
+    endDate: "2020-10-22",
+    startTime: "03:10",
+    endTime: "06:30",
+    floodHour: "3.3시간",
+    causeDetailCode: "FC-06",
+    causeDetailName: "해안 월파",
+    damageAmount: "82,000,000원",
+    rainStartTime: "02:40",
+    rainEndTime: "05:50",
+    totalRainfallMm: 55,
+    rainfallIntensityMmHr: 18,
+    centerX: 1129000,
+    centerY: 1695000,
+    width: 15000,
+    height: 12000,
+  }),
+  createHistory({
+    historyId: "FH-2019-006",
+    ctpvNm: "경상남도",
+    sggNm: "김해시",
+    floodYear: "2019",
+    exmnYear: "2020",
+    disasterName: "장유 배수분구 내수 침수",
+    districtName: "장유 배수분구",
+    floodAreaHa: 2.9,
+    avgFloodDepthM: 0.96,
+    floodDepthM: 0.96,
+    gradeLabel: "1등급",
+    startDate: "2019-09-21",
+    endDate: "2019-09-21",
+    startTime: "11:30",
+    endTime: "16:15",
+    floodHour: "4.8시간",
+    causeDetailCode: "FC-05",
+    causeDetailName: "배수펌프 지연 가동",
+    damageAmount: "143,000,000원",
+    rainStartTime: "10:45",
+    rainEndTime: "15:50",
+    totalRainfallMm: 88,
+    rainfallIntensityMmHr: 24,
+    centerX: 1098000,
+    centerY: 1734000,
+    width: 21000,
+    height: 15000,
+  }),
+];
+
+export const normalizeFloodHistoryFilters = (
+  filters: FloodHistoryFilters,
+): FloodHistoryFilters => ({
+  ctpvCd: String(filters.ctpvCd ?? "0") || "0",
+  sggCd: String(filters.sggCd ?? "0") || "0",
+  floodYear: String(filters.floodYear ?? "").replace(/[^0-9]/g, "").slice(0, 4),
+  disasterName: String(filters.disasterName ?? "").trim(),
+});
+
+export const formatFloodArea = (value: number) => `${value.toFixed(1)}ha`;
+
+export const formatFloodDepth = (value: number) => `${value.toFixed(2)}m`;
+
+export const buildFloodHistoryTableRows = (
+  items: FloodHistoryItem[],
+  page: number,
+  pageSize = FLOOD_HISTORY_PAGE_SIZE,
+): FloodHistoryTableRow[] =>
+  items.map((item, index) => ({
+    ...item,
+    rowNo: (page - 1) * pageSize + index + 1,
+    exmnYearDisplay: `${item.exmnYear}년`,
+    avgFloodDepthDisplay: formatFloodDepth(item.avgFloodDepthM),
+    floodAreaDisplay: formatFloodArea(item.floodAreaHa),
+    causeDetailDisplay: item.causeDetailName,
+    startDateDisplay: item.startDate,
+    endDateDisplay: item.endDate,
+    startTimeDisplay: item.startTime,
+    endTimeDisplay: item.endTime,
+    causeCodeDisplay: item.causeDetailCode,
+    districtNameDisplay: item.districtName,
+    damageAmountDisplay: item.damageAmount,
+    floodHourDisplay: item.floodHour,
+    floodYearDisplay: `${item.floodYear}년`,
+  }));
+
+export const buildFloodHistoryYearOptions = (items: FloodHistoryItem[]) =>
+  Array.from(new Set(items.map((item) => item.floodYear)))
+    .sort((left, right) => Number(right) - Number(left));
+
+const resolveFloodHistoryNodeName = (node: any) =>
+  String(node?.text ?? node?.data?.lyrNm ?? node?.data?.name ?? node?.lyrNm ?? node?.name ?? "").trim();
+
+const resolveFloodHistoryLayerType = (node: any) =>
+  String(node?.data?.lyrTyNm ?? node?.data?.lyrTypeNm ?? node?.lyrTyNm ?? node?.lyrTypeNm ?? "").trim();
+
+export const isFloodHistoryNode = (node: any) => {
+  const name = resolveFloodHistoryNodeName(node);
+  const layerType = resolveFloodHistoryLayerType(node);
+  return name === FLOOD_HISTORY_LAYER_NAME || layerType === FLOOD_HISTORY_LAYER_TYPE;
+};
diff --git a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx
new file mode 100644
index 000000000..591077005
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditPipeSessionPopup.tsx
@@ -0,0 +1,341 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import { Button } from "@common/components/ui";
+
+import { getData } from "@/components/lib/api";
+import { VerticalTable } from "@/components/ui/verticalTable";
+
+import type { GisEditChange, GisEditPipeBasicInfo } from "./gisEditTypes";
+import { MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from "../common/table";
+
+type Props = {
+  change: GisEditChange;
+  featureData: any;
+  onClose: () => void;
+  onSave: (changeId: string, draft: GisEditPipeBasicInfo) => void;
+};
+
+type MngInstOption = {
+  mngInstCd: string;
+  lwrInstNm: string;
+};
+
+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: "instlYmd", sourceId: "instl_ymd", title: "설치일자", type: "date" },
+  { id: "mapshtNo", sourceId: "mapsht_no", title: "도엽번호", type: "input" },
+  { id: "pdmtVl", sourceId: "pdmt_vl", title: "관경(mm)", type: "input" },
+  { id: "prlgVl", sourceId: "prlg_vl", title: "연장(m)", type: "input" },
+  {
+    id: "usgCd",
+    sourceId: "usg_cd",
+    title: "용도",
+    type: "select",
+    required: true,
+    options: [
+      EMPTY_SELECT_OPTION,
+      ...MS_SWAGE_PPL_USE_CODES.map((item) => ({ value: item.val.trim(), label: item.text })),
+    ],
+  },
+  {
+    id: "mqltCd",
+    sourceId: "mqlt_cd",
+    title: "재질",
+    type: "select",
+    options: [
+      EMPTY_SELECT_OPTION,
+      ...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: "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: "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, "도로", "하상"] },
+];
+
+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();
+  return text === "-" ? "" : text;
+};
+
+const isInvalidPipeLookupKey = (value: string) =>
+  !value || value === "-" || /^NEW-/i.test(value) || /^(null|undefined)$/i.test(value);
+
+const toDateInputValue = (value: unknown) => {
+  const text = toEditableText(value).replaceAll(".", "").replaceAll("-", "");
+  if (!/^\d{8}$/.test(text)) return "";
+  return `${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}`;
+};
+
+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 pickFields = (values: Record<string, any>, fieldIds: string[]) =>
+  fieldIds.reduce<Record<string, any>>((acc, fieldId) => {
+    if (Object.prototype.hasOwnProperty.call(values, fieldId)) {
+      acc[fieldId] = values[fieldId];
+    }
+    return acc;
+  }, {});
+
+const normalizeBasicFormValues = (values: Record<string, any>) => {
+  const nextValues = pickFields(values, PIPE_VISIBLE_BASIC_FIELD_IDS);
+  if (Object.prototype.hasOwnProperty.call(nextValues, "instlYmd")) {
+    nextValues.instlYmd = toDateInputValue(nextValues.instlYmd);
+  }
+  return nextValues;
+};
+
+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);
+    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);
+    return matched?.val.trim() ?? raw;
+  };
+
+  const sourceValues = featureData?.values_ ?? featureData ?? {};
+  return PIPE_BASIC_INFO_FIELDS.reduce<Record<string, any>>((acc, field) => {
+    const rawValue = getObjectValue(sourceValues, field);
+    if (field.id === "usgCd") {
+      acc[field.id] = resolveUsageCode(rawValue);
+      return acc;
+    }
+    if (field.id === "mqltCd") {
+      acc[field.id] = resolveMaterialCode(rawValue);
+      return acc;
+    }
+    if (field.id === "instlYmd") {
+      acc[field.id] = toDateInputValue(rawValue);
+      return acc;
+    }
+    acc[field.id] = toEditableText(rawValue);
+    return acc;
+  }, {});
+};
+
+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;
+};
+
+const buildInitialInputDraft = (change: GisEditChange) => ({
+  instlMbdyCd: toEditableText(change.basicInfo?.instlMbdyCd ?? ""),
+  swtrmtZoneNm: toEditableText(change.basicInfo?.swtrmtZoneNm ?? ""),
+  mltvZoneNm: toEditableText(change.basicInfo?.mltvZoneNm ?? ""),
+  mltvDtdvNm: toEditableText(change.basicInfo?.mltvDtdvNm ?? ""),
+  lineCd: toEditableText(change.basicInfo?.lineCd ?? ""),
+  floCd: toEditableText(change.basicInfo?.floCd ?? ""),
+  layCd: toEditableText(change.basicInfo?.layCd ?? ""),
+});
+
+export default function GisEditPipeSessionPopup({
+  change,
+  featureData,
+  onClose,
+  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 [mngInstOptions, setMngInstOptions] = useState<MngInstOption[]>([]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchMngInstOptions = async () => {
+      try {
+        const result = await getData("v1/fcltppl/mngInsts");
+        if (!isMounted) return;
+        setMngInstOptions(Array.isArray(result) ? result : []);
+      } catch {
+        if (isMounted) setMngInstOptions([]);
+      }
+    };
+
+    fetchMngInstOptions();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  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(
+    () =>
+      PIPE_BASIC_INFO_FIELDS.map((field) =>
+        field.id === "mngInstCd"
+          ? { ...field, options: mngInstSelectOptions }
+          : field,
+      ),
+    [mngInstSelectOptions],
+  );
+
+  useEffect(() => {
+    const initialBasicValues: Record<string, any> = {
+      ...baseFeatureValues,
+      ...normalizeBasicFormValues(change.basicInfo ?? {}),
+    };
+
+    setBasicInfoTableData(initialBasicValues);
+    setInputInfoTableData(buildInitialInputDraft(change));
+  }, [baseFeatureValues, change.changeId, isNewPipe]);
+
+  useEffect(() => {
+    if (isNewPipe) return;
+
+    const fcltMngNo = String(change.featureRef?.fcltMngNo ?? "").trim();
+    const mngInstCd = String(change.featureRef?.mngInstCd ?? "").trim();
+    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}`);
+        if (!isMounted || !result) return;
+
+        setInputInfoTableData((previous) => ({
+          ...previous,
+          ...pickFields(result, PIPE_VISIBLE_INPUT_FIELD_IDS),
+          ...pickFields(change.basicInfo ?? {}, PIPE_VISIBLE_INPUT_FIELD_IDS),
+        }));
+      } catch {
+        // Optional pipe input details should not block the edit session.
+      }
+    };
+
+    fetchPipeInputInfo();
+    return () => {
+      isMounted = false;
+    };
+  }, [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);
+    if (basicDraft.instlYmd) {
+      basicDraft.instlYmd = toDbYmdValue(basicDraft.instlYmd);
+    }
+    return {
+      ...basicDraft,
+      ...inputDraft,
+    };
+  };
+
+  const handleBasicInfoChange = (nextFormData: Record<string, any>) => {
+    setBasicInfoTableData(nextFormData);
+    onSave(change.changeId, buildMergedDraft(nextFormData, inputInfoTableData));
+  };
+
+  const handleInputInfoChange = (nextFormData: Record<string, any>) => {
+    setInputInfoTableData(nextFormData);
+    onSave(change.changeId, buildMergedDraft(basicInfoTableData, nextFormData));
+  };
+
+  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">
+            하수관로
+            {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"
+          size="xs"
+        >
+          ✕
+        </Button>
+      </div>
+      <div className="overflow-y-auto overflow-x-hidden flex-1">
+        <VerticalTable
+          headName="기본정보"
+          tableData={basicInfoTableRows}
+          headlist={basicInfoFields}
+          pageSize={20}
+          total={0}
+          cellClick={undefined}
+          onPageChange={() => {}}
+          isEditable={true}
+          onFormDataChange={handleBasicInfoChange}
+        />
+        <VerticalTable
+          headName="입력정보"
+          tableData={inputInfoTableRows}
+          headlist={PIPE_INPUT_INFO_FIELDS}
+          pageSize={20}
+          total={0}
+          cellClick={undefined}
+          onPageChange={() => {}}
+          isEditable={true}
+          onFormDataChange={handleInputInfoChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx
new file mode 100644
index 000000000..4978ce8bd
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import type { GisEditSessionSnapshot, GisEditTool } from "./gisEditTypes";
+
+type Props = GisEditSessionSnapshot & {
+  onRemoveFocusedChange: () => void;
+  onRemoveLastChange: () => void;
+  onClearChanges: () => void;
+  onFocusChange: (changeId: string) => void;
+  onOpenPopup?: () => void;
+  variant?: "inline" | "popup";
+  className?: string;
+};
+
+const TOOL_LABELS: Record<GisEditTool, string> = {
+  ADD: "추가",
+  MOVE: "이동",
+  VERTEX_EDIT: "꼭지점편집",
+  DELETE: "삭제",
+};
+
+const buildChangeItemClassName = (isFocused: boolean) =>
+  `block w-full rounded border px-2 py-2 text-left text-[12px] 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"
+  }`;
+
+const getChangeLabel = (change: GisEditSessionSnapshot["changes"][number]) =>
+  change.attributeOnly ? "상세정보수정" : TOOL_LABELS[change.editType];
+
+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 "점을 옮기거나 선분을 끌어 추가하세요.";
+  return "삭제할 객체가 맞는지 확인하세요.";
+};
+
+type ChangeListProps = {
+  changes: GisEditSessionSnapshot["changes"];
+  focusedChangeId: string | null;
+  onFocusChange: (changeId: string) => void;
+};
+
+const ChangeList = ({ changes, focusedChangeId, onFocusChange }: ChangeListProps) => (
+  <>
+    {changes.map((change, index) => (
+      <button
+        key={change.changeId}
+        type="button"
+        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]">
+            {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>
+            ) : 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>
+            ) : null}
+          </div>
+        </div>
+        <div className="mt-1 truncate text-[11px] text-[#526173]">{getChangeSummary(change)}</div>
+      </button>
+    ))}
+  </>
+);
+
+export default function GisEditSessionPanel({
+  isEditMode,
+  selectedLayerName,
+  activeTool,
+  changes,
+  canUndo,
+  focusedChangeId,
+  onRemoveFocusedChange,
+  onRemoveLastChange,
+  onClearChanges,
+  onFocusChange,
+  onOpenPopup,
+  variant = "inline",
+  className = "",
+}: Props) {
+  const isCompactInline = variant === "inline" && changes.length === 0;
+
+  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()}
+    >
+      <div className={`flex shrink-0 justify-between gap-3 ${isCompactInline ? "mb-0 items-center" : "mb-3 items-start"}`}>
+        <div className="min-w-0">
+          {variant === "inline" ? (
+            <div className="mb-1 text-[14px] font-bold text-[#173f67]">편집 세션</div>
+          ) : null}
+          <div className="truncate text-[12px] text-[#667485]">
+            레이어: {selectedLayerName || "미선택"} / 모드: {isEditMode ? (activeTool ? TOOL_LABELS[activeTool] : "대기") : "편집 모드 종료"}
+          </div>
+        </div>
+        {onOpenPopup ? (
+          <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]"
+            onClick={onOpenPopup}
+            title="편집 세션을 기존 윈도우 팝업으로 열기"
+          >
+            <span aria-hidden="true" className="text-[12px] leading-none">↗</span>
+            <span>팝업</span>
+          </button>
+        ) : null}
+      </div>
+
+      <div className={`${isCompactInline ? "hidden" : "mb-3 flex"} shrink-0 flex-wrap items-center gap-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]"
+          disabled={!focusedChangeId}
+          onClick={onRemoveFocusedChange}
+        >
+          취소
+        </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]"
+          disabled={!canUndo}
+          onClick={onRemoveLastChange}
+        >
+          뒤로가기
+        </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]"
+          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]">
+          총 {changes.length}건
+        </div>
+      </div>
+
+      <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>
+        ) : (
+          <div className="h-full overflow-y-auto pr-1">
+            <div className="space-y-2">
+              <ChangeList
+                changes={changes}
+                focusedChangeId={focusedChangeId}
+                onFocusChange={onFocusChange}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </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
new file mode 100644
index 000000000..593e8eb02
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/GisEditToolbar.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import {
+  Check,
+  Move,
+  PenTool,
+  Plus,
+  Trash2,
+  X,
+} from "lucide-react";
+import { Button } from "@common/components/ui";
+
+import type { GisEditTool } from "./gisEditTypes";
+
+type Props = {
+  isEditMode: boolean;
+  activeTool: GisEditTool | null;
+  isSnapEnabled: boolean;
+  canUseTools: boolean;
+  canSave: boolean;
+  isSaving?: boolean;
+  statusMessage: string;
+  allowedTools?: GisEditTool[];
+  onClose?: () => void;
+  onToggleSnap: () => void;
+  onSelectTool: (tool: GisEditTool) => void;
+  onSave: () => void;
+};
+
+const TOOL_BUTTONS: Array<{
+  tool: GisEditTool;
+  label: string;
+  icon: typeof Plus;
+}> = [
+  { tool: "ADD", label: "추가", icon: Plus },
+  { tool: "MOVE", label: "이동", icon: Move },
+  { tool: "VERTEX_EDIT", label: "꼭지점편집", icon: PenTool },
+  { tool: "DELETE", label: "삭제", icon: Trash2 },
+];
+
+export default function GisEditToolbar({
+  isEditMode,
+  activeTool,
+  isSnapEnabled,
+  canUseTools,
+  canSave,
+  isSaving = false,
+  statusMessage: _statusMessage,
+  allowedTools = [],
+  onClose,
+  onToggleSnap,
+  onSelectTool,
+  onSave,
+}: Props) {
+  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>
+          <div className="flex min-w-0 flex-1 justify-center">
+            <div className="flex items-center gap-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">
+                      <Button
+                        type="button"
+                        color={activeTool === "VERTEX_EDIT" ? "primary" : "white"}
+                        size="sm"
+                        className="mx-0.5 mt-1 min-w-[98px] px-2"
+                        disabled={!isToolEnabled}
+                        onClick={() => onSelectTool("VERTEX_EDIT")}
+                      >
+                        <span className="flex items-center justify-center gap-2 whitespace-nowrap">
+                          <Icon className="h-4 w-4" />
+                          <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>
+                  );
+                }
+                return (
+                  <Button
+                    key={tool}
+                    type="button"
+                    color={isActive ? "primary" : "white"}
+                    size="sm"
+                    className="mx-0.5 mt-1 min-w-[74px] shrink-0 px-2"
+                    disabled={!isToolEnabled}
+                    onClick={() => onSelectTool(tool)}
+                  >
+                    <span className="flex items-center justify-center gap-2 whitespace-nowrap">
+                      <Icon className="h-4 w-4" />
+                      <span>{label}</span>
+                    </span>
+                  </Button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="flex w-[132px] shrink-0 items-center justify-end gap-1">
+            <Button
+              type="button"
+              color="primary"
+              size="sm"
+              className="mt-1 min-w-[58px] shrink-0 px-2"
+              disabled={!canSave || isSaving}
+              onClick={onSave}
+            >
+              {isSaving ? "저장 중" : "저장"}
+            </Button>
+
+            <Button
+              type="button"
+              color="white"
+              size="sm"
+              className="mt-1 min-w-[58px] shrink-0 px-2"
+              onClick={onClose}
+              title="하수관로 편집 닫기"
+            >
+              <span className="flex items-center justify-center gap-2 whitespace-nowrap">
+                <X className="h-4 w-4" />
+                <span>닫기</span>
+              </span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/gisEdit/gisEditTypes.ts b/apps/sn/app/(map-layout)/map/components/gisEdit/gisEditTypes.ts
new file mode 100644
index 000000000..930e48c07
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/gisEditTypes.ts
@@ -0,0 +1,111 @@
+export type GisEditTool = "ADD" | "MOVE" | "VERTEX_EDIT" | "DELETE";
+
+export type GisEditGeometryType = "Point" | "LineString" | "Polygon";
+
+export type GisEditPreviewColors = {
+  pointColor: string;
+  lineColor: string;
+  fillColor: string;
+};
+
+export type GisEditFeatureRef = {
+  fcltMngNo?: string;
+  mngInstCd?: string;
+  fid?: string;
+};
+
+export type GisEditPipeBasicInfo = {
+  [key: string]: string | null | undefined;
+  fcltMngNo?: string | null;
+  mngInstCd?: string | null;
+  instMngNo?: string | null;
+  instlYmd?: string | null;
+  mapshtNo?: string | null;
+  pdmtVl?: string | null;
+  prlgVl?: string | null;
+  usgCd?: string | null;
+  mqltCd?: string | null;
+  avgGrdn?: string | null;
+  drtwMltvArea?: string | null;
+  exclnMltvArea?: string | null;
+  tmptDpth?: string | null;
+  tmptMhlMngNo?: string | null;
+  scendDpth?: string | null;
+  scendMhlMngNo?: string | null;
+  trflnCnt?: string | null;
+  vrtcLen?: string | null;
+  wdthLen?: string | null;
+  instlMbdyCd?: string | null;
+  swtrmtZoneNm?: string | null;
+  mltvZoneNm?: string | null;
+  mltvDtdvNm?: string | null;
+  lineCd?: string | null;
+  floCd?: string | null;
+  layCd?: string | null;
+};
+
+export type GisEditLayerInfo = {
+  layerId: string;
+  layerName: string;
+  geometryType: GisEditGeometryType;
+  editableYn: "Y" | "N";
+  allowedTools: GisEditTool[];
+  previewColors: GisEditPreviewColors;
+  disabledReason?: string;
+};
+
+export type GisEditChange = {
+  changeId: string;
+  editType: GisEditTool;
+  layerId: string;
+  layerName: string;
+  objectId?: string;
+  fid?: string;
+  baseEditSn?: string;
+  featureRef?: GisEditFeatureRef;
+  objectLabel: string;
+  beforeGeometry?: Record<string, unknown> | null;
+  afterGeometry?: Record<string, unknown> | null;
+  featureProperties?: Record<string, unknown> | null;
+  basicInfo?: GisEditPipeBasicInfo | null;
+  basicInfoSavedAt?: string | null;
+  attributeOnly?: boolean;
+  summary: string;
+  createdAt: string;
+  source: "MAP_SELECTION" | "MAP_CENTER" | "MAP_DRAW";
+};
+
+export type GisEditSavePayload = {
+  screenId: string;
+  layerId: string;
+  layerName: string;
+  saveTargetType: "VERSION" | "FINAL";
+  view: {
+    srs: string;
+    bbox: string | null;
+  };
+  changes: Array<{
+    changeId: string;
+    editType: GisEditTool;
+    objectId?: string;
+    clientTempId?: string;
+    fid?: string;
+    baseEditSn?: string;
+    featureRef?: GisEditFeatureRef;
+    attributes?: GisEditPipeBasicInfo | null;
+    beforeGeometry?: Record<string, unknown> | null;
+    afterGeometry?: Record<string, unknown> | null;
+    geometry?: Record<string, unknown> | null;
+  }>;
+};
+
+export type GisEditSessionSnapshot = {
+  isEditMode: boolean;
+  selectedLayerName: string;
+  activeTool: GisEditTool | null;
+  isSnapEnabled: boolean;
+  changes: GisEditChange[];
+  lastSavedPayload: GisEditSavePayload | null;
+  canUndo: boolean;
+  focusedChangeId: string | null;
+};
diff --git a/apps/sn/app/(map-layout)/map/components/gisEdit/useGisEdit.ts b/apps/sn/app/(map-layout)/map/components/gisEdit/useGisEdit.ts
new file mode 100644
index 000000000..a27bcc6b5
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/gisEdit/useGisEdit.ts
@@ -0,0 +1,1237 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useState } from "react";
+import GeoJSON from "ol/format/GeoJSON.js";
+
+import type {
+  GisEditChange,
+  GisEditFeatureRef,
+  GisEditGeometryType,
+  GisEditLayerInfo,
+  GisEditPipeBasicInfo,
+  GisEditPreviewColors,
+  GisEditSavePayload,
+  GisEditTool,
+} from "./gisEditTypes";
+
+type GisEditInteractionRequest = {
+  changeId: string;
+  editType: "MOVE" | "VERTEX_EDIT";
+};
+
+const isActionableChange = (change: GisEditChange) =>
+  !change.attributeOnly || Boolean(change.basicInfoSavedAt);
+
+const isGeometryChange = (change: GisEditChange) =>
+  !change.attributeOnly && change.editType !== "ADD";
+
+const buildPreviewFocusMessage = (
+  change: Pick<GisEditChange, "editType" | "layerName" | "objectLabel">,
+) => {
+  if (change.editType === "MOVE") {
+    return `${change.layerName} ${change.objectLabel} 미리보기 객체를 드래그해 위치를 조정하세요.`;
+  }
+  if (change.editType === "VERTEX_EDIT") {
+    return `${change.layerName} ${change.objectLabel}의 주황색 실꼭지점을 드래그하거나, 선분 위 흰색 midpoint를 끌어 새 꼭지점을 추가하세요.`;
+  }
+  if (change.editType === "DELETE") {
+    return `${change.layerName} ${change.objectLabel} 삭제 미리보기를 유지 중입니다.`;
+  }
+  return `${change.layerName} ${change.objectLabel} 신규 객체 미리보기를 확인하세요.`;
+};
+
+const EDITABLE_LAYER_RULES: Record<
+  string,
+  Omit<GisEditLayerInfo, "layerId" | "editableYn">
+> = {
+  tb_ms_swage_ppl: {
+    layerName: "하수관로",
+    geometryType: "LineString",
+    allowedTools: ["ADD", "MOVE", "VERTEX_EDIT", "DELETE"],
+    previewColors: {
+      pointColor: "rgba(22, 163, 74, 0.92)",
+      lineColor: "rgba(22, 163, 74, 0.95)",
+      fillColor: "rgba(22, 163, 74, 0.18)",
+    },
+  },
+  tb_ms_swage_mhl: {
+    layerName: "하수맨홀",
+    geometryType: "Point",
+    allowedTools: ["ADD", "MOVE", "DELETE"],
+    previewColors: {
+      pointColor: "rgba(5, 150, 105, 0.92)",
+      lineColor: "rgba(5, 150, 105, 0.95)",
+      fillColor: "rgba(5, 150, 105, 0.18)",
+    },
+  },
+  tb_ms_swage_pmstn: {
+    layerName: "하수펌프장",
+    geometryType: "Point",
+    allowedTools: ["ADD", "MOVE", "DELETE"],
+    previewColors: {
+      pointColor: "rgba(59, 130, 246, 0.92)",
+      lineColor: "rgba(59, 130, 246, 0.95)",
+      fillColor: "rgba(59, 130, 246, 0.18)",
+    },
+  },
+  tb_il_swage_prcs_fclt: {
+    layerName: "하수처리시설",
+    geometryType: "Point",
+    allowedTools: ["ADD", "MOVE", "DELETE"],
+    previewColors: {
+      pointColor: "rgba(168, 85, 247, 0.92)",
+      lineColor: "rgba(168, 85, 247, 0.95)",
+      fillColor: "rgba(168, 85, 247, 0.18)",
+    },
+  },
+  tb_ms_swage_prcs_zone: {
+    layerName: "하수처리구역",
+    geometryType: "Polygon",
+    allowedTools: ["ADD", "MOVE", "VERTEX_EDIT", "DELETE"],
+    previewColors: {
+      pointColor: "rgba(249, 115, 22, 0.92)",
+      lineColor: "rgba(249, 115, 22, 0.95)",
+      fillColor: "rgba(249, 115, 22, 0.22)",
+    },
+  },
+  tb_ms_stofcbr: {
+    layerName: "우수토실",
+    geometryType: "Point",
+    allowedTools: ["ADD", "MOVE", "DELETE"],
+    previewColors: {
+      pointColor: "rgba(234, 88, 12, 0.92)",
+      lineColor: "rgba(234, 88, 12, 0.95)",
+      fillColor: "rgba(234, 88, 12, 0.18)",
+    },
+  },
+  om_dt_untrt_swg_rain: {
+    layerName: "중점우수토실",
+    geometryType: "Point",
+    allowedTools: ["ADD", "MOVE", "DELETE"],
+    previewColors: {
+      pointColor: "rgba(220, 38, 38, 0.92)",
+      lineColor: "rgba(220, 38, 38, 0.95)",
+      fillColor: "rgba(220, 38, 38, 0.18)",
+    },
+  },
+};
+
+const FLOW_DIRECTION_SRS = "EPSG:5179";
+const SCREEN_ID = "SN_MN010301";
+const GIS_EDIT_ALLOWED_LAYER_IDS = new Set(["tb_ms_swage_ppl"]);
+const GIS_EDIT_PIPE_ATTRIBUTE_FIELD_IDS = [
+  "mngInstCd",
+  "fcltMngNo",
+  "instMngNo",
+  "instlYmd",
+  "mapshtNo",
+  "pdmtVl",
+  "prlgVl",
+  "usgCd",
+  "mqltCd",
+  "avgGrdn",
+  "drtwMltvArea",
+  "exclnMltvArea",
+  "tmptDpth",
+  "tmptMhlMngNo",
+  "scendDpth",
+  "scendMhlMngNo",
+  "trflnCnt",
+  "vrtcLen",
+  "wdthLen",
+  "instlMbdyCd",
+  "swtrmtZoneNm",
+  "mltvZoneNm",
+  "mltvDtdvNm",
+  "lineCd",
+  "floCd",
+  "layCd",
+] as const;
+
+const buildPipeSaveAttributes = (basicInfo: GisEditPipeBasicInfo | null | undefined) => {
+  if (!basicInfo) return undefined;
+
+  return GIS_EDIT_PIPE_ATTRIBUTE_FIELD_IDS.reduce<GisEditPipeBasicInfo>((acc, fieldId) => {
+    if (!Object.prototype.hasOwnProperty.call(basicInfo, fieldId)) return acc;
+
+    const value = basicInfo[fieldId];
+    const normalizedValue = fieldId === "instlYmd" ? String(value ?? "").replaceAll("-", "") : value;
+    acc[fieldId] =
+      typeof normalizedValue === "string" && normalizedValue.trim() === ""
+        ? null
+        : normalizedValue;
+    return acc;
+  }, {});
+};
+
+export const EMPTY_GIS_EDIT_PIPE_BASIC_INFO: GisEditPipeBasicInfo = {
+  mngInstCd: "",
+  fcltMngNo: "",
+  instMngNo: "",
+  instlYmd: "",
+  usgCd: "",
+  instlMbdyCd: "",
+  swtrmtZoneNm: "",
+  mltvZoneNm: "",
+  mltvDtdvNm: "",
+  lineCd: "",
+  floCd: "",
+  layCd: "",
+};
+
+const normalizeLayerIdCandidate = (value: unknown) => {
+  const raw = String(value ?? "").trim();
+  if (!raw) return "";
+
+  const withoutNamespace = raw.includes(":") ? raw.split(":").pop() ?? raw : raw;
+  return withoutNamespace.split(".")[0] ?? withoutNamespace;
+};
+
+// 현재 레이어 트리 구조 안에서 실제 편집 대상으로 풀 수 있는 레이어만 추출한다.
+const getLayerTypeName = (layerInfo: any) =>
+  String(layerInfo?.lyrTyNm ?? layerInfo?.lyrTypeNm ?? layerInfo?.lyr_type_nm ?? "").trim();
+
+const getLayerName = (layerInfo: any) =>
+  String(layerInfo?.lyrNm ?? layerInfo?.name ?? "").trim();
+
+const normalizeGeometryType = (value: unknown): GisEditGeometryType => {
+  const normalized = String(value ?? "").toLowerCase();
+  if (normalized.includes("polygon")) return "Polygon";
+  if (normalized.includes("line")) return "LineString";
+  return "Point";
+};
+
+const getColorString = (value: unknown) => {
+  const resolved = String(value ?? "").trim();
+  return resolved || null;
+};
+
+const withAlpha = (color: string | null | undefined, alpha: number) => {
+  const resolvedColor = String(color ?? "").trim();
+  if (!resolvedColor) return null;
+
+  const rgbaMatch = resolvedColor.match(/^rgba?\(([^)]+)\)$/i);
+  if (rgbaMatch) {
+    const [red = "40", green = "90", blue = "180"] = (rgbaMatch[1] ?? "")
+      .split(",")
+      .map((part) => part.trim());
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  }
+
+  const hexMatch = resolvedColor.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hexMatch) {
+    const hex = hexMatch[1] ?? "";
+    const normalized = hex.length === 3
+      ? hex.split("").map((char) => char + char).join("")
+      : hex;
+    const red = parseInt(normalized.slice(0, 2), 16);
+    const green = parseInt(normalized.slice(2, 4), 16);
+    const blue = parseInt(normalized.slice(4, 6), 16);
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  }
+
+  return resolvedColor;
+};
+
+const resolvePreviewColors = (
+  layerInfo: any,
+  fallback: GisEditPreviewColors,
+): GisEditPreviewColors => {
+  const lineColor =
+    withAlpha(
+      getColorString(
+        layerInfo?.lineColr ??
+        layerInfo?.line_colr ??
+        layerInfo?.lineColor ??
+        layerInfo?.fontInsdColr ??
+        layerInfo?.font_insd_colr,
+      ),
+      0.95,
+    ) ?? fallback.lineColor;
+  const pointColor =
+    withAlpha(
+      getColorString(
+        layerInfo?.lineColr ??
+        layerInfo?.line_colr ??
+        layerInfo?.fontInsdColr ??
+        layerInfo?.font_insd_colr ??
+        layerInfo?.fontExtnlColr ??
+        layerInfo?.font_extnl_colr,
+      ),
+      0.92,
+    ) ?? fallback.pointColor;
+  const fillColor =
+    withAlpha(
+      getColorString(
+        layerInfo?.spacColr ??
+        layerInfo?.spac_colr ??
+        layerInfo?.spaceColor ??
+        layerInfo?.lineColr ??
+        layerInfo?.line_colr,
+      ),
+      0.22,
+    ) ?? fallback.fillColor;
+
+  return {
+    pointColor,
+    lineColor,
+    fillColor,
+  };
+};
+
+// 현행 운영 기준상 GIS 편집은 하수관로만 다루므로 treeData에서도 해당 레이어만 추린다.
+const collectEditableLayers = (treeData: any[]): GisEditLayerInfo[] => {
+  const results = new Map<string, GisEditLayerInfo>();
+
+  const visit = (items: any[]) => {
+    items.forEach((item) => {
+      const data = item?.data ?? item;
+      const layerTypeName = getLayerTypeName(data);
+      const layerRule = EDITABLE_LAYER_RULES[layerTypeName];
+
+      if (
+        layerRule &&
+        GIS_EDIT_ALLOWED_LAYER_IDS.has(layerTypeName) &&
+        !results.has(layerTypeName)
+      ) {
+        results.set(layerTypeName, {
+          layerId: layerTypeName,
+          layerName: layerRule.layerName,
+          geometryType: layerRule.geometryType,
+          editableYn: "Y",
+          allowedTools: layerRule.allowedTools,
+          previewColors: resolvePreviewColors(data, layerRule.previewColors),
+        });
+      }
+
+      if (Array.isArray(item?.children)) {
+        visit(item.children);
+      }
+      if (Array.isArray(data?.children)) {
+        visit(data.children);
+      }
+    });
+  };
+
+  visit(Array.isArray(treeData) ? treeData : []);
+
+  if (results.size === 0) {
+    Object.entries(EDITABLE_LAYER_RULES).forEach(([layerId, layerRule]) => {
+      if (!GIS_EDIT_ALLOWED_LAYER_IDS.has(layerId)) return;
+      results.set(layerId, {
+        layerId,
+        layerName: layerRule.layerName,
+        geometryType: layerRule.geometryType,
+        editableYn: "Y",
+        allowedTools: layerRule.allowedTools,
+        previewColors: layerRule.previewColors,
+      });
+    });
+  }
+
+  return Array.from(results.values());
+};
+
+// 지도에서 선택한 OpenLayers Feature의 현재 geometry를 저장 payload 형태로 스냅샷한다.
+const toGeometryObject = (featureData: any) => {
+  if (!featureData || typeof featureData.getGeometry !== "function") return null;
+
+  try {
+    return new GeoJSON().writeGeometryObject(featureData.getGeometry(), {
+      featureProjection: FLOW_DIRECTION_SRS,
+      dataProjection: FLOW_DIRECTION_SRS,
+    }) as Record<string, unknown>;
+  } catch (error) {
+    console.error("GIS 편집 geometry 변환 실패:", error);
+    return null;
+  }
+};
+
+// 저장 시점의 지도 범위를 함께 남겨 BE가 편집 세션 컨텍스트를 해석할 수 있게 한다.
+const buildBbox = (map: any) => {
+  try {
+    const size = map?.getSize?.();
+    const view = map?.getView?.();
+    if (!size || !view?.calculateExtent) return null;
+    return view.calculateExtent(size).map((value: number) => value.toFixed(3)).join(",");
+  } catch (error) {
+    console.error("GIS 편집 BBOX 계산 실패:", error);
+    return null;
+  }
+};
+
+const getFeatureLayerId = (featureData: any) => {
+  if (typeof featureData?.get === "function") {
+    const previewLayerId = normalizeLayerIdCandidate(featureData.get("layerId"));
+    if (previewLayerId) return previewLayerId;
+  }
+  if (typeof featureData?.getId === "function") {
+    return normalizeLayerIdCandidate(featureData.getId());
+  }
+  if (typeof featureData?.id_ === "string") {
+    return normalizeLayerIdCandidate(featureData.id_);
+  }
+  return normalizeLayerIdCandidate(featureData?.lyrTypeNm ?? featureData?.lyrTyNm ?? "");
+};
+
+const stripLayerPrefix = (value: unknown) => {
+  const raw = String(value ?? "").trim();
+  if (!raw) return "";
+
+  const withoutNamespace = raw.includes(":") ? raw.split(":").pop() ?? raw : raw;
+  if (withoutNamespace.startsWith("tb_ms_swage_ppl.")) {
+    return withoutNamespace.slice("tb_ms_swage_ppl.".length);
+  }
+  return withoutNamespace;
+};
+
+const getFeatureFid = (featureData: any) =>
+  stripLayerPrefix(
+    featureData?.get?.("fid") ??
+      featureData?.values_?.fid ??
+      featureData?.fid ??
+      featureData?.getId?.() ??
+      featureData?.id_ ??
+      "",
+  );
+
+const getFeatureObjectId = (featureData: any) =>
+  String(
+    getFeatureFid(featureData) ||
+      String(
+        featureData?.get?.("objectId") ??
+          featureData?.values_?.fclt_mng_no ??
+          featureData?.values_?.swtrmt_fclt_cd ??
+          featureData?.fcltMngNo ??
+          featureData?.fid ??
+          "",
+      ),
+  ).trim();
+
+const getFeatureObjectLabel = (featureData: any) => {
+  const values = featureData?.values_ ?? {};
+  return String(
+    featureData?.get?.("fclt_mng_no") ??
+      values?.fclt_mng_no ??
+      featureData?.fcltMngNo ??
+      featureData?.get?.("objectId") ??
+      values?.swtrmt_fclt_cd ??
+      getFeatureFid(featureData) ??
+      "",
+  ).trim();
+};
+
+const getFeatureRef = (featureData: any): GisEditFeatureRef | undefined => {
+  const mapValues = featureData?.values_ ?? {};
+  const featureRef: GisEditFeatureRef = {
+    fcltMngNo: String(
+      featureData?.get?.("fclt_mng_no") ??
+      mapValues?.fclt_mng_no ??
+      featureData?.fcltMngNo ??
+      "",
+    ).trim() || undefined,
+    mngInstCd: String(
+      featureData?.get?.("mng_inst_cd") ??
+      mapValues?.mng_inst_cd ??
+      featureData?.mngInstCd ??
+      "",
+    ).trim() || undefined,
+    fid: getFeatureFid(featureData) || undefined,
+  };
+
+  if (!featureRef.fcltMngNo && !featureRef.mngInstCd && !featureRef.fid) {
+    return undefined;
+  }
+
+  return featureRef;
+};
+
+// 선택한 원본 관로의 속성 snapshot을 보관해 preview 재선택 시 상세정보가 비지 않게 한다.
+const getFeatureProperties = (featureData: any): Record<string, unknown> | null => {
+  const values = featureData?.values_ ?? featureData?.getProperties?.() ?? featureData;
+  if (!values || typeof values !== "object") return null;
+
+  const { geometry, ...properties } = values;
+  return properties;
+};
+
+const normalizePipeGeometry = (
+  layerId: string,
+  geometry: Record<string, unknown> | null,
+): Record<string, unknown> | null => {
+  if (layerId !== "tb_ms_swage_ppl" || !geometry) return geometry;
+  if (geometry.type !== "LineString") return geometry;
+
+  const coordinates = geometry.coordinates;
+  if (!Array.isArray(coordinates)) return geometry;
+
+  return {
+    ...geometry,
+    type: "MultiLineString",
+    coordinates: [coordinates],
+  };
+};
+
+const createChangeId = (prefix: string, sequence: number) => {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return `${prefix}-${crypto.randomUUID()}`;
+  }
+  return `${prefix}-${Date.now()}-${sequence}`;
+};
+
+export const useGisEdit = (treeData: any[]) => {
+  const editableLayers = useMemo(() => collectEditableLayers(treeData), [treeData]);
+  // GIS 편집 모드 on/off는 우측 분석 메뉴의 GIS 편집 버튼과 직접 연결된다.
+  const [isEditMode, setIsEditMode] = useState(false);
+  // 현재 선택 레이어를 기준으로 허용 도구와 저장 payload의 layerId를 결정한다.
+  const [selectedLayerId, setSelectedLayerId] = useState("tb_ms_swage_ppl");
+  // 1차 구현에서는 activeTool과 지도 선택 이벤트를 조합해 변경분을 로컬 세션에 누적한다.
+  const [activeTool, setActiveTool] = useState<GisEditTool | null>(null);
+  // QGIS 유사 스냅핑 on/off는 MOVE, VERTEX_EDIT 상호작용에서 함께 참조한다.
+  const [isSnapEnabled, setIsSnapEnabled] = useState(false);
+  // 저장 전까지의 변경분은 FE 로컬 편집 세션으로만 유지한다.
+  const [changes, setChanges] = useState<GisEditChange[]>([]);
+  const [statusMessage, setStatusMessage] = useState(
+    "GIS편집 버튼을 켜면 하수관로 편집 도구를 사용할 수 있습니다.",
+  );
+  // 이전 구현 호환용 상태다. 저장 버튼은 payload 미리보기를 노출하지 않고 즉시 API 호출 흐름으로 넘어간다.
+  const [lastSavedPayload, setLastSavedPayload] = useState<GisEditSavePayload | null>(null);
+  const [pendingInteraction, setPendingInteraction] = useState<GisEditInteractionRequest | null>(null);
+  const [focusedChangeId, setFocusedChangeId] = useState<string | null>(null);
+  const changeSequenceRef = useRef(0);
+  const latestSelectionRef = useRef<{ signature: string; timestamp: number } | null>(null);
+
+  const selectedLayer = useMemo(
+    () => editableLayers.find((layer) => layer.layerId === selectedLayerId) ?? null,
+    [editableLayers, selectedLayerId],
+  );
+
+  const canUseTools = Boolean(selectedLayer);
+  const actionableChanges = useMemo(
+    () => changes.filter(isActionableChange),
+    [changes],
+  );
+  const canSave = actionableChanges.length > 0 && Boolean(selectedLayer);
+
+  const appendChange = useCallback((change: GisEditChange) => {
+    setLastSavedPayload(null);
+    setFocusedChangeId(change.changeId);
+    setChanges((previous) => [change, ...previous]);
+  }, []);
+
+  const focusChange = useCallback((changeId: string) => {
+    const targetChange = changes.find((change) => change.changeId === changeId);
+    if (!targetChange) return;
+
+    setFocusedChangeId(changeId);
+    setPendingInteraction(null);
+    setStatusMessage(buildPreviewFocusMessage(targetChange));
+  }, [changes]);
+
+  const findExistingObjectChange = useCallback((
+    editType: GisEditTool,
+    layerId: string,
+    objectId: string,
+  ) =>
+    changes.find(
+      (change) =>
+        !change.attributeOnly &&
+        change.editType === editType &&
+        change.layerId === layerId &&
+        String(change.objectId ?? "") === objectId,
+    ) ?? null,
+  [changes]);
+
+  // 같은 원본 관로에 대한 삭제/이동/꼭지점편집 변경분은 하나만 유지해 도구 전환 시 세션 상태가 섞이지 않게 한다.
+  const findExistingGeometryChange = useCallback((
+    layerId: string,
+    objectId: string,
+  ) =>
+    changes.find(
+      (change) =>
+        isGeometryChange(change) &&
+        change.layerId === layerId &&
+        String(change.objectId ?? "") === objectId,
+    ) ?? null,
+  [changes]);
+
+  // 편집 모드를 끄더라도 작업 중 세션을 잃지 않도록 변경분은 유지하고 도구 상태만 정리한다.
+  const toggleEditMode = useCallback(() => {
+    setIsEditMode((previous) => {
+      const next = !previous;
+      setActiveTool(null);
+      setPendingInteraction(null);
+      setFocusedChangeId(null);
+      setIsSnapEnabled(false);
+      latestSelectionRef.current = null;
+      setStatusMessage(
+        next
+          ? "하수관로 편집 도구를 선택한 뒤 지도에서 편집 작업을 진행하세요."
+          : "GIS 편집 모드를 종료했습니다. 편집 세션은 유지됩니다.",
+      );
+      return next;
+    });
+  }, []);
+
+  const toggleSnapEnabled = useCallback(() => {
+    setIsSnapEnabled((previous) => {
+      const next = !previous;
+      setStatusMessage(
+        next
+          ? "스냅핑을 켰습니다. 이동과 꼭지점편집 중 기존 하수관로 꼭지점/선분에 맞춰집니다."
+          : "스냅핑을 껐습니다. 이동과 꼭지점편집이 자유 좌표 기준으로 동작합니다.",
+      );
+      return next;
+    });
+  }, []);
+
+  const selectLayer = useCallback((layerId: string) => {
+    setSelectedLayerId(layerId);
+    setActiveTool(null);
+    setPendingInteraction(null);
+    setFocusedChangeId(null);
+    latestSelectionRef.current = null;
+    setLastSavedPayload(null);
+    if (!layerId) {
+      setStatusMessage("편집 대상 레이어를 선택하세요.");
+      return;
+    }
+
+    const layer = editableLayers.find((item) => item.layerId === layerId);
+    if (!layer) {
+      setStatusMessage("선택한 레이어 정보를 찾을 수 없습니다.");
+      return;
+    }
+
+    setStatusMessage(
+      `${layer.layerName} 레이어를 편집 대상으로 설정했습니다. 추가 또는 기존 객체 선택 기반 편집을 진행하세요.`,
+    );
+  }, [editableLayers]);
+
+  // ADD는 즉시 로컬 초안을 만들고, 나머지 도구는 다음 지도 선택을 편집 세션 추가 이벤트로 해석한다.
+  const activateTool = useCallback((tool: GisEditTool, map: any) => {
+    if (!selectedLayer) {
+      setStatusMessage("레이어를 먼저 선택해야 편집 도구를 사용할 수 있습니다.");
+      return;
+    }
+
+    if (!selectedLayer.allowedTools.includes(tool)) {
+      setStatusMessage(`${selectedLayer.layerName} 레이어에서는 ${tool} 도구를 사용할 수 없습니다.`);
+      return;
+    }
+
+    setActiveTool(tool);
+    setPendingInteraction(null);
+    latestSelectionRef.current = null;
+
+    if (tool === "ADD") {
+      const addGuideMessage =
+        selectedLayer.geometryType === "Point"
+          ? `${selectedLayer.layerName} 신규 위치를 지도에서 클릭하세요.${isSnapEnabled ? " 스냅핑이 켜져 있으면 기존 관로 꼭지점/선분에 맞춰집니다." : ""}`
+          : selectedLayer.geometryType === "LineString"
+            ? `${selectedLayer.layerName} 선형을 지도에서 연속 클릭으로 입력한 뒤 더블클릭으로 마무리하세요.${isSnapEnabled ? " 스냅핑이 켜져 있으면 기존 관로 꼭지점/선분에 맞춰집니다." : ""}`
+            : `${selectedLayer.layerName} 영역을 지도에서 연속 클릭으로 입력한 뒤 더블클릭으로 마무리하세요.${isSnapEnabled ? " 스냅핑이 켜져 있으면 기존 관로 꼭지점/선분에 맞춰집니다." : ""}`;
+      setStatusMessage(addGuideMessage);
+      return;
+    }
+
+    const toolLabel = tool === "MOVE"
+      ? "이동"
+      : tool === "VERTEX_EDIT"
+        ? "꼭지점편집"
+        : "삭제";
+    const vertexGuideMessage =
+      tool === "VERTEX_EDIT"
+        ? `지도에서 ${selectedLayer.layerName} 대상 객체를 클릭하면 실꼭지점은 주황색, 새 점 삽입용 midpoint는 흰색으로 표시됩니다.${isSnapEnabled ? " 스냅핑이 켜져 있으면 기존 관로 선분과 꼭지점에 맞춰집니다." : ""}`
+        : null;
+    setStatusMessage(
+      vertexGuideMessage ??
+      `지도에서 ${selectedLayer.layerName} 대상 객체를 클릭하면 ${toolLabel} 변경분을 편집 세션에 추가합니다.${tool === "MOVE" && isSnapEnabled ? " 스냅핑이 켜져 있으면 이동 중 기존 관로 꼭지점/선분에 맞춰집니다." : ""}`,
+    );
+  }, [appendChange, isSnapEnabled, selectedLayer]);
+
+  const deactivateTool = useCallback(() => {
+    setActiveTool(null);
+    setPendingInteraction(null);
+    latestSelectionRef.current = null;
+    setStatusMessage("편집 도구 선택을 해제했습니다. 추가, 이동, 꼭지점편집, 삭제 모드가 모두 꺼졌습니다.");
+  }, []);
+
+  const registerAddGeometry = useCallback((geometry: Record<string, unknown> | null) => {
+    if (!selectedLayer || !geometry) {
+      setStatusMessage("추가 geometry를 확인하지 못했습니다.");
+      return null;
+    }
+
+    changeSequenceRef.current += 1;
+    const clientTempId = `NEW-${changeSequenceRef.current}`;
+    const changeId = createChangeId(`ADD-${selectedLayer.layerId}`, changeSequenceRef.current);
+    const nextGeometry = normalizePipeGeometry(selectedLayer.layerId, geometry);
+
+    appendChange({
+      changeId,
+      editType: "ADD",
+      layerId: selectedLayer.layerId,
+      layerName: selectedLayer.layerName,
+      objectId: clientTempId,
+      featureRef: undefined,
+      objectLabel: clientTempId,
+      beforeGeometry: null,
+      afterGeometry: nextGeometry,
+      basicInfo:
+        selectedLayer.layerId === "tb_ms_swage_ppl"
+          ? {
+              ...EMPTY_GIS_EDIT_PIPE_BASIC_INFO,
+            }
+          : null,
+      basicInfoSavedAt: null,
+      summary: `${selectedLayer.layerName} 신규 객체를 지도에서 직접 입력했습니다.`,
+      createdAt: new Date().toISOString(),
+      source: "MAP_DRAW",
+    });
+    setStatusMessage(
+      `${selectedLayer.layerName} 신규 객체를 추가했습니다. 계속 추가하려면 지도에서 다음 형상을 입력하세요.`,
+    );
+    return changeId;
+  }, [appendChange, selectedLayer]);
+
+  // 편집 모드 중 지도에서 선택한 객체를 현재 activeTool 기준 변경분으로 변환한다.
+  const registerFeatureSelection = useCallback((featureData: any) => {
+    if (!isEditMode) return { handled: false };
+
+    const previewChangeId = String(featureData?.get?.("changeId") ?? "").trim();
+    if (previewChangeId) {
+      const previewChange = changes.find((change) => change.changeId === previewChangeId);
+      if (!previewChange) return { handled: true };
+
+      if (previewChange.editType === "ADD" && activeTool === "DELETE") {
+        setLastSavedPayload(null);
+        setChanges((previous) => previous.filter((change) => change.changeId !== previewChangeId));
+        setFocusedChangeId((current) => (current === previewChangeId ? null : current));
+        setPendingInteraction((current) => (current?.changeId === previewChangeId ? null : current));
+        latestSelectionRef.current = null;
+        setStatusMessage(`${previewChange.layerName} 신규 객체를 편집 세션에서 삭제했습니다.`);
+        return {
+          handled: true,
+          isPreviewSelection: true,
+          editType: "DELETE",
+        };
+      }
+
+      if (
+        previewChange.editType !== "ADD" &&
+        previewChange.editType !== "DELETE" &&
+        activeTool === "DELETE"
+      ) {
+        setLastSavedPayload(null);
+        setChanges((previous) =>
+          previous.map((change) =>
+            change.changeId === previewChangeId
+              ? {
+                  ...change,
+                  editType: "DELETE",
+                  afterGeometry: null,
+                  summary: `${change.layerName} ${change.objectLabel} 객체를 임시 삭제 대상으로 표시했습니다.`,
+                }
+              : change,
+          ),
+        );
+        setFocusedChangeId(previewChangeId);
+        setPendingInteraction(null);
+        latestSelectionRef.current = null;
+        setStatusMessage(`${previewChange.layerName} ${previewChange.objectLabel} 객체를 임시 삭제 대상으로 표시했습니다.`);
+        return {
+          handled: true,
+          isPreviewSelection: true,
+          changeId: previewChangeId,
+          editType: "DELETE",
+          fid: previewChange.fid ?? previewChange.featureRef?.fid ?? previewChange.objectId,
+        };
+      }
+
+      if (
+        previewChange.editType === "DELETE" &&
+        (activeTool === "MOVE" || activeTool === "VERTEX_EDIT")
+      ) {
+        setFocusedChangeId(previewChangeId);
+        setPendingInteraction(null);
+        setStatusMessage("이미 삭제 예정인 관로입니다. 이동 또는 꼭지점편집이 필요하면 마지막 변경 취소 후 다시 선택하세요.");
+        return {
+          handled: true,
+          isPreviewSelection: true,
+          changeId: previewChangeId,
+          editType: activeTool,
+          fid: previewChange.fid ?? previewChange.featureRef?.fid ?? previewChange.objectId,
+        };
+      }
+
+      if (
+        previewChange.editType !== "DELETE" &&
+        (activeTool === "MOVE" || activeTool === "VERTEX_EDIT")
+      ) {
+        setFocusedChangeId(previewChangeId);
+        setPendingInteraction({ changeId: previewChangeId, editType: activeTool });
+        const targetLabel = previewChange.editType === "ADD" ? "신규 객체" : previewChange.objectLabel;
+        setStatusMessage(
+          activeTool === "MOVE"
+            ? `${previewChange.layerName} ${targetLabel}를 드래그해 위치를 조정하세요.`
+            : `${previewChange.layerName} ${targetLabel}의 꼭지점을 드래그해 형상을 조정하세요.`,
+        );
+        return {
+          handled: true,
+          isPreviewSelection: true,
+          changeId: previewChangeId,
+          editType: activeTool,
+        };
+      }
+
+      focusChange(previewChangeId);
+      return {
+        handled: true,
+        isPreviewSelection: true,
+        changeId: previewChangeId,
+        editType: previewChange.editType,
+      };
+    }
+
+    if (!activeTool || !selectedLayer) return { handled: false };
+    if (activeTool === "ADD") return { handled: true, isPreviewSelection: false };
+
+    const featureLayerId = getFeatureLayerId(featureData);
+    if (featureLayerId !== selectedLayer.layerId) {
+      setStatusMessage(
+        selectedLayer.layerId === "tb_ms_swage_ppl"
+          ? "하수관로를 선택해주세요."
+          : `현재 선택 레이어는 ${selectedLayer.layerName}입니다. 같은 레이어의 객체를 선택하세요.`,
+      );
+      return { handled: true };
+    }
+
+    const objectId = getFeatureObjectId(featureData);
+    if (!objectId) {
+      setStatusMessage("선택 객체의 관리번호를 찾을 수 없어 편집 세션에 추가하지 못했습니다.");
+      return { handled: true };
+    }
+
+    const existingGeometryChange = findExistingGeometryChange(selectedLayer.layerId, objectId);
+    if (existingGeometryChange?.editType === "DELETE" && (activeTool === "MOVE" || activeTool === "VERTEX_EDIT")) {
+      focusChange(existingGeometryChange.changeId);
+      setPendingInteraction(null);
+      setStatusMessage("이미 삭제 예정인 관로입니다. 이동 또는 꼭지점편집이 필요하면 마지막 변경 취소 후 다시 선택하세요.");
+      return {
+        handled: true,
+        isPreviewSelection: false,
+        changeId: existingGeometryChange.changeId,
+        editType: "DELETE",
+        fid: existingGeometryChange.fid ?? existingGeometryChange.featureRef?.fid ?? objectId,
+      };
+    }
+
+    if (existingGeometryChange && existingGeometryChange.editType !== "DELETE" && activeTool === "DELETE") {
+      setLastSavedPayload(null);
+      setChanges((previous) =>
+        previous.map((change) =>
+          change.changeId === existingGeometryChange.changeId
+            ? {
+                ...change,
+                editType: "DELETE",
+                afterGeometry: null,
+                summary: `${change.layerName} ${change.objectLabel} 객체를 임시 삭제 대상으로 표시했습니다.`,
+              }
+            : change,
+        ),
+      );
+      setFocusedChangeId(existingGeometryChange.changeId);
+      setPendingInteraction(null);
+      latestSelectionRef.current = null;
+      setStatusMessage(`${existingGeometryChange.layerName} ${existingGeometryChange.objectLabel} 객체를 임시 삭제 대상으로 표시했습니다.`);
+      return {
+        handled: true,
+        isPreviewSelection: false,
+        changeId: existingGeometryChange.changeId,
+        editType: "DELETE",
+        fid: existingGeometryChange.fid ?? existingGeometryChange.featureRef?.fid ?? objectId,
+      };
+    }
+
+    const selectionSignature = `${activeTool}:${selectedLayer.layerId}:${objectId}`;
+    const now = Date.now();
+    if (
+      latestSelectionRef.current?.signature === selectionSignature &&
+      now - latestSelectionRef.current.timestamp < 400
+    ) {
+      return { handled: true };
+    }
+    latestSelectionRef.current = { signature: selectionSignature, timestamp: now };
+
+    const existingChange = findExistingObjectChange(activeTool, selectedLayer.layerId, objectId);
+    if (existingChange) {
+      focusChange(existingChange.changeId);
+      if (activeTool === "MOVE" || activeTool === "VERTEX_EDIT") {
+        setPendingInteraction({ changeId: existingChange.changeId, editType: activeTool });
+      }
+      return {
+        handled: true,
+        isPreviewSelection: false,
+        changeId: existingChange.changeId,
+        editType: existingChange.editType,
+        fid: existingChange.fid ?? existingChange.featureRef?.fid ?? objectId,
+      };
+    }
+
+    const geometryObject = toGeometryObject(featureData);
+    const geometryType = normalizeGeometryType(geometryObject?.type);
+    const featureRef = getFeatureRef(featureData);
+    const objectLabel = getFeatureObjectLabel(featureData) || objectId;
+    const normalizedGeometryObject = normalizePipeGeometry(selectedLayer.layerId, geometryObject);
+    const nextGeometry =
+      activeTool === "MOVE"
+        ? normalizedGeometryObject
+        : activeTool === "VERTEX_EDIT"
+          ? normalizedGeometryObject
+          : activeTool === "DELETE"
+            ? null
+            : normalizedGeometryObject;
+    const summaryMap: Record<GisEditTool, string> = {
+      MOVE: `${selectedLayer.layerName} ${objectLabel} 객체를 선택했습니다. 지도에서 드래그해 위치를 조정하세요.`,
+      VERTEX_EDIT: `${selectedLayer.layerName} ${objectLabel} 객체를 선택했습니다. 주황색 실꼭지점을 드래그하거나 흰색 midpoint를 끌어 새 꼭지점을 추가하세요.`,
+      DELETE: `${selectedLayer.layerName} ${objectLabel} 객체를 임시 삭제 대상으로 표시했습니다.`,
+      ADD: `${selectedLayer.layerName} ${objectLabel} 객체를 추가했습니다.`,
+    };
+    changeSequenceRef.current += 1;
+    const changeId = createChangeId(`${activeTool}-${objectId}`, changeSequenceRef.current);
+
+    appendChange({
+      changeId,
+      editType: activeTool,
+      layerId: selectedLayer.layerId,
+      layerName: selectedLayer.layerName,
+      objectId,
+      fid: featureRef?.fid ?? objectId,
+      featureRef,
+      objectLabel,
+      beforeGeometry: normalizedGeometryObject,
+      afterGeometry: nextGeometry,
+      featureProperties: getFeatureProperties(featureData),
+      basicInfo: null,
+      basicInfoSavedAt: null,
+      summary:
+        activeTool === "VERTEX_EDIT" && geometryType === "Point"
+          ? `${selectedLayer.layerName} ${objectLabel}는 점형 객체여서 꼭지점편집 대신 geometry 검토 대상으로 기록했습니다.`
+          : summaryMap[activeTool],
+      createdAt: new Date().toISOString(),
+      source: "MAP_SELECTION",
+    });
+    setStatusMessage(summaryMap[activeTool]);
+    setFocusedChangeId(changeId);
+    if (activeTool === "MOVE" || activeTool === "VERTEX_EDIT") {
+      if (activeTool === "VERTEX_EDIT" && geometryType === "Point") {
+        setPendingInteraction(null);
+      } else {
+        setPendingInteraction({ changeId, editType: activeTool });
+      }
+    } else {
+      setPendingInteraction(null);
+    }
+    return { handled: true, isPreviewSelection: false, changeId, editType: activeTool, fid: featureRef?.fid ?? objectId };
+  }, [activeTool, appendChange, findExistingGeometryChange, findExistingObjectChange, focusChange, isEditMode, selectedLayer]);
+
+  const registerPipeDetailSelection = useCallback((featureData: any) => {
+    if (!isEditMode || !selectedLayer) return { handled: false };
+    if (selectedLayer.layerId !== "tb_ms_swage_ppl") return { handled: false };
+
+    const featureLayerId = getFeatureLayerId(featureData);
+    if (featureLayerId !== selectedLayer.layerId) {
+      setStatusMessage("하수관로를 선택해주세요.");
+      return { handled: true };
+    }
+
+    const objectId = getFeatureObjectId(featureData);
+    if (!objectId) {
+      setStatusMessage("선택 객체의 관리번호를 찾을 수 없어 상세정보 수정 화면을 열 수 없습니다.");
+      return { handled: true };
+    }
+
+    const existingChange =
+      changes.find(
+        (change) =>
+          change.layerId === selectedLayer.layerId &&
+          change.editType !== "DELETE" &&
+          String(change.objectId ?? "") === objectId,
+      ) ?? null;
+    if (existingChange) {
+      focusChange(existingChange.changeId);
+      setPendingInteraction(null);
+      setStatusMessage(`${selectedLayer.layerName} ${objectId} 상세정보를 수정할 수 있습니다.`);
+      return {
+        handled: true,
+        isPreviewSelection: false,
+        changeId: existingChange.changeId,
+        editType: existingChange.editType as GisEditTool,
+        fid: existingChange.fid ?? existingChange.featureRef?.fid ?? objectId,
+      };
+    }
+
+    const geometryObject = toGeometryObject(featureData);
+    const normalizedGeometryObject = normalizePipeGeometry(selectedLayer.layerId, geometryObject);
+    const featureRef = getFeatureRef(featureData);
+    const objectLabel = getFeatureObjectLabel(featureData) || objectId;
+    changeSequenceRef.current += 1;
+    const changeId = createChangeId(`DETAIL-${objectId}`, changeSequenceRef.current);
+
+    appendChange({
+      changeId,
+      editType: "VERTEX_EDIT" as const,
+      layerId: selectedLayer.layerId,
+      layerName: selectedLayer.layerName,
+      objectId,
+      fid: featureRef?.fid ?? objectId,
+      featureRef,
+      objectLabel,
+      beforeGeometry: normalizedGeometryObject,
+      afterGeometry: normalizedGeometryObject,
+      featureProperties: getFeatureProperties(featureData),
+      basicInfo: null,
+      basicInfoSavedAt: null,
+      attributeOnly: true,
+      summary: `${selectedLayer.layerName} ${objectLabel} 상세정보 수정 대상으로 선택했습니다.`,
+      createdAt: new Date().toISOString(),
+      source: "MAP_SELECTION",
+    });
+    setFocusedChangeId(changeId);
+    setPendingInteraction(null);
+    setStatusMessage(`${selectedLayer.layerName} ${objectLabel} 상세정보를 수정할 수 있습니다.`);
+    return {
+      handled: true,
+      isPreviewSelection: false,
+      changeId,
+      editType: "VERTEX_EDIT",
+      fid: featureRef?.fid ?? objectId,
+    };
+  }, [appendChange, changes, focusChange, isEditMode, selectedLayer]);
+
+  const save = useCallback((map: any) => {
+    if (!selectedLayer || actionableChanges.length === 0) {
+      setStatusMessage("저장할 편집 변경분이 없습니다.");
+      return null;
+    }
+
+    const payload: GisEditSavePayload = {
+      screenId: SCREEN_ID,
+      layerId: selectedLayer.layerId,
+      layerName: selectedLayer.layerName,
+      saveTargetType: "FINAL",
+      view: {
+        srs: FLOW_DIRECTION_SRS,
+        bbox: buildBbox(map),
+      },
+      changes: actionableChanges.map((change) => ({
+        changeId: change.changeId,
+        editType: change.editType,
+        objectId: change.editType === "ADD" ? undefined : change.objectId,
+        clientTempId: change.editType === "ADD" ? change.objectId : undefined,
+        fid: change.editType === "ADD" ? undefined : change.fid ?? change.featureRef?.fid ?? change.objectId,
+        baseEditSn: change.editType === "ADD" ? undefined : change.baseEditSn,
+        featureRef: change.featureRef,
+        attributes: buildPipeSaveAttributes(change.basicInfo),
+        beforeGeometry: change.beforeGeometry,
+        afterGeometry: change.editType === "DELETE" ? null : change.afterGeometry,
+        geometry: change.editType === "ADD" ? change.afterGeometry : undefined,
+      })),
+    };
+
+    return payload;
+  }, [actionableChanges, selectedLayer]);
+
+  const removeLastChange = useCallback(() => {
+    setLastSavedPayload(null);
+    setChanges((previous) => {
+      if (previous.length === 0) return previous;
+      const [removedChange, ...rest] = previous;
+      if (!removedChange) return previous;
+      if (focusedChangeId === removedChange.changeId) {
+        setFocusedChangeId(rest[0]?.changeId ?? null);
+      }
+      if (pendingInteraction?.changeId === removedChange.changeId) {
+        setPendingInteraction(null);
+      }
+      latestSelectionRef.current = null;
+      return rest;
+    });
+    setStatusMessage("가장 최근 편집 변경분을 세션에서 제거했습니다.");
+  }, [focusedChangeId, pendingInteraction]);
+
+  const removeFocusedChange = useCallback(() => {
+    const targetChangeId = focusedChangeId ?? pendingInteraction?.changeId ?? null;
+    if (!targetChangeId) {
+      setStatusMessage("취소할 편집 변경분을 선택해주세요.");
+      return;
+    }
+
+    const removedChange = changes.find((change) => change.changeId === targetChangeId) ?? null;
+    if (!removedChange) {
+      setStatusMessage("선택한 편집 변경분을 찾을 수 없습니다.");
+      return;
+    }
+
+    setLastSavedPayload(null);
+    setChanges((previous) => previous.filter((change) => change.changeId !== targetChangeId));
+
+    if (focusedChangeId === targetChangeId) {
+      const nextFocusedChange = changes.find((change) => change.changeId !== targetChangeId) ?? null;
+      setFocusedChangeId(nextFocusedChange?.changeId ?? null);
+    }
+    if (pendingInteraction?.changeId === targetChangeId) {
+      setPendingInteraction(null);
+    }
+
+    latestSelectionRef.current = null;
+    setStatusMessage(
+      removedChange.attributeOnly
+        ? `${removedChange.layerName} ${removedChange.objectLabel} 상세정보 변경을 취소했습니다.`
+        : `${removedChange.layerName} ${removedChange.objectLabel} 편집 변경을 취소했습니다.`,
+    );
+  }, [changes, focusedChangeId, pendingInteraction]);
+
+  const clearChanges = useCallback(() => {
+    setLastSavedPayload(null);
+    setChanges([]);
+    setActiveTool(null);
+    setPendingInteraction(null);
+    setFocusedChangeId(null);
+    setIsSnapEnabled(false);
+    latestSelectionRef.current = null;
+    setStatusMessage("편집 세션을 초기화했습니다.");
+  }, []);
+
+  const discardSession = useCallback(() => {
+    setIsEditMode(false);
+    setLastSavedPayload(null);
+    setChanges([]);
+    setActiveTool(null);
+    setPendingInteraction(null);
+    setFocusedChangeId(null);
+    setIsSnapEnabled(false);
+    latestSelectionRef.current = null;
+    setStatusMessage("하수관로 편집을 종료하고 세션 변경분을 초기화했습니다.");
+  }, []);
+
+  const updateChangeGeometry = useCallback((
+    changeId: string,
+    afterGeometry: Record<string, unknown> | null,
+    summary: string,
+    options?: { keepVertexEditActive?: boolean; keepMoveToolActive?: boolean },
+  ) => {
+    setLastSavedPayload(null);
+    setChanges((previous) =>
+      previous.map((change) =>
+        change.changeId === changeId
+          ? {
+              ...change,
+              afterGeometry,
+              summary,
+            }
+          : change,
+      ),
+    );
+    setFocusedChangeId(changeId);
+    if (options?.keepVertexEditActive) {
+      setActiveTool("VERTEX_EDIT");
+      setPendingInteraction({ changeId, editType: "VERTEX_EDIT" });
+    } else if (options?.keepMoveToolActive) {
+      // MOVE는 버튼 재클릭 전까지 도구를 유지하고, 다음 지도 클릭에서 새 대상을 선택하게 한다.
+      setActiveTool("MOVE");
+      setPendingInteraction(null);
+    } else {
+      setActiveTool(null);
+      setPendingInteraction(null);
+    }
+    latestSelectionRef.current = null;
+    setStatusMessage(summary);
+  }, []);
+
+  const updateChangeBasicInfo = useCallback((
+    changeId: string,
+    basicInfo: GisEditPipeBasicInfo,
+  ) => {
+    setLastSavedPayload(null);
+    setChanges((previous) =>
+      previous.map((change) =>
+        change.changeId === changeId
+          ? {
+              ...change,
+              featureRef: {
+                ...change.featureRef,
+                fcltMngNo: basicInfo.fcltMngNo || change.featureRef?.fcltMngNo,
+                mngInstCd: basicInfo.mngInstCd || change.featureRef?.mngInstCd,
+              },
+              basicInfo,
+              basicInfoSavedAt: new Date().toISOString(),
+            }
+          : change,
+      ),
+    );
+    setFocusedChangeId(changeId);
+    setStatusMessage("관로 기본정보를 편집 세션에 저장했습니다. 최종 GIS 저장 전까지는 DB에 반영되지 않습니다.");
+  }, []);
+
+  const updateChangeBaseEditSn = useCallback((changeId: string, baseEditSn: string) => {
+    setLastSavedPayload(null);
+    setChanges((previous) =>
+      previous.map((change) =>
+        change.changeId === changeId
+          ? {
+              ...change,
+              baseEditSn,
+            }
+          : change,
+      ),
+    );
+  }, []);
+
+  const clearPendingInteraction = useCallback(() => {
+    setPendingInteraction(null);
+  }, []);
+
+  const announceStatus = useCallback((message: string) => {
+    setStatusMessage(message);
+  }, []);
+
+  return {
+    isEditMode,
+    editableLayers,
+    selectedLayer,
+    selectedLayerId,
+    activeTool,
+    isSnapEnabled,
+    changes,
+    statusMessage,
+    canUseTools,
+    canSave,
+    lastSavedPayload,
+    pendingInteraction,
+    focusedChangeId,
+    pendingApiMessage:
+      "현재 구현은 FE 로컬 편집 세션, 관로 기본정보 draft, BE 저장 API(`/api/v1/map/gisEditSessions/save`) 최종본 저장까지 포함합니다.",
+    canUndo: actionableChanges.length > 0,
+    toggleEditMode,
+    toggleSnapEnabled,
+    selectLayer,
+    activateTool,
+    deactivateTool,
+    registerAddGeometry,
+    registerFeatureSelection,
+    registerPipeDetailSelection,
+    save,
+    removeFocusedChange,
+    removeLastChange,
+    clearChanges,
+    discardSession,
+    updateChangeGeometry,
+    updateChangeBasicInfo,
+    updateChangeBaseEditSn,
+    clearPendingInteraction,
+    focusChange,
+    announceStatus,
+  };
+};
diff --git a/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
new file mode 100644
index 000000000..fabd7c029
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
@@ -0,0 +1,415 @@
+"use client";
+
+import type { ChangeEvent } from "react";
+import { useMemo, useRef, useState } from "react";
+import UiPageNations from "@common/business_components/ui/table/uiPageNations";
+
+import { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+
+type UploadFacilityType = {
+  facilityTypeCode: string;
+  facilityTypeName: string;
+  allowedExtensions: string[];
+  maxFileSizeMb: number;
+};
+
+type UploadHistoryItem = {
+  uploadId: string;
+  facilityTypeCode: string;
+  facilityTypeName: string;
+  fileName: string;
+  registeredAt: string;
+  registeredBy: string;
+};
+
+const UPLOAD_FACILITY_TYPES: UploadFacilityType[] = [
+  {
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    allowedExtensions: [".zip", ".shp", ".geojson", ".json", ".dxf"],
+    maxFileSizeMb: 200,
+  },
+];
+
+const INITIAL_UPLOAD_HISTORY: UploadHistoryItem[] = [
+  {
+    uploadId: "GUP-MOCK-20260504-0001",
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    fileName: "asan_pipe_20260504.zip",
+    registeredAt: "2026-05-04",
+    registeredBy: "admin",
+  },
+  {
+    uploadId: "GUP-MOCK-20260418-0004",
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    fileName: "asan_pipe_20260418.zip",
+    registeredAt: "2026-04-18",
+    registeredBy: "admin",
+  },
+  {
+    uploadId: "GUP-MOCK-20260409-0007",
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    fileName: "asan_pipe_20260409.zip",
+    registeredAt: "2026-04-09",
+    registeredBy: "admin",
+  },
+  {
+    uploadId: "GUP-MOCK-20260331-0010",
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    fileName: "asan_pipe_20260331.zip",
+    registeredAt: "2026-03-31",
+    registeredBy: "admin",
+  },
+  {
+    uploadId: "GUP-MOCK-20260322-0013",
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    fileName: "asan_pipe_20260322.zip",
+    registeredAt: "2026-03-22",
+    registeredBy: "admin",
+  },
+  {
+    uploadId: "GUP-MOCK-20260313-0016",
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    fileName: "asan_pipe_20260313.zip",
+    registeredAt: "2026-03-13",
+    registeredBy: "admin",
+  },
+  {
+    uploadId: "GUP-MOCK-20260304-0019",
+    facilityTypeCode: "PPL",
+    facilityTypeName: "하수관로",
+    fileName: "asan_pipe_20260304.zip",
+    registeredAt: "2026-03-04",
+    registeredBy: "admin",
+  },
+];
+
+const getFileExtension = (fileName: string) => {
+  const lastDotIndex = fileName.lastIndexOf(".");
+  if (lastDotIndex < 0) return "";
+  return fileName.slice(lastDotIndex).toLowerCase();
+};
+
+const buildTodayDate = () => new Date().toISOString().slice(0, 10);
+const GIS_UPLOAD_PAGE_SIZE = 10;
+
+export default function GisManagementPopupPage() {
+  // 브라우저 파일 picker는 제어형 input보다 ref 제어가 안전하다.
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const [selectedFacilityTypeCode, setSelectedFacilityTypeCode] = useState("");
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploadHistory, setUploadHistory] = useState<UploadHistoryItem[]>(
+    INITIAL_UPLOAD_HISTORY,
+  );
+  const [selectedUploadId, setSelectedUploadId] = useState<string>(
+    INITIAL_UPLOAD_HISTORY[0]?.uploadId ?? "",
+  );
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const selectedFacility = useMemo(
+    () =>
+      UPLOAD_FACILITY_TYPES.find(
+        (facilityType) =>
+          facilityType.facilityTypeCode === selectedFacilityTypeCode,
+      ) ?? null,
+    [selectedFacilityTypeCode],
+  );
+
+  const selectedHistory = useMemo(
+    () =>
+      uploadHistory.find((history) => history.uploadId === selectedUploadId) ??
+      null,
+    [selectedUploadId, uploadHistory],
+  );
+
+  const pagedUploadHistory = useMemo(() => {
+    const startIndex = (currentPage - 1) * GIS_UPLOAD_PAGE_SIZE;
+    return uploadHistory.slice(startIndex, startIndex + GIS_UPLOAD_PAGE_SIZE);
+  }, [currentPage, uploadHistory]);
+
+  const resetSelectedFile = () => {
+    setSelectedFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleFacilityTypeChange = (
+    event: ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setSelectedFacilityTypeCode(event.target.value);
+    resetSelectedFile();
+  };
+
+  const handleOpenFilePicker = () => {
+    if (!selectedFacility) {
+      window.alert("시설구분을 먼저 선택하세요.");
+      return;
+    }
+
+    fileInputRef.current?.click();
+  };
+
+  const handleFileSelected = (event: ChangeEvent<HTMLInputElement>) => {
+    const nextFile = event.target.files?.[0] ?? null;
+
+    if (!selectedFacility) {
+      resetSelectedFile();
+      window.alert("시설구분을 먼저 선택한 뒤 파일을 선택하세요.");
+      return;
+    }
+
+    if (!nextFile) {
+      resetSelectedFile();
+      return;
+    }
+
+    const fileExtension = getFileExtension(nextFile.name);
+    const isAllowedExtension = selectedFacility.allowedExtensions.includes(
+      fileExtension,
+    );
+
+    if (!isAllowedExtension) {
+      resetSelectedFile();
+      window.alert(
+        `업로드 가능한 GIS 파일 형식이 아닙니다. 허용 형식: ${selectedFacility.allowedExtensions.join(", ")}`,
+      );
+      return;
+    }
+
+    const maxFileSizeInBytes = selectedFacility.maxFileSizeMb * 1024 * 1024;
+    if (nextFile.size > maxFileSizeInBytes) {
+      resetSelectedFile();
+      window.alert(
+        `파일 크기가 제한을 초과했습니다. 최대 ${selectedFacility.maxFileSizeMb}MB까지 업로드할 수 있습니다.`,
+      );
+      return;
+    }
+
+    setSelectedFile(nextFile);
+  };
+
+  const handleUpload = () => {
+    if (!selectedFacility) {
+      window.alert("시설구분을 선택하세요.");
+      return;
+    }
+
+    if (!selectedFile) {
+      window.alert("업로드할 파일을 선택하세요.");
+      return;
+    }
+
+    const isDuplicateFile = uploadHistory.some(
+      (history) =>
+        history.facilityTypeCode === selectedFacility.facilityTypeCode &&
+        history.fileName.toLowerCase() === selectedFile.name.toLowerCase(),
+    );
+
+    if (isDuplicateFile) {
+      window.alert("동일 시설구분에 같은 파일명이 존재합니다.");
+      return;
+    }
+
+    const nextUploadHistory: UploadHistoryItem = {
+      uploadId: `GUP-MOCK-${Date.now()}`,
+      facilityTypeCode: selectedFacility.facilityTypeCode,
+      facilityTypeName: selectedFacility.facilityTypeName,
+      fileName: selectedFile.name,
+      registeredAt: buildTodayDate(),
+      registeredBy: "admin",
+    };
+
+    setUploadHistory((currentHistory) => [
+      nextUploadHistory,
+      ...currentHistory,
+    ]);
+    setCurrentPage(1);
+    setSelectedUploadId(nextUploadHistory.uploadId);
+    window.alert("GIS 업로드가 완료되었습니다.");
+    resetSelectedFile();
+  };
+
+  const handleDownload = () => {
+    if (!selectedHistory) {
+      window.alert("다운로드할 파일을 선택하세요.");
+      return;
+    }
+
+    window.alert(`${selectedHistory.fileName} 다운로드를 요청했습니다.`);
+  };
+
+  return (
+    <main className="sn-popup-modal-page">
+      <section className="sn-popup-modal-shell max-w-[920px] shadow-[0_16px_36px_rgba(31,59,87,0.10)] backdrop-blur-[2px]">
+        <header className="sn-popup-modal-header">
+          <h1 className="sn-popup-modal-title">
+            GIS 관리
+          </h1>
+        </header>
+
+        <div className="px-[16px] pb-[16px] pt-[10px]">
+          <div className="sn-popup-panel-title mb-[10px] mt-[4px]">
+            GIS 업로드
+          </div>
+
+          <div className="mb-[8px] flex items-center justify-between gap-[12px] px-[2px]">
+            <div className="flex min-w-0 flex-1 items-center gap-[10px]">
+              <select
+                className="sn-popup-input-sm h-[32px] w-[110px] shrink-0"
+                value={selectedFacilityTypeCode}
+                onChange={handleFacilityTypeChange}
+                aria-label="시설구분"
+              >
+                <option value="">시설구분</option>
+                {UPLOAD_FACILITY_TYPES.map((facilityType) => (
+                  <option
+                    key={facilityType.facilityTypeCode}
+                    value={facilityType.facilityTypeCode}
+                  >
+                    {facilityType.facilityTypeName}
+                  </option>
+                ))}
+              </select>
+
+              <Input
+                value={selectedFile?.name ?? ""}
+                placeholder="선택된 파일 없음"
+                readOnly
+                aria-label="선택 파일명"
+                className="sn-popup-input-sm h-[32px] min-w-0 flex-1 py-0 !text-[1.02rem] shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] focus-visible:ring-0 focus-visible:ring-offset-0"
+              />
+            </div>
+
+            <div className="flex shrink-0 items-center gap-[10px]">
+              <Button
+                type="button"
+                size="sm"
+                className="sn-popup-primary-button-sm h-[32px] min-w-[56px]"
+                onClick={handleOpenFilePicker}
+              >
+                찾기
+              </Button>
+
+              <Button
+                type="button"
+                size="sm"
+                className="sn-popup-primary-button-sm h-[32px] min-w-[64px]"
+                onClick={handleUpload}
+              >
+                업로드
+              </Button>
+            </div>
+          </div>
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            className="hidden"
+            accept={
+              selectedFacility?.allowedExtensions.join(",") ??
+              ".zip,.shp,.geojson,.json,.dxf"
+            }
+            onChange={handleFileSelected}
+          />
+
+          <div className="mb-[8px] flex items-center justify-between px-[2px]">
+              <div className="sn-popup-panel-title">
+                GIS 업로드 현황
+              </div>
+
+            <Button
+              type="button"
+              size="sm"
+              color="primary"
+              className="sn-popup-primary-button-sm h-[32px] min-w-[82px] px-[10px]"
+              onClick={handleDownload}
+            >
+              다운로드
+            </Button>
+          </div>
+
+          <div className="sn-popup-card shadow-[0_6px_16px_rgba(31,59,87,0.06),inset_0_1px_0_rgba(255,255,255,0.78)]">
+            <Table variant="secondary" className="text-[1.02rem]">
+            <TableHeader className="!static bg-transparent">
+              <TableRow className="border-0">
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
+                  no
+                </TableHead>
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
+                  시설구분
+                </TableHead>
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
+                  파일명
+                </TableHead>
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
+                  등록일자
+                </TableHead>
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
+                  등록자
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+
+            <TableBody>
+              {pagedUploadHistory.map((history, index) => {
+                const isSelected = history.uploadId === selectedUploadId;
+                const backgroundColor = isSelected
+                  ? "var(--primary-transparent)"
+                  : index % 2 === 0
+                    ? "var(--background)"
+                    : "var(--secondary)";
+                const rowNumber =
+                  (currentPage - 1) * GIS_UPLOAD_PAGE_SIZE + index + 1;
+
+                return (
+                  <TableRow
+                    key={history.uploadId}
+                    className="border-0 cursor-pointer"
+                    onClick={() => setSelectedUploadId(history.uploadId)}
+                    style={{ backgroundColor }}
+                  >
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
+                      {rowNumber}
+                    </TableCell>
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
+                      {history.facilityTypeName}
+                    </TableCell>
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
+                      {history.fileName}
+                    </TableCell>
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
+                      {history.registeredAt}
+                    </TableCell>
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
+                      {history.registeredBy}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+            </Table>
+          </div>
+
+          {uploadHistory.length > GIS_UPLOAD_PAGE_SIZE ? (
+            <div className="mt-[10px] flex justify-center">
+              <UiPageNations
+                total={uploadHistory.length}
+                cur={currentPage}
+                pageSize={GIS_UPLOAD_PAGE_SIZE}
+                onPageChange={setCurrentPage}
+              />
+            </div>
+          ) : null}
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
new file mode 100644
index 000000000..b49fad160
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
@@ -0,0 +1,345 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { DateMonthPicker, UiTable, downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+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 {
+  INFTWT_RESULT_ROW_SELECT_MESSAGE,
+  INFTWT_RESULT_ROW_SELECT_STORAGE_KEY,
+  type InftwtResultRow,
+} from "./inftwtResultTypes";
+
+const INFTWT_RESULT_PAGE_SIZE = 10;
+
+const INFTWT_RESULT_HEADLIST = [
+  { 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: "분석성공여부" },
+] as const;
+
+type InftwtResultFilters = {
+  ctpvCd: string;
+  sggCd: string;
+  sggName: string;
+  swtrmtFcltNm: string;
+  aplcnYmFrom: string;
+  aplcnYmTo: string;
+};
+
+const createDefaultAplcnYm = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  return `${year}${month}`;
+};
+
+const DEFAULT_FILTERS: InftwtResultFilters = {
+  ctpvCd: "0",
+  sggCd: "0",
+  sggName: "",
+  swtrmtFcltNm: "",
+  aplcnYmFrom: `${new Date().getFullYear()}01`,
+  aplcnYmTo: createDefaultAplcnYm(),
+};
+
+const postRowSelectMessage = (row: InftwtResultRow) => {
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(
+        INFTWT_RESULT_ROW_SELECT_STORAGE_KEY,
+        JSON.stringify({
+          row,
+          timestamp: Date.now(),
+        }),
+      );
+    } catch (error) {
+      console.warn("침입수 분석결과 선택 동기화 저장에 실패했습니다.", error);
+    }
+  }
+
+  if (typeof window === "undefined" || !window.opener) return;
+  window.opener.postMessage(
+    {
+      type: INFTWT_RESULT_ROW_SELECT_MESSAGE,
+      row,
+    },
+    window.location.origin,
+  );
+};
+
+export default function InftwtResultPopupPage() {
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  const [filters, setFilters] = useState<InftwtResultFilters>(DEFAULT_FILTERS);
+  const [selectedSwagePrcsFclt, setSelectedSwagePrcsFclt] = useState("0");
+  const [selectedRow, setSelectedRow] = useState<InftwtResultRow | null>(null);
+  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);
+
+  useEffect(() => {
+    if (ctpv.length === 0) void fetchCtpv();
+    if (sgg.length === 0) void fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
+
+  const fetchRows = useCallback(
+    async (page: number, nextFilters: InftwtResultFilters) => {
+      const queryParams = new URLSearchParams({
+        page: String(page - 1),
+        size: String(INFTWT_RESULT_PAGE_SIZE),
+        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());
+
+      const response = await getData(`v1/inftwtAnls?${queryParams.toString()}`);
+      const content = Array.isArray(response?.content) ? response.content : [];
+
+      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 sggOption = sgg.find((code) => code.val === item?.sggCd);
+
+          return {
+            ...(formattedItem as Record<string, unknown>),
+            rowNumber: (page - 1) * INFTWT_RESULT_PAGE_SIZE + index + 1,
+            ctpvNm: ctpvOption ? ctpvOption.text : String(item?.ctpvCd ?? "-"),
+            sggNm: sggOption ? sggOption.text : String(item?.sggCd ?? "-"),
+            scsYn: String(item?.scsYn ?? "N"),
+          } as InftwtResultRow;
+        })
+        .filter((item: InftwtResultRow) => item.scsYn === "Y");
+
+      setRows(nextRows);
+      setTotal(Number(response?.totalElements ?? nextRows.length));
+      setCurrentPage(page);
+    },
+    [ctpv, sgg],
+  );
+
+  const loadRows = useCallback(
+    async (page = 1, nextFilters = filters) => {
+      setIsLoading(true);
+      try {
+        await fetchRows(page, nextFilters);
+      } catch (error) {
+        console.error("침입수 분석결과 목록 조회 중 오류:", error);
+        alert("침입수 분석결과 목록을 불러오지 못했습니다.");
+        setRows([]);
+        setTotal(0);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchRows, filters],
+  );
+
+  useEffect(() => {
+    void loadRows(1, DEFAULT_FILTERS);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSearch = async (page = 1) => {
+    setSelectedIndex(-1);
+    setSelectedRow(null);
+    await loadRows(page, filters);
+  };
+
+  const handleRowClick = (index?: number) => {
+    if (typeof index !== "number") return;
+    const row = rows[index];
+    if (!row) return;
+
+    setSelectedIndex(index);
+    setSelectedRow(row);
+    postRowSelectMessage(row);
+  };
+
+  const handleDownload = async () => {
+    if (!selectedRow?.inftwtAnlsSn) {
+      alert("다운로드할 분석결과를 먼저 선택해주세요.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const response = await getData(`v1/inftwtAnlsRslt/ppl/${selectedRow.inftwtAnlsSn}`);
+      const excelRows = Array.isArray(response?.content) ? response.content : [];
+
+      await downloadExcelWithKoreanHeaders({
+        data: excelRows as JSON[],
+        fileName: `침입수분석결과_${selectedRow.swtrmtFcltNm}_${selectedRow.aplcnYm}_${selectedRow.inftwtAnlsSn}`,
+        sheetNameArray: ["침입수 분석결과"],
+        headerRange: "A1:D1",
+        headerMapping: {
+          inftwtAnlsSn: "침입수분석\n일련번호",
+          pplMngNo: "관로\n관리번호",
+          anlsTm: "분석시각",
+          predcOilq: "예측유량\n(m³/h)",
+        },
+      });
+    } catch (error) {
+      console.error("침입수 분석결과 다운로드 중 오류:", error);
+      alert("침입수 분석결과 다운로드 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main className="sn-popup-page">
+      <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_HEADLIST as unknown as { id: string; title: string }[]}
+            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}
+          />
+        </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>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/inftwtResult/inftwtResultTypes.ts b/apps/sn/app/(map-layout)/map/components/inftwtResult/inftwtResultTypes.ts
new file mode 100644
index 000000000..5112afe49
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/inftwtResult/inftwtResultTypes.ts
@@ -0,0 +1,48 @@
+"use client";
+
+export const INFTWT_RESULT_ROW_SELECT_MESSAGE = "SN_INFTWT_RESULT_ROW_SELECT";
+export const INFTWT_RESULT_OVERLAY_TYPE = "INFTWT_RESULT";
+export const INFTWT_RESULT_ROW_SELECT_STORAGE_KEY = "SN_INFTWT_RESULT_ROW_SELECT_STORAGE";
+
+export type InftwtResultRow = {
+  rowNumber: number;
+  inftwtAnlsSn: number;
+  ctpvCd?: string;
+  ctpvNm: string;
+  sggCd?: string;
+  sggNm: string;
+  swtrmtFcltNm: string;
+  aplcnYm: string;
+  drtwSwtcRt?: number | string;
+  anlsInfo: string;
+  regDt?: string;
+  rgtrNm?: string;
+  scsYn?: string;
+};
+
+export type InftwtResultMapViewPipe = {
+  pplMngNo: string;
+  fcltMngNo: string;
+  hasOilq: boolean;
+};
+
+export type InftwtResultMapViewResponse = {
+  analysis: {
+    inftwtAnlsSn: number;
+    aplcnYm: string;
+    ctpvCd?: string;
+    sggCd?: string;
+    swtrmtFcltNm?: string;
+    anlsInfo?: string;
+  };
+  focusTargetType: "ZONE" | "PIPE_EXTENT";
+  focusTargetName: string;
+  focusLayerType?: "tb_ms_swage_prcs_zone" | "tb_ms_swage_ppl";
+  focusFid?: string;
+  focusFallbackApplied?: boolean;
+  zoneGeometry: Record<string, unknown>;
+  pipeGeometry: Record<string, unknown>;
+  pipes: InftwtResultMapViewPipe[];
+  pipeCount: number;
+  oilqPipeCount: number;
+};
diff --git a/apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts b/apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts
new file mode 100644
index 000000000..11984c8e1
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts
@@ -0,0 +1,508 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
+import GeoJSON from "ol/format/GeoJSON.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import Stroke from "ol/style/Stroke.js";
+import Fill from "ol/style/Fill.js";
+import Style from "ol/style/Style.js";
+import { intersects as intersectsExtent } from "ol/extent";
+
+import { getRawJson } from "@/components/lib/api";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { getSigunguCenter, moveMapToCenter, sidoCenter } from "@common/business_components/ui/map/searchBar/utils";
+
+import {
+  INFTWT_RESULT_OVERLAY_TYPE,
+  INFTWT_RESULT_ROW_SELECT_MESSAGE,
+  INFTWT_RESULT_ROW_SELECT_STORAGE_KEY,
+  type InftwtResultMapViewResponse,
+  type InftwtResultRow,
+} from "./inftwtResultTypes";
+
+type UseInftwtResultMapParams = {
+  gisMaps: MutableRefObject<any | null>;
+  setFeatureData: (value: any) => void;
+  setIsOpen: (value: boolean) => void;
+  setIsSearchModalOpen: (value: boolean) => void;
+};
+
+const INFTWT_ZONE_LAYER_ID = "SN_INFTWT_RESULT_ZONE_LAYER";
+const INFTWT_PIPE_LAYER_ID = "SN_INFTWT_RESULT_PIPE_LAYER";
+const DEFAULT_RESULT_FIT_PADDING: [number, number, number, number] = [120, 120, 120, 120];
+const INFTWT_PROC_SEARCH_EVENT = "SN_INFTWT_PROC_SEARCH";
+
+const zoneStyle = new Style({
+  fill: new Fill({
+    color: "rgba(16, 185, 129, 0.06)",
+  }),
+  stroke: new Stroke({
+    color: "rgba(5, 150, 105, 0.72)",
+    width: 2,
+    lineDash: [10, 8],
+  }),
+  zIndex: 19991,
+});
+
+const buildPipeStyle = (hasOilq: boolean) => {
+  const innerColor = hasOilq ? "rgba(236, 72, 153, 0.98)" : "rgba(14, 165, 233, 0.98)";
+  const haloWidth = hasOilq ? 11 : 5;
+  const innerWidth = hasOilq ? 6 : 2.5;
+  const dashPattern = hasOilq ? [18, 9] : undefined;
+
+  return [
+    new Style({
+      stroke: new Stroke({
+        color: "rgba(15, 23, 42, 0.58)",
+        width: hasOilq ? haloWidth + 4 : haloWidth + 2,
+        lineCap: "round",
+        lineJoin: "round",
+      }),
+      zIndex: hasOilq ? 20000 : 19999,
+    }),
+    new Style({
+      stroke: new Stroke({
+        color: "rgba(255, 255, 255, 0.98)",
+        width: haloWidth,
+        lineCap: "round",
+        lineJoin: "round",
+      }),
+      zIndex: hasOilq ? 20001 : 20000,
+    }),
+    new Style({
+      stroke: new Stroke({
+        color: innerColor,
+        width: innerWidth,
+        lineCap: "round",
+        lineJoin: "round",
+        lineDash: dashPattern,
+      }),
+      zIndex: hasOilq ? 20002 : 20001,
+    }),
+  ];
+};
+
+const getFeatureCollection = (payload: any) => {
+  if (payload?.type === "FeatureCollection") return payload;
+  if (payload?.data?.type === "FeatureCollection") return payload.data;
+  return { type: "FeatureCollection", features: [] };
+};
+
+const normalizeProjectionName = (value: string) => {
+  const trimmed = String(value ?? "").trim();
+  if (!trimmed) return "EPSG:4326";
+  if (trimmed.startsWith("EPSG:")) return trimmed;
+  const match = trimmed.match(/EPSG[:/]{1,2}(\d{4,5})/i) || trimmed.match(/(\d{4,5})$/);
+  return match?.[1] ? `EPSG:${match[1]}` : trimmed;
+};
+
+const resolveFeatureCollectionProjection = (payload: any) => {
+  const featureCollection = getFeatureCollection(payload);
+  const crsName = String(featureCollection?.crs?.properties?.name ?? "").trim();
+  return normalizeProjectionName(crsName || GisApp.TO_PROJ);
+};
+
+const getOverlayFlag = (data: any) =>
+  String(
+    data?.get?.("analysisOverlayType") ??
+      data?.values_?.analysisOverlayType ??
+      data?.analysisOverlayType ??
+      "",
+  ).trim();
+
+const getOverlayBasePplMngNo = (data: any) =>
+  String(
+    data?.get?.("fcltMngNo") ??
+      data?.values_?.fcltMngNo ??
+      data?.values_?.fclt_mng_no ??
+      data?.fcltMngNo ??
+      data?.fclt_mng_no ??
+      "",
+  ).trim();
+
+const getOverlayAnalysisPplMngNo = (data: any) =>
+  String(
+    data?.get?.("pplMngNo") ??
+      data?.values_?.pplMngNo ??
+      data?.pplMngNo ??
+      "",
+  ).trim();
+
+const getOverlayAnalysisSn = (data: any) =>
+  Number(
+    data?.get?.("inftwtAnlsSn") ??
+      data?.values_?.inftwtAnlsSn ??
+      data?.inftwtAnlsSn ??
+      0,
+  );
+
+const getOverlayAplcnYm = (data: any) =>
+  String(
+    data?.get?.("aplcnYm") ??
+      data?.values_?.aplcnYm ??
+      data?.aplcnYm ??
+      "",
+  ).trim();
+
+const getOverlayAnalysisInfo = (data: any) =>
+  String(
+    data?.get?.("analysisInfo") ??
+      data?.values_?.analysisInfo ??
+      data?.analysisInfo ??
+      "",
+  ).trim();
+
+const getFirstFeatureId = (payload: any) => {
+  const featureCollection = getFeatureCollection(payload);
+  const firstFeature = Array.isArray(featureCollection?.features) ? featureCollection.features[0] : null;
+  return String(firstFeature?.id ?? "").trim();
+};
+
+const getOilqPipeExtent = (features: any[]) => {
+  const oilqFeatures = features.filter((feature) => Boolean(feature?.get?.("hasOilq")));
+  if (oilqFeatures.length === 0) return null;
+
+  let nextExtent: [number, number, number, number] | null = null;
+  oilqFeatures.forEach((feature) => {
+    const geometryExtent = feature?.getGeometry?.()?.getExtent?.();
+    if (!Array.isArray(geometryExtent) || geometryExtent.some((value: number) => !Number.isFinite(value))) {
+      return;
+    }
+
+    if (!nextExtent) {
+      nextExtent = [...geometryExtent] as [number, number, number, number];
+      return;
+    }
+
+    nextExtent = [
+      Math.min(nextExtent[0], geometryExtent[0]),
+      Math.min(nextExtent[1], geometryExtent[1]),
+      Math.max(nextExtent[2], geometryExtent[2]),
+      Math.max(nextExtent[3], geometryExtent[3]),
+    ];
+  });
+
+  return nextExtent;
+};
+
+export const useInftwtResultMap = ({
+  gisMaps,
+  setFeatureData,
+  setIsOpen,
+  setIsSearchModalOpen,
+}: UseInftwtResultMapParams) => {
+  const activeResultRowRef = useRef<InftwtResultRow | null>(null);
+  const zoneLayerRef = useRef<VectorLayer<any> | null>(null);
+  const zoneSourceRef = useRef<VectorSource | null>(null);
+  const pipeLayerRef = useRef<VectorLayer<any> | null>(null);
+  const pipeSourceRef = useRef<VectorSource | null>(null);
+  const mapViewCacheRef = useRef<Map<number, InftwtResultMapViewResponse>>(new Map());
+  const [activeMapView, setActiveMapView] = useState<InftwtResultMapViewResponse | null>(null);
+
+  const clearLayers = useCallback(() => {
+    zoneSourceRef.current?.clear?.();
+    pipeSourceRef.current?.clear?.();
+    zoneLayerRef.current?.changed?.();
+    pipeLayerRef.current?.changed?.();
+    gisMaps.current?.renderSync?.();
+  }, [gisMaps]);
+
+  const ensureZoneLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (zoneLayerRef.current && zoneSourceRef.current) {
+      return zoneSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 19991,
+    });
+
+    layer.set("id", INFTWT_ZONE_LAYER_ID);
+    layer.set("lyrNm", "移⑥엯?섎텇??泥섎━援ъ뿭");
+    layer.set("lyrTyNm", "tb_ms_swage_prcs_zone");
+    layer.set("clickPsblYn", "N");
+    layer.setVisible?.(true);
+    map.addLayer(layer);
+
+    zoneLayerRef.current = layer;
+    zoneSourceRef.current = source;
+    return source;
+  }, [gisMaps]);
+
+  const ensurePipeLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (pipeLayerRef.current && pipeSourceRef.current) {
+      return pipeSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 19997,
+    });
+
+    layer.set("id", INFTWT_PIPE_LAYER_ID);
+    layer.set("lyrNm", "침입수분석 결과관로");
+    layer.set("lyrTyNm", "tb_ms_swage_ppl");
+    layer.set("clickPsblYn", "Y");
+    layer.setVisible?.(true);
+    map.addLayer(layer);
+
+    pipeLayerRef.current = layer;
+    pipeSourceRef.current = source;
+    return source;
+  }, [gisMaps]);
+
+  const fitToRenderedFeatures = useCallback(
+    (mapView?: InftwtResultMapViewResponse | null) => {
+      const map = gisMaps.current;
+      const zoneExtent = zoneSourceRef.current?.getExtent?.();
+      const pipeExtent = pipeSourceRef.current?.getExtent?.();
+      const pipeFeatures = pipeSourceRef.current?.getFeatures?.() ?? [];
+      const oilqPipeExtent = getOilqPipeExtent(pipeFeatures);
+      const hasPipeFeatures = pipeFeatures.length > 0;
+      const hasZoneFeatures = Boolean(zoneSourceRef.current?.getFeatures?.().length);
+      const preferZone = mapView?.focusTargetType === "ZONE" && hasZoneFeatures;
+      const zoneExtentIsFinite = Array.isArray(zoneExtent) && zoneExtent.every((value: number) => Number.isFinite(value));
+      const pipeExtentIsFinite = Array.isArray(pipeExtent) && pipeExtent.every((value: number) => Number.isFinite(value));
+      const hasPipeInsideZone =
+        preferZone && zoneExtentIsFinite
+          ? pipeFeatures.some((feature: any) => {
+              const geometryExtent = feature?.getGeometry?.()?.getExtent?.();
+              return Array.isArray(geometryExtent)
+                && geometryExtent.every((value: number) => Number.isFinite(value))
+                && intersectsExtent(zoneExtent as [number, number, number, number], geometryExtent as [number, number, number, number]);
+            })
+          : false;
+
+      const shouldUseZoneExtent = preferZone && (hasPipeInsideZone || !hasPipeFeatures);
+      const extent = oilqPipeExtent
+        ? oilqPipeExtent
+        : shouldUseZoneExtent
+          ? zoneExtent
+          : hasPipeFeatures
+            ? pipeExtent
+            : hasZoneFeatures
+              ? zoneExtent
+              : null;
+
+      if (!map || !extent || extent.some((value: number) => !Number.isFinite(value))) {
+        return;
+      }
+
+      map.getView?.().fit?.(extent, {
+        duration: 350,
+        padding: DEFAULT_RESULT_FIT_PADDING,
+        maxZoom: oilqPipeExtent ? 17 : shouldUseZoneExtent ? 15 : 16,
+        constrainResolution: true,
+        nearest: true,
+      });
+    },
+    [gisMaps],
+  );
+
+  const moveByRegionCodes = useCallback(
+    (ctpvCd?: string, sggCd?: string) => {
+      const normalizedSggCd = String(sggCd ?? "").trim();
+      if (normalizedSggCd && normalizedSggCd !== "0") {
+        const sigunguCenter = getSigunguCenter(normalizedSggCd);
+        if (sigunguCenter) {
+          moveMapToCenter(gisMaps, sigunguCenter, 12);
+          return true;
+        }
+      }
+
+      const normalizedCtpvCd = String(ctpvCd ?? "").trim();
+      if (normalizedCtpvCd && normalizedCtpvCd !== "0") {
+        const sidoCenterCoordinate = sidoCenter[normalizedCtpvCd.slice(0, 2)];
+        if (sidoCenterCoordinate) {
+          moveMapToCenter(gisMaps, sidoCenterCoordinate, 11);
+          return true;
+        }
+      }
+
+      return false;
+    },
+    [gisMaps],
+  );
+
+  const moveToStableFocus = useCallback(
+    async (mapView: InftwtResultMapViewResponse) => {
+      if ((mapView.oilqPipeCount ?? 0) > 0) {
+        fitToRenderedFeatures(mapView);
+        return;
+      }
+
+      const activeRow = activeResultRowRef.current;
+      const movedByRegion = moveByRegionCodes(
+        activeRow?.ctpvCd ?? mapView.analysis?.ctpvCd,
+        activeRow?.sggCd ?? mapView.analysis?.sggCd,
+      );
+      if (movedByRegion) return;
+
+      fitToRenderedFeatures(mapView);
+    },
+    [fitToRenderedFeatures, moveByRegionCodes],
+  );
+
+  const renderMapView = useCallback(
+    async (mapView: InftwtResultMapViewResponse) => {
+      const zoneSource = ensureZoneLayer();
+      const pipeSource = ensurePipeLayer();
+      if (!zoneSource || !pipeSource) return;
+
+      clearLayers();
+
+      const zoneDataProjection = resolveFeatureCollectionProjection(mapView.zoneGeometry);
+      const zoneFeatures = new GeoJSON().readFeatures(getFeatureCollection(mapView.zoneGeometry), {
+        dataProjection: zoneDataProjection,
+        featureProjection: GisApp.TO_PROJ,
+      });
+      zoneFeatures.forEach((feature: any) => feature.setStyle(zoneStyle));
+      zoneSource.addFeatures(zoneFeatures);
+      zoneSource.changed?.();
+      zoneLayerRef.current?.setVisible?.(true);
+      zoneLayerRef.current?.changed?.();
+
+      const pipeDataProjection = resolveFeatureCollectionProjection(mapView.pipeGeometry);
+      const pipeFeatures = new GeoJSON().readFeatures(getFeatureCollection(mapView.pipeGeometry), {
+        dataProjection: pipeDataProjection,
+        featureProjection: GisApp.TO_PROJ,
+      });
+      pipeFeatures.forEach((feature: any) => {
+        const hasOilq = Boolean(feature.get?.("hasOilq"));
+        feature.setStyle(buildPipeStyle(hasOilq));
+      });
+      pipeSource.addFeatures(pipeFeatures);
+      pipeSource.changed?.();
+      pipeLayerRef.current?.setVisible?.(true);
+      pipeLayerRef.current?.changed?.();
+      gisMaps.current?.renderSync?.();
+
+      console.info("移⑥엯??FE overlay ?뚮뜑 寃곌낵", {
+        focusTargetType: mapView.focusTargetType,
+        zoneFeatureCount: zoneFeatures.length,
+        pipeFeatureCount: pipeFeatures.length,
+      });
+
+      await moveToStableFocus(mapView);
+    },
+    [clearLayers, ensurePipeLayer, ensureZoneLayer, gisMaps, moveToStableFocus],
+  );
+
+  const handleRowSelect = useCallback(
+    async (row: InftwtResultRow) => {
+      try {
+        activeResultRowRef.current = row;
+        setFeatureData(null);
+        setIsOpen(false);
+        setIsSearchModalOpen(false);
+
+        const cachedMapView = mapViewCacheRef.current.get(row.inftwtAnlsSn);
+        let mapView = cachedMapView;
+
+        if (!mapView) {
+          const payload = await getRawJson(`/sewerage-service/api/v1/inftwtAnlsRslt/mapView/${row.inftwtAnlsSn}`);
+          mapView = (payload?.data ?? payload) as InftwtResultMapViewResponse;
+          mapViewCacheRef.current.set(row.inftwtAnlsSn, mapView);
+        }
+
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(
+            new CustomEvent(INFTWT_PROC_SEARCH_EVENT, {
+              detail: {
+                ctpvCd: row.ctpvCd ?? "0",
+                sggCd: row.sggCd ?? "0",
+                swtrmtFcltNm: row.swtrmtFcltNm ?? "",
+                suppressMapMove: (mapView.oilqPipeCount ?? 0) > 0,
+              },
+            }),
+          );
+        }
+
+        setActiveMapView(mapView);
+        void renderMapView(mapView);
+      } catch (error) {
+        console.error("移⑥엯??遺꾩꽍寃곌낵 吏€???곌퀎 以??ㅻ쪟:", error);
+        alert("移⑥엯??遺꾩꽍寃곌낵瑜?吏€?꾩뿉 ?곌퀎?섏? 紐삵뻽?듬땲??");
+      }
+    },
+    [renderMapView, setFeatureData, setIsOpen, setIsSearchModalOpen],
+  );
+
+  useEffect(() => {
+    const handlePopupMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== INFTWT_RESULT_ROW_SELECT_MESSAGE || !event.data?.row) return;
+      void handleRowSelect(event.data.row as InftwtResultRow);
+    };
+
+    const handleStorageEvent = (event: StorageEvent) => {
+      if (event.key !== INFTWT_RESULT_ROW_SELECT_STORAGE_KEY || !event.newValue) return;
+
+      try {
+        const payload = JSON.parse(event.newValue) as { row?: InftwtResultRow };
+        if (!payload?.row) return;
+        void handleRowSelect(payload.row);
+      } catch (error) {
+        console.warn("移⑥엯??遺꾩꽍寃곌낵 storage ?숆린??媛믪쓣 ?댁꽍?섏? 紐삵뻽?듬땲??", error);
+      }
+    };
+
+    window.addEventListener("message", handlePopupMessage);
+    window.addEventListener("storage", handleStorageEvent);
+    return () => {
+      window.removeEventListener("message", handlePopupMessage);
+      window.removeEventListener("storage", handleStorageEvent);
+    };
+  }, [handleRowSelect]);
+
+  useEffect(() => {
+    return () => {
+      clearLayers();
+    };
+  }, [clearLayers]);
+
+  const handleOverlayFeatureSelect = useCallback((data: any) => {
+    if (getOverlayFlag(data) !== INFTWT_RESULT_OVERLAY_TYPE) {
+      return false;
+    }
+
+    const overlayAnalysisSn = getOverlayAnalysisSn(data);
+    const basePplMngNo = getOverlayBasePplMngNo(data);
+    const analysisPplMngNo = getOverlayAnalysisPplMngNo(data);
+    const currentRow = activeResultRowRef.current;
+    const popupWindow = openWindowPopup("infilChart", {
+      pplMngNo: basePplMngNo || analysisPplMngNo.replace(/^L/, ""),
+      inftwtAnlsSn: overlayAnalysisSn || currentRow?.inftwtAnlsSn || 0,
+      aplcnYm: getOverlayAplcnYm(data) || currentRow?.aplcnYm || activeMapView?.analysis?.aplcnYm || "",
+      analysisInfo:
+        getOverlayAnalysisInfo(data) ||
+        currentRow?.anlsInfo ||
+        activeMapView?.analysis?.anlsInfo ||
+        "",
+      resultOnly: "Y",
+    });
+
+    if (!popupWindow) {
+      alert("?앹뾽??李⑤떒?섏뿀?듬땲?? 釉뚮씪?곗? ?앹뾽 ?덉슜 ?ㅼ젙???뺤씤?댁＜?몄슂.");
+    }
+
+    return true;
+  }, [activeMapView]);
+
+  return {
+    activeMapView,
+    clearLayers,
+    handleOverlayFeatureSelect,
+  };
+};
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 c958d5caa..eb436b1fb 100644
--- a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
@@ -42,6 +42,9 @@ const PIPE_ANALYSIS_DETAIL_EXPORT_KEYS = [
   "materialName",
 ] as const;
 
+const resolveErrorMessage = (error: unknown, fallbackMessage: string) =>
+  error instanceof Error && error.message.trim() ? error.message : fallbackMessage;
+
 export default function PipeAnalysisDetailPopupPage() {
   const searchParams = useSearchParams();
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
@@ -118,7 +121,7 @@ export default function PipeAnalysisDetailPopupPage() {
         setCurrentPage(page);
       } catch (error) {
         console.error("관로현황 조회 중 오류:", error);
-        alert("관로현황 조회 중 오류가 발생했습니다.");
+        alert(resolveErrorMessage(error, "관로현황 조회 중 오류가 발생했습니다."));
         setRows([]);
         setTotal(0);
       } finally {
@@ -188,7 +191,7 @@ export default function PipeAnalysisDetailPopupPage() {
       });
     } catch (error) {
       console.error("관로현황 다운로드 중 오류:", error);
-      alert("관로현황 다운로드 중 오류가 발생했습니다.");
+      alert(resolveErrorMessage(error, "관로현황 다운로드 중 오류가 발생했습니다."));
     } finally {
       setIsLoading(false);
     }
@@ -244,18 +247,18 @@ export default function PipeAnalysisDetailPopupPage() {
   }, [baseAnalysisType, baseElapsedYearBucket, baseMaterialCode, ctpv, filters.ctpvCd, filters.sggCd, filters.swtrmtZoneNm, rows, sgg]);
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <main className="sn-popup-page">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">관로현황{titleSuffix}</h1>
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">관로현황{titleSuffix}</h1>
       </header>
 
-      <section className="overflow-y-auto p-4">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_110px_110px_auto] md:items-end">
+      <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)_110px_110px_auto] md:items-end">
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">용도</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">용도</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.useCd}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -273,9 +276,9 @@ export default function PipeAnalysisDetailPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관재질</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">관재질</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.materialCode}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -293,9 +296,9 @@ export default function PipeAnalysisDetailPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관경 시작</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">관경 시작</div>
             <Input
-              className="h-10 !text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.diameterFrom}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -310,9 +313,9 @@ export default function PipeAnalysisDetailPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관경 종료</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">관경 종료</div>
             <Input
-              className="h-10 !text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.diameterTo}
               onChange={(event) =>
                 setFilters((current) => ({
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 97cb703cd..921dcf04c 100644
--- a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button, Table, TableBody, TableCell, TableHeader, TableHead, TableRow } from "@common/components";
 import { UiTable, downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+import UiPageNations from "@common/business_components/ui/table/uiPageNations";
 import { getData } from "@/components/lib/api";
 import LoadingOverlay from "@/components/ui/LoadingBar";
 import useStore from "@/store/useStore";
@@ -32,6 +33,7 @@ const SUMMARY_FILE_PREFIX: Record<string, string> = {
   MATERIAL: "관로분석_관재질별",
   YEAR_MATERIAL: "관로분석_경과년도별_관재질별",
 };
+const PIPE_ANALYSIS_SUMMARY_PAGE_SIZE = 10;
 
 const toExcelColumnName = (index: number) => {
   let current = index;
@@ -57,6 +59,9 @@ const formatGridNumber = (value: unknown) => {
   });
 };
 
+const resolveErrorMessage = (error: unknown, fallbackMessage: string) =>
+  error instanceof Error && error.message.trim() ? error.message : fallbackMessage;
+
 export default function PipeAnalysisPopupPage() {
   const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
   const userInfo = useUserStore((state) => state.userInfo);
@@ -70,6 +75,7 @@ export default function PipeAnalysisPopupPage() {
   const [materialColumns, setMaterialColumns] = useState<PipeAnalysisMaterialColumn[]>([]);
   const [rows, setRows] = useState<PipeAnalysisSummaryViewRow[]>([]);
   const [zoneOptions, setZoneOptions] = useState<Array<{ value: string; label: string }>>([]);
+  const [summaryCurrentPage, setSummaryCurrentPage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const initializedRef = useRef(false);
 
@@ -138,10 +144,11 @@ export default function PipeAnalysisPopupPage() {
         const scopedFilters = applyScopeToSummaryFilters(nextFilters, scope);
         setDraftFilters(scopedFilters);
         setAppliedFilters(scopedFilters);
+        setSummaryCurrentPage(1);
         await fetchSummary(scopedFilters);
       } catch (error) {
         console.error("관로분석 집계 조회 중 오류:", error);
-        alert("관로분석 집계 조회 중 오류가 발생했습니다.");
+        alert(resolveErrorMessage(error, "관로분석 집계 조회 중 오류가 발생했습니다."));
         setRows([]);
         setMaterialColumns([]);
       } finally {
@@ -216,7 +223,7 @@ export default function PipeAnalysisPopupPage() {
           return exportRow;
         });
       await downloadExcelWithKoreanHeaders({
-        data: exportRows as JSON[],
+        data: exportRows as unknown as JSON[],
         fileName: `${SUMMARY_FILE_PREFIX[appliedFilters.analysisType]}_${buildPipeAnalysisFileDate()}`,
         sheetNameArray: ["관로분석 현황"],
         headerRange,
@@ -225,7 +232,7 @@ export default function PipeAnalysisPopupPage() {
       });
     } catch (error) {
       console.error("관로분석 집계 다운로드 중 오류:", error);
-      alert("관로분석 집계 다운로드 중 오류가 발생했습니다.");
+      alert(resolveErrorMessage(error, "관로분석 집계 다운로드 중 오류가 발생했습니다."));
     }
   };
 
@@ -280,6 +287,25 @@ export default function PipeAnalysisPopupPage() {
   );
 
   const useHorizontalScrollTable = appliedFilters.analysisType !== "YEAR";
+  const summaryPageOffset = (summaryCurrentPage - 1) * PIPE_ANALYSIS_SUMMARY_PAGE_SIZE;
+  const pagedRows = useMemo(
+    () =>
+      appliedFilters.analysisType === "YEAR_MATERIAL"
+        ? rows
+        : rows.slice(summaryPageOffset, summaryPageOffset + PIPE_ANALYSIS_SUMMARY_PAGE_SIZE),
+    [appliedFilters.analysisType, rows, summaryPageOffset],
+  );
+  const visibleYearMaterialGroups = useMemo(
+    () =>
+      yearMaterialGroups.slice(
+        summaryPageOffset,
+        summaryPageOffset + PIPE_ANALYSIS_SUMMARY_PAGE_SIZE,
+      ),
+    [summaryPageOffset, yearMaterialGroups],
+  );
+  const summaryTotalCount = appliedFilters.analysisType === "YEAR_MATERIAL"
+    ? yearMaterialGroups.length
+    : rows.length;
 
   const sggOptions = useMemo(
     () =>
@@ -290,18 +316,18 @@ export default function PipeAnalysisPopupPage() {
   );
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <main className="sn-popup-page">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">관로분석</h1>
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">관로분석</h1>
       </header>
 
-      <section className="overflow-y-auto p-4">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
+      <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-slate-700">시도</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">시도</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.ctpvCd}
               disabled={scope.ctpvLocked}
               onChange={(event) =>
@@ -323,9 +349,9 @@ export default function PipeAnalysisPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">시군구</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.sggCd}
               disabled={scope.sggLocked}
               onChange={(event) =>
@@ -346,9 +372,9 @@ export default function PipeAnalysisPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">처리구역</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">처리구역</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.swtrmtZoneNm}
               onChange={(event) =>
                 setDraftFilters((current) => ({
@@ -366,9 +392,9 @@ export default function PipeAnalysisPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">분석구분</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">분석구분</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.analysisType}
               onChange={(event) =>
                 setDraftFilters((current) => ({
@@ -410,11 +436,8 @@ export default function PipeAnalysisPopupPage() {
         {appliedFilters.analysisType === "YEAR_MATERIAL" ? (
           <>
             <div className="card-header">
-              <h3 className="hidden">
-                寃쎄낵?꾨룄&?ъ쭏 愿€濡쒗쁽??  珥?{yearMaterialGroups.length.toLocaleString("ko-KR")}嫄?
-              </h3>
               <h3 className="text-2xl font-medium text-label">
-                {resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 관로현황 총 {yearMaterialGroups.length.toLocaleString("ko-KR")}건
+                {resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 관로현황 {summaryTotalCount.toLocaleString("ko-KR")}건
               </h3>
             </div>
             <div className="card !p-0r !m-[1.2rem] overflow-x-auto">
@@ -424,7 +447,7 @@ export default function PipeAnalysisPopupPage() {
                     {headList.map((head) => (
                       <TableHead
                         key={head.id}
-                        className={`border border-border bg-[#eaf3fb] px-4 py-[1.2rem] text-[1.3rem] font-medium text-[#647784] ${
+                        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"
                         }`}
                       >
@@ -434,8 +457,8 @@ export default function PipeAnalysisPopupPage() {
                   </TableRow>
                 </TableHeader>
                 <TableBody className="text-center">
-                  {yearMaterialGroups.length > 0 ? (
-                    yearMaterialGroups.flatMap((group) =>
+                  {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 ? (
@@ -467,7 +490,7 @@ export default function PipeAnalysisPopupPage() {
                               <TableCell
                                 key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}-${column.key}`}
                                 className={`border border-border px-2 py-[1.2rem] text-right text-[1.3rem] ${
-                                  isClickable ? "cursor-pointer font-semibold text-blue-700 underline underline-offset-2" : ""
+                                  isClickable ? "cursor-pointer font-semibold text-primary underline underline-offset-2" : ""
                                 }`}
                                 onClick={() => {
                                   if (isClickable) {
@@ -484,14 +507,24 @@ export default function PipeAnalysisPopupPage() {
                     )
                   ) : (
                     <TableRow>
-                      <TableCell colSpan={headList.length} className="h-24 border border-border text-center text-[1.3rem] text-gray-500">
-                        議고쉶??寃곌낵媛€ ?놁뒿?덈떎.
+                      <TableCell colSpan={headList.length} className="h-24 border border-border text-center text-[1.3rem] text-label">
+                        조회 결과가 없습니다.
                       </TableCell>
                     </TableRow>
                   )}
                 </TableBody>
               </Table>
             </div>
+            {yearMaterialGroups.length > PIPE_ANALYSIS_SUMMARY_PAGE_SIZE ? (
+              <div className="flex justify-center">
+                <UiPageNations
+                  total={yearMaterialGroups.length}
+                  cur={summaryCurrentPage}
+                  pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
+                  onPageChange={setSummaryCurrentPage}
+                />
+              </div>
+            ) : null}
           </>
         ) : null}
 
@@ -499,21 +532,26 @@ export default function PipeAnalysisPopupPage() {
           className={appliedFilters.analysisType === "YEAR_MATERIAL"
             ? "hidden"
             : useHorizontalScrollTable
-              ? "[&>div.relative.w-full]:overflow-x-auto [&>div.relative.w-full]:overflow-y-visible"
+              ? "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")}건`
           }
-          tableData={rows}
+          tableData={pagedRows}
           headlist={headList}
-          pageSize={Math.max(rows.length, 1)}
+          pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
           total={rows.length}
-          cellClick={(index, columnId) => handleCellClick(index, columnId)}
-          onPageChange={() => undefined}
-          curPage={1}
+          cellClick={(index, columnId) =>
+            handleCellClick(
+              typeof index === "number" ? index + summaryPageOffset : index,
+              columnId,
+            )}
+          onPageChange={setSummaryCurrentPage}
+          curPage={summaryCurrentPage}
           widthFixed={!useHorizontalScrollTable}
+          isHideCount={true}
           cellClassName={(row, columnId) =>
             !row.__isNoZone && row.__cellFilters[columnId]
               ? "cursor-pointer font-semibold text-blue-700 underline underline-offset-2"
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
index 0e2ec3780..6ddb8fd98 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
@@ -46,6 +46,8 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic
   };
 
   const { BIZ_SE_CD, BIZ_TY_CD } = useStore();
+  const requestMngInstCd = String(featureData?.mng_inst_cd ?? featureData?.mngInstCd ?? "").trim();
+  const requestFcltMngNo = String(featureData?.fclt_mng_no ?? featureData?.fcltMngNo ?? "").trim();
 
   // 마운트 및 업데이트 시 API 호출
 
@@ -53,9 +55,18 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic
     if (featureData) {
       setFormData(featureData);
     }
+  }, [featureData]);
+
+  useEffect(() => {
+    if (!requestMngInstCd || !requestFcltMngNo) {
+      setInspectionData([]);
+      setCleaningData([]);
+      setRepairData([]);
+      return;
+    }
 
     const fetchAll = async () => {
-      const operationData = await getData(`v1/bizInfo/bizByFclt?mngInstCd=${featureData?.mng_inst_cd}&fcltMngNo=${featureData?.fclt_mng_no}&page=0&size=1`);
+      const operationData = await getData(`v1/bizInfo/bizByFclt?mngInstCd=${requestMngInstCd}&fcltMngNo=${requestFcltMngNo}&page=0&size=1`);
 
       let inspectionArr: operationDataType[] = [];
       let cleaningArr: operationDataType[] = [];
@@ -104,8 +115,13 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic
       setCleaningData(cleaningArr);
       setRepairData(repairArr);
     };
-    fetchAll();
-  }, [featureData]);
+    fetchAll().catch((error) => {
+      console.error("운영 이력 조회 실패:", error);
+      setInspectionData([]);
+      setCleaningData([]);
+      setRepairData([]);
+    });
+  }, [BIZ_SE_CD, BIZ_TY_CD, requestFcltMngNo, requestMngInstCd]);
 
   // 폼 데이터가 변경될 때 호출될 핸들러
   const handleFormDataChange = (newFormData: any) => {
@@ -160,4 +176,4 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic
   )
 }
 
-export default MsSwagePpl
\ No newline at end of file
+export default MsSwagePpl
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 b02977a09..139af3f6c 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/SwtrmtPrcsZoneAnalysis.tsx
@@ -33,9 +33,9 @@ const metricGroups: {
   title: string;
   field: keyof SwtrmtPrcsZoneAnalysisMetric;
 }[] = [
-  { title: "평균매설년도(년)", field: "avgInstlYear" },
-  { title: "최장매설년도(년)", field: "oldestInstlYear" },
-  { title: "최신매설년도(년)", field: "latestInstlYear" },
+  { title: "평균경과년도(년)", field: "avgInstlYear" },
+  { title: "최장경과년도(년)", field: "oldestInstlYear" },
+  { title: "최신경과년도(년)", field: "latestInstlYear" },
 ];
 
 const MetricVerticalGrid = ({
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
index aba8d2eed..eab5b6e9d 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
@@ -1,9 +1,9 @@
-import {useState, useEffect} from 'react';
-import { getData } from '@/components/lib/api';
+import { useState, useEffect } from "react";
 import moment from "moment";
+import { getData } from "@/components/lib/api";
 
 export type TInftwtAnls = {
-  inftwtAnlsSn:number;
+  inftwtAnlsSn: number;
   aplcnYm: string;
   ctpvCd: string;
   sggCd: string;
@@ -15,18 +15,20 @@ export type TInftwtAnls = {
   atflMpngNm: string;
   atflOilqNm: string;
   atflNm: string;
-  drtwSwtcRt:number;
+  drtwSwtcRt: number;
   anlsInfo: string;
   scsYn: string;
 };
+
 export type TInftwtAnlsRslt = {
   inftwtAnlsSn: number;
   pplMngNo: string;
   anlsTm: string;
-  predcOilq:number;
-}
+  predcOilq: number;
+};
+
 export type TRdiiAnls = {
-  rainInfwtAnlsSn:number;
+  rainInfwtAnlsSn: number;
   aplcnYm: string;
   ctpvCd: string;
   sggCd: string;
@@ -38,234 +40,259 @@ export type TRdiiAnls = {
   atflMpngNm: string;
   atflRainNm: string;
   atflNm: string;
-  drtwSwtcRt:number;
+  drtwSwtcRt: number;
   anlsInfo: string;
   scsYn: string;
-  srcNm: string; // 출처이름
+  srcNm: string;
 };
+
 export type TRdiiAnlsRslt = {
   rainInfwtAnlsSn: number;
   pplMngNo: string;
   anlsTm: string;
-  predcOilq:number;
-  minq:number;
-}
+  predcOilq: number;
+  minq: number;
+};
+
 export type TOilqData = {
-  inftwtAnlsSn: number; // 침입수분석 일련번호
-  pplMngNo: string; // 관로관리번호 
-  mtrngDt: string; // 계측일시
-  oilq: number; // 유량
-}
+  inftwtAnlsSn: number;
+  pplMngNo: string;
+  mtrngDt: string;
+  oilq: number;
+};
+
 export type TRainData = {
   rainInfwtAnlsSn: number;
   mtrngDt: string;
-  amrf: number; // 강우량
-}
+  amrf: number;
+};
 
 function roundTo(n: number, digits: number): number {
   const factor = Math.pow(10, digits);
   return Math.round(n * factor) / factor;
 }
 
-const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string, hidden?: boolean }[] => {
-    const yyyymms1 : { text: string; val: string; hidden?: boolean }[] = yyyymms.map(dateStr => {
-      const year = dateStr.slice(0, 4);
-      const month = dateStr.slice(4, 6);
-      return {
-        text: `${year}-${month}`,
-        val: dateStr
-      };
-    });
-    yyyymms1.unshift({ val: '0', text: '선택', hidden: true });
-    return yyyymms1;
-};
-const selectAplcnYms = async(gubun:string) => { // 상수사용월
-    try {
-    const queryString = '';
-    const result = await getData(`v1/${gubun}/aplcnYm${queryString ? `?${queryString}` : ''}`);
-    if (result && result.length > 0) {
-        return getOptionsAplcnYm(result);
-    }
-    } catch (error) {
-    console.error(error);
-    }
+const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string; hidden?: boolean }[] => {
+  const mapped: { text: string; val: string; hidden?: boolean }[] = yyyymms.map((dateStr) => ({
+    text: `${dateStr.slice(0, 4)}-${dateStr.slice(4, 6)}`,
+    val: dateStr,
+  }));
+  mapped.unshift({ val: "0", text: "선택", hidden: true });
+  return mapped;
 };
 
-export const useAplcnYms = (gubun:string) => {
-  const [data, setData] = useState<{ text: string; val: string }[]>([]);
+const selectAplcnYms = async (gubun: string) => {
+  if (!gubun) return [];
+
+  try {
+    const result = await getData(`v1/${gubun}/aplcnYm`);
+    if (Array.isArray(result) && result.length > 0) {
+      return getOptionsAplcnYm(result);
+    }
+  } catch {
+    return [];
+  }
+
+  return [];
+};
+
+export const useAplcnYms = (gubun: string) => {
+  const [data, setData] = useState<{ text: string; val: string; hidden?: boolean }[]>([]);
 
   useEffect(() => {
-    const fetch = async (gubun:string) => {
+    if (!gubun) {
+      setData([]);
+      return;
+    }
+
+    const fetch = async () => {
       const result = await selectAplcnYms(gubun);
-      if (result) setData(result);
+      setData(result ?? []);
     };
-    fetch(gubun);
+
+    void fetch();
   }, [gubun]);
 
   return data;
 };
-export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number, hidden?: boolean }[] => {
-  const options : { text: string; val: number; hidden?: boolean }[] = anlsArr.map(anls => ({
+
+export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number; hidden?: boolean }[] => {
+  const options: { text: string; val: number; hidden?: boolean }[] = anlsArr.map((anls) => ({
     text: anls.anlsInfo,
     val: anls.inftwtAnlsSn,
   }));
-  options.unshift({ val: 0, text: '선택', hidden: true });
+  options.unshift({ val: 0, text: "선택", hidden: true });
   return options;
 };
 
-export const selectInftwtAnls = async(aplcnYm:string) => { // 침입수분석 
+export const selectInftwtAnls = async (aplcnYm: string) => {
   try {
-    const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : '';
-    const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
+    const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : "";
+    const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ""}`);
     if (result && result.numberOfElements > 0) {
-        return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
+      return result.content;
+    }
+  } catch {
+    return [];
   }
+
+  return [];
 };
-export const getChartDataInftwtAnlsRslt = (arr: TInftwtAnlsRslt[]): { label: string; val: number }[] => {
-  const options = arr.map(anlsRslt => ({
+
+export const getChartDataInftwtAnlsRslt = (arr: TInftwtAnlsRslt[]) => {
+  return arr.map((anlsRslt) => ({
     label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("HH시"),
     val: roundTo(anlsRslt.predcOilq, 2),
   }));
-  return options;
 };
-export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과
+
+export const selectInftwtAnlsRslt = async (inftwtAnlsSn: number, pplMngNo: string) => {
   try {
-    if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
-      console.warn("inftwtAnlsSn or pplMngNo is not provided");
-      return [];
-    }
+    if (!inftwtAnlsSn || !pplMngNo) return [];
     const result = await getData(`v1/inftwtAnlsRslt/ppl/${inftwtAnlsSn}/${pplMngNo}`);
     if (result && result.numberOfElements > 0) {
-        return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
+      return result.content;
+    }
+  } catch {
+    return [];
   }
+
+  return [];
 };
-export const getChartDataOilq = (arr: TOilqData[]): { label: string; val: number }[] => {
-  const options = arr.map(anlsRslt => ({
+
+export const getChartDataOilq = (arr: TOilqData[]) => {
+  return arr.map((anlsRslt) => ({
     label: anlsRslt.mtrngDt,
     val: roundTo(anlsRslt.oilq, 2),
   }));
-  return options;
-};
-export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string) => { // 유량
-  try {
-    if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
-      console.warn("inftwtAnlsSn or pplMngNo is not provided");
-      return [];
-    }
-    const result = await getData(`v1/inftwtAnlsRslt/oilqPpl/${inftwtAnlsSn}/${pplMngNo}`);
-    if (result && result.numberOfElements > 0) {
-        return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
-  }
-};
-export const selectPplInftwtQty = async(inftwtAnlsSn:number, pplMngNo:string) => { // 침입수량
-  try {
-    if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
-      console.warn("inftwtAnlsSn or pplMngNo is not provided");
-      return [];
-    }
-    const result = await getData(`v1/inftwtAnlsRslt/pplInftwtQty/${inftwtAnlsSn}/${pplMngNo}`);
-    if (result.length > 0) {
-        return result[0].avg_day_flow;
-    } else {
-      return 0; // 데이터가 없을 경우 0 반환
-    }
-  } catch (error) {
-    console.error(error);
-  }
-};
-//----------
-export const selectPplRdiiQty = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // rdii값
-  try {
-    if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) {
-      console.warn("rainInfwtAnlsSn or pplMngNo is not provided");
-      return [];
-    }
-    const result = await getData(`v1/rdiiAnlsRslt/pplRdiiQty/${rainInfwtAnlsSn}/${pplMngNo}`);
-    if (result?.sustaintime > 0) {
-        return result;
-    } 
-  } catch (error) {
-    console.error(error);
-  }
 };
 
-export const getOptionsRdiiAnlsInfo = (anlsArr: TRdiiAnls[]): { text: string; val: number, hidden?: boolean }[] => {
-  const options : { text: string; val: number; hidden?: boolean }[] = anlsArr.map(anls => ({
+export const selectOilq = async (inftwtAnlsSn: number, pplMngNo: string) => {
+  try {
+    if (!inftwtAnlsSn || !pplMngNo) return [];
+    const result = await getData(`v1/inftwtAnlsRslt/oilqPpl/${inftwtAnlsSn}/${pplMngNo}`);
+    if (result && result.numberOfElements > 0) {
+      return result.content;
+    }
+  } catch {
+    return [];
+  }
+
+  return [];
+};
+
+export const selectPplInftwtQty = async (inftwtAnlsSn: number, pplMngNo: string) => {
+  try {
+    if (!inftwtAnlsSn || !pplMngNo) return 0;
+    const result = await getData(`v1/inftwtAnlsRslt/pplInftwtQty/${inftwtAnlsSn}/${pplMngNo}`);
+    if (Array.isArray(result) && result.length > 0) {
+      return result[0].avg_day_flow;
+    }
+  } catch {
+    return 0;
+  }
+
+  return 0;
+};
+
+const buildPplMngNoCandidates = (pplMngNo: string) => {
+  const normalized = String(pplMngNo ?? "").trim();
+  if (!normalized) return [];
+  const withoutPrefix = normalized.replace(/^L/, "");
+  const withPrefix = withoutPrefix ? `L${withoutPrefix}` : "";
+  return Array.from(new Set([normalized, withPrefix, withoutPrefix].filter(Boolean)));
+};
+
+export const selectPplRdiiQty = async (rainInfwtAnlsSn: number, pplMngNo: string) => {
+  if (!rainInfwtAnlsSn || !pplMngNo) return null;
+
+  for (const candidate of buildPplMngNoCandidates(pplMngNo)) {
+    try {
+      const result = await getData(`v1/rdiiAnlsRslt/pplRdiiQty/${rainInfwtAnlsSn}/${candidate}`);
+      if (result) {
+        return result;
+      }
+    } catch {
+      // resultOnly mode fallback candidates should not raise console noise
+    }
+  }
+
+  return null;
+};
+
+export const getOptionsRdiiAnlsInfo = (anlsArr: TRdiiAnls[]): { text: string; val: number; hidden?: boolean }[] => {
+  const options: { text: string; val: number; hidden?: boolean }[] = anlsArr.map((anls) => ({
     text: anls.anlsInfo,
     val: anls.rainInfwtAnlsSn,
   }));
-  options.unshift({ val: 0, text: '선택', hidden: true });
+  options.unshift({ val: 0, text: "선택", hidden: true });
   return options;
 };
 
-export const selectRdiiAnls = async(aplcnYm:string) => { // 침입수분석 
+export const selectRdiiAnls = async (aplcnYm: string) => {
   try {
-    const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : '';
-    const result = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`);
+    const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : "";
+    const result = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ""}`);
     if (result && result.numberOfElements > 0) {
-        return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
+      return result.content;
+    }
+  } catch {
+    return [];
   }
+
+  return [];
 };
-export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; lineVal0: number, barVal0:number }[] => {
-  const options = arr.map(anlsRslt => ({
+
+export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]) => {
+  return arr.map((anlsRslt) => ({
     label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"),
     lineVal0: roundTo(anlsRslt.predcOilq, 2),
-    barVal0: 0
+    barVal0: 0,
   }));
-  return options;
 };
-export const getChartDataRdiiAnlsRsltMinq = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => {
-  const options = arr.map(anlsRslt => ({
+
+export const getChartDataRdiiAnlsRsltMinq = (arr: TRdiiAnlsRslt[]) => {
+  return arr.map((anlsRslt) => ({
     label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"),
     val: roundTo(anlsRslt.minq, 2),
   }));
-  return options;
 };
-export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // RDII분석 결과
-  try {
-    if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) {
-      console.warn("RdiiAnlsSn or pplMngNo is not provided");
-      return [];
-    }
-    const result = await getData(`v1/rdiiAnlsRslt/ppl/${rainInfwtAnlsSn}/${pplMngNo}`);
-    if (result && result.numberOfElements > 0) {
+
+export const selectRdiiAnlsRslt = async (rainInfwtAnlsSn: number, pplMngNo: string) => {
+  if (!rainInfwtAnlsSn || !pplMngNo) return [];
+
+  for (const candidate of buildPplMngNoCandidates(pplMngNo)) {
+    try {
+      const result = await getData(`v1/rdiiAnlsRslt/ppl/${rainInfwtAnlsSn}/${candidate}`);
+      if (result && result.numberOfElements > 0) {
         return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
-  }
-};
-export const selectRainData = async(rainInfwtAnlsSn:number) => { // 강우데이터
-  try {
-    if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0)) {
-      console.warn("RdiiAnlsSn or pplMngNo is not provided");
-      return [];
+      }
+    } catch {
+      // resultOnly mode fallback candidates should not raise console noise
     }
+  }
+
+  return [];
+};
+
+export const selectRainData = async (rainInfwtAnlsSn: number) => {
+  try {
+    if (!rainInfwtAnlsSn) return [];
     const result = await getData(`v1/rdiiAnlsRslt/rainData/${rainInfwtAnlsSn}`);
     if (result && result.numberOfElements > 0) {
-        return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
+      return result.content;
+    }
+  } catch {
+    return [];
   }
+
+  return [];
 };
-export const getChartDataRainData = (arr: TRainData[]): { label: string; lineVal0: number, barVal0: number }[] => {
-  const options = arr.map(data => ({
+
+export const getChartDataRainData = (arr: TRainData[]) => {
+  return arr.map((data) => ({
     label: moment(data.mtrngDt, "YYYY-MM-DD HH:mm:ss").format("MM-DD HH시"),
     lineVal0: 0,
-    barVal0: roundTo(data.amrf,2),
+    barVal0: roundTo(data.amrf, 2),
   }));
-  return options;
 };
\ No newline at end of file
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 91495f412..0cbd1e36c 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
@@ -11,11 +11,15 @@ import {
 import { SelectBox } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
 
-import type { TInftwtAnls } from './aplcnYms';
+import type { TInftwtAnls, TInftwtAnlsRslt, TOilqData } from './aplcnYms';
 import * as fn from './aplcnYms';
 
 type ModalOpenProp = {
-  pplMngNo?: string; // 관로관리번호
+  pplMngNo?: string;
+  inftwtAnlsSn?: number;
+  aplcnYm?: string;
+  analysisInfo?: string;
+  resultOnly?: boolean;
 };
 
 type DataType = {
@@ -25,8 +29,13 @@ type DataType = {
 
 const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
 
-const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
-
+const InfilChart = ({
+  pplMngNo = '',
+  inftwtAnlsSn = 0,
+  aplcnYm = '',
+  analysisInfo = '',
+  resultOnly = false,
+}: ModalOpenProp) => {
   const [selectedAplcnYm, setSelectedAplcnYm] = useState('');
   const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
   const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
@@ -42,6 +51,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
 
   const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt');
   const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
+  const isResultOnlyMode = resultOnly && inftwtAnlsSn > 0 && Boolean(normalizedPplMngNo);
 
   const chartForm = CHART_FORM.LINE;
   const chartConfig = {
@@ -53,6 +63,28 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
     return chartData.chartData1.length > 0 || chartData.chartData2.length > 0;
   }, [chartData]);
 
+
+  const calculateFallbackInftwtQty = (
+    inftwtAnlsRslt: TInftwtAnlsRslt[],
+    oilqRows: TOilqData[],
+  ) => {
+    const predcValues = inftwtAnlsRslt
+      .map((item) => Number(item.predcOilq))
+      .filter((value) => Number.isFinite(value));
+    const oilqValues = oilqRows
+      .map((item) => Number(item.oilq))
+      .filter((value) => Number.isFinite(value));
+
+    if (predcValues.length === 0 || oilqValues.length === 0) {
+      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 dailyQty = (avgOilq - avgPredc) * 24;
+    return Math.round(dailyQty / 10) * 10;
+  };
+
   const resetState = () => {
     setSelectedAplcnYm('');
     setInftwtAnlss([]);
@@ -63,6 +95,63 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
     setInftwtQty('0');
   };
 
+  const loadResultChart = async (targetInftwtAnlsSn: number) => {
+    if (!targetInftwtAnlsSn || !normalizedPplMngNo) {
+      setChartData({ chartData1: [], chartData2: [] });
+      setInftwtQty('0');
+      return;
+    }
+
+    try {
+      const [inftwtAnlsRslt, oilq, qty] = await Promise.all([
+        fn.selectInftwtAnlsRslt(targetInftwtAnlsSn, normalizedPplMngNo),
+        fn.selectOilq(targetInftwtAnlsSn, normalizedPplMngNo).catch((err) => {
+          console.error('selectOilq 에러:', err);
+          return [];
+        }),
+        fn.selectPplInftwtQty(targetInftwtAnlsSn, normalizedPplMngNo).catch((err) => {
+          console.error('selectPplInftwtQty 에러:', err);
+          return 0;
+        }),
+      ]);
+
+      setChartData({
+        chartData1: fn.getChartDataInftwtAnlsRslt(inftwtAnlsRslt ?? []),
+        chartData2: fn.getChartDataOilq(oilq ?? []),
+      });
+
+      const fallbackQty = calculateFallbackInftwtQty(inftwtAnlsRslt ?? [], oilq ?? []);
+      const normalizedQty = Number(qty ?? Number.NaN);
+      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,
+        });
+      }
+
+      setInftwtQty(resolvedQty.toLocaleString('ko-KR'));
+    } catch (error) {
+      console.error('침입수 분석결과 차트 조회 중 오류:', error);
+      setChartData({ chartData1: [], chartData2: [] });
+      setInftwtQty('0');
+    }
+  };
+
+  useEffect(() => {
+    if (!isResultOnlyMode) return;
+
+    setSelectedAplcnYm(aplcnYm);
+    setSelectedInftwtAnls(inftwtAnlsSn);
+    setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
+    void loadResultChart(inftwtAnlsSn);
+  }, [aplcnYm, inftwtAnlsSn, isResultOnlyMode, normalizedPplMngNo]);
+
   const handleAplcnYmChange = async (val: string | number) => {
     const selectedValue = String(val);
 
@@ -113,31 +202,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
       return;
     }
 
-    try {
-      const [inftwtAnlsRslt, oilq, qty] = await Promise.all([
-        fn.selectInftwtAnlsRslt(selectedInftwtAnls, normalizedPplMngNo),
-        fn.selectOilq(selectedInftwtAnls, normalizedPplMngNo).catch((err) => {
-          console.error('selectOilq 에러:', err);
-          return [];
-        }),
-        fn.selectPplInftwtQty(selectedInftwtAnls, normalizedPplMngNo).catch((err) => {
-          console.error('selectPplInftwtQty 에러:', err);
-          return 0;
-        }),
-      ]);
-
-      setChartData({
-        chartData1: fn.getChartDataInftwtAnlsRslt(inftwtAnlsRslt ?? []),
-        chartData2: fn.getChartDataOilq(oilq ?? []),
-      });
-
-      const normalizedQty = Number(qty ?? 0);
-      setInftwtQty(normalizedQty.toLocaleString('ko-KR'));
-    } catch (error) {
-      console.error('infilRsltChart 에러:', error);
-      setChartData({ chartData1: [], chartData2: [] });
-      setInftwtQty('0');
-    }
+    await loadResultChart(selectedInftwtAnls);
   };
 
   const renderInfoInput = (label: string, value?: string | number | null) => (
@@ -154,14 +219,56 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
 
   const handleReset = () => {
     resetState();
-  }
+  };
 
-  const renderBody = () => (
-    <div className="text-black">
-      <div className="mb-4 flex items-start justify-between">
-        <div className="text-[18px] font-semibold text-[#111827]" />
+  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>
+          </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>
+            </div>
+          </div>
+        </div>
       </div>
 
+      <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
+        {hasChartData ? (
+          <MainChart
+            chartConfig={chartConfig}
+            chartForm={chartForm}
+            chartData={chartData}
+            chartTitle={'침입수량 그래프'}
+            yFieldText="유량(m³/h)"
+            yFieldText2=""
+          />
+        ) : (
+          <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
+            데이터가 없습니다.
+          </div>
+        )}
+      </div>
+    </section>
+  );
+
+  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">
@@ -216,60 +323,14 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
           </div>
         </section>
 
-        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
-          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
-
-          <div className="mb-6 grid grid-cols-2 gap-5">
-            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
-              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
-                {/* <span className="text-[14px] leading-none">●</span> */}
-                <span>상수사용량 적용연월</span>
-              </div>
-              <div className="text-[20px] font-extrabold text-[#222]">
-                {selectedAplcnYm ? moment(selectedAplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
-              </div>
-            </div>
-
-            <div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
-              <div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
-                {/* <span className="text-[14px] leading-none">●</span> */}
-                <span>침입수량 산정결과</span>
-              </div>
-              <div className="grid grid-cols-[1fr_auto] items-center gap-7 text-[#222]">
-                <span className="text-[16px] text-[#666]">침입수량</span>
-                <div className='w-[66px] flex items-end justify-start gap-2'>
-                    <span className="text-[20px] font-extrabold">{inftwtQty}</span>
-                    <span className="pb-[2px] text-[16px]">m³/d</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
-            {hasChartData ? (
-              <MainChart
-                chartConfig={chartConfig}
-                chartForm={chartForm}
-                chartData={chartData}
-                chartTitle={'침입수량 그래프'}
-                yFieldText="유량(m³/h)"
-                yFieldText2=""
-              />
-            ) : (
-              <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
-                데이터가 없습니다.
-              </div>
-            )}
-          </div>
-        </section>
+        {renderResultPanel()}
       </div>
     </div>
   );
 
   return (
-    <div className="min-h-dvh bg-white p-4">
-      <h1 className="mb-3 text-2xl font-semibold text-gray-900">침입수 분석</h1>
-      {renderBody()}
+    <div className="min-h-dvh bg-white p-3">
+      {isResultOnlyMode ? renderResultPanel() : renderDefaultBody()}
     </div>
   );
 };
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index ec1cec8b1..3b9d412d1 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
@@ -1,21 +1,25 @@
-'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';
+} from "@common/business_components";
+import { SelectBox } from "@common/business_components/ui";
+import { Button, Input, Label } from "@common/components";
 
-import type { TRdiiAnls } from './aplcnYms';
-import * as fn from './aplcnYms';
+import type { TRdiiAnls } from "./aplcnYms";
+import * as fn from "./aplcnYms";
 
 type ModalOpenProp = {
-  pplMngNo?: string; // 관로관리번호
+  pplMngNo?: string;
+  rainInfwtAnlsSn?: number;
+  aplcnYm?: string;
+  analysisInfo?: string;
+  resultOnly?: boolean;
 };
 
 type LineBarChartData = {
@@ -24,112 +28,77 @@ type LineBarChartData = {
   barVal0: number;
 };
 
-const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }];
+const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: "선택" }];
 
-const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
+const normalizePplMngNo = (value: string) => {
+  const trimmed = String(value ?? "").trim();
+  if (!trimmed) return "";
+  return trimmed.startsWith("L") ? trimmed : `L${trimmed}`;
+};
 
-  const [aplcnYm, setAplcnYm] = useState('');
+const RdiiChart = ({
+  pplMngNo = "",
+  rainInfwtAnlsSn = 0,
+  aplcnYm = "",
+  analysisInfo = "",
+  resultOnly = false,
+}: ModalOpenProp) => {
+  const [selectedAplcnYm, setSelectedAplcnYm] = useState("");
   const [rdiiAnlss, setRdiiAnlss] = useState<TRdiiAnls[]>([]);
   const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>(
     INITIAL_ANALYSIS_OPTIONS,
   );
-  const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null); // 강우유입수분석정보
-  const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(0);// 강우유입수분석 정보 선택시 사용
+  const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null);
+  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');// 총체적 m³/mm
+  const [rdiiQty, setRdiiQty] = useState<string>("0");
+  const [rainTotal, setRainTotal] = useState<string>("0");
+  const [totalVolume, setTotalVolume] = useState<string>("0");
 
-  const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기
-  const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : '';
+  const normalizedPplMngNo = normalizePplMngNo(pplMngNo);
+  const isResultOnlyMode = resultOnly && rainInfwtAnlsSn > 0 && Boolean(normalizedPplMngNo);
+  const aplcnYms = fn.useAplcnYms(isResultOnlyMode ? "" : "rdiiAnlsRslt");
 
   const chartForm = CHART_FORM.LINEBAR2;
   const chartConfig = {
     barVal0: {
-      label: '강수량',
-      color: '#33AAFF',
+      label: "강수량",
+      color: "#33AAFF",
     },
     lineVal0: {
-      label: 'RDII',
-      color: '#FF0000',
+      label: "RDII",
+      color: "#FF0000",
     },
   } as ChartConfig;
 
   const hasChartData = useMemo(() => chartData.length > 0, [chartData]);
 
   const resetState = () => {
-    setAplcnYm(''); // 상수사용월 초기화
-    setRdiiAnlss([]); // 강우유입수분석 초기화
-    setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS); // 강우유입수분석정보 초기화
-    setRdiiAnls(null); // 강우유입수분석정보 초기화
-    setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
-    setChartData([]);
-    setRdiiQty('0');  // 강우유입수량 초기화
-    setRainTotal('0');// 적용강우량 초기화
-    setTotalVolume('0');// 총체적 m³/mm 초기화
-  };
-
-  const handleAplcnYmChange = async (val: string | number) => {
-    const selectedValue = String(val);
-
-    setAplcnYm(selectedValue);
+    setSelectedAplcnYm("");
     setRdiiAnlss([]);
+    setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
     setRdiiAnls(null);
-    setRainInfwtAnlsSn(0);
+    setSelectedRainInfwtAnlsSn(0);
     setChartData([]);
-    setRdiiQty('0');
-    setRainTotal('0');
-    setTotalVolume('0');
-
-    if (!selectedValue || selectedValue === '0') {
-      setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
-      return;
-    }
-
-    try {
-      const data = await fn.selectRdiiAnls(selectedValue); // 상수사용월 변경시 분석 정보 리스트 가져오기
-      const list = data ?? [];
-      setRdiiAnlss(list);
-      setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(list));
-    } catch (error) {
-      console.error('selectRdiiAnls 에러:', error);
-      setRdiiAnlss([]);
-      setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
-    }
+    setRdiiQty("0");
+    setRainTotal("0");
+    setTotalVolume("0");
   };
 
-  const handleRdiiAnlsSnChange = (val: string | number) => {
-    const selectedValue = Number(val);
-
-    setRainInfwtAnlsSn(selectedValue);
-    setChartData([]);
-    setRdiiQty('0');
-    setRainTotal('0');
-    setTotalVolume('0');
-
-    if (selectedValue === 0) {
-      setRdiiAnls(null);
-      return;
-    }
-
-    const selectedAnls = rdiiAnlss.find((anls) => anls.rainInfwtAnlsSn === selectedValue) ?? null;
-    setRdiiAnls(selectedAnls);
-  };
-
-  const fetchFilteredData = async () => {
-    if (!rainInfwtAnlsSn || !normalizedPplMngNo) {
+  const loadResultChart = async (targetRainInfwtAnlsSn: number) => {
+    if (!targetRainInfwtAnlsSn || !normalizedPplMngNo) {
       setChartData([]);
-      setRdiiQty('0');
-      setRainTotal('0');
-      setTotalVolume('0');
+      setRdiiQty("0");
+      setRainTotal("0");
+      setTotalVolume("0");
       return;
     }
 
     try {
       const [rsltData, rainData, qtyData] = await Promise.all([
-        fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, normalizedPplMngNo),
-        fn.selectRainData(rainInfwtAnlsSn),
-        fn.selectPplRdiiQty(rainInfwtAnlsSn, normalizedPplMngNo),
+        fn.selectRdiiAnlsRslt(targetRainInfwtAnlsSn, normalizedPplMngNo),
+        fn.selectRainData(targetRainInfwtAnlsSn),
+        fn.selectPplRdiiQty(targetRainInfwtAnlsSn, normalizedPplMngNo),
       ]);
 
       const rsltDataFormatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []);
@@ -143,7 +112,7 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
         }
       });
 
-      setChartData(rsltDataFormatted);// 차트 데이터 설정
+      setChartData(rsltDataFormatted);
 
       const avgRdii = Number(qtyData?.rdiih ?? 0);
       const appliedRainfall = Number(qtyData?.raintotal ?? 0);
@@ -152,18 +121,80 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
           ? Math.round(avgRdii * Number(qtyData?.sustaintime ?? 0) / qtyData.raintotal)
           : 0;
 
-      setRdiiQty(Math.round(avgRdii * 24).toLocaleString('ko-KR'));
-      setRainTotal(appliedRainfall.toLocaleString('ko-KR'));
-      setTotalVolume(rdiiPerRainfall.toLocaleString('ko-KR'));
+      setRdiiQty(Math.round(avgRdii * 24).toLocaleString("ko-KR"));
+      setRainTotal(appliedRainfall.toLocaleString("ko-KR"));
+      setTotalVolume(rdiiPerRainfall.toLocaleString("ko-KR"));
     } catch (error) {
-      console.error('rdiiRsltChart 에러:', error);
+      console.error("RDII 분석결과 차트 조회 중 오류:", error);
       setChartData([]);
-      setRdiiQty('0');
-      setRainTotal('0');
-      setTotalVolume('0');
+      setRdiiQty("0");
+      setRainTotal("0");
+      setTotalVolume("0");
     }
   };
 
+  useEffect(() => {
+    if (!isResultOnlyMode) return;
+
+    setSelectedAplcnYm(aplcnYm);
+    setSelectedRainInfwtAnlsSn(rainInfwtAnlsSn);
+    setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
+    void loadResultChart(rainInfwtAnlsSn);
+  }, [aplcnYm, isResultOnlyMode, normalizedPplMngNo, rainInfwtAnlsSn]);
+
+  const handleAplcnYmChange = async (val: string | number) => {
+    const selectedValue = String(val);
+
+    setSelectedAplcnYm(selectedValue);
+    setRdiiAnlss([]);
+    setRdiiAnls(null);
+    setSelectedRainInfwtAnlsSn(0);
+    setChartData([]);
+    setRdiiQty("0");
+    setRainTotal("0");
+    setTotalVolume("0");
+
+    if (!selectedValue || selectedValue === "0") {
+      setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS);
+      return;
+    }
+
+    const data = await fn.selectRdiiAnls(selectedValue);
+    const list = data ?? [];
+    setRdiiAnlss(list);
+    setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(list));
+  };
+
+  const handleRdiiAnlsSnChange = (val: string | number) => {
+    const selectedValue = Number(val);
+
+    setSelectedRainInfwtAnlsSn(selectedValue);
+    setChartData([]);
+    setRdiiQty("0");
+    setRainTotal("0");
+    setTotalVolume("0");
+
+    if (selectedValue === 0) {
+      setRdiiAnls(null);
+      return;
+    }
+
+    const selectedAnls = rdiiAnlss.find((anls) => anls.rainInfwtAnlsSn === selectedValue) ?? null;
+    setRdiiAnls(selectedAnls);
+  };
+
+  const fetchFilteredData = async () => {
+    if (!selectedRainInfwtAnlsSn || !normalizedPplMngNo) {
+      setChartData([]);
+      setRdiiQty("0");
+      setRainTotal("0");
+      setTotalVolume("0");
+      return;
+    }
+
+    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]">
@@ -172,166 +203,128 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
       <Input
         className="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white px-3 text-xl text-[#2b3440]"
         placeholder=""
-        value={value ?? ''}
+        value={value ?? ""}
         readOnly
       />
     </div>
   );
 
-  const renderBody = () => (
-    <div className="text-black">
-      <div className="mb-4 flex items-start justify-between">
-        <div className="text-[18px] font-semibold text-[#111827]" />
+  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>
+          </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="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>
+            </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>
+  );
+
+  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>
+          <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">강우유입수량 선택 조건</h3>
 
           <div className="rounded-[6px] border border-[#d9dde3] bg-[#eff1f4] px-4 py-6">
             <div className="space-y-3">
               <div className="grid grid-cols-[minmax(0,32%)_minmax(0,68%)] items-center gap-3">
-                <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">
-                  상수사용월:
-                </Label>
+                <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">상수사용월</Label>
                 <SelectBox
                   className="w-full"
                   selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
                   label=""
                   selectArray={aplcnYms}
-                  value={aplcnYm}
+                  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>
+                <Label className="w-auto whitespace-nowrap text-[14px] font-semibold text-[#5c6470]">분석정보:</Label>
                 <SelectBox
                   className="w-full"
                   selectClass="h-[42px] rounded-[5px] border border-[#d7dde5] bg-white text-xl"
                   label=""
                   selectArray={rdiiAnlsInfos}
-                  value={rainInfwtAnlsSn}
+                  value={selectedRainInfwtAnlsSn}
                   onSelectValue={handleRdiiAnlsSnChange}
                 />
               </div>
 
-              {renderInfoInput('오수전환율:', rdiiAnls?.drtwSwtcRt ?? '')}
-              {renderInfoInput('수용가-맨홀 매칭:', rdiiAnls?.atflMpngNm ?? '')}
-              {renderInfoInput('관망도 파일명:', rdiiAnls?.atflInpNm ?? '')}
-              {renderInfoInput('강우 파일명:', rdiiAnls?.atflRainNm ?? '')}
-              {renderInfoInput('RTK계수 출처:', rdiiAnls?.srcNm ?? '')}
+              {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>
+            <Button size="lg" onClick={fetchFilteredData}>조회</Button>
             &nbsp;&nbsp;
-            <Button size="lg" color="gray" onClick={resetState}>
-              초기화
-            </Button>
+            <Button size="lg" color="gray" onClick={resetState}>초기화</Button>
           </div>
         </section>
 
-        <section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
-            <h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
-                강우유입수분석 결과
-            </h3>
-
-            <div className="mb-6 flex gap-5">
-                {/* 좌측 카드 */}
-                <div className="flex min-h-[98px] min-w-0 basis-2/5 grow shrink-[1.4] items-center justify-between rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
-                  <div className="text-[16px] font-bold text-[#ef4444]">
-                      상수사용량 적용연월
-                  </div>
-                  <div className="text-[24px] font-extrabold leading-none text-[#111]">
-                      {aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
-                  </div>
-                </div>
-
-                {/* 우측 카드 */}
-                <div className="flex min-h-[98px] min-w-0 basis-3/5 grow shrink items-center gap-5 rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
-                    {/* 좌측: 제목 (세로 가운데 정렬) */}
-                    <div className="flex min-w-0 basis-[32%] items-center">
-                        <div className="text-[16px] font-bold text-[#ef4444] break-keep">
-                            강우유입수량 분석결과
-                        </div>
-                    </div>
-
-                    {/* 우측: 지표 영역 */}
-                    <div className="flex min-w-0 basis-[68%] flex-col gap-[2px]">
-                        <div className="flex min-w-0 items-center gap-3">
-                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
-                                평균RDII
-                            </div>
-                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                {rdiiQty}
-                            </div>
-                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
-                                m³/d
-                            </div>
-                        </div>
-
-                        <div className="flex min-w-0 items-center gap-3">
-                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
-                                적용 강우량
-                            </div>
-                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                {rainTotal}
-                            </div>
-                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
-                                mm
-                            </div>
-                        </div>
-
-                        <div className="flex min-w-0 items-center gap-3">
-                            <div className="min-w-0 basis-[48%] text-right text-[15px] text-[#555]">
-                                강우량 대비 RDII
-                            </div>
-                            <div className="min-w-0 basis-[32%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                {totalVolume}
-                            </div>
-                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
-                                m³/mm
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
-                {hasChartData ? (
-                <MainChart
-                    chartConfig={chartConfig}
-                    chartForm={chartForm}
-                    chartData={chartData}
-                    chartTitle={'RDII 그래프'}
-                    yFieldText2="강수량(mm)"
-                    yFieldText="유량(m³/h)"
-                />
-                ) : (
-                <div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
-                    데이터가 없습니다.
-                </div>
-                )}
-            </div>
-        </section>
+        {renderResultPanel()}
       </div>
     </div>
   );
 
+  if (isResultOnlyMode) {
+    return <div className="min-h-dvh bg-white p-3">{renderResultPanel()}</div>;
+  }
+
   return (
     <div className="min-h-dvh bg-white p-4">
       <h1 className="mb-3 text-2xl font-semibold text-gray-900">RDII 분석</h1>
-      {renderBody()}
+      {renderDefaultBody()}
     </div>
   );
 };
 
-export default React.memo(RdiiChart);
+export default React.memo(RdiiChart);
\ No newline at end of file
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 36cbb46f6..202f4e338 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
@@ -61,6 +61,11 @@ const linkedFacilityHighlightStyle = new Style({
   zIndex: 9999,
 });
 
+type MngInstOption = {
+  mngInstCd: string;
+  lwrInstNm: string;
+};
+
 const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
   const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
   const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
@@ -80,6 +85,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
   const [chmbrYdnts, setChmbrYdnts] = useState<string>(''); // 로딩 상태
   const linkedFacilityFeatureRef = useRef<any>(null);
   const linkedFacilityOriginalStyleRef = useRef<any>(null);
+  const [mngInstOptions, setMngInstOptions] = useState<MngInstOption[]>([]);
 
   // 🎯 관로관리번호 추출
   const pplMngNo = featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || "";
@@ -87,6 +93,10 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
   const featureId = typeof featureData.getId === 'function'
     ? featureData.getId()
     : featureData.fid;
+  const selectedLayerTypeName = featureData?.values_
+    ? featureData?.id_?.split('.')?.[0]
+    : featureData?.lyrTypeNm;
+  const isPipeFeature = selectedLayerTypeName === 'tb_ms_swage_ppl';
 
   // 🎯 데이터 전처리 메모이제이션
   const processedData = useMemo(() => {
@@ -98,6 +108,90 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     };
   }, [featureData?.values_]);
 
+  useEffect(() => {
+    let isMounted = true;
+
+    if (isPipeFeature) {
+      setMngInstOptions([]);
+      return () => {
+        isMounted = false;
+      };
+    }
+
+    const fetchMngInstOptions = async () => {
+      try {
+        const result = await getData("v1/fcltppl/mngInsts");
+        if (!isMounted) return;
+        const sortedOptions = Array.isArray(result)
+          ? [...result].sort((a, b) =>
+              String(a?.lwrInstNm ?? a?.mngInstCd ?? "").localeCompare(
+                String(b?.lwrInstNm ?? b?.mngInstCd ?? ""),
+                "ko",
+              ),
+            )
+          : [];
+        setMngInstOptions(sortedOptions);
+      } catch (error) {
+        console.error("관리기관 목록 조회 실패:", error);
+        if (isMounted) setMngInstOptions([]);
+      }
+    };
+
+    fetchMngInstOptions();
+    return () => {
+      isMounted = false;
+    };
+  }, [isPipeFeature]);
+
+  const mngInstNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    mngInstOptions.forEach((option) => {
+      const code = String(option.mngInstCd ?? "").trim();
+      if (!code) return;
+      map.set(code, option.lwrInstNm || code);
+    });
+    return map;
+  }, [mngInstOptions]);
+
+  const withMngInstName = (data: any) => {
+    if (!data || typeof data !== "object") return data;
+    const mngInstCd = String(data.mng_inst_cd ?? data.mngInstCd ?? "").trim();
+    if (!mngInstCd) return data;
+    return {
+      ...data,
+      mngInstNm: mngInstNameMap.get(mngInstCd) ?? data.mngInstNm ?? data.mng_inst_nm ?? mngInstCd,
+    };
+  };
+
+  const hasDetailValue = (value: unknown) => {
+    if (value === null || value === undefined) return false;
+    if (typeof value === "string") return value.trim() !== "";
+    return true;
+  };
+
+  const isValidDetailIdentifier = (value: unknown) => {
+    if (typeof value !== "string") return false;
+    const normalizedValue = value.trim();
+    if (!normalizedValue) return false;
+    if (normalizedValue.toLowerCase() === "null") return false;
+    if (normalizedValue.toLowerCase() === "undefined") return false;
+    return true;
+  };
+
+  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]) => {
+      if (hasDetailValue(value)) acc[key] = value;
+      return acc;
+    }, {});
+
+    return {
+      ...(baseData ?? {}),
+      ...meaningfulDetailData,
+    };
+  };
+
   const clearLinkedFacilityHighlight = () => {
     if (linkedFacilityFeatureRef.current) {
       linkedFacilityFeatureRef.current.setStyle(linkedFacilityOriginalStyleRef.current ?? undefined);
@@ -334,7 +428,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         }
 
         // 🎯 기본 데이터 포맷팅
-        const formattedData = formatDisplayData(data);
+        const formattedData = withMngInstName(formatDisplayData(data));
         if (selectedLayerName === '하수관로') {
           const installYmd = data.instl_ymd ?? data.instlYmd;
           formattedData.elapsedYears = getElapsedYearsDisplayText(installYmd);
@@ -352,10 +446,14 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
             setButtonChk(true)
 
             // ✅ codeMapper 사용하여 API 결과도 변환
-            setTableData(codeMapper({
-              layerName: selectedLayerName,
-              data: { ...formattedData }
-            }));
+            {
+              const initialPipeData = withMngInstName(codeMapper({
+                layerName: selectedLayerName,
+                data: { ...formattedData }
+              }));
+              setFetchData(initialPipeData);
+              setTableData(initialPipeData);
+            }
             break;
           case '하수맨홀':
             setButtonChk(true)
@@ -409,28 +507,32 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
 
         // 자체입력정보 API 엔드포인트 선택
         let apiEndpoint = '';
-        const fcltMngNo = featureData?.values_?.fclt_mng_no || featureData?.fcltMngNo || null;
-        const mngInstCd = featureData?.values_?.mng_inst_cd || featureData?.mngInstCd || null;
+        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) {
+        if (apiEndpoint && canRequestDetail) {
           try {
             const result = await getData(apiEndpoint);
 
             if (result) {
-              const processedApiData = codeMapper({
+              const mergedData = mergeDetailData(formattedData, result);
+              const processedApiData = withMngInstName(codeMapper({
                 layerName: selectedLayerName,
-                data: { ...result, ...tableData }
-              });
+                data: mergedData
+              }));
 
               setFetchData(processedApiData);
+              setTableData(processedApiData);
             }
           } catch (apiError) {
-            console.error('API 데이터 로딩 중 오류:', apiError);
+            void apiError;
+            console.warn("Pipe detail fallback kept initial feature data.");
           }
         }
       } catch (error) {
@@ -439,7 +541,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     };
 
     fetchData();
-  }, [featureId, processedData]);
+  }, [featureId, processedData, mngInstNameMap]);
 
   useEffect(() => {
     const layerTypeNm = featureData?.values_
diff --git a/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
new file mode 100644
index 000000000..4f0ff5e15
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
@@ -0,0 +1,347 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { DateMonthPicker, UiTable, downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+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 {
+  RDII_RESULT_ROW_SELECT_MESSAGE,
+  RDII_RESULT_ROW_SELECT_STORAGE_KEY,
+  type RdiiResultRow,
+} from "./rdiiResultTypes";
+
+const RDII_RESULT_PAGE_SIZE = 10;
+
+const RDII_RESULT_HEADLIST = [
+  { 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\n분석정보" },
+  { id: "regDt", title: "분석일자" },
+  { id: "rgtrNm", title: "분석자" },
+  { id: "scsYn", title: "분석성공여부" },
+] as const;
+
+type RdiiResultFilters = {
+  ctpvCd: string;
+  sggCd: string;
+  sggName: string;
+  swtrmtFcltNm: string;
+  aplcnYmFrom: string;
+  aplcnYmTo: string;
+};
+
+const createDefaultAplcnYm = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  return `${year}${month}`;
+};
+
+const DEFAULT_FILTERS: RdiiResultFilters = {
+  ctpvCd: "0",
+  sggCd: "0",
+  sggName: "",
+  swtrmtFcltNm: "",
+  aplcnYmFrom: `${new Date().getFullYear()}01`,
+  aplcnYmTo: createDefaultAplcnYm(),
+};
+
+const postRowSelectMessage = (row: RdiiResultRow) => {
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(
+        RDII_RESULT_ROW_SELECT_STORAGE_KEY,
+        JSON.stringify({
+          row,
+          timestamp: Date.now(),
+        }),
+      );
+    } catch (error) {
+      console.warn("RDII 분석결과 선택 동기화 저장에 실패했습니다.", error);
+    }
+  }
+
+  if (typeof window === "undefined" || !window.opener) return;
+  window.opener.postMessage(
+    {
+      type: RDII_RESULT_ROW_SELECT_MESSAGE,
+      row,
+    },
+    window.location.origin,
+  );
+};
+
+export default function RdiiResultPopupPage() {
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  const [filters, setFilters] = useState<RdiiResultFilters>(DEFAULT_FILTERS);
+  const [selectedSwagePrcsFclt, setSelectedSwagePrcsFclt] = useState("0");
+  const [selectedRow, setSelectedRow] = useState<RdiiResultRow | null>(null);
+  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);
+
+  useEffect(() => {
+    if (ctpv.length === 0) void fetchCtpv();
+    if (sgg.length === 0) void fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
+
+  const fetchRows = useCallback(
+    async (page: number, nextFilters: RdiiResultFilters) => {
+      const queryParams = new URLSearchParams({
+        page: String(page - 1),
+        size: String(RDII_RESULT_PAGE_SIZE),
+        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());
+
+      const response = await getData(`v1/rdiiAnls?${queryParams.toString()}`);
+      const content = Array.isArray(response?.content) ? response.content : [];
+
+      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 sggOption = sgg.find((code) => code.val === item?.sggCd);
+
+          return {
+            ...(formattedItem as Record<string, unknown>),
+            rowNumber: (page - 1) * RDII_RESULT_PAGE_SIZE + index + 1,
+            ctpvNm: ctpvOption ? ctpvOption.text : String(item?.ctpvCd ?? "-"),
+            sggNm: sggOption ? sggOption.text : String(item?.sggCd ?? "-"),
+            scsYn: String(item?.scsYn ?? "N"),
+          } as RdiiResultRow;
+        })
+        .filter((item: RdiiResultRow) => item.scsYn === "Y");
+
+      setRows(nextRows);
+      setTotal(Number(response?.totalElements ?? nextRows.length));
+      setCurrentPage(page);
+    },
+    [ctpv, sgg],
+  );
+
+  const loadRows = useCallback(
+    async (page = 1, nextFilters = filters) => {
+      setIsLoading(true);
+      try {
+        await fetchRows(page, nextFilters);
+      } catch (error) {
+        console.error("RDII 분석결과 목록 조회 중 오류:", error);
+        alert("RDII 분석결과 목록을 불러오지 못했습니다.");
+        setRows([]);
+        setTotal(0);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchRows, filters],
+  );
+
+  useEffect(() => {
+    void loadRows(1, DEFAULT_FILTERS);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSearch = async (page = 1) => {
+    setSelectedIndex(-1);
+    setSelectedRow(null);
+    await loadRows(page, filters);
+  };
+
+  const handleRowClick = (index?: number) => {
+    if (typeof index !== "number") return;
+    const row = rows[index];
+    if (!row) return;
+
+    setSelectedIndex(index);
+    setSelectedRow(row);
+    postRowSelectMessage(row);
+  };
+
+  const handleDownload = async () => {
+    if (!selectedRow?.rainInfwtAnlsSn) {
+      alert("다운로드할 분석결과를 먼저 선택해주세요.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const response = await getData(`v1/rdiiAnlsRslt/ppl/${selectedRow.rainInfwtAnlsSn}`);
+      const excelRows = Array.isArray(response?.content) ? response.content : [];
+
+      await downloadExcelWithKoreanHeaders({
+        data: excelRows as JSON[],
+        fileName: `RDII분석결과_${selectedRow.swtrmtFcltNm}_${selectedRow.aplcnYm}_${selectedRow.rainInfwtAnlsSn}`,
+        sheetNameArray: ["RDII 분석결과"],
+        headerRange: "A1:D1",
+        headerMapping: {
+          rainInfwtAnlsSn: "RDII분석\n일련번호",
+          pplMngNo: "관로\n관리번호",
+          anlsTm: "분석시각",
+          predcOilq: "예측유량\n(m³/h)",
+        },
+      });
+    } catch (error) {
+      console.error("RDII 분석결과 다운로드 중 오류:", error);
+      alert("RDII 분석결과 다운로드 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main className="sn-popup-page">
+      <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_HEADLIST as unknown as { id: string; title: string }[]}
+            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}
+          />
+        </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>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/rdiiResult/rdiiResultTypes.ts b/apps/sn/app/(map-layout)/map/components/rdiiResult/rdiiResultTypes.ts
new file mode 100644
index 000000000..7dc76db34
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/rdiiResult/rdiiResultTypes.ts
@@ -0,0 +1,47 @@
+"use client";
+
+export const RDII_RESULT_ROW_SELECT_MESSAGE = "SN_RDII_RESULT_ROW_SELECT";
+export const RDII_RESULT_OVERLAY_TYPE = "RDII_RESULT";
+export const RDII_RESULT_ROW_SELECT_STORAGE_KEY = "SN_RDII_RESULT_ROW_SELECT_STORAGE";
+
+export type RdiiResultRow = {
+  rowNumber: number;
+  rainInfwtAnlsSn: number;
+  ctpvCd?: string;
+  ctpvNm: string;
+  sggCd?: string;
+  sggNm: string;
+  swtrmtFcltNm: string;
+  aplcnYm: string;
+  drtwSwtcRt?: number | string;
+  srcNm?: string;
+  cntbArea?: number | string;
+  anlsInfo: string;
+  regDt?: string;
+  rgtrNm?: string;
+  scsYn?: string;
+};
+
+export type RdiiResultMapViewPipe = {
+  pplMngNo: string;
+  fcltMngNo: string;
+};
+
+export type RdiiResultMapViewResponse = {
+  analysis: {
+    rainInfwtAnlsSn: number;
+    aplcnYm: string;
+    ctpvCd?: string;
+    sggCd?: string;
+    swtrmtFcltNm?: string;
+    anlsInfo?: string;
+  };
+  focusTargetType: "PIPE_EXTENT";
+  focusTargetName: string;
+  focusLayerType?: "tb_ms_swage_ppl";
+  focusFid?: string;
+  focusFallbackApplied?: boolean;
+  pipeGeometry: Record<string, unknown>;
+  pipes: RdiiResultMapViewPipe[];
+  pipeCount: number;
+};
\ No newline at end of file
diff --git a/apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts b/apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts
new file mode 100644
index 000000000..91b7efcdc
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/rdiiResult/useRdiiResultMap.ts
@@ -0,0 +1,366 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
+import GeoJSON from "ol/format/GeoJSON.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import Stroke from "ol/style/Stroke.js";
+import Style from "ol/style/Style.js";
+
+import { getRawJson } from "@/components/lib/api";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { getSigunguCenter, moveMapToCenter, sidoCenter } from "@common/business_components/ui/map/searchBar/utils";
+
+import {
+  RDII_RESULT_OVERLAY_TYPE,
+  RDII_RESULT_ROW_SELECT_MESSAGE,
+  RDII_RESULT_ROW_SELECT_STORAGE_KEY,
+  type RdiiResultMapViewResponse,
+  type RdiiResultRow,
+} from "./rdiiResultTypes";
+
+type UseRdiiResultMapParams = {
+  gisMaps: MutableRefObject<any | null>;
+  setFeatureData: (value: any) => void;
+  setIsOpen: (value: boolean) => void;
+  setIsSearchModalOpen: (value: boolean) => void;
+};
+
+const RDII_PIPE_LAYER_ID = "SN_RDII_RESULT_PIPE_LAYER";
+const DEFAULT_RESULT_FIT_PADDING: [number, number, number, number] = [120, 120, 120, 120];
+const PROC_SEARCH_EVENT = "SN_INFTWT_PROC_SEARCH";
+
+const pipeStyle = [
+  new Style({
+    stroke: new Stroke({
+      color: "rgba(15, 23, 42, 0.56)",
+      width: 9,
+      lineCap: "round",
+      lineJoin: "round",
+    }),
+    zIndex: 20020,
+  }),
+  new Style({
+    stroke: new Stroke({
+      color: "rgba(255, 255, 255, 0.98)",
+      width: 5,
+      lineCap: "round",
+      lineJoin: "round",
+    }),
+    zIndex: 20021,
+  }),
+  new Style({
+    stroke: new Stroke({
+      color: "rgba(59, 130, 246, 0.98)",
+      width: 2.5,
+      lineCap: "round",
+      lineJoin: "round",
+    }),
+    zIndex: 20022,
+  }),
+];
+
+const getFeatureCollection = (payload: any) => {
+  if (payload?.type === "FeatureCollection") return payload;
+  if (payload?.data?.type === "FeatureCollection") return payload.data;
+  return { type: "FeatureCollection", features: [] };
+};
+
+const normalizeProjectionName = (value: string) => {
+  const trimmed = String(value ?? "").trim();
+  if (!trimmed) return "EPSG:4326";
+  if (trimmed.startsWith("EPSG:")) return trimmed;
+  const match = trimmed.match(/EPSG[:/]{1,2}(\d{4,5})/i) || trimmed.match(/(\d{4,5})$/);
+  return match?.[1] ? `EPSG:${match[1]}` : trimmed;
+};
+
+const resolveFeatureCollectionProjection = (payload: any) => {
+  const featureCollection = getFeatureCollection(payload);
+  const crsName = String(featureCollection?.crs?.properties?.name ?? "").trim();
+  return normalizeProjectionName(crsName || GisApp.TO_PROJ);
+};
+
+const getOverlayFlag = (data: any) =>
+  String(
+    data?.get?.("analysisOverlayType") ??
+      data?.values_?.analysisOverlayType ??
+      data?.analysisOverlayType ??
+      "",
+  ).trim();
+
+const getOverlayBasePplMngNo = (data: any) =>
+  String(
+    data?.get?.("fcltMngNo") ??
+      data?.values_?.fcltMngNo ??
+      data?.values_?.fclt_mng_no ??
+      data?.fcltMngNo ??
+      data?.fclt_mng_no ??
+      "",
+  ).trim();
+
+const getOverlayAnalysisPplMngNo = (data: any) =>
+  String(
+    data?.get?.("pplMngNo") ??
+      data?.values_?.pplMngNo ??
+      data?.pplMngNo ??
+      "",
+  ).trim();
+
+const getOverlayAnalysisSn = (data: any) =>
+  Number(
+    data?.get?.("rainInfwtAnlsSn") ??
+      data?.values_?.rainInfwtAnlsSn ??
+      data?.rainInfwtAnlsSn ??
+      0,
+  );
+
+const getOverlayAplcnYm = (data: any) =>
+  String(
+    data?.get?.("aplcnYm") ??
+      data?.values_?.aplcnYm ??
+      data?.aplcnYm ??
+      "",
+  ).trim();
+
+const getOverlayAnalysisInfo = (data: any) =>
+  String(
+    data?.get?.("analysisInfo") ??
+      data?.values_?.analysisInfo ??
+      data?.analysisInfo ??
+      "",
+  ).trim();
+
+export const useRdiiResultMap = ({
+  gisMaps,
+  setFeatureData,
+  setIsOpen,
+  setIsSearchModalOpen,
+}: UseRdiiResultMapParams) => {
+  const activeResultRowRef = useRef<RdiiResultRow | null>(null);
+  const pipeLayerRef = useRef<VectorLayer<any> | null>(null);
+  const pipeSourceRef = useRef<VectorSource | null>(null);
+  const mapViewCacheRef = useRef<Map<number, RdiiResultMapViewResponse>>(new Map());
+  const [activeMapView, setActiveMapView] = useState<RdiiResultMapViewResponse | null>(null);
+
+  const clearLayers = useCallback(() => {
+    pipeSourceRef.current?.clear?.();
+    pipeLayerRef.current?.changed?.();
+    gisMaps.current?.renderSync?.();
+  }, [gisMaps]);
+
+  const ensurePipeLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (pipeLayerRef.current && pipeSourceRef.current) {
+      return pipeSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 20019,
+    });
+
+    layer.set("id", RDII_PIPE_LAYER_ID);
+    layer.set("lyrNm", "RDII 결과관로");
+    layer.set("lyrTyNm", "tb_ms_swage_ppl");
+    layer.set("clickPsblYn", "Y");
+    layer.setVisible?.(true);
+    map.addLayer(layer);
+
+    pipeLayerRef.current = layer;
+    pipeSourceRef.current = source;
+    return source;
+  }, [gisMaps]);
+
+  const fitToRenderedFeatures = useCallback(() => {
+    const map = gisMaps.current;
+    const pipeExtent = pipeSourceRef.current?.getExtent?.();
+    if (!map || !pipeExtent || pipeExtent.some((value: number) => !Number.isFinite(value))) {
+      return;
+    }
+
+    map.getView?.().fit?.(pipeExtent, {
+      duration: 350,
+      padding: DEFAULT_RESULT_FIT_PADDING,
+      maxZoom: 16,
+      constrainResolution: true,
+      nearest: true,
+    });
+  }, [gisMaps]);
+
+  const moveByRegionCodes = useCallback(
+    (ctpvCd?: string, sggCd?: string) => {
+      const normalizedSggCd = String(sggCd ?? "").trim();
+      if (normalizedSggCd && normalizedSggCd !== "0") {
+        const sigunguCenter = getSigunguCenter(normalizedSggCd);
+        if (sigunguCenter) {
+          moveMapToCenter(gisMaps, sigunguCenter, 12);
+          return true;
+        }
+      }
+
+      const normalizedCtpvCd = String(ctpvCd ?? "").trim();
+      if (normalizedCtpvCd && normalizedCtpvCd !== "0") {
+        const sidoCenterCoordinate = sidoCenter[normalizedCtpvCd.slice(0, 2)];
+        if (sidoCenterCoordinate) {
+          moveMapToCenter(gisMaps, sidoCenterCoordinate, 11);
+          return true;
+        }
+      }
+
+      return false;
+    },
+    [gisMaps],
+  );
+
+  const moveToStableFocus = useCallback(
+    async (mapView: RdiiResultMapViewResponse) => {
+      const activeRow = activeResultRowRef.current;
+      const movedByRegion = moveByRegionCodes(
+        activeRow?.ctpvCd ?? mapView.analysis?.ctpvCd,
+        activeRow?.sggCd ?? mapView.analysis?.sggCd,
+      );
+      if (movedByRegion) return;
+
+      fitToRenderedFeatures();
+    },
+    [fitToRenderedFeatures, moveByRegionCodes],
+  );
+
+  const renderMapView = useCallback(
+    async (mapView: RdiiResultMapViewResponse) => {
+      const pipeSource = ensurePipeLayer();
+      if (!pipeSource) return;
+
+      clearLayers();
+
+      const pipeDataProjection = resolveFeatureCollectionProjection(mapView.pipeGeometry);
+      const pipeFeatures = new GeoJSON().readFeatures(getFeatureCollection(mapView.pipeGeometry), {
+        dataProjection: pipeDataProjection,
+        featureProjection: GisApp.TO_PROJ,
+      });
+      pipeFeatures.forEach((feature: any) => {
+        feature.setStyle(pipeStyle);
+      });
+      pipeSource.addFeatures(pipeFeatures);
+      pipeSource.changed?.();
+      pipeLayerRef.current?.setVisible?.(true);
+      pipeLayerRef.current?.changed?.();
+      gisMaps.current?.renderSync?.();
+
+      await moveToStableFocus(mapView);
+    },
+    [clearLayers, ensurePipeLayer, gisMaps, moveToStableFocus],
+  );
+
+  const handleRowSelect = useCallback(
+    async (row: RdiiResultRow) => {
+      try {
+        activeResultRowRef.current = row;
+        setFeatureData(null);
+        setIsOpen(false);
+        setIsSearchModalOpen(false);
+
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(
+            new CustomEvent(PROC_SEARCH_EVENT, {
+              detail: {
+                ctpvCd: row.ctpvCd ?? "0",
+                sggCd: row.sggCd ?? "0",
+                swtrmtFcltNm: row.swtrmtFcltNm ?? "",
+              },
+            }),
+          );
+        }
+
+        const cachedMapView = mapViewCacheRef.current.get(row.rainInfwtAnlsSn);
+        if (cachedMapView) {
+          setActiveMapView(cachedMapView);
+          void renderMapView(cachedMapView);
+          return;
+        }
+
+        const payload = await getRawJson(`/sewerage-service/api/v1/rdiiAnlsRslt/mapView/${row.rainInfwtAnlsSn}`);
+        const mapView = (payload?.data ?? payload) as RdiiResultMapViewResponse;
+        mapViewCacheRef.current.set(row.rainInfwtAnlsSn, mapView);
+        setActiveMapView(mapView);
+        void renderMapView(mapView);
+      } catch (error) {
+        console.error("RDII 분석결과 지도 연계 중 오류:", error);
+        alert("RDII 분석결과를 지도에 연계하지 못했습니다.");
+      }
+    },
+    [renderMapView, setFeatureData, setIsOpen, setIsSearchModalOpen],
+  );
+
+  useEffect(() => {
+    const handlePopupMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== RDII_RESULT_ROW_SELECT_MESSAGE || !event.data?.row) return;
+      void handleRowSelect(event.data.row as RdiiResultRow);
+    };
+
+    const handleStorageEvent = (event: StorageEvent) => {
+      if (event.key !== RDII_RESULT_ROW_SELECT_STORAGE_KEY || !event.newValue) return;
+
+      try {
+        const payload = JSON.parse(event.newValue) as { row?: RdiiResultRow };
+        if (!payload?.row) return;
+        void handleRowSelect(payload.row);
+      } catch (error) {
+        console.warn("RDII 분석결과 storage 동기화 값을 해석하지 못했습니다.", error);
+      }
+    };
+
+    window.addEventListener("message", handlePopupMessage);
+    window.addEventListener("storage", handleStorageEvent);
+    return () => {
+      window.removeEventListener("message", handlePopupMessage);
+      window.removeEventListener("storage", handleStorageEvent);
+    };
+  }, [handleRowSelect]);
+
+  useEffect(() => {
+    return () => {
+      clearLayers();
+    };
+  }, [clearLayers]);
+
+  const handleOverlayFeatureSelect = useCallback((data: any) => {
+    if (getOverlayFlag(data) !== RDII_RESULT_OVERLAY_TYPE) {
+      return false;
+    }
+
+    const overlayAnalysisSn = getOverlayAnalysisSn(data);
+    const basePplMngNo = getOverlayBasePplMngNo(data);
+    const analysisPplMngNo = getOverlayAnalysisPplMngNo(data);
+    const currentRow = activeResultRowRef.current;
+    const popupWindow = openWindowPopup("rdiiChart", {
+      pplMngNo: basePplMngNo || analysisPplMngNo.replace(/^L/, ""),
+      rainInfwtAnlsSn: overlayAnalysisSn || currentRow?.rainInfwtAnlsSn || 0,
+      aplcnYm: getOverlayAplcnYm(data) || currentRow?.aplcnYm || activeMapView?.analysis?.aplcnYm || "",
+      analysisInfo:
+        getOverlayAnalysisInfo(data) ||
+        currentRow?.anlsInfo ||
+        activeMapView?.analysis?.anlsInfo ||
+        "",
+      resultOnly: "Y",
+    });
+
+    if (!popupWindow) {
+      alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
+    }
+
+    return true;
+  }, [activeMapView]);
+
+  return {
+    activeMapView,
+    clearLayers,
+    handleOverlayFeatureSelect,
+  };
+};
\ No newline at end of file
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx
new file mode 100644
index 000000000..a660d0c7e
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx
@@ -0,0 +1,277 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@common/components";
+import { VerticalTable } from "@/components/ui/verticalTable";
+import { getCmsData } from "@/components/lib/api";
+import type { SinkholeDetail, SinkholeNearbyPipe } from "./sinkholeTypes";
+
+type Props = {
+  detail: SinkholeDetail;
+  nearbyPipes: SinkholeNearbyPipe[];
+  radiusMeters: number;
+  onClose: () => void;
+  onSelectPipe: (pipe: SinkholeNearbyPipe) => void;
+};
+
+type PipeUseCodeItem = {
+  lwpoCd: string;
+  lwpoCdNm: string;
+};
+
+let pipeUseCodeCache: PipeUseCodeItem[] | null = null;
+let pipeUseCodePromise: Promise<PipeUseCodeItem[]> | null = null;
+
+const display = (value: unknown) => {
+  const normalized = String(value ?? "").trim();
+  return normalized ? normalized : "-";
+};
+
+const displayNumber = (value: unknown, suffix = "") => {
+  if (value === null || value === undefined || value === "") return "-";
+  const normalized = Number(value);
+  if (Number.isNaN(normalized)) return display(value);
+  return `${normalized.toLocaleString()}${suffix}`;
+};
+
+const parseElapsedYears = (value: unknown) => {
+  if (value === null || value === undefined || value === "") return null;
+  const normalized = Number(value);
+  return Number.isFinite(normalized) ? normalized : null;
+};
+
+const displayElapsedYears = (value: unknown) => displayNumber(value, "년");
+
+const normalizePipeUseCodes = (data: any): PipeUseCodeItem[] => {
+  if (!Array.isArray(data)) return [];
+  return data.map((item: any) => ({
+    lwpoCd: String(item?.lwpoCd ?? "").trim(),
+    lwpoCdNm: String(item?.lwpoCdNm ?? "").trim(),
+  }));
+};
+
+const loadPipeUseCodes = async () => {
+  if (pipeUseCodeCache) return pipeUseCodeCache;
+  if (!pipeUseCodePromise) {
+    pipeUseCodePromise = getCmsData(`/api/v1/code/cache/OGC011/Y`)
+      .catch(() => getCmsData(`/api/v1/code/cache/OGC011`))
+      .then((data) => {
+        const codes = normalizePipeUseCodes(data);
+        pipeUseCodeCache = codes;
+        return codes;
+      })
+      .finally(() => {
+        pipeUseCodePromise = null;
+      });
+  }
+  return pipeUseCodePromise;
+};
+
+export default function SinkholeDetailPanel({
+  detail,
+  nearbyPipes,
+  radiusMeters,
+  onClose,
+  onSelectPipe,
+}: Props) {
+  const [pipeUseCodeMap, setPipeUseCodeMap] = useState<Map<string, string>>(new Map());
+  const canShowNearby = String(detail.coordStatus ?? "").trim() === "SUCCESS";
+
+  useEffect(() => {
+    let cancelled = false;
+
+    loadPipeUseCodes()
+      .then((codes) => {
+        if (cancelled) return;
+        setPipeUseCodeMap(new Map(codes.map((item) => [item.lwpoCd, item.lwpoCdNm])));
+      })
+      .catch((error) => {
+        console.error("Failed to load OGC011 pipe use codes:", error);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const getPipeUseName = (pipe: SinkholeNearbyPipe) => {
+    const rawCode = String(pipe.pipeTypeCd ?? pipe.pipeTypeName ?? "").trim();
+    if (!rawCode) return "-";
+    return pipeUseCodeMap.get(rawCode) ?? rawCode;
+  };
+
+  const nearbyPipeElapsedSummary = useMemo(() => {
+    const elapsedYears = nearbyPipes
+      .map((pipe) => parseElapsedYears(pipe.elapsedYears))
+      .filter((value): value is number => value !== null);
+
+    if (elapsedYears.length === 0) {
+      return { average: null, oldest: null };
+    }
+
+    const total = elapsedYears.reduce((sum, value) => sum + value, 0);
+    const average = Math.round((total / elapsedYears.length) * 10) / 10;
+    const oldest = Math.max(...elapsedYears);
+
+    return { average, oldest };
+  }, [nearbyPipes]);
+
+  const summaryTableData = useMemo(
+    () => [
+      {
+        acdntNo: display(detail.acdntNo),
+        ocrnYmd: display(detail.ocrnYmd),
+        fullAddress: display(detail.fullAddress || detail.daddr),
+        sizeWidth: display(detail.sizeWidth),
+        sizeLength: display(detail.sizeLength),
+        sizeDepth: display(detail.sizeDepth),
+        detailCause: display(detail.detailCause),
+        restoreStatus: display(detail.restoreStatus),
+        restoreCompletedYmd: display(detail.restoreCompletedYmd),
+      },
+    ],
+    [detail],
+  );
+
+  const summaryHeadList = [
+    { id: "acdntNo", title: "사고번호" },
+    { id: "ocrnYmd", title: "발생일자" },
+    { id: "fullAddress", title: "주소" },
+    { id: "sizeWidth", title: "발생규모폭" },
+    { id: "sizeLength", title: "발생규모연장" },
+    { id: "sizeDepth", title: "발생규모깊이" },
+    { id: "detailCause", title: "상세발생원인" },
+    { id: "restoreStatus", title: "복구상태" },
+    { id: "restoreCompletedYmd", title: "복구완료일자" },
+  ];
+
+  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"
+    >
+      <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">
+            지반침하정보
+            <br />
+            사고번호 : {display(detail.acdntNo)}
+          </h3>
+        </div>
+        <Button
+          onClick={onClose}
+          className="flex items-center space-x-4 text-white hover:text-gray-300 focus:outline-none"
+          size="xs"
+        >
+          ✕
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <VerticalTable
+          headName="발생정보"
+          tableData={summaryTableData}
+          headlist={summaryHeadList}
+          pageSize={20}
+          total={0}
+          cellClick={undefined}
+          onPageChange={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />
+
+        <section className="pb-[1.2rem]">
+          <div className="card-header !block px-[1.2rem]">
+            <h3 className="mx-3 whitespace-nowrap text-2xl font-medium text-label">
+              침하발생 반경내 관로정보
+            </h3>
+            {canShowNearby ? (
+              <div className="mx-3 mt-2 whitespace-nowrap text-left text-[0.95rem] leading-5 text-slate-500">
+                <span>반경 {radiusMeters}m · </span>
+                <span className="font-bold text-[#1d4ed8]">{nearbyPipes.length.toLocaleString()}건</span>
+                <span>, 평균경과 </span>
+                <span className="font-bold text-[#1d4ed8]">
+                  {displayElapsedYears(nearbyPipeElapsedSummary.average)}
+                </span>
+                <span>, 최장경과 </span>
+                <span className="font-bold text-[#1d4ed8]">
+                  {displayElapsedYears(nearbyPipeElapsedSummary.oldest)}
+                </span>
+              </div>
+            ) : null}
+          </div>
+          {!canShowNearby ? (
+            <div className="card !m-[1.2rem] !mt-0 rounded-sm border border-amber-200 bg-amber-50 px-3 py-3 text-[1.05rem] text-amber-700">
+              좌표가 없어 반경 내 하수관로를 조회할 수 없습니다.
+              {detail.geocodeErrorMessage ? (
+                <div className="mt-2 break-words text-[0.98rem] text-amber-800">
+                  사유: {display(detail.geocodeErrorMessage)}
+                </div>
+              ) : 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>
+          ) : (
+            <div className="card !mx-[1.2rem] !mb-[1.2rem] !mt-0 overflow-hidden">
+              <table className="w-full table-fixed border-collapse">
+                <colgroup>
+                  <col className="w-[34px]" />
+                  <col className="w-[90px]" />
+                  <col className="w-[60px]" />
+                  <col className="w-[56px]" />
+                  <col className="w-[56px]" />
+                </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">
+                      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">
+                      관로 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>
+                    <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>
+                    <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">
+                      거리(m)
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {nearbyPipes.map((pipe, index) => (
+                    <tr
+                      key={`${pipe.fid}-${index}`}
+                      className="cursor-pointer hover:bg-blue-50"
+                      onClick={() => onSelectPipe(pipe)}
+                    >
+                      <td className="border border-gray-300 px-1 py-2 text-center text-[0.95rem] text-slate-900">
+                        {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">
+                        {display(pipe.pipeId)}
+                      </td>
+                      <td className="border border-gray-300 px-1 py-2 text-center text-[0.95rem] text-slate-900 whitespace-nowrap">
+                        {getPipeUseName(pipe)}
+                      </td>
+                      <td className="border border-gray-300 px-1 py-2 text-right text-[0.95rem] text-slate-900">
+                        {displayElapsedYears(pipe.elapsedYears)}
+                      </td>
+                      <td className="border border-gray-300 px-1 py-2 text-right text-[0.95rem] text-slate-900">
+                        {displayNumber(pipe.distanceMeters)}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx
new file mode 100644
index 000000000..b2935032a
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { SelectBox } from "@common/business_components/ui";
+import {
+  normalizeSinkholeYearRange,
+  SINKHOLE_MIN_SEARCH_YEAR,
+  validateSinkholeYearRange,
+  type SinkholeSyncSummary,
+  type SinkholeYearRange,
+} from "./sinkholeTypes";
+
+type MaybePromise<T = void> = T | Promise<T>;
+
+type Props = {
+  radiusMeters: number;
+  onApplyRadius: (radiusMeters: number) => MaybePromise;
+  yearRange: SinkholeYearRange;
+  onApplyYearRange: (yearRange: SinkholeYearRange) => MaybePromise;
+  lastSyncSummary?: SinkholeSyncSummary | null;
+  isAdmin?: boolean;
+  compact?: boolean;
+};
+
+export default function SinkholeLayerSettingPanel({
+  radiusMeters,
+  onApplyRadius,
+  yearRange,
+  onApplyYearRange,
+  lastSyncSummary,
+  isAdmin = false,
+  compact = false,
+}: Props) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [radiusText, setRadiusText] = useState(String(radiusMeters));
+  const [yearRangeDraft, setYearRangeDraft] = useState<SinkholeYearRange>(() =>
+    normalizeSinkholeYearRange(yearRange),
+  );
+
+  useEffect(() => {
+    setRadiusText(String(radiusMeters));
+  }, [radiusMeters]);
+
+  useEffect(() => {
+    setYearRangeDraft(normalizeSinkholeYearRange(yearRange));
+  }, [yearRange]);
+
+  const commitRadius = async () => {
+    const nextValue = Number(radiusText.replace(/[^0-9]/g, ""));
+    if (!Number.isFinite(nextValue) || nextValue <= 0) {
+      alert("반경은 1m 이상 입력해야 합니다.");
+      return;
+    }
+
+    try {
+      await onApplyRadius(nextValue);
+      alert(`지반침하반경은 ${nextValue}m로 반영되었습니다.`);
+    } catch {
+      // 적용 함수 내부에서 실패 사유를 안내한다.
+    }
+  };
+
+  const commitYearRange = async () => {
+    const normalized = normalizeSinkholeYearRange(yearRangeDraft, yearRange);
+    const validationMessage = validateSinkholeYearRange(normalized);
+    if (validationMessage) {
+      alert(validationMessage);
+      return;
+    }
+
+    try {
+      await onApplyYearRange(normalized);
+      alert(`시작년도 ${normalized.startYear} ~ 종료년도 ${normalized.endYear} 반영되었습니다.`);
+    } catch {
+      alert("반영 중 오류가 발생했습니다.");
+    }
+  };
+
+  const updateYearRangeDraft = (key: keyof SinkholeYearRange, value: string) => {
+    setYearRangeDraft((current) => ({
+      ...current,
+      [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 startYearOptions = Array.from(
+    { length: currentYear - SINKHOLE_MIN_SEARCH_YEAR + 1 },
+    (_, index) => String(currentYear - index),
+  )
+    .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))
+    .map((year) => ({ val: year, text: year }));
+
+  const inputClass = "h-[22px] border border-[#ccd6df] px-[2px] text-center text-[1rem] leading-none text-[#222]";
+  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 settingRows = (
+    <div className="space-y-1.5 text-[1.05rem] font-medium text-slate-700">
+      <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>
+        </div>
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          <input
+            id="sinkhole-radius"
+            className={numberInputClass}
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            autoComplete="off"
+            value={radiusText}
+            onFocus={(event) => event.currentTarget.select()}
+            onChange={(event) => setRadiusText(event.target.value.replace(/[^0-9]/g, ""))}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") void commitRadius();
+            }}
+          />
+          <button
+            type="button"
+            className={applyButtonClass}
+            onClick={() => void commitRadius()}
+            title="적용"
+            aria-label="반경 적용"
+          >
+            ✓
+          </button>
+        </div>
+      </div>
+      <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>
+        </div>
+        <div className="ml-auto flex shrink-0 items-center gap-1.5">
+          <div id="sinkhole-start-year" className="w-[62px]">
+            <SelectBox
+              className="w-full"
+              selectClass={yearSelectClass}
+              label=""
+              selectArray={startYearOptions}
+              value={yearRangeDraft.startYear}
+              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>
+          <div id="sinkhole-end-year" className="w-[62px]">
+            <SelectBox
+              className="w-full"
+              selectClass={yearSelectClass}
+              label=""
+              selectArray={endYearOptions}
+              value={yearRangeDraft.endYear}
+              onSelectValue={(value) => updateYearRangeDraft("endYear", String(value))}
+              selectContentClass="z-[101]"
+              labelClass="hidden"
+            />
+          </div>
+          <button
+            type="button"
+            className={applyButtonClass}
+            onClick={() => void commitYearRange()}
+            title="적용"
+            aria-label="연도범위 적용"
+          >
+            ✓
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  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="overflow-visible">{settingRows}</div>
+      </div>
+    );
+  }
+
+  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">
+        <button
+          type="button"
+          className="absolute left-2 top-1/2 h-[18px] w-[18px] -translate-y-1/2 bg-transparent text-[1.2rem] leading-none text-[#555]"
+          onClick={() => setIsCollapsed((value) => !value)}
+          title={isCollapsed ? "펼치기" : "접기"}
+        >
+          {isCollapsed ? "+" : "-"}
+        </button>
+        <span className="text-[1.2rem] font-semibold text-[#d97706]">지반침하정보</span>
+      </div>
+
+      {!isCollapsed && (
+        <div className="px-2 py-2">
+          <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="font-semibold">최근 동기화</div>
+              <div className="mt-1">완료시각: {lastSyncSummary.finishedAt || "-"}</div>
+              <div className="mt-1">
+                성공 {lastSyncSummary.successCount}건 / 실패 {lastSyncSummary.failedCount}건
+              </div>
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx
new file mode 100644
index 000000000..e1f41b952
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx
@@ -0,0 +1,421 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Button, Input } from "@common/components";
+import { UiTable, downloadExcelWithKoreanHeaders } from "@common/business_components/ui";
+import { getRawJson } from "@/components/lib/api";
+import useStore from "@/store/useStore";
+import LoadingOverlay from "@/components/ui/LoadingBar";
+import type { SelectDataType } from "@common/business_components";
+import {
+  buildSinkholeDefaultFilters,
+  buildSinkholeListQueryString,
+  formatDateInputToYmd,
+  formatYmdToDateInput,
+  normalizeSinkholeFilters,
+  SINKHOLE_COORD_STATUS_OPTIONS,
+  SINKHOLE_DOWNLOAD_EXCEL_HEADERS,
+  SINKHOLE_FILTER_SYNC_MESSAGE,
+  SINKHOLE_MIN_SEARCH_YMD,
+  SINKHOLE_RESTORE_STATUS_OPTIONS,
+  SINKHOLE_ROW_SELECT_MESSAGE,
+  type SinkholeFilters,
+  type SinkholeListItem,
+} from "./sinkholeTypes";
+
+const PAGE_SIZE = 20;
+const DOWNLOAD_BATCH_SIZE = 2000;
+
+type SinkholeTableRow = SinkholeListItem & {
+  rowNo: number;
+  sizeWidthDisplay: string;
+  sizeLengthDisplay: string;
+  sizeDepthDisplay: string;
+  detailCauseDisplay: string;
+  restoreCompletedYmdDisplay: string;
+  coordStatusDisplay: string;
+};
+
+const HEADLIST = [
+  { id: "acdntNo", title: "사고번호", widthPercent: 17 },
+  { id: "ocrnYmd", title: "발생일자", widthPercent: 10 },
+  { id: "fullAddress", title: "주소", widthPercent: 20 },
+  { id: "sizeWidthDisplay", title: "발생규모폭", widthPercent: 8 },
+  { id: "sizeLengthDisplay", title: "발생규모연장", widthPercent: 8 },
+  { id: "sizeDepthDisplay", title: "발생규모깊이", widthPercent: 8 },
+  { id: "detailCauseDisplay", title: "상세발생원인", widthPercent: 11 },
+  { id: "restoreStatus", title: "복구상태", widthPercent: 8 },
+  { id: "coordStatusDisplay", title: "좌표보정상태", widthPercent: 9 },
+  { id: "restoreCompletedYmdDisplay", title: "복구완료일자", widthPercent: 11 },
+] as const;
+
+const toDisplay = (value: unknown) => {
+  const normalized = String(value ?? "").trim();
+  return normalized ? normalized : "-";
+};
+
+const toCoordStatusDisplay = (value: unknown) => {
+  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) =>
+  items.map((item, index) => ({
+    ...item,
+    rowNo: page * pageSize + index + 1,
+    sizeWidthDisplay: toDisplay(item.sizeWidth),
+    sizeLengthDisplay: toDisplay(item.sizeLength),
+    sizeDepthDisplay: toDisplay(item.sizeDepth),
+    detailCauseDisplay: toDisplay(item.detailCause),
+    coordStatusDisplay: toCoordStatusDisplay(item.coordStatus),
+    restoreCompletedYmdDisplay: toDisplay(item.restoreCompletedYmd),
+  }));
+
+const buildDownloadRows = (rows: SinkholeTableRow[]) =>
+  rows.map((row) => ({
+    rowNo: row.rowNo,
+    ocrnYmd: row.ocrnYmd || "-",
+    fullAddress: row.fullAddress || "-",
+    sizeWidth: row.sizeWidthDisplay,
+    sizeLength: row.sizeLengthDisplay,
+    sizeDepth: row.sizeDepthDisplay,
+    detailCause: row.detailCauseDisplay,
+    restoreStatus: row.restoreStatus || "-",
+    restoreCompletedYmd: row.restoreCompletedYmdDisplay,
+  }));
+
+const unwrapPayload = <T,>(response: any): T =>
+  (response?.data ?? response) as T;
+
+export default function SinkholePopupPage() {
+  const searchParams = useSearchParams();
+  const hasInitialFilterParams =
+    searchParams.has("startYmd") ||
+    searchParams.has("endYmd") ||
+    searchParams.has("ctpvCd") ||
+    searchParams.has("sggCd") ||
+    searchParams.has("restoreStatus") ||
+    searchParams.has("coordStatus");
+  const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
+  const [filters, setFilters] = useState<SinkholeFilters>(() => {
+    const seeded = normalizeSinkholeFilters(
+      {
+        startYmd: searchParams.get("startYmd") ?? "",
+        endYmd: searchParams.get("endYmd") ?? "",
+        ctpvCd: searchParams.get("ctpvCd") ?? "0",
+        sggCd: searchParams.get("sggCd") ?? "0",
+        restoreStatus: searchParams.get("restoreStatus") ?? "0",
+        coordStatus: searchParams.get("coordStatus") ?? "0",
+      },
+      undefined,
+    );
+
+    if (!hasInitialFilterParams) {
+      return normalizeSinkholeFilters(buildSinkholeDefaultFilters(), undefined);
+    }
+    return seeded;
+  });
+  const [appliedFilters, setAppliedFilters] = useState<SinkholeFilters>(() => {
+    const seeded = normalizeSinkholeFilters(
+      {
+        startYmd: searchParams.get("startYmd") ?? "",
+        endYmd: searchParams.get("endYmd") ?? "",
+        ctpvCd: searchParams.get("ctpvCd") ?? "0",
+        sggCd: searchParams.get("sggCd") ?? "0",
+        restoreStatus: searchParams.get("restoreStatus") ?? "0",
+        coordStatus: searchParams.get("coordStatus") ?? "0",
+      },
+      undefined,
+    );
+
+    if (!hasInitialFilterParams) {
+      return normalizeSinkholeFilters(buildSinkholeDefaultFilters(), undefined);
+    }
+    return seeded;
+  });
+  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 sggOptions = useMemo(
+    () =>
+      filters.ctpvCd === "0"
+        ? sgg
+        : sgg.filter((item) => String(item.val).startsWith(filters.ctpvCd.slice(0, 2))),
+    [filters.ctpvCd, sgg],
+  );
+
+  useEffect(() => {
+    if (ctpv.length === 0) fetchCtpv();
+    if (sgg.length === 0) fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
+
+  const fetchRows = useCallback(
+    async (
+      page: number,
+      nextFilters: SinkholeFilters,
+      pageSize = PAGE_SIZE,
+      options?: {
+        includeCoordStatus?: boolean;
+      },
+    ) => {
+      const queryString = buildSinkholeListQueryString(
+        nextFilters,
+        ctpv as SelectDataType[],
+        sgg as SelectDataType[],
+        page - 1,
+        pageSize,
+        options,
+      );
+      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),
+        items,
+        total: Number(payload?.total ?? 0),
+      };
+    },
+    [ctpv, sgg],
+  );
+
+  const loadRows = useCallback(
+    async (page = 1, nextFilters = filters) => {
+      setIsLoading(true);
+      try {
+        const normalized = normalizeSinkholeFilters(nextFilters);
+        const response = await fetchRows(page, normalized);
+        setRows(response.rows);
+        setTotal(response.total);
+        setCurrentPage(page);
+        setAppliedFilters(normalized);
+        window.opener?.postMessage(
+          {
+            type: SINKHOLE_FILTER_SYNC_MESSAGE,
+            filters: normalized,
+          },
+          window.location.origin,
+        );
+      } catch (error) {
+        console.error("지반침하 목록 조회 중 오류:", error);
+        setRows([]);
+        setTotal(0);
+        alert(error instanceof Error ? error.message : "지반침하 목록 조회 중 오류가 발생했습니다.");
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchRows, filters],
+  );
+
+  useEffect(() => {
+    void loadRows(1, filters);
+    // 최초 로딩은 한 번만 수행한다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSearch = async (page = 1) => {
+    const normalized = normalizeSinkholeFilters(filters);
+    setFilters(normalized);
+    await loadRows(page, normalized);
+  };
+
+  const handleRowClick = (index?: number) => {
+    if (typeof index !== "number") return;
+    const row = rows[index];
+    if (!row) return;
+
+    setSelectedIndex(index);
+    window.opener?.postMessage(
+      {
+        type: SINKHOLE_ROW_SELECT_MESSAGE,
+        row,
+      },
+      window.location.origin,
+    );
+  };
+
+  const handleDownload = async () => {
+    if (total === 0) {
+      alert("다운로드할 데이터가 없습니다.");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const normalized = normalizeSinkholeFilters(appliedFilters);
+      const downloadItems: SinkholeListItem[] = [];
+      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,
+        });
+        downloadItems.push(...response.items);
+      }
+
+      if (downloadItems.length === 0) {
+        alert("다운로드할 데이터가 없습니다.");
+        return;
+      }
+
+      const downloadRows = toTableRows(downloadItems, 0, 1);
+      await downloadExcelWithKoreanHeaders({
+        data: buildDownloadRows(downloadRows) as unknown as JSON[],
+        fileName: `지반침하정보_${new Date().toISOString().slice(0, 10)}.xlsx`,
+        sheetNameArray: ["지반침하정보"],
+        headerRange: "A1:I1",
+        headerMapping: SINKHOLE_DOWNLOAD_EXCEL_HEADERS,
+      });
+    } catch (error) {
+      console.error("지반침하 다운로드 중 오류:", error);
+      alert(error instanceof Error ? error.message : "지반침하 다운로드 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main className="flex h-screen flex-col overflow-hidden bg-white">
+      <LoadingOverlay isLoading={isLoading} />
+      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
+        <h1 className="text-[1.45rem] font-semibold text-white">지반침하발생현황</h1>
+        <div />
+      </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>
+          </div>
+        </div>
+
+        <UiTable<SinkholeTableRow>
+          headName={<>지반침하 조회 결과 총 {total.toLocaleString()}건</>}
+          tableData={rows}
+          headlist={HEADLIST as any}
+          pageSize={PAGE_SIZE}
+          total={total}
+          cellClick={(index) => handleRowClick(index)}
+          onPageChange={(page) => void handleSearch(page)}
+          curPage={currentPage}
+          index={selectedIndex}
+          widthFixed={true}
+          isHideCount={true}
+        />
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts b/apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts
new file mode 100644
index 000000000..eecd5606c
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts
@@ -0,0 +1,338 @@
+"use client";
+
+import type { SelectDataType } from "@common/business_components";
+import type { IUserInfo } from "@/shared/store";
+
+export const SINKHOLE_CONTROL_NODE_ID = "SN_SINKHOLE";
+export const SINKHOLE_LAYER_TYPE = "tb_sn_sinkhole_info";
+export const SINKHOLE_LAYER_NAME = "지반침하정보";
+export const SINKHOLE_POPUP_KEY = "sinkholePopup";
+export const SINKHOLE_ROW_SELECT_MESSAGE = "SN_SINKHOLE_ROW_SELECT";
+export const SINKHOLE_FILTER_SYNC_MESSAGE = "SN_SINKHOLE_FILTER_SYNC";
+export const SINKHOLE_SYNC_COMPLETED_MESSAGE = "SN_SINKHOLE_SYNC_COMPLETED";
+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 type SinkholeFilters = {
+  startYmd: string;
+  endYmd: string;
+  ctpvCd: string;
+  sggCd: string;
+  restoreStatus: string;
+  coordStatus: string;
+};
+
+export type SinkholeListItem = {
+  acdntNo: string;
+  ctpvNm?: string;
+  sggNm?: string;
+  emdNm?: string;
+  fullAddress: string;
+  ocrnYmd: string;
+  restoreStatus?: string;
+  restoreCompletedYmd?: string;
+  coordStatus?: string;
+  geocodeStatus?: string;
+  geocodeSource?: string;
+  geocodeErrorMessage?: string;
+  latitude?: number | null;
+  longitude?: number | null;
+  x?: number | null;
+  y?: number | null;
+  sizeWidth?: number | string | null;
+  sizeLength?: number | string | null;
+  sizeDepth?: number | string | null;
+  detailCause?: string | null;
+  deathCount?: number | null;
+  injuryCount?: number | null;
+  vehicleDamageCount?: number | null;
+};
+
+export type SinkholeDetail = SinkholeListItem & {
+  daddr?: string;
+};
+
+export type SinkholeNearbyPipe = {
+  pipeId: string;
+  fid: string;
+  lyrTypeNm: string;
+  pipeTypeCd?: string;
+  pipeTypeName?: string;
+  diameter?: number | string | null;
+  length?: number | string | null;
+  elapsedYears?: number | string | null;
+  distanceMeters?: number | string | null;
+};
+
+export type SinkholeSyncSummary = {
+  syncId: string;
+  startedAt: string;
+  finishedAt: string;
+  sourceCount: number;
+  successCount: number;
+  failedCount: number;
+  reGeocodedCount: number;
+  message: string;
+};
+
+export type SinkholeScope = {
+  ctpvCd: string;
+  sggCd: string;
+  ctpvLocked: boolean;
+  sggLocked: boolean;
+};
+
+export type SinkholeYearRange = {
+  startYear: string;
+  endYear: string;
+};
+
+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 => {
+  const currentYear = baseDate.getFullYear();
+  return {
+    startYear: String(currentYear - 1),
+    endYear: String(currentYear),
+  };
+};
+
+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),
+});
+
+export const validateSinkholeYearRange = (
+  range: SinkholeYearRange,
+  currentYear = new Date().getFullYear(),
+) => {
+  const startYear = Number(range.startYear);
+  const endYear = Number(range.endYear);
+
+  if (!/^\d{4}$/.test(range.startYear) || !/^\d{4}$/.test(range.endYear)) {
+    return "시작년도와 종료년도는 4자리 숫자로 입력해야 합니다.";
+  }
+  if (startYear < SINKHOLE_MIN_SEARCH_YEAR || endYear < SINKHOLE_MIN_SEARCH_YEAR) {
+    return `${SINKHOLE_MIN_SEARCH_YEAR}년 이후 범위로 입력해야 합니다.`;
+  }
+  if (startYear > endYear) {
+    return "시작년도는 종료년도보다 클 수 없습니다.";
+  }
+  if (endYear > currentYear) {
+    return `종료년도는 현재년도(${currentYear})를 초과할 수 없습니다.`;
+  }
+
+  return null;
+};
+
+export const buildSinkholeFiltersFromYearRange = (
+  range: SinkholeYearRange,
+  scope?: SinkholeScope,
+): SinkholeFilters => {
+  const normalized = normalizeSinkholeYearRange(range);
+  return {
+    startYmd: `${normalized.startYear}0101`,
+    endYmd: `${normalized.endYear}1231`,
+    ctpvCd: scope?.ctpvCd || "0",
+    sggCd: scope?.sggCd || "0",
+    restoreStatus: "0",
+    coordStatus: "0",
+  };
+};
+
+export const buildSinkholeDefaultFilters = (scope?: SinkholeScope): SinkholeFilters => {
+  const today = new Date();
+  const oneYearAgo = new Date(today);
+  oneYearAgo.setFullYear(today.getFullYear() - 1);
+
+  return {
+    startYmd: toYmd(oneYearAgo),
+    endYmd: toYmd(today),
+    ctpvCd: scope?.ctpvCd || "0",
+    sggCd: scope?.sggCd || "0",
+    restoreStatus: "0",
+    coordStatus: "0",
+  };
+};
+
+export const buildSinkholeScope = (userInfo: IUserInfo | null): SinkholeScope => {
+  const admin = userInfo?.adminRoleYn === "Y";
+  if (admin) {
+    return {
+      ctpvCd: "0",
+      sggCd: "0",
+      ctpvLocked: false,
+      sggLocked: false,
+    };
+  }
+
+  const digits = String(userInfo?.laeSeCd ?? "").replace(/[^0-9]/g, "");
+  if (digits.length >= 5) {
+    return {
+      ctpvCd: digits.slice(0, 2),
+      sggCd: digits.slice(0, 5),
+      ctpvLocked: true,
+      sggLocked: true,
+    };
+  }
+  if (digits.length >= 2) {
+    return {
+      ctpvCd: digits.slice(0, 2),
+      sggCd: "0",
+      ctpvLocked: true,
+      sggLocked: false,
+    };
+  }
+
+  return {
+    ctpvCd: "0",
+    sggCd: "0",
+    ctpvLocked: false,
+    sggLocked: false,
+  };
+};
+
+export const normalizeSinkholeFilters = (
+  filters: SinkholeFilters,
+  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),
+    ctpvCd: String(filters.ctpvCd ?? "0") || "0",
+    sggCd: String(filters.sggCd ?? "0") || "0",
+    restoreStatus: String(filters.restoreStatus ?? "0") || "0",
+    coordStatus: String(filters.coordStatus ?? "0") || "0",
+  };
+
+  if (scope?.ctpvCd && scope.ctpvCd !== "0") {
+    next.ctpvCd = scope.ctpvCd;
+  }
+  if (scope?.sggCd && scope.sggCd !== "0") {
+    next.sggCd = scope.sggCd;
+  } else if (next.ctpvCd !== "0" && next.sggCd !== "0" && !next.sggCd.startsWith(next.ctpvCd)) {
+    next.sggCd = "0";
+  }
+
+  return next;
+};
+
+export const formatYmdToDateInput = (value?: string) => {
+  const normalized = String(value ?? "").replace(/[^0-9]/g, "");
+  if (normalized.length !== 8) return "";
+  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 resolveRegionNameByCode = (
+  code: string,
+  options: SelectDataType[],
+  length: number,
+) => {
+  const normalized = String(code ?? "").trim();
+  if (!normalized || normalized === "0") return "";
+  const key = normalized.slice(0, length);
+  return options.find((item) => String(item.val).trim() === key)?.text ?? "";
+};
+
+export const buildSinkholeListQueryString = (
+  filters: SinkholeFilters,
+  ctpvOptions: SelectDataType[],
+  sggOptions: SelectDataType[],
+  page = 0,
+  size = 20,
+  options?: {
+    includeCoordStatus?: boolean;
+  },
+) => {
+  const params = new URLSearchParams({
+    page: String(page),
+    size: String(size),
+  });
+
+  if (filters.startYmd) params.set("startYmd", filters.startYmd);
+  if (filters.endYmd) params.set("endYmd", filters.endYmd);
+
+  const ctpvNm = resolveRegionNameByCode(filters.ctpvCd, ctpvOptions, 2);
+  const sggNm = resolveRegionNameByCode(filters.sggCd, sggOptions, 5);
+  if (ctpvNm) params.set("ctpvNm", ctpvNm);
+  if (sggNm) params.set("sggNm", sggNm);
+  if (filters.restoreStatus && filters.restoreStatus !== "0") {
+    params.set("restoreStatus", filters.restoreStatus);
+  }
+  if (filters.coordStatus && filters.coordStatus !== "0") {
+    params.set("coordStatus", filters.coordStatus);
+  }
+  if (options?.includeCoordStatus === false) {
+    params.set("includeCoordStatus", "false");
+  }
+
+  return params.toString();
+};
+
+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();
+
+  return (
+    nodeId === SINKHOLE_CONTROL_NODE_ID ||
+    layerName === SINKHOLE_LAYER_NAME ||
+    layerTypeName === SINKHOLE_LAYER_TYPE
+  );
+};
+
+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;
+};
+
+
+export const SINKHOLE_RESTORE_STATUS_OPTIONS = [
+  { value: "0", label: "전체" },
+  { value: "복구완료", label: "복구완료" },
+  { value: "복구중", label: "복구중" },
+  { value: "미복구", label: "미복구" },
+] as const;
+
+export const SINKHOLE_COORD_STATUS_OPTIONS = [
+  { value: "0", label: "전체" },
+  { value: "SUCCESS", label: "성공" },
+  { value: "FAILED", label: "실패" },
+] as const;
+
+export const SINKHOLE_EXCEL_HEADERS: Record<string, string> = {
+  rowNo: "NO",
+  ocrnYmd: "발생일자",
+  fullAddress: "주소",
+  sizeWidth: "발생규모폭",
+  sizeLength: "발생규모연장",
+  sizeDepth: "발생규모깊이",
+  detailCause: "상세발생원인",
+  restoreStatus: "복구상태",
+  coordStatus: "좌표보정상태",
+  restoreCompletedYmd: "복구완료일자",
+};
+
+export const SINKHOLE_DOWNLOAD_EXCEL_HEADERS: Record<string, string> = {
+  rowNo: "NO",
+  ocrnYmd: "발생일자",
+  fullAddress: "주소",
+  sizeWidth: "발생규모폭",
+  sizeLength: "발생규모연장",
+  sizeDepth: "발생규모깊이",
+  detailCause: "상세발생원인",
+  restoreStatus: "복구상태",
+  restoreCompletedYmd: "복구완료일자",
+};
diff --git a/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
new file mode 100644
index 000000000..ed21c01d1
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
@@ -0,0 +1,908 @@
+"use client";
+
+import { Fragment, useEffect, useMemo, useState } from "react";
+import UiPageNations from "@common/business_components/ui/table/uiPageNations";
+
+import { Button } from "@common/components";
+
+import {
+  WINDOW_POPUP_MESSAGE_TYPE,
+  type WindowPopupContentProps,
+} from "@/features/windowPopup/model/types";
+import {
+  buildWaterRiskMethodLabel,
+  buildWaterRiskSettingAreaName,
+  buildWaterRiskStatusLabel,
+  EMPTY_WATER_RISK_SESSION_SNAPSHOT,
+  WATER_RISK_RESULT_ROWS,
+  WATER_RISK_SETTING_ROWS,
+  WATER_RISK_SGG_OPTIONS_BY_SIDO,
+  WATER_RISK_SIDO_OPTIONS,
+  type WaterRiskResultRow,
+  type WaterRiskSessionSnapshot,
+  type WaterRiskSettingRow,
+  type WaterRiskStagedPipe,
+} from "./waterRiskTypes";
+
+type WaterRiskView = "result" | "setting";
+
+type ResultFilters = {
+  analysisDate: string;
+  analysisTime: string;
+  sidoName: string;
+  sggName: string;
+  areaId: string;
+  riskStatus: "ALL" | "DANGER" | "NORMAL";
+};
+
+type SettingFilters = {
+  sidoName: string;
+  sggName: string;
+  areaId: string;
+};
+
+const DEFAULT_RESULT_FILTERS: ResultFilters = {
+  analysisDate: "2026-05-18",
+  analysisTime: "09:00",
+  sidoName: "전체",
+  sggName: "전체",
+  areaId: "ALL",
+  riskStatus: "ALL",
+};
+
+const DEFAULT_SETTING_FILTERS: SettingFilters = {
+  sidoName: "전체",
+  sggName: "전체",
+  areaId: "ALL",
+};
+
+const TOOLBAR_INPUT_CLASS_NAME =
+  "sn-popup-input";
+
+const SECONDARY_BUTTON_CLASS_NAME =
+  "sn-popup-secondary-button";
+
+const ACTION_BUTTON_CLASS_NAME =
+  "sn-popup-primary-button";
+const WATER_RISK_PAGE_SIZE = 10;
+const RESULT_TABLE_CONTAINER_CLASS_NAME =
+  "sn-popup-card min-h-0";
+const SETTING_TABLE_CONTAINER_CLASS_NAME =
+  "sn-popup-card min-h-0";
+
+const postMessageToOpener = (type: string, payload?: Record<string, unknown>) => {
+  if (typeof window === "undefined" || !window.opener) return;
+  window.opener.postMessage({ type, payload }, window.location.origin);
+};
+
+const buildPreviewTimestamp = () => new Date().toISOString();
+
+const buildResultDownloadPreview = (
+  filters: ResultFilters,
+  rows: WaterRiskResultRow[],
+) => ({
+  endpoint: "/api/v1/map/wraResults/download",
+  method: "POST",
+  generatedAt: buildPreviewTimestamp(),
+  filters,
+  resultCount: rows.length,
+});
+
+const buildSettingDownloadPreview = (
+  filters: SettingFilters,
+  rows: WaterRiskSettingRow[],
+) => ({
+  endpoint: "/api/v1/map/wraOutletPipeSettings/download",
+  method: "POST",
+  generatedAt: buildPreviewTimestamp(),
+  filters,
+  resultCount: rows.length,
+});
+
+const buildSavePreview = (
+  snapshot: WaterRiskSessionSnapshot,
+  stagedPipes: WaterRiskStagedPipe[],
+) => ({
+  endpoint: "/api/v1/map/wraOutletPipeSettings/save",
+  method: "POST",
+  generatedAt: buildPreviewTimestamp(),
+  body: {
+    focusAreaId: snapshot.selectedSettingAreaId,
+    focusAreaName: snapshot.selectedSettingAreaName,
+    pipes: stagedPipes.map((pipe, index) => ({
+      pipeId: pipe.pipeId,
+      setSeq: index + 1,
+    })),
+  },
+});
+
+const getRiskBadgeClassName = (riskStatus: "DANGER" | "NORMAL") =>
+  riskStatus === "DANGER"
+    ? "sn-popup-badge-danger"
+    : "sn-popup-badge-normal";
+
+export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
+  const [activeView, setActiveView] = useState<WaterRiskView>("result");
+  const [snapshot, setSnapshot] = useState<WaterRiskSessionSnapshot>(
+    EMPTY_WATER_RISK_SESSION_SNAPSHOT,
+  );
+  const [draftResultFilters, setDraftResultFilters] = useState<ResultFilters>(
+    DEFAULT_RESULT_FILTERS,
+  );
+  const [appliedResultFilters, setAppliedResultFilters] = useState<ResultFilters>(
+    DEFAULT_RESULT_FILTERS,
+  );
+  const [draftSettingFilters, setDraftSettingFilters] = useState<SettingFilters>(
+    DEFAULT_SETTING_FILTERS,
+  );
+  const [appliedSettingFilters, setAppliedSettingFilters] = useState<SettingFilters>(
+    DEFAULT_SETTING_FILTERS,
+  );
+  const [selectedResultAreaId, setSelectedResultAreaId] = useState<string>(
+    WATER_RISK_RESULT_ROWS[0]?.areaId ?? "",
+  );
+  const [selectedSettingAreaId, setSelectedSettingAreaId] = useState<string>("");
+  const [resultCurrentPage, setResultCurrentPage] = useState(1);
+  const [settingCurrentPage, setSettingCurrentPage] = useState(1);
+  const [noticeMessage, setNoticeMessage] = useState("");
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) 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;
+      setSnapshot(nextSnapshot);
+      if (nextSnapshot.selectedAreaId) {
+        setSelectedResultAreaId(nextSnapshot.selectedAreaId);
+      }
+      if (nextSnapshot.selectedSettingAreaId) {
+        setSelectedSettingAreaId(nextSnapshot.selectedSettingAreaId);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_READY);
+
+    return () => {
+      postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_STOP_SETTING_EDIT);
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  const visibleResultRows = useMemo(() => {
+    return WATER_RISK_RESULT_ROWS.filter((row) => {
+      if (
+        appliedResultFilters.sidoName !== "전체" &&
+        row.sidoName !== appliedResultFilters.sidoName
+      ) {
+        return false;
+      }
+
+      if (
+        appliedResultFilters.sggName !== "전체" &&
+        row.sggName !== appliedResultFilters.sggName
+      ) {
+        return false;
+      }
+
+      if (
+        appliedResultFilters.areaId !== "ALL" &&
+        row.areaId !== appliedResultFilters.areaId
+      ) {
+        return false;
+      }
+
+      if (
+        appliedResultFilters.riskStatus !== "ALL" &&
+        row.riskStatus !== appliedResultFilters.riskStatus
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [appliedResultFilters]);
+
+  const visibleSettingRows = useMemo(() => {
+    return WATER_RISK_SETTING_ROWS.filter((row) => {
+      if (
+        appliedSettingFilters.sidoName !== "전체" &&
+        row.sidoName !== appliedSettingFilters.sidoName
+      ) {
+        return false;
+      }
+
+      if (
+        appliedSettingFilters.sggName !== "전체" &&
+        row.sggName !== appliedSettingFilters.sggName
+      ) {
+        return false;
+      }
+
+      if (
+        appliedSettingFilters.areaId !== "ALL" &&
+        row.areaId !== appliedSettingFilters.areaId
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [appliedSettingFilters]);
+
+  const maxPipeCount = useMemo(
+    () =>
+      visibleResultRows.reduce(
+        (maxCount, row) => Math.max(maxCount, row.pipeSummaries.length),
+        0,
+      ),
+    [visibleResultRows],
+  );
+
+  const resultAreaOptions = useMemo(
+    () =>
+      WATER_RISK_RESULT_ROWS.map((row) => ({
+        areaId: row.areaId,
+        areaName: row.areaName,
+      })),
+    [],
+  );
+
+  const settingAreaOptions = useMemo(() => {
+    const areaMap = new Map<string, { areaId: string; areaName: string }>();
+    WATER_RISK_SETTING_ROWS.forEach((row) => {
+      areaMap.set(row.areaId, {
+        areaId: row.areaId,
+        areaName: row.areaName,
+      });
+    });
+    return Array.from(areaMap.values());
+  }, []);
+
+  const resultSggOptions =
+    WATER_RISK_SGG_OPTIONS_BY_SIDO[draftResultFilters.sidoName] ??
+    WATER_RISK_SGG_OPTIONS_BY_SIDO["전체"] ??
+    [];
+  const settingSggOptions =
+    WATER_RISK_SGG_OPTIONS_BY_SIDO[draftSettingFilters.sidoName] ??
+    WATER_RISK_SGG_OPTIONS_BY_SIDO["전체"] ??
+    [];
+
+  const currentSettingAreaName =
+    snapshot.selectedSettingAreaName ||
+    buildWaterRiskSettingAreaName(selectedSettingAreaId || snapshot.selectedSettingAreaId);
+
+  const pagedResultRows = useMemo(() => {
+    const startIndex = (resultCurrentPage - 1) * WATER_RISK_PAGE_SIZE;
+    return visibleResultRows.slice(startIndex, startIndex + WATER_RISK_PAGE_SIZE);
+  }, [resultCurrentPage, visibleResultRows]);
+
+  const pagedSettingRows = useMemo(() => {
+    const startIndex = (settingCurrentPage - 1) * WATER_RISK_PAGE_SIZE;
+    return visibleSettingRows.slice(startIndex, startIndex + WATER_RISK_PAGE_SIZE);
+  }, [settingCurrentPage, visibleSettingRows]);
+
+  const showSettingEditor = snapshot.isSettingEditMode || snapshot.stagedPipes.length > 0;
+  const resultPipeGroupCount = Math.max(1, maxPipeCount);
+  const resultTableMinWidth = 560 + resultPipeGroupCount * 180;
+  const settingTableMinWidth = 900;
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.resizeTo) return;
+
+    const popupWidth =
+      activeView === "result"
+        ? Math.min(1320, Math.max(860, 620 + resultPipeGroupCount * 180))
+        : showSettingEditor
+          ? 1180
+          : 980;
+    const popupHeight = activeView === "setting" && showSettingEditor ? 900 : 720;
+
+    window.resizeTo(popupWidth, popupHeight);
+  }, [activeView, resultPipeGroupCount, showSettingEditor]);
+
+  const handleApplyResultFilters = () => {
+    if (!draftResultFilters.analysisDate || !draftResultFilters.analysisTime) {
+      setNoticeMessage("기준 날짜와 시간을 입력해야 조회할 수 있습니다.");
+      return;
+    }
+
+    setResultCurrentPage(1);
+    setAppliedResultFilters(draftResultFilters);
+    setNoticeMessage("통수위험 분석 결과를 갱신했습니다.");
+  };
+
+  const handleOpenSettingView = () => {
+    setActiveView("setting");
+    setNoticeMessage("");
+  };
+
+  const handleReturnToResultView = () => {
+    setActiveView("result");
+    setNoticeMessage("");
+  };
+
+  const handleSelectResultRow = (row: WaterRiskResultRow) => {
+    setSelectedResultAreaId(row.areaId);
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT, {
+      areaId: row.areaId,
+    });
+    setNoticeMessage(`${row.areaName}을 지도에서 강조했습니다.`);
+  };
+
+  const handlePreviewResultDownload = () => {
+    const preview = buildResultDownloadPreview(appliedResultFilters, visibleResultRows);
+    console.info("WaterRisk result download preview", preview);
+    setNoticeMessage("결과 다운로드 preview를 생성했습니다. 콘솔을 확인하세요.");
+  };
+
+  const handleApplySettingFilters = () => {
+    setSettingCurrentPage(1);
+    setAppliedSettingFilters(draftSettingFilters);
+    setNoticeMessage("설정 현황 목록을 갱신했습니다.");
+  };
+
+  const handleStopSettingEdit = () => {
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_STOP_SETTING_EDIT);
+    setNoticeMessage("통수위험 설정 편집 모드를 종료했습니다.");
+  };
+
+  const handleRemoveStagedPipe = (pipeId: string) => {
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_REMOVE_STAGED_PIPE, {
+      pipeId,
+    });
+  };
+
+  const handleMoveStagedPipe = (pipeId: string, direction: "UP" | "DOWN") => {
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_REORDER_STAGED_PIPE, {
+      pipeId,
+      direction,
+    });
+  };
+
+  const handleClearStagedPipes = () => {
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_CLEAR_STAGED_PIPES);
+  };
+
+  const handlePreviewSave = () => {
+    if (!snapshot.selectedSettingAreaId || snapshot.stagedPipes.length === 0) {
+      setNoticeMessage("저장할 유출관로가 없습니다.");
+      return;
+    }
+
+    const preview = buildSavePreview(snapshot, snapshot.stagedPipes);
+    console.info("WaterRisk save preview", preview);
+    setNoticeMessage("설정 저장 payload preview를 생성했습니다. 콘솔을 확인하세요.");
+  };
+
+  const handleSelectSettingArea = (areaId: string) => {
+    setSelectedSettingAreaId(areaId);
+
+    const targetAreaName =
+      settingAreaOptions.find((item) => item.areaId === areaId)?.areaName ??
+      buildWaterRiskSettingAreaName(areaId);
+
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_START_SETTING_EDIT, {
+      areaId,
+      areaName: targetAreaName,
+    });
+    setNoticeMessage(`${targetAreaName} 설정 편집 대상을 선택했습니다.`);
+  };
+
+  return (
+    <main className="sn-popup-page">
+      <header className="sn-popup-header justify-start">
+        {activeView === "setting" ? (
+          <button
+            type="button"
+            className="sn-popup-header-link"
+            onClick={handleReturnToResultView}
+          >
+            ← 결과조회
+          </button>
+        ) : null}
+        <h1 className="sn-popup-title">
+          {activeView === "result" ? "통수위험분석" : "통수위험분석 설정"}
+        </h1>
+      </header>
+
+      <section className="sn-popup-section overflow-y-auto">
+        {activeView === "result" ? (
+          <section className="flex h-full min-h-0 flex-col gap-3">
+            <div className="sn-popup-filter-panel md:grid-cols-[160px_140px_140px_140px_180px_120px_auto] md:items-end">
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">기준일자</div>
+                  <input
+                    type="date"
+                    value={draftResultFilters.analysisDate}
+                    onChange={(event) =>
+                      setDraftResultFilters((current) => ({
+                        ...current,
+                        analysisDate: event.target.value,
+                      }))
+                    }
+                    aria-label="년월일"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  />
+              </label>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">기준시간</div>
+                  <input
+                    type="time"
+                    value={draftResultFilters.analysisTime}
+                    onChange={(event) =>
+                      setDraftResultFilters((current) => ({
+                        ...current,
+                        analysisTime: event.target.value,
+                      }))
+                    }
+                    aria-label="시간"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  />
+              </label>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시도</div>
+                  <select
+                    value={draftResultFilters.sidoName}
+                    onChange={(event) =>
+                      setDraftResultFilters((current) => ({
+                        ...current,
+                        sidoName: event.target.value,
+                        sggName: "전체",
+                      }))
+                    }
+                    aria-label="시도"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  >
+                    {WATER_RISK_SIDO_OPTIONS.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+              </label>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시군구</div>
+                  <select
+                    value={draftResultFilters.sggName}
+                    onChange={(event) =>
+                      setDraftResultFilters((current) => ({
+                        ...current,
+                        sggName: event.target.value,
+                      }))
+                    }
+                    aria-label="시군구"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  >
+                    {resultSggOptions.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+              </label>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">중점관리지역</div>
+                  <select
+                    value={draftResultFilters.areaId}
+                    onChange={(event) =>
+                      setDraftResultFilters((current) => ({
+                        ...current,
+                        areaId: event.target.value,
+                      }))
+                    }
+                    aria-label="중점관리지역"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  >
+                    <option value="ALL">중점관리지역</option>
+                    {resultAreaOptions.map((option) => (
+                      <option key={option.areaId} value={option.areaId}>
+                        {option.areaName}
+                      </option>
+                    ))}
+                  </select>
+              </label>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">위험상태</div>
+                  <select
+                    value={draftResultFilters.riskStatus}
+                    onChange={(event) =>
+                      setDraftResultFilters((current) => ({
+                        ...current,
+                        riskStatus: event.target.value as ResultFilters["riskStatus"],
+                      }))
+                    }
+                    aria-label="위험상태"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  >
+                    <option value="ALL">전체</option>
+                    <option value="DANGER">위험</option>
+                    <option value="NORMAL">정상</option>
+                  </select>
+              </label>
+              <div className="sn-popup-actions">
+                  <Button
+                    type="button"
+                    size="sm"
+                    color="primary"
+                    className="sn-popup-primary-button"
+                    onClick={handleApplyResultFilters}
+                  >
+                    조회
+                  </Button>
+                  <Button
+                    type="button"
+                    size="sm"
+                    color="white"
+                    className={SECONDARY_BUTTON_CLASS_NAME}
+                    onClick={handleOpenSettingView}
+                  >
+                    설정
+                  </Button>
+              </div>
+            </div>
+
+            <div className="card-header">
+              <h3 className="text-2xl font-medium text-label">
+                통수위험 분석 결과 {visibleResultRows.length.toLocaleString("ko-KR")}건
+              </h3>
+            </div>
+
+            <div className={RESULT_TABLE_CONTAINER_CLASS_NAME}>
+              <div className="overflow-x-auto overflow-y-hidden">
+                <table
+                  className="sn-popup-grid-table"
+                  style={{ minWidth: `${resultTableMinWidth}px`, width: "100%" }}
+                >
+                  <thead>
+                    <tr className="sn-popup-grid-head-row">
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">no</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">시도</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">시군구</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">중점관리지역</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">예측강우량(mm)</th>
+                      {Array.from({ length: maxPipeCount }).map((_, index) => (
+                        <th
+                          key={`pipe-group-${index + 1}`}
+                          colSpan={2}
+                          className="sn-popup-grid-head-cell"
+                        >
+                          관로 ID {index + 1}
+                        </th>
+                      ))}
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">통수위험</th>
+                    </tr>
+                    <tr className="sn-popup-grid-head-row">
+                      {Array.from({ length: maxPipeCount }).map((_, index) => (
+                        <Fragment key={`pipe-sub-${index + 1}`}>
+                          <th className="sn-popup-grid-head-cell-sub">유출유량(㎥/hr)</th>
+                          <th className="sn-popup-grid-head-cell-sub">통수량(㎥/hr)</th>
+                        </Fragment>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {pagedResultRows.map((row, index) => {
+                      const isSelected = row.areaId === selectedResultAreaId;
+                      const rowNumber =
+                        (resultCurrentPage - 1) * WATER_RISK_PAGE_SIZE + index + 1;
+
+                      return (
+                        <tr
+                          key={row.areaId}
+                          className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row sn-popup-grid-row-hover"}`}
+                          onClick={() => 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>
+                          <td className="sn-popup-grid-cell text-right">{row.forecastRainQty.toFixed(1)}</td>
+                          {Array.from({ length: maxPipeCount }).map((_, pipeIndex) => {
+                            const pipe = row.pipeSummaries[pipeIndex];
+                            return (
+                              <Fragment key={`${row.areaId}-pipe-${pipeIndex}`}>
+                                <td className="sn-popup-grid-cell text-right">
+                                  {pipe ? pipe.runoffFlowQty.toFixed(1) : ""}
+                                </td>
+                                <td className="sn-popup-grid-cell text-right">
+                                  {pipe ? pipe.conveyQty.toFixed(1) : ""}
+                                </td>
+                              </Fragment>
+                            );
+                          })}
+                          <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>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {visibleResultRows.length > WATER_RISK_PAGE_SIZE ? (
+              <div className="flex justify-center">
+                <UiPageNations
+                  total={visibleResultRows.length}
+                  cur={resultCurrentPage}
+                  pageSize={WATER_RISK_PAGE_SIZE}
+                  onPageChange={setResultCurrentPage}
+                />
+              </div>
+            ) : null}
+          </section>
+        ) : (
+          <section className="flex h-full min-h-0 flex-col gap-3">
+            <div className="sn-popup-filter-panel md:grid-cols-[160px_160px_220px_auto] md:items-end">
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시도</div>
+                  <select
+                    value={draftSettingFilters.sidoName}
+                    onChange={(event) =>
+                      setDraftSettingFilters((current) => ({
+                        ...current,
+                        sidoName: event.target.value,
+                        sggName: "전체",
+                      }))
+                    }
+                    aria-label="시도"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  >
+                    {WATER_RISK_SIDO_OPTIONS.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+              </label>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시군구</div>
+                  <select
+                    value={draftSettingFilters.sggName}
+                    onChange={(event) =>
+                      setDraftSettingFilters((current) => ({
+                        ...current,
+                        sggName: event.target.value,
+                      }))
+                    }
+                    aria-label="시군구"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  >
+                    {settingSggOptions.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+              </label>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">중점관리지역</div>
+                  <select
+                    value={draftSettingFilters.areaId}
+                    onChange={(event) =>
+                      setDraftSettingFilters((current) => ({
+                        ...current,
+                        areaId: event.target.value,
+                      }))
+                    }
+                    aria-label="중점관리지역"
+                    className={TOOLBAR_INPUT_CLASS_NAME}
+                  >
+                    <option value="ALL">중점관리지역</option>
+                    {settingAreaOptions.map((option) => (
+                      <option key={option.areaId} value={option.areaId}>
+                        {option.areaName}
+                      </option>
+                    ))}
+                  </select>
+              </label>
+              <div className="sn-popup-actions">
+                  <Button
+                    type="button"
+                    size="sm"
+                    color="primary"
+                    className="sn-popup-primary-button"
+                    onClick={handleApplySettingFilters}
+                  >
+                    조회
+                  </Button>
+              </div>
+            </div>
+
+            <div className="card-header">
+              <h3 className="text-2xl font-medium text-label">
+                통수위험 설정 현황 {visibleSettingRows.length.toLocaleString("ko-KR")}건
+              </h3>
+            </div>
+
+            <div
+              className={`${SETTING_TABLE_CONTAINER_CLASS_NAME} ${showSettingEditor ? "flex-[0_0_44%]" : ""}`}
+            >
+              <div className="overflow-x-auto overflow-y-hidden">
+                <table
+                  className="sn-popup-grid-table"
+                  style={{ minWidth: `${settingTableMinWidth}px`, width: "100%" }}
+                >
+                  <thead className="sn-popup-grid-head-row">
+                    <tr>
+                      <th className="sn-popup-grid-head-cell">시도</th>
+                      <th className="sn-popup-grid-head-cell">시군구</th>
+                      <th className="sn-popup-grid-head-cell">중점관리지역</th>
+                      <th className="sn-popup-grid-head-cell">유출관로ID</th>
+                      <th className="sn-popup-grid-head-cell">관경</th>
+                      <th className="sn-popup-grid-head-cell">연장</th>
+                      <th className="sn-popup-grid-head-cell">재질</th>
+                      <th className="sn-popup-grid-head-cell">설정순번</th>
+                      <th className="sn-popup-grid-head-cell">설정완료여부</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {pagedSettingRows.map((row, index) => {
+                      const isSelected =
+                        row.areaId === (selectedSettingAreaId || snapshot.selectedSettingAreaId);
+
+                      return (
+                        <tr
+                          key={`${row.areaId}-${row.pipeId}`}
+                          className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row sn-popup-grid-row-hover"}`}
+                          onClick={() => handleSelectSettingArea(row.areaId)}
+                        >
+                          <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>
+                          <td className="sn-popup-grid-cell">{row.pipeId}</td>
+                          <td className="sn-popup-grid-cell">{row.pipeDia}</td>
+                          <td className="sn-popup-grid-cell">{row.pipeLen}</td>
+                          <td className="sn-popup-grid-cell">{row.pipeMaterial}</td>
+                          <td className="sn-popup-grid-cell text-center">{row.setSeq}</td>
+                          <td className="sn-popup-grid-cell text-center">
+                            {row.setCompleteYn === "Y" ? "완료" : "미완료"}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {visibleSettingRows.length > WATER_RISK_PAGE_SIZE ? (
+              <div className="flex justify-center">
+                <UiPageNations
+                  total={visibleSettingRows.length}
+                  cur={settingCurrentPage}
+                  pageSize={WATER_RISK_PAGE_SIZE}
+                  onPageChange={setSettingCurrentPage}
+                />
+              </div>
+            ) : null}
+
+            {showSettingEditor ? (
+              <div className="sn-popup-card min-h-0 flex-1">
+                <div className="flex h-full min-h-0 flex-col">
+                  <div className="flex items-center justify-between border-b border-border bg-secondary px-4 py-3">
+                    <div className="sn-popup-panel-title">
+                      설정 편집 대상: {currentSettingAreaName || "선택 전"}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        size="sm"
+                        color="white"
+                        className="sn-popup-secondary-button-sm"
+                        onClick={handleStopSettingEdit}
+                      >
+                        편집 종료
+                      </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        color="white"
+                        className="sn-popup-secondary-button-sm"
+                        onClick={handleClearStagedPipes}
+                        disabled={snapshot.stagedPipes.length === 0}
+                      >
+                        목록 초기화
+                      </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        color="primary"
+                        className={ACTION_BUTTON_CLASS_NAME}
+                        onClick={handlePreviewSave}
+                      >
+                        저장 preview
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="min-h-0 flex-1 overflow-auto">
+                    <table className="sn-popup-grid-table">
+                      <thead className="sn-popup-grid-head-row-strong">
+                        <tr>
+                          <th className="sn-popup-grid-head-cell">순번</th>
+                          <th className="sn-popup-grid-head-cell">유출관로ID</th>
+                          <th className="sn-popup-grid-head-cell">관경</th>
+                          <th className="sn-popup-grid-head-cell">연장</th>
+                          <th className="sn-popup-grid-head-cell">재질</th>
+                          <th className="sn-popup-grid-head-cell">선택원천</th>
+                          <th className="sn-popup-grid-head-cell">조작</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {snapshot.stagedPipes.length === 0 ? (
+                          <tr>
+                            <td
+                              colSpan={7}
+                              className="sn-popup-grid-cell sn-popup-empty-cell px-3 py-6 text-center"
+                            >
+                              staged 유출관로가 없습니다. 지도에서 하수관로를 선택하세요.
+                            </td>
+                          </tr>
+                        ) : (
+                          snapshot.stagedPipes.map((pipe, index) => (
+                            <tr
+                              key={pipe.pipeId}
+                              className="sn-popup-grid-row"
+                            >
+                              <td className="sn-popup-grid-cell text-center">{index + 1}</td>
+                              <td className="sn-popup-grid-cell font-semibold">{pipe.pipeId}</td>
+                              <td className="sn-popup-grid-cell">{pipe.pipeDia}</td>
+                              <td className="sn-popup-grid-cell">{pipe.pipeLen}</td>
+                              <td className="sn-popup-grid-cell">{pipe.pipeMaterial}</td>
+                              <td className="sn-popup-grid-cell">{pipe.source}</td>
+                              <td className="sn-popup-grid-cell">
+                                <div className="flex items-center gap-1">
+                                  <Button
+                                    type="button"
+                                    size="sm"
+                                    color="white"
+                                    className="sn-popup-secondary-button-sm"
+                                    onClick={() => handleMoveStagedPipe(pipe.pipeId, "UP")}
+                                    disabled={index === 0}
+                                  >
+                                    위
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    size="sm"
+                                    color="white"
+                                    className="sn-popup-secondary-button-sm"
+                                    onClick={() => handleMoveStagedPipe(pipe.pipeId, "DOWN")}
+                                    disabled={index === snapshot.stagedPipes.length - 1}
+                                  >
+                                    아래
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    size="sm"
+                                    color="white"
+                                    className="sn-popup-danger-button-sm"
+                                    onClick={() => handleRemoveStagedPipe(pipe.pipeId)}
+                                  >
+                                    삭제
+                                  </Button>
+                                </div>
+                              </td>
+                            </tr>
+                          ))
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </section>
+        )}
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/app/(map-layout)/map/components/waterRisk/waterRiskTypes.ts b/apps/sn/app/(map-layout)/map/components/waterRisk/waterRiskTypes.ts
new file mode 100644
index 000000000..ad94da2e3
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map/components/waterRisk/waterRiskTypes.ts
@@ -0,0 +1,936 @@
+"use client";
+
+export type WaterRiskStatus = "DANGER" | "NORMAL";
+export type WaterRiskCalculationMethod = "METHOD_1" | "METHOD_2";
+export type WaterRiskTab = "result" | "setting";
+
+export type WaterRiskPipeSummary = {
+  pipeId: string;
+  runoffFlowQty: number;
+  conveyQty: number;
+};
+
+export type WaterRiskResultRow = {
+  areaId: string;
+  areaName: string;
+  sidoName: string;
+  sggName: string;
+  forecastRainQty: number;
+  riskStatus: WaterRiskStatus;
+  calculationMethod: WaterRiskCalculationMethod;
+  pipeSummaries: WaterRiskPipeSummary[];
+};
+
+export type WaterRiskSettingRow = {
+  areaId: string;
+  areaName: string;
+  sidoName: string;
+  sggName: string;
+  pipeId: string;
+  pipeDia: string;
+  pipeLen: string;
+  pipeMaterial: string;
+  setSeq: number;
+  setCompleteYn: "Y" | "N";
+};
+
+export type WaterRiskStagedPipe = {
+  pipeId: string;
+  pipeDia: string;
+  pipeLen: string;
+  pipeMaterial: string;
+  setSeq: number;
+  source: "MAP" | "MOCK";
+};
+
+export type WaterRiskGridCell = {
+  gridId: string;
+  rainQty: number;
+  colorLevel: "LEVEL_1" | "LEVEL_2" | "LEVEL_3" | "LEVEL_4";
+  polygonCoordinates: number[][][];
+};
+
+export type WaterRiskAreaMapData = {
+  areaId: string;
+  areaName: string;
+  polygonCoordinates: number[][][];
+  gridCells: WaterRiskGridCell[];
+};
+
+export type WaterRiskMapPipe = {
+  pipeId: string;
+  displayLabel: string;
+  lineCoordinates: number[][];
+};
+
+export type WaterRiskSessionSnapshot = {
+  selectedAreaId: string | null;
+  selectedSettingAreaId: string | null;
+  selectedSettingAreaName: string;
+  isSettingEditMode: boolean;
+  stagedPipes: WaterRiskStagedPipe[];
+  statusMessage: string;
+};
+
+export const EMPTY_WATER_RISK_SESSION_SNAPSHOT: WaterRiskSessionSnapshot = {
+  selectedAreaId: null,
+  selectedSettingAreaId: null,
+  selectedSettingAreaName: "",
+  isSettingEditMode: false,
+  stagedPipes: [],
+  statusMessage: "",
+};
+
+const buildRectanglePolygon = (
+  centerX: number,
+  centerY: number,
+  halfWidth: number,
+  halfHeight: number,
+) => {
+  return [[
+    [centerX - halfWidth, centerY - halfHeight],
+    [centerX + halfWidth, centerY - halfHeight],
+    [centerX + halfWidth, centerY + halfHeight],
+    [centerX - halfWidth, centerY + halfHeight],
+    [centerX - halfWidth, centerY - halfHeight],
+  ]];
+};
+
+const buildGridCells = (
+  centerX: number,
+  centerY: number,
+  values: number[],
+): WaterRiskGridCell[] => {
+  const cellHalfSize = 180;
+  const offsets = [
+    [-190, 190],
+    [190, 190],
+    [-190, -190],
+    [190, -190],
+  ] as const;
+
+  return offsets.map(([offsetX, offsetY], index) => {
+    const rainQty = values[index] ?? values[values.length - 1] ?? 0;
+    const colorLevel = rainQty >= 40
+      ? "LEVEL_4"
+      : rainQty >= 30
+        ? "LEVEL_3"
+        : rainQty >= 20
+          ? "LEVEL_2"
+          : "LEVEL_1";
+
+    return {
+      gridId: `GRID-${index + 1}`,
+      rainQty,
+      colorLevel,
+      polygonCoordinates: buildRectanglePolygon(
+        centerX + offsetX,
+        centerY + offsetY,
+        cellHalfSize,
+        cellHalfSize,
+      ),
+    };
+  });
+};
+
+export const WATER_RISK_RESULT_ROWS: WaterRiskResultRow[] = [
+  {
+    areaId: "AREA-001",
+    areaName: "A 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 42.0,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-10284", runoffFlowQty: 18.5, conveyQty: 15.2 },
+      { pipeId: "PIPE-10291", runoffFlowQty: 11.3, conveyQty: 12.8 },
+    ],
+  },
+  {
+    areaId: "AREA-002",
+    areaName: "B 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 31.4,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-45103", runoffFlowQty: 9.8, conveyQty: 14.7 },
+    ],
+  },
+  {
+    areaId: "AREA-003",
+    areaName: "C 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 37.8,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-60014", runoffFlowQty: 16.1, conveyQty: 12.9 },
+      { pipeId: "PIPE-60018", runoffFlowQty: 10.2, conveyQty: 11.1 },
+      { pipeId: "PIPE-60021", runoffFlowQty: 8.7, conveyQty: 9.5 },
+    ],
+  },
+  {
+    areaId: "AREA-004",
+    areaName: "D 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 24.3,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-72010", runoffFlowQty: 7.2, conveyQty: 11.4 },
+      { pipeId: "PIPE-72018", runoffFlowQty: 6.1, conveyQty: 9.8 },
+    ],
+  },
+  {
+    areaId: "AREA-005",
+    areaName: "E 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 28.6,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-83014", runoffFlowQty: 8.3, conveyQty: 12.1 },
+    ],
+  },
+  {
+    areaId: "AREA-006",
+    areaName: "F 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 45.1,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-83018", runoffFlowQty: 17.4, conveyQty: 12.3 },
+      { pipeId: "PIPE-83019", runoffFlowQty: 13.6, conveyQty: 10.1 },
+    ],
+  },
+  {
+    areaId: "AREA-007",
+    areaName: "G 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 33.2,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-91004", runoffFlowQty: 9.7, conveyQty: 12.5 },
+    ],
+  },
+  {
+    areaId: "AREA-008",
+    areaName: "H 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 39.4,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-91010", runoffFlowQty: 15.5, conveyQty: 11.6 },
+      { pipeId: "PIPE-91012", runoffFlowQty: 12.4, conveyQty: 10.8 },
+      { pipeId: "PIPE-91014", runoffFlowQty: 9.2, conveyQty: 9.0 },
+    ],
+  },
+  {
+    areaId: "AREA-009",
+    areaName: "I 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 26.1,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-99001", runoffFlowQty: 6.7, conveyQty: 10.4 },
+    ],
+  },
+  {
+    areaId: "AREA-010",
+    areaName: "J 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 41.8,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-99007", runoffFlowQty: 14.8, conveyQty: 10.9 },
+      { pipeId: "PIPE-99009", runoffFlowQty: 10.1, conveyQty: 9.7 },
+    ],
+  },
+  {
+    areaId: "AREA-011",
+    areaName: "K 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 29.7,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-11001", runoffFlowQty: 8.8, conveyQty: 12.5 },
+      { pipeId: "PIPE-11002", runoffFlowQty: 7.9, conveyQty: 11.4 },
+    ],
+  },
+  {
+    areaId: "AREA-012",
+    areaName: "L 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 43.6,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-12001", runoffFlowQty: 16.7, conveyQty: 12.2 },
+    ],
+  },
+  {
+    areaId: "AREA-013",
+    areaName: "M 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 35.2,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-13001", runoffFlowQty: 14.4, conveyQty: 11.6 },
+      { pipeId: "PIPE-13002", runoffFlowQty: 10.5, conveyQty: 10.9 },
+      { pipeId: "PIPE-13003", runoffFlowQty: 8.6, conveyQty: 9.3 },
+    ],
+  },
+  {
+    areaId: "AREA-014",
+    areaName: "N 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 21.9,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-14001", runoffFlowQty: 5.8, conveyQty: 8.7 },
+    ],
+  },
+  {
+    areaId: "AREA-015",
+    areaName: "O 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 47.3,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-15001", runoffFlowQty: 18.2, conveyQty: 13.4 },
+      { pipeId: "PIPE-15002", runoffFlowQty: 12.7, conveyQty: 10.8 },
+    ],
+  },
+  {
+    areaId: "AREA-016",
+    areaName: "P 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 27.5,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-16001", runoffFlowQty: 7.1, conveyQty: 10.3 },
+      { pipeId: "PIPE-16002", runoffFlowQty: 6.2, conveyQty: 9.8 },
+    ],
+  },
+  {
+    areaId: "AREA-017",
+    areaName: "Q 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 32.8,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-17001", runoffFlowQty: 9.9, conveyQty: 11.7 },
+    ],
+  },
+  {
+    areaId: "AREA-018",
+    areaName: "R 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 44.9,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-18001", runoffFlowQty: 17.1, conveyQty: 12.4 },
+      { pipeId: "PIPE-18002", runoffFlowQty: 13.4, conveyQty: 10.6 },
+      { pipeId: "PIPE-18003", runoffFlowQty: 9.8, conveyQty: 9.1 },
+    ],
+  },
+  {
+    areaId: "AREA-019",
+    areaName: "S 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    forecastRainQty: 23.4,
+    riskStatus: "NORMAL",
+    calculationMethod: "METHOD_1",
+    pipeSummaries: [
+      { pipeId: "PIPE-19001", runoffFlowQty: 6.4, conveyQty: 9.6 },
+    ],
+  },
+  {
+    areaId: "AREA-020",
+    areaName: "T 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    forecastRainQty: 40.7,
+    riskStatus: "DANGER",
+    calculationMethod: "METHOD_2",
+    pipeSummaries: [
+      { pipeId: "PIPE-20001", runoffFlowQty: 15.2, conveyQty: 11.4 },
+      { pipeId: "PIPE-20002", runoffFlowQty: 11.9, conveyQty: 10.1 },
+    ],
+  },
+];
+
+export const WATER_RISK_SETTING_ROWS: WaterRiskSettingRow[] = [
+  {
+    areaId: "AREA-001",
+    areaName: "A 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-10284",
+    pipeDia: "900 mm",
+    pipeLen: "186 m",
+    pipeMaterial: "콘크리트",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-001",
+    areaName: "A 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-10291",
+    pipeDia: "700 mm",
+    pipeLen: "142 m",
+    pipeMaterial: "흄관",
+    setSeq: 2,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-002",
+    areaName: "B 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-45103",
+    pipeDia: "600 mm",
+    pipeLen: "98 m",
+    pipeMaterial: "PE",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-003",
+    areaName: "C 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-60014",
+    pipeDia: "800 mm",
+    pipeLen: "154 m",
+    pipeMaterial: "강관",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-003",
+    areaName: "C 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-60018",
+    pipeDia: "700 mm",
+    pipeLen: "119 m",
+    pipeMaterial: "흄관",
+    setSeq: 2,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-004",
+    areaName: "D 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-72010",
+    pipeDia: "500 mm",
+    pipeLen: "101 m",
+    pipeMaterial: "PVC",
+    setSeq: 1,
+    setCompleteYn: "N",
+  },
+  {
+    areaId: "AREA-005",
+    areaName: "E 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-83014",
+    pipeDia: "650 mm",
+    pipeLen: "133 m",
+    pipeMaterial: "PE",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-006",
+    areaName: "F 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-83018",
+    pipeDia: "900 mm",
+    pipeLen: "176 m",
+    pipeMaterial: "흄관",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-006",
+    areaName: "F 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-83019",
+    pipeDia: "800 mm",
+    pipeLen: "167 m",
+    pipeMaterial: "콘크리트",
+    setSeq: 2,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-007",
+    areaName: "G 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-91004",
+    pipeDia: "700 mm",
+    pipeLen: "111 m",
+    pipeMaterial: "PVC",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-008",
+    areaName: "H 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-91010",
+    pipeDia: "1000 mm",
+    pipeLen: "201 m",
+    pipeMaterial: "강관",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-008",
+    areaName: "H 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-91012",
+    pipeDia: "900 mm",
+    pipeLen: "184 m",
+    pipeMaterial: "흄관",
+    setSeq: 2,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-008",
+    areaName: "H 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-91014",
+    pipeDia: "800 mm",
+    pipeLen: "159 m",
+    pipeMaterial: "콘크리트",
+    setSeq: 3,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-009",
+    areaName: "I 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-99001",
+    pipeDia: "600 mm",
+    pipeLen: "94 m",
+    pipeMaterial: "PE",
+    setSeq: 1,
+    setCompleteYn: "N",
+  },
+  {
+    areaId: "AREA-010",
+    areaName: "J 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-99007",
+    pipeDia: "850 mm",
+    pipeLen: "143 m",
+    pipeMaterial: "흄관",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-010",
+    areaName: "J 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-99009",
+    pipeDia: "750 mm",
+    pipeLen: "128 m",
+    pipeMaterial: "강관",
+    setSeq: 2,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-011",
+    areaName: "K 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-11001",
+    pipeDia: "700 mm",
+    pipeLen: "121 m",
+    pipeMaterial: "콘크리트",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-012",
+    areaName: "L 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-12001",
+    pipeDia: "820 mm",
+    pipeLen: "147 m",
+    pipeMaterial: "강관",
+    setSeq: 1,
+    setCompleteYn: "N",
+  },
+  {
+    areaId: "AREA-013",
+    areaName: "M 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-13001",
+    pipeDia: "900 mm",
+    pipeLen: "163 m",
+    pipeMaterial: "흄관",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-013",
+    areaName: "M 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-13002",
+    pipeDia: "800 mm",
+    pipeLen: "152 m",
+    pipeMaterial: "콘크리트",
+    setSeq: 2,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-014",
+    areaName: "N 중점관리지역",
+    sidoName: "부산광역시",
+    sggName: "해운대구",
+    pipeId: "PIPE-14001",
+    pipeDia: "500 mm",
+    pipeLen: "88 m",
+    pipeMaterial: "PVC",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+  {
+    areaId: "AREA-015",
+    areaName: "O 중점관리지역",
+    sidoName: "서울특별시",
+    sggName: "강남구",
+    pipeId: "PIPE-15001",
+    pipeDia: "980 mm",
+    pipeLen: "194 m",
+    pipeMaterial: "강관",
+    setSeq: 1,
+    setCompleteYn: "Y",
+  },
+];
+
+export const WATER_RISK_MAP_AREAS: WaterRiskAreaMapData[] = [
+  {
+    areaId: "AREA-001",
+    areaName: "A 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(955300, 1948770, 360, 240),
+    gridCells: buildGridCells(955300, 1948770, [38.2, 42.0, 31.5, 28.4]),
+  },
+  {
+    areaId: "AREA-002",
+    areaName: "B 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(954480, 1948350, 320, 210),
+    gridCells: buildGridCells(954480, 1948350, [22.4, 24.1, 20.5, 18.9]),
+  },
+  {
+    areaId: "AREA-003",
+    areaName: "C 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(956260, 1948220, 390, 250),
+    gridCells: buildGridCells(956260, 1948220, [35.1, 37.8, 32.4, 29.6]),
+  },
+  {
+    areaId: "AREA-004",
+    areaName: "D 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(957020, 1948660, 300, 210),
+    gridCells: buildGridCells(957020, 1948660, [19.3, 24.3, 21.7, 17.8]),
+  },
+  {
+    areaId: "AREA-005",
+    areaName: "E 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(954900, 1949020, 290, 200),
+    gridCells: buildGridCells(954900, 1949020, [24.8, 28.6, 22.5, 20.7]),
+  },
+  {
+    areaId: "AREA-006",
+    areaName: "F 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(955980, 1949040, 330, 220),
+    gridCells: buildGridCells(955980, 1949040, [41.7, 45.1, 36.2, 31.5]),
+  },
+  {
+    areaId: "AREA-007",
+    areaName: "G 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(956760, 1947990, 280, 190),
+    gridCells: buildGridCells(956760, 1947990, [27.4, 33.2, 24.2, 21.1]),
+  },
+  {
+    areaId: "AREA-008",
+    areaName: "H 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(957420, 1948090, 340, 230),
+    gridCells: buildGridCells(957420, 1948090, [34.7, 39.4, 32.8, 28.6]),
+  },
+  {
+    areaId: "AREA-009",
+    areaName: "I 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(954020, 1947900, 260, 180),
+    gridCells: buildGridCells(954020, 1947900, [18.4, 26.1, 17.6, 15.9]),
+  },
+  {
+    areaId: "AREA-010",
+    areaName: "J 중점관리지역",
+    polygonCoordinates: buildRectanglePolygon(957980, 1948900, 300, 210),
+    gridCells: buildGridCells(957980, 1948900, [37.9, 41.8, 33.8, 29.4]),
+  },
+];
+
+export const WATER_RISK_MAP_PIPES_BY_AREA: Record<string, WaterRiskMapPipe[]> = {
+  "AREA-001": [
+    {
+      pipeId: "PIPE-10284",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [955020, 1948450],
+        [955210, 1948570],
+        [955320, 1948690],
+      ],
+    },
+    {
+      pipeId: "PIPE-10291",
+      displayLabel: "관로 ID 2",
+      lineCoordinates: [
+        [955350, 1948820],
+        [955470, 1948680],
+        [955560, 1948550],
+      ],
+    },
+  ],
+  "AREA-002": [
+    {
+      pipeId: "PIPE-45103",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [954230, 1948500],
+        [954360, 1948420],
+        [954520, 1948340],
+      ],
+    },
+  ],
+  "AREA-003": [
+    {
+      pipeId: "PIPE-60014",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [956000, 1948420],
+        [956110, 1948320],
+        [956220, 1948210],
+      ],
+    },
+    {
+      pipeId: "PIPE-60018",
+      displayLabel: "관로 ID 2",
+      lineCoordinates: [
+        [956180, 1948480],
+        [956270, 1948360],
+        [956410, 1948240],
+      ],
+    },
+    {
+      pipeId: "PIPE-60021",
+      displayLabel: "관로 ID 3",
+      lineCoordinates: [
+        [956420, 1948420],
+        [956520, 1948340],
+        [956650, 1948240],
+      ],
+    },
+  ],
+  "AREA-004": [
+    {
+      pipeId: "PIPE-72010",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [956770, 1948790],
+        [956900, 1948720],
+        [957050, 1948650],
+      ],
+    },
+    {
+      pipeId: "PIPE-72018",
+      displayLabel: "관로 ID 2",
+      lineCoordinates: [
+        [956980, 1948840],
+        [957090, 1948740],
+        [957210, 1948640],
+      ],
+    },
+  ],
+  "AREA-005": [
+    {
+      pipeId: "PIPE-83014",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [954710, 1949160],
+        [954840, 1949080],
+        [954980, 1949000],
+      ],
+    },
+  ],
+  "AREA-006": [
+    {
+      pipeId: "PIPE-83018",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [955760, 1949180],
+        [955910, 1949100],
+        [956030, 1949020],
+      ],
+    },
+    {
+      pipeId: "PIPE-83019",
+      displayLabel: "관로 ID 2",
+      lineCoordinates: [
+        [955980, 1949240],
+        [956120, 1949140],
+        [956240, 1949040],
+      ],
+    },
+  ],
+  "AREA-007": [
+    {
+      pipeId: "PIPE-91004",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [956520, 1948120],
+        [956660, 1948050],
+        [956820, 1947980],
+      ],
+    },
+  ],
+  "AREA-008": [
+    {
+      pipeId: "PIPE-91010",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [957150, 1948220],
+        [957300, 1948160],
+        [957470, 1948100],
+      ],
+    },
+    {
+      pipeId: "PIPE-91012",
+      displayLabel: "관로 ID 2",
+      lineCoordinates: [
+        [957350, 1948290],
+        [957480, 1948200],
+        [957610, 1948110],
+      ],
+    },
+    {
+      pipeId: "PIPE-91014",
+      displayLabel: "관로 ID 3",
+      lineCoordinates: [
+        [957540, 1948340],
+        [957670, 1948220],
+        [957790, 1948100],
+      ],
+    },
+  ],
+  "AREA-009": [
+    {
+      pipeId: "PIPE-99001",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [953810, 1948010],
+        [953940, 1947960],
+        [954080, 1947910],
+      ],
+    },
+  ],
+  "AREA-010": [
+    {
+      pipeId: "PIPE-99007",
+      displayLabel: "관로 ID 1",
+      lineCoordinates: [
+        [957750, 1949040],
+        [957900, 1948970],
+        [958040, 1948900],
+      ],
+    },
+    {
+      pipeId: "PIPE-99009",
+      displayLabel: "관로 ID 2",
+      lineCoordinates: [
+        [957980, 1949120],
+        [958120, 1949010],
+        [958260, 1948900],
+      ],
+    },
+  ],
+};
+
+export const WATER_RISK_SIDO_OPTIONS = ["전체", "서울특별시", "부산광역시"];
+
+export const WATER_RISK_SGG_OPTIONS_BY_SIDO: Record<string, string[]> = {
+  전체: ["전체", "강남구", "해운대구"],
+  서울특별시: ["전체", "강남구"],
+  부산광역시: ["전체", "해운대구"],
+};
+
+export const WATER_RISK_PIPE_LAYER_TYPE = "tb_ms_swage_ppl";
+
+export const WATER_RISK_COLOR_LABELS: Record<WaterRiskGridCell["colorLevel"], string> = {
+  LEVEL_1: "0.0~20.0 미만",
+  LEVEL_2: "20.0~30.0 미만",
+  LEVEL_3: "30.0~40.0 미만",
+  LEVEL_4: "40.0 이상",
+};
+
+export const buildWaterRiskStatusLabel = (status: WaterRiskStatus) =>
+  status === "DANGER" ? "위험" : "정상";
+
+export const buildWaterRiskMethodLabel = (method: WaterRiskCalculationMethod) =>
+  method === "METHOD_1" ? "방법 1" : "방법 2";
+
+export const buildWaterRiskSettingAreaName = (areaId: string | null) => {
+  if (!areaId) return "";
+  return WATER_RISK_RESULT_ROWS.find((row) => row.areaId === areaId)?.areaName ?? "";
+};
diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx
index 7618ec521..853fe2b1d 100644
--- a/apps/sn/app/(map-layout)/map/page.tsx
+++ b/apps/sn/app/(map-layout)/map/page.tsx
@@ -18,46 +18,121 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import Gis from "@common/business_components/ui/map/Gis";
-import { getData, getRawJson } from "../../components/lib/api";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+import Collection from "ol/Collection.js";
+import Feature from "ol/Feature.js";
 import GeoJSON from "ol/format/GeoJSON.js";
+import CircleGeom from "ol/geom/Circle.js";
+import Draw from "ol/interaction/Draw.js";
+import Snap from "ol/interaction/Snap.js";
+import Translate from "ol/interaction/Translate.js";
+import Fill from "ol/style/Fill.js";
+import LineString from "ol/geom/LineString.js";
 import Point from "ol/geom/Point.js";
+import Polygon from "ol/geom/Polygon.js";
 import VectorLayer from "ol/layer/Vector.js";
 import { unByKey } from "ol/Observable.js";
 import VectorSource from "ol/source/Vector.js";
+import CircleStyle from "ol/style/Circle.js";
 import Stroke from "ol/style/Stroke.js";
 import Style from "ol/style/Style.js";
-import SearchModal from "./searchModal/searchModal";
-import FeatureClickEventPopup from "./components/popupComponent/featureClickEventPopup";
-import { WaterDepth, WATER_DEPTH_LAYER_TYPES } from "./waterDepth/waterDepth";
+import Text from "ol/style/Text.js";
+
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+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";
 import { ProcSearchBar } from "@common/business_components/ui/map/searchBar";
 import { Button } from "@common/components";
+
+import { getData, getRawJson, postRawJson } from "../../components/lib/api";
 import useSearchModalStore from "@/store/useSearchModalStore";
 import useStore from "@/store/useStore";
+import { useUserStore } from "@/shared/lib/use-user-store";
+
 import AgedPipeLayerSettingPanel from "./components/agedPipe/AgedPipeLayerSettingPanel";
-import type { PipeAnalysisDetailRow } from "./components/pipeAnalysis/pipeAnalysisUtils";
+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 {
+  PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE,
+  type PipeAnalysisDetailRow,
+} from "./components/pipeAnalysis/pipeAnalysisUtils";
+import {
+  AGED_PIPE_DEFAULT_FILTERS,
+  AGED_PIPE_GUIDE_MIN_ZOOM,
   AGED_PIPE_MIN_ZOOM,
   AGED_PIPE_LAYER_TYPE,
   AGED_PIPE_PAGE_SIZE,
+  type AgedPipeFilters,
+  type AgedPipeRow,
   buildAgedPipeCqlFilters,
   isAgedPipeLayerNode,
   matchesAgedPipeFilters,
   normalizeAgedPipeFilters,
   toDisplayPipeRow,
   validateElapsedYears,
-  type AgedPipeFilters,
-  type AgedPipeRow,
-  AGED_PIPE_DEFAULT_FILTERS,
-  AGED_PIPE_GUIDE_MIN_ZOOM,
 } from "./components/agedPipe/agedPipeUtils";
 import { downloadAgedPipeCsv } from "./components/agedPipe/agedPipeExport";
-import { PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE } from "./components/pipeAnalysis/pipeAnalysisUtils";
-import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
-import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
-import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
+import { useInftwtResultMap } from "./components/inftwtResult/useInftwtResultMap";
+import { useRdiiResultMap } from "./components/rdiiResult/useRdiiResultMap";
+import SinkholeDetailPanel from "./components/sinkhole/SinkholeDetailPanel";
+import SinkholeLayerSettingPanel from "./components/sinkhole/SinkholeLayerSettingPanel";
+import FloodHistoryDetailPanel from "./components/floodHistory/FloodHistoryDetailPanel";
+import {
+  buildSinkholeDefaultYearRange,
+  buildSinkholeFiltersFromYearRange,
+  buildSinkholeListQueryString,
+  buildSinkholeScope,
+  isSinkholeLayerNode,
+  isSinkholeRootNode,
+  normalizeSinkholeFilters,
+  normalizeSinkholeYearRange,
+  SINKHOLE_CONTROL_NODE_ID,
+  SINKHOLE_DEFAULT_RADIUS,
+  SINKHOLE_FILTER_SYNC_MESSAGE,
+  SINKHOLE_LAYER_ID,
+  SINKHOLE_LAYER_NAME,
+  SINKHOLE_LAYER_TYPE,
+  SINKHOLE_POPUP_KEY,
+  SINKHOLE_ROW_SELECT_MESSAGE,
+  SINKHOLE_SELECTED_LAYER_ID,
+  SINKHOLE_SYNC_COMPLETED_MESSAGE,
+  type SinkholeDetail,
+  type SinkholeFilters,
+  type SinkholeListItem,
+  type SinkholeNearbyPipe,
+  type SinkholeSyncSummary,
+  type SinkholeYearRange,
+} from "./components/sinkhole/sinkholeTypes";
+import {
+  FLOOD_HISTORY_AREA_LAYER_ID,
+  FLOOD_HISTORY_DEPTH_LAYER_ID,
+  FLOOD_HISTORY_LAYER_TYPE,
+  FLOOD_HISTORY_ROW_SELECT_MESSAGE,
+  FLOOD_HISTORY_POPUP_KEY,
+  isFloodHistoryNode,
+  type FloodHistoryItem,
+} from "./components/floodHistory/floodHistoryTypes";
+import FeatureClickEventPopup from "./components/popupComponent/featureClickEventPopup";
+import SearchModal from "./searchModal/searchModal";
+import { WATER_DEPTH_LAYER_TYPES, extractWaterDepthLegendItems } from "./waterDepth/waterDepth";
+import {
+  buildWaterRiskStatusLabel,
+  EMPTY_WATER_RISK_SESSION_SNAPSHOT,
+  WATER_RISK_MAP_AREAS,
+  WATER_RISK_MAP_PIPES_BY_AREA,
+  WATER_RISK_PIPE_LAYER_TYPE,
+  WATER_RISK_RESULT_ROWS,
+  WATER_RISK_SETTING_ROWS,
+  type WaterRiskSessionSnapshot,
+  type WaterRiskStagedPipe,
+} from "./components/waterRisk/waterRiskTypes";
 
 const AnalysisPopupMenu = dynamic(
   () => import("./components/analysisMenu/AnalysisPopupMenu"),
@@ -69,30 +144,187 @@ const AGED_PIPE_HIGHLIGHT_LAYER_ID = "SN_AGED_PIPE_HIGHLIGHT";
 const AGED_PIPE_ROW_SELECT_MESSAGE = "SN_AGED_PIPE_ROW_SELECT";
 const AGED_PIPE_POPUP_MINIMIZE_MESSAGE = "SN_AGED_PIPE_POPUP_MINIMIZE";
 const AGED_PIPE_FILTER_SYNC_MESSAGE = "SN_AGED_PIPE_FILTER_SYNC";
+const SINKHOLE_DEFAULT_POINT_LIMIT = 2000;
+// 지반침하 지도 포인트와 같은 파란 계열의 기존 레이어 트리 심볼 자산을 재사용한다.
+const SINKHOLE_TREE_ICON_NAME = "SN_SINKHOLE_SPOT_BLUE.png";
 const SOUTH_KOREA_VIEW_EXTENT: [number, number, number, number] = [
-  720000,
-  1445000,
-  1410000,
-  2090000,
+  600000,
+  1300000,
+  1500000,
+  2500000,
 ];
 
 // 유하방향은 GeoServer WMS/WFS 레이어가 아니라 BE 보정 GeoJSON API로 그리는 가상 레이어이다.
 const FLOW_DIRECTION_LAYER_TYPE = "tb_sn_swage_ppl_flow_direction";
 const FLOW_DIRECTION_LAYER_NAME = "유하방향";
+const FLOW_DIRECTION_PIPE_LAYER_TYPE = "tb_ms_swage_ppl";
 const FLOW_DIRECTION_SRS = "EPSG:5179";
 const FLOW_DIRECTION_DEFAULT_MIN_ZOOM = 13;
-const FLOW_DIRECTION_DEFAULT_LIMIT = 5000;
 const FLOW_DIRECTION_DEFAULT_COLOR = "rgba(40, 90, 180, 0.84)";
+const FLOW_DIRECTION_NETWORK_CORRECTION_COLOR = "rgba(0, 168, 132, 0.95)";
 const FLOW_DIRECTION_BBOX_BUFFER_RATIO = 0.35;
-const FLOW_DIRECTION_CACHE_MAX_FEATURES = 10000;
+const GIS_EDIT_PIPE_SNAP_BBOX_BUFFER_RATIO = 0.15;
+const GIS_EDIT_PREVIEW_LAYER_ID = "SN_GIS_EDIT_PREVIEW";
+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 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";
+
+type RightPanelTabKind = "feature" | "sinkhole" | "gisEdit";
+type RightPanelTabCategory =
+  | "sinkhole"
+  | "pipe"
+  | "treatmentFacility"
+  | "treatmentZone"
+  | "defaultFeature"
+  | "gisEdit";
+
+type RightPanelTab = {
+  id: string;
+  kind: RightPanelTabKind;
+  category: RightPanelTabCategory;
+  displayLabel: string;
+  parentTabId?: string | null;
+  featureData: any;
+  sinkholeDetail?: SinkholeDetail | null;
+  nearbyPipes?: SinkholeNearbyPipe[];
+  gisEditChangeId?: string | null;
+  lastActiveAt: number;
+};
+
+type RightPanelTabStyle = {
+  active: string;
+  inactive: string;
+};
+
+type RightPanelBookmarkTabsProps = {
+  tabs: RightPanelTab[];
+  activeTabId: string | null;
+  onActivate: (tabId: string) => void;
+  onBack: (tabId: string) => void;
+};
+
+// 유형별 의미가 색상과 탭 이름에 함께 드러나도록 정적 class를 사용한다.
+const RIGHT_PANEL_TAB_STYLE_BY_CATEGORY: Record<
+  RightPanelTabCategory,
+  RightPanelTabStyle
+> = {
+  sinkhole: {
+    active: "border-[#d97706] bg-[#d97706] text-white",
+    inactive: "border-[#fdba74] bg-[#fff7ed] text-[#9a3412] hover:bg-[#ffedd5]",
+  },
+  pipe: {
+    active: "border-[#2563eb] bg-[#2563eb] text-white",
+    inactive: "border-[#93c5fd] bg-[#eff6ff] text-[#1e40af] hover:bg-[#dbeafe]",
+  },
+  treatmentFacility: {
+    active: "border-[#15803d] bg-[#15803d] text-white",
+    inactive: "border-[#86efac] bg-[#f0fdf4] text-[#166534] hover:bg-[#dcfce7]",
+  },
+  treatmentZone: {
+    active: "border-[#7e22ce] bg-[#7e22ce] text-white",
+    inactive: "border-[#d8b4fe] bg-[#faf5ff] text-[#6b21a8] hover:bg-[#f3e8ff]",
+  },
+  gisEdit: {
+    active: "border-[#0f766e] bg-[#0f766e] text-white",
+    inactive: "border-[#5eead4] bg-[#f0fdfa] text-[#115e59] hover:bg-[#ccfbf1]",
+  },
+  defaultFeature: {
+    active: "border-[#475569] bg-[#475569] text-white",
+    inactive: "border-[#cbd5e1] bg-[#f8fafc] text-[#334155] hover:bg-[#f1f5f9]",
+  },
+};
+
+// 공용 우측 탭은 유형과 활성 상태에 관계없이 먼저 열린 탭부터 제거한다.
+const findRightPanelTabOverflowCandidate = (
+  tabs: RightPanelTab[],
+  nextTabId: string,
+) => {
+  return tabs.find((tab) => tab.id !== nextTabId) ?? null;
+};
+
+// 부모 지반침하가 제거되면 그 부모에서 열린 연계 관로도 같은 탭 그룹으로 제거한다.
+const removeRightPanelTabGroup = (tabs: RightPanelTab[], removedTabId: string) =>
+  tabs.filter(
+    (tab) => tab.id !== removedTabId && tab.parentTabId !== removedTabId,
+  );
+
+// 오른쪽 상세 패널에 상세가 2개 이상 쌓였을 때만 책갈피형 전환 버튼을 보여준다.
+const RightPanelBookmarkTabs = ({
+  tabs,
+  activeTabId,
+  onActivate,
+  onBack,
+}: RightPanelBookmarkTabsProps) => {
+  if (tabs.length < 2) return null;
+
+  return (
+    <div className="pointer-events-auto absolute right-[350px] top-[92px] z-[70] flex w-[112px] flex-col items-end gap-2">
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        const style = RIGHT_PANEL_TAB_STYLE_BY_CATEGORY[tab.category];
+        const parentTab = tab.parentTabId
+          ? tabs.find((candidate) => candidate.id === tab.parentTabId)
+          : null;
+
+        return (
+          <div
+            key={tab.id}
+            className={[
+              "flex min-h-[42px] w-[112px] items-center border border-r-0 px-1 py-1 shadow-sm transition-colors",
+              isActive ? style.active : style.inactive,
+            ].join(" ")}
+          >
+            {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"
+                title={parentTab.displayLabel + "로 돌아가기"}
+                aria-label={parentTab.displayLabel + "로 돌아가기"}
+                onClick={() => onBack(parentTab.id)}
+              >
+                ←
+              </button>
+            ) : 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"
+              title={tab.displayLabel}
+              aria-pressed={isActive}
+              onClick={() => onActivate(tab.id)}
+            >
+              <span className="block max-h-[2.5rem] overflow-hidden break-all">{tab.displayLabel}</span>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
 
 type FlowDirectionUsageStyle = {
   color: string;
   lineColor: string;
 };
 
+type FlowDirectionMode = "PIPE_START_END" | "PIPE_DEPTH";
+
+// /map은 관로 깊이 기준, /map2는 관로 원천 geometry 시점->종점 기준만 유지한다. 두 화면 모두 BBOX 조회만 사용한다.
+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 SWAGE_PRCS_FCLT_LAYER_TYPE = "tb_il_swage_prcs_fclt";
+
+type SwagePrcsFcltLayerMode = "all" | "gte500" | "lt500" | "none";
 
 // 레이어 설정 응답이 lyrTyNm/lyrTypeNm/lyr_type_nm처럼 혼재되어 내려오는 경우를 단일 기준으로 정규화한다.
 const getLayerTypeName = (layerInfo: any) =>
@@ -102,6 +334,45 @@ const getLayerTypeName = (layerInfo: any) =>
     layerInfo?.lyr_type_nm ??
     "",
   ).trim();
+const getLayerFilterSql = (layerInfo: any) =>
+  String(
+    layerInfo?.filtrSql ??
+    layerInfo?.filtr_sql ??
+    layerInfo?.flterSql ??
+    layerInfo?.filterSql ??
+    layerInfo?.filter_sql ??
+    "",
+  )
+    .replace(/\s+/g, "")
+    .toLowerCase();
+
+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 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";
+
+  return null;
+};
+
+
+const getSwagePrcsFcltLayerMode = (checkedNodesData: any[]): SwagePrcsFcltLayerMode => {
+  const checkedKinds = new Set(
+    checkedNodesData
+      .map((node) => getSwagePrcsFcltCapacityKind(node?.data ?? node))
+      .filter(Boolean),
+  );
+  const hasGte500 = checkedKinds.has("gte500");
+  const hasLt500 = checkedKinds.has("lt500");
+
+  if (hasGte500 && hasLt500) return "all";
+  if (hasGte500) return "gte500";
+  if (hasLt500) return "lt500";
+  return "none";
+};
 
 // 유하방향 노드는 타입명 또는 표시명으로 식별한다. DB DML 반영 전후 응답 차이를 모두 흡수하기 위한 판별 함수이다.
 const isFlowDirectionLayerInfo = (layerInfo: any) => {
@@ -141,15 +412,19 @@ const normalizeFlowDirectionLayerInfos = (data: any[]): any[] => {
 };
 
 // 레이어 설정의 최소 표출 줌을 읽되, 값이 없으면 유하방향 기본 줌 기준을 적용한다.
+const getFiniteNumber = (value: unknown) => {
+  if (value === null || value === undefined || String(value).trim() === "") return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
 const getFlowDirectionMinZoom = (layerInfo: any) => {
-  const minZoom = Number(layerInfo?.minViewSize ?? layerInfo?.minZoom);
-  return Number.isFinite(minZoom) ? minZoom : FLOW_DIRECTION_DEFAULT_MIN_ZOOM;
+  return getFiniteNumber(layerInfo?.minViewSize ?? layerInfo?.minZoom) ?? FLOW_DIRECTION_DEFAULT_MIN_ZOOM;
 };
 
 // 유하방향 화살표는 관로 위에 얹는 보조 레이어라 레이어 설정의 drawOrdr를 우선 사용하고 없으면 높은 zIndex를 준다.
 const getFlowDirectionZIndex = (layerInfo: any) => {
-  const drawOrder = Number(layerInfo?.drawOrdr);
-  return Number.isFinite(drawOrder) ? drawOrder : 9998;
+  return getFiniteNumber(layerInfo?.drawOrdr) ?? 9998;
 };
 
 // BE 응답이 FeatureCollection 그대로 오거나 공통 응답 wrapper의 data 안에 들어오는 두 계약을 모두 처리한다.
@@ -159,6 +434,58 @@ const getFeatureCollection = (payload: any) => {
   return { type: "FeatureCollection", features: [] };
 };
 
+// 지반침하 목록 API가 정상일 때는 x/y를 바로 Point feature로 바꿔 geometry 전용 API 장애를 우회할 수 있다.
+const buildSinkholeFeatureCollectionFromItems = (items: SinkholeListItem[]) => ({
+  type: "FeatureCollection",
+  features: items
+    .map((item) => {
+      const x = Number(item?.x);
+      const y = Number(item?.y);
+      if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        return null;
+      }
+
+      return {
+        type: "Feature",
+        id: `${SINKHOLE_LAYER_TYPE}.${String(item?.acdntNo ?? "").trim()}`,
+        geometry: {
+          type: "Point",
+          coordinates: [x, y],
+        },
+        properties: {
+          ...item,
+          lyrTypeNm: SINKHOLE_LAYER_TYPE,
+          x,
+          y,
+        },
+      };
+    })
+    .filter(Boolean),
+});
+
+const SINKHOLE_POINT_PALETTE = {
+  orange: {
+    fill: "rgba(214, 102, 31, 0.88)",
+    fillSelected: "rgba(255, 138, 0, 0.92)",
+    stroke: "rgba(255, 255, 255, 0.95)",
+    strokeSelected: "rgba(120, 53, 15, 0.98)",
+    radiusStroke: "rgba(214, 102, 31, 0.75)",
+    radiusFill: "rgba(251, 146, 60, 0.12)",
+  },
+  blue: {
+    fill: "rgba(37, 99, 235, 0.82)",
+    fillSelected: "rgba(37, 99, 235, 0.9)",
+    stroke: "rgba(255, 255, 255, 0.95)",
+    strokeSelected: "rgba(30, 64, 175, 0.98)",
+    radiusStroke: "rgba(37, 99, 235, 0.7)",
+    radiusFill: "rgba(96, 165, 250, 0.12)",
+  },
+} as const;
+
+type SinkholePointVariant = keyof typeof SINKHOLE_POINT_PALETTE;
+
+const resolveSinkholePointVariant = (_ocrnYmd?: string | null): SinkholePointVariant => "blue";
+
 // 현재 지도 화면 BBOX 주변을 함께 조회해 이동 직후 가장자리 유하방향이 비어 보이는 현상을 줄인다.
 const expandFlowDirectionExtent = (extent: number[]) => {
   const [minX = 0, minY = 0, maxX = 0, maxY = 0] = extent;
@@ -186,6 +513,1578 @@ const getFlowDirectionFeatureCacheKey = (feature: any) => {
   return `geom:${String(usageCode).trim()}:${geometryKey}`;
 };
 
+const getGeometryExtentCenterPoint = (geometry: any) => {
+  const extent = geometry?.getExtent?.();
+  if (!extent || extent.length < 4) return null;
+
+  const [minX = 0, minY = 0, maxX = 0, maxY = 0] = extent;
+  return new Point([(minX + maxX) / 2, (minY + maxY) / 2]);
+};
+
+// MultiPolygon/MultiLineString preview 라벨이 각 조각마다 반복되지 않도록 대표 지점 1곳에만 텍스트를 배치한다.
+const getGisEditPreviewLabelGeometry = (geometry: any) => {
+  const geometryType = geometry?.getType?.();
+  if (!geometryType) return null;
+
+  if (geometryType === "Point") {
+    return geometry;
+  }
+
+  if (geometryType === "Polygon") {
+    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);
+    }
+    return getGeometryExtentCenterPoint(geometry);
+  }
+
+  return getGeometryExtentCenterPoint(geometry);
+};
+
+const createGisEditPreviewStyle = (feature: any) => {
+  const editType = String(feature.get("editType") ?? "");
+  const geometry = feature.getGeometry?.();
+  const geometryType = geometry?.getType?.();
+  const previewLabel = String(feature.get("previewLabel") ?? "").trim();
+  const isInteractionTarget = Boolean(feature.get("isInteractionTarget"));
+  const isDragging = Boolean(feature.get("isDragging"));
+  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 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 textStyle = previewLabel
+    ? new Text({
+        text: previewLabel,
+        font: "600 12px sans-serif",
+        fill: new Fill({ color: "#ffffff" }),
+        backgroundFill: new Fill({ color: highlightColor }),
+        padding: [3, 6, 3, 6],
+        offsetY: geometryType === "Point" ? -18 : -12,
+        overflow: true,
+      })
+    : undefined;
+  const labelGeometry = previewLabel ? getGisEditPreviewLabelGeometry(geometry) : null;
+
+  if (geometryType === "Point") {
+    return new Style({
+      image: new CircleStyle({
+        radius: isInteractionTarget ? 10 : 8,
+        fill: new Fill({ color: pointColor }),
+        stroke: new Stroke({
+          color: isDragging ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.95)",
+          width: isInteractionTarget ? 3 : 2,
+        }),
+      }),
+      text: textStyle,
+      zIndex: 10001,
+    });
+  }
+
+  if (geometryType === "Polygon") {
+    const polygonStyles: Style[] = [
+      new Style({
+        fill: new Fill({
+          color: isInteractionTarget && editType !== "DELETE"
+            ? fillColor.replace(/0\.\d+\)$/, "0.28)")
+            : fillColor,
+        }),
+        stroke: new Stroke({
+          color: highlightColor,
+          width: emphasisWidth,
+          lineDash: editType === "DELETE" ? [8, 6] : undefined,
+        }),
+        zIndex: 10001,
+      }),
+    ];
+
+    if (textStyle && labelGeometry) {
+      polygonStyles.push(
+        new Style({
+          geometry: labelGeometry,
+          text: textStyle,
+          zIndex: 10002,
+        }),
+      );
+    }
+
+    return polygonStyles;
+  }
+
+  const lineStyles: Style[] = editType === "ADD"
+    ? [
+        new Style({
+          stroke: new Stroke({
+            color: "rgba(255, 255, 255, 0.98)",
+            width: emphasisWidth + 4,
+          }),
+          zIndex: 10000,
+        }),
+        new Style({
+          stroke: new Stroke({
+            color: highlightColor,
+            width: emphasisWidth,
+          }),
+          zIndex: 10003,
+        }),
+      ]
+    : [
+    new Style({
+      stroke: new Stroke({
+        color: highlightColor,
+        width: emphasisWidth,
+        lineDash: editType === "DELETE" ? [10, 6] : undefined,
+      }),
+      zIndex: 10001,
+    }),
+  ];
+
+  if (textStyle && labelGeometry) {
+    lineStyles.push(
+      new Style({
+        geometry: labelGeometry,
+        text: textStyle,
+        zIndex: 10002,
+      }),
+    );
+  }
+
+  return lineStyles;
+};
+
+const GIS_EDIT_VERTEX_HANDLE_STYLE = new Style({
+  image: new CircleStyle({
+    radius: 10,
+    fill: new Fill({ color: "rgba(245, 158, 11, 0.98)" }),
+    stroke: new Stroke({ color: "rgba(255,255,255,0.98)", width: 3 }),
+  }),
+  zIndex: 10005,
+});
+
+const GIS_EDIT_VERTEX_MIDPOINT_STYLE = new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({ color: "rgba(255, 255, 255, 0.98)" }),
+    stroke: new Stroke({ color: "rgba(245, 158, 11, 0.98)", width: 2.5 }),
+  }),
+  zIndex: 10004,
+});
+
+const GIS_EDIT_VERTEX_DRAGGING_STYLE = new Style({
+  image: new CircleStyle({
+    radius: 11,
+    fill: new Fill({ color: "rgba(59, 130, 246, 0.95)" }),
+    stroke: new Stroke({ color: "rgba(255,255,255,0.98)", width: 3 }),
+  }),
+  zIndex: 10006,
+});
+
+const GIS_EDIT_VERTEX_SELECTED_STYLE = new Style({
+  image: new CircleStyle({
+    radius: 11,
+    fill: new Fill({ color: "rgba(217, 119, 6, 0.98)" }),
+    stroke: new Stroke({ color: "rgba(15, 23, 42, 0.95)", width: 3 }),
+  }),
+  zIndex: 10007,
+});
+
+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;
+};
+
+const expandGisEditPipeSnapExtent = (extent: number[]) => {
+  const [minX = 0, minY = 0, maxX = 0, maxY = 0] = extent;
+  const width = Math.max(0, maxX - minX);
+  const height = Math.max(0, maxY - minY);
+  const bufferX = width * GIS_EDIT_PIPE_SNAP_BBOX_BUFFER_RATIO;
+  const bufferY = height * GIS_EDIT_PIPE_SNAP_BBOX_BUFFER_RATIO;
+  return [minX - bufferX, minY - bufferY, maxX + bufferX, maxY + bufferY];
+};
+
+const geometryObjectToKey = (geometry: Record<string, unknown> | null) =>
+  geometry ? JSON.stringify(geometry) : "";
+
+const getWaterRiskAreaMapData = (areaId: string | null) =>
+  WATER_RISK_MAP_AREAS.find((area) => area.areaId === areaId) ?? null;
+
+const getWaterRiskResultRow = (areaId: string | null) =>
+  WATER_RISK_RESULT_ROWS.find((row) => row.areaId === areaId) ?? null;
+
+const buildWaterRiskInfoAnchor = (areaId: string | null) => {
+  const areaData = getWaterRiskAreaMapData(areaId);
+  if (!areaData) return null;
+
+  const polygon = new Polygon(areaData.polygonCoordinates);
+  const extent = polygon.getExtent();
+  const [, minY = 0, maxX = 0, maxY = 0] = extent;
+  return [maxX, (minY + maxY) / 2] as [number, number];
+};
+
+const buildWaterRiskSeedPipes = (areaId: string) =>
+  WATER_RISK_SETTING_ROWS
+    .filter((row) => row.areaId === areaId)
+    .sort((a, b) => a.setSeq - b.setSeq)
+    .map<WaterRiskStagedPipe>((row) => ({
+      pipeId: row.pipeId,
+      pipeDia: row.pipeDia,
+      pipeLen: row.pipeLen,
+      pipeMaterial: row.pipeMaterial,
+      setSeq: row.setSeq,
+      source: "MOCK",
+    }));
+
+const buildWaterRiskStatusFillColor = (riskStatus: "DANGER" | "NORMAL") =>
+  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)";
+
+const buildWaterRiskGridFillColor = (colorLevel: string) => {
+  switch (colorLevel) {
+    case "LEVEL_4":
+      return "rgba(198, 40, 40, 0.28)";
+    case "LEVEL_3":
+      return "rgba(245, 124, 0, 0.24)";
+    case "LEVEL_2":
+      return "rgba(251, 192, 45, 0.22)";
+    default:
+      return "rgba(33, 150, 243, 0.18)";
+  }
+};
+
+const createWaterRiskAreaStyle = (feature: any) => {
+  const areaName = String(feature.get("areaName") ?? "");
+  const riskStatus = String(feature.get("riskStatus") ?? "NORMAL") as "DANGER" | "NORMAL";
+  return new Style({
+    fill: new Fill({ color: buildWaterRiskStatusFillColor(riskStatus) }),
+    stroke: new Stroke({
+      color: buildWaterRiskStatusStrokeColor(riskStatus),
+      width: 3,
+    }),
+    text: new Text({
+      text: `${areaName}\n${buildWaterRiskStatusLabel(riskStatus)}`,
+      font: "700 13px sans-serif",
+      fill: new Fill({ color: "#ffffff" }),
+      backgroundFill: new Fill({ color: buildWaterRiskStatusStrokeColor(riskStatus) }),
+      padding: [5, 8, 5, 8],
+      overflow: true,
+    }),
+    zIndex: 9996,
+  });
+};
+
+const createWaterRiskGridStyle = (feature: any) => {
+  const rainQty = Number(feature.get("rainQty") ?? 0);
+  const colorLevel = String(feature.get("colorLevel") ?? "LEVEL_1");
+  return new Style({
+    fill: new Fill({ color: buildWaterRiskGridFillColor(colorLevel) }),
+    stroke: new Stroke({
+      color: "rgba(71, 85, 105, 0.36)",
+      width: 1,
+    }),
+    text: new Text({
+      text: `${rainQty.toFixed(1)}mm`,
+      font: "600 11px sans-serif",
+      fill: new Fill({ color: "#0f172a" }),
+      overflow: true,
+    }),
+    zIndex: 9995,
+  });
+};
+
+const createWaterRiskPipeStyle = (feature: any) => {
+  const displayLabel = String(feature.get("displayLabel") ?? "");
+  return [
+    new Style({
+      stroke: new Stroke({
+        color: "rgba(255,255,255,0.98)",
+        width: 9,
+        lineCap: "round",
+        lineJoin: "round",
+      }),
+      zIndex: 9997,
+    }),
+    new Style({
+      stroke: new Stroke({
+        color: "rgba(205, 52, 52, 0.96)",
+        width: 4,
+        lineCap: "round",
+        lineJoin: "round",
+      }),
+      zIndex: 9998,
+      text: new Text({
+        text: displayLabel,
+        font: "700 12px sans-serif",
+        fill: new Fill({ color: "#ffffff" }),
+        backgroundFill: new Fill({ color: "rgba(60, 60, 60, 0.9)" }),
+        padding: [3, 6, 3, 6],
+        overflow: true,
+      }),
+    }),
+  ];
+};
+
+const getSelectedFeatureLayerTypeName = (data: any) => {
+  const previewLayerId = String(data?.get?.("layerId") ?? "").trim();
+  if (String(data?.get?.("changeId") ?? "").trim() && previewLayerId) {
+    return previewLayerId;
+  }
+
+  if (typeof data?.getId === "function") {
+    return String(data.getId() ?? "").split(".")[0];
+  }
+
+  if (typeof data?.id_ === "string") {
+    return String(data.id_).split(".")[0];
+  }
+
+  return String(data?.lyrTypeNm ?? data?.values_?.lyrTypeNm ?? "").trim();
+};
+
+const getRightPanelFeatureIdentifier = (data: any) => {
+  const rawId =
+    data?.get?.("changeId") ??
+    data?.get?.("fid") ??
+    data?.values_?.fid ??
+    data?.fid ??
+    data?.getId?.() ??
+    data?.id_ ??
+    data?.fcltMngNo ??
+    data?.values_?.fclt_mng_no ??
+    data?.swtrmtFcltCd ??
+    data?.values_?.swtrmt_fclt_cd ??
+    "";
+
+  return String(rawId).trim();
+};
+
+const getRightPanelFeatureTitle = (data: any) => {
+  const layerTypeName = getSelectedFeatureLayerTypeName(data);
+
+  switch (layerTypeName) {
+    case "tb_ms_swage_ppl":
+      return "하수관로";
+    case "tb_ms_swage_mhl":
+      return "하수맨홀";
+    case "tb_ms_swage_pmstn":
+      return "펌프장";
+    case "tb_ms_stofcbr":
+      return "우수토실";
+    case "tb_il_swage_prcs_fclt":
+      return "처리시설";
+    case "tb_ms_swage_prcs_zone":
+      return "처리구역";
+    case "om_dt_untrt_swg_rain":
+      return "중점우수";
+    default:
+      return String(data?.lyrNm ?? data?.values_?.lyrNm ?? "상세").trim() || "상세";
+  }
+};
+
+// OpenLayers Feature와 plain object 양쪽에서 탭 표시값 후보를 같은 순서로 읽는다.
+const getRightPanelFeatureProperty = (data: any, keys: string[]) => {
+  for (const key of keys) {
+    const value = data?.get?.(key) ?? data?.values_?.[key] ?? data?.[key];
+    const normalizedValue = String(value ?? "").trim();
+    if (normalizedValue) return normalizedValue;
+  }
+  return "";
+};
+
+const getRightPanelTabCategory = (data: any): RightPanelTabCategory => {
+  const layerTypeName = getSelectedFeatureLayerTypeName(data);
+  if (layerTypeName === "tb_ms_swage_ppl") return "pipe";
+  if (layerTypeName === "tb_il_swage_prcs_fclt") return "treatmentFacility";
+  if (layerTypeName === "tb_ms_swage_prcs_zone") return "treatmentZone";
+  return "defaultFeature";
+};
+
+const getRightPanelFeatureDisplayLabel = (data: any, category: RightPanelTabCategory) => {
+  if (category === "pipe") {
+    const managementNo =
+      getRightPanelFeatureProperty(data, ["fclt_mng_no", "fcltMngNo", "pipeId", "fid"]) ||
+      getRightPanelFeatureIdentifier(data) ||
+      "-";
+    return `관로(${managementNo})`;
+  }
+
+  if (category === "treatmentFacility") {
+    const facilityName =
+      getRightPanelFeatureProperty(data, ["swtrmt_fclt_nm", "swtrmtFcltNm"]) ||
+      getRightPanelFeatureProperty(data, ["swtrmt_fclt_cd", "swtrmtFcltCd"]) ||
+      "-";
+    return `처리시설(${facilityName})`;
+  }
+
+  if (category === "treatmentZone") {
+    const zoneName =
+      getRightPanelFeatureProperty(data, ["swtrmt_zone_nm", "swtrmtZoneNm"]) ||
+      getRightPanelFeatureProperty(data, [
+        "swtrmt_zone_sn",
+        "swtrmtZoneSn",
+        "swtrmt_fclt_cd",
+        "swtrmtFcltCd",
+      ]) ||
+      "-";
+    return `처리구역(${zoneName})`;
+  }
+
+  return getRightPanelFeatureTitle(data);
+};
+
+const createFloodHistoryAreaStyle = (label: string) =>
+  new Style({
+    fill: new Fill({
+      color: "rgba(30, 136, 229, 0.16)",
+    }),
+    stroke: new Stroke({
+      color: "rgba(30, 136, 229, 0.95)",
+      width: 3,
+    }),
+    text: new Text({
+      text: label,
+      font: "700 12px sans-serif",
+      fill: new Fill({ color: "#ffffff" }),
+      backgroundFill: new Fill({ color: "rgba(15, 23, 42, 0.88)" }),
+      padding: [4, 7, 4, 7],
+      overflow: true,
+    }),
+    zIndex: 9994,
+  });
+
+const createFloodHistoryDepthStyle = (label: string, color: string) =>
+  new Style({
+    fill: new Fill({
+      color,
+    }),
+    stroke: new Stroke({
+      color: "rgba(71, 85, 105, 0.72)",
+      width: 1.4,
+    }),
+    text: new Text({
+      text: label,
+      font: "700 11px sans-serif",
+      fill: new Fill({ color: "#0f172a" }),
+      overflow: true,
+    }),
+    zIndex: 9993,
+  });
+
+const normalizeGisEditFid = (value: unknown) => {
+  const raw = String(value ?? "").trim();
+  if (!raw) return "";
+  const withoutNamespace = raw.includes(":") ? raw.split(":").pop() ?? raw : raw;
+  return withoutNamespace.startsWith("tb_ms_swage_ppl.")
+    ? withoutNamespace.slice("tb_ms_swage_ppl.".length)
+    : withoutNamespace;
+};
+
+const getGisEditFeatureFid = (data: any) =>
+  normalizeGisEditFid(
+    data?.get?.("fid") ??
+      data?.values_?.fid ??
+      data?.fid ??
+      data?.getId?.() ??
+      data?.id_ ??
+      "",
+  );
+
+const isGisEditPreviewFeatureData = (data: any) =>
+  Boolean(String(data?.get?.("changeId") ?? data?.changeId ?? "").trim());
+
+const highlightGisEditSelectedFeature = (featureData: any) => {
+  if (
+    !featureData ||
+    typeof featureData.getGeometry !== "function" ||
+    typeof featureData.setStyle !== "function"
+  ) {
+    return;
+  }
+
+  const select = GisApp.Module.select as any;
+  select?.selectFeature?.(featureData, true);
+};
+
+const isVisibleGisEditSessionChange = (change: GisEditSessionSnapshot["changes"][number]) =>
+  !change.attributeOnly || Boolean(change.basicInfoSavedAt);
+
+const getLatestNumericEditSn = (histories: any[]) =>
+  histories.reduce<number | null>((latest, history) => {
+    const editSn = String(history?.editSn ?? "").trim();
+    if (!/^\d+$/.test(editSn)) return latest;
+    const value = Number(editSn);
+    return latest === null || value > latest ? value : latest;
+  }, null);
+
+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;
+  }
+  return "";
+};
+
+const buildGisEditHiddenPipeFilter = (fids: string[]) => {
+  const normalizedFids = Array.from(
+    new Set(
+      fids
+        .map((fid) => normalizeGisEditFid(fid))
+        .filter((fid) => /^\d+$/.test(fid)),
+    ),
+  );
+  if (normalizedFids.length === 0) return null;
+  return `fid NOT IN (${normalizedFids.join(",")})`;
+};
+
+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;
+    if (change.editType !== "ADD" && !hasAttributePayload) return false;
+
+    const mngInstCd = getGisEditAttributeText(attributes, ["mngInstCd"]);
+    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;
+  });
+
+const getSinkholeSelectionValue = (data: any, key: string) =>
+  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 acdntNo = getSinkholeAccidentId(data);
+  if (!acdntNo) return null;
+
+  const point = getSinkholePointFromSelection(data);
+  return {
+    acdntNo,
+    ctpvNm: String(getSinkholeSelectionValue(data, "ctpvNm") ?? ""),
+    sggNm: String(getSinkholeSelectionValue(data, "sggNm") ?? ""),
+    emdNm: String(getSinkholeSelectionValue(data, "emdNm") ?? ""),
+    daddr: String(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") ?? ""),
+    latitude: getSinkholeSelectionValue(data, "latitude") ?? null,
+    longitude: getSinkholeSelectionValue(data, "longitude") ?? null,
+    x: point?.x ?? getSinkholeSelectionValue(data, "x") ?? null,
+    y: point?.y ?? getSinkholeSelectionValue(data, "y") ?? null,
+    sizeWidth: getSinkholeSelectionValue(data, "sizeWidth") ?? null,
+    sizeLength: getSinkholeSelectionValue(data, "sizeLength") ?? null,
+    sizeDepth: getSinkholeSelectionValue(data, "sizeDepth") ?? null,
+    detailCause: getSinkholeSelectionValue(data, "detailCause") ?? null,
+    deathCount: getSinkholeSelectionValue(data, "deathCount") ?? null,
+    injuryCount: getSinkholeSelectionValue(data, "injuryCount") ?? 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"),
+  );
+  if (Number.isFinite(directX) && Number.isFinite(directY)) {
+    return { x: directX, y: directY };
+  }
+
+  const geometry = data?.getGeometry?.();
+  if (geometry?.getType?.() === "Point") {
+    const coordinates = geometry.getCoordinates?.();
+    const x = Number(coordinates?.[0]);
+    const y = Number(coordinates?.[1]);
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      return { x, y };
+    }
+  }
+
+  return null;
+};
+
+const createSinkholePointStyle = (
+  variant: SinkholePointVariant = "blue",
+  selected = false,
+) =>
+  new Style({
+    image: new CircleStyle({
+      radius: selected ? 9 : 7,
+      fill: new Fill({
+        color: selected
+          ? SINKHOLE_POINT_PALETTE[variant].fillSelected
+          : SINKHOLE_POINT_PALETTE[variant].fill,
+      }),
+      stroke: new Stroke({
+        color: selected
+          ? SINKHOLE_POINT_PALETTE[variant].strokeSelected
+          : SINKHOLE_POINT_PALETTE[variant].stroke,
+        width: selected ? 2.6 : 2,
+      }),
+    }),
+    zIndex: selected ? 9997 : 9994,
+  });
+
+const createSinkholeRadiusStyle = (variant: SinkholePointVariant = "blue") =>
+  new Style({
+    stroke: new Stroke({
+      color: SINKHOLE_POINT_PALETTE[variant].radiusStroke,
+      width: 2.2,
+      lineDash: [8, 6],
+    }),
+    fill: new Fill({
+      color: SINKHOLE_POINT_PALETTE[variant].radiusFill,
+    }),
+    zIndex: 9993,
+  });
+// 반경 원 상단에 실제 적용 거리값을 표시하는 선택 전용 지도 라벨 스타일이다.
+const createSinkholeRadiusLabelStyle = (
+  radiusMeters: number,
+  variant: SinkholePointVariant = "blue",
+) =>
+  new Style({
+    text: new Text({
+      text: `반경 ${radiusMeters.toLocaleString("ko-KR")}m`,
+      font: "600 13px Pretendard, sans-serif",
+      textAlign: "center",
+      offsetY: -14,
+      padding: [4, 7, 4, 7],
+      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 }),
+    }),
+    zIndex: 9998,
+  });
+
+
+const createSinkholeFocusedPipeStyle = () => [
+  new Style({
+    stroke: new Stroke({
+      color: "rgba(88, 28, 135, 0.22)",
+      width: 18,
+      lineCap: "round",
+      lineJoin: "round",
+    }),
+    zIndex: 9997,
+  }),
+  new Style({
+    stroke: new Stroke({
+      color: "rgba(255, 255, 255, 0.96)",
+      width: 12,
+      lineCap: "round",
+      lineJoin: "round",
+    }),
+    zIndex: 9998,
+  }),
+  new Style({
+    stroke: new Stroke({
+      color: "rgba(37, 99, 235, 0.98)",
+      width: 8,
+      lineCap: "round",
+      lineJoin: "round",
+    }),
+    zIndex: 9999,
+  }),
+];
+
+const formatWaterRiskPipeField = (value: unknown, suffix: string) => {
+  const normalized = String(value ?? "").trim();
+  if (!normalized) return "-";
+  if (normalized.endsWith(suffix) || suffix === "") return normalized;
+  return `${normalized} ${suffix}`.trim();
+};
+
+const buildWaterRiskPipeFromFeature = (data: any): WaterRiskStagedPipe | null => {
+  const values = data?.values_ ?? data;
+  const pipeId = String(
+    values?.fclt_mng_no ??
+    values?.fcltMngNo ??
+    values?.pipeId ??
+    values?.id ??
+    data?.fid ??
+    "",
+  ).trim();
+
+  if (!pipeId) return null;
+
+  return {
+    pipeId,
+    pipeDia: formatWaterRiskPipeField(
+      values?.pipe_diameter ?? values?.pdmt_vl ?? values?.pdmtVl,
+      "mm",
+    ),
+    pipeLen: formatWaterRiskPipeField(
+      values?.pipe_lt ?? values?.pipeLt ?? values?.extn_lt ?? values?.extnLt,
+      "m",
+    ),
+    pipeMaterial: String(
+      values?.pipe_material ??
+      values?.pipeMaterial ??
+      values?.mqlt_cd ??
+      values?.mqltCd ??
+      "-",
+    ).trim() || "-",
+    setSeq: 0,
+    source: "MAP",
+  };
+};
+
+type VertexHandleMeta = {
+  kind: "vertex" | "midpoint";
+  geometryType: string;
+  partIndex?: number;
+  polygonIndex?: number;
+  ringIndex?: number;
+  coordIndex: number;
+};
+
+type VertexHandleCandidate = {
+  coordinate: number[];
+  meta: VertexHandleMeta;
+};
+
+type VertexDeleteResult = {
+  ok: boolean;
+  message?: string;
+};
+
+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,
+  (Number(start?.[1] ?? 0) + Number(end?.[1] ?? 0)) / 2,
+];
+
+const buildVertexCoordinateKey = (coordinate: number[]) =>
+  `${Number(coordinate?.[0] ?? 0)}:${Number(coordinate?.[1] ?? 0)}`;
+
+const buildVertexHandleMetaKey = (meta: VertexHandleMeta) =>
+  [
+    meta.kind,
+    meta.geometryType,
+    meta.partIndex ?? -1,
+    meta.polygonIndex ?? -1,
+    meta.ringIndex ?? -1,
+    meta.coordIndex,
+  ].join(":");
+
+const buildVertexHandleSelectionKey = (metaList: VertexHandleMeta[]) =>
+  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) ?? [];
+  return (endX - startX) ** 2 + (endY - startY) ** 2;
+};
+
+const GIS_EDIT_VERTEX_CLUSTER_PIXEL_THRESHOLD = 12;
+
+const getAverageCoordinate = (coordinates: number[][]) => {
+  if (coordinates.length === 0) return [0, 0];
+
+  const [sumX, sumY] = coordinates.reduce<[number, number]>(
+    ([accX, accY], [x = 0, y = 0]) => [accX + Number(x), accY + Number(y)],
+    [0, 0],
+  );
+
+  return [sumX / coordinates.length, sumY / coordinates.length];
+};
+
+const getPixelDistanceToSegment = (
+  map: any,
+  coordinate: number[],
+  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 deltaX = endX - startX;
+  const deltaY = endY - startY;
+  const segmentLengthSquared = deltaX ** 2 + deltaY ** 2;
+
+  if (segmentLengthSquared === 0) {
+    return Math.hypot(pointX - startX, pointY - startY);
+  }
+
+  const ratio = Math.max(
+    0,
+    Math.min(
+      1,
+      ((pointX - startX) * deltaX + (pointY - startY) * deltaY) / segmentLengthSquared,
+    ),
+  );
+  const projectedX = startX + deltaX * ratio;
+  const projectedY = startY + deltaY * ratio;
+  return Math.hypot(pointX - projectedX, pointY - projectedY);
+};
+
+const createVertexHandleFeature = (
+  coordinate: number[],
+  meta: VertexHandleMeta,
+  metaList: VertexHandleMeta[] = [meta],
+) => {
+  const handleFeature = new Feature({
+    geometry: new Point(coordinate),
+  });
+  handleFeature.set("handleKind", meta.kind);
+  handleFeature.set("handleMeta", meta);
+  handleFeature.set("handleMetaList", metaList);
+  handleFeature.set("handleSelectionKey", buildVertexHandleSelectionKey(metaList));
+  handleFeature.setStyle(getGisEditVertexHandleStyle(meta.kind));
+  return handleFeature;
+};
+
+const collectLineVertexHandleCandidates = (
+  coordinates: number[][],
+  geometryType: string,
+  partIndex?: number,
+) => {
+  const candidates: VertexHandleCandidate[] = [];
+  coordinates.forEach((coordinate, coordIndex) => {
+    candidates.push({
+      coordinate,
+      meta: {
+        kind: "vertex",
+        geometryType,
+        partIndex,
+        coordIndex,
+      },
+    });
+  });
+  return candidates;
+};
+
+const collectPolygonRingVertexHandleCandidates = (
+  coordinates: number[][],
+  geometryType: string,
+  polygonIndex?: number,
+  ringIndex?: number,
+) => {
+  const candidates: VertexHandleCandidate[] = [];
+  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;
+    if (!coordinate || !nextCoordinate) continue;
+    candidates.push({
+      coordinate,
+      meta: {
+        kind: "vertex",
+        geometryType,
+        polygonIndex,
+        ringIndex,
+        coordIndex,
+      },
+    });
+  }
+  return candidates;
+};
+
+const collectVertexHandleCandidates = (geometry: any) => {
+  const geometryType = geometry?.getType?.();
+  if (!geometryType) return [];
+
+  if (geometryType === "LineString") {
+    return collectLineVertexHandleCandidates(geometry.getCoordinates?.() ?? [], geometryType);
+  }
+
+  if (geometryType === "MultiLineString") {
+    const parts = geometry.getCoordinates?.() ?? [];
+    return parts.flatMap((part: number[][], partIndex: number) =>
+      collectLineVertexHandleCandidates(part, geometryType, partIndex),
+    );
+  }
+
+  if (geometryType === "Polygon") {
+    const rings = geometry.getCoordinates?.() ?? [];
+    return rings.flatMap((ring: number[][], ringIndex: number) =>
+      collectPolygonRingVertexHandleCandidates(ring, geometryType, undefined, ringIndex),
+    );
+  }
+
+  if (geometryType === "MultiPolygon") {
+    const polygons = geometry.getCoordinates?.() ?? [];
+    return polygons.flatMap((polygon: number[][][], polygonIndex: number) =>
+      polygon.flatMap((ring: number[][], ringIndex: number) =>
+        collectPolygonRingVertexHandleCandidates(ring, geometryType, polygonIndex, ringIndex),
+      ),
+    );
+  }
+
+  return [];
+};
+
+const buildVertexHandleFeatures = (geometry: any, map?: any): Feature[] => {
+  const groupedCandidates: Array<{
+    coordinate: number[];
+    metaList: VertexHandleMeta[];
+    sourceCoordinates: number[][];
+  }> = [];
+
+  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;
+    }
+
+    groupedCandidates.push({
+      coordinate: candidate.coordinate,
+      metaList: [candidate.meta],
+      sourceCoordinates: [candidate.coordinate],
+    });
+  });
+
+  return groupedCandidates.map(({ coordinate, metaList }) =>
+    createVertexHandleFeature(coordinate, metaList[0]!, metaList),
+  );
+};
+
+const collectLineMidpointCandidates = (
+  coordinates: number[][],
+  geometryType: string,
+  partIndex?: number,
+) => {
+  const candidates: VertexHandleCandidate[] = [];
+  for (let coordIndex = 0; coordIndex < coordinates.length - 1; coordIndex += 1) {
+    const startCoordinate = coordinates[coordIndex];
+    const endCoordinate = coordinates[coordIndex + 1];
+    if (!startCoordinate || !endCoordinate) continue;
+    candidates.push({
+      coordinate: getMidpoint(startCoordinate, endCoordinate),
+      meta: {
+        kind: "midpoint",
+        geometryType,
+        partIndex,
+        coordIndex,
+      },
+    });
+  }
+  return candidates;
+};
+
+const collectPolygonRingMidpointCandidates = (
+  coordinates: number[][],
+  geometryType: string,
+  polygonIndex?: number,
+  ringIndex?: number,
+) => {
+  const candidates: VertexHandleCandidate[] = [];
+  const logicalVertexCount = Math.max(0, coordinates.length - 1);
+  for (let coordIndex = 0; coordIndex < logicalVertexCount; coordIndex += 1) {
+    const startCoordinate = coordinates[coordIndex];
+    const endCoordinate = coordinates[(coordIndex + 1) % logicalVertexCount];
+    if (!startCoordinate || !endCoordinate) continue;
+    candidates.push({
+      coordinate: getMidpoint(startCoordinate, endCoordinate),
+      meta: {
+        kind: "midpoint",
+        geometryType,
+        polygonIndex,
+        ringIndex,
+        coordIndex,
+      },
+    });
+  }
+  return candidates;
+};
+
+const collectMidpointCandidates = (geometry: any) => {
+  const geometryType = geometry?.getType?.();
+  if (!geometryType) return [];
+
+  if (geometryType === "LineString") {
+    return collectLineMidpointCandidates(geometry.getCoordinates?.() ?? [], geometryType);
+  }
+
+  if (geometryType === "MultiLineString") {
+    const parts = geometry.getCoordinates?.() ?? [];
+    return parts.flatMap((part: number[][], partIndex: number) =>
+      collectLineMidpointCandidates(part, geometryType, partIndex),
+    );
+  }
+
+  if (geometryType === "Polygon") {
+    const rings = geometry.getCoordinates?.() ?? [];
+    return rings.flatMap((ring: number[][], ringIndex: number) =>
+      collectPolygonRingMidpointCandidates(ring, geometryType, undefined, ringIndex),
+    );
+  }
+
+  if (geometryType === "MultiPolygon") {
+    const polygons = geometry.getCoordinates?.() ?? [];
+    return polygons.flatMap((polygon: number[][][], polygonIndex: number) =>
+      polygon.flatMap((ring: number[][], ringIndex: number) =>
+        collectPolygonRingMidpointCandidates(ring, geometryType, polygonIndex, ringIndex),
+      ),
+    );
+  }
+
+  return [];
+};
+
+const getNearestVertexPixelDistance = (
+  map: any,
+  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);
+};
+
+const getSegmentCoordinatesFromMeta = (
+  geometry: any,
+  meta: VertexHandleMeta,
+): [number[], number[]] | null => {
+  const geometryType = geometry?.getType?.();
+  if (!geometryType) return null;
+
+  if (geometryType === "LineString") {
+    const coordinates = geometry.getCoordinates?.() ?? [];
+    return [coordinates[meta.coordIndex], coordinates[meta.coordIndex + 1]];
+  }
+
+  if (geometryType === "MultiLineString") {
+    const parts = geometry.getCoordinates?.() ?? [];
+    const targetPart = parts[meta.partIndex ?? 0] ?? [];
+    return [targetPart[meta.coordIndex], targetPart[meta.coordIndex + 1]];
+  }
+
+  if (geometryType === "Polygon") {
+    const rings = geometry.getCoordinates?.() ?? [];
+    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]];
+  }
+
+  if (geometryType === "MultiPolygon") {
+    const polygons = geometry.getCoordinates?.() ?? [];
+    const targetPolygon = polygons[meta.polygonIndex ?? 0] ?? [];
+    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 null;
+};
+
+const findHoveredMidpointCandidate = (
+  map: any,
+  geometry: any,
+  coordinate: number[],
+  tolerancePx = 18,
+): VertexHandleCandidate | null => {
+  const nearestVertexDistance = getNearestVertexPixelDistance(map, geometry, coordinate);
+  if (nearestVertexDistance <= 14) {
+    return null;
+  }
+
+  const midpointCandidates = collectMidpointCandidates(geometry);
+  let bestCandidate: VertexHandleCandidate | null = null;
+  let minimumDistance = Number.POSITIVE_INFINITY;
+
+  midpointCandidates.forEach((candidate: VertexHandleCandidate) => {
+    const segmentCoordinates = getSegmentCoordinatesFromMeta(geometry, candidate.meta);
+    if (!segmentCoordinates) return;
+    const [startCoordinate, endCoordinate] = segmentCoordinates;
+    if (!Array.isArray(startCoordinate) || !Array.isArray(endCoordinate)) return;
+
+    const segmentDistance = getPixelDistanceToSegment(
+      map,
+      coordinate,
+      startCoordinate,
+      endCoordinate,
+    );
+    if (segmentDistance < minimumDistance) {
+      minimumDistance = segmentDistance;
+      bestCandidate = candidate;
+    }
+  });
+
+  return minimumDistance <= tolerancePx ? bestCandidate : null;
+};
+
+const updateLineCoordinates = (
+  coordinates: number[][],
+  meta: VertexHandleMeta,
+  nextCoordinate: number[],
+) => {
+  const nextCoordinates = cloneCoordinates(coordinates);
+  if (meta.kind === "vertex") {
+    nextCoordinates[meta.coordIndex] = nextCoordinate;
+  } else {
+    nextCoordinates.splice(meta.coordIndex + 1, 0, nextCoordinate);
+  }
+  return nextCoordinates;
+};
+
+const updatePolygonRingCoordinates = (
+  coordinates: number[][],
+  meta: VertexHandleMeta,
+  nextCoordinate: number[],
+) => {
+  const nextCoordinates = cloneCoordinates(coordinates);
+  const logicalVertexCount = Math.max(0, nextCoordinates.length - 1);
+  if (logicalVertexCount === 0) return nextCoordinates;
+
+  if (meta.kind === "vertex") {
+    nextCoordinates[meta.coordIndex] = nextCoordinate;
+    if (meta.coordIndex === 0) {
+      nextCoordinates[logicalVertexCount] = nextCoordinate;
+    }
+  } else {
+    const insertIndex = meta.coordIndex === logicalVertexCount - 1
+      ? logicalVertexCount
+      : meta.coordIndex + 1;
+    nextCoordinates.splice(insertIndex, 0, nextCoordinate);
+  }
+
+  return nextCoordinates;
+};
+
+const applyVertexHandleMove = (
+  geometry: any,
+  meta: VertexHandleMeta,
+  nextCoordinate: number[],
+) => {
+  const geometryType = geometry?.getType?.();
+  if (!geometryType) return;
+
+  if (geometryType === "LineString") {
+    geometry.setCoordinates(
+      updateLineCoordinates(geometry.getCoordinates?.() ?? [], meta, nextCoordinate),
+    );
+    return;
+  }
+
+  if (geometryType === "MultiLineString") {
+    const parts = cloneCoordinates(geometry.getCoordinates?.() ?? []);
+    const targetPartIndex = meta.partIndex ?? 0;
+    parts[targetPartIndex] = updateLineCoordinates(parts[targetPartIndex] ?? [], meta, nextCoordinate);
+    geometry.setCoordinates(parts);
+    return;
+  }
+
+  if (geometryType === "Polygon") {
+    const rings = cloneCoordinates(geometry.getCoordinates?.() ?? []);
+    const targetRingIndex = meta.ringIndex ?? 0;
+    rings[targetRingIndex] = updatePolygonRingCoordinates(rings[targetRingIndex] ?? [], meta, nextCoordinate);
+    geometry.setCoordinates(rings);
+    return;
+  }
+
+  if (geometryType === "MultiPolygon") {
+    const polygons = cloneCoordinates(geometry.getCoordinates?.() ?? []);
+    const targetPolygonIndex = meta.polygonIndex ?? 0;
+    const targetRingIndex = meta.ringIndex ?? 0;
+    polygons[targetPolygonIndex][targetRingIndex] = updatePolygonRingCoordinates(
+      polygons[targetPolygonIndex][targetRingIndex] ?? [],
+      meta,
+      nextCoordinate,
+    );
+    geometry.setCoordinates(polygons);
+  }
+};
+
+const deleteLineVertices = (coordinates: number[][], coordIndexes: number[]) => {
+  const nextCoordinates = cloneCoordinates(coordinates);
+  const uniqueIndexes = Array.from(new Set(coordIndexes)).sort((left, right) => right - left);
+  if (nextCoordinates.length - uniqueIndexes.length < 2) {
+    return null;
+  }
+  uniqueIndexes.forEach((coordIndex) => {
+    nextCoordinates.splice(coordIndex, 1);
+  });
+  return nextCoordinates;
+};
+
+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);
+  if (logicalVertexCount - uniqueIndexes.length < 3) {
+    return null;
+  }
+
+  const logicalCoordinates = cloneCoordinates(coordinates.slice(0, logicalVertexCount));
+  uniqueIndexes.forEach((coordIndex) => {
+    logicalCoordinates.splice(coordIndex, 1);
+  });
+  if (logicalCoordinates.length < 3) return null;
+
+  return [...logicalCoordinates, cloneCoordinates(logicalCoordinates[0] ?? [])];
+};
+
+const deleteSelectedVertexHandles = (
+  geometry: any,
+  metaList: VertexHandleMeta[],
+): VertexDeleteResult => {
+  if (!geometry || metaList.length === 0) {
+    return { ok: false, message: "삭제할 꼭지점 정보를 찾지 못했습니다." };
+  }
+
+  if (metaList.some((meta) => meta.kind !== "vertex")) {
+    return { ok: false, message: "흰색 midpoint는 삭제 대상이 아닙니다. 주황색 실꼭지점을 선택하세요." };
+  }
+
+  const geometryType = geometry?.getType?.();
+  if (!geometryType) {
+    return { ok: false, message: "꼭지점 삭제 대상 geometry를 찾지 못했습니다." };
+  }
+
+  if (geometryType === "LineString") {
+    const nextCoordinates = deleteLineVertices(
+      geometry.getCoordinates?.() ?? [],
+      metaList.map((meta) => meta.coordIndex),
+    );
+    if (!nextCoordinates) {
+      return { ok: false, message: "하수관로는 최소 2개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다." };
+    }
+    geometry.setCoordinates(nextCoordinates);
+    return { ok: true };
+  }
+
+  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;
+    }, {});
+
+    for (const [partIndexRaw, coordIndexes] of Object.entries(metaGroups)) {
+      const partIndex = Number(partIndexRaw);
+      const nextCoordinates = deleteLineVertices(nextParts[partIndex] ?? [], coordIndexes);
+      if (!nextCoordinates) {
+        return { ok: false, message: "하수관로는 각 선형마다 최소 2개의 꼭지점이 필요합니다." };
+      }
+      nextParts[partIndex] = nextCoordinates;
+    }
+
+    geometry.setCoordinates(nextParts);
+    return { ok: true };
+  }
+
+  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;
+    }, {});
+
+    for (const [ringIndexRaw, coordIndexes] of Object.entries(metaGroups)) {
+      const ringIndex = Number(ringIndexRaw);
+      const nextCoordinates = deletePolygonVertices(nextRings[ringIndex] ?? [], coordIndexes);
+      if (!nextCoordinates) {
+        return { ok: false, message: "폴리곤은 최소 3개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다." };
+      }
+      nextRings[ringIndex] = nextCoordinates;
+    }
+
+    geometry.setCoordinates(nextRings);
+    return { ok: true };
+  }
+
+  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;
+    }, {});
+
+    for (const [groupKey, coordIndexes] of Object.entries(metaGroups)) {
+      const [polygonIndexText, ringIndexText] = groupKey.split(":");
+      const polygonIndex = Number(polygonIndexText);
+      const ringIndex = Number(ringIndexText);
+      const nextCoordinates = deletePolygonVertices(
+        nextPolygons[polygonIndex]?.[ringIndex] ?? [],
+        coordIndexes,
+      );
+      if (!nextCoordinates) {
+        return { ok: false, message: "폴리곤은 최소 3개의 꼭지점이 필요해 더 이상 삭제할 수 없습니다." };
+      }
+      nextPolygons[polygonIndex][ringIndex] = nextCoordinates;
+    }
+
+    geometry.setCoordinates(nextPolygons);
+    return { ok: true };
+  }
+
+  return { ok: false, message: "현재 geometry 유형은 꼭지점 삭제를 지원하지 않습니다." };
+};
+
+const getClosestSnapCoordinateFromSource = (
+  source: VectorSource | null,
+  map: any,
+  coordinate: number[],
+  tolerancePx = 18,
+) => {
+  if (!source || !Array.isArray(coordinate)) return null;
+  const nearestFeature = source.getClosestFeatureToCoordinate?.(coordinate);
+  const nearestGeometry = nearestFeature?.getGeometry?.();
+  if (!nearestGeometry?.getClosestPoint) return null;
+
+  const closestCoordinate = nearestGeometry.getClosestPoint(coordinate);
+  if (!Array.isArray(closestCoordinate)) return null;
+
+  const distance = Math.sqrt(getSquaredPixelDistance(map, coordinate, closestCoordinate));
+  if (!Number.isFinite(distance) || distance > tolerancePx) return null;
+
+  return {
+    coordinate: closestCoordinate as number[],
+    distance,
+  };
+};
+
+const applyGeometryVertexSnaps = (
+  geometry: any,
+  source: VectorSource | null,
+  map: any,
+  tolerancePx = 18,
+) => {
+  if (!geometry || !source || !map) return false;
+
+  const vertexCandidates = collectVertexHandleCandidates(geometry).filter(
+    (candidate: VertexHandleCandidate) => candidate.meta.kind === "vertex",
+  );
+  let changed = false;
+
+  vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
+    const snapResult = getClosestSnapCoordinateFromSource(source, map, candidate.coordinate, tolerancePx);
+    if (!snapResult) return;
+
+    const currentKey = buildVertexCoordinateKey(candidate.coordinate);
+    const nextKey = buildVertexCoordinateKey(snapResult.coordinate);
+    if (currentKey === nextKey) return;
+
+    applyVertexHandleMove(geometry, candidate.meta, snapResult.coordinate);
+    changed = true;
+  });
+
+  return changed;
+};
+
+const applyGeometryMoveSnap = (
+  geometry: any,
+  source: VectorSource | null,
+  map: any,
+  anchorCoordinate?: number[] | null,
+  tolerancePx = 18,
+) => {
+  if (!geometry || !source || !map || typeof geometry.translate !== "function") return false;
+
+  if (Array.isArray(anchorCoordinate)) {
+    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);
+      if (deltaX !== 0 || deltaY !== 0) {
+        geometry.translate(deltaX, deltaY);
+        return true;
+      }
+    }
+  }
+
+  const vertexCandidates = collectVertexHandleCandidates(geometry).filter(
+    (candidate: VertexHandleCandidate) => candidate.meta.kind === "vertex",
+  );
+  type GeometryMoveSnapCandidate = {
+    original: number[];
+    snapped: number[];
+    distance: number;
+  };
+  let bestCandidate: GeometryMoveSnapCandidate | null = null;
+
+  vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
+    const snapResult = getClosestSnapCoordinateFromSource(source, map, candidate.coordinate, tolerancePx);
+    if (!snapResult) return;
+
+    if (!bestCandidate || snapResult.distance < bestCandidate.distance) {
+      bestCandidate = {
+        original: candidate.coordinate,
+        snapped: snapResult.coordinate,
+        distance: snapResult.distance,
+      };
+    }
+  });
+
+  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);
+  if (deltaX === 0 && deltaY === 0) return false;
+
+  geometry.translate(deltaX, deltaY);
+  return true;
+};
+
+const getClosestGeometryVertexCoordinate = (
+  geometry: any,
+  map: any,
+  coordinate: number[] | null,
+) => {
+  if (!geometry || !map || !Array.isArray(coordinate)) return null;
+
+  const vertexCandidates = collectVertexHandleCandidates(geometry).filter(
+    (candidate: VertexHandleCandidate) => candidate.meta.kind === "vertex",
+  );
+  let bestCandidate: VertexHandleCandidate | null = null;
+  let minimumDistance = Number.POSITIVE_INFINITY;
+
+  vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
+    const distance = getSquaredPixelDistance(map, coordinate, candidate.coordinate);
+    if (distance < minimumDistance) {
+      minimumDistance = distance;
+      bestCandidate = candidate;
+    }
+  });
+
+  return (bestCandidate as VertexHandleCandidate | null)?.coordinate ?? null;
+};
+
+const getClosestGeometryVertexMeta = (
+  geometry: any,
+  map: any,
+  coordinate: number[] | null,
+) => {
+  if (!geometry || !map || !Array.isArray(coordinate)) return null;
+
+  const vertexCandidates = collectVertexHandleCandidates(geometry).filter(
+    (candidate: VertexHandleCandidate) => candidate.meta.kind === "vertex",
+  );
+  let bestCandidate: VertexHandleCandidate | null = null;
+  let minimumDistance = Number.POSITIVE_INFINITY;
+
+  vertexCandidates.forEach((candidate: VertexHandleCandidate) => {
+    const distance = getSquaredPixelDistance(map, coordinate, candidate.coordinate);
+    if (distance < minimumDistance) {
+      minimumDistance = distance;
+      bestCandidate = candidate;
+    }
+  });
+
+  return (bestCandidate as VertexHandleCandidate | null)?.meta ?? null;
+};
+
+const getGeometryVertexCoordinateByMeta = (
+  geometry: any,
+  meta: VertexHandleMeta | null,
+) => {
+  if (!geometry || !meta) return null;
+  const geometryType = geometry?.getType?.();
+  if (!geometryType) return null;
+
+  if (geometryType === "LineString") {
+    return geometry.getCoordinates?.()?.[meta.coordIndex] ?? null;
+  }
+
+  if (geometryType === "MultiLineString") {
+    return geometry.getCoordinates?.()?.[meta.partIndex ?? 0]?.[meta.coordIndex] ?? null;
+  }
+
+  if (geometryType === "Polygon") {
+    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 null;
+};
+
+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;
+};
+
 // 관종별 원본 레이어 색을 유하방향 선/화살표에 재사용할 때 투명도만 조정한다.
 const withAlpha = (color: string | null | undefined, alpha: number) => {
   const resolvedColor = String(color ?? "").trim();
@@ -366,8 +2265,19 @@ const createFlowDirectionStyle = (
   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 styleByConfidence: Record<string, { color: string; lineColor: string; scale: number; width: 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),
+      scale: 1,
+      width: 1.3,
+    },
     MEDIUM: {
       color: baseColor,
       lineColor: usageStyle?.lineColor ?? withAlpha(baseColor, 0.42),
@@ -381,12 +2291,21 @@ const createFlowDirectionStyle = (
       width: 1.1,
     },
   };
-  const style = styleByConfidence[confidence] ?? styleByConfidence.LOW!;
+  const style = isNetworkCorrected
+    ? {
+        color: FLOW_DIRECTION_NETWORK_CORRECTION_COLOR,
+        lineColor: withAlpha(FLOW_DIRECTION_NETWORK_CORRECTION_COLOR, 0.5),
+        scale: 1.08,
+        width: 2,
+        lineDash: [8, 4],
+      }
+    : styleByConfidence[confidence] ?? styleByConfidence.LOW!;
   const styles = [
     new Style({
       stroke: new Stroke({
         color: style.lineColor,
         width: style.width,
+        lineDash: style.lineDash,
         lineCap: "round",
         lineJoin: "round",
       }),
@@ -435,8 +2354,8 @@ const extractUsageCodesFromLayerInfo = (layerInfo: any) => {
 
 // 현재 줌에서 실제 표출 가능한 관로 레이어인지 확인해 숨겨진 관종의 유하방향 요청을 막는다.
 const isLayerVisibleAtZoom = (layerInfo: any, zoom: number) => {
-  const minZoom = Number(layerInfo?.minViewSize ?? layerInfo?.minZoom);
-  return !Number.isFinite(minZoom) || zoom >= minZoom;
+  const minZoom = getFiniteNumber(layerInfo?.minViewSize ?? layerInfo?.minZoom);
+  return minZoom === null || zoom >= minZoom;
 };
 
 // 현재 체크되어 화면에 보이는 관로 레이어의 관종 코드와 선 색상을 유하방향 조회/스타일 기준으로 변환한다.
@@ -446,6 +2365,7 @@ const extractCheckedPipeUsageStyles = (checkedNodesData: any[], zoom: number) =>
   checkedNodesData.forEach((node) => {
     const data = node?.data ?? node;
     if (!data || isFlowDirectionLayerInfo(data)) return;
+    if (getLayerTypeName(data) !== FLOW_DIRECTION_PIPE_LAYER_TYPE) return;
     if (!isLayerVisibleAtZoom(data, zoom)) return;
 
     const usageCodes = extractUsageCodesFromLayerInfo(data);
@@ -506,22 +2426,145 @@ const appendAgedPipeControlNode = (data: any[]) => {
   ];
 };
 
+const normalizeTreeRowSpacing = (data: any[]) => {
+  if (!Array.isArray(data)) return data;
+
+  return data.map((item) => {
+    if (item?.lyrNm !== "지반침하정보") {
+      return item;
+    }
+
+    return {
+      ...item,
+      iconNm: item.iconNm || SINKHOLE_TREE_ICON_NAME,
+      gobjTy: "",
+    };
+  });
+};
+
+const appendSinkholeControlNode = (data: any[]) => {
+  if (!Array.isArray(data)) return data;
+  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 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();
+
+    if (nodeId === String(existingRootId)) return false;
+    if (upperId === String(existingRootId)) return false;
+    if (!existingRoot && nodeId === SINKHOLE_CONTROL_NODE_ID) return false;
+    if (!existingRoot && upperId === SINKHOLE_CONTROL_NODE_ID) return false;
+    if (!existingRoot && layerName === SINKHOLE_LAYER_NAME) return false;
+    if (!existingRoot && layerTypeName === SINKHOLE_LAYER_TYPE) return false;
+    return true;
+  });
+
+  const rootNode = existingRoot
+    ? {
+        ...existingRoot,
+        lyrSn: existingRootId,
+        id: existingRootId,
+        gobjTy: "",
+        iconNm: existingRoot.iconNm || SINKHOLE_TREE_ICON_NAME,
+        clickPsblYn: "N",
+        actlLyrYn: "N",
+        children: null,
+      }
+    : {
+        lyrSn: SINKHOLE_CONTROL_NODE_ID,
+        id: SINKHOLE_CONTROL_NODE_ID,
+        lyrNm: SINKHOLE_LAYER_NAME,
+        upperLyrSn: null,
+        upId: null,
+        sortOrdr: "3",
+        drawOrdr: null,
+        flterSql: null,
+        gobjTy: "",
+        lyrTyNm: SINKHOLE_LAYER_TYPE,
+        useYn: "Y",
+        minViewSize: null,
+        iconNm: SINKHOLE_TREE_ICON_NAME,
+        iconSize: null,
+        lblAtrbNm: null,
+        fontNm: null,
+        fontIntnColor: null,
+        fontExtnColor: null,
+        fontExtnWdth: null,
+        lnWdth: null,
+        lnColor: null,
+        polgnColor: null,
+        initEprssYn: "Y",
+        clickPsblYn: "N",
+        exprsYn: "Y",
+        cmncNm: "all",
+        srvcNm: "api",
+        actlLyrYn: "N",
+        clckZoom: null,
+        children: null,
+      };
+
+  return [...filtered, rootNode];
+};
+
 const Map = () => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const initialAnalysisPopupKey = useMemo(() => {
+    const popupKey = searchParams.get("analysisPopupKey");
+    if (!popupKey || !isWindowPopupKey(popupKey)) return null;
+    if (popupKey !== "inftwtResultPopup" && popupKey !== "rdiiResultPopup") return null;
+    return popupKey;
+  }, [searchParams]);
+  const flowDirectionMode = useMemo(() => getFlowDirectionModeByPathname(pathname), [pathname]);
   const { isSearchModalOpen, setIsSearchModalOpen } = useSearchModalStore();
+  const userInfo = useUserStore((state) => state.userInfo);
+  const sinkholeScope = useMemo(() => buildSinkholeScope(userInfo), [userInfo]);
 
   const [treeData, setTreeData] = useState<any[]>([]); // 초기값을 객체 또는 null로 설정
   const [layerLoadError, setLayerLoadError] = useState<string | null>(null);
   const gisMaps = useRef<any | null>(null);
   const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
   const [featureData, setFeatureData] = useState<any>(null); // 선택된 피쳐 데이터
-  const [showWaterDepth, setShowWaterDepth] = useState(false); // WaterDepth 표시 여부
+  // 오른쪽 상세 패널에 열린 상세 컴포넌트를 책갈피 탭 단위로 보관한다.
+  const [rightPanelTabs, setRightPanelTabs] = useState<RightPanelTab[]>([]);
+  const [activeRightPanelTabId, setActiveRightPanelTabId] = useState<string | null>(null);
+  // 단일 관로 탭이 어느 지반침하 상세에서 열렸는지 비동기 피처 조회 사이에 보관한다.
+  const pipeParentTabIdRef = useRef<string | null>(null);
+  const [isWaterDepthLayerActive, setIsWaterDepthLayerActive] = useState(false); // 침수심 레이어 활성 여부
   const [isPlaying, setIsPlaying] = useState(false);
   const [mapReady, setMapReady] = useState(false);
+  const [checkedLayerLegendVersion, setCheckedLayerLegendVersion] = useState(0);
   const [isAgedPipeChecked, setIsAgedPipeChecked] = useState(false);
+  const [isSinkholeChecked, setIsSinkholeChecked] = useState(false);
+  const [isFloodHistoryChecked, setIsFloodHistoryChecked] = useState(false);
+  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 [appliedSinkholeFilters, setAppliedSinkholeFilters] = useState<SinkholeFilters>(() =>
+    normalizeSinkholeFilters(buildSinkholeFiltersFromYearRange(buildSinkholeDefaultYearRange(), sinkholeScope), sinkholeScope),
+  );
+  const [isSinkholePopupFilterActive, setIsSinkholePopupFilterActive] = useState(false);
+  const [sinkholeRadiusMeters, setSinkholeRadiusMeters] = useState(SINKHOLE_DEFAULT_RADIUS);
+  const [selectedFloodHistoryDetail, setSelectedFloodHistoryDetail] = useState<FloodHistoryItem | null>(null);
+  const [floodHistoryDetailPopupPosition, setFloodHistoryDetailPopupPosition] = 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);
   const [agedPipeRows, setAgedPipeRows] = useState<AgedPipeRow[]>([]);
@@ -529,16 +2572,85 @@ const Map = () => {
   const [agedPipeCurrentPage, setAgedPipeCurrentPage] = useState(1);
   const [isAgedPipeListLoading, setIsAgedPipeListLoading] = useState(false);
   const [agedPipeDownloadProgressText, setAgedPipeDownloadProgressText] = useState("");
+  const [isGisEditSaving, setIsGisEditSaving] = useState(false);
   const { ctpv, sgg } = useStore();
+  // GIS 편집은 map/page.tsx 내부 기존 지도 상태를 재사용하되, 세부 상태와 payload 조립은 별도 hook으로 분리한다.
+  const gisEdit = useGisEdit(treeData);
+  // 침입수 분석결과 popup과 지도 highlight 흐름은 별도 hook으로 묶어 기존 지도 로직과 충돌을 줄인다.
+  const inftwtResultMap = useInftwtResultMap({
+    gisMaps,
+    setFeatureData,
+    setIsOpen,
+    setIsSearchModalOpen,
+  });
+  const rdiiResultMap = useRdiiResultMap({
+    gisMaps,
+    setFeatureData,
+    setIsOpen,
+    setIsSearchModalOpen,
+  });
   const shouldFocusAgedPipeOnNextSelectRef = useRef(false);
   const agedPipePopupWindowRef = useRef<Window | null>(null);
-   const pipeAnalysisPopupWindowRef = useRef<Window | null>(null);
+  const sinkholePopupWindowRef = useRef<Window | null>(null);
+  // 침수발생이력 overlay layer는 지도 드래그 중에도 유지돼야 하므로 React state 대신 ref로 보관한다.
+  const floodHistoryAreaLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
+  const floodHistoryDepthLayerRef = 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 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 waterRiskPopupWindowRef = useRef<Window | null>(null);
+  const waterRiskPopupCloseWatcherRef = useRef<number | null>(null);
+  const sinkholeLayerRef = useRef<VectorLayer<any> | null>(null);
+  const sinkholeSourceRef = useRef<VectorSource | null>(null);
+  const sinkholeSelectedLayerRef = useRef<VectorLayer<any> | null>(null);
+  const sinkholeSelectedSourceRef = useRef<VectorSource | null>(null);
+  const sinkholeFocusedPipeLayerRef = useRef<VectorLayer<any> | null>(null);
+  const sinkholeFocusedPipeSourceRef = useRef<VectorSource | null>(null);
   // 유하방향 레이어 체크 여부를 React 렌더링 흐름에 반영하기 위한 state이다.
   const [isFlowDirectionChecked, setIsFlowDirectionChecked] = useState(false);
   // 체크된 유하방향 트리 노드의 레이어 설정을 보관해 API 조회와 vector layer 스타일에 사용한다.
   const [flowDirectionLayerInfo, setFlowDirectionLayerInfo] = useState<any | null>(null);
   // 관종 레이어 체크 변경도 유하방향 재조회 조건이므로 별도 버전 state로 effect를 다시 실행한다.
   const [flowDirectionSelectionVersion, setFlowDirectionSelectionVersion] = useState(0);
+  // 줌레벨 컨트롤에 현재 체크된 특수 레이어의 최소 표출 기준을 안내한다.
+  const zoomGuide = useMemo(() => {
+    const flowDirectionGuideZoom = flowDirectionLayerInfo
+      ? getFlowDirectionMinZoom(flowDirectionLayerInfo)
+      : FLOW_DIRECTION_DEFAULT_MIN_ZOOM;
+
+    if (isAgedPipeChecked && isFlowDirectionChecked) {
+      return {
+        label: "노후관로/유하방향 기준",
+        zoom: Math.max(AGED_PIPE_GUIDE_MIN_ZOOM, flowDirectionGuideZoom),
+      };
+    }
+
+    if (isFlowDirectionChecked) {
+      return {
+        label: "유하방향 기준",
+        zoom: flowDirectionGuideZoom,
+      };
+    }
+
+    if (isAgedPipeChecked) {
+      return {
+        label: "노후관로 기준",
+        zoom: AGED_PIPE_GUIDE_MIN_ZOOM,
+      };
+    }
+
+    return undefined;
+  }, [flowDirectionLayerInfo, isAgedPipeChecked, isFlowDirectionChecked]);
   // moveend 이벤트 핸들러는 최신 state closure를 보장하지 않으므로 현재 체크 여부를 ref로 함께 보관한다.
   const flowDirectionCheckedRef = useRef(false);
   // 지도 이동 후 재조회할 때 최신 유하방향 레이어 설정을 참조하기 위한 ref이다.
@@ -551,17 +2663,273 @@ const Map = () => {
   // 같은 관로가 겹치는 BBOX에서 반복 조회될 수 있으므로 고유키와 삽입 순서를 캐시로 관리한다.
   const flowDirectionFeatureKeySetRef = useRef<Set<string>>(new Set());
   const flowDirectionFeatureKeyQueueRef = useRef<string[]>([]);
+  // 관종 체크 변경 시 다른 관종 유하방향을 유지하기 위해 현재 source에 남겨둘 관종 코드를 별도로 추적한다.
+  const flowDirectionVisibleUsageCodesRef = useRef<Set<string>>(new Set());
+  // 관종 체크 변경으로 새로 켜진 usgCd만 다음 조회 대상으로 넘겨 기존 관종 재요청을 막는다.
+  const flowDirectionSelectionRequestUsageCodesRef = useRef<string[] | null>(null);
   // 체크 해제나 재조회 중 늦게 도착한 이전 API 응답이 레이어를 다시 그리지 못하도록 요청 순번을 관리한다.
   const flowDirectionRequestSeqRef = useRef(0);
-  // 지도 이동이 연속으로 발생하면 이전 bbox 요청을 중단해 늦은 응답과 불필요한 네트워크 대기를 줄인다.
+  // 지도 이동이 연속으로 발생하면 이전 유하방향 요청을 중단해 늦은 응답과 불필요한 네트워크 대기를 줄인다.
   const flowDirectionAbortControllerRef = useRef<AbortController | null>(null);
   // 같은 장애 상황에서 alert가 반복 노출되지 않도록 실패 안내 여부를 기억한다.
   const flowDirectionFailureAlertedRef = useRef(false);
+  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 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 gisEditVertexLayerRef = useRef<VectorLayer<any> | null>(null);
+  const gisEditVertexSourceRef = useRef<VectorSource | null>(null);
+  const waterRiskAreaLayerRef = useRef<VectorLayer<any> | null>(null);
+  const waterRiskAreaSourceRef = useRef<VectorSource | null>(null);
+  const waterRiskGridLayerRef = useRef<VectorLayer<any> | null>(null);
+  const waterRiskGridSourceRef = useRef<VectorSource | null>(null);
+  const waterRiskPipeLayerRef = useRef<VectorLayer<any> | null>(null);
+  const waterRiskPipeSourceRef = useRef<VectorSource | null>(null);
+  const gisEditDrawRef = useRef<any | null>(null);
+  const gisEditDrawSnapRef = useRef<any | null>(null);
+  const gisEditTranslateRef = useRef<any | null>(null);
+  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 [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 gisEditDetailChange = useMemo(
+    () => 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 (gisEditDetailChange.layerId !== "tb_ms_swage_ppl") return null;
+
+    const savedFeatureProperties = gisEditDetailChange.featureProperties ?? {};
+    return {
+      ...savedFeatureProperties,
+      lyrTypeNm: "tb_ms_swage_ppl",
+      fcltMngNo:
+        gisEditDetailChange.featureRef?.fcltMngNo ??
+        savedFeatureProperties["fclt_mng_no"] ??
+        gisEditDetailChange.objectId ??
+        "",
+      mngInstCd:
+        gisEditDetailChange.featureRef?.mngInstCd ??
+        savedFeatureProperties["mng_inst_cd"] ??
+        "",
+      fclt_mng_no:
+        gisEditDetailChange.featureRef?.fcltMngNo ??
+        savedFeatureProperties["fclt_mng_no"] ??
+        gisEditDetailChange.objectId ??
+        "",
+      mng_inst_cd:
+        gisEditDetailChange.featureRef?.mngInstCd ??
+        savedFeatureProperties["mng_inst_cd"] ??
+        "",
+    };
+  }, [featureData, gisEditDetailChange]);
+  gisEditDetailChangeRef.current = gisEditDetailChange;
+  gisEditDetailFeatureDataRef.current = gisEditDetailFeatureData;
+  gisEditIsEditModeRef.current = gisEdit.isEditMode;
+  const waterRiskSessionSnapshot = useMemo<WaterRiskSessionSnapshot>(
+    () => waterRiskSession,
+    [waterRiskSession],
+  );
+  const syncGisEditSessionPopup = useCallback(() => {
+    const popup = gisEditSessionPopupWindowRef.current;
+    if (!popup || popup.closed) {
+      gisEditSessionPopupWindowRef.current = null;
+      setGisEditSessionView("inline");
+      return;
+    }
+
+    popup.postMessage(
+      {
+        type: WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_SYNC,
+        payload: gisEditSessionSnapshot,
+      },
+      window.location.origin,
+    );
+  }, [gisEditSessionSnapshot]);
+
+  const closeGisEditSessionPopup = useCallback(() => {
+    if (gisEditSessionPopupCloseWatcherRef.current) {
+      window.clearInterval(gisEditSessionPopupCloseWatcherRef.current);
+      gisEditSessionPopupCloseWatcherRef.current = null;
+    }
+
+    const popup = gisEditSessionPopupWindowRef.current;
+    if (popup && !popup.closed) {
+      popup.close();
+    }
+    gisEditSessionPopupWindowRef.current = null;
+    setGisEditSessionView("inline");
+  }, []);
+
+  useEffect(() => () => {
+    if (gisEditSessionPopupCloseWatcherRef.current) {
+      window.clearInterval(gisEditSessionPopupCloseWatcherRef.current);
+      gisEditSessionPopupCloseWatcherRef.current = null;
+    }
+  }, []);
+
+  const openGisEditPipeDetail = useCallback((changeId: string | null) => {
+    if (!changeId) {
+      setGisEditDetailChangeId(null);
+      return;
+    }
+    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;
+
+    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);
+    }
+  }, [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 syncWaterRiskPopup = useCallback(() => {
+    const popup = waterRiskPopupWindowRef.current;
+    if (!popup || popup.closed) {
+      waterRiskPopupWindowRef.current = null;
+      return;
+    }
+
+    popup.postMessage(
+      {
+        type: WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SYNC,
+        payload: waterRiskSessionSnapshot,
+      },
+      window.location.origin,
+    );
+  }, [waterRiskSessionSnapshot]);
+
+  const selectedWaterRiskResultRow = useMemo(
+    () => getWaterRiskResultRow(waterRiskSession.selectedAreaId),
+    [waterRiskSession.selectedAreaId],
+  );
+
+  const syncWaterRiskInfoCardPosition = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map || !waterRiskInfoAnchor) {
+      setWaterRiskInfoCardStyle(null);
+      return;
+    }
+
+    const [mapWidth = 0, mapHeight = 0] = map.getSize?.() ?? [];
+    const [pixelX = 0, pixelY = 0] = map.getPixelFromCoordinate?.(waterRiskInfoAnchor) ?? [];
+    const cardWidth = 244;
+    const cardHeight = 236;
+    const left = pixelX + 22;
+    const top = pixelY - cardHeight / 2;
+
+    if (
+      pixelX < 0 ||
+      pixelY < 0 ||
+      pixelX > mapWidth ||
+      pixelY > mapHeight ||
+      left > mapWidth ||
+      top > mapHeight ||
+      left + cardWidth < 0 ||
+      top + cardHeight < 0
+    ) {
+      setWaterRiskInfoCardStyle(null);
+      return;
+    }
+
+    setWaterRiskInfoCardStyle({
+      left,
+      top,
+    });
+  }, [waterRiskInfoAnchor]);
+
+  const setGisEditPreviewCursor = useCallback((cursor: string) => {
+    const targetElement = gisMaps.current?.getTargetElement?.();
+    if (targetElement?.style) {
+      targetElement.style.cursor = cursor;
+    }
+  }, []);
 
   useEffect(() => {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    setAppliedSinkholeFilters((currentFilters) => {
+      if (isSinkholePopupFilterActive) {
+        return normalizeSinkholeFilters(currentFilters, sinkholeScope);
+      }
+      return normalizeSinkholeFilters(buildSinkholeFiltersFromYearRange(sinkholeYearRange, sinkholeScope), sinkholeScope);
+    });
+  }, [isSinkholePopupFilterActive, sinkholeScope, sinkholeYearRange]);
+
   useEffect(() => {
     const timer = window.setInterval(() => {
       if (gisMaps.current) {
@@ -609,10 +2977,107 @@ const Map = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (shouldShowGisEditSession) return;
+
+    const popup = gisEditSessionPopupWindowRef.current;
+    if (!popup || popup.closed) {
+      gisEditSessionPopupWindowRef.current = null;
+      setGisEditSessionView("inline");
+      return;
+    }
+
+    popup.close();
+    gisEditSessionPopupWindowRef.current = null;
+    setGisEditSessionView("inline");
+  }, [shouldShowGisEditSession]);
+
+  useEffect(() => {
+    return () => {
+      const popup = gisEditSessionPopupWindowRef.current;
+      if (popup && !popup.closed) {
+        popup.close();
+      }
+      gisEditSessionPopupWindowRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!gisEdit.isEditMode) {
+      setGisEditDetailChangeId(null);
+      return;
+    }
+
+    if (!gisEditDetailChangeId) return;
+    if (!gisEditDetailChange) {
+      setGisEditDetailChangeId(null);
+      setFeatureData(null);
+      setIsOpen(false);
+      return;
+    }
+
+    if (gisEditDetailChange.layerId !== "tb_ms_swage_ppl" || gisEditDetailChange.editType === "DELETE") {
+      setGisEditDetailChangeId(null);
+    }
+  }, [gisEdit.isEditMode, gisEditDetailChange, gisEditDetailChangeId]);
+
+  useEffect(() => {
+    if (!gisEdit.isEditMode) return;
+    syncGisEditSessionPopup();
+  }, [gisEdit.isEditMode, gisEditVisibleSessionChanges.length, syncGisEditSessionPopup]);
+
+  useEffect(() => {
+    const handleGisEditSessionPopupMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      const data = event.data;
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_READY) {
+        syncGisEditSessionPopup();
+        return;
+      }
+
+      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) {
+        const changeId = String(data.payload?.changeId ?? "").trim();
+        handleFocusGisEditSessionChange(changeId);
+        return;
+      }
+
+      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) {
+        gisEdit.removeLastChange();
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_CLEAR_CHANGES) {
+        gisEdit.clearChanges();
+      }
+    };
+
+    window.addEventListener("message", handleGisEditSessionPopupMessage);
+    return () => {
+      window.removeEventListener("message", handleGisEditSessionPopupMessage);
+    };
+  }, [closeGisEditSessionPopup, gisEdit, handleFocusGisEditSessionChange, syncGisEditSessionPopup]);
+
   const fetchData = async () => {
     try {
       const data = await getRawJson("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK");
-      setTreeData(appendAgedPipeControlNode(normalizeFlowDirectionLayerInfos(data)));
+      setTreeData(
+        appendAgedPipeControlNode(
+          appendSinkholeControlNode(
+            normalizeTreeRowSpacing(normalizeFlowDirectionLayerInfos(data)),
+          ),
+        ),
+      );
       setLayerLoadError(null);
     } catch (error) {
       const message =
@@ -623,6 +3088,370 @@ const Map = () => {
     }
   };
 
+  const clearWaterRiskPopupCloseWatcher = useCallback(() => {
+    if (waterRiskPopupCloseWatcherRef.current !== null) {
+      window.clearInterval(waterRiskPopupCloseWatcherRef.current);
+      waterRiskPopupCloseWatcherRef.current = null;
+    }
+  }, []);
+
+  const ensureWaterRiskAreaLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (waterRiskAreaLayerRef.current && waterRiskAreaSourceRef.current) {
+      return waterRiskAreaSourceRef.current;
+    }
+
+    const layers = map.getLayers?.().getArray?.() ?? [];
+    layers.forEach((existingLayer: any) => {
+      if (existingLayer?.get?.("id") === GIS_EDIT_PREVIEW_LAYER_ID) {
+        map.removeLayer(existingLayer);
+      }
+    });
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 9996,
+    });
+
+    layer.set("id", WATER_RISK_AREA_LAYER_ID);
+    layer.set("lyrNm", "통수위험 중점관리지역");
+    layer.set("lyrTyNm", WATER_RISK_AREA_LAYER_ID);
+    map.addLayer(layer);
+    waterRiskAreaLayerRef.current = layer;
+    waterRiskAreaSourceRef.current = source;
+    return source;
+  }, []);
+
+  const ensureWaterRiskGridLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (waterRiskGridLayerRef.current && waterRiskGridSourceRef.current) {
+      return waterRiskGridSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 9995,
+    });
+
+    layer.set("id", WATER_RISK_GRID_LAYER_ID);
+    layer.set("lyrNm", "통수위험 예측강우 격자");
+    layer.set("lyrTyNm", WATER_RISK_GRID_LAYER_ID);
+    map.addLayer(layer);
+    waterRiskGridLayerRef.current = layer;
+    waterRiskGridSourceRef.current = source;
+    return source;
+  }, []);
+
+  const ensureWaterRiskPipeLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (waterRiskPipeLayerRef.current && waterRiskPipeSourceRef.current) {
+      return waterRiskPipeSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 9998,
+    });
+
+    layer.set("id", WATER_RISK_PIPE_LAYER_ID);
+    layer.set("lyrNm", "통수위험 유출관로");
+    layer.set("lyrTyNm", WATER_RISK_PIPE_LAYER_ID);
+    map.addLayer(layer);
+    waterRiskPipeLayerRef.current = layer;
+    waterRiskPipeSourceRef.current = source;
+    return source;
+  }, []);
+
+  const clearWaterRiskLayers = useCallback(() => {
+    waterRiskAreaSourceRef.current?.clear();
+    waterRiskGridSourceRef.current?.clear();
+    waterRiskPipeSourceRef.current?.clear();
+  }, []);
+
+  const renderWaterRiskSelection = useCallback((areaId: string | null) => {
+    const map = gisMaps.current;
+    if (!map) return;
+
+    const areaSource = ensureWaterRiskAreaLayer();
+    const gridSource = ensureWaterRiskGridLayer();
+    if (!areaSource || !gridSource) return;
+
+    areaSource.clear();
+    gridSource.clear();
+
+    if (!areaId) 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 pipeSource = ensureWaterRiskPipeLayer();
+    const pipes = WATER_RISK_MAP_PIPES_BY_AREA[areaId] ?? [];
+    pipeSource?.clear();
+    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]);
+
+  const setWaterRiskStatusMessage = useCallback((statusMessage: string) => {
+    setWaterRiskSession((current) => ({
+      ...current,
+      statusMessage,
+    }));
+  }, []);
+
+  const startWaterRiskSettingEdit = useCallback((areaId: string, areaName: string) => {
+    setWaterRiskSession((current) => {
+      const shouldSeedPipes =
+        current.selectedSettingAreaId !== areaId || current.stagedPipes.length === 0;
+
+      return {
+        ...current,
+        selectedAreaId: areaId,
+        selectedSettingAreaId: areaId,
+        selectedSettingAreaName: areaName,
+        isSettingEditMode: true,
+        stagedPipes: shouldSeedPipes ? buildWaterRiskSeedPipes(areaId) : current.stagedPipes,
+        statusMessage: `${areaName} 설정 편집 모드입니다. 지도에서 하수관로를 클릭하세요.`,
+      };
+    });
+    setIsOpen(false);
+    setFeatureData(null);
+  }, []);
+
+  const stopWaterRiskSettingEdit = useCallback(() => {
+    setWaterRiskSession((current) => ({
+      ...current,
+      isSettingEditMode: false,
+      statusMessage: "",
+    }));
+  }, []);
+
+  const removeWaterRiskStagedPipe = useCallback((pipeId: string) => {
+    setWaterRiskSession((current) => ({
+      ...current,
+      stagedPipes: current.stagedPipes
+        .filter((pipe) => pipe.pipeId !== pipeId)
+        .map((pipe, index) => ({
+          ...pipe,
+          setSeq: index + 1,
+        })),
+      statusMessage: `${pipeId} 관로를 staged 목록에서 제거했습니다.`,
+    }));
+  }, []);
+
+  const reorderWaterRiskStagedPipe = useCallback((pipeId: string, direction: "UP" | "DOWN") => {
+    setWaterRiskSession((current) => {
+      const currentIndex = current.stagedPipes.findIndex((pipe) => pipe.pipeId === pipeId);
+      if (currentIndex < 0) return current;
+
+      const nextIndex =
+        direction === "UP" ? currentIndex - 1 : currentIndex + 1;
+      if (nextIndex < 0 || nextIndex >= current.stagedPipes.length) {
+        return current;
+      }
+
+      const reordered = [...current.stagedPipes];
+      const [targetPipe] = reordered.splice(currentIndex, 1);
+      if (!targetPipe) {
+        return current;
+      }
+      reordered.splice(nextIndex, 0, targetPipe);
+
+      return {
+        ...current,
+        stagedPipes: reordered.map((pipe, index) => ({
+          ...pipe,
+          setSeq: index + 1,
+        })),
+        statusMessage: `${pipeId} 관로 순번을 조정했습니다.`,
+      };
+    });
+  }, []);
+
+  const clearWaterRiskStagedPipes = useCallback(() => {
+    setWaterRiskSession((current) => ({
+      ...current,
+      stagedPipes: [],
+      statusMessage: "staged 유출관로 목록을 초기화했습니다.",
+    }));
+  }, []);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+    if (!waterRiskSession.selectedAreaId) {
+      clearWaterRiskLayers();
+      setWaterRiskInfoAnchor(null);
+      setWaterRiskInfoCardStyle(null);
+      return;
+    }
+
+    renderWaterRiskSelection(waterRiskSession.selectedAreaId);
+  }, [
+    clearWaterRiskLayers,
+    mapReady,
+    renderWaterRiskSelection,
+    waterRiskSession.selectedAreaId,
+  ]);
+
+  useEffect(() => {
+    setWaterRiskInfoAnchor(buildWaterRiskInfoAnchor(waterRiskSession.selectedAreaId));
+  }, [waterRiskSession.selectedAreaId]);
+
+  useEffect(() => {
+    const popup = waterRiskPopupWindowRef.current;
+    if (!popup || popup.closed) return;
+    syncWaterRiskPopup();
+  }, [syncWaterRiskPopup, waterRiskSession]);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current || !waterRiskInfoAnchor) return;
+
+    const map = gisMaps.current;
+    const syncDuringMapRender = () => {
+      syncWaterRiskInfoCardPosition();
+    };
+
+    syncWaterRiskInfoCardPosition();
+    map.on?.("postrender", syncDuringMapRender);
+    map.on?.("moveend", syncDuringMapRender);
+
+    return () => {
+      map.un?.("postrender", syncDuringMapRender);
+      map.un?.("moveend", syncDuringMapRender);
+    };
+  }, [mapReady, syncWaterRiskInfoCardPosition, waterRiskInfoAnchor]);
+
+  useEffect(() => {
+    const handleWaterRiskPopupMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      const data = event.data;
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_READY) {
+        syncWaterRiskPopup();
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT) {
+        const areaId = String(data.payload?.areaId ?? "").trim();
+        if (!areaId) return;
+        setWaterRiskInfoAnchor(buildWaterRiskInfoAnchor(areaId));
+        setWaterRiskSession((current) => ({
+          ...current,
+          selectedAreaId: areaId,
+          statusMessage: `${getWaterRiskResultRow(areaId)?.areaName ?? areaId} 지도 강조를 갱신했습니다.`,
+        }));
+        setIsOpen(false);
+        setFeatureData(null);
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_START_SETTING_EDIT) {
+        const areaId = String(data.payload?.areaId ?? "").trim();
+        const areaName = String(data.payload?.areaName ?? "").trim();
+        if (!areaId) return;
+        startWaterRiskSettingEdit(areaId, areaName || getWaterRiskResultRow(areaId)?.areaName || areaId);
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_STOP_SETTING_EDIT) {
+        stopWaterRiskSettingEdit();
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_REMOVE_STAGED_PIPE) {
+        const pipeId = String(data.payload?.pipeId ?? "").trim();
+        if (pipeId) {
+          removeWaterRiskStagedPipe(pipeId);
+        }
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_REORDER_STAGED_PIPE) {
+        const pipeId = String(data.payload?.pipeId ?? "").trim();
+        const direction = data.payload?.direction === "UP" ? "UP" : "DOWN";
+        if (pipeId) {
+          reorderWaterRiskStagedPipe(pipeId, direction);
+        }
+        return;
+      }
+
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_CLEAR_STAGED_PIPES) {
+        clearWaterRiskStagedPipes();
+      }
+    };
+
+    window.addEventListener("message", handleWaterRiskPopupMessage);
+    return () => {
+      window.removeEventListener("message", handleWaterRiskPopupMessage);
+    };
+  }, [
+    clearWaterRiskStagedPipes,
+    removeWaterRiskStagedPipe,
+    reorderWaterRiskStagedPipe,
+    startWaterRiskSettingEdit,
+    stopWaterRiskSettingEdit,
+    syncWaterRiskPopup,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      clearWaterRiskPopupCloseWatcher();
+      const popup = waterRiskPopupWindowRef.current;
+      if (popup && !popup.closed) {
+        popup.close();
+      }
+      waterRiskPopupWindowRef.current = null;
+    };
+  }, [clearWaterRiskPopupCloseWatcher]);
+
   // 유하방향은 일반 Gis core 레이어 등록 흐름을 타지 않으므로 전용 layer/source/cache를 직접 정리한다.
   const removeFlowDirectionLayer = useCallback(() => {
     const core = GisApp.Module.core as any;
@@ -631,6 +3460,7 @@ const Map = () => {
     flowDirectionSourceRef.current = null;
     flowDirectionFeatureKeySetRef.current.clear();
     flowDirectionFeatureKeyQueueRef.current = [];
+    flowDirectionVisibleUsageCodesRef.current.clear();
   }, []);
 
   // 유하방향 cache/source만 비워 관종 변경처럼 조건이 달라진 경우 이전 조건의 피처가 남지 않게 한다.
@@ -638,8 +3468,46 @@ const Map = () => {
     flowDirectionSourceRef.current?.clear();
     flowDirectionFeatureKeySetRef.current.clear();
     flowDirectionFeatureKeyQueueRef.current = [];
+    flowDirectionVisibleUsageCodesRef.current.clear();
   }, []);
 
+  // 체크 해제된 관종의 유하방향 feature/cache만 제거하고, 새로 체크된 관종 코드만 다음 요청 대상으로 돌려준다.
+  const retainFlowDirectionUsageCodes = useCallback((usageCodes: string[]) => {
+    const nextUsageCodes = new Set(usageCodes);
+    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();
+        if (nextUsageCodes.has(usageCode)) return;
+
+        const featureKey = feature.get("flowDirectionCacheKey");
+        if (featureKey) {
+          flowDirectionFeatureKeySetRef.current.delete(String(featureKey));
+        }
+        source.removeFeature(feature);
+      });
+      flowDirectionFeatureKeyQueueRef.current = flowDirectionFeatureKeyQueueRef.current.filter((featureKey) =>
+        flowDirectionFeatureKeySetRef.current.has(featureKey),
+      );
+    }
+    flowDirectionVisibleUsageCodesRef.current = new Set(
+      Array.from(flowDirectionVisibleUsageCodesRef.current).filter((usageCode) =>
+        nextUsageCodes.has(usageCode),
+      ),
+    );
+    return addedUsageCodes;
+  }, []);
+
+  useEffect(() => {
+    if (!flowDirectionCheckedRef.current) return;
+    clearFlowDirectionFeatureCache();
+    flowDirectionSelectionRequestUsageCodesRef.current = null;
+    setFlowDirectionSelectionVersion((version) => version + 1);
+  }, [clearFlowDirectionFeatureCache, flowDirectionMode]);
+
   // 유하방향 레이어는 하나만 유지하고 source에 피처를 누적한다.
   const ensureFlowDirectionLayer = useCallback((layerInfo: any) => {
     const map = gisMaps.current;
@@ -705,23 +3573,11 @@ const Map = () => {
       source.addFeatures(nextFeatures);
     }
 
-    while (flowDirectionFeatureKeyQueueRef.current.length > FLOW_DIRECTION_CACHE_MAX_FEATURES) {
-      const staleKey = flowDirectionFeatureKeyQueueRef.current.shift();
-      if (!staleKey) break;
-
-      const staleFeature = source.getFeatures().find((feature: any) =>
-        feature.get("flowDirectionCacheKey") === staleKey,
-      );
-      if (staleFeature) {
-        source.removeFeature(staleFeature);
-      }
-      flowDirectionFeatureKeySetRef.current.delete(staleKey);
-    }
   }, [ensureFlowDirectionLayer]);
 
-  // 현재 지도 BBOX와 체크된 관종 필터로 유하방향 GeoJSON을 조회하고, 최신 요청만 지도에 반영한다.
+  // 현재 지도 BBOX와 체크된 관종별 필터로 유하방향 GeoJSON을 각각 조회하고, 최신 요청만 지도에 반영한다.
   const loadFlowDirectionLayer = useCallback(
-    async (layerInfo: any) => {
+    async (layerInfo: any, requestOnlyUsageCodes?: string[]) => {
       const map = gisMaps.current;
       if (!map) return;
 
@@ -749,45 +3605,113 @@ const Map = () => {
         removeFlowDirectionLayer();
         return;
       }
+      retainFlowDirectionUsageCodes(usageCodes);
+
+      const usageCodeSet = new Set(usageCodes);
+      const requestUsageCodes = requestOnlyUsageCodes
+        ? requestOnlyUsageCodes.filter((usageCode) => usageCodeSet.has(usageCode))
+        : usageCodes;
+      const isPartialUsageRequest = Array.isArray(requestOnlyUsageCodes);
+      if (requestUsageCodes.length === 0) {
+        if (flowDirectionAbortControllerRef.current === abortController) {
+          flowDirectionAbortControllerRef.current = null;
+        }
+        return;
+      }
 
       const screenExtent = view.calculateExtent(size);
       const requestExtent = expandFlowDirectionExtent(screenExtent);
       const screenBbox = formatFlowDirectionBbox(screenExtent);
       const requestBbox = formatFlowDirectionBbox(requestExtent);
-      const params = new URLSearchParams({
-        bbox: requestBbox,
+      const baseParams = new URLSearchParams({
         srs: FLOW_DIRECTION_SRS,
-        limit: String(FLOW_DIRECTION_DEFAULT_LIMIT),
-        usgCd: usageCodes.join(","),
+        directionMode: flowDirectionMode,
+        searchStrategy: "BBOX",
+        bbox: requestBbox,
       });
 
       try {
-        const payload = await getRawJson(
-          `/sewerage-service/api/v1/map/flowDirectionGeometry?${params.toString()}`,
-          { signal: abortController.signal },
-        );
+        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 featureCollection = getFeatureCollection(payload);
-        renderFlowDirectionLayer(featureCollection, layerInfo, usageStyleMap);
+        const responses = settledResponses
+          .filter((result): result is PromiseFulfilledResult<{ usageCode: string; featureCollection: any }> =>
+            result.status === "fulfilled",
+          )
+          .map((result) => result.value);
+        const failedResponses = settledResponses.filter((result) => result.status === "rejected");
+
+        if (responses.length === 0) {
+          if (!isPartialUsageRequest) {
+            removeFlowDirectionLayer();
+          }
+          throw failedResponses[0]?.reason ?? new Error("유하방향 관종별 조회 결과가 없습니다.");
+        }
+
+        if (failedResponses.length > 0) {
+          console.error("유하방향 일부 관종 조회 실패:", failedResponses.map((result) => result.reason));
+          if (!flowDirectionFailureAlertedRef.current) {
+            flowDirectionFailureAlertedRef.current = true;
+          }
+        }
+
+        responses.forEach(({ usageCode, featureCollection }) => {
+          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 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,
           requestSeq,
           zoom,
+          directionMode: flowDirectionMode,
+          searchStrategy: "BBOX",
           usageCodes,
-          returnedFeatures: featureCollection.features?.length ?? 0,
+          requestUsageCodes,
+          requestCount: responses.length,
+          returnedFeaturesByUsage,
+          returnedFeatures: Object.values(returnedFeaturesByUsage).reduce((sum, count) => sum + count, 0),
+          networkCorrectedFeatures,
           cachedFeatures: flowDirectionSourceRef.current?.getFeatures?.().length ?? 0,
         };
-        flowDirectionFailureAlertedRef.current = false;
+        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;
 
         console.error("유하방향 레이어 조회 실패:", error);
-        removeFlowDirectionLayer();
+        if (!isPartialUsageRequest) {
+          removeFlowDirectionLayer();
+        }
         if (!flowDirectionFailureAlertedRef.current) {
-          alert("유하방향 정보를 불러오지 못했습니다.");
           flowDirectionFailureAlertedRef.current = true;
         }
       } finally {
@@ -796,11 +3720,189 @@ const Map = () => {
         }
       }
     },
-    [removeFlowDirectionLayer, renderFlowDirectionLayer],
+    [flowDirectionMode, removeFlowDirectionLayer, renderFlowDirectionLayer, retainFlowDirectionUsageCodes],
   );
 
   // SearchModal, GisContent 등에서 호출
   const onFeatureSelect = (data: any) => {
+    const clickedLayerTypeName = getSelectedFeatureLayerTypeName(data);
+    if (clickedLayerTypeName === "tb_ms_swage_ppl") {
+      pipeParentTabIdRef.current = null;
+    }
+
+    // 지형에 있는 피처를 직접 선택하면 지반침하 반경 내에서 만든 임시 관로 강조는 해제한다.
+    clearSinkholeFocusedPipeLayer();
+    if (rdiiResultMap.handleOverlayFeatureSelect(data)) {
+      setFeatureData(null);
+      setIsOpen(false);
+      setIsSearchModalOpen(false);
+      return;
+    }
+    if (inftwtResultMap.handleOverlayFeatureSelect(data)) {
+      setFeatureData(null);
+      setIsOpen(false);
+      setIsSearchModalOpen(false);
+      return;
+    }
+
+    if (
+      gisEdit.isEditMode &&
+      (gisEdit.activeTool === "MOVE" || gisEdit.activeTool === "VERTEX_EDIT") &&
+      gisEdit.selectedLayer?.layerId === "tb_ms_swage_ppl" &&
+      clickedLayerTypeName !== "tb_ms_swage_ppl"
+    ) {
+      gisEdit.announceStatus("하수관로를 선택해주세요.");
+      setFeatureData(null);
+      setIsOpen(false);
+      setIsSearchModalOpen(false);
+      return;
+    }
+
+    if (clickedLayerTypeName === SINKHOLE_LAYER_TYPE) {
+      const acdntNo = getSinkholeAccidentId(data);
+      if (acdntNo) {
+        void loadSinkholeDetail(acdntNo, false, getSinkholePointFromSelection(data), getSinkholeFallbackDetailFromSelection(data));
+      }
+      return;
+    }
+
+    // 편집 도구가 켜져 있을 때는 상세 팝업보다 도구별 세션 처리를 우선한다.
+    // ADD는 Draw interaction만 geometry를 받아야 하므로 기존 관로 선택 이벤트는 무시한다.
+    let editSelection: any = gisEdit.registerFeatureSelection(data);
+    if (
+      !editSelection.handled &&
+      gisEdit.isEditMode &&
+      !gisEdit.activeTool &&
+      clickedLayerTypeName === "tb_ms_swage_ppl"
+    ) {
+      editSelection = gisEdit.registerPipeDetailSelection(data);
+    }
+    if (editSelection.handled) {
+      const closeGisEditDetail = () => {
+        const select = GisApp.Module.select as any;
+        select?.resetSelectedFeature?.();
+        setFeatureData(null);
+        setGisEditDetailChangeId(null);
+        setIsOpen(false);
+        setIsSearchModalOpen(false);
+      };
+      const loadLatestEditSn = (changeId: string) => {
+        const fid = editSelection.isPreviewSelection === true ? "" : getGisEditFeatureFid(data);
+        if (!fid) return;
+        getRawJson(`/sewerage-service/api/v1/map/gisEdit/swagePpl/histories?fid=${encodeURIComponent(fid)}`)
+          .then((historyResponse) => {
+            const latestEditSn = getLatestNumericEditSn(historyResponse?.histories ?? []);
+            if (latestEditSn !== null) {
+              gisEdit.updateChangeBaseEditSn(changeId, String(latestEditSn));
+            }
+          })
+          .catch((error) => {
+            console.error("GIS 편집 관로 이력 조회 실패:", error);
+            gisEdit.announceStatus("관로 이력 정보를 확인하지 못했습니다. 저장 시 충돌 검증이 제한될 수 있습니다.");
+          });
+      };
+
+      if (gisEdit.activeTool === "ADD" || gisEdit.activeTool === "DELETE") {
+        closeGisEditDetail();
+        return;
+      }
+
+      const isGeometryEditTargetSelection =
+        editSelection.isPreviewSelection !== true &&
+        (gisEdit.activeTool === "MOVE" || gisEdit.activeTool === "VERTEX_EDIT");
+
+      if (isGeometryEditTargetSelection) {
+        if (typeof editSelection.changeId === "string" && editSelection.changeId) {
+          loadLatestEditSn(String(editSelection.changeId));
+        }
+        closeGisEditDetail();
+        return;
+      }
+
+      const canOpenPreviewPipeDetail =
+        clickedLayerTypeName === "tb_ms_swage_ppl" &&
+        editSelection.isPreviewSelection === true &&
+        editSelection.editType !== "DELETE";
+      const shouldOpenPipeDetail =
+        clickedLayerTypeName === "tb_ms_swage_ppl" &&
+        typeof editSelection.changeId === "string" &&
+        editSelection.changeId &&
+        (editSelection.isPreviewSelection !== true || canOpenPreviewPipeDetail);
+
+      if (shouldOpenPipeDetail) {
+        openGisEditPipeDetail(String(editSelection.changeId));
+        loadLatestEditSn(String(editSelection.changeId));
+        if (editSelection.isPreviewSelection !== true && !isGeometryEditTargetSelection) {
+          highlightGisEditSelectedFeature(data);
+        }
+        setFeatureData(data);
+        window.setTimeout(() => {
+          setGisEditDetailChangeId(String(editSelection.changeId));
+          setIsOpen(true);
+        }, 0);
+        setIsSearchModalOpen(false);
+        return;
+      }
+
+      // 편집 대상으로 넘긴 뒤에는 기존 상세 팝업/원본 선택 강조를 정리해
+      // 실제 편집 대상인 preview feature가 시각적으로 가려지지 않게 한다.
+      closeGisEditDetail();
+      return;
+    }
+
+    if (waterRiskSession.isSettingEditMode) {
+      const layerTypeName = getSelectedFeatureLayerTypeName(data);
+      if (layerTypeName !== WATER_RISK_PIPE_LAYER_TYPE) {
+        setWaterRiskStatusMessage("통수위험 설정 모드에서는 하수관로만 선택할 수 있습니다.");
+        setFeatureData(null);
+        setIsOpen(false);
+        setIsSearchModalOpen(false);
+        return;
+  }
+
+      const nextPipe = buildWaterRiskPipeFromFeature(data);
+      if (!nextPipe) {
+        setWaterRiskStatusMessage("선택한 하수관로 정보를 staged 목록으로 옮기지 못했습니다.");
+        setFeatureData(null);
+        setIsOpen(false);
+        setIsSearchModalOpen(false);
+        return;
+      }
+
+      setWaterRiskSession((current) => {
+        if (current.stagedPipes.some((pipe) => pipe.pipeId === nextPipe.pipeId)) {
+          return {
+            ...current,
+            statusMessage: `${nextPipe.pipeId} 관로는 이미 staged 목록에 있습니다.`,
+          };
+        }
+
+        if (current.stagedPipes.length >= 3) {
+          return {
+            ...current,
+            statusMessage: "유출관로는 최대 3건까지만 staged 목록에 담을 수 있습니다.",
+          };
+        }
+
+        return {
+          ...current,
+          stagedPipes: [
+            ...current.stagedPipes,
+            {
+              ...nextPipe,
+              setSeq: current.stagedPipes.length + 1,
+            },
+          ],
+          statusMessage: `${nextPipe.pipeId} 관로를 staged 목록에 추가했습니다.`,
+        };
+      });
+
+      setFeatureData(null);
+      setIsOpen(false);
+      setIsSearchModalOpen(false);
+      return;
+    }
+
     let map = gisMaps.current;
     if (!map) {
       console.warn("지도가 초기화되지 않았습니다.");
@@ -867,12 +3969,27 @@ const Map = () => {
       console.warn("OpenLayers Feature를 찾을 수 없습니다:", data);
     }
 
+
     setFeatureData(data);
     setIsOpen(true);
     setIsSearchModalOpen(false);
   };
 
-  const facilityTypes = [{ text: "하수처리시설", val: "tb_il_swage_prcs_fclt" }];
+  const swagePrcsFcltSearchFilter = useMemo(() => {
+    switch (swagePrcsFcltLayerMode) {
+      case "gte500":
+        return { label: "하수처리시설(500톤 이상)", cqlFilter: "fclt_cpct >= 500" };
+      case "lt500":
+        return { label: "하수처리시설(500톤 미만)", cqlFilter: "fclt_cpct < 500" };
+      case "none":
+        return { label: "하수처리시설(레이어 꺼짐)", disabled: true };
+      case "all":
+      default:
+        return { label: "하수처리시설(전체)" };
+    }
+  }, [swagePrcsFcltLayerMode]);
+
+  const facilityTypes = [{ text: "하수처리시설", val: SWAGE_PRCS_FCLT_LAYER_TYPE }];
 
   const fetchAgedPipeRows = useCallback(
     async (page: number, filters: AgedPipeFilters, size: number) => {
@@ -975,6 +4092,883 @@ const Map = () => {
     openAgedPipePopupWindow();
   }, [openAgedPipePopupWindow]);
 
+  const removeSinkholeLayer = useCallback(() => {
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(SINKHOLE_LAYER_ID);
+    sinkholeLayerRef.current = null;
+    sinkholeSourceRef.current = null;
+  }, []);
+
+  const ensureSinkholeLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (sinkholeLayerRef.current && sinkholeSourceRef.current) {
+      return sinkholeSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 9992,
+      updateWhileAnimating: false,
+      updateWhileInteracting: false,
+    });
+
+    layer.set("id", SINKHOLE_LAYER_ID);
+    layer.set("lyrNm", SINKHOLE_LAYER_NAME);
+    layer.set("lyrTyNm", SINKHOLE_LAYER_TYPE);
+    layer.set("clickPsblYn", "Y");
+    layer.set("chcYn", "N");
+
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(SINKHOLE_LAYER_ID);
+    map.addLayer(layer);
+    sinkholeLayerRef.current = layer;
+    sinkholeSourceRef.current = source;
+    return source;
+  }, []);
+
+  const clearSinkholeSelectionLayer = useCallback(() => {
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(SINKHOLE_SELECTED_LAYER_ID);
+    sinkholeSelectedLayerRef.current = null;
+    sinkholeSelectedSourceRef.current = null;
+  }, []);
+
+  const clearSinkholeFocusedPipeLayer = useCallback(() => {
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.("SN_SINKHOLE_FOCUSED_PIPE_LAYER");
+    sinkholeFocusedPipeLayerRef.current = null;
+    sinkholeFocusedPipeSourceRef.current = null;
+  }, []);
+
+  const ensureSinkholeSelectionLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (sinkholeSelectedLayerRef.current && sinkholeSelectedSourceRef.current) {
+      return sinkholeSelectedSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 9996,
+      updateWhileAnimating: false,
+      updateWhileInteracting: false,
+    });
+
+    layer.set("id", SINKHOLE_SELECTED_LAYER_ID);
+    layer.set("lyrNm", `${SINKHOLE_LAYER_NAME}-선택`);
+    layer.set("lyrTyNm", SINKHOLE_LAYER_TYPE);
+    layer.set("clickPsblYn", "N");
+
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(SINKHOLE_SELECTED_LAYER_ID);
+    map.addLayer(layer);
+    sinkholeSelectedLayerRef.current = layer;
+    sinkholeSelectedSourceRef.current = source;
+    return source;
+  }, []);
+
+  const ensureSinkholeFocusedPipeLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (sinkholeFocusedPipeLayerRef.current && sinkholeFocusedPipeSourceRef.current) {
+      return sinkholeFocusedPipeSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 9999,
+      updateWhileAnimating: false,
+      updateWhileInteracting: false,
+    });
+
+    layer.set("id", "SN_SINKHOLE_FOCUSED_PIPE_LAYER");
+    layer.set("lyrNm", "지반침하-관로강조");
+    layer.set("lyrTyNm", "tb_ms_swage_ppl");
+    layer.set("clickPsblYn", "N");
+
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.("SN_SINKHOLE_FOCUSED_PIPE_LAYER");
+    map.addLayer(layer);
+    sinkholeFocusedPipeLayerRef.current = layer;
+    sinkholeFocusedPipeSourceRef.current = source;
+    return source;
+  }, []);
+
+  const renderSelectedSinkhole = useCallback(
+    (detail: SinkholeDetail | null, radiusMeters: number) => {
+      if (!detail || detail.x == null || detail.y == null) {
+        clearSinkholeSelectionLayer();
+        return;
+      }
+
+      const source = ensureSinkholeSelectionLayer();
+      if (!source) return;
+      source.clear();
+
+      const pointFeature = new Feature({
+        geometry: new Point([detail.x, detail.y]),
+      });
+      const pointVariant = resolveSinkholePointVariant(detail.ocrnYmd);
+      pointFeature.setStyle(createSinkholePointStyle(pointVariant, true));
+
+      const radiusFeature = new Feature({
+        geometry: new CircleGeom([detail.x, detail.y], radiusMeters),
+      });
+      radiusFeature.setStyle(createSinkholeRadiusStyle(pointVariant));
+
+      // 원의 북쪽 경계에 라벨을 두고 같은 source에서 관리해 선택 해제 시 함께 정리한다.
+      const radiusLabelFeature = new Feature({
+        geometry: new Point([detail.x, detail.y + radiusMeters]),
+      });
+      radiusLabelFeature.set("sinkholeRadiusLabel", true);
+      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 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(
+    (data: any) => {
+      const select = GisApp.Module.select as any;
+      select?.resetSelectedFeature?.();
+
+      const layerTypeName = getSelectedFeatureLayerTypeName(data);
+      if (layerTypeName === SINKHOLE_LAYER_TYPE) {
+        clearSinkholeFocusedPipeLayer();
+
+        return;
+      }
+
+      if (!data || typeof data.getGeometry !== "function") {
+        clearSinkholeFocusedPipeLayer();
+
+        return;
+      }
+
+      if (layerTypeName === "tb_ms_swage_ppl") {
+        const source = ensureSinkholeFocusedPipeLayer();
+        if (!source) return;
+
+        source.clear();
+        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());
+        source.addFeature(focusedFeature);
+        select?.selectFeature?.(focusedFeature, true);
+        return;
+      }
+
+      clearSinkholeFocusedPipeLayer();
+
+      select?.selectFeature?.(data, true);
+    },
+    [clearSinkholeFocusedPipeLayer, ensureSinkholeFocusedPipeLayer],
+  );
+
+  const ensureFloodHistoryAreaSource = useCallback(() => {
+    if (!mapReady || !gisMaps.current) return null;
+
+    if (!floodHistoryAreaLayerRef.current) {
+      const source = new VectorSource();
+      const layer = new VectorLayer({
+        source,
+        zIndex: 9993,
+      });
+      layer.set("id", FLOOD_HISTORY_AREA_LAYER_ID);
+      layer.set("lyrNm", "침수흔적도");
+      layer.set("lyrTyNm", FLOOD_HISTORY_LAYER_TYPE);
+      layer.set("clickPsblYn", "N");
+      gisMaps.current.addLayer(layer);
+      floodHistoryAreaLayerRef.current = layer;
+    }
+
+    return floodHistoryAreaLayerRef.current.getSource();
+  }, [mapReady]);
+
+  const ensureFloodHistoryDepthSource = useCallback(() => {
+    if (!mapReady || !gisMaps.current) return null;
+
+    if (!floodHistoryDepthLayerRef.current) {
+      const source = new VectorSource();
+      const layer = new VectorLayer({
+        source,
+        zIndex: 9992,
+      });
+      layer.set("id", FLOOD_HISTORY_DEPTH_LAYER_ID);
+      layer.set("lyrNm", "침수흔적도");
+      layer.set("lyrTyNm", FLOOD_HISTORY_LAYER_TYPE);
+      layer.set("clickPsblYn", "N");
+      gisMaps.current.addLayer(layer);
+      floodHistoryDepthLayerRef.current = layer;
+    }
+
+    return floodHistoryDepthLayerRef.current.getSource();
+  }, [mapReady]);
+
+  const clearFloodHistoryLayers = useCallback(() => {
+    floodHistoryAreaLayerRef.current?.getSource?.()?.clear?.();
+    floodHistoryDepthLayerRef.current?.getSource?.()?.clear?.();
+  }, []);
+
+  const renderSelectedFloodHistory = useCallback(
+    (detail: FloodHistoryItem | null) => {
+      const areaSource = ensureFloodHistoryAreaSource();
+      const depthSource = ensureFloodHistoryDepthSource();
+      if (!areaSource || !depthSource) return;
+
+      areaSource.clear();
+      depthSource.clear();
+
+      if (!detail) return;
+
+      const areaFeature = new Feature({
+        geometry: new Polygon([detail.areaRing]),
+      });
+      areaFeature.setStyle(createFloodHistoryAreaStyle(`${detail.floodYear}년 ${detail.districtName}`));
+      areaSource.addFeature(areaFeature);
+
+      detail.depthZones.forEach((zone) => {
+        const zoneFeature = new Feature({
+          geometry: new Polygon([zone.ring]),
+        });
+        zoneFeature.setStyle(createFloodHistoryDepthStyle(zone.depthLabel, zone.color));
+        depthSource.addFeature(zoneFeature);
+      });
+    },
+    [ensureFloodHistoryAreaSource, ensureFloodHistoryDepthSource],
+  );
+
+  const focusFloodHistoryOnMap = useCallback((detail: FloodHistoryItem) => {
+    if (!gisMaps.current) return;
+
+    const geometry = new Polygon([detail.areaRing]);
+    gisMaps.current.getView?.().fit?.(geometry.getExtent(), {
+      duration: 350,
+      padding: FLOOD_HISTORY_SELECTION_PADDING,
+      maxZoom: 15,
+      constrainResolution: true,
+      nearest: true,
+    });
+  }, []);
+
+  const clearFloodHistorySelection = useCallback(() => {
+    setSelectedFloodHistoryDetail(null);
+    setFloodHistoryDetailPopupPosition(null);
+    clearFloodHistoryLayers();
+  }, [clearFloodHistoryLayers]);
+
+  const closeFloodHistoryDetail = useCallback(() => {
+    setFloodHistoryDetailPopupPosition(null);
+  }, []);
+
+  const handleFloodHistoryRowSelect = useCallback(
+    (detail: FloodHistoryItem) => {
+      setSelectedFloodHistoryDetail(detail);
+      renderSelectedFloodHistory(detail);
+      focusFloodHistoryOnMap(detail);
+      setIsSearchModalOpen(false);
+    },
+    [focusFloodHistoryOnMap, renderSelectedFloodHistory, setIsSearchModalOpen],
+  );
+
+  const openFloodHistoryPopupWindow = useCallback(() => {
+    const popup = openWindowPopup(FLOOD_HISTORY_POPUP_KEY as WindowPopupKey);
+    if (!popup) {
+      alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
+      return null;
+    }
+    return popup;
+  }, []);
+
+  const buildSinkholeQueryString = useCallback(
+    (filters: SinkholeFilters, page = 0, size = SINKHOLE_DEFAULT_POINT_LIMIT) =>
+      buildSinkholeListQueryString(filters, ctpv, sgg, page, size),
+    [ctpv, sgg],
+  );
+
+  const loadSinkholeLayer = useCallback(
+    async (filters = appliedSinkholeFilters) => {
+      if (!mapReady || !gisMaps.current || !isSinkholeChecked) return;
+
+      const source = ensureSinkholeLayer();
+      if (!source) return;
+
+      const effectiveFilters = normalizeSinkholeFilters(filters, sinkholeScope);
+      try {
+        const params = new URLSearchParams(buildSinkholeQueryString(effectiveFilters, 0, SINKHOLE_DEFAULT_POINT_LIMIT));
+        const rawResponse = await getRawJson(
+          `/sewerage-service/api/v1/sinkholes?${params.toString()}`,
+        );
+        const items = Array.isArray(rawResponse?.data?.items)
+          ? (rawResponse.data.items as SinkholeListItem[])
+          : Array.isArray(rawResponse?.items)
+            ? (rawResponse.items as SinkholeListItem[])
+            : [];
+        const featureCollection = buildSinkholeFeatureCollectionFromItems(items);
+
+        if (!featureCollection) {
+          console.warn("지반침하 목록 응답을 feature collection으로 변환하지 못했습니다.", rawResponse);
+          source.clear();
+          return;
+        }
+
+        const features = new GeoJSON().readFeatures(featureCollection, {
+          dataProjection: "EPSG:5179",
+          featureProjection: GisApp.TO_PROJ,
+        });
+        source.clear();
+        features.forEach((feature: any) => {
+          const variant = resolveSinkholePointVariant(
+            String(feature?.get?.("ocrnYmd") ?? ""),
+          );
+          feature.setStyle(createSinkholePointStyle(variant, false));
+        });
+        source.addFeatures(features);
+      } catch (error) {
+        console.error("지반침하 레이어 조회 실패:", error);
+        source.clear();
+      }
+    },
+    [appliedSinkholeFilters, buildSinkholeQueryString, ensureSinkholeLayer, isSinkholeChecked, mapReady, sinkholeScope],
+  );
+
+  const closeSinkholeDetail = useCallback(() => {
+    setSelectedSinkholeDetail(null);
+    setSelectedSinkholeNearbyPipes([]);
+    clearSinkholeSelectionLayer();
+    clearSinkholeFocusedPipeLayer();
+
+    if (getSelectedFeatureLayerTypeName(featureData) === SINKHOLE_LAYER_TYPE) {
+      setFeatureData(null);
+      setIsOpen(false);
+    }
+  }, [clearSinkholeFocusedPipeLayer, clearSinkholeSelectionLayer, featureData]);
+
+  const loadSinkholeDetail = useCallback(
+    async (
+      acdntNo: string,
+      focusMap = true,
+      fallbackPoint?: { x: number; y: number } | null,
+      fallbackDetail?: Partial<SinkholeDetail> | null,
+    ) => {
+      if (!acdntNo) return;
+
+      try {
+        const hasFallbackCoordinate =
+          (fallbackDetail?.x != null && fallbackDetail?.y != null) ||
+          (fallbackPoint != null &&
+            Number.isFinite(fallbackPoint.x) &&
+            Number.isFinite(fallbackPoint.y));
+        const fallbackCoordStatus = String(
+          fallbackDetail?.coordStatus ?? fallbackDetail?.geocodeStatus ?? "",
+        )
+          .trim()
+          .toUpperCase();
+
+        if (
+          fallbackDetail &&
+          !hasFallbackCoordinate &&
+          fallbackCoordStatus &&
+          fallbackCoordStatus !== "SUCCESS"
+        ) {
+          const noCoordDetail: SinkholeDetail = {
+            acdntNo,
+            ctpvNm: String(fallbackDetail.ctpvNm ?? ""),
+            sggNm: String(fallbackDetail.sggNm ?? ""),
+            emdNm: String(fallbackDetail.emdNm ?? ""),
+            daddr: String(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 ?? ""),
+            geocodeSource: String(fallbackDetail.geocodeSource ?? ""),
+            geocodeErrorMessage: String(fallbackDetail.geocodeErrorMessage ?? ""),
+            latitude: fallbackDetail.latitude ?? null,
+            longitude: fallbackDetail.longitude ?? null,
+            x: fallbackDetail.x ?? null,
+            y: fallbackDetail.y ?? null,
+            sizeWidth: fallbackDetail.sizeWidth ?? null,
+            sizeLength: fallbackDetail.sizeLength ?? null,
+            sizeDepth: fallbackDetail.sizeDepth ?? null,
+            detailCause: fallbackDetail.detailCause ?? null,
+            deathCount: fallbackDetail.deathCount ?? null,
+            injuryCount: fallbackDetail.injuryCount ?? null,
+            vehicleDamageCount: fallbackDetail.vehicleDamageCount ?? null,
+          };
+
+          setSelectedSinkholeDetail(noCoordDetail);
+          setSelectedSinkholeNearbyPipes([]);
+          renderSelectedSinkhole(null, sinkholeRadiusMeters);
+          setFeatureData({
+            lyrTypeNm: SINKHOLE_LAYER_TYPE,
+            acdntNo: noCoordDetail.acdntNo,
+          });
+          setIsOpen(true);
+          setIsSearchModalOpen(false);
+          return;
+        }
+
+        let detail: SinkholeDetail;
+        try {
+          const detailResponse = await getRawJson(
+            `/sewerage-service/api/v1/sinkholes/${encodeURIComponent(acdntNo)}`,
+          );
+          detail = ((detailResponse?.data ?? detailResponse) as SinkholeDetail);
+        } catch (detailError) {
+          if (!fallbackDetail) {
+            throw 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 ?? ""),
+            ocrnYmd: String(fallbackDetail.ocrnYmd ?? ""),
+            restoreStatus: String(fallbackDetail.restoreStatus ?? ""),
+            restoreCompletedYmd: String(fallbackDetail.restoreCompletedYmd ?? ""),
+            coordStatus: String(fallbackDetail.coordStatus ?? ""),
+            geocodeStatus: String(fallbackDetail.geocodeStatus ?? fallbackDetail.coordStatus ?? ""),
+            geocodeSource: String(fallbackDetail.geocodeSource ?? ""),
+            geocodeErrorMessage: String(fallbackDetail.geocodeErrorMessage ?? ""),
+            latitude: fallbackDetail.latitude ?? null,
+            longitude: fallbackDetail.longitude ?? null,
+            x: fallbackDetail.x ?? null,
+            y: fallbackDetail.y ?? null,
+            sizeWidth: fallbackDetail.sizeWidth ?? null,
+            sizeLength: fallbackDetail.sizeLength ?? null,
+            sizeDepth: fallbackDetail.sizeDepth ?? null,
+            detailCause: fallbackDetail.detailCause ?? null,
+            deathCount: fallbackDetail.deathCount ?? null,
+            injuryCount: fallbackDetail.injuryCount ?? null,
+            vehicleDamageCount: fallbackDetail.vehicleDamageCount ?? null,
+          };
+        }
+        const resolvedPoint =
+          detail.x != null && detail.y != null
+            ? { x: detail.x, y: detail.y }
+            : fallbackPoint && Number.isFinite(fallbackPoint.x) && Number.isFinite(fallbackPoint.y)
+              ? fallbackPoint
+              : null;
+
+        let nearbyPipes: SinkholeNearbyPipe[] = [];
+        try {
+          const nearbyRawResponse = resolvedPoint
+            ? await getRawJson(
+                `/sewerage-service/api/v1/sinkholes/nearbyPipesByPoint?x=${resolvedPoint.x}&y=${resolvedPoint.y}&radiusMeters=${sinkholeRadiusMeters}`,
+              )
+            : await getRawJson(
+                `/sewerage-service/api/v1/sinkholes/${encodeURIComponent(acdntNo)}/nearbyPipes?radiusMeters=${sinkholeRadiusMeters}`,
+              );
+          const nearbyResponse = nearbyRawResponse?.data ?? nearbyRawResponse;
+          nearbyPipes = Array.isArray(nearbyResponse?.items)
+            ? (nearbyResponse.items as SinkholeNearbyPipe[])
+            : [];
+        } catch (nearbyError) {
+          console.warn("지반침하 반경 내 관로 조회 실패, 상세는 계속 표시합니다.", nearbyError);
+        }
+        const normalizedDetail = resolvedPoint
+          ? {
+              ...detail,
+              x: resolvedPoint.x,
+              y: resolvedPoint.y,
+              coordStatus: "SUCCESS",
+            }
+          : detail;
+
+        setSelectedSinkholeDetail(normalizedDetail);
+        setSelectedSinkholeNearbyPipes(nearbyPipes);
+        renderSelectedSinkhole(normalizedDetail, sinkholeRadiusMeters);
+        setFeatureData({
+          lyrTypeNm: SINKHOLE_LAYER_TYPE,
+          acdntNo: normalizedDetail.acdntNo,
+        });
+        setIsOpen(true);
+        setIsSearchModalOpen(false);
+
+        if (focusMap && normalizedDetail.x != null && normalizedDetail.y != null) {
+          focusSinkholeOnMap(normalizedDetail, sinkholeRadiusMeters);
+        }
+      } catch (error) {
+        console.error("지반침하 상세 조회 중 오류:", error);
+        alert("지반침하 상세 정보를 불러오지 못했습니다.");
+      }
+    },
+    [focusSinkholeOnMap, renderSelectedSinkhole, setIsSearchModalOpen, sinkholeRadiusMeters],
+  );
+
+  const applySinkholeRadius = useCallback(
+    async (radiusMeters: number) => {
+      setSinkholeRadiusMeters(radiusMeters);
+      if (!selectedSinkholeDetail?.acdntNo) {
+        return;
+      }
+
+      const selectedPoint =
+        selectedSinkholeDetail.x != null && selectedSinkholeDetail.y != null
+          ? { 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 nearbyResponse = nearbyRawResponse?.data ?? nearbyRawResponse;
+        setSelectedSinkholeNearbyPipes(
+          Array.isArray(nearbyResponse?.items) ? (nearbyResponse.items as SinkholeNearbyPipe[]) : [],
+        );
+        renderSelectedSinkhole(selectedSinkholeDetail, radiusMeters);
+        focusSinkholeOnMap(selectedSinkholeDetail, radiusMeters);
+      } catch (error) {
+        console.error("지반침하 반경 적용 중 오류:", error);
+        alert("반경 내 하수관로 정보를 다시 조회하지 못했습니다.");
+        throw error;
+      }
+    },
+    [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);
+      }
+    } catch (error) {
+      console.error("지반침하 반경 내 관로 지도 표시 실패:", error);
+      alert("선택한 관로를 지도에서 표시하지 못했습니다.");
+    }
+  }, [
+    activeRightPanelTabId,
+    rightPanelTabs,
+    setIsSearchModalOpen,
+    syncRightPanelFeatureSelectionOnMap,
+  ]);
+
+  const buildRightPanelTab = useCallback(
+    (data: any): RightPanelTab | null => {
+      if (!data) return null;
+
+      const layerTypeName = getSelectedFeatureLayerTypeName(data);
+      const now = Date.now();
+
+      if (layerTypeName === SINKHOLE_LAYER_TYPE) {
+        const detail = selectedSinkholeDetail;
+        const acdntNo = String(detail?.acdntNo ?? getSinkholeAccidentId(data) ?? "").trim();
+        if (!acdntNo) return null;
+
+        return {
+          id: `sinkhole:${acdntNo}`,
+          kind: "sinkhole",
+          category: "sinkhole",
+          displayLabel: `지반침하(${acdntNo})`,
+          parentTabId: null,
+          featureData: {
+            lyrTypeNm: SINKHOLE_LAYER_TYPE,
+            acdntNo,
+          },
+          sinkholeDetail: detail,
+          nearbyPipes: selectedSinkholeNearbyPipes,
+          lastActiveAt: now,
+        };
+      }
+
+      if (gisEditDetailChangeId) {
+        return {
+          id: `gisEdit:${gisEditDetailChangeId}`,
+          kind: "gisEdit",
+          category: "gisEdit",
+          displayLabel: "관로편집",
+          parentTabId: null,
+          featureData: data,
+          gisEditChangeId: gisEditDetailChangeId,
+          lastActiveAt: now,
+        };
+      }
+
+      const category = getRightPanelTabCategory(data);
+      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;
+      return {
+        id:
+          category === "pipe" && pipeParentTabId
+            ? RIGHT_PANEL_SINKHOLE_PIPE_TAB_ID
+            : `feature:${layerTypeName || "unknown"}:${featureId}`,
+        kind: "feature",
+        category,
+        displayLabel: getRightPanelFeatureDisplayLabel(data, category),
+        parentTabId: pipeParentTabId,
+        featureData: data,
+        lastActiveAt: now,
+      };
+    },
+    [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));
+
+      if (mergedTabs.length <= RIGHT_PANEL_TAB_LIMIT) return mergedTabs;
+
+      const overflowCandidate = findRightPanelTabOverflowCandidate(
+        mergedTabs,
+        nextTab.id,
+      );
+      if (!overflowCandidate) return mergedTabs.slice(-RIGHT_PANEL_TAB_LIMIT);
+
+      return removeRightPanelTabGroup(mergedTabs, overflowCandidate.id);
+    });
+    setActiveRightPanelTabId(tab.id);
+  }, []);
+
+  const activateRightPanelTab = useCallback(
+    (tabId: string) => {
+      const targetTab = rightPanelTabs.find((tab) => tab.id === tabId);
+      if (!targetTab) return;
+
+      setRightPanelTabs((currentTabs) =>
+        currentTabs.map((tab) => (tab.id === tabId ? { ...tab, lastActiveAt: Date.now() } : tab)),
+      );
+      setActiveRightPanelTabId(tabId);
+      if (targetTab.category === "pipe") {
+        pipeParentTabIdRef.current = targetTab.parentTabId ?? null;
+      }
+
+      if (targetTab.kind === "sinkhole") {
+        const detail = targetTab.sinkholeDetail ?? null;
+        setSelectedSinkholeDetail(detail);
+        setSelectedSinkholeNearbyPipes(targetTab.nearbyPipes ?? []);
+        setGisEditDetailChangeId(null);
+        syncRightPanelFeatureSelectionOnMap(targetTab.featureData);
+        if (detail) {
+          renderSelectedSinkhole(detail, sinkholeRadiusMeters);
+        }
+      } else if (targetTab.kind === "gisEdit") {
+        setGisEditDetailChangeId(targetTab.gisEditChangeId ?? null);
+      } else {
+        setGisEditDetailChangeId(null);
+        syncRightPanelFeatureSelectionOnMap(targetTab.featureData);
+      }
+
+      setFeatureData(targetTab.featureData);
+      setIsOpen(true);
+      setIsSearchModalOpen(false);
+    },
+    [
+      renderSelectedSinkhole,
+      rightPanelTabs,
+      setIsSearchModalOpen,
+      sinkholeRadiusMeters,
+      syncRightPanelFeatureSelectionOnMap,
+    ],
+  );
+
+  const closeRightPanelTab = useCallback(
+    (tabId: string | null) => {
+      if (!tabId) return;
+      const closingTab = rightPanelTabs.find((tab) => tab.id === tabId);
+      const remainingTabs = removeRightPanelTabGroup(rightPanelTabs, tabId);
+
+      if (closingTab?.kind === "sinkhole") {
+        setSelectedSinkholeDetail(null);
+        setSelectedSinkholeNearbyPipes([]);
+        clearSinkholeSelectionLayer();
+      }
+      if (closingTab?.kind === "feature") {
+        const select = GisApp.Module.select as any;
+        select?.resetSelectedFeature?.();
+        clearSinkholeFocusedPipeLayer();
+      }
+      if (closingTab?.kind === "gisEdit") {
+        setGisEditDetailChangeId(null);
+      }
+      if (closingTab?.category === "pipe" || pipeParentTabIdRef.current === tabId) {
+        pipeParentTabIdRef.current = null;
+      }
+
+      setRightPanelTabs(remainingTabs);
+
+      if (remainingTabs.length === 0) {
+        setActiveRightPanelTabId(null);
+        pipeParentTabIdRef.current = null;
+        setFeatureData(null);
+        setIsOpen(false);
+        return;
+      }
+
+      const parentFallbackTab =
+        closingTab?.category === "pipe" && closingTab.parentTabId
+          ? remainingTabs.find((tab) => tab.id === closingTab.parentTabId)
+          : null;
+      const fallbackTab =
+        parentFallbackTab ?? [...remainingTabs].sort((a, b) => b.lastActiveAt - a.lastActiveAt)[0]!;
+      activateRightPanelTab(fallbackTab.id);
+    },
+    [activateRightPanelTab, clearSinkholeFocusedPipeLayer, clearSinkholeSelectionLayer, rightPanelTabs],
+  );
+
+  // 선택 피처가 없는 지도 본체 클릭을 기존 지반침하 상세 닫기 흐름과 연결한다.
+  const handleSinkholeMapBlankClick = useCallback(() => {
+    if (gisEdit.isEditMode || !selectedSinkholeDetail?.acdntNo) return;
+
+    const sinkholeTabId = `sinkhole:${selectedSinkholeDetail.acdntNo}`;
+    const hasSinkholeTab = rightPanelTabs.some((tab) => tab.id === sinkholeTabId);
+
+    if (hasSinkholeTab && activeRightPanelTabId === sinkholeTabId) {
+      closeRightPanelTab(sinkholeTabId);
+    } else {
+      // 비활성 지반침하 탭은 현재 활성 탭을 바꾸지 않고 종속 관로와 함께 제거한다.
+      setRightPanelTabs((currentTabs) =>
+        removeRightPanelTabGroup(currentTabs, sinkholeTabId),
+      );
+      setSelectedSinkholeDetail(null);
+      setSelectedSinkholeNearbyPipes([]);
+      clearSinkholeSelectionLayer();
+      if (pipeParentTabIdRef.current === sinkholeTabId) {
+        pipeParentTabIdRef.current = null;
+      }
+      if (!hasSinkholeTab && getSelectedFeatureLayerTypeName(featureData) === SINKHOLE_LAYER_TYPE) {
+        setFeatureData(null);
+        setIsOpen(false);
+      }
+    }
+
+    const select = GisApp.Module.select as any;
+    select?.resetSelectedFeature?.();
+    clearSinkholeFocusedPipeLayer();
+  }, [
+    activeRightPanelTabId,
+    clearSinkholeFocusedPipeLayer,
+    clearSinkholeSelectionLayer,
+    closeRightPanelTab,
+    featureData,
+    gisEdit.isEditMode,
+    rightPanelTabs,
+    selectedSinkholeDetail,
+  ]);
+
+  useEffect(() => {
+    if (!isOpen || !featureData) return;
+    const nextTab = buildRightPanelTab(featureData);
+    if (nextTab) upsertRightPanelTab(nextTab);
+  }, [buildRightPanelTab, featureData, isOpen, upsertRightPanelTab]);
+
+  useEffect(() => {
+    if (isOpen) return;
+    pipeParentTabIdRef.current = null;
+    setRightPanelTabs([]);
+    setActiveRightPanelTabId(null);
+  }, [isOpen]);
+
+  const openSinkholePopupWindow = useCallback(() => {
+    const effectiveFilters = normalizeSinkholeFilters(appliedSinkholeFilters, sinkholeScope);
+    const popup = openWindowPopup(SINKHOLE_POPUP_KEY as WindowPopupKey, effectiveFilters as Record<string, string>);
+    if (!popup) {
+      alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
+      return null;
+    }
+
+    setIsSinkholePopupFilterActive(true);
+    setAppliedSinkholeFilters(effectiveFilters);
+    setSinkholeSelectionVersion((version) => version + 1);
+
+    if (sinkholePopupCloseWatcherRef.current) {
+      window.clearInterval(sinkholePopupCloseWatcherRef.current);
+      sinkholePopupCloseWatcherRef.current = null;
+    }
+    sinkholePopupWindowRef.current = popup;
+    sinkholePopupCloseWatcherRef.current = window.setInterval(() => {
+      if (!popup.closed) return;
+      if (sinkholePopupCloseWatcherRef.current) {
+        window.clearInterval(sinkholePopupCloseWatcherRef.current);
+        sinkholePopupCloseWatcherRef.current = null;
+      }
+      sinkholePopupWindowRef.current = null;
+      setIsSinkholePopupFilterActive(false);
+      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;
+    }
+  }, []);
+
   const handleAgedPipeRowDoubleClick = useCallback(
     async (row: AgedPipeRow) => {
       try {
@@ -1078,6 +5072,50 @@ const Map = () => {
     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);
+        setIsSinkholePopupFilterActive(true);
+        setAppliedSinkholeFilters(normalized);
+        setSinkholeSelectionVersion((version) => version + 1);
+        return;
+      }
+
+      if (event.data?.type === SINKHOLE_ROW_SELECT_MESSAGE && event.data?.row) {
+        const row = event.data.row as SinkholeListItem;
+        const fallbackPoint =
+          row.x != null && row.y != null
+            ? { x: Number(row.x), y: Number(row.y) }
+            : null;
+        void loadSinkholeDetail(String(row.acdntNo ?? ""), true, fallbackPoint, row);
+        return;
+      }
+
+      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);
+  }, [loadSinkholeDetail, sinkholeScope]);
+
+  useEffect(() => {
+    const handleFloodHistoryPopupMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== FLOOD_HISTORY_ROW_SELECT_MESSAGE || !event.data?.row) return;
+
+      handleFloodHistoryRowSelect(event.data.row as FloodHistoryItem);
+    };
+
+    window.addEventListener("message", handleFloodHistoryPopupMessage);
+    return () => window.removeEventListener("message", handleFloodHistoryPopupMessage);
+  }, [handleFloodHistoryRowSelect]);
+
   // WaterDepth 표시 여부를 결정하는 함수
   const handleWaterDepthVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
     const waterDepthLayers = checkedNodesData.filter(node =>
@@ -1085,12 +5123,14 @@ const Map = () => {
     );
 
     const hasWaterDepthLayer = waterDepthLayers.length > 0;
-    setShowWaterDepth(hasWaterDepthLayer);
+    setIsWaterDepthLayerActive(hasWaterDepthLayer);
   }, []);
 
   // 체크된 레이어 변경 처리 함수
   const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
     checkedNodesDataRef.current = checkedNodesData;
+    setCheckedLayerLegendVersion((version) => version + 1);
+    setSwagePrcsFcltLayerMode(getSwagePrcsFcltLayerMode(checkedNodesData));
 
     // 유하방향은 일반 setLayerOnMap 대상이 아니므로 체크 노드 여부를 별도로 추적한다.
     const flowDirectionNode = checkedNodesData.find((node) =>
@@ -1102,12 +5142,22 @@ const Map = () => {
     setIsFlowDirectionChecked(Boolean(nextFlowDirectionLayerInfo));
     setFlowDirectionLayerInfo(nextFlowDirectionLayerInfo);
     if (nextFlowDirectionLayerInfo) {
-      clearFlowDirectionFeatureCache();
+      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;
@@ -1116,8 +5166,57 @@ const Map = () => {
     }
 
     handleWaterDepthVisibility(checkedIds, checkedNodesData);
-    setIsAgedPipeChecked(checkedNodesData.some((node) => isAgedPipeLayerNode(node)));
-  }, [clearFlowDirectionFeatureCache, handleWaterDepthVisibility, removeFlowDirectionLayer]);
+    const agedPipeChecked = checkedNodesData.some((node) => isAgedPipeLayerNode(node));
+    const waterDepthChecked = checkedNodesData.some((node) =>
+      WATER_DEPTH_LAYER_TYPES.includes(String(node?.data?.lyrTyNm ?? "")),
+    );
+    setIsAgedPipeChecked(agedPipeChecked);
+    const floodHistoryChecked = checkedNodesData.some((node) => isFloodHistoryNode(node));
+    setIsFloodHistoryChecked(floodHistoryChecked);
+    if (!floodHistoryChecked) {
+      clearFloodHistorySelection();
+    }
+    const sinkholeChecked = checkedNodesData.some((node) => isSinkholeLayerNode(node));
+    setIsSinkholeChecked(sinkholeChecked);
+    setActiveLayerSettingOrder((currentOrder) => {
+      const activeKeys = [
+        waterDepthChecked ? "waterDepthLegend" : null,
+        sinkholeChecked ? "sinkhole" : null,
+        agedPipeChecked ? "agedPipe" : 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();
+    }
+  }, [clearFloodHistorySelection, closeSinkholeDetail, handleWaterDepthVisibility, removeFlowDirectionLayer, removeSinkholeLayer, retainFlowDirectionUsageCodes]);
+
+  const waterDepthLegendItems = useMemo(
+    () => extractWaterDepthLegendItems(checkedNodesDataRef.current ?? []),
+    [checkedLayerLegendVersion],
+  );
+
+
+  const applySinkholeYearRange = useCallback(
+    (nextRange: SinkholeYearRange) => {
+      const normalizedRange = normalizeSinkholeYearRange(nextRange, sinkholeYearRange);
+      setSinkholeYearRange(normalizedRange);
+      setIsSinkholePopupFilterActive(false);
+      setAppliedSinkholeFilters(
+        normalizeSinkholeFilters(buildSinkholeFiltersFromYearRange(normalizedRange, sinkholeScope), sinkholeScope),
+      );
+      setSinkholeSelectionVersion((version) => version + 1);
+    },
+    [sinkholeScope, sinkholeYearRange],
+  );
 
   const handleOpenLayerPopup = useCallback(
     (_layerNm: string, node?: any) => {
@@ -1125,26 +5224,147 @@ const Map = () => {
         openAgedPipeList();
         return false;
       }
+      if (isSinkholeRootNode(node)) {
+        openSinkholePopupWindow();
+        return false;
+      }
+      if (isFloodHistoryNode(node)) {
+        openFloodHistoryPopupWindow();
+        return false;
+      }
 
       return true;
     },
-    [openAgedPipeList],
+    [openAgedPipeList, openFloodHistoryPopupWindow, openSinkholePopupWindow],
   );
 
-  const inlineLayerSettingView = useCallback(
-    (node: any) => {
-      if (!isAgedPipeChecked || !isAgedPipeLayerNode(node)) return null;
+  // 현재 체크된 특수 레이어만 하단 설정영역에 모아 렌더링하기 위한 패널 목록이다.
+  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;
+    };
 
-      return (
-        <AgedPipeLayerSettingPanel
-          filters={draftAgedPipeFilters}
-          onFiltersChange={setDraftAgedPipeFilters}
-          onApply={handleApplyAgedPipeFilters}
-        />
-      );
-    },
-    [draftAgedPipeFilters, handleApplyAgedPipeFilters, isAgedPipeChecked],
-  );
+    if (isSinkholeChecked) {
+      nextItems.push({
+        key: "sinkhole",
+        label: "지반침하정보",
+        order: resolveSettingOrder("sinkhole", 9998),
+        content: (
+          <SinkholeLayerSettingPanel
+            radiusMeters={sinkholeRadiusMeters}
+            onApplyRadius={applySinkholeRadius}
+            yearRange={sinkholeYearRange}
+            onApplyYearRange={applySinkholeYearRange}
+            lastSyncSummary={lastSinkholeSyncSummary}
+            isAdmin={userInfo?.adminRoleYn === "Y"}
+            compact
+          />
+        ),
+      });
+    }
+
+    if (isAgedPipeChecked) {
+      nextItems.push({
+        key: "agedPipe",
+        label: "노후관로",
+        order: resolveSettingOrder("agedPipe", 9999),
+        content: (
+          <AgedPipeLayerSettingPanel
+            filters={draftAgedPipeFilters}
+            onFiltersChange={setDraftAgedPipeFilters}
+            onApply={handleApplyAgedPipeFilters}
+            compact
+          />
+        ),
+      });
+    }
+
+    if (isWaterDepthLayerActive) {
+      nextItems.push({
+        key: "waterDepthLegend",
+        label: "침수심 범례",
+        order: resolveSettingOrder("waterDepthLegend", 9997),
+        content: (
+          <div className="overflow-hidden rounded-sm border border-border bg-secondary">
+            <div className="px-3 py-2">
+              <div className="rounded-sm border border-border bg-background px-3 py-3">
+                <div className="mb-2 bg-primary py-1 text-center text-[1.1rem] font-semibold text-primary-foreground">
+                  침수심 범례
+                </div>
+                <div className="space-y-1">
+                  {waterDepthLegendItems.map((item) => (
+                    <div key={item.key} className="flex items-center gap-2">
+                      <span
+                        className="inline-block h-4 w-10 shrink-0"
+                        style={{
+                          backgroundColor: item.color,
+                          border: `1px solid ${item.borderColor}`,
+                        }}
+                      />
+                      <span className="text-[1rem] font-medium text-label">{item.label}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        ),
+      });
+    }
+
+    return nextItems
+      .sort((a, b) => a.order - b.order)
+      .map(({ key, label, content }) => ({ key, label, content }));
+  }, [
+    activeLayerSettingOrder,
+    applySinkholeRadius,
+    applySinkholeYearRange,
+    draftAgedPipeFilters,
+    handleApplyAgedPipeFilters,
+    isAgedPipeChecked,
+    isSinkholeChecked,
+    isWaterDepthLayerActive,
+    lastSinkholeSyncSummary,
+    sinkholeRadiusMeters,
+    sinkholeYearRange,
+    userInfo?.adminRoleYn,
+    waterDepthLegendItems,
+  ]);
+
+  // 선택된 설정이 있을 때만 하단 전용 섹션을 노출하고, 세로 공간이 부족하면 내부 스크롤로 처리한다.
+  const ActiveLayerSettingView = useCallback(() => {
+    if (activeLayerSettingItems.length === 0) return null;
+
+    return (
+      <div className="mt-3 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>
+          </div>
+          <div className="mt-1 flex flex-wrap gap-1">
+            {activeLayerSettingItems.map((item) => (
+              <span
+                key={item.key}
+                className="rounded-full border border-border bg-background px-2 py-[1px] text-[1rem] text-label"
+              >
+                {item.label}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className="max-h-[28vh] overflow-y-auto px-1 py-2 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-[4px]">
+          <div className="flex flex-col gap-2">
+            {activeLayerSettingItems.map((item) => (
+              <Fragment key={item.key}>{item.content}</Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }, [activeLayerSettingItems]);
 
   useEffect(() => {
     if (!mapReady || !gisMaps.current) return;
@@ -1193,20 +5413,967 @@ const Map = () => {
     const popup = openWindowPopup(popupKey);
     if (!popup) {
       alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
-      return;
+      return null;
     }
 
     if (popupKey === "pipeAnalysisPopup") {
       pipeAnalysisPopupWindowRef.current = popup;
     }
+
+    if (popupKey === "flowRiskPopup") {
+      clearWaterRiskPopupCloseWatcher();
+      waterRiskPopupWindowRef.current = popup;
+      waterRiskPopupCloseWatcherRef.current = window.setInterval(() => {
+        if (!popup.closed) return;
+        clearWaterRiskPopupCloseWatcher();
+        waterRiskPopupWindowRef.current = null;
+        stopWaterRiskSettingEdit();
+      }, 300);
+    }
+
+    return popup;
+  }, [clearWaterRiskPopupCloseWatcher, stopWaterRiskSettingEdit]);
+
+  const openGisEditSessionPopup = useCallback(() => {
+    const existingPopup = gisEditSessionPopupWindowRef.current;
+    if (existingPopup && !existingPopup.closed) {
+      existingPopup.focus();
+      window.focus?.();
+      return existingPopup;
+    }
+
+    const popup = openWindowPopup("gisEditSessionPopup");
+    if (!popup) return null;
+
+    gisEditSessionPopupWindowRef.current = popup;
+    if (gisEditSessionPopupCloseWatcherRef.current) {
+      window.clearInterval(gisEditSessionPopupCloseWatcherRef.current);
+      gisEditSessionPopupCloseWatcherRef.current = null;
+    }
+    gisEditSessionPopupCloseWatcherRef.current = window.setInterval(() => {
+      if (!popup.closed) return;
+      if (gisEditSessionPopupCloseWatcherRef.current) {
+        window.clearInterval(gisEditSessionPopupCloseWatcherRef.current);
+        gisEditSessionPopupCloseWatcherRef.current = null;
+      }
+      gisEditSessionPopupWindowRef.current = null;
+      setGisEditSessionView("inline");
+    }, 300);
+    window.focus?.();
+    return popup;
   }, []);
 
+  const ensureGisEditPreviewLayer = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return null;
+
+    if (gisEditPreviewLayerRef.current && gisEditPreviewSourceRef.current) {
+      const layers = map.getLayers?.().getArray?.() ?? [];
+      if (!layers.includes(gisEditPreviewLayerRef.current)) {
+        map.addLayer(gisEditPreviewLayerRef.current);
+      }
+      gisEditPreviewLayerRef.current.setZIndex?.(10001);
+      return gisEditPreviewSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      style: createGisEditPreviewStyle,
+      zIndex: 10001,
+      updateWhileAnimating: true,
+      updateWhileInteracting: true,
+    });
+
+    layer.set("id", GIS_EDIT_PREVIEW_LAYER_ID);
+    layer.set("lyrNm", "GIS 편집 미리보기");
+    layer.set("lyrTyNm", GIS_EDIT_PREVIEW_LAYER_ID);
+    // Preview selection is handled by map.forEachFeatureAtPixel; keep it out of the common Select styler.
+    layer.set("clickPsblYn", "N");
+    layer.setVisible?.(true);
+
+    map.addLayer(layer);
+    gisEditPreviewLayerRef.current = layer;
+    gisEditPreviewSourceRef.current = source;
+    return source;
+  }, []);
+
+  const clearGisEditPreviewLayer = useCallback(() => {
+    gisEditPreviewSourceRef.current?.clear();
+    setGisEditPreviewCursor("");
+  }, [setGisEditPreviewCursor]);
+
+  const ensureGisEditPipeSnapSource = useCallback(() => {
+    if (gisEditPipeSnapSourceRef.current) {
+      return gisEditPipeSnapSourceRef.current;
+    }
+    const source = new VectorSource();
+    gisEditPipeSnapSourceRef.current = source;
+    return source;
+  }, []);
+
+  const clearGisEditPipeSnapSource = useCallback(() => {
+    gisEditPipeSnapAbortControllerRef.current?.abort();
+    gisEditPipeSnapAbortControllerRef.current = null;
+    gisEditPipeSnapSourceRef.current?.clear();
+  }, []);
+
+  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,
+            },
+          },
+          {
+            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()}`, {
+        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);
+      }
+    } 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]);
+
+  const restoreGisEditOriginalPipeMask = useCallback(() => {
+    gisEditOriginalLayerFilterRef.current.forEach((originalFilter, layer) => {
+      const source = layer?.getSource?.();
+      const params = { ...(source?.getParams?.() ?? {}) };
+      if (originalFilter) {
+        params.CQL_FILTER = originalFilter;
+      } else {
+        delete params.CQL_FILTER;
+      }
+      params._t = Date.now();
+      source?.updateParams?.(params);
+      source?.refresh?.();
+      source?.changed?.();
+      layer?.changed?.();
+    });
+    gisEditOriginalLayerFilterRef.current.clear();
+
+    gisEditOriginalFeatureStyleRef.current.forEach((originalStyle, feature) => {
+      feature?.setStyle?.(originalStyle);
+      feature?.changed?.();
+    });
+    gisEditOriginalFeatureStyleRef.current.clear();
+    gisMaps.current?.renderSync?.();
+  }, []);
+
+  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?.();
+      }
+
+      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;
+    if (!map) return null;
+
+    if (gisEditVertexLayerRef.current && gisEditVertexSourceRef.current) {
+      return gisEditVertexSourceRef.current;
+    }
+
+    const source = new VectorSource();
+    const layer = new VectorLayer({
+      source,
+      zIndex: 10005,
+      updateWhileAnimating: true,
+      updateWhileInteracting: true,
+    });
+
+    layer.set("id", GIS_EDIT_VERTEX_LAYER_ID);
+    layer.set("lyrNm", "GIS 편집 꼭지점");
+    layer.set("lyrTyNm", GIS_EDIT_VERTEX_LAYER_ID);
+    layer.set("clickPsblYn", "N");
+
+    const core = GisApp.Module.core as any;
+    core?.deleteLayer?.(GIS_EDIT_VERTEX_LAYER_ID);
+    map.addLayer(layer);
+    gisEditVertexLayerRef.current = layer;
+    gisEditVertexSourceRef.current = source;
+    return source;
+  }, []);
+
+  const clearGisEditVertexLayer = useCallback(() => {
+    gisEditVertexSourceRef.current?.clear();
+    gisEditSelectedVertexHandleKeyRef.current = "";
+    gisEditSelectedVertexMetaListRef.current = null;
+  }, []);
+
+  const applySelectedVertexHandleStyle = useCallback(() => {
+    const selectedHandleKey = gisEditSelectedVertexHandleKeyRef.current;
+    const vertexSource = gisEditVertexSourceRef.current;
+    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;
+      feature.setStyle(getGisEditVertexHandleStyle(handleKind, isSelected));
+    });
+    vertexSource.changed?.();
+  }, []);
+
+  const clearSelectedVertexHandle = useCallback(() => {
+    gisEditSelectedVertexHandleKeyRef.current = "";
+    gisEditSelectedVertexMetaListRef.current = null;
+    applySelectedVertexHandleStyle();
+  }, [applySelectedVertexHandleStyle]);
+
+  const shouldUsePipeSnapSource =
+    gisEdit.isEditMode &&
+    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 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 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 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);
+    };
+
+    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]);
+
+  const removeGisEditDrawInteraction = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return;
+
+    if (gisEditDrawSnapRef.current) {
+      map.removeInteraction(gisEditDrawSnapRef.current);
+      gisEditDrawSnapRef.current = null;
+    }
+    if (gisEditDrawRef.current) {
+      map.removeInteraction(gisEditDrawRef.current);
+      gisEditDrawRef.current = null;
+    }
+  }, []);
+
+  const removeGisEditInteractions = useCallback(() => {
+    const map = gisMaps.current;
+    if (!map) return;
+
+    if (gisEditSnapRef.current) {
+      map.removeInteraction(gisEditSnapRef.current);
+      gisEditSnapRef.current = null;
+    }
+    if (gisEditTranslateRef.current) {
+      map.removeInteraction(gisEditTranslateRef.current);
+      gisEditTranslateRef.current = null;
+    }
+    if (gisEditModifyRef.current) {
+      const modifyInteractions = Array.isArray(gisEditModifyRef.current)
+        ? gisEditModifyRef.current
+        : [gisEditModifyRef.current];
+      modifyInteractions.forEach((interaction: any) => {
+        if (interaction) {
+          map.removeInteraction(interaction);
+        }
+      });
+      gisEditModifyRef.current = null;
+    }
+    clearGisEditVertexLayer();
+    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 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);
+    }
+  }, []);
+
+  // GIS 편집 진입 시에는 화면 안 인라인 세션을 우선 표시하고, 윈도우 팝업은 사용자가 명시적으로 연다.
+  const handleToggleGisEdit = useCallback(() => {
+    if (gisEdit.isEditMode) {
+      closeGisEditSessionPopup();
+    } else {
+      setGisEditSessionView("inline");
+    }
+    gisEdit.toggleEditMode();
+    setIsOpen(false);
+  }, [closeGisEditSessionPopup, gisEdit]);
+
+  const handleOpenGisEditSessionPopup = useCallback(() => {
+    const popup = openGisEditSessionPopup();
+    if (!popup) {
+      alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");
+      return;
+    }
+    setGisEditSessionView("popup");
+    syncGisEditSessionPopup();
+  }, [openGisEditSessionPopup, syncGisEditSessionPopup]);
+
+  // 툴바 버튼은 현재 지도 중심 또는 다음 피처 선택을 기준으로 로컬 변경분을 만든다.
+  const handleSelectGisEditTool = useCallback((tool: "ADD" | "MOVE" | "VERTEX_EDIT" | "DELETE") => {
+    if (gisEdit.activeTool === tool) {
+      gisEdit.deactivateTool();
+      removeGisEditDrawInteraction();
+      removeGisEditInteractions();
+      return;
+    }
+
+    removeGisEditDrawInteraction();
+    removeGisEditInteractions();
+    gisEdit.activateTool(tool, gisMaps.current);
+    setIsOpen(false);
+  }, [gisEdit, removeGisEditDrawInteraction, removeGisEditInteractions]);
+
+  const handleCloseGisEdit = useCallback(() => {
+    removeGisEditInteractions();
+    removeGisEditDrawInteraction();
+    clearGisEditPreviewLayer();
+    clearGisEditVertexLayer();
+    closeGisEditSessionPopup();
+    gisEdit.discardSession();
+    setGisEditDetailChangeId(null);
+    setFeatureData(null);
+    setIsOpen(false);
+  }, [
+    clearGisEditPreviewLayer,
+    clearGisEditVertexLayer,
+    closeGisEditSessionPopup,
+    gisEdit,
+    removeGisEditDrawInteraction,
+    removeGisEditInteractions,
+  ]);
+
+  const handleSaveGisEdit = useCallback(async () => {
+    if (isGisEditSaving) return;
+
+    const payload = gisEdit.save(gisMaps.current);
+    if (!payload) return;
+
+    const invalidRequiredChange = findInvalidPipeRequiredChange(payload.changes);
+    if (invalidRequiredChange) {
+      const message = "관리기관코드, 시설관리번호, 기관관리번호, 용도는 필수 입력 항목입니다.";
+      alert(message);
+      gisEdit.announceStatus(message);
+      setGisEditDetailChangeId(invalidRequiredChange.changeId);
+      setIsOpen(true);
+      return;
+    }
+
+    setIsGisEditSaving(true);
+    gisEdit.announceStatus("관로 편집 변경분을 저장 중입니다.");
+    try {
+      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)
+        ? response.refreshLayerTypeNames
+        : results.flatMap((result: any) => result?.refreshLayerTypeNames ?? []);
+      const focusFid = results.find((result: any) => result?.fid && result?.editType !== "DELETE")?.fid ?? null;
+
+      removeGisEditInteractions();
+      removeGisEditDrawInteraction();
+      clearGisEditPreviewLayer();
+      clearGisEditVertexLayer();
+      refreshGisEditTargetLayers(refreshLayerTypeNames, focusFid);
+      gisEdit.clearChanges();
+      setGisEditDetailChangeId(null);
+      setIsOpen(false);
+      closeGisEditSessionPopup();
+      gisEdit.announceStatus(response?.message ?? "하수관로 편집 저장이 완료되었습니다.");
+    } catch (error) {
+      console.error("GIS 편집 저장 실패:", error);
+      const apiError = error as Error & { body?: any };
+      gisEdit.announceStatus(`하수관로 편집 저장 실패: ${apiError.body?.message ?? apiError.message}`);
+    } finally {
+      setIsGisEditSaving(false);
+    }
+  }, [
+    clearGisEditPreviewLayer,
+    clearGisEditVertexLayer,
+    closeGisEditSessionPopup,
+    gisEdit,
+    isGisEditSaving,
+    refreshGisEditTargetLayers,
+    removeGisEditDrawInteraction,
+    removeGisEditInteractions,
+  ]);
+
+  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;
+
+    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}
+          />
+        </>
+      );
+    }
+
+    return (
+      <>
+        {tabsView}
+        <FeatureClickEventPopup
+          {...props}
+          featureData={panelFeatureData}
+          onClose={() => {
+            setGisEditDetailChangeId(null);
+            closeActiveTab();
+          }}
+        />
+      </>
+    );
+  }, [
+    activateRightPanelTab,
+    activeRightPanelTabId,
+    closeRightPanelTab,
+    focusSinkholeNearbyPipe,
+    handleApplyGisEditPipeBasicInfo,
+    rightPanelTabs,
+    selectedSinkholeDetail,
+    selectedSinkholeNearbyPipes,
+    sinkholeRadiusMeters,
+  ]);
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current || !gisEdit.isEditMode) return;
+
+    const map = gisMaps.current;
+    const clickKey = map.on("singleclick", (event: any) => {
+      const vertexHandleFeature =
+        gisEdit.pendingInteraction?.editType === "VERTEX_EDIT"
+          ? map.forEachFeatureAtPixel(
+              event.pixel,
+              (feature: any, layer: any) =>
+                layer === gisEditVertexLayerRef.current ? feature : null,
+              { hitTolerance: 14 },
+            )
+          : null;
+      if (vertexHandleFeature) {
+        event.preventDefault?.();
+        const handleKind = String(vertexHandleFeature.get?.("handleKind") ?? "");
+        if (handleKind !== "vertex") {
+          clearSelectedVertexHandle();
+          gisEdit.announceStatus("흰색 midpoint는 드래그해서 새 꼭지점을 추가할 수 있습니다. Delete 삭제 대상은 주황색 실꼭지점입니다.");
+          return;
+        }
+
+        gisEditSelectedVertexHandleKeyRef.current = String(
+          vertexHandleFeature.get?.("handleSelectionKey") ?? "",
+        );
+        gisEditSelectedVertexMetaListRef.current =
+          (vertexHandleFeature.get?.("handleMetaList") as VertexHandleMeta[] | undefined) ?? null;
+        applySelectedVertexHandleStyle();
+        gisEdit.announceStatus("주황색 실꼭지점을 선택했습니다. Delete 키를 누르면 해당 꼭지점을 삭제합니다.");
+        return;
+      }
+
+      const previewFeature = map.forEachFeatureAtPixel(
+        event.pixel,
+        (feature: any) => String(feature?.get?.("changeId") ?? "").trim() ? feature : null,
+        { hitTolerance: 12 },
+      );
+      // 편집 도구가 켜진 동안에는 공통 Select를 우회하므로 원본 WFS 피처도 여기서 직접 판정한다.
+      const editableSourceFeature = previewFeature
+        ? null
+        : gisEdit.activeTool && gisEdit.activeTool !== "ADD"
+          ? map.forEachFeatureAtPixel(
+              event.pixel,
+              (feature: any) => {
+                if (String(feature?.get?.("changeId") ?? "").trim()) return null;
+                return getSelectedFeatureLayerTypeName(feature) === gisEdit.selectedLayer?.layerId
+                  ? feature
+                  : null;
+              },
+              { hitTolerance: 12 },
+            )
+          : null;
+      const selectedFeature = previewFeature ?? editableSourceFeature;
+      if (!selectedFeature) return;
+      clearSelectedVertexHandle();
+
+      const editSelection = gisEdit.registerFeatureSelection(selectedFeature);
+      if (!editSelection.handled) return;
+
+      event.preventDefault?.();
+
+      if (editSelection.editType === "DELETE") {
+        const select = GisApp.Module.select as any;
+        select?.resetSelectedFeature?.();
+        setGisEditDetailChangeId(null);
+        setFeatureData(null);
+        setIsOpen(false);
+        setIsSearchModalOpen(false);
+        return;
+      }
+
+      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),
+          };
+        }
+        setGisEditDetailChangeId(null);
+        setFeatureData(null);
+        setIsOpen(false);
+        setIsSearchModalOpen(false);
+        return;
+      }
+
+      const selectedChangeId =
+        typeof editSelection.changeId === "string" ? editSelection.changeId : "";
+      const selectedChange = gisEdit.changes.find((change) => change.changeId === selectedChangeId);
+      const canOpenPipeDetail =
+        selectedChangeId &&
+        editSelection.editType !== "DELETE";
+
+      if (canOpenPipeDetail) {
+        openGisEditPipeDetail(selectedChangeId);
+        setFeatureData(
+          selectedChange?.editType === "ADD"
+            ? {
+                lyrTypeNm: "tb_ms_swage_ppl",
+                fcltMngNo: "",
+                mngInstCd: "",
+                fclt_mng_no: "",
+                inst_mng_no: "",
+              }
+            : null,
+        );
+        window.setTimeout(() => {
+          setGisEditDetailChangeId(selectedChangeId);
+          setIsOpen(true);
+        }, 0);
+        setIsSearchModalOpen(false);
+      }
+    });
+
+    return () => {
+      unByKey(clickKey);
+    };
+  }, [
+    applySelectedVertexHandleStyle,
+    clearSelectedVertexHandle,
+    gisEdit.activeTool,
+    gisEdit.changes,
+    gisEdit.isEditMode,
+    gisEdit.pendingInteraction,
+    gisEdit.announceStatus,
+    gisEdit.registerFeatureSelection,
+    gisEdit.selectedLayer,
+    mapReady,
+    openGisEditPipeDetail,
+  ]);
+
+  const gisEditSelectedLayerId = gisEdit.selectedLayer?.layerId ?? "";
+  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) {
+      removeGisEditDrawInteraction();
+      return;
+    }
+
+    removeGisEditInteractions();
+    removeGisEditDrawInteraction();
+
+    const drawSource = ensureGisEditPreviewLayer();
+    if (!drawSource) return;
+    const drawType =
+      gisEditSelectedLayerGeometryType === "Point"
+        ? "Point"
+        : gisEditSelectedLayerGeometryType === "Polygon"
+          ? "Polygon"
+          : "LineString";
+
+    const draw = new Draw({
+      source: drawSource,
+      type: drawType,
+    });
+    const pipeSnapSource = shouldUsePipeSnapSource ? ensureGisEditPipeSnapSource() : null;
+
+    draw.on("drawstart", () => {
+      setGisEditPreviewCursor("crosshair");
+    });
+
+    draw.on("drawend", (event: any) => {
+      try {
+        const pipeSnapSource = shouldUsePipeSnapSource ? ensureGisEditPipeSnapSource() : null;
+        if (pipeSnapSource?.getFeatures?.().length) {
+          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 changeId = gisEdit.registerAddGeometry(geometryObject);
+        if (changeId) {
+          event.feature.setId(`gis-edit:${changeId}`);
+          event.feature.set("fid", changeId);
+          event.feature.set("editType", "ADD");
+          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("isInteractionTarget", false);
+          event.feature.set("isDragging", false);
+          event.feature.set("previewLabel", "신규 추가");
+          event.feature.setStyle(createGisEditPreviewStyle(event.feature));
+          gisMaps.current?.renderSync?.();
+          window.setTimeout(() => {
+            const source = ensureGisEditPreviewLayer();
+            if (!source) return;
+            if (!source.getFeatureById?.(`gis-edit:${changeId}`)) {
+              source.addFeature(event.feature);
+            }
+            event.feature.changed?.();
+            source.changed?.();
+            gisEditPreviewLayerRef.current?.changed?.();
+            gisMaps.current?.renderSync?.();
+          }, 0);
+        } else {
+          window.setTimeout(() => {
+            drawSource.removeFeature(event.feature);
+          }, 0);
+        }
+        if (changeId && gisEditSelectedLayerId === "tb_ms_swage_ppl") {
+          openGisEditPipeDetail(changeId);
+          setFeatureData({
+            lyrTypeNm: "tb_ms_swage_ppl",
+            fcltMngNo: "",
+            mngInstCd: "",
+            fclt_mng_no: "",
+            inst_mng_no: "",
+          });
+          window.setTimeout(() => {
+            setGisEditDetailChangeId(changeId);
+            setIsOpen(true);
+          }, 0);
+          setIsSearchModalOpen(false);
+          window.setTimeout(() => {
+            gisEdit.deactivateTool();
+            removeGisEditDrawInteraction();
+          }, 0);
+          gisEdit.announceStatus("하수관로 신규 객체를 지도에 추가했습니다. 우측 상세정보를 입력한 뒤 저장하세요.");
+        }
+      } catch (error) {
+        console.error("GIS 편집 ADD geometry 변환 실패:", error);
+        gisEdit.announceStatus("신규 geometry를 추가하지 못했습니다. 다시 시도해 주세요.");
+      } finally {
+        setGisEditPreviewCursor("crosshair");
+      }
+    });
+
+    map.addInteraction(draw);
+    gisEditDrawRef.current = draw;
+    if (pipeSnapSource) {
+      const drawSnap = new Snap({
+        source: pipeSnapSource,
+        edge: true,
+        vertex: true,
+        pixelTolerance: 14,
+      });
+      map.addInteraction(drawSnap);
+      gisEditDrawSnapRef.current = drawSnap;
+    }
+
+    return () => {
+      removeGisEditDrawInteraction();
+    };
+  }, [
+    ensureGisEditPreviewLayer,
+    ensureGisEditPipeSnapSource,
+    gisEdit.activeTool,
+    gisEdit.announceStatus,
+    gisEdit.deactivateTool,
+    gisEdit.isEditMode,
+    gisEdit.isSnapEnabled,
+    gisEdit.registerAddGeometry,
+    gisEditSelectedLayerGeometryType,
+    gisEditSelectedLayerId,
+    gisEditSelectedLayerPreviewColors,
+    mapReady,
+    openGisEditPipeDetail,
+    removeGisEditDrawInteraction,
+    removeGisEditInteractions,
+    setGisEditPreviewCursor,
+    shouldUsePipeSnapSource,
+  ]);
+
   useEffect(() => {
     if (!mapReady || !flowDirectionLayerInfo) return;
 
     // 트리 체크 상태나 관종 레이어 선택이 바뀌면 유하방향 API vector layer를 추가/갱신/제거한다.
     if (isFlowDirectionChecked) {
-      loadFlowDirectionLayer(flowDirectionLayerInfo);
+      const requestUsageCodes = flowDirectionSelectionRequestUsageCodesRef.current;
+      flowDirectionSelectionRequestUsageCodesRef.current = null;
+      if (requestUsageCodes && requestUsageCodes.length === 0) return;
+      loadFlowDirectionLayer(flowDirectionLayerInfo, requestUsageCodes ?? undefined);
     } else {
       removeFlowDirectionLayer();
     }
@@ -1233,6 +6400,767 @@ const Map = () => {
     };
   }, [loadFlowDirectionLayer, mapReady]);
 
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+
+    const source = ensureGisEditPreviewLayer();
+    if (!source) return;
+
+    if (gisEdit.changes.length === 0) {
+      clearGisEditPreviewLayer();
+      return;
+    }
+
+    const geoJson = new GeoJSON();
+    const layerPreviewColorMap = new globalThis.Map<string, any>(
+      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),
+    );
+    const nextChangeIdSet = new Set<string>();
+
+    gisEdit.changes.forEach((change) => {
+      if (change.attributeOnly) return;
+
+      const geometry = change.editType === "DELETE" ? change.beforeGeometry : change.afterGeometry;
+      if (!geometry) return;
+
+      const previewEditType =
+        gisEdit.pendingInteraction?.changeId === change.changeId
+          ? gisEdit.pendingInteraction.editType
+          : change.editType;
+      const previewLabel =
+        gisEdit.focusedChangeId === change.changeId && previewEditType === "MOVE"
+          ? "드래그 이동"
+          : gisEdit.focusedChangeId === change.changeId && previewEditType === "VERTEX_EDIT"
+            ? "꼭지점 편집"
+            : previewEditType === "DELETE"
+              ? "삭제 예정"
+              : previewEditType === "MOVE"
+                ? "이동 예정"
+                : previewEditType === "VERTEX_EDIT"
+                  ? "편집 예정"
+                  : "신규 추가";
+
+      let feature = existingFeatureMap.get(change.changeId);
+      const previewColors = layerPreviewColorMap.get(change.layerId);
+      const originalProperties = change.featureProperties ?? {};
+      const previewObjectId = change.objectId ?? change.objectLabel;
+      const previewFid =
+        originalProperties["fid"] ??
+        change.fid ??
+        change.featureRef?.fid ??
+        previewObjectId;
+      if (!feature) {
+        feature = geoJson.readFeature(
+          {
+            type: "Feature",
+            geometry,
+            properties: {
+              ...originalProperties,
+              fid: previewFid,
+              editType: previewEditType,
+              objectId: previewObjectId,
+              layerId: change.layerId,
+              changeId: change.changeId,
+            },
+          },
+          {
+            dataProjection: FLOW_DIRECTION_SRS,
+            featureProjection: GisApp.TO_PROJ,
+          },
+        );
+        feature.setId(`gis-edit:${change.changeId}`);
+        source.addFeature(feature);
+      } else {
+        feature.setGeometry(
+          geoJson.readGeometry(geometry, {
+            dataProjection: FLOW_DIRECTION_SRS,
+            featureProjection: GisApp.TO_PROJ,
+          }),
+        );
+      }
+
+      Object.entries(originalProperties).forEach(([key, value]) => {
+        if (key === "geometry") return;
+        feature.set(key, value);
+      });
+      feature.set("fid", previewFid);
+      feature.set("editType", previewEditType);
+      feature.set("objectId", previewObjectId);
+      feature.set("layerId", change.layerId);
+      feature.set("changeId", change.changeId);
+      feature.set("layerPointColor", previewColors?.pointColor ?? "");
+      feature.set("layerLineColor", previewColors?.lineColor ?? "");
+      feature.set("layerFillColor", previewColors?.fillColor ?? "");
+      feature.set("isInteractionTarget", gisEdit.focusedChangeId === change.changeId);
+      feature.set("isDragging", Boolean(feature.get("isDragging")));
+      feature.set("previewLabel", previewLabel);
+      feature.setStyle(createGisEditPreviewStyle(feature));
+      nextChangeIdSet.add(change.changeId);
+    });
+
+    existingFeatureMap.forEach((feature: any, changeId: string) => {
+      if (!nextChangeIdSet.has(changeId)) {
+        source.removeFeature(feature);
+      }
+    });
+    source.changed?.();
+    gisEditPreviewLayerRef.current?.changed?.();
+    gisMaps.current?.renderSync?.();
+
+  }, [
+    clearGisEditPreviewLayer,
+    ensureGisEditPreviewLayer,
+    gisEdit.changes,
+    gisEdit.editableLayers,
+    gisEdit.focusedChangeId,
+    gisEdit.isEditMode,
+    gisEdit.pendingInteraction,
+    mapReady,
+  ]);
+
+  useEffect(() => {
+    if (!mapReady || !gisEdit.isEditMode || gisEdit.changes.length === 0) return;
+    ensureGisEditPreviewLayer();
+    gisEditPreviewSourceRef.current?.changed?.();
+    gisEditPreviewLayerRef.current?.changed?.();
+    gisMaps.current?.renderSync?.();
+  }, [
+    ensureGisEditPreviewLayer,
+    gisEdit.changes.length,
+    gisEdit.isEditMode,
+    mapReady,
+  ]);
+
+  const gisEditMaskedPipeFidKey = useMemo(() => {
+    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((fid) => /^\d+$/.test(fid));
+    return Array.from(new Set(fids)).sort().join(",");
+  }, [gisEdit.changes]);
+
+  useEffect(() => {
+    if (!mapReady || !gisEdit.isEditMode) {
+      restoreGisEditOriginalPipeMask();
+      return;
+    }
+
+    applyGisEditOriginalPipeMask(gisEditMaskedPipeFidKey ? gisEditMaskedPipeFidKey.split(",") : []);
+  }, [
+    applyGisEditOriginalPipeMask,
+    gisEdit.isEditMode,
+    gisEditMaskedPipeFidKey,
+    mapReady,
+    restoreGisEditOriginalPipeMask,
+  ]);
+
+  useEffect(() => () => {
+    restoreGisEditOriginalPipeMask();
+  }, [restoreGisEditOriginalPipeMask]);
+
+  useEffect(() => () => {
+    clearGisEditPipeSnapSource();
+  }, [clearGisEditPipeSnapSource]);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+    if (!shouldUsePipeSnapSource) {
+      clearGisEditPipeSnapSource();
+      return;
+    }
+
+    const excludedFid =
+      gisEdit.pendingInteraction?.editType === "VERTEX_EDIT" ||
+      gisEdit.pendingInteraction?.editType === "MOVE"
+        ? normalizeGisEditFid(
+            gisEdit.changes.find((change) => change.changeId === gisEdit.pendingInteraction?.changeId)?.fid ??
+            "",
+          )
+        : "";
+
+    void loadGisEditPipeSnapSource({
+      excludedFid,
+      excludedChangeId: gisEdit.pendingInteraction?.changeId ?? null,
+    });
+  }, [
+    clearGisEditPipeSnapSource,
+    gisEdit.changes,
+    gisEdit.pendingInteraction,
+    loadGisEditPipeSnapSource,
+    mapReady,
+    shouldUsePipeSnapSource,
+  ]);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+    if (!shouldUsePipeSnapSource) return;
+
+    const key = gisMaps.current.on("moveend", () => {
+      const excludedFid =
+        gisEdit.pendingInteraction?.editType === "VERTEX_EDIT" ||
+        gisEdit.pendingInteraction?.editType === "MOVE"
+          ? normalizeGisEditFid(
+              gisEdit.changes.find((change) => change.changeId === gisEdit.pendingInteraction?.changeId)?.fid ??
+              "",
+            )
+          : "";
+      void loadGisEditPipeSnapSource({
+        excludedFid,
+        excludedChangeId: gisEdit.pendingInteraction?.changeId ?? null,
+      });
+    });
+
+    return () => {
+      unByKey(key);
+    };
+  }, [
+    gisEdit.changes,
+    gisEdit.pendingInteraction,
+    loadGisEditPipeSnapSource,
+    mapReady,
+    shouldUsePipeSnapSource,
+  ]);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current || !gisEdit.isEditMode || !gisEdit.pendingInteraction) return;
+
+    const source = ensureGisEditPreviewLayer();
+    const map = gisMaps.current;
+    if (!source || !map) return;
+
+    const targetFeature = source
+      .getFeatures()
+      .find((feature: any) => feature.get("changeId") === gisEdit.pendingInteraction?.changeId);
+    if (!targetFeature) {
+      gisEdit.clearPendingInteraction();
+      return;
+    }
+
+    removeGisEditInteractions();
+    const features = new Collection([targetFeature]);
+    let cleanupPointerMove: (() => void) | undefined;
+    const writeGeometryObject = () => {
+      const geometry = targetFeature.getGeometry();
+      if (!geometry) return null;
+      return new GeoJSON().writeGeometryObject(geometry, {
+        featureProjection: GisApp.TO_PROJ,
+        dataProjection: FLOW_DIRECTION_SRS,
+      }) as Record<string, unknown>;
+    };
+    const usePipeSnapSource =
+      shouldUsePipeSnapSource &&
+      (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
+        ? collectGisEditSnapFeatures(targetFeature)
+        : [];
+
+    if (gisEdit.pendingInteraction.editType === "MOVE") {
+      const translate = new Translate({ features, hitTolerance: 10 });
+      let lastTranslateCoordinate: number[] | null = null;
+      let translateStartCoordinate: number[] | null = null;
+      let originalMoveGeometrySnapshot = targetFeature.getGeometry?.()?.clone?.() ?? null;
+      let moveGripCoordinate: number[] | null = null;
+      const moveGripMeta =
+        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;
+        moveGripCoordinate =
+          getGeometryVertexCoordinateByMeta(originalMoveGeometrySnapshot, moveGripMeta) ??
+          getClosestGeometryVertexCoordinate(originalMoveGeometrySnapshot, map, translateStartCoordinate);
+        targetFeature.set("isDragging", true);
+        targetFeature.set("previewLabel", "이동 중");
+        targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
+        setGisEditPreviewCursor("grabbing");
+        targetFeature.changed?.();
+        source.changed?.();
+        map.renderSync?.();
+      });
+      translate.on("translating", (event: any) => {
+        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);
+          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);
+          }
+          targetFeature.setGeometry(geometry);
+        }
+        targetFeature.changed?.();
+        source.changed?.();
+        map.renderSync?.();
+      });
+      translate.on("translateend", (event: any) => {
+        const objectId = String(targetFeature.get("objectId") ?? "");
+        const layerName = gisEdit.selectedLayer?.layerName ?? "선택 레이어";
+        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)) {
+          const geometry = originalMoveGeometrySnapshot.clone();
+          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);
+          }
+          targetFeature.setGeometry(geometry);
+        }
+        gisEdit.updateChangeGeometry(
+          gisEdit.pendingInteraction!.changeId,
+          writeGeometryObject(),
+          `${layerName} ${objectId} 객체 위치를 지도에서 이동했습니다.`,
+          { keepMoveToolActive: true },
+        );
+        targetFeature.changed?.();
+        source.changed?.();
+        map.renderSync?.();
+      });
+      map.addInteraction(translate);
+      gisEditTranslateRef.current = translate;
+      if (pipeSnapSource && pipeSnapSourceHasFeatures) {
+        const snap = new Snap({
+          source: pipeSnapSource,
+          edge: true,
+          vertex: true,
+          pixelTolerance: 14,
+        });
+        map.addInteraction(snap);
+        gisEditSnapRef.current = snap;
+      } else if (gisEdit.isSnapEnabled && snapFeatures.length > 0) {
+        const snap = new Snap({
+          features: new Collection(snapFeatures),
+          edge: true,
+          vertex: true,
+          pixelTolerance: 14,
+        });
+        map.addInteraction(snap);
+        gisEditSnapRef.current = snap;
+      }
+      setGisEditPreviewCursor("grab");
+      map.renderSync?.();
+    }
+
+    if (gisEdit.pendingInteraction.editType === "VERTEX_EDIT") {
+      const geometry = targetFeature.getGeometry?.();
+      const geometryType = geometry?.getType?.();
+      const objectId = String(targetFeature.get("objectId") ?? "");
+      const layerName = gisEdit.selectedLayer?.layerName ?? "선택 레이어";
+
+      if (!geometry || !geometryType || geometryType === "Point" || geometryType === "MultiPoint") {
+        gisEdit.announceStatus(`${layerName} ${objectId} 객체는 꼭지점편집 대상 geometry가 아닙니다.`);
+        gisEdit.clearPendingInteraction();
+        return;
+      }
+
+      const vertexSource = ensureGisEditVertexLayer();
+      const vertexLayer = gisEditVertexLayerRef.current;
+      if (!vertexSource || !vertexLayer) {
+        gisEdit.announceStatus("꼭지점 편집 레이어를 준비하지 못했습니다.");
+        gisEdit.clearPendingInteraction();
+        return;
+      }
+
+      const renderVertexHandles = (hoveredMidpoint: VertexHandleCandidate | null = null) => {
+        vertexSource.clear();
+        buildVertexHandleFeatures(targetFeature.getGeometry?.(), map).forEach((handleFeature: Feature) => {
+          vertexSource.addFeature(handleFeature);
+        });
+        if (hoveredMidpoint) {
+          vertexSource.addFeature(
+            createVertexHandleFeature(hoveredMidpoint.coordinate, hoveredMidpoint.meta),
+          );
+        }
+        vertexSource.changed?.();
+        applySelectedVertexHandleStyle();
+      };
+
+      let geometryBeforeModifyKey = geometryObjectToKey(writeGeometryObject());
+      let activeMidpointKey = "";
+      let isDraggingHandle = false;
+      let originalGeometrySnapshot = targetFeature.getGeometry?.()?.clone?.() ?? null;
+      renderVertexHandles();
+      targetFeature.set("previewLabel", "꼭지점 편집");
+      targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
+      setGisEditPreviewCursor("crosshair");
+
+      const pointerMoveKey = map.on("pointermove", (event: any) => {
+        if (isDraggingHandle || event?.dragging) return;
+
+        const hoveredMidpoint = findHoveredMidpointCandidate(
+          map,
+          targetFeature.getGeometry?.(),
+          event.coordinate,
+        );
+        const nextMidpointKey = hoveredMidpoint
+          ? `${hoveredMidpoint.meta.geometryType}:${hoveredMidpoint.meta.partIndex ?? -1}:${hoveredMidpoint.meta.polygonIndex ?? -1}:${hoveredMidpoint.meta.ringIndex ?? -1}:${hoveredMidpoint.meta.coordIndex}`
+          : "";
+
+        if (nextMidpointKey === activeMidpointKey) return;
+
+        activeMidpointKey = nextMidpointKey;
+        renderVertexHandles(hoveredMidpoint);
+        setGisEditPreviewCursor(hoveredMidpoint ? "copy" : "crosshair");
+        map.renderSync?.();
+      });
+
+      const vertexTranslate = new Translate({
+        layers: [vertexLayer],
+        hitTolerance: 14,
+      });
+
+      vertexTranslate.on("translatestart", (event: any) => {
+        isDraggingHandle = true;
+        geometryBeforeModifyKey = geometryObjectToKey(writeGeometryObject());
+        originalGeometrySnapshot = targetFeature.getGeometry?.()?.clone?.() ?? null;
+        clearSelectedVertexHandle();
+        const handleFeature = event.features?.item?.(0);
+        if (handleFeature) {
+          handleFeature.setStyle(GIS_EDIT_VERTEX_DRAGGING_STYLE);
+        }
+        targetFeature.set("previewLabel", "꼭지점 편집 중");
+        targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
+        setGisEditPreviewCursor("grabbing");
+        map.renderSync?.();
+      });
+
+      vertexTranslate.on("translating", (event: any) => {
+        const handleFeature = event.features?.item?.(0);
+        const handleGeometry = handleFeature?.getGeometry?.();
+        const nextCoordinate = handleGeometry?.getCoordinates?.();
+        const handleMeta = handleFeature?.get?.("handleMeta") as VertexHandleMeta | undefined;
+        const handleMetaList =
+          (handleFeature?.get?.("handleMetaList") as VertexHandleMeta[] | undefined) ??
+          (handleMeta ? [handleMeta] : []);
+
+        if (handleMetaList.length === 0 || !Array.isArray(nextCoordinate) || !originalGeometrySnapshot?.clone) {
+          return;
+        }
+
+        targetFeature.setGeometry(originalGeometrySnapshot.clone());
+        handleMetaList.forEach((meta) => {
+          applyVertexHandleMove(targetFeature.getGeometry?.(), meta, nextCoordinate);
+        });
+        targetFeature.changed?.();
+        source.changed?.();
+        map.renderSync?.();
+      });
+
+      vertexTranslate.on("translateend", (event: any) => {
+        isDraggingHandle = false;
+        const handleFeature = event.features?.item?.(0);
+        const handleGeometry = handleFeature?.getGeometry?.();
+        const nextCoordinate = handleGeometry?.getCoordinates?.();
+        const handleMeta = handleFeature?.get?.("handleMeta") as VertexHandleMeta | undefined;
+        const handleMetaList =
+          (handleFeature?.get?.("handleMetaList") as VertexHandleMeta[] | undefined) ??
+          (handleMeta ? [handleMeta] : []);
+
+        targetFeature.set("previewLabel", "꼭지점 편집");
+        targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
+        setGisEditPreviewCursor("crosshair");
+        activeMidpointKey = "";
+
+        if (handleMetaList.length === 0 || !Array.isArray(nextCoordinate)) {
+          renderVertexHandles();
+          map.renderSync?.();
+          return;
+        }
+
+        handleMetaList.forEach((meta) => {
+          applyVertexHandleMove(targetFeature.getGeometry?.(), meta, nextCoordinate);
+        });
+        const nextGeometry = writeGeometryObject();
+        const geometryChanged = geometryBeforeModifyKey !== geometryObjectToKey(nextGeometry);
+        renderVertexHandles();
+        if (!geometryChanged) {
+          gisEdit.announceStatus(
+            `${layerName} ${objectId} 객체는 아직 형상이 바뀌지 않았습니다. 주황색 꼭지점 또는 가상 꼭지점을 직접 드래그해 주세요.`,
+          );
+          map.renderSync?.();
+          return;
+        }
+
+        gisEdit.updateChangeGeometry(
+          gisEdit.pendingInteraction!.changeId,
+          nextGeometry,
+          `${layerName} ${objectId} 객체 꼭지점을 지도에서 조정했습니다.`,
+          { keepVertexEditActive: true },
+        );
+        targetFeature.changed?.();
+        source.changed?.();
+        map.renderSync?.();
+      });
+
+      map.addInteraction(vertexTranslate);
+      gisEditModifyRef.current = vertexTranslate;
+      if (pipeSnapSource && pipeSnapSourceHasFeatures) {
+        const snap = new Snap({
+          source: pipeSnapSource,
+          edge: true,
+          vertex: true,
+          pixelTolerance: 14,
+        });
+        map.addInteraction(snap);
+        gisEditSnapRef.current = snap;
+      } else if (gisEdit.isSnapEnabled && snapFeatures.length > 0) {
+        const snap = new Snap({
+          features: new Collection(snapFeatures),
+          edge: true,
+          vertex: true,
+          pixelTolerance: 14,
+        });
+        map.addInteraction(snap);
+        gisEditSnapRef.current = snap;
+      }
+      gisMaps.current?.renderSync?.();
+      cleanupPointerMove = () => {
+        unByKey(pointerMoveKey);
+      };
+    }
+
+    return cleanupPointerMove;
+  }, [
+    applySelectedVertexHandleStyle,
+    clearGisEditVertexLayer,
+    clearSelectedVertexHandle,
+    collectGisEditSnapFeatures,
+    ensureGisEditPipeSnapSource,
+    ensureGisEditVertexLayer,
+    ensureGisEditPreviewLayer,
+    gisEdit.isSnapEnabled,
+    gisEdit.pendingInteraction,
+    gisEdit.selectedLayer,
+    gisEdit.updateChangeGeometry,
+    gisEdit.announceStatus,
+    gisEdit.clearPendingInteraction,
+    gisEdit.isEditMode,
+    mapReady,
+    removeGisEditInteractions,
+    shouldUsePipeSnapSource,
+  ]);
+
+  useEffect(() => {
+    if (
+      !mapReady ||
+      !gisMaps.current ||
+      !gisEdit.isEditMode ||
+      gisEdit.pendingInteraction?.editType !== "VERTEX_EDIT"
+    ) {
+      clearSelectedVertexHandle();
+      return;
+    }
+
+    const pendingInteraction = gisEdit.pendingInteraction;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Delete") return;
+      if (isTypingElement(event.target) || isTypingElement(document.activeElement)) return;
+
+      const source = ensureGisEditPreviewLayer();
+      const map = gisMaps.current;
+      if (!source || !map) return;
+
+      const targetFeature = source
+        .getFeatures()
+        .find((feature: any) => feature.get("changeId") === gisEdit.pendingInteraction?.changeId);
+      if (!targetFeature) return;
+
+      const selectedMetaList = gisEditSelectedVertexMetaListRef.current ?? [];
+      if (selectedMetaList.length === 0) {
+        gisEdit.announceStatus("Delete로 삭제할 주황색 실꼭지점을 먼저 클릭하세요.");
+        return;
+      }
+
+      const deleteResult = deleteSelectedVertexHandles(targetFeature.getGeometry?.(), selectedMetaList);
+      if (!deleteResult.ok) {
+        gisEdit.announceStatus(deleteResult.message ?? "꼭지점을 삭제하지 못했습니다.");
+        return;
+      }
+
+      event.preventDefault();
+      clearSelectedVertexHandle();
+
+      const objectId = String(targetFeature.get("objectId") ?? "");
+      const layerName = gisEdit.selectedLayer?.layerName ?? "선택 레이어";
+      const geometry = targetFeature.getGeometry();
+      if (!geometry) {
+        gisEdit.announceStatus("꼭지점 삭제 후 geometry를 확인하지 못했습니다.");
+        return;
+      }
+      targetFeature.set("previewLabel", "꼭지점 편집");
+      targetFeature.setStyle(createGisEditPreviewStyle(targetFeature));
+      gisEdit.updateChangeGeometry(
+        pendingInteraction.changeId,
+        new GeoJSON().writeGeometryObject(geometry, {
+          featureProjection: GisApp.TO_PROJ,
+          dataProjection: FLOW_DIRECTION_SRS,
+        }) as Record<string, unknown>,
+        `${layerName} ${objectId} 객체 꼭지점을 삭제했습니다.`,
+        { keepVertexEditActive: true },
+      );
+      targetFeature.changed?.();
+      source.changed?.();
+      map.renderSync?.();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [
+    clearSelectedVertexHandle,
+    ensureGisEditPreviewLayer,
+    gisEdit.isEditMode,
+    gisEdit.pendingInteraction,
+    gisEdit.selectedLayer,
+    gisEdit.updateChangeGeometry,
+    gisEdit.announceStatus,
+    mapReady,
+  ]);
+
+  useEffect(() => {
+    if (!gisEdit.isEditMode || (gisEdit.activeTool !== "MOVE" && gisEdit.activeTool !== "VERTEX_EDIT")) {
+      removeGisEditInteractions();
+    }
+  }, [gisEdit.activeTool, gisEdit.isEditMode, removeGisEditInteractions]);
+
+  useEffect(() => {
+    const select = GisApp.Module.select as any;
+    if (!select?.setActive) return;
+
+    if (gisEdit.isEditMode && gisEdit.activeTool) {
+      select.resetSelectedFeature?.();
+      select.setActive(false);
+      return;
+    }
+
+    select.setActive(true);
+  }, [gisEdit.activeTool, gisEdit.isEditMode, mapReady]);
+
+  useEffect(() => {
+    if (!gisEdit.isEditMode || gisEdit.activeTool !== "ADD") {
+      removeGisEditDrawInteraction();
+    }
+  }, [gisEdit.activeTool, gisEdit.isEditMode, removeGisEditDrawInteraction]);
+
+  useEffect(() => {
+    if (!mapReady || !isSinkholeChecked) {
+      removeSinkholeLayer();
+      return;
+    }
+
+    void loadSinkholeLayer(appliedSinkholeFilters);
+  }, [
+    appliedSinkholeFilters,
+    isSinkholeChecked,
+    loadSinkholeLayer,
+    mapReady,
+    removeSinkholeLayer,
+    sinkholeSelectionVersion,
+  ]);
+
+  useEffect(() => {
+    const popup = sinkholePopupWindowRef.current;
+    if (!popup || popup.closed) {
+      sinkholePopupWindowRef.current = null;
+      return;
+    }
+
+    const effectiveFilters = normalizeSinkholeFilters(appliedSinkholeFilters, sinkholeScope);
+    popup.postMessage(
+      {
+        type: SINKHOLE_FILTER_SYNC_MESSAGE,
+        filters: effectiveFilters,
+      },
+      window.location.origin,
+    );
+  }, [appliedSinkholeFilters, sinkholeScope, sinkholeSelectionVersion]);
+
+  useEffect(() => {
+    renderSelectedSinkhole(selectedSinkholeDetail, sinkholeRadiusMeters);
+  }, [renderSelectedSinkhole, selectedSinkholeDetail, sinkholeRadiusMeters]);
+
+  useEffect(() => {
+    renderSelectedFloodHistory(selectedFloodHistoryDetail);
+  }, [renderSelectedFloodHistory, selectedFloodHistoryDetail]);
+
+  useEffect(() => {
+    if (!mapReady || !gisMaps.current) return;
+
+    const map = gisMaps.current;
+    const clickKey = map.on("singleclick", (event: any) => {
+      if (!selectedFloodHistoryDetail || !isFloodHistoryChecked) return;
+
+      let clickedFloodHistory = false;
+      map.forEachFeatureAtPixel(
+        event.pixel,
+        (feature: any, layer: any) => {
+          if (
+            layer === floodHistoryAreaLayerRef.current ||
+            layer === floodHistoryDepthLayerRef.current
+          ) {
+            clickedFloodHistory = true;
+            return feature;
+          }
+          return undefined;
+        },
+        { hitTolerance: 4 },
+      );
+
+      if (!clickedFloodHistory) return;
+
+      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);
+      setFloodHistoryDetailPopupPosition({
+        left: nextLeft,
+        top: nextTop,
+      });
+      setIsSearchModalOpen(false);
+    });
+
+    return () => {
+      unByKey(clickKey);
+    };
+  }, [isFloodHistoryChecked, mapReady, selectedFloodHistoryDetail, setIsSearchModalOpen]);
+
+  useEffect(() => {
+    return () => {
+      clearFloodHistoryLayers();
+    };
+  }, [clearFloodHistoryLayers]);
+
 
   return (
     <>
@@ -1247,9 +7175,163 @@ const Map = () => {
             {agedPipeDownloadProgressText}
           </div>
         ) : null}
+        {waterRiskSession.isSettingEditMode ? (
+          <div className="absolute left-4 top-36 z-[60] max-w-[560px] rounded border border-[#f0d27b] bg-white px-4 py-3 text-sm text-[#7a5b00] shadow">
+            <div className="font-semibold">
+              통수위험 설정 모드: {waterRiskSession.selectedSettingAreaName || "중점관리지역 선택 전"}
+            </div>
+            <div className="mt-1">
+              지도에서 하수관로를 클릭하면 staged 목록에 추가됩니다. 최대 3건까지 선택할 수 있습니다.
+            </div>
+          </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)]"
+          >
+            <div className="flex items-center justify-between border-b border-[#e5eaf1] bg-[#f8fafc] px-[9px] py-[7px]">
+              <div>
+                <div className="text-[10px] font-semibold text-[#64748b]">중점관리지역</div>
+                <div className="mt-[2px] text-[13px] font-bold text-[#1f2937]">
+                  {selectedWaterRiskResultRow.areaName}
+                </div>
+              </div>
+              <span
+                className={`inline-flex min-w-[48px] items-center justify-center rounded-full px-[7px] py-[5px] text-[10px] font-bold ${
+                  selectedWaterRiskResultRow.riskStatus === "DANGER"
+                    ? "bg-[#ff1c15] text-white"
+                    : "bg-[#e8f6f4] text-[#0f766e]"
+                }`}
+              >
+                {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)]">
+                <table className="w-full table-fixed border-collapse">
+                  <colgroup>
+                    <col className="w-[46%]" />
+                    <col className="w-[30%]" />
+                    <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]">
+                        예측강우량(mm/hr)
+                      </td>
+                      <td className="px-[9px] py-[7px] text-right text-[12px] font-bold text-[#1f2937]">
+                        {selectedWaterRiskResultRow.forecastRainQty.toFixed(1)}
+                      </td>
+                    </tr>
+
+                    {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}
+                                  </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>
+                            </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 />
+                              (㎥/hr)
+                            </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 />
+                              (㎥/hr)
+                            </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>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        ) : null}
+        {selectedFloodHistoryDetail && floodHistoryDetailPopupPosition ? (
+          <FloodHistoryDetailPanel
+            detail={selectedFloodHistoryDetail}
+            position={floodHistoryDetailPopupPosition}
+            onClose={closeFloodHistoryDetail}
+          />
+        ) : null}
         <AnalysisPopupMenu
+          initialActiveKey={initialAnalysisPopupKey}
           onOpenPopup={openAnalysisPopup}
           onOpenInfoSearch={() => setIsSearchModalOpen(true)}
+          onToggleGisEdit={handleToggleGisEdit}
+          isGisEditActive={gisEdit.isEditMode}
+          isInfoSearchActive={isSearchModalOpen}
+        />
+        {isGisEditSessionInlineVisible ? (
+          <div
+            data-testid="gis-edit-session-inline"
+            className="absolute left-[258px] top-[16px] z-[61] w-[265px]"
+          >
+            <GisEditSessionPanel
+              {...gisEditSessionSnapshot}
+              className="max-h-[calc(50dvh-82px)]"
+              variant="inline"
+              onOpenPopup={handleOpenGisEditSessionPopup}
+              onRemoveFocusedChange={gisEdit.removeFocusedChange}
+              onRemoveLastChange={gisEdit.removeLastChange}
+              onClearChanges={gisEdit.clearChanges}
+              onFocusChange={handleFocusGisEditSessionChange}
+            />
+          </div>
+        ) : null}
+        <GisEditToolbar
+          isEditMode={gisEdit.isEditMode}
+          activeTool={gisEdit.activeTool}
+          isSnapEnabled={gisEdit.isSnapEnabled}
+          canUseTools={gisEdit.canUseTools}
+          canSave={gisEdit.canSave}
+          isSaving={isGisEditSaving}
+          statusMessage={gisEdit.statusMessage}
+          allowedTools={gisEdit.selectedLayer?.allowedTools ?? []}
+          onClose={handleCloseGisEdit}
+          onToggleSnap={gisEdit.toggleSnapEnabled}
+          onSelectTool={handleSelectGisEditTool}
+          onSave={handleSaveGisEdit}
         />
         <Gis
           treeData={treeData}
@@ -1257,8 +7339,11 @@ const Map = () => {
           gisMaps={gisMaps}
           isMiniMap={false}
           searchView={SearchModal}
-          detailView={FeatureClickEventPopup}
+          detailView={GisEditAwareDetailView}
+          canSelectFeature={canSelectFeatureDuringGisEdit}
           onFeatureSelect={onFeatureSelect}
+          onMapBlankClick={handleSinkholeMapBlankClick}
+          sinkholeLegendIconVisible={true}
           featureData={featureData}
           setFeatureData={setFeatureData}
           isOpen={isOpen}
@@ -1272,11 +7357,13 @@ const Map = () => {
               gisMaps={gisMaps}
               facilityTypes={facilityTypes}
               sidoSearchZoom={isAgedPipeChecked ? AGED_PIPE_GUIDE_MIN_ZOOM : undefined}
+              facilityLayerFilter={swagePrcsFcltSearchFilter}
             />
           }
-          waterDepth={showWaterDepth ? WaterDepth : undefined}
-          inlineLayerSettingView={inlineLayerSettingView}
-          layerIconVisible={isAgedPipeLayerNode}
+          waterDepth={undefined}
+          layerSettingView={ActiveLayerSettingView}
+          treeSectionClassName="rounded-sm border border-border bg-background px-1 py-2 text-foreground"
+          detachedTreeToggleButton={true}
           isPlaying={isPlaying}
           setIsPlaying={setIsPlaying as any}
           targetLayerTypes={WATER_DEPTH_LAYER_TYPES as any}
@@ -1285,18 +7372,14 @@ const Map = () => {
           showZoomLevel={true}
           showZoomScaleInfo={true}
           showFloatingSearchButton={false}
-          treeTogglePosition="top"
-          zoomGuide={
-            isAgedPipeChecked
-              ? {
-                  label: "노후관로 기준",
-                  zoom: AGED_PIPE_GUIDE_MIN_ZOOM,
-                }
-              : undefined
+          treeTogglePosition="center"
+          zoomGuide={zoomGuide}
+          layerIconVisible={(node: any) =>
+            isAgedPipeLayerNode(node) || isSinkholeRootNode(node) || isFloodHistoryNode(node)
           }
 
           defaultZoom={7.5}
-          defaultLonLat={[127.75, 36]}
+          defaultLonLat={[129, 36.3]}
           viewExtent={SOUTH_KOREA_VIEW_EXTENT}
         />
         {isAgedPipeListMinimized && (
diff --git a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
index c21dc8ca4..631ba12fb 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
@@ -34,14 +34,14 @@ const BasicTab: React.FC = () => {
   const { basicType, setBasicType } = useSearchModalStore();
 
   return (
-    <div className="relative border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
+    <div className="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="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
+          <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구분</Label>
           <SelectBox
             className="w-[150px] mr-3"
-            selectClass="rounded-lg bg-white"
+            selectClass="rounded-lg bg-field text-foreground"
             label=""
             selectArray={BASIC_TYPES}
             onSelectValue={(value: string | number) =>
@@ -63,4 +63,4 @@ const BasicTab: React.FC = () => {
   );
 };
 
-export default React.memo(BasicTab);
\ No newline at end of file
+export default React.memo(BasicTab);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
index 63c18875d..8ef37730e 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
@@ -37,12 +37,12 @@ const OperationTab: React.FC = () => {
   }));
 
   return (
-    <div className="relative flex flex-col border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
+    <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="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">업무구분</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">업무구분</Label>
         <SelectBox
           className="w-40 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={WORK_TYPES.map((w) => ({
             val: w.val,
@@ -54,7 +54,7 @@ const OperationTab: React.FC = () => {
         />
       </div>
       <div className="flex items-center mb-6">
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업명</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">사업명</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center mr-8"
           placeholder="입력"
@@ -74,10 +74,10 @@ const OperationTab: React.FC = () => {
           startLabel="수행기간"
           endLabel=""
         />
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업 유형</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">사업 유형</Label>
         <SelectBox
           className="w-60 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={[{ val: "0", text: "전체" }, ...BIZ_TY_CD_SELECT_ARRAY]}
           value={var2}
@@ -95,4 +95,4 @@ const OperationTab: React.FC = () => {
   )
 };
 
-export default React.memo(OperationTab);
\ No newline at end of file
+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 f054a9ed1..8ce577d8f 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
@@ -1,18 +1,19 @@
-/**
+/**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창 내 하수도정비기본계획보고서 탭
  * 
  * 📄 Report Tab
  * Next.js App Router (app/) 기반 검색 모달 보고서 탭 컴포넌트
  *
  * - 하수도정비 기본계획 보고서 목록 표시 및 필터링
- * - 시도/시군구/보고서 구분/승인년도 기반 검색 기능
+ * - 시도/시군구/구분/보고서 구분/승인년도 기반 검색 기능
  * - 테이블 데이터 표시 및 페이지네이션 지원
- * - 보고서 클릭 시 파일 목록 모달 열기
+ * - 파일명 클릭 시 대표 파일 바로 다운로드
+ * - 탭 진입 시 기본 조건 자동 조회 지원
  * - Zustand를 통한 모달 상태 및 데이터 관리
  * - 로딩 오버레이 및 선택 초기화 기능
  */
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Label } from '@common/components';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { SelectBox, UiTable } from '@common/business_components/ui';
@@ -22,19 +23,17 @@ import useStore from '@/store/useStore';
 import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
 import useSearchModalStore from '@/store/useSearchModalStore';
 import { useReportTabStore } from '@/store/useReportTabStore';
-import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
-
 
 // 하수도정비 기본계획 보고서
 export const reportTableHeadlist = [
-  { id: "no", title: "NO" },
-  { id: "sido", title: "시도" },
-  { id: "sigungu", title: "시군구" },
-  { id: "approvalYear", title: "승인년도" },
-  { id: "plantZoneGubun", title: "구분" },
-  { id: "reportGubun", title: "보고서구분" },
-  { id: "fileName", title: "파일명" },
-  { id: "regDate", title: "등록일자" },
+  { id: 'no', title: 'NO' },
+  { id: 'sido', title: '시도' },
+  { id: 'sigungu', title: '시군구' },
+  { id: 'approvalYear', title: '승인년도' },
+  { id: 'plantZoneGubun', title: '구분' },
+  { id: 'reportGubun', title: '보고서구분' },
+  { id: 'fileName', title: '파일명' },
+  { id: 'regDate', title: '등록일자' },
 ];
 interface ReportTabProps {
   open?: boolean;
@@ -43,19 +42,26 @@ interface ReportTabProps {
   sggNm?: string;
 }
 
-const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sggNm }) => {
+const normalizeYear = (value: string) => {
+  if (!value || value === '0' || value === '9999') return '';
+  return value;
+};
 
-  // const [isLoading, setIsLoading] = useState(false);
+const getApprovalYearNumber = (value: string | number | undefined) => {
+  const normalized = String(value ?? '').replace('년', '').trim();
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sggNm }) => {
   const [isResetPage, setIsResetPage] = useState<boolean>(false);
   const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
   const [showTable, setShowTable] = useState(false);
-  // const [tableData, setTableData] = useState<any[]>([]);
-  // const [tableCount, setTableCount] = useState(0);
-  // const [curPage, setCurPage] = useState(1);
-  // const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
   const [ctpvCd, setCtpvCd] = useState('0');
   const [sggCd, setSggCd] = useState('0');
-  const [reportGubun, setReportGubun] = useState("0");
+  const [plantZoneGubun, setPlantZoneGubun] = useState('0');
+  const [reportGubun, setReportGubun] = useState('0');
+  const hasAutoFetchedRef = useRef(false);
 
   const {
     tableData,
@@ -73,26 +79,43 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
   const {
     dcTree: reportOriginData,
     fetchDcTree
-  } = useReportTabStore(); // 모달 상태 관리 스토어
-  const { REPORT_TYPES, flattenFolders, addFileName } = useReportTab();
+  } = useReportTabStore();
+  const { REPORT_TYPES, flattenFolders, addFileName, downloadReportFile } = useReportTab();
+
+  const flattenedReportData = useMemo(() => flattenFolders(reportOriginData), [reportOriginData]);
+  const plantZoneOptions = useMemo(() => {
+    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'));
+
+    return [
+      { val: '0', text: '전체' },
+      ...uniqueOptions.map((item) => ({ val: item, text: item })),
+    ];
+  }, [flattenedReportData]);
 
   useEffect(() => {
-    fetchDcTree("기본계획"); // 하수정비기본계획 report 
-  }, []);
+    void fetchDcTree('기본계획');
+  }, [fetchDcTree]);
 
   useEffect(() => {
-    // filterParams 초기화
+    hasAutoFetchedRef.current = false;
     setCtpvCd('0');
     setSggCd('0');
+    setPlantZoneGubun('0');
     setReportGubun('0');
-    setYearFilter({ start: "", end: "" });
+    setYearFilter({ start: '', end: '' });
     setShowTable(false);
     setTableData([]);
     setTableCount(0);
-    setCurPage(1); // 페이지를 1로 초기화
-    setIsResetPage(true); // 페이지를 초기화
-    setIsResetSelection(true); // 선택 초기화
-  }, [open]);
+    setCurPage(1);
+    setIsResetPage(true);
+    setIsResetSelection(true);
+  }, [open, setCurPage, setTableCount, setTableData, setYearFilter]);
 
   useEffect(() => {
     const newCtpvCd = ctpv.find((n) => n.text === ctpvNm)?.val || '0';
@@ -100,174 +123,189 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
 
     setCtpvCd(newCtpvCd);
     setSggCd(newSggCd);
-  }, [ctpvNm, sggNm]);
+  }, [ctpv, ctpvNm, sgg, sggNm]);
 
-  // ctpvCd, sggCd가 업데이트된 후에 fetchFilteredData 실행
   useEffect(() => {
-    if (!isSearch && ctpvCd && sggCd) {
-      fetchFilteredData();
-    }
-  }, [reportOriginData, ctpvCd, sggCd, isSearch]);
+    if (!open || flattenedReportData.length === 0 || hasAutoFetchedRef.current) return;
+
+    hasAutoFetchedRef.current = true;
+    void fetchFilteredData(1);
+  }, [flattenedReportData.length, open]);
 
-  // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
-    // showTable이 true일 때만 fetch (최초 렌더 방지)
     setIsResetPage(false);
 
-    if (showTable) fetchFilteredData();
+    if (showTable) {
+      void fetchFilteredData();
+    }
   }, [curPage]);
 
   const handleCtpvCdChange = (sidoId: string) => {
     setCtpvCd(sidoId);
     setSggCd('0');
-  }
+  };
 
-  // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
   const handleSearch = () => {
-    setCurPage(1); // 페이지를 1로 초기화
-    fetchFilteredData();
-    setIsResetPage(true); // 페이지를 초기화
-    setIsResetSelection(false); // 선택 초기화
+    hasAutoFetchedRef.current = true;
+    setCurPage(1);
+    void fetchFilteredData(1);
+    setIsResetPage(true);
+    setIsResetSelection(false);
     setShowTable(true);
   };
 
-  // 하수도정비기본계획 테이블 cellClick 핸들러
-  const handleReportCellClick = (index: number | undefined) => {
-    if (typeof index === "number" && tableData[index]) {
-      const reportData = tableData[index];
-      if (reportData.fileSn !== "") {
-        const popupWindow = openWindowPopup("reportFiles", {
-          clsfSystmSn: reportData.clsfSystmSn,
-          sourcePath: window.location.pathname,
-        });
+  const handleReportCellClick = (index: number | undefined, headId: string) => {
+    if (headId !== 'fileName') return;
+    if (typeof index !== 'number' || !tableData[index]) return;
 
-        if (!popupWindow) {
-          alert('팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.');
-        }
+    const reportData = tableData[index];
+    if (!reportData.fileSn) return;
+
+    void (async () => {
+      setIsLoading(true);
+      try {
+        await downloadReportFile(reportData);
+      } finally {
+        setIsLoading(false);
       }
-    }
+    })();
   };
 
-  // 검색 API 호출 함수
-  const fetchFilteredData = async () => {
-    setIsLoading(true); // 로딩 시작
-    setIsResetSelection(true); // 선택 초기화
+  const fetchFilteredData = async (page = curPage) => {
+    setIsLoading(true);
+    setIsResetSelection(true);
 
     try {
-      const reportData = flattenFolders(reportOriginData);
-      let filterReportData = reportData;
+      let filterReportData = flattenedReportData;
 
-      if (ctpvCd !== '0') { // 시도검색
-        const sidoOption = ctpv.find((n) => n.val.trim() === ctpvCd.trim());
-        filterReportData = filterReportData.filter(item => item.sido === sidoOption?.text);
+      if (ctpvCd !== '0') {
+        const sidoOption = ctpv.find((n) => String(n.val).trim() === ctpvCd.trim());
+        filterReportData = filterReportData.filter((item) => item.sido === sidoOption?.text);
       }
-      if (sggCd !== '0') { // 시군구검색
+      if (sggCd !== '0') {
         const sigunguOption = sgg.find((n) => String(n.val) === String(sggCd));
-        filterReportData = filterReportData.filter(item => item.sigungu === sigunguOption?.text);
+        filterReportData = filterReportData.filter((item) => item.sigungu === sigunguOption?.text);
       }
-      if (reportGubun !== "0") { // 보고서구분검색
+      if (plantZoneGubun !== '0') {
+        filterReportData = filterReportData.filter((item) => String(item.plantZoneGubun ?? '') === plantZoneGubun);
+      }
+      if (reportGubun !== '0') {
         const reportGubunOption = REPORT_TYPES.find((n) => n.val === reportGubun);
-        filterReportData = filterReportData.filter(item => item.reportGubun === reportGubunOption?.text);
+        filterReportData = filterReportData.filter((item) => item.reportGubun === reportGubunOption?.text);
       }
 
-      const { start, end } = yearFilter;
-      if (start && !end) //승인년도검색
-        filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" : null);
-      else if (!start && end)
-        filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear <= yearFilter.end + "년" : null);
-      else if (start && end) {
-        filterReportData = filterReportData.filter(item => {
-          return (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" && item.approvalYear <= yearFilter.end + "년" : null;
+      const normalizedStartYear = normalizeYear(yearFilter.start);
+      const normalizedEndYear = normalizeYear(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;
+          return true;
         });
       }
-      // if (gubun !== "") { // 구분검색 (추후 사용할 수도 있을 것 같아 남겨둠)
-      //   filterReportData = filterReportData.filter(item => (item.plantZoneGubun) ? String(item.plantZoneGubun).includes(String(gubun)) : null);
-      // }
 
       setTableCount(filterReportData.length || 0);
 
-      filterReportData = filterReportData.slice((curPage - 1) * 10, curPage * 10); // paging
-      filterReportData = filterReportData?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
+      const pagedReportData = filterReportData
+        .slice((page - 1) * 10, page * 10)
+        .map((item, index) => ({ ...item, no: (page - 1) * 10 + index + 1 }));
 
-      addFileName(filterReportData).then(data => {
-        filterReportData = data;
-        setTableData(filterReportData || []);
-        setIsResetSelection(false); // 데이터 설정 후 선택 초기화 해제
-      });
-
-      setTableData(filterReportData || []);
+      const reportRows = await addFileName(pagedReportData);
+      setTableData(reportRows || []);
       setShowTable(true);
+      setIsResetSelection(false);
     } catch (err) {
       console.error('API ERROR:', err);
       setTableData([]);
-      setIsResetSelection(false); // 에러 시에도 선택 초기화 해제
+      setIsResetSelection(false);
     } finally {
-      setIsLoading(false); // 로딩 종료
+      setIsLoading(false);
     }
   };
 
-
   return (
     <>
-      <div className={`relative flex flex-col border rounded-lg pt-5 px-5 w-full ${isSearch ? "min-h-[10vh]" : "min-h-[6vh]"}`}>
-        {isSearch && (
-          <>
-            <div className="flex items-center mb-3">
+      <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) }}
+                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 items-center mb-6">
-          <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">보고서 구분</Label>
-          <SelectBox className="w-44 mr-8"
-            selectClass="rounded-lg bg-white"
-            label=""
-            selectArray={[...REPORT_TYPES]}
-            value={reportGubun} onSelectValue={val => setReportGubun(String(val))}
-            selectContentClass="z-[101]" labelClass='whitespace-nowrap text-xl text-gray-600 pr-2'
-          />
-          {/* 승인년도 필터 */}
-          <YearRangeSelectBox
-            start={yearFilter.start}
-            end={yearFilter.end}
-            onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
-            startLabel="승인년도" endLabel=""
-          />
-          {/* 조회 버튼 */}
-          <div className="flex-1 flex justify-end">
-            <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
           </div>
         </div>
       </div>
 
-      <div className="h-[79vh] w-full overflow-hidden rounded-lg border">
-        {/* 테이블2 영역 (가로/세로 스크롤 가능) */}
-        <div className="flex-1 px-2 pb-2">
-          <LoadingOverlay isLoading={isLoading} />
-          <UiTable
-            headName={(() => {
-              return (<>조회 결과</>);
-            })()
-            }
-            tableData={tableData}
-            headlist={reportTableHeadlist}
-            pageSize={10}
-            total={tableCount}
-            cellClick={handleReportCellClick}
-            onPageChange={setCurPage}
-            resetPageNo={isResetPage}
-            resetSelection={isResetSelection}
-          />
-        </div>
+      <div className="mt-3">
+        <LoadingOverlay isLoading={isLoading} />
+        <UiTable
+          className="!m-0"
+          clickableHeadIds={["fileName"]}
+          headName={<>조회 결과</>}
+          tableData={tableData}
+          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';
+          }}
+          onPageChange={setCurPage}
+          resetPageNo={isResetPage}
+          resetSelection={isResetSelection}
+        />
       </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 809647bf6..2fda54625 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
@@ -1,4 +1,4 @@
-/**
+/**
  * ➡️ 경로 : 하수관망도 메인 페이지 (오른쪽 돋보기 모양 클릭) - 검색 모달 창
  * 
  * 📄 Search Modal
@@ -16,21 +16,23 @@ import LoadingOverlay from '@/components/ui/LoadingBar';
 import { UITab, UiTable } from '@common/business_components/ui';
 import { Button } from '@common/components/ui';
 import React, { useEffect, useMemo, useRef } from 'react';
-import { Toaster } from "react-hot-toast";
+import { Toaster } from 'react-hot-toast';
 import useSearchModalStore from '@/store/useSearchModalStore';
 import { ExclnSewagePumpCol2, MsSwageMhlCol2, MsSwagePplCol2, stofcbrCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2 } from '../components/common/table';
 import BasicTab, { BASIC_TYPES } from './basicTab';
 import OperationTab from './operationTab';
+import ReportTab from './reportTab';
 import useSearchModal from './useSearchModal';
 import useBasicTab from './useBasicTab';
 import useOperationTab from './useOperationTab';
 import { openWindowPopup } from '@/features/windowPopup/lib/openWindowPopup';
 
 type SearchModalProps = {
-  renderMode?: "launcher" | "popup";
+  renderMode?: 'launcher' | 'popup';
+  autoSearchReady?: boolean;
 };
 
-const SearchModal: React.FC<SearchModalProps> = ({ renderMode = "launcher" }) => {
+const SearchModal: React.FC<SearchModalProps> = ({ renderMode = 'launcher', autoSearchReady = false }) => {
   const {
     showTable,
     isSearchModalOpen, setIsSearchModalOpen,
@@ -64,39 +66,38 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = "launcher" }) =>
     operationResultExcelDownload,
     handleOperationPageNation
   } = useOperationTab();
-  const hasAutoOpenedReportRef = useRef(false);
-
+  const hasAutoSearchedRef = useRef(false);
+  const hasInitializedTabAutoSearchRef = useRef(false);
 
   const dynamicHeadlist: { id: string, title: string }[] = useMemo(() => {
-    if (activeTab === 'basic') {  // 기본정보
-      if (basicType === 'tb_ms_swage_ppl') return MsSwagePplCol2;// 하수관로
-      if (basicType === 'tb_il_swage_prcs_fclt') return SwtrmtFcltCol2;// 하수처리시설
-      if (basicType === 'tb_ms_swage_prcs_zone') return SwtrmtPrcsZoneCol2; // 하수처리구역
-      if (basicType === 'tb_ms_swage_mhl') return MsSwageMhlCol2; // 하수맨홀
-      if (basicType === 'tb_ms_swage_pmstn') return ExclnSewagePumpCol2;  // 하수펌프장
-      if (basicType === 'tb_ms_stofcbr') return stofcbrCol2;  // 우수토실
-
+    if (activeTab === 'basic') {
+      if (basicType === 'tb_ms_swage_ppl') return MsSwagePplCol2;
+      if (basicType === 'tb_il_swage_prcs_fclt') return SwtrmtFcltCol2;
+      if (basicType === 'tb_ms_swage_prcs_zone') return SwtrmtPrcsZoneCol2;
+      if (basicType === 'tb_ms_swage_mhl') return MsSwageMhlCol2;
+      if (basicType === 'tb_ms_swage_pmstn') return ExclnSewagePumpCol2;
+      if (basicType === 'tb_ms_stofcbr') return stofcbrCol2;
       return [];
     }
-    if (activeTab === 'operation') return OPERATION_TABLE_HEADLIST; // 유지관리 정보
+    if (activeTab === 'operation') return OPERATION_TABLE_HEADLIST;
 
     return [];
-  }, [activeTab, basicType, workType]);
+  }, [activeTab, basicType, workType, OPERATION_TABLE_HEADLIST]);
 
   const dynamicHeadlist2: { id: string, title: string }[] = useMemo(() => {
     if (activeTab === 'operation') {
-      if (workType === WORK_TYPES[0]?.val) return MAINTENANACE_TABLE_HEADLIST;  // 보수 및 갱신
-      if (workType === WORK_TYPES[1]?.val) return CLEANING_TABLE_HEADLIST; // 점검 및 진단
-      if (workType === WORK_TYPES[2]?.val) return INSPECTION_TABLE_HEADLIST; // 청소 및 준설
+      if (workType === WORK_TYPES[0]?.val) return MAINTENANACE_TABLE_HEADLIST;
+      if (workType === WORK_TYPES[1]?.val) return CLEANING_TABLE_HEADLIST;
+      if (workType === WORK_TYPES[2]?.val) return INSPECTION_TABLE_HEADLIST;
     }
 
     return [];
-  }, [activeTab, workType]);
+  }, [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,
     });
 
@@ -105,52 +106,49 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = "launcher" }) =>
     }
 
     setIsSearchModalOpen(false);
-  }, [renderMode, isSearchModalOpen]);
-
-  const openReportTabPopup = () => {
-    const popupWindow = openWindowPopup("reportTab", {
-      sourcePath: window.location.pathname,
-    });
-
-    if (!popupWindow) {
-      alert('?앹뾽??李⑤떒?섏뿀?듬땲?? 釉뚮씪?곗? ?앹뾽 ?덉슜 ?ㅼ젙???뺤씤?댁＜?몄슂.');
-    }
-  };
-
-  useEffect(() => {
-    if (activeTab !== 'report') {
-      hasAutoOpenedReportRef.current = false;
-      return;
-    }
-
-    if (hasAutoOpenedReportRef.current) return;
-
-    openReportTabPopup();
-    hasAutoOpenedReportRef.current = true;
-  }, [activeTab]);
+  }, [isSearchModalOpen, renderMode, setIsSearchModalOpen]);
 
   useEffect(() => {
     resetFilters();
+  }, [activeTab, basicType, workType, resetFilters]);
+
+  useEffect(() => {
+    if (renderMode !== 'popup' || !autoSearchReady || hasAutoSearchedRef.current) return;
+
+    hasAutoSearchedRef.current = true;
+    hasInitializedTabAutoSearchRef.current = true;
+    void fetchFilteredData();
+  }, [autoSearchReady, fetchFilteredData, renderMode]);
+
+  useEffect(() => {
+    if (renderMode !== 'popup' || !autoSearchReady) return;
+    if (!hasInitializedTabAutoSearchRef.current) return;
+    if (activeTab === 'report') return;
+
+    setCurPage(1);
+    setIsResetPage(true);
+    setIsResetDetailPage(true);
+    void fetchFilteredData();
   }, [activeTab, basicType, workType]);
 
-  // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
     setIsResetPage(false);
     setIsResetDetailPage(true);
     setDetailBizId(0);
-    if (showTable) fetchFilteredData();
+    if (showTable) {
+      void fetchFilteredData();
+    }
   }, [curPage]);
 
-  // 페이지 변경 시마다 데이터 fetch
   useEffect(() => {
     setIsResetDetailSelection(false);
-    if (showTable) handleOperationPageNation(Number(detailBizId));
+    if (showTable) {
+      void handleOperationPageNation(Number(detailBizId));
+    }
   }, [detailCurPage]);
 
-
   const renderBody = () => (
     <>
-      {/* 탭 영역 */}
       <UITab
         defaultValue={activeTab}
         tabList={TABS.map((tab: any) => ({
@@ -159,69 +157,47 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = "launcher" }) =>
         }))}
         onValueChange={(value: string) => setActiveTab(value)}
       />
-      {activeTab === 'basic' && (<BasicTab />)} {/* 기본정보 탭 */}
-      {activeTab === 'operation' && (<OperationTab />)} {/* 유지관리 정보 탭 */}
-      {activeTab === 'report' && (
-        <div className="mt-4 flex h-[79dvh] w-full items-center justify-center rounded-lg border bg-white p-6">
-          <div className="flex max-w-[520px] flex-col items-center text-center">
-            <h2 className="mb-3 text-2xl font-semibold text-gray-900">
-              하수도정비 기본계획보고서
-            </h2>
-            <p className="mb-5 text-lg leading-8 text-gray-600">
-              보고서 상세는 모달 내부 탭 대신
-              <br />
-              전용 윈도우 팝업으로 열리도록 전환되었습니다.
-            </p>
-            <Button className="px-6 py-2 text-white" onClick={openReportTabPopup}>
-              전용 팝업 열기
-            </Button>
-          </div>
-        </div>
-      )}  {/* 하수도정비기본계획보고서 탭 */}
+      {activeTab === 'basic' && (<BasicTab />)}
+      {activeTab === 'operation' && (<OperationTab />)}
+      {activeTab === 'report' && (<ReportTab open={activeTab === 'report'} />)}
 
-
-      {/* 📋 결과 리스트 */}
-      {/* 기본정보 탭 */}
       {activeTab === 'basic' && (
-        <div className="h-[79dvh] w-full rounded-lg border mt-4 overflow-x-scroll">
+        <div className="mt-4 h-[79dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border">
           <LoadingOverlay isLoading={isLoading} />
-            <UiTable className='w-[120%]'
-              headName={(() => {
-                const label = BASIC_TYPES.find((type) => type.val === basicType)?.text
-                return (<>{label} 조회 결과</>);
-              })()
-              }
-              tableData={tableData}
-              headlist={dynamicHeadlist}
-              pageSize={10}
-              total={tableCount}
-              cellClick={handleBasicCellClick}
-              onPageChange={setCurPage}
-              resetPageNo={isResetPage}
-              resetSelection={isResetSelection}
-              curPage={curPage}
-              headButton={
-                <div className='flex'>
-                  <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium primary" size="sm" onClick={viewMultipleFeature}>지도에서 보기</Button>
-                  <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={basicExcelDownload}>파일 다운로드</Button>
-                </div>
-              }
-            />
+          <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} 조회 결과</>);
+            })()}
+            tableData={tableData}
+            headlist={dynamicHeadlist}
+            pageSize={10}
+            total={tableCount}
+            cellClick={handleBasicCellClick}
+            onPageChange={setCurPage}
+            resetPageNo={isResetPage}
+            resetSelection={isResetSelection}
+            curPage={curPage}
+            headButton={
+              <div className='flex'>
+                <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium primary" size="sm" onClick={viewMultipleFeature}>지도에서 보기</Button>
+                <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={basicExcelDownload}>파일 다운로드</Button>
+              </div>
+            }
+          />
         </div>
       )}
-      {/* 유지관리 정보 탭 */}
+
       {activeTab === 'operation' && (
         <>
-          <div className="h-[39dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border mt-4">
-            {/* <div className="flex-1 px-2 pb-2"> */}
+          <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} 사업 현황</>);
-                })()
-              }
+              headName={(() => {
+                const label = WORK_TYPES.find((type) => type.val === workType)?.text;
+                return (<>{label} 사업 현황</>);
+              })()}
               tableData={tableData}
               headlist={dynamicHeadlist}
               pageSize={OPERATION_TABLE_SIZE}
@@ -235,20 +211,15 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = "launcher" }) =>
                 <Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-sm font-medium green" size="sm" onClick={operationExcelDownload}>파일 다운로드</Button>
               }
             />
-            {/* </div> */}
           </div>
 
           <div className="h-[39dvh] w-full overflow-x-hidden overflow-y-auto rounded-lg border">
-            {/* 테이블2 영역 */}
-            {/* <div className="flex-1 px-2 pb-2"> */}
             <LoadingOverlay isLoading={isDetailLoading} />
             <UiTable
-              headName={
-                (() => {
-                  const label = WORK_TYPES.find((type) => type.val === workType)?.text
-                  return (<>{label} 결과표</>);
-                })()
-              }
+              headName={(() => {
+                const label = WORK_TYPES.find((type) => type.val === workType)?.text;
+                return (<>{label} 결과표</>);
+              })()}
               tableData={detailTableData}
               headlist={dynamicHeadlist2}
               pageSize={OPERATION_TABLE_SIZE}
@@ -265,26 +236,26 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = "launcher" }) =>
                 </div>
               }
             />
-            {/* </div> */}
           </div>
         </>
       )}
     </>
   );
 
-  if (renderMode === "launcher") {
+  if (renderMode === 'launcher') {
     return null;
   }
 
   return (
-    <div className='h-dvh overflow-x-auto overflow-y-hidden bg-white p-4'>
-      <h1 className="mb-3 text-2xl font-semibold text-gray-900">관망도 검색</h1>
-      <div className="h-[calc(100dvh-5.6rem)] w-full overflow-y-hidden rounded-lg border bg-white p-4">
+    <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"></Toaster>
+      <Toaster position="top-center" />
     </div>
   );
 };
 
 export default React.memo(SearchModal);
+
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
index aade9662a..c176dda2a 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
@@ -97,10 +97,10 @@ const SwageMhl: React.FC = () => {
           endLabel=""
         />
         {/* 용도 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">용도</Label>
         <SelectBox
           className="w-48 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_MHL_USE_CODES]}
           value={var1}
@@ -110,7 +110,7 @@ const SwageMhl: React.FC = () => {
           selectContentClass="z-[101]"
         />
         {/* 하수맨홀 구경 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구경(mm)</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구경(mm)</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -153,4 +153,4 @@ const SwageMhl: React.FC = () => {
   );
 };
 
-export default React.memo(SwageMhl);
\ No newline at end of file
+export default React.memo(SwageMhl);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
index 9378c779b..4615a7c60 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
@@ -102,10 +102,10 @@ const SwagePpl: React.FC = () => {
           endLabel=""
         />
         {/* 용도 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">용도</Label>
         <SelectBox
           className="w-32 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_PPL_USE_CODES]}
           value={var1}
@@ -128,7 +128,7 @@ const SwagePpl: React.FC = () => {
           selectContentClass="z-[101]"
         /> */}
         {/* 관경 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">관경(mm)</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">관경(mm)</Label>
         <Input
           className="w-[60px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -206,4 +206,4 @@ const SwagePpl: React.FC = () => {
   );
 };
 
-export default React.memo(SwagePpl);
\ No newline at end of file
+export default React.memo(SwagePpl);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts b/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts
index 8ffe06de8..4a2bd5a5b 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts
@@ -1,4 +1,4 @@
-/**
+/**
  * 📄 useReportTab Hook
  * 검색 모달 보고서 탭 훅
  *
@@ -40,6 +40,15 @@ export type ReportDataFile = {
   filePath: string;
 }
 
+const getStringValue = (value: string | number | undefined) => String(value ?? '');
+
+const buildDisplayFileName = (files: ReportDataFile[]) => {
+  if (files.length === 0) return '-';
+  if (files.length === 1) return files[0]?.fileTitle ?? '-';
+
+  return `${files[0]?.fileTitle ?? '대표 파일'} 외 ${files.length - 1}건`;
+};
+
 export default function useReportTab() {
   const REPORT_TYPES = [
     { val: '0', text: '전체' },
@@ -59,11 +68,11 @@ export default function useReportTab() {
    */
   const flattenFolders = (data: Folder[]): FlattenedFolder[] => {
     const result: FlattenedFolder[] = [];
-    const exceptNodeNm = ["부분", "통합", "전체"];
-    const addNodeNm = ["보고서", "요약보고서", "부록", "기타"]; // level5
+    const exceptNodeNm = ['부분', '통합', '전체'];
+    const addNodeNm = ['보고서', '요약보고서', '부록', '기타']; // level5
     const columnNms: { [key: number]: string } = {
-      0: "root", 1: "sido", 2: "sigungu", 3: "approvalYear"
-      , 4: "plantZoneGubun", 5: "reportGubun", 7: "fileName", 8: "regDate"
+      0: 'root', 1: 'sido', 2: 'sigungu', 3: 'approvalYear',
+      4: 'plantZoneGubun', 5: 'reportGubun', 7: 'fileName', 8: 'regDate'
     };
 
     const traverse = (
@@ -92,28 +101,26 @@ export default function useReportTab() {
         newPath.clsfSystmSn = node.clsfSystmSn; // 파일 조회를 위한 고유번호
         result.push(newPath);
       } else {
-        if (level === 4) {
-          if (exceptNodeNm.includes(node.clsfSystmNm)) {
-            level--; // 제외할 노드 이름인 경우, 현재의 레벨에 하위값이 써지도록 함.
-          }
+        if (level === 4 && exceptNodeNm.includes(node.clsfSystmNm)) {
+          level--; // 제외할 노드 이름인 경우, 현재의 레벨에 하위값이 써지도록 함.
         }
         node.children.forEach((child) => {
           traverse(child, newPath, level + 1);
         });
       }
-    }
+    };
 
-    if (data && data.length > 0 && data[0]?.clsfSystmNm == "기본계획") { // data가 비어있지 않고 children이 있는 경우에만 처리
+    if (data && data.length > 0 && data[0]?.clsfSystmNm == '기본계획') {
       data.forEach((root) => traverse(root, {}, 0));
     } else {
       data.forEach((root) => traverse(root, {}, 1));
     }
     return result;
-  }
+  };
 
   const getDcFiles = async (clsfSystmSn: string): Promise<ReportDataFile[]> => {
     if (!clsfSystmSn) {
-      console.error("clsfSystmSn is required to get files.");
+      console.error('clsfSystmSn is required to get files.');
       return [];
     }
     const queryString = 'clsfSystmSn=' + clsfSystmSn;
@@ -126,29 +133,54 @@ export default function useReportTab() {
     const fileReportData = await Promise.all(
       data.map(async (item) => {
         const fileArr: ReportDataFile[] = await getDcFiles(String(item.clsfSystmSn));
-        let result: FlattenedFolder;
-        if (fileArr.length > 0) {
-          const f = fileArr[0];
-          const fCount = fileArr.length;
-          result = { ...item, fileName: f?.fileTitle + " 외 " + fCount + "건", regDate: f?.regDt, fileSn: f?.fileSn, filePath: f?.filePath };
-        } else {
-          result = { ...item, fileName: "", regDate: "", fileSn: "", filePath: "" };
+        if (fileArr.length === 0) {
+          return {
+            ...item,
+            fileName: '-',
+            regDate: '',
+            fileSn: '',
+            filePath: '',
+            fileCount: 0,
+            downloadFileTitle: '',
+          };
         }
-        return result;
+
+        const primaryFile = fileArr[0];
+        return {
+          ...item,
+          fileName: buildDisplayFileName(fileArr),
+          regDate: primaryFile?.regDt ?? '',
+          fileSn: primaryFile?.fileSn ?? '',
+          filePath: primaryFile?.filePath ?? '',
+          fileCount: fileArr.length,
+          downloadFileTitle: primaryFile?.fileTitle ?? '',
+        };
       })
     );
     return fileReportData;
   };
 
   const getDcFileDownload = async (fileSn: string, fileName: string, filePath: string) => {
-    if (filePath === "") {
+    if (filePath === '') {
       alert(`filePath 정보가 없으므로 다운로드가 불가합니다.\nfilesn: ${fileSn}`);
       return;
     }
     const queryString = 'filePath=' + encodeURIComponent(filePath);
-    const responseBlob = await getDcData(`/api/v1/fileDownload${queryString ? `?${queryString}` : ''}`, "blob");
+    const responseBlob = await getDcData(`/api/v1/fileDownload${queryString ? `?${queryString}` : ''}`, 'blob');
     fileDownload(responseBlob, fileName);
-  }
+  };
+
+  const downloadReportFile = async (item: FlattenedFolder) => {
+    const fileSn = getStringValue(item.fileSn);
+    const filePath = getStringValue(item.filePath);
+    const downloadFileTitle = getStringValue(item.downloadFileTitle || item.fileName);
+
+    if (!fileSn || !filePath || !downloadFileTitle || downloadFileTitle === '-') {
+      return;
+    }
+
+    await getDcFileDownload(fileSn, downloadFileTitle, filePath);
+  };
 
   // 파일 목록 조회
   const getFiles = async () => {
@@ -159,7 +191,7 @@ export default function useReportTab() {
       data = data?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
       setFiles(data);
     } catch (error) {
-      console.error("파일 목록 조회 에러:", error);
+      console.error('파일 목록 조회 에러:', error);
     } finally {
       setIsLoading(false); // 로딩 종료
     }
@@ -167,10 +199,10 @@ export default function useReportTab() {
 
   // cellClick 핸들러
   const handleCellClick = (index: number | undefined) => {
-    if (typeof index === "number" && files[index]) {
+    if (typeof index === 'number' && files[index]) {
       const fileName = files[index].fileTitle;
       const filePath = files[index].filePath;
-      if (files[index].fileSn !== "") {
+      if (files[index].fileSn !== '') {
         getDcFileDownload(files[index].fileSn, fileName, filePath);
       }
     }
@@ -182,7 +214,8 @@ export default function useReportTab() {
     addFileName,
     getDcFiles,
     getDcFileDownload,
+    downloadReportFile,
     getFiles,
     handleCellClick
   };
-} 
+}
diff --git a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
index 585885521..578c3ac2a 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
+++ b/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts
@@ -1,4 +1,4 @@
-/**
+/**
  * 📄 useSearchModal Hook
  * 검색 모달 훅
  *
@@ -12,10 +12,10 @@
  * 🔗 사용 API
  * - 유지관리 정보 목록 조회: GET /api/v1/bizInfo (sewerage-service)
  */
-import { getData } from "@/components/lib/api";
+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 GisApp from '@common/business_components/ui/map/lib/gis.core';
 import useSearchModalStore from '../../../store/useSearchModalStore';
 import useBasicTab from './useBasicTab';
 import useOperationTab from './useOperationTab';
@@ -23,61 +23,78 @@ import { postPopupMessageAndClose } from '@/features/windowPopup/lib/popupMessag
 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 {
-    activeTab, workType,
-    tableData, detailTableData,
-    curPage,
-    var1, var2,
-    yearFilter,
-    todayYear, todayMonth, todayDate,
+    activeTab,
+    tableData,
+    detailTableData,
     setIsSearchModalOpen,
     setShowTable,
-    setTableData, setDetailTableData,
-    setTableCount, setDetailTableCount,
+    setTableData,
     setCurPage,
     setIsLoading,
-    setIsResetPage, setIsResetDetailPage,
-    setIsResetSelection, setIsResetDetailSelection,
-    getDateString
+    setIsResetPage,
+    setIsResetDetailPage,
+    setIsResetSelection,
+    setIsResetDetailSelection,
+    getDateString,
   } = useSearchModalStore();
   const { fetchBasicFilteredData } = useBasicTab();
   const { OPERATION_TABLE_SIZE } = useOperationTab();
   const { BIZ_TY_CD } = useStore();
 
   const TABS = [
-    { val: "basic", text: "기본 정보" },
-    { val: "operation", text: "유지관리 정보" },
-    { val: "report", text: "하수도 정비 기본계획 보고서" },
+    { val: 'basic', text: '기본 정보' },
+    { val: 'operation', text: '유지관리 정보' },
+    { val: 'report', text: '하수도 정비 기본계획 보고서' },
   ];
 
   // 검색 API 호출 함수
   const fetchFilteredData = async () => {
-    setIsLoading(true); // 로딩 시작
-    setIsResetSelection(true); // 선택 초기화
-    setIsResetDetailSelection(true); // 선택 초기화
+    const {
+      activeTab: currentTab,
+      curPage,
+      var1,
+      var2,
+      yearFilter,
+      workType,
+      todayYear,
+      todayMonth,
+      todayDate,
+      setTableData,
+      setDetailTableData,
+      setTableCount,
+      setDetailTableCount,
+      setShowTable,
+      setIsLoading,
+      setIsResetSelection,
+      setIsResetDetailSelection,
+    } = useSearchModalStore.getState();
+
+    setIsLoading(true);
+    setIsResetSelection(true);
+    setIsResetDetailSelection(true);
 
     try {
-      if (activeTab === 'basic') {
-        fetchBasicFilteredData();
-
-      } else if (activeTab === 'operation') {
-        const RequestDTO: Record<string, string> = {
+      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 (var1) requestDto.bizInfoNm = var1;
+        if (var2 !== '0' && var2) requestDto.bizTypeCd = var2;
+
         const startDate = getDateString(
           yearFilter.start,
           '',
           '',
-          "19000101",
+          '19000101',
         );
         const endDate = getDateString(
           yearFilter.end,
@@ -85,22 +102,19 @@ export default function useSearchModal() {
           '',
           `${todayYear}${todayMonth}${todayDate}`,
         );
-        RequestDTO.fromflfmtEndYmd = startDate;
-        RequestDTO.toflfmtEndYmd = endDate;
-
-        // JSON.parse 사용으로 문자열 -> 배열 변환
-        RequestDTO.workTypes = JSON.parse(workType.replace(/'/g, '"'));
-
-        const params = new URLSearchParams(RequestDTO).toString();
+        requestDto.fromflfmtEndYmd = startDate;
+        requestDto.toflfmtEndYmd = endDate;
+        requestDto.workTypes = JSON.parse(workType.replace(/'/g, '"'));
 
+        const params = new URLSearchParams(requestDto).toString();
         const res = await getData(`v1/bizInfo?${params}`);
 
         const mappedContent = (res.content || []).map((item: any, index: number) => {
           const formattedItem = formatDisplayData(item);
-          const matched = BIZ_TY_CD.find(code => code.lwpoCd === item.bizTypeCd);
+          const matched = BIZ_TY_CD.find((code) => code.lwpoCd === item.bizTypeCd);
           return {
             ...formattedItem,
-            rowNumber: (curPage - 1) * OPERATION_TABLE_SIZE + index + 1, // 1부터 시작하는 일련번호 추가
+            rowNumber: (curPage - 1) * OPERATION_TABLE_SIZE + index + 1,
             bizTypeCd: matched ? matched.lwpoCdNm : item.bizTypeCd,
           };
         });
@@ -118,20 +132,19 @@ export default function useSearchModal() {
       setTableData([]);
       setIsResetSelection(false);
     } finally {
-      setIsLoading(false); // 로딩 종료
+      setIsLoading(false);
       setIsResetSelection(false);
-      // setIsResetDetailSelection(false);
     }
   };
 
   // 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
   const handleSearch = () => {
-    setCurPage(1); // 페이지를 1로 초기화
-    fetchFilteredData();
-    setIsResetPage(true); // 페이지를 초기화
-    setIsResetDetailPage(true); // 디테일 페이지를 초기화
-    setIsResetSelection(false); // 선택 초기화
-    setIsResetDetailSelection(false); // 선택 초기화
+    setCurPage(1);
+    void fetchFilteredData();
+    setIsResetPage(true);
+    setIsResetDetailPage(true);
+    setIsResetSelection(false);
+    setIsResetDetailSelection(false);
     setShowTable(true);
   };
 
@@ -186,7 +199,7 @@ export default function useSearchModal() {
         setIsSearchModalOpen(false);
       }
     }
-  }
+  };
 
   return { TABS, getDateString, handleSearch, 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 4ea769ff7..8b03a82e8 100644
--- a/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
+++ b/apps/sn/app/(map-layout)/map/waterDepth/waterDepth.tsx
@@ -20,12 +20,109 @@ export const WATER_DEPTH_LAYER_TYPES: string[] = [
   'tb_ms_sbmrg_dngr_map'  // 침수위험지도
 ];
 
+export type WaterDepthLegendItem = {
+  key: string;
+  label: string;
+  color: string;
+  borderColor: string;
+  sortSeq: number;
+};
+
+const getLayerTypeName = (layerInfo: any) =>
+  String(layerInfo?.lyrTyNm ?? layerInfo?.lyrTypeNm ?? layerInfo?.lyr_type_nm ?? "").trim();
+
+const getFiniteSortOrder = (value: unknown) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : Number.MAX_SAFE_INTEGER;
+};
+
+const getLegendNumericOrder = (label: string) => {
+  const normalized = String(label).trim();
+  const rangeMatch = normalized.match(/^(\d+(?:\.\d+)?)~(\d+(?:\.\d+)?)m/);
+  if (rangeMatch) {
+    return {
+      start: Number(rangeMatch[1]),
+      end: Number(rangeMatch[2]),
+      priority: 0,
+    };
+  }
+
+  const overMatch = normalized.match(/^(\d+(?:\.\d+)?)m\s*이상/);
+  if (overMatch) {
+    const value = Number(overMatch[1]);
+    return {
+      start: value,
+      end: value,
+      priority: 1,
+    };
+  }
+
+  return {
+    start: Number.MAX_SAFE_INTEGER,
+    end: Number.MAX_SAFE_INTEGER,
+    priority: 2,
+  };
+};
+
+const getLegendColor = (layerInfo: any) =>
+  String(layerInfo?.polgnColor ?? layerInfo?.spacColor ?? layerInfo?.lnColor ?? layerInfo?.lineColor ?? "").trim();
+
+const getLegendBorderColor = (layerInfo: any) =>
+  String(layerInfo?.lnColor ?? layerInfo?.lineColor ?? layerInfo?.polgnColor ?? layerInfo?.spacColor ?? "").trim();
+
+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 [];
+
+  const items = new Map<string, WaterDepthLegendItem>();
+
+  checkedNodesData.forEach((node) => {
+    const layerInfo = node?.data ?? {};
+    const layerTypeName = getLayerTypeName(layerInfo);
+    if (!WATER_DEPTH_LAYER_TYPES.includes(layerTypeName)) return;
+    if (!hasLegendStyle(layerInfo)) return;
+
+    const itemKey = String(node?.text ?? layerInfo?.lyrNm ?? "").trim();
+    const itemColor = getLegendColor(layerInfo);
+    const itemBorderColor = getLegendBorderColor(layerInfo);
+
+    if (!itemKey || !itemColor) return;
+    if (!items.has(itemKey)) {
+      items.set(itemKey, {
+        key: itemKey,
+        label: normalizeLegendLabel(itemKey),
+        color: itemColor,
+        borderColor: itemBorderColor || itemColor,
+        sortSeq: getFiniteSortOrder(layerInfo?.sortSeq),
+      });
+    }
+  });
+
+  return Array.from(items.values()).sort((left, right) => {
+    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.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");
+  });
+};
+
 interface WaterDepthProps {
   onClose?: () => void;
   isPlaying: boolean;
   setIsPlaying: (isPlaying: boolean) => void;
   totalSteps?: number;
   currentStep?: number;
+  legendItems?: WaterDepthLegendItem[];
 }
 
 export function WaterDepth({
@@ -34,6 +131,7 @@ export function WaterDepth({
   setIsPlaying,
   totalSteps = 0,
   currentStep = 0,
+  legendItems = [],
 }: WaterDepthProps) {
 
   useEffect(() => {
@@ -70,13 +168,16 @@ export function WaterDepth({
           </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="bg-blue-900 text-white text-2xl text-center py-1 mb-2 rounded w-full">침수심 범례</div>
           <div className="space-y-1 w-full">
-            <LegendItem color="rgb(255, 255, 127)" label="0.0~0.5m 미만" /> {/* 코드: N330 */}
-            <LegendItem color="rgb(191, 255, 0)" label="0.5~1.0m 미만" /> {/* 코드: N331 */}
-            <LegendItem color="rgb(0, 255, 255)" label="1.0~2.0m 미만" /> {/* 코드: N332 */}
-            <LegendItem color="rgb(191, 127, 255)" label="2.0~5.0m 미만" /> {/* 코드: N333 */}
-            <LegendItem color="rgb(255, 0, 127)" label="5.0m 이상" /> {/* 코드: N334 */}
+            {legendItems.map((item) => (
+              <LegendItem
+                key={item.key}
+                color={item.color}
+                borderColor={item.borderColor}
+                label={item.label}
+              />
+            ))}
           </div>
           <div className="border-t-2 border-blue-900 mt-1 mx-auto w-full" />
         </div>
@@ -85,14 +186,14 @@ export function WaterDepth({
   );
 }
 
-function LegendItem({ color, label }: { color: string; label: string }) {
+function LegendItem({ color, borderColor, label }: { color: string; borderColor: string; label: string }) {
   return (
     <div className="flex items-center gap-2 w-full">
       <span
         className="inline-block w-16 h-6"
-        style={{ backgroundColor: color, border: "1px solid #ccc" }}
+        style={{ backgroundColor: color, border: `1px solid ${borderColor}` }}
       />
       <span className="text-xl text-gray-900 font-bold">{label}</span>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/sn/app/(map-layout)/map2/page.tsx b/apps/sn/app/(map-layout)/map2/page.tsx
new file mode 100644
index 000000000..972464ec9
--- /dev/null
+++ b/apps/sn/app/(map-layout)/map2/page.tsx
@@ -0,0 +1 @@
+export { default } from "../map/page";
diff --git a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx
index 43648114c..702c5beb2 100644
--- a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx
@@ -49,8 +49,10 @@ type BaseLayout = {
   onSubmitEvent: Function
   graphBtn?: boolean
   analysisBtn?: string
+  resultViewBtn?: string
   firstDivBtn?: boolean
   selectBox?: SelectBox
+  selectionComponent?: ReactNode
   showDatePicker?: boolean;
   ctpvCd: string;
   sggCd: string;
@@ -66,10 +68,12 @@ type BaseLayout = {
   setSggCd: (sgg: string) => void;
   setSggName?: (sggName: string) => void;
   setSwtrmtFcltNm?: (swtrmtFcltNm: string) => void;
+  defaultSwtrmtFcltNm?: string;
   setIsLoading?: (isLoading: boolean) => void;
   onExcelDownload?: () => void;
   onDeleteFile?: () => void;
   onAnalysis?: () => void;
+  onResultView?: () => void;
   selectedRowData?: any;
   isIr?: boolean;
   isRdii?: boolean;
@@ -82,7 +86,9 @@ const BaseLayout = ({
   onSubmitEvent,
   graphBtn = false,
   analysisBtn,
+  resultViewBtn,
   selectBox,
+  selectionComponent,
   showDatePicker = false,
   ctpvCd,
   sggCd,
@@ -98,10 +104,12 @@ const BaseLayout = ({
   setSggCd,
   setSggName,
   setSwtrmtFcltNm,
+  defaultSwtrmtFcltNm,
   setIsLoading,
   onExcelDownload,
   onDeleteFile,
   onAnalysis,
+  onResultView,
   isIr = false,
   isRdii = false,
 }: BaseLayout) => {
@@ -191,21 +199,25 @@ const BaseLayout = ({
                 />
               </>
             )}
-            <CtpvSggPrcsFcltSelectBox
-              sido={ctpvCd}
-              sigungu={sggCd}
-              sggName={sggName}
-              onSidoChange={(sidoId: string) => {
-                setCtpvCd(sidoId);
-                setSggCd('0');
-              }}
-              onSigunguChange={setSggCd}
-              setSggName={setSggName}
-              selectedSwagePrcsFclt={selectedSwagePrcsFclt}
-              onSwagePrcsFcltChange={onSwagePrcsFcltChange}
-              setSwtrmtFcltNm={setSwtrmtFcltNm}
-              setIsLoading={setIsLoading}
-            />
+            {/* 침입수 분석 실행처럼 선택 구조가 다른 화면은 커스텀 selector를 주입하고, 나머지는 기존 시설 selector를 유지한다. */}
+            {selectionComponent ?? (
+              <CtpvSggPrcsFcltSelectBox
+                sido={ctpvCd}
+                sigungu={sggCd}
+                sggName={sggName}
+                onSidoChange={(sidoId: string) => {
+                  setCtpvCd(sidoId);
+                  setSggCd('0');
+                }}
+                onSigunguChange={setSggCd}
+                setSggName={setSggName}
+                selectedSwagePrcsFclt={selectedSwagePrcsFclt}
+                onSwagePrcsFcltChange={onSwagePrcsFcltChange}
+                setSwtrmtFcltNm={setSwtrmtFcltNm}
+                defaultSwtrmtFcltNm={defaultSwtrmtFcltNm}
+                setIsLoading={setIsLoading}
+              />
+            )}
             {selectBox?.searchChk && (
               <div className='flex flex-1 justify-end mr-6'>
                 <Button size="sm" onClick={() => selectBox.onSearchClick?.()}>조회</Button>
@@ -246,6 +258,15 @@ const BaseLayout = ({
               {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>
               )}
+              {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"
+                  onClick={onResultView}
+                >
+                  {resultViewBtn}
+                </Button>
+              )}
             </div>
           </div>
           <Form {...form}>
diff --git a/apps/sn/app/(with-base-layout)/ii/analysisResultView.ts b/apps/sn/app/(with-base-layout)/ii/analysisResultView.ts
new file mode 100644
index 000000000..35c2bec26
--- /dev/null
+++ b/apps/sn/app/(with-base-layout)/ii/analysisResultView.ts
@@ -0,0 +1,31 @@
+"use client";
+
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
+
+type AnalysisResultPopupKey = "inftwtResultPopup" | "rdiiResultPopup";
+
+const ANALYSIS_RESULT_MAP_WINDOW_NAME = "sn-analysis-result-map";
+
+export const openAnalysisResultMapView = (popupKey: AnalysisResultPopupKey) => {
+  if (typeof window === "undefined") return;
+
+  const mapUrl = `/map?analysisPopupKey=${encodeURIComponent(popupKey)}`;
+  const mapWindow = window.open(mapUrl, ANALYSIS_RESULT_MAP_WINDOW_NAME);
+
+  if (!mapWindow) {
+    alert("하수관망도 창이 차단되었습니다. 브라우저 팝업 허용 후 다시 시도해주세요.");
+    return;
+  }
+
+  // 분석 화면에서 직접 결과 popup을 열면 opener는 map이 아니라 현재 화면이 된다.
+  // map 창은 별도 탭으로 띄우고, 결과 popup의 row 선택은 storage 이벤트로 다시 map에 전달한다.
+  const popupWindow = openWindowPopup(popupKey);
+  mapWindow.focus();
+
+  if (!popupWindow) {
+    alert("분석결과 popup이 차단되었습니다. 브라우저 팝업 허용 후 다시 시도해주세요.");
+    return;
+  }
+
+  popupWindow.focus();
+};
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 e2a23759b..858c5a9d8 100644
--- a/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx
@@ -28,6 +28,8 @@ 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';
@@ -58,17 +60,21 @@ 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 IrSetting = () => {
   const [input1, setInput1] = useState('0.8'); // 오수전환율 초기값
   const [input2, setInput2] = useState('');
-  const [select1, setSelect1] = useState<string>('0');   // 하수처리장코드
+  const [selectedSwagePrcsFclt, setSelectedSwagePrcsFclt] = useState<string>('0'); // ?????? ?? ??
   const [formResetKey, setFormResetKey] = useState(0); // FileUploadForm 리셋을 위한 key 상태
   const [isLoadingResult, setIsLoadingResult] = useState<boolean>(false); // 로딩 상태
-  const [ctpvCd, setCtpvCd] = useState<string>('0'); // 시도 코드 상태
-  const [sggCd, setSggCd] = useState<string>('0'); // 시군구 코드 상태
-  const [sggName, setSggName] = useState<string>(''); // 시군구 이름 상태
-  const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>(''); // 하수처리시설명 상태
+  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[]>([
     initialFileInfo, // 0: 오수관망도
     initialFileInfo, // 1: 수용가-맨홀 매칭결과
@@ -89,6 +95,17 @@ const IrSetting = () => {
     enabled: true,
   });
 
+  const { startWatching } = useAnalysisCompletionWatcher({
+    buildStatusUrl: (analysisSn) => `v1/inftwtAnls/${analysisSn}/status`,
+    successMessage: '침입수 분석이 완료되었습니다.',
+    failureMessage: '침입수 분석이 실패했습니다. 로그를 확인해주세요.',
+    analysisType: 'INFTWT',
+    analysisName: '침입수 분석',
+    initialProgressPercent: 10,
+    initialProgressStep: 'REQUEST_ACCEPTED',
+    initialProgressMessage: '요청 접수 완료',
+  });
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -126,8 +143,11 @@ const IrSetting = () => {
     setSelectedDate(`${year}${month}`);
     setInput1(''); // 입력 필드 초기화
     setInput2(''); // 입력 필드 초기화
-    setSelect1('0');
-    setSwtrmtFcltNm('');
+    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 변경
   };
 
@@ -151,16 +171,21 @@ const IrSetting = () => {
 
 
   const registFile = async (analysisData: any) => {
-    setIsLoadingResult(true);
     const data = await postMutiPart('v1/inftwtAnls/savewithfile', analysisData);
-    if (data) {
-      setIsLoadingResult(false);
-      alert("분석 데이터가 성공적으로 제출되었습니다.");
-      resetAllForms(); // 성공 시 폼 초기화 함수 호출
-    } else {
-      setIsLoadingResult(false);
-      alert("분석 데이터 제출 중 오류가 발생했습니다.");
+    if (!data) {
+      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();
   };
 
   // 침입수 분석 실행 버튼 클릭 핸들러 
@@ -168,11 +193,12 @@ const IrSetting = () => {
     setIsLoadingResult(true); // 로딩 상태 시작
 
     // 기본 선택 항목들 검증 (환경청, 시도, 시군구, 하수처리장)
-    if (!validateBasicSelectionsWithAlert(select1, {
+    if (!validateBasicSelectionsWithAlert(selectedSwagePrcsFclt, {
       requireEnv: true,
       requireSido: true,
       requireSigungu: true,
-      requireTreatmentPlant: true
+      requireTreatmentPlant: true,
+      treatmentPlantLabel: '하수처리시설'
     })) {
       setIsLoadingResult(false);
       return;
@@ -302,8 +328,8 @@ const IrSetting = () => {
       );
 
       // 각 파싱 결과 접근
-      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
         : null;
@@ -311,6 +337,23 @@ const IrSetting = () => {
         ? parsedResults.find(r => r && r.fileName === file5.file?.name)?.parsedData
         : null;
 
+      if (!swtrmtFcltNm || !swtrmtFcltNm.trim()) {
+        setIsLoadingResult(false);
+        alert('하수처리시설명이 비어 있습니다. 시설을 다시 선택해주세요.');
+        return;
+      }
+
+      if (!Array.isArray(matchingResultData) || matchingResultData.length === 0) {
+        setIsLoadingResult(false);
+        alert('수용가-맨홀 매칭결과 파일에서 저장할 데이터를 읽지 못했습니다. 엑셀 헤더를 확인해주세요.');
+        return;
+      }
+
+      if (!Array.isArray(timePatternData) || timePatternData.length === 0) {
+        setIsLoadingResult(false);
+        alert('오수량 시간패턴 파일에서 저장할 데이터를 읽지 못했습니다. 엑셀 헤더를 확인해주세요.');
+        return;
+      }
       // 새로운 JSON 데이터 생성
       const jsonData = {
         ctpvCd: ctpvCd !== '0' ? String(ctpvCd).trim() : null,
@@ -344,8 +387,10 @@ const IrSetting = () => {
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
-      console.error("파일 파싱 중 오류 발생:", error);
-      alert("파일 처리 중 오류가 발생했습니다.");
+      console.error("침입수 분석 요청 처리 중 오류 발생:", error);
+      alert(error instanceof Error && error.message.trim()
+        ? error.message
+        : "파일 처리 중 오류가 발생했습니다.");
       return;
     }
   }
@@ -359,18 +404,21 @@ const IrSetting = () => {
         form={form}
         onSubmitEvent={() => { }}
         graphBtn={false}
+        resultViewBtn={'결과보기'}
         analysisBtn={'침입수분석 실행'}
         selectBox={{ title: '분석 대상지역 선택' }}
         ctpvCd={ctpvCd}
         sggCd={sggCd}
         sggName={sggName}
-        selectedSwagePrcsFclt={select1}
-        onSwagePrcsFcltChange={setSelect1}
+        selectedSwagePrcsFclt={selectedSwagePrcsFclt}
+        onSwagePrcsFcltChange={setSelectedSwagePrcsFclt}
         setCtpvCd={setCtpvCd}
         setSggCd={setSggCd}
         setSggName={setSggName}
         setSwtrmtFcltNm={setSwtrmtFcltNm}
+        defaultSwtrmtFcltNm={swtrmtFcltNm}
         setIsLoading={setIsLoadingResult}
+        onResultView={() => openAnalysisResultMapView('inftwtResultPopup')}
         onAnalysis={handleAnalysisClick}
         isIr={true}
       >
@@ -494,4 +542,4 @@ const IrSetting = () => {
   )
 }
 
-export default IrSetting
\ No newline at end of file
+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 4fd6d947a..70d1080a7 100644
--- a/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx
+++ b/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx
@@ -13,7 +13,7 @@
  * - 로딩 오버레이 및 에러 핸들링 지원
  * 
  * 🔗 사용 API
- * - 침입수분석 등록 첨부파일INP 포함: POST /api/v1/inftwtAnls/savewithfile (sewerage-service)
+ * - RDII분석 등록 첨부파일INP 포함: POST /api/v1/rdiiAnls/savewithfile (sewerage-service)
  * - 로그인된 사용자의 사용자 정보 조회: GET /api/v1/users/info/me (user-service)
  */
 "use client"
@@ -22,6 +22,8 @@ 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"
@@ -74,9 +76,9 @@ const formSchema = z.object({
 type FormSchemaType = z.infer<typeof formSchema>;
 // 기본 폼 값 정의 (테스트 편의를 위해 초기값 설정, 추후 삭제 필요)
 const defaultFormValues: FormSchemaType = {
-  ctpvCd: "",
-  sggCd: "",
-  swtrmtFcltNm: "",
+  ctpvCd: "41",
+  sggCd: "41830",
+  swtrmtFcltNm: "\uC591\uD3C9",
   rtkSource: "",
   rdiiArea: "", // 문자열로 기본값 설정
   unitFactors: [
@@ -112,6 +114,10 @@ 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';
 
 export default function RTKForm() {
   const [formResetKey, setFormResetKey] = useState(0); // FileUploadForm 리셋을 위한 key 상태
@@ -126,10 +132,10 @@ export default function RTKForm() {
   ]);
 
   const [select1, setSelect1] = useState<string>('0');   // 하수처리장 (swtrmtFcltCd)
-  const [ctpvCd, setCtpvCd] = useState<string>('0'); // 시도 코드 상태
-  const [sggCd, setSggCd] = useState<string>('0'); // 시군구 코드 상태
-  const [sggName, setSggName] = useState<string>(''); // 시군구 이름 상태
-  const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>(''); // 하수처리시설명 상태
+  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 { data: userInfo } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS],
@@ -137,6 +143,17 @@ export default function RTKForm() {
     enabled: true,
   });
 
+  const { startWatching } = useAnalysisCompletionWatcher({
+    buildStatusUrl: (analysisSn) => `v1/rdiiAnls/${analysisSn}/status`,
+    successMessage: 'RDII 분석이 완료되었습니다.',
+    failureMessage: 'RDII 분석이 실패했습니다. 로그를 확인해주세요.',
+    analysisType: 'RDII',
+    analysisName: 'RDII 분석',
+    initialProgressPercent: 10,
+    initialProgressStep: 'REQUEST_ACCEPTED',
+    initialProgressMessage: '요청 접수 완료',
+  });
+
   // form 인스턴스 생성
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
@@ -153,6 +170,10 @@ export default function RTKForm() {
     ]);
     setFormResetKey(prevKey => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경
     setSelect1('0');
+    setCtpvCd(DEFAULT_CTPV_CD);
+    setSggCd(DEFAULT_SGG_CD);
+    setSggName(DEFAULT_SGG_NAME);
+    setSwtrmtFcltNm(DEFAULT_SWTRMT_FCLT_NM);
   };
 
   // FileUploadForm의 onFileSelect prop으로 전달될 콜백 함수
@@ -174,16 +195,27 @@ export default function RTKForm() {
   };
 
   const registFile = async (analysisData: any) => {
-    setIsLoadingResult(true);
     const data = await postMutiPart('v1/rdiiAnls/savewithfile', analysisData);
-    if (data) {
-      setIsLoadingResult(false);
-      alert("분석 데이터가 성공적으로 제출되었습니다.");
-      resetAllForms(); // 성공 시 폼 초기화 함수 호출
-    } else {
-      setIsLoadingResult(false);
-      alert("분석 데이터 제출 중 오류가 발생했습니다.");
+    if (!data) {
+      throw new Error('분석 요청 접수 응답이 비어 있습니다.');
     }
+
+    const nextAnalysisSn = Number(data?.rainInfwtAnlsSn ?? 0);
+    const canWatchCompletion = Number.isFinite(nextAnalysisSn) && nextAnalysisSn > 0;
+
+    setIsLoadingResult(false);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    alert(
+      canWatchCompletion
+        ? '분석 요청이 접수되었습니다. 완료 시 안내됩니다.'
+        : '분석 요청이 접수되었습니다. 결과 목록에서 진행 상태를 확인해주세요.'
+    );
+
+    if (canWatchCompletion) {
+      startWatching(nextAnalysisSn);
+    }
+
+    resetAllForms();
   };
 
   // 침입수 분석 실행 버튼 클릭 핸들러
@@ -372,8 +404,10 @@ export default function RTKForm() {
       setIsLoadingResult(false);
     } catch (error) {
       setIsLoadingResult(false);
-      console.error("파일 파싱 중 오류 발생:", error);
-      alert("파일 처리 중 오류가 발생했습니다.");
+      console.error("RDII 분석 요청 처리 중 오류 발생:", error);
+      alert(error instanceof Error && error.message.trim()
+        ? error.message
+        : "파일 처리 중 오류가 발생했습니다.");
       return;
     }
   }
@@ -413,6 +447,7 @@ export default function RTKForm() {
         form={form} // react-hook-form 인스턴스 전달
         onSubmitEvent={() => { }} // BaseLayout의 form 태그에 연결될 onSubmit
         graphBtn={false}
+        resultViewBtn={'결과보기'}
         analysisBtn={'RDII분석 실행'}
         ctpvCd={ctpvCd}
         sggCd={sggCd}
@@ -423,7 +458,9 @@ export default function RTKForm() {
         setSggCd={setSggCd}
         setSggName={setSggName}
         setSwtrmtFcltNm={setSwtrmtFcltNm}
+        defaultSwtrmtFcltNm={swtrmtFcltNm}
         setIsLoading={setIsLoadingResult}
+        onResultView={() => openAnalysisResultMapView('rdiiResultPopup')}
         onAnalysis={handleAnalysisClick}
         isRdii={true}
       >
diff --git a/apps/sn/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.tsx b/apps/sn/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.tsx
new file mode 100644
index 000000000..8f5d98095
--- /dev/null
+++ b/apps/sn/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.tsx
@@ -0,0 +1,443 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { usePathname } from "next/navigation";
+
+import { getRawJson } from "@/components/lib/api";
+
+type AnalysisStatusResponse = {
+  scsYn?: string | null;
+  message?: string | null;
+  progressPercent?: number | null;
+  progressStep?: string | null;
+  progressMessage?: string | null;
+  updatedAt?: string | null;
+};
+
+type AnalysisStatusEnvelope = {
+  status?: number;
+  message?: string | null;
+  data?: AnalysisStatusResponse | null;
+};
+
+const unwrapAnalysisStatusResponse = (
+  response: AnalysisStatusResponse | AnalysisStatusEnvelope | null
+): AnalysisStatusResponse | null => {
+  if (!response || typeof response !== "object") {
+    return null;
+  }
+
+  const candidate = response as AnalysisStatusEnvelope;
+  if (candidate.data && typeof candidate.data === "object") {
+    return candidate.data;
+  }
+
+  return response as AnalysisStatusResponse;
+};
+
+type UseAnalysisCompletionWatcherParams = {
+  buildStatusUrl: (analysisSn: number) => string;
+  successMessage: string;
+  failureMessage: string;
+  analysisType?: string;
+  analysisName?: string;
+  intervalMs?: number;
+  initialProgressPercent?: number;
+  initialProgressStep?: string;
+  initialProgressMessage?: string;
+};
+
+type PendingAnalysisWatch = {
+  analysisSn: number;
+  analysisType: string;
+  analysisName: string;
+  failureMessage: string;
+  key: string;
+  progressMessage?: string;
+  progressPercent?: number;
+  progressStep?: string;
+  statusUrl: string;
+  successMessage: string;
+  updatedAt?: string | null;
+};
+
+const DEFAULT_ANALYSIS_TYPE = "GENERIC";
+const DEFAULT_ANALYSIS_NAME = "분석 진행";
+const DEFAULT_POLLING_INTERVAL_MS = 3000;
+const DEFAULT_PROGRESS_MESSAGE = "진행 상태를 확인하는 중입니다.";
+const INFTWT_ANALYSIS_TYPE = "INFTWT";
+const RDII_ANALYSIS_TYPE = "RDII";
+const PROGRESS_OVERLAY_ANALYSIS_TYPES = new Set([
+  INFTWT_ANALYSIS_TYPE,
+  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 clampProgressPercent = (value?: number | null) => {
+  if (!Number.isFinite(value)) {
+    return undefined;
+  }
+
+  return Math.max(0, Math.min(100, Number(value)));
+};
+
+const createWatchKey = (statusUrl: string, analysisSn: number) => `${statusUrl}::${analysisSn}`;
+
+const dispatchPendingAnalysisChanged = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  window.dispatchEvent(new Event(PENDING_ANALYSIS_WATCHES_CHANGED_EVENT));
+};
+
+const normalizePendingAnalysisWatch = (raw: unknown): PendingAnalysisWatch | null => {
+  if (!raw || typeof raw !== "object") {
+    return null;
+  }
+
+  const candidate = raw as Record<string, unknown>;
+  const analysisSn = Number(candidate.analysisSn ?? 0);
+  const statusUrl = String(candidate.statusUrl ?? "").trim();
+  if (!Number.isFinite(analysisSn) || analysisSn <= 0 || !statusUrl) {
+    return null;
+  }
+
+  const progressPercent = clampProgressPercent(
+    typeof candidate.progressPercent === "number"
+      ? candidate.progressPercent
+      : Number(candidate.progressPercent)
+  );
+
+  return {
+    analysisSn,
+    analysisType:
+      String(candidate.analysisType ?? DEFAULT_ANALYSIS_TYPE).trim() ||
+      DEFAULT_ANALYSIS_TYPE,
+    analysisName:
+      String(candidate.analysisName ?? DEFAULT_ANALYSIS_NAME).trim() ||
+      DEFAULT_ANALYSIS_NAME,
+    failureMessage:
+      String(candidate.failureMessage ?? "분석이 실패했습니다.").trim() ||
+      "분석이 실패했습니다.",
+    key:
+      String(candidate.key ?? createWatchKey(statusUrl, analysisSn)).trim() ||
+      createWatchKey(statusUrl, analysisSn),
+    progressMessage:
+      String(candidate.progressMessage ?? "").trim() || undefined,
+    progressPercent,
+    progressStep: String(candidate.progressStep ?? "").trim() || undefined,
+    statusUrl,
+    successMessage:
+      String(candidate.successMessage ?? "분석이 완료되었습니다.").trim() ||
+      "분석이 완료되었습니다.",
+    updatedAt:
+      candidate.updatedAt == null
+        ? undefined
+        : String(candidate.updatedAt).trim() || undefined,
+  };
+};
+
+const loadPendingAnalysisWatches = (): PendingAnalysisWatch[] => {
+  if (typeof window === "undefined") {
+    return [];
+  }
+
+  try {
+    const raw = window.localStorage.getItem(PENDING_ANALYSIS_WATCHES_STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+
+    return parsed
+      .map(normalizePendingAnalysisWatch)
+      .filter((item): item is PendingAnalysisWatch => item !== null);
+  } catch (error) {
+    console.error("분석 완료 감시 목록을 읽는 중 오류가 발생했습니다.", error);
+    return [];
+  }
+};
+
+const savePendingAnalysisWatches = (items: PendingAnalysisWatch[]) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (items.length === 0) {
+    window.localStorage.removeItem(PENDING_ANALYSIS_WATCHES_STORAGE_KEY);
+    dispatchPendingAnalysisChanged();
+    return;
+  }
+
+  window.localStorage.setItem(
+    PENDING_ANALYSIS_WATCHES_STORAGE_KEY,
+    JSON.stringify(items)
+  );
+  dispatchPendingAnalysisChanged();
+};
+
+const replacePendingAnalysisWatch = (
+  items: PendingAnalysisWatch[],
+  nextItem: PendingAnalysisWatch
+): PendingAnalysisWatch[] => {
+  const filteredItems = items.filter((item) => item.key !== nextItem.key);
+  return [...filteredItems, nextItem];
+};
+
+const toProgressText = (item: PendingAnalysisWatch) => {
+  return (
+    item.progressMessage?.trim() ||
+    item.progressStep?.trim() ||
+    DEFAULT_PROGRESS_MESSAGE
+  );
+};
+
+const toOverlayItem = (items: PendingAnalysisWatch[]) => {
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    const item = items[index];
+    if (!item) {
+      continue;
+    }
+
+    if (!PROGRESS_OVERLAY_ANALYSIS_TYPES.has(item.analysisType)) {
+      continue;
+    }
+
+    if (typeof item.progressPercent !== "number") {
+      continue;
+    }
+
+    return item;
+  }
+
+  return null;
+};
+
+const AnalysisProgressOverlay = ({ item }: { item: PendingAnalysisWatch }) => {
+  const progressPercent = clampProgressPercent(item.progressPercent) ?? 0;
+  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="mb-2 flex items-center justify-between gap-2">
+        <p className="truncate text-[1.05rem] font-semibold text-primary">
+          {item.analysisName}
+        </p>
+        <span className="text-[1rem] font-semibold text-primary">
+          {progressPercent}%
+        </span>
+      </div>
+      <div className="mb-2 h-[6px] overflow-hidden rounded-full bg-[#dbeafe]">
+        <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>
+    </div>
+  );
+};
+
+export function useAnalysisCompletionWatcher({
+  buildStatusUrl,
+  successMessage,
+  failureMessage,
+  analysisType = DEFAULT_ANALYSIS_TYPE,
+  analysisName = DEFAULT_ANALYSIS_NAME,
+  initialProgressPercent,
+  initialProgressStep,
+  initialProgressMessage,
+}: UseAnalysisCompletionWatcherParams) {
+  const startWatching = (analysisSn: number) => {
+    if (
+      typeof window === "undefined" ||
+      !Number.isFinite(analysisSn) ||
+      analysisSn <= 0
+    ) {
+      return;
+    }
+
+    const statusUrl = buildStatusUrl(analysisSn);
+    const nextItem: PendingAnalysisWatch = {
+      analysisSn,
+      analysisType,
+      analysisName,
+      failureMessage,
+      key: createWatchKey(statusUrl, analysisSn),
+      progressMessage: initialProgressMessage,
+      progressPercent: clampProgressPercent(initialProgressPercent),
+      progressStep: initialProgressStep,
+      statusUrl,
+      successMessage,
+      updatedAt: undefined,
+    };
+
+    const nextItems = replacePendingAnalysisWatch(
+      loadPendingAnalysisWatches(),
+      nextItem
+    );
+    savePendingAnalysisWatches(nextItems);
+  };
+
+  const stopWatching = (analysisSn?: number) => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (!analysisSn) {
+      savePendingAnalysisWatches([]);
+      return;
+    }
+
+    const nextItems = loadPendingAnalysisWatches().filter(
+      (item) => item.analysisSn !== analysisSn
+    );
+    savePendingAnalysisWatches(nextItems);
+  };
+
+  return {
+    startWatching,
+    stopWatching,
+  };
+}
+
+export function GlobalAnalysisCompletionWatcher() {
+  const pathname = usePathname();
+  // 전역 overlay와 완료 alert가 같은 storage 소스를 바라보도록 local state로 동기화한다.
+  const [pendingItems, setPendingItems] = useState<PendingAnalysisWatch[]>([]);
+
+  const activeOverlayItem = useMemo(() => toOverlayItem(pendingItems), [pendingItems]);
+  const shouldHideOverlay = pathname?.includes("/popup/") ?? false;
+
+  useEffect(() => {
+    if (shouldHideOverlay) {
+      setPendingItems([]);
+      return;
+    }
+    let intervalId: number | null = null;
+    let isPolling = false;
+
+    const syncPendingItems = () => {
+      setPendingItems(loadPendingAnalysisWatches());
+    };
+
+    const pollPendingAnalysis = async () => {
+      if (isPolling || typeof window === "undefined") {
+        return;
+      }
+
+      if (document.visibilityState !== "visible") {
+        syncPendingItems();
+        return;
+      }
+
+      const currentItems = loadPendingAnalysisWatches();
+      syncPendingItems();
+      if (currentItems.length === 0) {
+        return;
+      }
+
+      isPolling = true;
+
+      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 response = unwrapAnalysisStatusResponse(rawResponse);
+          if (!response) {
+            continue;
+          }
+
+          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
+          );
+          if (!latestItem) {
+            continue;
+          }
+
+          const updatedItem: PendingAnalysisWatch = {
+            ...latestItem,
+            progressMessage:
+              String(
+                response.progressMessage ?? latestItem.progressMessage ?? ""
+              ).trim() || latestItem.progressMessage,
+            progressPercent:
+              clampProgressPercent(
+                typeof response.progressPercent === "number"
+                  ? response.progressPercent
+                  : Number(response.progressPercent)
+              ) ?? latestItem.progressPercent,
+            progressStep:
+              String(response.progressStep ?? latestItem.progressStep ?? "").trim() ||
+              latestItem.progressStep,
+            updatedAt:
+              String(response.updatedAt ?? latestItem.updatedAt ?? "").trim() ||
+              latestItem.updatedAt,
+          };
+
+          if (scsYn !== "Y" && scsYn !== "N") {
+            savePendingAnalysisWatches(
+              replacePendingAnalysisWatch(latestItems, updatedItem)
+            );
+            continue;
+          }
+
+          savePendingAnalysisWatches(
+            latestItems.filter((latestWatch) => latestWatch.key !== item.key)
+          );
+          alert(message || (scsYn === "Y" ? item.successMessage : item.failureMessage));
+        }
+      } catch (error) {
+        console.error("분석 완료 상태 조회 중 오류가 발생했습니다.", error);
+      } finally {
+        isPolling = false;
+        syncPendingItems();
+      }
+    };
+
+    const handlePendingAnalysisChanged = () => {
+      syncPendingItems();
+      void pollPendingAnalysis();
+    };
+
+    intervalId = window.setInterval(() => {
+      void pollPendingAnalysis();
+    }, DEFAULT_POLLING_INTERVAL_MS);
+
+    window.addEventListener("storage", handlePendingAnalysisChanged);
+    window.addEventListener(
+      PENDING_ANALYSIS_WATCHES_CHANGED_EVENT,
+      handlePendingAnalysisChanged
+    );
+    document.addEventListener("visibilitychange", handlePendingAnalysisChanged);
+    syncPendingItems();
+    void pollPendingAnalysis();
+
+    return () => {
+      if (intervalId !== null) {
+        window.clearInterval(intervalId);
+      }
+      window.removeEventListener("storage", handlePendingAnalysisChanged);
+      window.removeEventListener(
+        PENDING_ANALYSIS_WATCHES_CHANGED_EVENT,
+        handlePendingAnalysisChanged
+      );
+      document.removeEventListener("visibilitychange", handlePendingAnalysisChanged);
+    };
+  }, [shouldHideOverlay]);
+
+  if (shouldHideOverlay) {
+    return null;
+  }
+
+  return activeOverlayItem ? <AnalysisProgressOverlay item={activeOverlayItem} /> : null;
+}
\ No newline at end of file
diff --git a/apps/sn/app/(with-base-layout)/layout.tsx b/apps/sn/app/(with-base-layout)/layout.tsx
index 346521d17..9cf3614f4 100644
--- a/apps/sn/app/(with-base-layout)/layout.tsx
+++ b/apps/sn/app/(with-base-layout)/layout.tsx
@@ -13,7 +13,7 @@
  */
 "use client";
 
-import React, { useEffect} from 'react';
+import React, { useEffect } from 'react';
 import { usePathname, useRouter } from "next/navigation";
 import { useQueryClient } from "@tanstack/react-query";
 import { BaseLayout } from "@common/components";
@@ -21,6 +21,7 @@ import type { MenuItem } from "@/entities/menu";
 import { useMenuStore } from "@/shared/lib";
 import { PageLayout } from "@/shared/ui/page-layout";
 import useStore from '../store/useStore';
+import { authService } from "@/entities/auth";
 
 export default function WithBaseLayout({
   children,
@@ -50,10 +51,11 @@ export default function WithBaseLayout({
   return (
     <BaseLayout
       queryClient={queryClient}
+      authService={authService}
       currentPath={pathname ?? ""}
       handleMenuClick={handleMenuClick}
     >
       <PageLayout>{children}</PageLayout>
     </BaseLayout>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/sn/app/(with-base-layout)/oper/_components/SearchDatePicker.tsx b/apps/sn/app/(with-base-layout)/oper/_components/SearchDatePicker.tsx
new file mode 100644
index 000000000..f31f52ae7
--- /dev/null
+++ b/apps/sn/app/(with-base-layout)/oper/_components/SearchDatePicker.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { CalendarIcon } from "lucide-react";
+import { useState, type ComponentProps } from "react";
+
+import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@common/components/ui";
+
+type CalendarProps = ComponentProps<typeof Calendar>;
+
+type SearchDatePickerProps = {
+  selected?: Date;
+  onSelect: (date: Date | undefined) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: CalendarProps["disabled"];
+  defaultMonth?: CalendarProps["defaultMonth"];
+};
+
+const formatDateLabel = (date: Date) => {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+export function SearchDatePicker({
+  selected,
+  onSelect,
+  placeholder = "날짜 선택",
+  className,
+  disabled,
+  defaultMonth,
+}: SearchDatePickerProps) {
+  // 검색조건 달력은 날짜 선택과 동시에 Popover를 닫아야 하므로 open 상태를 화면 전용으로 제어한다.
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = (date: Date | undefined) => {
+    onSelect(date);
+    if (date) {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={[
+            "h-[3rem] w-[12rem] justify-start border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal text-muted-foreground hover:!bg-accent",
+            className,
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          disabled={disabled === true}
+        >
+          <CalendarIcon className="!size-[1.6rem]" />
+          {selected ? formatDateLabel(selected) : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          classNames={{ cell: "rounded-md" }}
+          mode="single"
+          selected={selected}
+          onSelect={handleSelect}
+          disabled={disabled}
+          defaultMonth={defaultMonth}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
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 3df6a1541..464e372d5 100644
--- a/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
@@ -23,7 +23,7 @@ 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, DatePicker, Input, Label } from '@common/components/ui'
+import { Button, Input, Label } from '@common/components/ui'
 import { useEffect, useState } from 'react'
 import { tableHeadlist } from '..'
 import { useQuery } from "@tanstack/react-query";
@@ -31,6 +31,7 @@ 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';
 
 
 const Page = () => {
@@ -176,20 +177,16 @@ const Page = () => {
           <div className='flex items-center gap-5'>
             <div className='flex items-center gap-2'>
               <Label className="w-20 text-xl text-gray-600">등록기간</Label>
-              <DatePicker mode={'single'}
+              <SearchDatePicker
                 selected={fromDate}
                 onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}
-                modifiers={{
-                  disabled: { after: new Date() }
-                }}
+                disabled={{ after: new Date() }}
               />
               <span>~</span>
-              <DatePicker mode={'single'}
+              <SearchDatePicker
                 selected={toDate}
                 onSelect={(date: Date | undefined) => { if (date) setToDate(date) }}
-                modifiers={{
-                  disabled: { after: new Date() }
-                }}
+                disabled={{ after: new Date() }}
               />
             </div>
             <div className='flex items-center'>
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 86d5d4853..6fb88829c 100644
--- a/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
+++ b/apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
@@ -23,7 +23,7 @@ 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, DatePicker, Input, Label } from '@common/components/ui'
+import { Button, Input, Label } from '@common/components/ui'
 import { useEffect, useState } from 'react'
 import { tableHeadlistOldPp } from '..'
 import { useQuery } from "@tanstack/react-query";
@@ -31,6 +31,7 @@ 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';
 
 
 const Page = () => {
@@ -174,19 +175,15 @@ const Page = () => {
           <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>
-              <DatePicker mode={'single'}
+              <SearchDatePicker
                 selected={fromDate}
                 onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}
-                modifiers={{
-                  disabled: { after: new Date() }
-                }} />
+                disabled={{ after: new Date() }} />
               <span>~</span>
-              <DatePicker mode={'single'}
+              <SearchDatePicker
                 selected={toDate}
                 onSelect={(date: Date | undefined) => { if (date) setToDate(date) }}
-                modifiers={{
-                  disabled: { after: new Date() }
-                }} />
+                disabled={{ after: new Date() }} />
               <div className='flex items-center'>
                 <Label className="w-20 text-xl text-gray-600">등록자</Label>
                 <Input
diff --git a/apps/sn/app/(with-base-layout)/selectionValidation.tsx b/apps/sn/app/(with-base-layout)/selectionValidation.tsx
index ce80bdd67..6beb4c11a 100644
--- a/apps/sn/app/(with-base-layout)/selectionValidation.tsx
+++ b/apps/sn/app/(with-base-layout)/selectionValidation.tsx
@@ -100,19 +100,21 @@ export const validateBasicSelections = (
     requireSido?: boolean;
     requireSigungu?: boolean;
     requireTreatmentPlant?: boolean;
+    treatmentPlantLabel?: string;
   } = {}
 ): SelectionValidationResult => {
   const {
     requireEnv = true,
     requireSido = true,
     requireSigungu = true,
-    requireTreatmentPlant = true
+    requireTreatmentPlant = true,
+    treatmentPlantLabel = '하수처리장'
   } = options;
 
   const validationConfigs: SelectionValidationConfig[] = [
     {
       value: select1,
-      description: '하수처리장',
+      description: treatmentPlantLabel,
       required: requireTreatmentPlant
     }
   ];
@@ -133,6 +135,7 @@ export const validateBasicSelectionsWithAlert = (
     requireSido?: boolean;
     requireSigungu?: boolean;
     requireTreatmentPlant?: boolean;
+    treatmentPlantLabel?: string;
   } = {}
 ): boolean => {
   const result = validateBasicSelections(select1, options);
diff --git a/apps/sn/app/api/proxy/[...url]/route.ts b/apps/sn/app/api/proxy/[...url]/route.ts
index cf6447b1a..999f54439 100644
--- a/apps/sn/app/api/proxy/[...url]/route.ts
+++ b/apps/sn/app/api/proxy/[...url]/route.ts
@@ -9,16 +9,18 @@
  * - 에러 핸들링 및 상태 코드 반환
  * - 사이트 ID 및 헤더 설정
  */
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    COOKIE_DOMAIN,
+    REFRESH_TOKEN,
+    SERVER_API_URL,
+    SITE_ID,
+} from "@/shared/config";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
-const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
-const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
-const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
-
 async function handler(
   request: Request,
   params: { url: string[] },
@@ -29,6 +31,11 @@ async function handler(
     "Content-Type": "application/json",
     "X-Site-Id": SITE_ID,
   };
+  const deviceId = request.headers.get("X-Device-Id");
+  if (deviceId) {
+      headers["X-Device-Id"] = deviceId;
+  }
+   
   let body = {};
   const isRefreshHandler = params.url.includes("refresh");
 
@@ -38,7 +45,10 @@ async function handler(
     headers[CLAIM_NAME] = refreshToken?.value ?? "";
 
     if (!headers[CLAIM_NAME]) {
-      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
+        return NextResponse.json(
+            { message: "Can't refresh" },
+            { status: 401 },
+        );
     }
   }
 
@@ -75,6 +85,7 @@ async function handler(
         cookieStore.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
           sameSite: "lax",
+          domain: getCookieDomain(),
           path: "/",
         });
       }
@@ -109,3 +120,14 @@ export async function PUT(
   const params = await props.params;
   return handler(request, params, "PUT");
 }
+
+function getCookieDomain(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+
+  if (COOKIE_DOMAIN) return COOKIE_DOMAIN;
+
+  const { hostname } = window.location;
+  if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
+
+  return hostname;
+}
\ No newline at end of file
diff --git a/apps/sn/app/auth/login/page.tsx b/apps/sn/app/auth/login/page.tsx
deleted file mode 100644
index 7a35b0ddd..000000000
--- a/apps/sn/app/auth/login/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { LoginPage } from "@/features/auth/login";
-export default LoginPage;
diff --git a/apps/sn/app/auth/login/route-bak.ts b/apps/sn/app/auth/login/route-bak.ts
deleted file mode 100644
index 796537cc3..000000000
--- a/apps/sn/app/auth/login/route-bak.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { tokenManager } from "@/entities/auth/lib/token-manager";
-
-export async function GET(request: NextRequest) {
-  const hostname = request.nextUrl.hostname;
-  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
-
-  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
-    tokenManager.clearAuthToken();
-    return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경
-  } else {
-    return NextResponse.redirect(new URL(redirectUrl)); // 공단 환경
-  }
-}
\ No newline at end of file
diff --git a/apps/sn/app/components/lib/api/index.ts b/apps/sn/app/components/lib/api/index.ts
index 28c9f4500..ed59ba687 100644
--- a/apps/sn/app/components/lib/api/index.ts
+++ b/apps/sn/app/components/lib/api/index.ts
@@ -11,8 +11,10 @@
  */
 import { useEffect, useState } from "react";
 import axios from 'axios';
+import { AxiosError } from 'axios';
 import { CLAIM_NAME, SITE_ID } from "@/shared/config";
 import { tokenManager } from "@/entities/auth/lib/token-manager";
+import { getRemainingMs } from "@common/auth";
 
 const BASE_URL = '/sewerage-service/api';
 const DEFAULT_HEADERS = {
@@ -29,10 +31,40 @@ const withSiteIdHeaders = (headers: HeadersInit = {}) => ({
 const resolveApiUrl = (url: string) =>
   url.startsWith('/') ? `${url}` : `${BASE_URL}/${url}`;
 
+const buildInvalidJsonResponseError = (url: string, text: string, contentType?: string | null) => {
+  const preview = text.trim().slice(0, 200);
+  const responseType = contentType ? ` (${contentType})` : "";
+  return new Error(
+    `JSON 응답이 아닌 데이터를 받았습니다${responseType}: ${url}${preview ? ` - ${preview}` : ""}`,
+  );
+};
+const buildRequestError = (
+  fallbackMessage: string,
+  status?: number,
+  body?: unknown,
+) => {
+  const bodyMessage =
+    typeof body === "object" && body !== null
+      ? (
+        (body as { message?: unknown }).message
+        ?? (body as { error?: { message?: unknown } }).error?.message
+      )
+      : undefined;
+  const message =
+    typeof bodyMessage === "string" && bodyMessage.trim()
+      ? bodyMessage
+      : fallbackMessage;
+  const error = new Error(message) as Error & { status?: number; body?: unknown };
+  error.status = status;
+  error.body = body;
+  return error;
+};
+
 const handleUnauthorizedResponse = () => {
   if (typeof window === "undefined") return;
 
-  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const accessToken = tokenManager.getToken(CLAIM_NAME);
+  const remainingMs = accessToken ? getRemainingMs(accessToken) : null;
   const isExpired = remainingMs === null || remainingMs <= 0;
 
   if (!isExpired) return;
@@ -79,7 +111,22 @@ export const getData = async (url: string): Promise<any> => {
       throw new Error('Invalid JSON response from server');
     }
   }
-  throw new Error('Failed to fetch data');
+
+  const text = await res.text().catch(() => "");
+  let body: unknown = null;
+  if (text.trim()) {
+    try {
+      body = JSON.parse(text);
+    } catch {
+      body = text;
+    }
+  }
+
+  throw buildRequestError(
+    `Failed to fetch data: ${res.status} ${res.statusText}`,
+    res.status,
+    body,
+  );
 };
 
 export const postData = async (url: string, data: object): Promise<any> => {
@@ -101,6 +148,32 @@ export const postData = async (url: string, data: object): Promise<any> => {
   }
 };
 
+export const postRawJson = async (url: string, data: object): Promise<any> => {
+  const res = await fetch(resolveApiUrl(url), {
+    method: "POST",
+    headers: withSiteIdHeaders({
+      "Content-Type": "application/json",
+    }),
+    body: JSON.stringify(data),
+  });
+  if (res.status === 401) {
+    handleUnauthorizedResponse();
+  }
+
+  const text = await res.text();
+  const body = text && text.trim() ? JSON.parse(text) : null;
+  if (!res.ok) {
+    const message =
+      body?.message ??
+      `Failed to post data: ${res.status} ${res.statusText}`;
+    const error = new Error(message) as Error & { status?: number; body?: any };
+    error.status = res.status;
+    error.body = body;
+    throw error;
+  }
+  return body;
+};
+
 const parseDownloadFileName = (contentDisposition: string | null) => {
   if (!contentDisposition) return undefined;
 
@@ -142,29 +215,34 @@ export const postBlobData = async (
 };
 
 export const postMutiPart = async (url: string, data: FormData): Promise<any> => {
-  const res = await axios.post(`${BASE_URL}/${url}`, data, {
-    headers: DEFAULT_HEADERS,
-    timeout: 600000, // 10분
-  });
-  console.log('postMultiPart response:', res);
-  return res.data.data;
-};
+  try {
+    const res = await axios.post(`${BASE_URL}/${url}`, data, {
+      headers: DEFAULT_HEADERS,
+      timeout: 600000, // 10분
+    });
+    console.log('postMultiPart response:', res);
+    return res.data.data;
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const responseBody = error.response?.data;
+      const serverMessage =
+        typeof responseBody?.message === 'string' && responseBody.message.trim()
+          ? responseBody.message.trim()
+          : typeof responseBody?.error?.message === 'string' && responseBody.error.message.trim()
+            ? responseBody.error.message.trim()
+            : typeof responseBody === 'string' && responseBody.trim()
+              ? responseBody.trim()
+              : null;
 
-export const putData = async (url: string, data: object): Promise<any> => {
-  const options: RequestInit = {
-    method: "PUT",
-    headers: withSiteIdHeaders({
-      "Content-Type": "application/json",
-    }),
-    body: JSON.stringify(data),
-  };
-  const res = await fetch(`${BASE_URL}/${url}`, options);
-  if (res.status === 401) {
-    handleUnauthorizedResponse();
+      const nextError = new Error(
+        serverMessage ?? `Multipart request failed: ${error.response?.status ?? 'UNKNOWN'} ${error.response?.statusText ?? ''}`.trim(),
+      ) as Error & { status?: number; body?: unknown };
+      nextError.status = error.response?.status;
+      nextError.body = responseBody;
+      throw nextError;
+    }
+    throw error;
   }
-  const resData = await res.json();
-  console.log('putData response:', resData);
-  return resData.data;
 };
 
 export const deleteData = async (url: string, data?: object): Promise<any> => {
@@ -211,11 +289,15 @@ export const getRawJson = async (url: string, init: RequestInit = {}): Promise<a
     return null;
   }
 
+  const trimmed = text.trim();
+  if (trimmed.startsWith("<")) {
+    throw buildInvalidJsonResponseError(url, text, res.headers.get("content-type"));
+  }
+
   try {
     return JSON.parse(text);
-  } catch (error) {
-    console.error('JSON parsing error:', error);
-    throw new Error(`Invalid JSON response from server: ${url}`);
+  } catch {
+    throw buildInvalidJsonResponseError(url, text, res.headers.get("content-type"));
   }
 };
 
diff --git a/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx b/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx
index 25eb0a9d1..51eb5a166 100644
--- a/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx
+++ b/apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx
@@ -35,10 +35,15 @@ interface CtpvSggPrcsFcltSelectBoxProps {
   selectedSwagePrcsFclt?: string;
   onSwagePrcsFcltChange?: (value: string) => void;
   setSwtrmtFcltNm?: (name: string) => void;
+  defaultSwtrmtFcltNm?: string;
   setIsLoading?: (isLoading: boolean) => void;
 }
 
 const defaultOption: ApiSelectOption = { val: '0', text: '전체' };
+const buildFacilityDefaultOption = (facilityName: string): ApiSelectOption => ({
+  val: '0',
+  text: facilityName || defaultOption.text,
+});
 
 export function CtpvSggPrcsFcltSelectBox({
   sido,
@@ -52,6 +57,7 @@ export function CtpvSggPrcsFcltSelectBox({
   selectedSwagePrcsFclt,
   onSwagePrcsFcltChange,
   setSwtrmtFcltNm,
+  defaultSwtrmtFcltNm,
   setIsLoading,
 }: CtpvSggPrcsFcltSelectBoxProps) {
 
@@ -59,18 +65,7 @@ export function CtpvSggPrcsFcltSelectBox({
   const { ctpv, sgg } = useStore();
   const sidoStr = String(sido ?? '');
   const sidoPrefix = sidoStr.slice(0, 2);
-
-  useEffect(() => {
-    (async () => {
-      onSidoChange("0");
-      onSigunguChange("0");
-      if (setCtpvName && setSggName) {
-        setCtpvName("");
-        setSggName("");
-      }
-      if (setSwtrmtFcltNm) setSwtrmtFcltNm("");
-    })();
-  }, []);
+  const normalizedDefaultFacilityName = String(defaultSwtrmtFcltNm ?? '').trim();
 
   useEffect(() => {
     onSwagePrcsFcltChange?.('0');
@@ -115,6 +110,25 @@ export function CtpvSggPrcsFcltSelectBox({
     fetchData();
   }, [sggName]);
 
+  useEffect(() => {
+    if (!normalizedDefaultFacilityName) return;
+    if (!selectedSwagePrcsFclt || selectedSwagePrcsFclt !== "0") return;
+    if (prcsFcltOptions.length === 0) return;
+
+    const matchedDefaultFacility = prcsFcltOptions.find((option) =>
+      String(option.text ?? "").trim() === normalizedDefaultFacilityName,
+    );
+    if (!matchedDefaultFacility) return;
+
+    onSwagePrcsFcltChange?.(String(matchedDefaultFacility.val));
+    setSwtrmtFcltNm?.(matchedDefaultFacility.text);
+  }, [
+    normalizedDefaultFacilityName,
+    onSwagePrcsFcltChange,
+    prcsFcltOptions,
+    selectedSwagePrcsFclt,
+    setSwtrmtFcltNm,
+  ]);
 
   return (
     <div className={`flex items-center justify-center ${className} mr-8`}>
@@ -153,7 +167,7 @@ export function CtpvSggPrcsFcltSelectBox({
             className="w-[160px]"
             selectClass="rounded-lg bg-white truncate"
             label=""
-            selectArray={[defaultOption, ...prcsFcltOptions]}
+            selectArray={[buildFacilityDefaultOption(normalizedDefaultFacilityName), ...prcsFcltOptions]}
             value={selectedSwagePrcsFclt}
             onSelectValue={(val) => {
               onSwagePrcsFcltChange?.(String(val))
@@ -165,4 +179,4 @@ export function CtpvSggPrcsFcltSelectBox({
       )}
     </div>
   );
-}
\ 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 1ed617243..a03641e1e 100644
--- a/apps/sn/app/components/ui/verticalTable.tsx
+++ b/apps/sn/app/components/ui/verticalTable.tsx
@@ -45,17 +45,37 @@ type UiTableProps = {
   onFormDataChange?: (formData: { [key: string]: string | number | boolean }) => void; // 추가
 };
 
+type UiSelectOption =
+  | string
+  | {
+      value?: string | number;
+      label?: string;
+      val?: string | number;
+      text?: string;
+      hidden?: boolean;
+    };
+
 type UiHeadProps = {
   id: string;
   title: string;
   align?: string;
   type?: string;
-  options?: string[];
+  options?: UiSelectOption[];
   placeholder?: string;
   isNumber?: boolean;
   length?: number;
+  required?: boolean;
 };
 
+const getSelectOptionValue = (option: UiSelectOption) =>
+  typeof option === "string" ? option : String(option.value ?? option.val ?? "");
+
+const getSelectOptionLabel = (option: UiSelectOption) =>
+  typeof option === "string" ? option : String(option.label ?? option.text ?? getSelectOptionValue(option));
+
+const isSelectOptionHidden = (option: UiSelectOption) =>
+  typeof option === "string" ? false : Boolean(option.hidden);
+
 export function VerticalTable({
   headName,
   tableName1,
@@ -153,6 +173,7 @@ export function VerticalTable({
                 {/* 컬럼 제목 */}
                 <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="text-xs">
@@ -160,21 +181,28 @@ export function VerticalTable({
                     head.type === "select" ? (
                       <select
                         id={head.id}
-                        value={String(formData[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"
                       >
-                        {head.options?.map((option) => (
-                          <option key={option} value={option}>
-                            {option}
-                          </option>
-                        ))}
+                        {head.options?.map((option, optionIndex) => {
+                          const optionValue = getSelectOptionValue(option);
+                          return (
+                            <option
+                              key={`${head.id}-${optionValue}-${optionIndex}`}
+                              value={optionValue}
+                              hidden={isSelectOptionHidden(option)}
+                            >
+                              {getSelectOptionLabel(option)}
+                            </option>
+                          );
+                        })}
                       </select>
-                    ) : head.type === "input" ? (
+                    ) : head.type === "input" || head.type === "date" ? (
                       <div className="w-full">
                         <input
                           id={head.id}
-                          type="text"
+                          type={head.type === "date" ? "date" : "text"}
                           value={String(formData[head.id] ?? "")}
                           onChange={(e) => {
                             if (head.isNumber) {
@@ -241,8 +269,9 @@ export function VerticalTable({
                 <TableRow key={head.id}>
                   {/* 컬럼 제목 */}
                   <TableCell className={`font-bold bg-blue-100 text-xs w-[120px] whitespace-nowrap`}>
-                    {head.title}
-                  </TableCell>
+                  {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 ? (
@@ -253,17 +282,24 @@ export function VerticalTable({
                           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"
                         >
-                          {head.options?.map((option) => (
-                            <option key={option} value={option}>
-                              {option}
-                            </option>
-                          ))}
+                          {head.options?.map((option, optionIndex) => {
+                            const optionValue = getSelectOptionValue(option);
+                            return (
+                              <option
+                                key={`${head.id}-${optionValue}-${optionIndex}`}
+                                value={optionValue}
+                                hidden={isSelectOptionHidden(option)}
+                              >
+                                {getSelectOptionLabel(option)}
+                              </option>
+                            );
+                          })}
                         </select>
-                      ) : head.type === "input" ? (
+                      ) : head.type === "input" || head.type === "date" ? (
                         <div className="w-full">
                           <input
                             id={head.id}
-                            type={head.isNumber ? "number" : "text"}
+                            type={head.type === "date" ? "date" : head.isNumber ? "number" : "text"}
                             value={formData[head.id] !== undefined ? String(formData[head.id]) : ""}
                             onChange={(e) => {
                               if (head.isNumber) {
@@ -333,4 +369,4 @@ export function VerticalTable({
       <Toaster position="top-center"></Toaster>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/sn/app/html/(map-layout)/aged-pipe/page.tsx b/apps/sn/app/html/(map-layout)/aged-pipe/page.tsx
index 549273158..d0be9a0ce 100644
--- a/apps/sn/app/html/(map-layout)/aged-pipe/page.tsx
+++ b/apps/sn/app/html/(map-layout)/aged-pipe/page.tsx
@@ -31,6 +31,22 @@ const agedPipeHighlightStyle = new Style({
 
 const PIPE_LAYER_TYPE = "tb_ms_swage_ppl";
 const EmptySearchView = () => null;
+const normalizeTreeRowSpacing = (data: any[]) => {
+  if (!Array.isArray(data)) return data;
+
+  return data.map((item) => {
+    if (item?.lyrNm !== "지반침하정보") {
+      return item;
+    }
+
+    return {
+      ...item,
+      iconNm: null,
+      gobjTy: "",
+    };
+  });
+};
+
 const DESIGN_PREVIEW_FEATURE = {
   fid: "preview-aged-pipe",
   lyrTypeNm: PIPE_LAYER_TYPE,
@@ -103,7 +119,7 @@ const Map = () => {
     const fetchData = async () => {
       try {
         const data = await getRawJson("/sewerage-service/api/v1/map/lyrStngs/SN_NETWORK");
-        setTreeData(data);
+        setTreeData(normalizeTreeRowSpacing(data));
       } catch (error) {
         console.error("노후관로 레이어 설정 조회 중 오류:", error);
         throw new Error("Invalid JSON response from server");
diff --git a/apps/sn/app/page.tsx b/apps/sn/app/page.tsx
index b02c4bdca..a81b401db 100644
--- a/apps/sn/app/page.tsx
+++ b/apps/sn/app/page.tsx
@@ -15,7 +15,7 @@
  * - 로그인: POST /api/v1/auth/login (user-service)
  */
 "use client";
-import { LoginApi } from "@/entities/auth";
+import { authService } from "@/entities/auth";
 import { useEffect } from "react";
 
 const DEV_HOSTNAMES = new Set(["localhost", "127.0.0.1", "con.mind-one.co.kr"]);
@@ -38,7 +38,7 @@ export default function Home() {
     async function doLogin() {
       try {
         // 개발 환경에서는 남아 있는 만료/부분 쿠키로 인한 /map <-> / 루프를 막기 위해 항상 토큰을 재발급한다.
-        await LoginApi.login(DEV_LOGIN_PAYLOAD);
+        await authService.login(DEV_LOGIN_PAYLOAD);
         window.location.replace("/map");
       } catch (err) {
         console.error("로그인 실패", err);
diff --git a/apps/sn/docs/기준문서/005-상태관리정책.md b/apps/sn/docs/기준문서/005-상태관리정책.md
index 8533b442c..e4cce1ef4 100644
--- a/apps/sn/docs/기준문서/005-상태관리정책.md
+++ b/apps/sn/docs/기준문서/005-상태관리정책.md
@@ -8,6 +8,20 @@
 - 확인됨: Zustand에서 서버 기준 데이터를 조회해 보관하는 경우에는 로딩, 오류, 중복 호출 방지, 재조회 조건을 함께 정의한다.
 - 확인됨: 같은 의미의 기준 데이터 store를 두 계열 이상 유지하지 않는다. 기존 store가 겹치면 조회 출처, 데이터 shape, 필터링 규칙을 비교하고 하나의 기준으로 정리한다.
 - 확인됨: React Query를 사용하는 Provider는 QueryClient 인스턴스가 렌더마다 새로 생성되지 않도록 안정적으로 유지한다.
+- 확인됨: 지도형 편집 기능은 조회 상태, 상호작용 상태, 편집 세션 상태, 저장 상태를 한 덩어리로 섞지 않고 분리해 기록한다. 근거: `015-하네스엔지니어링정책.md`
+
+## 지도 상호작용 상태 기록 항목
+- 확인 필요: `isEditMode`처럼 편집 모드 on/off 상태가 분리되어 있는가
+- 확인 필요: `selectedLayer`, `activeTool`, `selectedFeatureId`처럼 현재 조작 대상을 식별하는 상태가 있는가
+- 확인 필요: `pendingInteraction`, `focusedChangeId`처럼 도구 전환과 지도 interaction 정리를 위한 중간 상태가 있는가
+- 확인 필요: `changes[]`, `canUndo`, `canSave`처럼 편집 세션 누적 상태가 별도로 드러나는가
+- 확인 필요: `savePending`, `saveError`, `statusMessage`처럼 저장 상태와 사용자 피드백이 분리되어 있는가
+- 확인 필요: preview feature, vertex handle, 임시 삭제 스타일 같은 지도 시각 표식이 어떤 상태와 연결되는지 문서에서 추적 가능한가
+
+## 지도 상호작용 상태 전이 기록 기준
+- 확인됨: 도구 전환 시 이전 interaction 정리 조건을 함께 적는다.
+- 확인됨: 선택 없음, 레이어 미선택, 객체 미선택, 저장 가능, 저장 불가 같은 경계 상태를 표나 목록으로 남긴다.
+- 확인됨: canvas 조작 결과를 직접 읽기 어려우면 상태 메시지, 변경 목록, preview label 같은 간접 표식을 함께 둔다.
 
 ## 화면 흐름 기록 항목
 - 확인 필요: 초기 진입 시 호출되는 API
@@ -19,6 +33,7 @@
 - 확인 필요: 로딩, 오류, 중복 호출 방지, 재조회 조건
 - 확인 필요: 팝업, 모달, 지도, 파일, 엑셀 흐름
 - 확인 필요: 에러 메시지 표시 위치
+- 확인 필요: 지도 상호작용 관측 포인트와 자동검증 가능한 화면 표식
 
 ## 주의 사항
 - 확인됨: 요구사항 근거 없는 기능 추가는 금지한다. 근거: `apps/sn/AGENTS.md`
diff --git a/apps/sn/docs/기준문서/006-검증정책.md b/apps/sn/docs/기준문서/006-검증정책.md
index 833d33a4a..a8aef0a96 100644
--- a/apps/sn/docs/기준문서/006-검증정책.md
+++ b/apps/sn/docs/기준문서/006-검증정책.md
@@ -1,5 +1,10 @@
 # 검증 기준
 
+## 공통 원칙
+- 확인됨: 하네스 친화 검증의 공통 기준은 `FE_APP_DOCS_ROOT/기준문서/015-하네스엔지니어링정책.md`를 우선 참조한다.
+- 확인됨: 기능별 자동검증 선행조건, 관측 포인트, 자동/수동 검증 경계는 각 기능의 작업카드와 통합검증계획에 남긴다.
+- 확인됨: 인증 차단, 환경 차단, 데이터 차단, 자동화 한계는 기능 결함과 분리해 기록한다.
+
 ## 기본 빌드 검증
 - 확인됨: `sn`만 수정한 경우 아래 명령으로 로컬 빌드를 확인한다. 근거: `apps/sn/AGENTS.md`
 
@@ -28,7 +33,10 @@ pnpm turbo run build --filter="...[origin/main]"
 ## 브라우저 검증
 - 확인됨: 백엔드 API 응답과 실제 브라우저 화면 동작을 함께 확인하는 것을 기본으로 한다. 근거: `apps/sn/AGENTS.md`
 - 확인 필요: 각 기능별 URL, 로그인 계정, 권한, 테스트 데이터는 작업카드에서 확정한다. 근거: 실행 환경 확인 필요
+- 확인됨: 버튼 상태, 상태 메시지, 변경 목록, 네트워크 payload처럼 자동으로 관측 가능한 항목을 먼저 고정한다. 근거: `015-하네스엔지니어링정책.md`
+- 확인됨: 지도 canvas drag, vertex 이동처럼 자동화가 불안정한 항목은 수동 검증으로 전환할 수 있으나, 전환 사유를 남겨야 한다. 근거: `015-하네스엔지니어링정책.md`
 
 ## 검증 기록
-- 확인됨: 검증 결과는 `보고/YYYY-MM-DD/결과보고.md`에 기록한다. 근거: 이 하네스 운영 문서
-- 확인됨: 외부 범위 오류는 `보고/YYYY-MM-DD/이슈.md`에 기록한다. 근거: 이 하네스 운영 문서
\ No newline at end of file
+- 확인됨: 기능 검증 계획은 기능별 `통합검증계획` 문서에 누적한다. 근거: `014-문서관리정책.md`
+- 확인됨: 기능 검증 결과는 기능별 `통합검증결과` 문서에 누적한다. 근거: `014-문서관리정책.md`
+- 확인됨: 외부 범위 오류나 공통 차단 이슈는 기능 검증결과에 요약하고, 여러 채팅방에 영향을 주는 경우 공통 결정로그 또는 공통 작업내용 문서에 함께 남긴다. 근거: `015-하네스엔지니어링정책.md`
diff --git a/apps/sn/docs/기준문서/008-설계정책.md b/apps/sn/docs/기준문서/008-설계정책.md
index 62e300a72..f5a3e8753 100644
--- a/apps/sn/docs/기준문서/008-설계정책.md
+++ b/apps/sn/docs/기준문서/008-설계정책.md
@@ -15,11 +15,25 @@
 - 폼과 조회 조건은 화면 컴포넌트 내부에서 뒤섞지 말고 역할 단위로 분리한다.
 - 지도, 표, 팝업이 함께 있는 화면은 사용자 흐름 기준으로 이벤트 책임을 나눈다.
 
+## 3-1. 지도 상호작용 설계 원칙
+- 편집 도구별 책임은 `선택`, `추가`, `이동`, `꼭지점편집`, `삭제`, `저장`처럼 사용자 행위 단위로 구분한다.
+- 같은 지도 feature를 재사용하더라도 `MOVE`와 `VERTEX_EDIT`처럼 interaction lifecycle이 다른 도구는 상태 전이와 정리 조건을 분리한다.
+- 기존 상세 팝업, 레이어 선택, 지도 클릭 이벤트와 편집 도구가 충돌하면 우선순위 규칙을 설계 문서에 남긴다.
+- 지도 상호작용 결과는 canvas 안에서만 끝나지 않게 상태 메시지, 변경 목록, preview label, 버튼 활성 상태 중 하나 이상으로 바깥에서 관측 가능해야 한다.
+- `map/page.tsx` 같은 대형 화면 파일에 책임이 몰려 있으면, 코드 리팩터링 전에도 문서에서 상태 경계와 컴포넌트 분리 목표를 먼저 고정한다.
+
 ## 4. API 연동 원칙
 - 프론트는 실제 백엔드 DTO, API 명세, 에러 응답을 기준으로 맞춘다.
 - 필드명 해석이 애매하면 프론트에서 임의 변환 규칙을 늘리기보다 계약을 먼저 확인한다.
 - 목록/상세/다운로드 API는 요청 파라미터와 응답 구조를 문서에 남긴다.
 
+## 4-1. 하네스 친화 설계 원칙
+- 자동검증 선행조건, 테스트 데이터, 인증 요구사항은 설계 또는 작업카드에서 명시한다.
+- 브라우저 자동화로 안정적으로 확인할 수 있는 관측 포인트를 설계 단계에서 먼저 정한다.
+- 자동화가 어려운 canvas drag, vertex 이동은 수동 검증으로 전환할 수 있지만, 전환 사유와 대체 관측 포인트를 함께 둔다.
+- 인증 차단, 환경 차단, 데이터 차단, 자동화 한계는 기능 결함과 분리해 설계와 검증 문서에 반영한다.
+
 ## 5. 공통 문서 참조
 - 공통 용어는 `COMMON_DOCS_ROOT/기준문서/003-공통용어사전.md`를 우선 참조한다.
 - 공통 환경/빌드 이슈는 `COMMON_DOCS_ROOT/기준문서/004-환경빌드문제대응.md`를 함께 본다.
+- 하네스 친화 검증 기준은 `FE_APP_DOCS_ROOT/기준문서/015-하네스엔지니어링정책.md`를 함께 참조한다.
diff --git a/apps/sn/docs/기준문서/014-문서관리정책.md b/apps/sn/docs/기준문서/014-문서관리정책.md
new file mode 100644
index 000000000..17678e18f
--- /dev/null
+++ b/apps/sn/docs/기준문서/014-문서관리정책.md
@@ -0,0 +1,155 @@
+# 014. 문서관리정책
+
+## 1. 목적
+
+- `sn` 앱과 연동 기능 문서를 기능 단위 통합 문서 방식으로 관리한다.
+- 라운드별 개별 md가 계속 늘어나는 문제를 막고, 나중에 한 기능의 전체 맥락을 빠르게 읽을 수 있게 한다.
+
+## 2. 기본 원칙
+
+- 기능마다 아래 문서만 유지한다.
+  - 설계 문서 1개
+  - 작업내용 문서 1개
+  - 작업검증 계획 문서 1개
+  - 작업검증 결과 문서 1개
+- 세부 이력은 새 파일을 만들지 않고 기존 문서 내부 헤더로 누적한다.
+- 라운드별 `002`, `003`, `004` 식 후속 파일 추가를 기본 금지한다.
+- 예외적으로 별도 문서가 꼭 필요하면, 왜 기존 통합 문서 헤더로 해결되지 않는지 먼저 기록한다.
+- 하네스 정보도 별도 기능 md를 늘리기보다 기존 4문서에 배치한다.
+- 하네스 정보 배치 기준은 `FE_APP_DOCS_ROOT/기준문서/015-하네스엔지니어링정책.md`를 따른다.
+
+## 3. 경로별 생성 규칙
+
+### 3.1 공통 설계 문서
+
+- 경로
+  - `COMMON_DOCS_ROOT/작업계획/<기능폴더>/`
+- 파일
+  - `001-de-<기능명>-설계.md`
+- 규칙
+  - 설계는 기능당 1개만 유지한다.
+  - 후속 설계 변경, 상태 재검토, QGIS 반영, API 계약 보완도 기존 설계 문서에 새 헤더로 누적한다.
+
+### 3.2 `sn` 작업내용 문서
+
+- 경로
+  - `FE_APP_DOCS_ROOT/작업내용/<기능폴더>/`
+- 파일
+  - `001-fe-<기능명>-통합구현기록.md`
+- 규칙
+  - 구현 이력, 라운드별 변경, 결정사항, 리스크, BE 공유사항을 한 문서에 누적한다.
+  - 기존 `001`, `002`, `003` 개별 구현 문서는 통합 문서에 흡수 후 정리한다.
+
+### 3.3 `sn` 작업검증 문서
+
+- 경로
+  - `FE_APP_DOCS_ROOT/작업검증/<기능폴더>/`
+- 파일
+  - `001-qa-<기능명>-통합검증계획.md`
+  - `002-qa-<기능명>-통합검증결과.md`
+- 규칙
+  - 검증 계획은 `통합검증계획` 1개에만 누적한다.
+  - 검증 결과는 `통합검증결과` 1개에만 누적한다.
+  - 회귀 검증, 후속 검증, 도구별 검증도 새 파일이 아니라 각 문서 내부 헤더로 구분한다.
+
+## 4. 문서 내부 헤더 규칙
+
+### 4.1 설계 문서
+
+- 권장 섹션
+  - 목적
+  - 입력 근거
+  - 현재 확인 상태
+  - 기능 범위
+  - 사용자 흐름
+  - 화면/UI 계약
+  - API 계약
+  - 검증 기준
+  - 남은 리스크
+- 하네스 정보 배치
+  - 도구 상태 전이표
+  - 지도 상호작용 관측 포인트
+  - 자동검증 가능 범위와 수동 검증 경계
+- 후속 반영은 아래 형식 중 하나로 누적한다.
+  - `## 2-1. 외부 참조 기준`
+  - `### 6.6 도구별 세부 계약`
+  - `### 6.8 지도 상호작용 관측 포인트`
+  - `### 7.5 도구 상태 전이표`
+  - `## YYYY-MM-DD 설계 변경 메모`
+
+### 4.2 통합 구현 기록
+
+- 권장 섹션
+  - 문서 목적
+  - 입력 근거
+  - 공통 계약
+  - 구현 라운드 요약
+  - 기능별 현재 상태
+  - BE 공유 사항
+  - 남은 리스크
+  - 흡수한 기존 문서
+- 하네스 정보 배치
+  - 자동화 차단 요인
+  - 관측 가능성 확보를 위해 추가한 상태/메시지/표식
+  - 하네스 친화화 부채
+- 라운드별 구현은 `### 4.x` 식으로 누적한다.
+
+### 4.3 통합 검증 계획
+
+- 권장 섹션
+  - 문서 목적
+  - 검증 범위
+  - 검증 기준
+  - 라운드별 검증 계획
+  - 다음 검증 순서
+  - 흡수한 기존 문서
+- 하네스 정보 배치
+  - 브라우저 검증 선행조건
+  - 관측 포인트 표
+  - 자동검증 항목과 수동검증 항목 구분
+  - 차단 사유 분류 기준
+
+### 4.4 통합 검증 결과
+
+- 권장 섹션
+  - 문서 목적
+  - 수행한 검증
+  - 라운드별 검증 결과
+  - 현재 검증 상태
+  - 보류/리스크
+  - 흡수한 기존 문서
+- 하네스 정보 배치
+  - 실제 관측 증적 요약
+  - 차단 사유 분류
+  - 자동화 실패와 기능 실패 구분 결과
+
+## 5. 기존 개별 문서 흡수 규칙
+
+- 기존 개별 문서를 유지할 필요가 없으면 다음 순서로 정리한다.
+  1. 통합 문서에 핵심 내용을 요약/흡수
+  2. 통합 문서 `흡수한 기존 문서` 섹션에 파일명을 기록
+  3. 기존 개별 문서를 정리한다
+- 흡수 시 원래 문서의 모든 문장을 그대로 복사하기보다, 결정사항과 검증 결과를 구조화해서 재작성한다.
+
+## 6. 새 기능 시작 시 문서 생성 순서
+
+1. 공통 설계 문서 1개 생성
+2. `sn` 작업카드 1개 생성
+3. `sn` 통합 구현 기록 1개 생성
+4. `sn` 통합 검증 계획 1개 생성
+5. `sn` 통합 검증 결과 1개 생성
+6. 이후부터는 기존 5개 문서만 계속 갱신
+
+## 7. 금지 사항
+
+- 구현 라운드마다 `002-fe-...`, `003-fe-...`, `004-qa-...`를 계속 추가하지 않는다.
+- 같은 기능에서 `후속검증계획.md`, `후속검증결과.md`, `MOVE실드래그검증계획.md`, `VERTEX_EDIT실조작검증결과.md` 같은 파생 검증 파일을 반복 증식시키지 않는다.
+- `상태재검토`, `후속정리`, `보완메모`를 별도 파일로 분리하지 않는다.
+
+## 8. 예외 처리
+
+- 사용자 요청으로 개별 문서 분리가 명시된 경우
+- 외부 전달용 산출물이라 통합 문서 내부 헤더로 대체할 수 없는 경우
+- 법적/감사/계약상 독립 파일 보관이 필요한 경우
+
+예외 상황에서도 먼저 통합 문서에 “왜 별도 파일이 필요한지”를 기록한다.
diff --git a/apps/sn/docs/기준문서/015-하네스엔지니어링정책.md b/apps/sn/docs/기준문서/015-하네스엔지니어링정책.md
new file mode 100644
index 000000000..2499f94ff
--- /dev/null
+++ b/apps/sn/docs/기준문서/015-하네스엔지니어링정책.md
@@ -0,0 +1,126 @@
+# 015. 하네스엔지니어링정책
+
+## 1. 목적
+
+- `sn` 앱 기능을 브라우저 자동검증, 수동 회귀 검증, FE-BE 연동 관찰이 가능한 구조로 문서화하는 기준을 통일한다.
+- 구현 코드 구조를 바로 바꾸기 전에도, 문서 단계에서 관측 포인트와 차단 요인을 먼저 드러내어 하네스 친화성을 높인다.
+- 기능별 문서에 하네스 정보가 중복되거나 누락되지 않도록 공통 배치 기준을 제공한다.
+
+## 2. 적용 범위
+
+- `FE_APP_DOCS_ROOT/기준문서/**`
+- `FE_APP_DOCS_ROOT/작업계획/**`
+- `FE_APP_DOCS_ROOT/작업내용/**`
+- `FE_APP_DOCS_ROOT/작업검증/**`
+- `COMMON_DOCS_ROOT/작업계획/**` 중 `sn` 화면/상호작용 계약을 담는 설계 문서
+
+## 3. 기본 원칙
+
+- 하네스 정보는 기능별로 새 md를 늘리기보다 기존 4문서 체계 안에 배치한다.
+- 자동검증 가능 여부와 무관하게, 사용자가 실제로 무엇을 보고 성공/실패를 판단하는지 먼저 문서화한다.
+- 브라우저 자동화 한계, 인증 차단, 외부 시스템 장애는 기능 결함과 분리해 기록한다.
+- 지도 상호작용 기능은 도구 상태, 선택 상태, 세션 상태, 네트워크 상태를 따로 관측할 수 있어야 한다.
+- 코드 구조가 과밀해도 문서에서는 책임 경계, 상태 전이, 관측 포인트를 먼저 고정한다.
+
+## 4. 자동검증 선행조건
+
+- 접속 URL
+- 로그인 경로와 권한
+- 필수 쿠키 또는 토큰 존재 여부
+- 서버 기동 상태와 대상 API base URL
+- 테스트용 레이어, 객체 ID, BBOX, 샘플 데이터
+- 브라우저 자동화 가능 범위와 수동 검증 전환 조건
+
+인증 또는 외부 연동 문제로 위 조건이 충족되지 않으면, 이를 기능 실패로 단정하지 말고 `환경 차단`, `인증 차단`, `데이터 차단`, `자동화 한계` 중 하나로 분류한다.
+
+## 5. 관측 포인트 표준
+
+### 5.1 화면 관측
+
+- 버튼 활성/비활성
+- 툴바 노출/숨김
+- 상태 메시지 텍스트
+- 선택 레이어명
+- 변경 목록 행 수
+- 오류 또는 안내 메시지
+
+### 5.2 지도 상호작용 관측
+
+- 현재 활성 도구
+- 선택 객체 존재 여부
+- preview feature 존재 여부
+- vertex marker 또는 modify handle 노출 여부
+- drag 또는 modify 종료 후 geometry 변경 여부
+- 삭제 대상 임시 스타일 적용 여부
+
+### 5.3 네트워크 관측
+
+- 요청 URL, method, query/body
+- 응답 status
+- 편집 세션 payload shape
+- 인증 실패 또는 권한 실패 응답
+
+### 5.4 세션 관측
+
+- 로컬 변경분 누적 여부
+- undo/reset 가능 여부
+- save 가능 여부
+- save pending/save error 상태
+
+## 6. 자동검증과 수동검증 경계
+
+- DOM, 텍스트, 버튼 상태, 네트워크 호출, payload 구조는 자동검증 우선 대상으로 본다.
+- canvas 기반 drag, vertex 이동, 지도 좌표 조작은 자동화가 불안정하면 수동 검증으로 전환할 수 있다.
+- 수동 전환 시에는 이유를 `자동화 한계`로 명시하고, 어떤 관측 포인트를 사람 손으로 확인했는지 남긴다.
+
+## 7. 인증·세션 기준
+
+- 인증 장애는 기능 결함과 분리해 기록한다.
+- 로컬 브라우저 검증이 인증 때문에 막히면 `COMMON_DOCS_ROOT/작업내용/공통-로그인/001-de-공통-로그인-로컬임시로그인-검토계획.md`를 우선 참조한다.
+- 기능 문서에는 해당 기능이 요구하는 최소 권한, 로그인 여부, 세션 유지 시간, 재로그인 필요 조건만 요약한다.
+
+## 8. 기능 문서 배치 규칙
+
+### 8.1 설계 문서
+
+- 도구 상태 전이표
+- 지도 상호작용 관측 포인트
+- 자동검증 가능 범위와 수동 검증 경계
+
+### 8.2 작업카드
+
+- 브라우저 검증 선행조건
+- 테스트 데이터와 샘플 진입 조건
+- 인증 차단 시 대체 경로
+
+### 8.3 통합 구현 기록
+
+- 현재 자동화 차단 요인
+- 하네스 친화화 부채
+- 관측 가능성 확보를 위해 추가된 상태/메시지/표식
+
+### 8.4 통합 검증 계획
+
+- 관측 포인트 표
+- 자동검증 항목과 수동검증 항목 구분
+- 차단 사유 분류 기준
+
+### 8.5 통합 검증 결과
+
+- 실제 관측 증적 요약
+- 차단 사유 분류
+- 자동화 실패와 기능 실패의 구분 결과
+
+## 9. 차단 사유 분류
+
+- `기능 결함`: 화면 동작, 상태 전이, payload, 응답 처리 자체가 기대와 다름
+- `인증 차단`: 로그인, 토큰, 권한 부족으로 기능 진입 불가
+- `환경 차단`: 서버 미기동, 잘못된 env, CORS, 프록시, 네트워크 장애
+- `데이터 차단`: 테스트 데이터, 레이어 메타, 객체 샘플 부족
+- `자동화 한계`: 브라우저 자동화 도구로 canvas drag, vertex 조작이 안정적으로 재현되지 않음
+
+## 10. 금지 사항
+
+- 같은 주제라고 해서 `브라우저자동검증기준.md`, `인증검증기준.md`, `상태머신.md`를 기능마다 별도 생성하지 않는다.
+- 관측 포인트 없이 `수동 확인 필요`만 적고 끝내지 않는다.
+- 인증 실패, 환경 실패, 자동화 한계를 모두 기능 결함으로 뭉뚱그려 기록하지 않는다.
diff --git a/apps/sn/docs/작업검증/SFR-010-010-지반침하정보/001-qa-SFR-010-010-지반침하정보-통합검증계획.md b/apps/sn/docs/작업검증/SFR-010-010-지반침하정보/001-qa-SFR-010-010-지반침하정보-통합검증계획.md
new file mode 100644
index 000000000..c40a4b210
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-010-010-지반침하정보/001-qa-SFR-010-010-지반침하정보-통합검증계획.md
@@ -0,0 +1,142 @@
+# SFR-010-010 지반침하정보 통합 검증 계획
+
+## 1. 문서 목적
+
+- `SFR-010-010 지반침하정보`의 검증 계획을 기능당 1개 문서로 누적 관리한다.
+- 이번 턴은 설계 단계이므로 구현 전 검증 시나리오와 차단 조건을 먼저 기록한다.
+- 승인 후 구현이 시작되면 이 문서에 라운드별 검증 계획을 계속 추가한다.
+
+## 2. 검증 기준 요약
+
+- 레이어 트리에서 `지반침하정보` 체크/해제가 동작해야 한다.
+- 목록 아이콘 클릭 시 지반침하 목록 팝업이 열려야 한다.
+- 목록 조회조건 검증이 동작해야 한다.
+  - 날짜 누락 차단
+  - `2016-01-01` 이전 날짜 차단
+- 목록 행 클릭 또는 지도 포인트 클릭 시 우측 상세 패널이 열려야 한다.
+- 반경 적용 시 지도 원과 반경 내 관로 목록이 함께 갱신돼야 한다.
+- 좌표 없음/좌표 변환 실패/반경 내 관로 없음 케이스가 서로 다른 안내로 분기돼야 한다.
+- 관리자만 동기화 버튼과 관련 운영 정보를 볼 수 있어야 한다.
+
+## 3. 라운드별 검증 계획
+
+### 3.1 설계 단계 사전 계획
+
+- FE 화면 구조 검증
+  - 레이어 트리 행 구성
+  - 반경 패널 위치
+  - 목록 팝업 열림 방식
+  - 우측 상세 패널 레이아웃
+- BE 계약 검증
+  - geometry/list/detail/nearby/sync/download endpoint 일치 여부
+  - 원천 부재 필드 nullable 처리 여부
+  - 관리자 권한 분리 여부
+- DB 영향 검증
+  - IL 원천 조회
+  - 반경 내 관로 조회 대상
+  - 좌표 캐시 영속화 필요 여부
+
+### 3.2 구현 후 예정 검증
+
+- 지반침하 레이어 체크/해제 시 지도 포인트 표출 여부
+- 목록 팝업 조회 / 결과 없음 / 다운로드 검증
+- 목록 행 클릭 후 지도 중심 이동과 상세 패널 오픈
+- 지도 포인트 클릭 후 상세 패널 오픈
+- 반경 값 변경 후 재조회
+- 좌표 없는 사고건 상세 표시
+- 관리자 동기화 성공/실패 검증
+
+### 3.3 2026-06-26 레이어 연도범위 설정 전환 검증 계획
+
+- 레이어 트리 검증
+  - `지반침하정보` 루트만 표시되고 `2026년`, `전체` 자식 노드가 표시되지 않는지 확인한다.
+  - 루트 체크/해제만으로 지도 포인트 레이어가 on/off 되는지 확인한다.
+- 선택 레이어 설정 검증
+  - `지반침하정보` 체크 시 하단 `선택 레이어 설정`에 반경 입력과 함께 `시작년도`, `종료년도`가 표시되는지 확인한다.
+  - 현재 연도 2026 기준 최초값이 `2025`, `2026`인지 확인한다.
+  - 적용 시 `/api/v1/sinkholes` 요청에 `startYmd=20250101`, `endYmd=20261231`이 포함되는지 확인한다.
+  - 시작년도가 종료년도보다 큰 경우, 2016년 이전 입력, 4자리 미만 입력을 차단하는지 확인한다.
+- 기존 기능 회귀 검증
+  - 반경 입력/적용, 우측 상세 패널, 반경 내 관로 조회가 기존처럼 동작하는지 확인한다.
+  - 목록 팝업 오픈 시 설정패널 연도 범위가 초기 조회조건으로 전달되는지 확인한다.
+  - 팝업 조회 후 지도 동기화와 팝업 닫힘 후 복귀 기준이 문서화된 정책과 일치하는지 확인한다.
+- DB 기준정보 검증
+  - `tb_sn_lyr_stng`에서 `지반침하정보` 루트는 유지되고 `2026년`, `전체` 자식 행이 삭제 또는 비활성화됐는지 확인한다.
+
+## 4. 브라우저 검증 선행조건
+
+- `/map` 진입 가능한 로그인 상태
+- FE dev 서버와 BE API 동시 기동
+- IL 원천 데이터와 관로 데이터 접근 가능
+- 관리자/일반 사용자 계정 각각 1개 이상
+
+## 5. 차단 사유 분류 기준
+
+- `기능 결함`
+  - 화면 상태 전이 또는 API 응답 처리 오류
+- `인증 차단`
+  - 로그인/권한 부족
+- `환경 차단`
+  - 서버 미기동, 프록시, 네트워크 문제
+- `데이터 차단`
+  - 원천 데이터 또는 샘플 사고건 부족
+- `계약 미확정`
+  - 원천 부재 필드 처리, 캐시 정책, 팝업 방식 미확정
+
+## 6. 현재 보류 메모
+
+- 이번 턴은 설계 단계이므로 실제 브라우저/API 실행 검증은 수행하지 않는다.
+- 구현 승인 전에는 이 문서의 시나리오와 설계 문서의 계약 일치 여부만 점검 대상으로 둔다.
+
+### 3.4 2026-06-26 레이어 연도범위 설정 전환 구현 검증 계획
+
+- 지반침하정보 레이어 트리에 `2026년`, `전체` 자식 노드가 표시되지 않고 루트 레이어만 on/off 되는지 확인한다.
+- 선택 레이어 설정 패널에 시작년도/종료년도 입력이 표시되고 기본값이 현재년도 기준 최근 1년인지 확인한다.
+- 연도 범위 적용 후 지도 조회 요청의 `startYmd/endYmd`가 시작년도 `0101`, 종료년도 `1231`로 변환되는지 확인한다.
+- 목록 팝업을 열었을 때 현재 지도 연도 범위가 초기 조회조건으로 전달되는지 확인한다.
+- 잘못된 연도 입력(4자리 미만, 시작년도 > 종료년도, 2016년 이전, 현재년도 초과)이 차단되는지 확인한다.
+### 3.5 2026-07-13 우측 상세 탭 유지보수 검증 계획
+
+- 지반침하 A/B를 열었을 때 사고번호별 탭 2개가 유지되는지 확인한다.
+- 지반침하에서 관로 1/2를 연속 선택해도 관로 탭은 1개이며 마지막 관리번호와 상세로 교체되는지 확인한다.
+- 관로 표시명 옆의 소형 `←`가 직전 부모 지반침하로 이동하고 지도 관로 포커스와 반경 표시가 함께 복원되는지 확인한다.
+- 지도에서 직접 선택한 관로에는 `←`가 표시되지 않는지 확인한다.
+- 처리시설/처리구역 탭에 실제 시설명/구역명과 유형별 색상이 표시되는지 확인한다.
+- 부모 지반침하를 닫으면 관로의 부모 링크가 사라지고, 최대 5개 자동 정리에서는 활성 관로의 부모가 보호되는지 확인한다.
+- 자동 검증은 `diff --check`, TypeScript, Next build로 수행하고, 화면 상호작용은 로그인 가능한 `/map` 통합 환경에서 수동 수행한다.
+
+### 3.6 2026-07-14 지도 UX 현행 유지보수 검증 계획
+
+- 반경이 다른 사고를 각각 선택해 지도 라벨 `반경 {값}m`와 상세 패널 값이 일치하는지 확인한다.
+- 새 사고 선택, 탭 닫기, 빈 지도 클릭, 레이어 해제 시 반경 원·라벨·중심점이 함께 제거되는지 확인한다.
+- 지반침하 루트에 기존 파란 심볼이 보이고 다른 앱/서비스의 공통 트리 노출은 바뀌지 않는지 확인한다.
+- 빈 지도 클릭은 현재 선택 지반침하와 종속 관로 강조만 해제하고 다른 지반침하·처리시설·처리구역·GIS 편집 탭은 유지하는지 확인한다.
+- 다른 피처 클릭과 GIS 편집 핸들/중간점/미리보기 클릭이 빈 영역 해제로 오인되지 않는지 확인한다.
+- 비활성 지반침하를 정리할 때 현재 활성 탭이 바뀌지 않는지 확인한다.
+- 지반침하발생현황 그리드 첫 열에 사고번호가 표시되고 화면 NO 열은 없으며 행 선택·페이징·정렬이 회귀하지 않는지 확인한다.
+- 정적 검사는 변경 파일 구문/타입, `git diff --check`, Next build로 수행하고 상호작용은 로그인 가능한 `/map`에서 수동 확인한다.
+- BE는 기존 목록·상세·반경 응답의 `acdntNo`, `radiusMeters` 유지 여부만 회귀 확인한다.
+
+### 3.7 2026-07-14 빈 지도 클릭 선택 해제 수동 검증 절차
+
+1. 로그인 후 `/map`에서 지반침하정보 레이어를 켠다.
+2. 목록이 아니라 지도 위 지반침하 포인트를 직접 선택하고 우측 상세 탭, 반경 원, `반경 {값}m` 라벨이 표시되는지 확인한다.
+3. 다른 피처·지도 컨트롤·GIS 편집 핸들이 없는 빈 지도 영역을 클릭한다.
+4. 선택한 지반침하 상세 탭 또는 현재 선택 상태, 반경 원·라벨·중심점, 종속 관로 강조가 함께 해제되는지 확인한다. 기본 지반침하 레이어의 포인트는 남아 있어야 한다.
+5. 다른 업무 탭을 열어 둔 상태에서 반복해 다른 탭은 유지되고 활성 탭이 정상적으로 복귀하는지 확인한다.
+6. GIS 편집 모드에서는 빈 영역을 클릭해도 지반침하 선택 해제가 오동작하지 않는지 확인한다.
+7. 해제 후 다른 지반침하 포인트를 다시 선택해 상세와 반경 표시가 정상적으로 열리는지 확인한다.
+
+- 이 절차는 지도 포인트 선택 후 해제를 검증한다. 목록 행 선택만 한 상태는 지도 선택 모듈의 빈 선택 이벤트 대상이 아니므로 별도 시나리오로 구분한다.
+
+### 3.8 2026-07-15 관로 탭 진입 경로 분리 검증 계획
+
+1. 지반침하와 무관한 지도 관로 A, B를 차례로 직접 선택해 관로 탭 2개가 각각 유지되는지 확인한다.
+2. 같은 일반 관로를 다시 선택하면 중복 탭을 만들지 않고 기존 탭이 활성화되는지 확인한다.
+3. 지반침하 상세에서 반경 내 관로 A, B를 차례로 선택해 부모 화살표가 있는 관로 탭 1개의 표시명과 상세만 B로 교체되는지 확인한다.
+4. 화살표를 클릭하면 직전 부모 지반침하 탭으로 복귀하는지 확인한다.
+5. 일반 관로 탭을 활성화해도 비활성 지반침하 연계 관로 탭의 화살표가 계속 표시되는지 확인한다.
+6. 지도에서 직접 선택한 일반 관로 탭에는 화살표가 표시되지 않는지 확인한다.
+7. `지반침하 + 연계 관로 + 일반 관로 3개` 상태에서 새 일반 관로를 열면 가장 오래된 부모 지반침하와 연계 관로가 함께 제거되고 일반 관로 4개가 남는지 확인한다.
+8. 연계 관로 탭만 먼저 FIFO 또는 수동으로 제거할 때 부모 지반침하 탭은 유지되는지 확인한다.
+9. 정적 검사는 TSX 구문 진단과 `git diff --check`로 수행하고, 상호작용은 로그인 가능한 `/map`에서 수동 확인한다.
diff --git a/apps/sn/docs/작업검증/SFR-010-010-지반침하정보/002-qa-SFR-010-010-지반침하정보-통합검증결과.md b/apps/sn/docs/작업검증/SFR-010-010-지반침하정보/002-qa-SFR-010-010-지반침하정보-통합검증결과.md
new file mode 100644
index 000000000..5ddd15323
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-010-010-지반침하정보/002-qa-SFR-010-010-지반침하정보-통합검증결과.md
@@ -0,0 +1,335 @@
+# SFR-010-010 지반침하정보 통합 검증 결과
+
+## 1. 문서 목적
+
+- `SFR-010-010 지반침하정보`의 검증 결과를 기능당 1개 문서로 누적 관리한다.
+- 이번 턴은 설계 단계이므로 실행 결과 대신 사전 점검 결과와 미실행 사유를 기록한다.
+- 승인 후 구현과 실행 검증이 시작되면 이 문서에 라운드별 결과를 누적한다.
+
+## 2. 현재 수행 결과
+
+### 2.1 설계 자료 점검
+
+- 요구사항명세서, 시나리오, HTML, PNG를 읽고 화면 흐름과 API 초안을 정리했다.
+- 현재 백엔드 작업트리에서 아래 선반영 범위를 확인했다.
+  - `GET /api/v1/sinkholes/geometry`
+  - IL datasource 분리
+  - 주소 기반 지오코딩 서비스
+- 현재 프론트 코드에서는 `지반침하정보` 실구현이 없고, 실제 구현은 승인 후 착수해야 함을 확인했다.
+
+### 2.2 확인된 설계 리스크
+
+- 화면에 필요한 상세 필드 일부가 현재 원천 테이블에 없다.
+- 좌표 캐시가 현재 메모리 캐시라 최근 동기화 일시/상태 유지 요구를 그대로 만족하지 못한다.
+- 목록 팝업을 별도 popup 창으로 열지, `/map` 내부 모달로 둘지 구현 기준이 아직 확정되지 않았다.
+
+### 2.3 2026-06-05 런타임 원인 확인
+
+- 프론트에서 `GET /api/v1/sinkholes/geometry` 호출 시 500이 재현됐다.
+- 같은 시점에 로컬 `GET /api/v1/sinkholes`, `GET /api/v1/sinkholes/{acdntNo}`를 직접 확인한 결과 `geocodeErrorMessage`에 아래 예외가 내려왔다.
+  - `Unrecognized field "adresTy" ... SinkholeNgiiResponse`
+- 따라서 이번 런타임 장애의 1차 원인은 프론트 fetch 자체가 아니라 `reuse-service` 지오코딩 응답 필드 확장을 백엔드가 무시하지 못한 점으로 판정했다.
+- `./gradlew compileJava --no-daemon`는 시도했으나 로컬 점유 중인 `spring-configuration-metadata.json` 때문에 `Failed to clean up stale outputs`로 중단돼, 재기동 후 최종 확인이 필요하다.
+
+### 2.4 2026-06-09 연도/전체 노드 코드 경로 확인
+
+- 현재 프론트 지반침하 연도 필터 로직을 다시 확인한 결과, `tb_sn_lyr_stng`에서 내려오는 `2026년`, `전체` 자식 노드는 `sinkholeYear` 값이 없어 기존 코드가 연도 토큰을 읽지 못하고 있었다.
+- 그래서 화면에 연도 노드가 보여도 초기 표출과 팝업 필터 동기화에서는 최근 3개월 기본 조건이 남아 있을 수 있는 상태로 판정했다.
+- 이번 수정으로 `sinkholeYear`가 없더라도 노드 텍스트 `2026년`, `전체`를 각각 `2026`, `ALL`로 해석하도록 보강했다.
+- 레이어 설정 초기 로딩도 지반침하 트리 보정 유틸을 실제로 거치도록 연결해, DB 자식 노드 유무와 상관없이 같은 정리 경로를 타게 했다.
+
+### 2.5 2026-06-09 발생기간 조회 시작일 2016년 확장
+
+- 현재 팝업은 빈 조회조건일 때 최근 3개월을 기본값으로 쓰고 있어, 사용자가 장기 이력을 보려 해도 시작일을 다시 넓혀야 하는 상태였다.
+- 이번 수정으로 프론트 기본 조회조건을 `2016-01-01 ~ 오늘`로 바꾸고, 날짜 입력 `min`도 `2016-01-01`로 고정했다.
+- 백엔드도 같은 날 `최대 1년` 검증을 제거하고 `2016-01-01` 이전 날짜만 차단하도록 바꿨다.
+
+### 2.6 2026-06-09 다운로드 전체 결과 기준 코드 경로 확인
+
+- 현재 지반침하 다운로드는 화면에 보이는 현재 페이지 `rows`만 엑셀로 내려가고 있어, 페이지네이션 이후 데이터는 누락되는 상태였다.
+- 이번 수정으로 다운로드 시 현재 조회조건을 유지한 채 `/api/v1/sinkholes`를 최대 2000건 단위로 재호출해 전체 결과를 합친 뒤 엑셀을 생성하도록 변경했다.
+- 아직 브라우저에서 2페이지 이상 결과를 실제로 내려받아 행 수를 대조하는 수동 검증은 수행하지 못했다.
+
+### 2.7 2026-06-09 다운로드 병목 재검토
+
+- 백엔드 목록 API는 각 행마다 `SinkholeCoordinateResolver.resolve()`를 호출하고, 원천 TM 좌표가 없으면 외부 지오코딩을 타므로 대량 다운로드에서 이 경로가 지연의 핵심 병목이 될 수 있다고 판단했다.
+- 그래서 동일 주소의 실패 지오코딩도 30분 단기 캐시에 저장하고, 프론트 다운로드 배치도 2000건으로 올려 1600건 규모에서는 목록 API 1회 호출에 가깝게 줄였다.
+- 아직 실제 운영/개발 데이터 1600건 조건에서 전후 다운로드 시간을 계측하지는 못했다.
+
+### 2.8 2026-06-09 좌표 실패 건 상세 fallback 코드 경로 확인
+
+- 좌표 실패 건 상세 클릭 시 `GET /api/v1/sinkholes/{acdntNo}`가 generic 500으로 실패하는 사례가 확인됐다.
+- 이번 수정으로 목록 행 클릭 경로에서는 상세 API 실패 시 목록 row 데이터를 fallback 상세로 사용하고, 인접관로 조회 실패도 별도 warning으로만 남기도록 바꿨다.
+- 추가로 row 자체가 이미 좌표 실패 상태이고 x/y도 없으면, 상세 API를 아예 생략하고 즉시 fallback 상세 패널을 열도록 바꿨다.
+- 아직 실제 브라우저에서 실패 좌표 row 클릭 후 우측 패널이 fallback 데이터로 열리는지 재검증은 수행하지 못했다.
+
+### 2.9 2026-06-09 목록/다운로드 조회조건 변경 코드 경로 확인
+
+- 기본 발생기간은 `2016-01-01` 고정이 아니라 다시 `현재 기준 최근 1년`으로 되돌렸다.
+- 목록 조회영역에 `좌표보정상태` 조건을 추가했고, 목록 API query string도 해당 값을 함께 보내도록 바꿨다.
+- 다운로드는 `includeCoordStatus=false`를 붙여 `좌표보정상태` 열 없이 현재 조회조건 전체 결과를 다시 받아 엑셀을 만들도록 변경했다.
+
+### 2.10 2026-06-09 조회옵션/헤더범위 마감 확인
+
+- `좌표보정상태` 옵션에서 `주소없음`은 제거되고 `전체 / 성공 / 실패`만 남는 코드 경로를 확인했다.
+- 지반침하 다운로드는 `headerRange=A1:I1`로 수정돼 첫 데이터 행이 헤더 스타일을 먹지 않도록 정리된 것을 확인했다.
+
+### 2.11 2026-06-09 팝업 활성 중 필터 우선순위 코드 경로 확인
+
+- 평소 지도 레이어 조회는 트리 연도 체크 상태를 기준으로 하고, 팝업 sync 메시지를 받은 이후에만 팝업 필터가 우선 적용되도록 `isSinkholePopupFilterActive` 분기가 추가된 것을 확인했다.
+- 팝업 close watcher와 레이어 해제 경로에서도 popup-active 상태를 해제하도록 맞춰, 팝업 종료 후 다시 트리 기준으로 복귀하는 코드 경로를 확인했다.
+
+### 2.12 2026-06-09 기능 테스트 최종 확인
+
+- 사용자 확인 기준으로 아래 주요 흐름이 기대대로 동작함을 최종 확인했다.
+  - 지반침하 트리 기본 체크 상태 유지
+  - `2026년` / `전체` 상위조건과 팝업 조회조건의 결합
+  - 팝업 `목록보기` 오픈 시 지도 즉시 동기화
+  - 팝업 닫힘 시 트리 기준 복귀
+  - 팝업 열린 상태에서 레이어 재체크 시 조건 유지
+  - 다운로드 첫 데이터 행 헤더 스타일 오염 제거
+- 현재 대화 범위에서는 기능 테스트 성공으로 판정한다.
+
+### 2.13 2026-06-11 목록 총 건수 헤더 표시 확인
+
+- 검증 대상
+  - `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx`
+- 확인 내용
+  - 지반침하 팝업 목록 테이블이 `total` 상태값을 이미 보유하고 있는지 코드 경로를 다시 확인했다.
+  - 테이블 헤더를 `지반침하 조회 결과 총 {total.toLocaleString()}건`으로 지정하고 `isHideCount={true}`를 적용해, 노후관로와 같은 문구 형식으로 총 건수가 노출되도록 보강했다.
+  - 사용자 확인 결과 반경이 정상 적용되었고, 요구한 총 건수 문구가 지반침하 팝업 상단에 표시되는 것을 확인했다.
+- 검증 결과
+  - 사용자 확인 완료
+  - 추가 브라우저 재현 캡처와 빌드 재실행은 이번 라운드에서 수행하지 않음
+
+### 2.14 2026-06-25 반경 내 관로정보 경과년도 컬럼 및 요약문구 코드 검증
+
+- 검증 대상
+  - `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/sinkholeTypes.ts`
+  - `BE_REPO_ROOT/src/main/java/iipbs/ms/domain/SinkholeNearbyPipeRepository.java`
+  - `BE_REPO_ROOT/src/main/java/iipbs/sewerage/api/sinkhole/dto/SinkholeNearbyPipeRowDto.java`
+- 확인 내용
+  - 백엔드 `nearbyPipes` row DTO에 `elapsedYears`가 추가되고 native query 결과 매핑 인덱스가 함께 조정됐는지 확인했다.
+  - 프론트 반경 내 관로정보 표에서 `용도` 컬럼을 제외하고 `경과년도` 컬럼과 제목 아래 요약문구(`건수`, `평균경과`, `최장경과` 값 파란색 볼드)가 추가되는지 코드 경로를 확인했다.
+  - `git diff --check`를 FE/BE 변경 파일 기준으로 실행해 공백 오류가 없음을 확인했다.
+  - 백엔드 `./gradlew.bat compileJava` 통과를 확인했다.
+- 미확인 내용
+  - FE `tsc --noEmit`은 로컬 `tsc` 명령 부재로 실행하지 못했다.
+  - 실제 브라우저에서 4개 컬럼과 요약문구가 잘리지 않는지, API 응답 `elapsedYears` 값으로 평균경과/최장경과가 계산되는지는 개발서버 수동 검증이 필요하다.
+
+### 2.15 2026-06-25 반경 조회 회귀 방지 확인
+- `map/page.tsx`에 추가했던 반경 조회 fallback 변경을 제거하고, 기존 조회 흐름으로 원복했음을 확인했다.
+- FE 컬럼 추가와 타입 추가, BE 응답 필드 추가만 남긴 상태에서 `git diff --check`를 다시 수행한다.
+- 실제 브라우저에서 사고번호 `20260026`처럼 기존에 24건이 나오던 케이스가 그대로 유지되는지 재확인이 필요하다.
+
+### 2.16 2026-06-26 레이어 연도범위 설정 전환 사전 분석 결과
+
+- 이번 턴은 구현 전 분석 단계이므로 코드 수정, 브라우저 실행, API 호출 검증은 수행하지 않았다.
+- 기존 문서와 코드 경로를 대조한 결과, 현재 지반침하 레이어 조회는 `2026년`/`전체` 자식 노드와 `applySinkholeYearFilters`에 의존하는 구조가 남아 있음을 확인했다.
+- `SinkholeLayerSettingPanel`에는 현재 반경 입력만 있고 시작/종료년도 입력이 없어, 다음 구현에서 패널 props와 상태를 확장해야 한다.
+- BE `SinkholeListSearchDto`와 `SinkholeQueryService`는 `startYmd`, `endYmd`, 최소일 검증을 이미 제공하므로 신규 BE 계약은 필요하지 않은 것으로 판정했다.
+- `COMMON_DOCS_ROOT/DB작업.sql`에는 `2026년`, `전체` 자식 레이어 생성/아이콘 보정 DML이 남아 있어, 다음 구현에서 기준 데이터 삭제/비활성화 DML을 함께 정리해야 한다.
+- 다음 검증은 구현 후 `지반침하정보` 루트 on/off, 설정패널 연도 범위 API 파라미터, 팝업 초기조건 동기화, 기존 반경/상세 회귀 순서로 수행한다.
+
+
+### 2.17 2026-06-26 레이어 연도범위 설정 전환 구현 검증 결과
+
+- 코드 검색 결과 `2026년`/`전체` 합성 연도 노드 의존 심볼(`buildSinkholeYearNodes`, `isSinkholeYearNode`, `applySinkholeYearFilters`)은 지도 화면 코드에서 제거됐다.
+- 변경 TS/TSX 3개 파일(`page.tsx`, `SinkholeLayerSettingPanel.tsx`, `sinkholeTypes.ts`)은 로컬 TypeScript 파서 기준 diagnostics 0건을 확인했다.
+- 기존 dev 서버에서 `http://localhost:3002/map` 요청이 200으로 응답해 페이지 컴파일 진입이 가능함을 확인했다.
+- `git diff --check`는 FE/공통 변경 파일 기준 공백 오류 없음으로 통과했다. Git 줄바꿈 정책 경고는 일부 파일에서만 출력됐다.
+- `next lint`와 `tsc --noEmit`는 현재 프로젝트 도구 설정 문제로 완료하지 못했다. 실제 로그인 화면에서의 레이어 트리/Network query string 검증은 후속 수동 검증으로 남긴다.
+
+
+
+### 2.18 2026-06-26 상세 fallback 및 설정 UI 보정 검증 결과
+
+- `page.tsx`와 `SinkholeLayerSettingPanel.tsx` 변경분을 TypeScript 파서로 확인했고 diagnostics 0건이었다.
+- 기존 dev 서버에서 `http://localhost:3002/map` 요청이 200으로 응답했다.
+- `git diff --check`는 변경 FE 파일 기준 공백 오류 없이 통과했다. Git 줄바꿈 정책상 LF→CRLF 경고만 출력됐다.
+- 상세 API 500 상황에서 fallback이 실제 화면에서 패널을 유지하는지, 반경 적용 후 Network 요청이 좌표 기반으로 나가는지는 로그인 세션이 있는 브라우저에서 후속 수동 확인이 필요하다.
+
+
+### 2.19 2026-06-26 우측 상세 패널 공통 탭 구현 검증 결과
+
+- 검증 대상
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- 확인 내용
+  - `RightPanelTab`, `RightPanelBookmarkTabs`, `rightPanelTabs`, `activeRightPanelTabId`가 추가되어 오른쪽 상세 패널의 열린 상세를 탭으로 관리하는 코드 경로를 확인했다.
+  - 탭이 2개 이상일 때만 책갈피 UI가 렌더링되고, 탭 클릭 시 활성 payload를 기준으로 `FeatureClickEventPopup`, `SinkholeDetailPanel`, `GisEditPipeSessionPopup` 중 해당 상세를 렌더링하는 구조를 확인했다.
+  - 지반침하 반경 내 관로 클릭 경로에서 `restoreSinkholeDetailOnCloseRef` 기반 복귀 대신 탭 상태로 전환할 수 있도록 플래그 의존을 제거했다.
+  - 변경 파일 `page.tsx`는 로컬 TypeScript `transpileModule` 파서 기준 diagnostics 0건이었다.
+  - `git -C frontend diff --check -- apps/sn/app/(map-layout)/map/page.tsx`는 공백 오류 없이 통과했다. Git 줄바꿈 정책상 LF→CRLF 경고만 출력됐다.
+  - 기존 dev 서버 `http://localhost:3002/map` 요청이 200으로 응답했다.
+- 미확인 내용
+  - 로그인 세션이 있는 브라우저에서 지반침하 상세 → 반경 내 관로 ID 클릭 → 책갈피 탭 2개 표시 → 탭 전환 → 현재 탭 닫기 흐름은 수동 확인이 필요하다.
+  - `pnpm --filter sn exec tsc --noEmit`는 기존 `tsconfig.json`의 `ignoreDeprecations` 값 오류와 `tsc` 실행 경로 문제로 변경 코드 타입 검증까지 도달하지 못했다.
+### 2.20 2026-06-26 우측 상세 패널 탭 식별값 보강 검증 결과
+
+- 검증 대상
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- 확인 내용
+  - 지반침하 탭은 `SinkholeDetail.acdntNo` 또는 feature 사고번호를 `subTitle`로 저장해 제목 아래에 표시하는 코드 경로를 확인했다.
+  - 하수관로 탭은 `fclt_mng_no`, `fcltMngNo`, `pipeId`, `fid` 순서로 관리번호 후보를 읽어 제목 아래에 표시하는 코드 경로를 확인했다.
+  - 보조 식별값이 없으면 제목만 렌더링되어 다른 상세 탭의 표시가 깨지지 않는 구조를 확인했다.
+  - 탭 폭과 최소 높이를 조정해 숫자 표시 공간을 확보했다.
+- 미확인 내용
+  - 로그인 세션이 있는 브라우저에서 지반침하/하수관로 탭의 실제 표시 폭과 줄바꿈은 수동 확인이 필요하다.
+### 2.21 2026-06-29 우측 상세 패널 탭 최대 개수 제한 검증 결과
+
+- 검증 대상
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- 확인 내용
+  - `RIGHT_PANEL_TAB_LIMIT=5` 기준으로 우측 상세 패널 탭 상태가 5개를 초과하지 않도록 제한하는 코드 경로를 확인했다.
+  - 5개가 열린 상태에서 새 상세를 추가하면 새 탭과 현재 활성 탭을 보호하고, 오래 사용하지 않은 일반 상세 탭을 우선 제거하는 구조를 확인했다.
+  - 지반침하 탭은 기준 상세로 쓰일 가능성이 높아 일반 상세 탭보다 늦게 제거되고, GIS 편집 탭은 자동 제거 우선순위가 낮은 구조를 확인했다.
+  - 변경 파일 `page.tsx`는 로컬 TypeScript `transpileModule` 파서 기준 diagnostics 0건이었다.
+  - `git -C frontend diff --check -- apps/sn/app/(map-layout)/map/page.tsx`는 공백 오류 없이 통과했다. Git 줄바꿈 정책상 LF→CRLF 경고만 출력됐다.
+  - 기존 dev 서버 `http://localhost:3002/map` 요청이 200으로 응답했다.
+- 미확인 내용
+  - 로그인 세션이 있는 브라우저에서 6번째 상세 클릭 시 실제로 가장 오래된 일반 탭이 교체되는지는 수동 확인이 필요하다.
+### 2.22 2026-06-29 우측 상세 패널 탭 전환 지도 선택 동기화 검증 결과
+
+- 검증 대상
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- 확인 내용
+  - 탭 전환 함수가 활성 탭의 feature payload를 기준으로 지도 선택/강조 동기화 함수를 호출하는 코드 경로를 확인했다.
+  - 하수관로 탭 전환 시 기존 `SN_SINKHOLE_FOCUSED_PIPE_LAYER`를 비우고 해당 관로 feature를 다시 그린 뒤 선택 상태로 맞추는 구조를 확인했다.
+  - 지반침하 탭 전환 시 관로 강조 레이어를 지워 이전 관로 선택 표시가 남지 않도록 하는 구조를 확인했다.
+  - 반경 내 관로 ID 최초 클릭 경로도 같은 동기화 함수를 사용하도록 정리된 것을 확인했다.
+  - 변경 파일 `page.tsx`는 로컬 TypeScript `transpileModule` 파서 기준 diagnostics 0건이었다.
+  - `git -C frontend diff --check -- apps/sn/app/(map-layout)/map/page.tsx`는 공백 오류 없이 통과했다. Git 줄바꿈 정책상 LF→CRLF 경고만 출력됐다.
+  - 기존 dev 서버 `http://localhost:3002/map` 요청이 200으로 응답했다.
+- 미확인 내용
+  - 로그인 세션이 있는 브라우저에서 탭을 번갈아 클릭할 때 지도 관로 강조선이 실제로 따라 바뀌는지는 수동 확인이 필요하다.
+### 2.23 2026-06-29 지도 직접 선택 시 지반침하 관로 포커스 해제 검증 결과
+
+- 검증 대상
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- 확인 내용
+  - 일반 지도 피처 선택 함수 진입 시 지반침하 반경 내 관로 ID 클릭으로 만든 `SN_SINKHOLE_FOCUSED_PIPE_LAYER`를 먼저 정리하는 코드 경로를 확인했다.
+  - 반경 내 관로 ID 클릭과 책갈피 탭 전환은 기존 동기화 함수를 통해 필요한 관로 포커스를 다시 그리므로, 직접 지도 선택과 탭 전환의 역할이 분리되는 구조를 확인했다.
+  - 변경 파일 `page.tsx`는 로컬 TypeScript `transpileModule` 파서 기준 diagnostics 0건이었다.
+  - `git -C frontend diff --check -- apps/sn/app/(map-layout)/map/page.tsx`는 공백 오류 없이 통과했다. Git 줄바꿈 정책상 LF→CRLF 경고만 출력됐다.
+  - 기존 dev 서버 `http://localhost:3002/map` 요청이 200으로 응답했다.
+- 미확인 내용
+  - 로그인 세션이 있는 브라우저에서 파란 포커스 관로가 표시된 상태로 주변 관로를 직접 클릭했을 때 파란 선이 실제로 사라지는지는 수동 확인이 필요하다.
+## 3. 미실행 항목
+
+- FE 브라우저 검증
+- BE API 호출 검증
+- 반경 내 관로 거리 계산 검증
+- 관리자 권한 분기 검증
+- 다운로드 파일 검증
+- FE 빌드 검증
+- BE compile/test 최종 검증
+
+미실행 사유:
+
+- 작성자 승인 전 구현 금지 지시
+- 이번 턴 범위가 설계 및 문서 초안 작성까지로 제한됨
+- 이번 유지보수 라운드에서는 코드 경로 점검과 최소 수정까지만 수행했고, 개발 서버 실행 여부를 확인하지 못해 FE 빌드를 별도로 돌리지 않았다.
+
+## 4. 현재 상태 판정
+
+- 설계 검토: 완료
+- 코드 구현: 완료
+- 기능 테스트: 성공
+- 브라우저/API 정밀 재검증: 일부 미실행
+
+## 5. 후속 실행 조건
+
+- 작성자 구현 승인
+- FE/BE 코드 반영 완료
+- 로그인 가능한 FE/BE 실행 환경 준비
+- 관리자/일반 사용자 테스트 계정 준비
+
+### 2.24 2026-07-02 잔여 159건 좌표 실패 원인 분류 결과
+
+- 원천 좌표 null 사고 `159건`을 기준으로 실제 JIS와 기존 주소기반 geocoder를 다시 대조했다.
+- JIS 확인 결과
+  - 최신 성공 예시 `20260040`은 `selectInfo.do` 성공 응답과 `mapMainAdmin.do`의 `poly_lonlat=POINT(...)`를 확인했다.
+  - 대표 구 사고번호 `20200232`, `20200018`, `20200093`, `20200068`, `20200063`는 `selectInfo.do` 응답이 `{"result":"fail","reason":null}`였다.
+- 따라서 JIS 브라우저 콘솔의 `mapNew.js ... clone` 오류는 잔여 159건 실패의 공통 원인이 아니라, 성공 케이스에서도 발생 가능한 별도 프론트 스크립트 오류로 분리했다.
+- 주소 기반 geocoder 재측정 결과
+  - 총 159건 중 `49건 성공`, `110건 실패`
+  - 실패 110건은 설명형/비정형 주소 비중이 높고, `위경도 값이 없는 반환값 수신`도 20건 있었다.
+- `정제주소안`으로 110건을 재시도했지만 `추가 성공 0건`이었다.
+- 현 시점 판정
+  - JIS 우선 구현은 최신 사고번호 대응에는 유효하다.
+  - 구 사고번호 공백을 줄이려면 주소 fallback을 함께 유지해야 한다.
+  - 남는 110건은 단순 주소 정제로 해결되지 않아 별도 데이터 보강 또는 수기 좌표 보정 대상으로 분류한다.
+### 2.25 2026-07-13 우측 상세 탭 유지보수 검증 결과
+
+- `git diff --check`: 통과.
+- TypeScript
+  - 기본 `tsc`는 기존 `ignoreDeprecations: "6.0"`과 TypeScript 5.9.3 불일치로 시작 단계에서 실패했다.
+  - `--ignoreDeprecations 5.0`으로 재실행해 변경된 `map/page.tsx` 신규 오류 0건을 확인했다.
+  - 전체 종료는 기존 공통 컴포넌트, floodHistory, `app/html/**`, 공통 chart 파일의 선행 오류 때문에 실패했다.
+- Next build
+  - optimized production compile 28.1초 성공.
+  - 정적 페이지 19개 생성 성공.
+  - standalone trace 복사에서 Windows symlink 권한 `EPERM`이 발생해 최종 exit code 1.
+- ESLint
+  - 파일 단위 실행 전 기존 `eslint.config.mjs` 로딩 TypeError가 발생해 미실행.
+- 브라우저
+  - 로컬 dev 서버는 6.2초에 Ready.
+  - `/map` 최초 컴파일이 1분 이상 완료되지 않아 브라우저 탐색과 실제 탭 클릭은 환경 차단.
+- 정적 코드 확인
+  - 관로 singleton ID, 부모 ID 저장/정리, 관로 표시명 옆 소형 뒤로가기 버튼, 유형별 색상 map, 괄호형 표시명 resolver가 구현된 것을 확인했다.
+  - BE API·DTO·DB 변경이 없음을 확인했다.
+- 판정
+  - 코드 구현 및 컴파일: 완료.
+  - 실브라우저 상태 전이: 후속 수동 검증 필요.
+
+### 2.26 2026-07-14 부모 복귀 화살표 및 처리구역 API 회귀 검증
+
+- `RightPanelBookmarkTabs`에서 화살표 조건이 `pipe && isActive && parentTab`으로 제한됐고 크기가 `h-6 w-6 text-sm`로 변경된 것을 확인했다.
+- 부모 지반침하 탭 활성화 시 관로 탭의 `isActive`가 false가 되어 화살표가 숨겨지는 상태 전이를 정적으로 확인했다.
+- 탭 최대 수는 5개이며 제거 후보 함수가 보호 ID와 `lastActiveAt` 및 탭 종류를 함께 사용하므로 엄격한 FIFO가 아님을 확인했다.
+- TypeScript compiler API로 `page.tsx`를 TSX 파싱한 결과 diagnostics 0건이었다.
+- 프론트 `git diff --check`는 통과했다.
+- 백엔드 `compileJava`는 성공했다.
+- 사용자 요청에 따라 서버와 브라우저는 실행하지 않았다.
+- 남은 수동 검증은 실행 중 통합 환경에서 관로→부모 지반침하 복귀 후 화살표 숨김, 처리구역 클릭 200 응답과 분석 표 표시를 확인하는 것이다.
+
+### 2.27 2026-07-14 지도 UX 유지보수 구현 확인 및 사용자 검증 대기
+
+- 구현 파일의 변경 diff에서 반경 라벨 피처, 트리 심볼 fallback/선택 prop, 빈 선택 결과 콜백, 목록 사고번호 첫 열을 정적으로 확인했다.
+- 공통 빈 선택 결과는 `GisSelect` 한 곳에서만 소비하며 콜백 미전달 화면은 기존처럼 아무 동작도 하지 않는 구조를 확인했다.
+- `pnpm --filter sn exec tsc --noEmit --pretty false --ignoreDeprecations 5.0`은 실행했으나 기존 common/floodHistory/html/chart 오류로 전체 성공하지 않았다.
+- 검사에서 함께 확인된 `page.tsx`의 GeoServer storage null 가능성은 같은 지반침하 관로 조회 흐름에서 방어 처리했다.
+- 개발 서버가 실행 중이어서 저장소 규칙에 따라 Next 및 `business_components` 빌드는 수행하지 않았다.
+- 사용자 요청에 따라 브라우저·API·화면 상호작용 검증은 수행하지 않았다.
+- 현재 판정은 `구현 완료 / 사용자 수동 검증 대기`다.
+- 사용자 확인 항목은 반경 라벨 값과 시인성, 트리 파란 심볼, 빈 지도 클릭 시 선택 해제와 다른 탭 보존, 목록 첫 열 사고번호다.
+
+### 2.28 2026-07-14 목록 NO 열 제거 및 수동 검증 이관
+
+- `SinkholePopupPage.tsx`의 `HEADLIST`에서 `acdntNo`가 첫 열이고 `rowNo/NO` 열이 없는 것을 정적으로 확인했다.
+- 내부 `rowNo` 생성과 다운로드 순번은 기존 호환을 위해 유지했다.
+- 지도 선택 해제의 구체적인 수동 절차와 기대 결과를 통합검증계획 3.7에 추가했다.
+- 브라우저·API·빌드는 사용자 요청에 따라 실행하지 않았으며 현재 판정은 `구현 완료 / 사용자 수동 검증 대기`다.
+
+### 2.29 2026-07-14 사용자 통합 검증 결과
+
+- 검증 주체: 사용자
+- 검증 환경: 실행 중인 통합 화면
+- 반경 표시 영역에 실제 반경 값이 정상 표시됨을 확인했다.
+- 지반침하 레이어 트리에 심볼이 정상 표시됨을 확인했다.
+- 지도에서 선택한 지반침하가 빈 지도 영역 클릭으로 정상 해제되고 관련 반경·강조 표시도 함께 정리됨을 확인했다.
+- 지반침하발생현황 목록 첫 열에 사고번호가 표시되고 화면 `NO` 열이 제거된 것을 확인했다.
+- 이번 유지보수 요구사항 전체가 성공했으므로 최종 판정은 `완료`다.
+
+### 2.30 2026-07-15 관로 탭 진입 경로 분리 정적 검증 결과
+
+- `buildRightPanelTab`에서 부모가 있는 관로만 `RIGHT_PANEL_SINKHOLE_PIPE_TAB_ID`를 사용하고 일반 관로는 피처 식별값 기반 ID를 사용하는 것을 확인했다.
+- 지도 직접 선택 시 `pipeParentTabIdRef.current = null`로 부모 연결을 해제하는 기존 경로를 확인했다.
+- 부모 탭이 있는 관로는 활성 여부와 무관하게 `←` 버튼을 렌더링하도록 변경된 것을 확인했다.
+- 자동 정리 후보가 탭 배열의 첫 항목을 선택해 유형·활성 상태와 관계없이 FIFO로 동작하는 것을 확인했다.
+- `removeRightPanelTabGroup`이 제거 대상 ID와 그 ID를 `parentTabId`로 가진 탭을 함께 제외해 부모 지반침하 제거 시 연계 관로도 사라지는 것을 확인했다.
+- 연계 관로 자체를 제거 대상으로 전달하면 부모 탭은 조건에 걸리지 않아 유지되는 단방향 종속 구조를 확인했다.
+- TypeScript compiler API의 `transpileModule`로 `page.tsx`를 TSX 파싱한 결과 error diagnostics 0건이었다.
+- 프론트 변경 파일 대상 `git diff --check`는 통과했다.
+- 로그인 세션이 필요한 실제 탭 누적·교체·복귀 상호작용은 수동 검증이 남아 있다.
diff --git a/apps/sn/docs/작업검증/SFR-011-002-관로분석/001-qa-SFR-011-002-관로분석-통합검증결과.md b/apps/sn/docs/작업검증/SFR-011-002-관로분석/001-qa-SFR-011-002-관로분석-통합검증결과.md
new file mode 100644
index 000000000..220ae751c
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-011-002-관로분석/001-qa-SFR-011-002-관로분석-통합검증결과.md
@@ -0,0 +1,27 @@
+# SFR-011-002 관로분석 FE 통합검증결과
+
+## 1. 검증 목적
+- 관로분석 프론트 변경이 오류 전달 구조를 깨지 않고 유지되는지 확인한다.
+
+## 2. 수행한 검증
+- 코드 리뷰로 `PipeAnalysisPopupPage`, `PipeAnalysisDetailPopupPage`, `getData`의 예외 흐름을 확인했다.
+- `pnpm --filter sn exec tsc --noEmit`를 실행했다.
+
+## 3. 검증 결과
+- `PipeAnalysisPopupPage.tsx`의 엑셀 다운로드 캐스팅 경고는 수정 후 해소했다.
+- 집계/상세 팝업은 이제 `Error.message`가 존재하면 공통 경고문 대신 해당 메시지를 노출한다.
+- 관로분석 집계 헤더의 `총 N건` 문구가 제거됐다.
+- 집계 팝업은 10개 단위 페이지 렌더링으로 바뀌어 한 화면에 그리는 행 수를 제한한다.
+- 전체 TypeScript 검증은 저장소 기존 오류로 실패했다.
+
+## 4. 기존 오류 메모
+- `app/(map-layout)/map/components/common/index.ts` 타입 불일치
+- `app/html/(with-base-layout)/layout.tsx` import 누락
+- `packages/common/business_components/src/ui/chart/*` implicit any
+
+## 5. 미수행 검증
+- 로컬 브라우저에서 실제 관로분석 팝업을 열어 세 분석구분을 재조회하는 수동 검증은 이번 턴에서 수행하지 못했다.
+
+## 6. 판단
+- 프론트 수정 범위 내에서 신규 타입 오류를 만들지는 않았다.
+- 실제 장애 해소 여부의 최종 판정은 백엔드 반영본과 함께 브라우저 재조회 확인이 필요하다.
diff --git a/apps/sn/docs/작업검증/SFR-011-007-통수위험분석/001-qa-SFR-011-007-통수위험분석-통합검증계획.md b/apps/sn/docs/작업검증/SFR-011-007-통수위험분석/001-qa-SFR-011-007-통수위험분석-통합검증계획.md
new file mode 100644
index 000000000..bf4692aba
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-011-007-통수위험분석/001-qa-SFR-011-007-통수위험분석-통합검증계획.md
@@ -0,0 +1,93 @@
+# SFR-011-007 통수위험분석 통합 검증 계획
+
+## 1. 문서 목적
+
+- `SFR-011-007 통수위험분석`의 FE 검증 계획을 기능당 1개 문서로 누적 관리한다.
+- 현재 문서는 FE-only 프로토타입 구현 완료 기준의 검증 범위와 후속 통합 검증 포인트를 정의한다.
+
+## 2. 검증 기준 요약
+
+- `통수위험` 아이콘으로 기능 진입 가능
+- 결과 조회 popup 열림/닫힘 동작
+- 날짜/시간 필수값 검증
+- 위험상태 필터 동작
+- 관로 1건, 2건, 3건 동적 컬럼 렌더링
+- 결과 행 선택 시 지도 강조 및 상세 popup 갱신
+- 예측강우 sample grid overlay 노출
+- 결과/설정 목록 페이지네이션 노출
+- 설정 현황 조회와 staged 설정 편집 진입
+- 유출관로 중복 선택 차단
+- 최소 1건, 최대 3건 저장 규칙
+- 저장 실패 시 staged 목록 유지
+
+## 3. 라운드별 검증 계획
+
+### 3.1 설계 승인 직후 FE-only 검증
+
+- popup 진입/전환/닫기
+- 조회조건 유효성
+- 결과 그리드 렌더링
+- 위험/정상 스타일 전환
+- 예측강우 sample overlay 가시성
+- 설정 현황 목록과 staged 유출관로 편집
+- 저장 payload preview
+- 상세정보 카드의 표 구조, 위치, 강조 규칙
+
+### 3.2 BE 연동 후 통합 검증
+
+- 실제 조회조건 전달
+- 실제 geometry와 격자 overlay 정합성
+- 설정 저장/재조회
+- 결과/설정 다운로드
+- 권한 범위 제어
+
+## 4. 현재 검증 범위
+
+### 4.1 진행 전제
+
+- FE-only 프로토타입 코드는 구현 완료 상태다.
+- 자동 브라우저 검증은 환경 제약으로 제한적이므로, 현재는 코드 점검과 사용자 피드백 기반 수동 검증 포인트를 우선 기록한다.
+
+### 4.2 자동 또는 반자동 관측 포인트
+
+| 구분 | 관측 포인트 | 기대 결과 |
+| --- | --- | --- |
+| 진입 | `통수위험` 버튼 | popup 열림 |
+| 결과 | 날짜/시간 누락 | 조회 차단 메시지 |
+| 결과 | 위험상태 필터 | 결과 건수와 목록 반영 |
+| 결과 | 동적 관로 컬럼 | 1~3건 반복 렌더링 |
+| 결과 | 페이지네이션 | 결과 2페이지, 설정 3페이지 이상 노출 |
+| 지도 | 선택 지역 | 중심 이동, 강조 색상 반영 |
+| 지도 | 예측강우 격자 | sample overlay 표시 |
+| 지도 | 상세정보 카드 | 표 구조, 숫자 강조, 중점관리지역 오른쪽 anchor 동작 확인 |
+| 설정 | 설정 현황 전환 | 탭 또는 화면 전환 성공 |
+| 설정 | 유출관로 선택 | staged 목록 누적 |
+| 설정 | 4번째 관로 선택 | 차단 메시지 |
+| 저장 | payload preview | focusAreaId, pipes, setSeq 구조 확인 |
+
+## 5. 차단 사유 분류 기준
+
+- `기능 결함`
+  - 기대한 상태 전이나 렌더링이 깨짐
+- `인증 차단`
+  - 로그인 또는 권한 문제로 진입 불가
+- `환경 차단`
+  - dev 서버, API, 지도 리소스 미기동
+- `데이터 차단`
+  - 지역 목록, 샘플 결과, geometry 부족
+- `자동화 한계`
+  - 지도 canvas overlay 체감 확인이 도구상 제한적
+
+## 6. 다음 검증 순서
+
+1. 결과 조회 popup 열림/닫힘
+2. 조회조건 필수값/초기화
+3. 동적 관로 컬럼 렌더링
+4. 결과/설정 목록 페이지네이션
+5. 결과 행 선택과 지도 강조
+6. 예측강우 sample overlay
+7. 상세정보 카드 레이아웃과 중점관리지역 오른쪽 anchor 규칙
+8. 설정 현황 목록 조회
+9. staged 유출관로 1~3건 제어
+10. 저장 payload preview
+11. BE 연동 후 실제 저장/다운로드
diff --git a/apps/sn/docs/작업검증/SFR-011-007-통수위험분석/002-qa-SFR-011-007-통수위험분석-통합검증결과.md b/apps/sn/docs/작업검증/SFR-011-007-통수위험분석/002-qa-SFR-011-007-통수위험분석-통합검증결과.md
new file mode 100644
index 000000000..add9608c9
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-011-007-통수위험분석/002-qa-SFR-011-007-통수위험분석-통합검증결과.md
@@ -0,0 +1,116 @@
+# SFR-011-007 통수위험분석 통합 검증 결과
+
+## 1. 문서 목적
+
+- `SFR-011-007 통수위험분석`의 FE 검증 결과를 기능당 1개 문서로 누적 관리한다.
+- 현재 문서는 설계 초안 점검부터 FE-only 프로토타입 코드 점검, 수동 피드백 반영 상태까지의 결과를 기록한다.
+
+## 2. 수행한 검증 요약
+
+### 2.1 2026-05-18 설계 단계 점검
+
+- 수행 범위
+  - 작업지시 문서 해석
+  - 템플릿 문서 구조 확인
+  - 공통/FE 문서 세트 정의
+  - 예상 수정 파일, FE-only 범위, BE 필요 범위 분리
+- 미수행 범위
+  - FE 코드 구현
+  - 브라우저 검증
+  - API 응답 확인
+
+### 2.2 2026-05-18 FE-only 1차 구현 점검
+
+- 코드 기준 확인
+  - `flowRiskPopup` registry가 실제 `WaterRiskPopupContent`로 연결됐다.
+  - `WaterRiskPopupPage.tsx`에서 결과 조회/설정 현황/staged 편집/preview UI가 구현됐다.
+  - `map/page.tsx`에서 popup sync, 선택 지역 강조, sample rain grid overlay, 설정 편집 중 하수관로 선택 인터셉트가 구현됐다.
+- 타입체크
+  - `NODE_OPTIONS=--max-old-space-size=4096 pnpm exec tsc --noEmit --incremental false --pretty false`
+  - 결과: 이번 변경분 관련 신규 오류는 제거됐다.
+  - 잔여 오류: 저장소 기존 오류만 남음
+    - `components/common/index.ts` 타입 불일치
+    - `PipeAnalysisPopupPage.tsx`의 `JSON[]` 캐스팅 경고
+    - `app/html/**` 기존 타입/모듈 오류
+    - `packages/common/business_components` chart implicit any
+- 미수행
+  - 실제 브라우저 동작 검증
+  - 실제 API 연동 검증
+
+### 2.3 2026-05-19 FE 프로토타입 UI 보완 점검
+
+- 코드 기준 확인
+  - 결과 조회/설정 현황 mock 데이터가 확대되어 페이지네이션이 실제로 노출되는 상태로 바뀌었다.
+  - 결과/설정 toolbar 버튼 정렬, 헤더 컬러, 본문 행 배경이 프로토타입 기준으로 정리됐다.
+  - 상세정보 카드는 표 구조, compact spacing, 유출유량 초과 강조 등 사용자 피드백 기반 보완이 반영됐다.
+- 수동 피드백 반영
+  - 페이지네이션과 상세정보 카드 UI는 사용자 확인 기준으로 여러 차례 보정됐다.
+  - 상세정보 카드의 지도 기준 고정 규칙은 현재도 추가 브라우저 확인이 필요한 항목으로 남아 있다.
+- 미수행
+  - 자동 브라우저 캡처 기반 검증
+  - 실제 API 응답/저장/다운로드 검증
+
+### 2.4 2026-05-19 FE 추가 검증 실행
+
+- 로컬 응답 확인
+  - `http://localhost:3002/popup/flowRiskPopup`
+  - 결과: HTTP 200 응답 확인
+- 타입체크
+  - 실행 위치: `frontend/apps/sn`
+  - 실행 명령: `.\node_modules\.bin\tsc.cmd --noEmit --incremental false --pretty false`
+  - 결과: 이번 통수위험분석 변경으로 새로 유입된 타입 오류 1건(`buildWaterRiskInfoAnchor`)을 수정했고, 재실행 후 남은 오류는 저장소 기존 오류만 확인됐다.
+  - 잔여 기존 오류
+    - `app/(map-layout)/map/components/common/index.ts` props 타입 불일치
+    - `app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx` `JSON[]` 캐스팅 경고
+    - `app/html/(map-layout)/map/components/common/index.ts` props 타입 불일치
+    - `app/html/(with-base-layout)/layout.tsx` 모듈 경로 오류
+    - `packages/common/business_components/src/ui/chart/*.tsx` implicit any
+- 미수행
+  - 지도 상호작용을 포함한 실제 브라우저 자동 검증
+  - 실제 API 연동 검증
+
+### 2.5 2026-05-19 상세정보 카드 상호작용 보정
+
+- 코드 기준 확인
+  - 상세정보 카드는 선택된 중점관리지역 geometry를 기준으로 오른쪽 anchor를 잡는 방식으로 재조정됐다.
+  - 지도 렌더링 중에는 같은 anchor를 기준으로 카드 위치를 갱신하는 구조로 정리됐다.
+- 수동 피드백 반영
+  - 사용자 기준으로 “화면 고정”이 아니라 “중점관리지역 오른쪽에 붙은 상태로 이동”해야 한다는 요구를 반영했다.
+- 미수행
+  - 실제 브라우저 drag/zoom 상황에서 최종 체감 확인
+
+## 3. 현재 검증 상태
+
+### 3.1 통과
+
+- 문서 구조가 `SFR-012-003` 템플릿 기준과 맞는지 확인
+- 공통 설계서, 공유기록, FE 작업카드, 구현기록, 검증 계획/결과 문서 세트 정의 완료
+- 구현 승인 전 코드 미수정 원칙 반영
+- FE-only 프로토타입 범위의 결과 조회/설정 현황/지도 강조/staged 편집 코드 반영 완료
+- 로컬 `flowRiskPopup` 경로의 HTTP 200 응답 확인
+- 이번 통수위험분석 변경으로 인한 신규 타입 오류 제거
+
+### 3.2 미실행
+
+- 실제 브라우저에서의 `통수위험` 아이콘 진입
+- 실제 popup 렌더링 재확인
+- 실제 지도 drag/zoom 상태에서 상세정보 카드 anchor 규칙 재확인
+- 실제 API 연동 검증
+
+### 3.3 보류
+
+- 실제 BE 연동 검증
+- 다운로드 파일 검증
+- 권한 범위 검증
+
+## 4. 보류/리스크
+
+- 상세정보 카드 anchor 규칙은 FE 프로토타입 단계에서 반복 조정된 항목이라 운영 규칙 확정 전 재검토가 필요하다.
+- 동적 관로 컬럼과 지도 overlay는 실제 API 응답 구조 확정 전까지 mock 기준으로만 검토 가능하다.
+- 실제 다운로드/저장 후처리와 파일 결과는 아직 확인되지 않았다.
+
+## 5. 다음 검증 착수 조건
+
+- dev 서버 또는 로컬 미리보기 진입 가능
+- mock 데이터 또는 초기 API 응답 구조 준비
+- 인증 가능한 브라우저 환경에서 지도 조작 수동 검증 가능
diff --git a/apps/sn/docs/작업검증/SFR-011-009-침수발생이력/001-qa-SFR-011-009-침수발생이력-통합검증계획.md b/apps/sn/docs/작업검증/SFR-011-009-침수발생이력/001-qa-SFR-011-009-침수발생이력-통합검증계획.md
new file mode 100644
index 000000000..e80066fa9
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-011-009-침수발생이력/001-qa-SFR-011-009-침수발생이력-통합검증계획.md
@@ -0,0 +1,79 @@
+# SFR-011-009 침수발생이력 통합 검증 계획
+
+## 1. 문서 목적
+
+- `SFR-011-009 침수발생이력`의 FE 검증 계획을 기능당 1개 문서로 누적 관리한다.
+- 현재 문서는 docs-first 설계 완료 직후 기준으로, FE-only 범위 검증 항목과 후속 통합 검증 항목을 분리한다.
+
+## 2. 검증 기준 요약
+
+- 레이어 트리 `침수흔적도` 목록 popup이 정상적으로 열린다.
+- `침수흔적도` on/off가 지도 표시와 맞게 동작한다.
+- 조회조건 유효성 검증이 동작한다.
+- `침수발생년도` 선택이 동작한다.
+- 목록이 조건에 따라 필터링된다.
+- 목록 다운로드가 현재 조회 결과 기준으로 동작한다.
+- 행 클릭 시 메인 지도 preview가 뜬다.
+- 지도 위 큰 침수흔적 레이어 클릭 시 작은 상세 팝업이 열린다.
+
+## 3. FE-only 검증 계획
+
+### 3.1 popup 진입
+
+- 레이어 트리 `침수흔적도` 체크
+- 레이어 트리 `침수흔적도`의 목록 버튼 클릭
+- popup open 여부
+- popup 제목, 조회조건 영역, 목록 그리드 노출 여부
+
+### 3.2 조회조건 검증
+
+- 시도 미선택 상태에서 시군구 선택 후 조회 시 차단되는지 확인
+- 침수발생년도 선택 시 목록 필터가 반영되는지 확인
+- 침수재해명 키워드 입력 시 목록 필터가 적용되는지 확인
+
+### 3.3 목록/다운로드
+
+- 조회 결과 총 건수 표시
+- `강우 분석정보` 묶음 헤더와 하위 4개 컬럼 표시
+- 나머지 상세 필드가 가로 스크롤로 모두 노출되는지 확인
+- 10건 초과 시 페이지네이션 노출
+- 다운로드 버튼 클릭 시 현재 필터링 결과 기준 파일이 생성되는지 확인
+- 결과 없음 상태에서 다운로드가 차단되는지 확인
+
+### 3.4 지도 연동
+
+- 행 클릭 시 지도 preview 표시 여부
+- 행 더블클릭 시 popup close 여부
+- 메인 지도 영역으로 fit 이동되는지 확인
+- `침수흔적도` 체크 시 mock polygon과 침수심 overlay가 함께 표시되는지 확인
+- `침수흔적도`를 끄면 관련 표시가 함께 숨겨지는지 확인
+- 큰 침수흔적 polygon 클릭 시 상세 팝업이 뜨는지 확인
+
+### 3.5 지도 상세 팝업
+
+- `침수년도탭`, `재해명탭`, `침수발생강우탭` 전환
+- 기술 컬럼 제외 후 한글 업무 항목만 보이는지 확인
+- 각 탭의 테이블 구조와 값 표시
+- 닫기 시 팝업만 닫히는지 확인
+
+## 4. BE 연동 후 검증 계획
+
+- 실제 목록 조회 API 필드 매핑
+- 실제 geometry 및 지도 위치 정합성
+- 지도 click 상세조회
+- 실제 레이어 트리 `침수흔적도` 토글 연계
+- 다운로드 권한 및 파일 포맷 검증
+
+## 5. 차단 사유 분류 기준
+
+- `기능 결함`
+- `인증 차단`
+- `환경 차단`
+- `데이터 차단`
+- `자동화 한계`
+
+## 6. 현재 상태
+
+- 공통 설계서 작성 완료
+- FE 작업카드 작성 완료
+- 구현은 진행 중이며, 검증은 FE-only 기준으로 먼저 수행한다.
diff --git a/apps/sn/docs/작업검증/SFR-011-009-침수발생이력/002-qa-SFR-011-009-침수발생이력-통합검증결과.md b/apps/sn/docs/작업검증/SFR-011-009-침수발생이력/002-qa-SFR-011-009-침수발생이력-통합검증결과.md
new file mode 100644
index 000000000..ca7d05fd6
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-011-009-침수발생이력/002-qa-SFR-011-009-침수발생이력-통합검증결과.md
@@ -0,0 +1,52 @@
+# SFR-011-009 침수발생이력 통합 검증 결과
+
+## 1. 문서 목적
+
+- `SFR-011-009 침수발생이력`의 현재 검증 결과와 남은 수동 확인 항목을 누적 관리한다.
+- 현재 문서는 FE draft 구현 직후 기준의 로컬 응답 확인과 자동화 한계 항목을 기록한다.
+
+## 2. 이번 라운드 결과 요약
+
+- 상태: 부분 확인
+- 확인 완료
+  - `localhost:3002` 기본 응답 200 확인
+  - `localhost:3002/map` 응답 200 확인
+  - 공통 설계서, FE 작업카드, FE 검증계획 작성 완료
+- 미완료
+  - popup 실제 진입 확인
+  - 목록 조회/행 클릭 preview/메인 지도 플로팅 상세팝업 수동 확인
+  - 다운로드 파일 수동 확인
+
+## 3. 세부 결과
+
+### 3.1 환경 확인
+
+- `pnpm --filter sn run dev`는 샌드박스 내에서 `spawn EPERM`으로 실패했다.
+- 권한 상승 후 로컬 서버를 열어 `http://127.0.0.1:3002`, `http://127.0.0.1:3002/map` 응답 200을 확인했다.
+
+### 3.2 자동/간접 확인
+
+| 항목 | 결과 | 메모 |
+| --- | --- | --- |
+| 로컬 서버 기본 응답 | 통과 | `/` 200 |
+| 지도 메인 경로 응답 | 통과 | `/map` 200 |
+| popup 경로 직접 요청 | 보류 | 초기 컴파일 지연 또는 자동 요청 timeout 가능성 |
+| 실제 popup 클릭 | 보류 | 사용자가 로컬 수동 검증 예정 |
+| 행 클릭 preview | 보류 | 사용자가 로컬 수동 검증 예정 |
+| 더블클릭 후 지도 이동 | 보류 | 사용자가 로컬 수동 검증 예정 |
+| 지도 클릭 플로팅 팝업 | 보류 | 사용자가 로컬 수동 검증 예정 |
+
+## 4. 남은 수동 검증 항목
+
+1. 레이어 트리 `침수흔적도` 목록 버튼으로 popup이 정상적으로 열리는지 확인
+2. 조회조건 입력과 목록 필터가 기대대로 동작하는지 확인
+3. 목록 행 클릭 시 메인 지도에 테스트 레이어가 보이는지 확인
+4. 목록 행 더블클릭 시 popup이 닫히고 메인 지도 이동이 유지되는지 확인
+5. 큰 침수흔적 polygon 클릭 시 작은 상세 팝업이 뜨는지 확인
+6. `침수흔적도` on/off에 따라 영역/침수심 overlay가 메인 지도에 맞게 보이는지 확인
+7. 상세 팝업 탭과 표 구성이 자연스러운지 확인
+
+## 5. 결론
+
+- FE draft 구현과 문서 선행 정리는 완료됐다.
+- 최종 상태는 사용자 로컬 수동 검증 결과를 반영한 뒤 `검증 통과` 또는 `추가 보완 필요`로 갱신한다.
diff --git a/apps/sn/docs/작업검증/SFR-011-노후관로관리/001-qa-SFR-011-노후관로관리-통합검증결과.md b/apps/sn/docs/작업검증/SFR-011-노후관로관리/001-qa-SFR-011-노후관로관리-통합검증결과.md
new file mode 100644
index 000000000..915cb2826
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-011-노후관로관리/001-qa-SFR-011-노후관로관리-통합검증결과.md
@@ -0,0 +1,57 @@
+# SFR-011 노후관로관리 통합 검증 결과
+
+## 1. 문서 목적
+
+- `SFR-011 노후관로관리` 유지보수 라운드의 검증 결과를 기록한다.
+- 이번 검증은 팝업 위치/폭 유지보수와 좁은 폭 레이아웃 보정 중심이다.
+
+## 2. 현재 검증 상태
+
+### 2.1 수행 여부
+
+- 정적 코드 검토와 타입 검사 시도를 수행했다.
+- 자동 브라우저 검증은 수행하지 못했다.
+
+### 2.2 수행 결과
+
+- 정적 구현 확인
+  - `agedPipePopup` 최종 크기가 `850 x 600`으로 조정됐다.
+  - `agedPipePopup`이 `browser-left + alignTop + offsetTop: 200` 기준 배치를 사용하도록 설정됐다.
+  - 조회/다운로드 버튼이 `시군구`와 같은 수평선 오른쪽으로 정렬되도록 반영됐다.
+  - 필터 영역 하단 여백이 축소되도록 반영됐다.
+  - `UiTable` 외곽 마진 제거와 중복 총건수 숨김이 반영됐다.
+  - 표 영역이 현재 팝업 높이 기준에서 하단 공백이 과도하지 않도록 조정됐다.
+- 로컬 라우트 응답 확인
+  - `http://127.0.0.1:3002/popup/agedPipePopup?elapsedYears=30&ctpvCd=0&sggCd=0` 응답 `200`
+  - `http://127.0.0.1:3002/map` 응답 `200`
+- 정적 타입 검사
+  - 실행 명령: `pnpm --filter sn exec tsc --noEmit --pretty false`
+  - 결과: 실패
+  - 확인 내용
+    - 저장소 기존 타입 오류가 다수 존재한다.
+    - 출력된 기존 오류 경로
+      - `app/(map-layout)/map/components/common/index.ts`
+      - `app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx`
+      - `app/html/(map-layout)/map/components/common/index.ts`
+      - `app/html/(with-base-layout)/layout.tsx`
+      - `packages/common/business_components/src/ui/chart/*`
+    - 명령 말미에 `Command "tsc" not found`가 함께 출력돼 현재 실행 환경도 안정적이지 않다.
+
+### 2.3 미수행 항목
+
+- `localhost:3002/map` 실제 브라우저에서 `노후관로 > 목록보기` 팝업 위치 육안 확인
+- 팝업 최소화 후 재오픈 체감 확인
+- 실제 최종 크기(`850 x 600`) 상태에서 행 선택, 페이지 이동, 다운로드 버튼 상호작용 확인
+
+## 3. 현재 리스크
+
+- 자동 브라우저 캡처용 Playwright 의존성이 현재 세션에 없어 화면 증적을 남기지 못했다.
+- 팝업 위치가 사용자 의도와 완전히 일치하는지는 수동 검증 전까지 확정할 수 없다.
+- 저장소 기존 타입 오류 때문에 이번 변경의 정적 게이트 통과 여부를 분리 보장하기 어렵다.
+
+## 4. 후속 검증 권장 항목
+
+- `http://127.0.0.1:3002/map`에서 실제 팝업 열기
+- 사용자 스크린샷 기준 위치 체감 확인
+- 최종 크기(`850 x 600`) 상태에서 표 하단 공백 체감 확인
+- 필요 시 문서만 현재 운영값 기준으로 재동기화
diff --git a/apps/sn/docs/작업검증/SFR-012-002-하수관망도 업로드/001-qa-SFR-012-002-하수관망도 업로드-통합검증계획.md b/apps/sn/docs/작업검증/SFR-012-002-하수관망도 업로드/001-qa-SFR-012-002-하수관망도 업로드-통합검증계획.md
new file mode 100644
index 000000000..fe8b0e784
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-012-002-하수관망도 업로드/001-qa-SFR-012-002-하수관망도 업로드-통합검증계획.md	
@@ -0,0 +1,66 @@
+# SFR-012-002 하수관망도 업로드 통합 검증 계획
+
+## 1. 문서 목적
+
+- `SFR-012-002 하수관망도 업로드`의 검증 계획을 기능당 1개 문서로 누적 관리한다.
+- 현재는 구현 전 단계이므로 FE-only 검증 범위와 BE 연동 후 검증 범위를 먼저 분리한다.
+
+## 2. 검증 기준 요약
+
+- `GIS 관리` popup이 정상적으로 열린다.
+- 하수관로만 시설구분 대상으로 노출된다.
+- 파일 선택 시 파일명이 표시된다.
+- 업로드 성공 시 현황 목록이 즉시 갱신된다.
+- 다운로드는 선택 행이 있을 때만 가능 상태가 된다.
+- 원본 분리 저장 안내가 popup에서 유지된다.
+
+## 3. FE-only 검증 계획
+
+### 3.1 popup 진입
+
+- 우측 기능 버튼 `GIS 관리` 클릭
+- popup open 여부
+- popup 제목, 업로드 영역, 현황 그리드 노출 여부
+
+### 3.2 업로드 폼
+
+- 하수관로 단일 시설구분이 기본 표시되는지 확인
+- 하수맨홀, 하수처리시설 등 다른 시설구분이 노출되지 않는지 확인
+- 파일 미선택 상태에서 `업로드` 클릭 차단
+- 파일 선택 후 파일명 input 반영
+
+### 3.3 업로드 현황
+
+- mock 업로드 성공 시 목록 상단 반영
+- 행 선택 시 선택 강조 및 상태 메시지 반영
+- 다운로드 버튼 선택 상태 확인
+- 항목 10건 초과 시 기존 공용 페이지네이션이 노출되는지 확인
+- 첫 화면 기준 5행 수준이 자연스럽게 보이는지 확인
+- `찾기`, `업로드`, `다운로드` 버튼 색과 간격이 화면에 맞는지 확인
+
+### 3.4 요청 미리보기
+
+- popup을 닫으면 분석도구 메뉴 active가 해제되는지 확인
+
+## 4. BE 연동 후 검증 계획
+
+- 허용 확장자 검증
+- 최대 파일 크기 검증
+- 시설구분 매핑 검증
+- 중복 파일 검증
+- 업로드 실패 시 원본 보호
+- 다운로드 권한/존재 검증
+
+## 5. 차단 사유 분류 기준
+
+- `기능 결함`
+- `인증 차단`
+- `환경 차단`
+- `데이터 차단`
+- `자동화 한계`
+
+## 6. 현재 상태
+
+- 설계 완료
+- FE-only mock 구현 완료
+- 브라우저 정밀 조작 검증은 일부 미실행
diff --git a/apps/sn/docs/작업검증/SFR-012-002-하수관망도 업로드/002-qa-SFR-012-002-하수관망도 업로드-통합검증결과.md b/apps/sn/docs/작업검증/SFR-012-002-하수관망도 업로드/002-qa-SFR-012-002-하수관망도 업로드-통합검증결과.md
new file mode 100644
index 000000000..9003fb241
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-012-002-하수관망도 업로드/002-qa-SFR-012-002-하수관망도 업로드-통합검증결과.md	
@@ -0,0 +1,63 @@
+# SFR-012-002 하수관망도 업로드 통합 검증 결과
+
+## 1. 문서 목적
+
+- `SFR-012-002 하수관망도 업로드`의 검증 결과를 기능당 1개 문서로 누적 관리한다.
+- 현재 문서는 구현 전 단계의 초기 상태를 기록한다.
+
+## 2. 현재 검증 상태
+
+### 2.1 수행 여부
+
+- FE-only mock 구현 기준으로 정적/라우트 검증을 일부 수행했다.
+
+### 2.2 사유
+
+- 실제 백엔드 업로드/다운로드 연결이 아직 없으므로, 이번 결과는 popup 렌더링과 mock 흐름 중심이다.
+
+### 2.3 수행 결과
+
+- 정적 구현 확인
+  - `gisManagementPopup` placeholder가 실제 popup page wrapper 구조로 교체됨
+  - 시설구분 선택, 파일 선택, mock 업로드 이력, 다운로드 대상 선택 UI 확인
+  - 업로드 현황 10건 단위 페이지네이션 연결 확인
+  - popup 종료 시 분석도구 active 해제 로직 연결 확인
+  - `찾기`, `업로드` 버튼 `조회` 계열 색 반영
+  - `다운로드` 버튼 `green` 계열 색 반영
+  - 업로드 row 버튼 그룹 정렬/간격 조정 반영
+- 로컬 라우트 응답 확인
+  - `http://127.0.0.1:3002/popup/gisManagementPopup` 응답 `200`
+  - `http://127.0.0.1:3002/map` 응답 `200`
+- 응답 HTML 문자열 확인
+  - `GIS 업로드`
+  - `GIS 업로드 현황`
+  - `시설구분`
+  - `다운로드`
+- 정적 타입 검사
+  - `pnpm --filter sn exec tsc --noEmit --pretty false --incremental false`
+  - 결과: 실패
+  - 사유: 기존 저장소 타입 오류
+    - `app/(map-layout)/map/components/common/index.ts`
+    - `app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx`
+    - `app/html/(map-layout)/map/components/common/index.ts`
+    - `app/html/(with-base-layout)/layout.tsx`
+    - `packages/common/business_components/src/ui/chart/*`
+  - 이번 `GisManagementPopupContent.tsx` 관련 신규 오류는 출력되지 않았다.
+
+## 3. 후속 검증 예정 항목
+
+- `GIS 관리` popup open
+- 시설구분/파일 선택 유효성
+- mock 업로드 이력 갱신
+- 다운로드 대상 선택
+- 10건 초과 페이지 전환
+- popup 종료 후 active 해제
+- 버튼 색/간격 최종 육안 확인
+- BE 연동 후 실제 업로드/다운로드 검증
+
+## 4. 현재 리스크
+
+- 서버 계약이 확정되기 전까지 FE 검증 항목 일부는 mock 기준에 머문다.
+- 실제 파일 선택, 업로드 버튼 클릭, 행 선택 상호작용은 브라우저 수동 확인이 한 번 더 필요하다.
+- 저장소 기존 타입 오류 때문에 이번 기능만 분리한 정적 통과 여부를 보장하기 어렵다.
+- 시설구분 목록은 아직 실제 시설물 레이어 조회 결과와 자동 동기화되지 않는다.
diff --git a/apps/sn/docs/작업검증/SFR-012-003-하수관로편집/001-qa-SFR-012-003-하수관로편집-통합검증계획.md b/apps/sn/docs/작업검증/SFR-012-003-하수관로편집/001-qa-SFR-012-003-하수관로편집-통합검증계획.md
new file mode 100644
index 000000000..2fa3712c3
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-012-003-하수관로편집/001-qa-SFR-012-003-하수관로편집-통합검증계획.md
@@ -0,0 +1,241 @@
+# SFR-012-003 하수관로편집 통합 검증 계획
+
+## 1. 문서 목적
+
+- `SFR-012-003 하수관로편집`의 검증 계획을 기능당 1개 문서로 누적 관리한다.
+- 기존 `001`, `003`, `005`, `007`, `009`, `011` 계획 문서를 이 문서로 흡수한다.
+- 이후 라운드부터는 새 검증 계획 파일을 추가하지 않고 이 문서 내부 헤더로만 구분한다.
+
+## 2. 검증 기준 요약
+
+- 레이어 선택 전 편집 도구 비활성
+- `ADD`, `MOVE`, `VERTEX_EDIT`, `DELETE` 변경분은 저장 전까지 로컬 세션 유지
+- `MOVE`
+  - preview drag 후 geometry 반영
+- `VERTEX_EDIT`
+  - vertex marker 표시
+  - 양 끝점 이동 가능
+  - geometry 반영
+- 저장 시 원본 직접 수정 금지
+
+## 3. 라운드별 검증 계획 요약
+
+### 3.1 초기/후속 검증
+
+- `GIS 편집` 버튼 진입/종료, 메뉴 강조 잔류 재확인
+- 기본 툴바 노출과 상태 메시지 확인
+
+### 3.2 세션도구 확장 검증
+
+- 7개 편집 레이어 노출 확인
+- 레이어별 도구 활성 규칙 확인
+- `undo`, `reset` 확인
+
+### 3.3 실제지도조작 확장 검증
+
+- `MOVE`, `VERTEX_EDIT`, `DELETE`가 실제 지도 조작 구조를 받을 수 있는지 코드/브라우저 기준으로 점검
+- 자동 브라우저 drag는 한계가 있어 수동 검증 필요로 기록
+
+### 3.4 `MOVE`
+
+- preview drag 구조와 세션 반영 흐름은 상대적으로 안정적
+- 유지 기준으로 본다
+
+### 3.5 `VERTEX_EDIT`
+
+- 가장 많은 변동이 있었고 현재도 재검증 필요
+- 핵심 검증 기준
+  - 선택 직후 vertex marker 표시
+  - 양 끝점 이동 가능
+  - 이동 후 geometry가 실제로 변경
+
+### 3.6 2026-05-15 세션 유지 / `MOVE` / `VERTEX_EDIT` 회귀 검증
+
+- 사용자 피드백 기준으로 아래 항목을 우선 재검증한다.
+  - `ADD`, `MOVE`, `VERTEX_EDIT` 후 세션 기록과 지도 preview가 바로 사라지지 않는지
+  - 신규 추가 preview가 레이어별로 다른 색상으로 보여 구분 가능한지
+  - 편집 세션 기본 패널이 최근 5건 정도 높이만 보이고, 아래 이력은 패널 내부 스크롤로 바로 확인 가능한지
+  - `MOVE` 대상 선택 후 preview drag가 실제로 반응하는지
+  - `VERTEX_EDIT` 대상 선택 후 모든 실꼭지점 marker와 midpoint handle이 드러나는지
+  - `VERTEX_EDIT` 양 끝점 drag가 실제로 반응하는지
+  - `VERTEX_EDIT` midpoint drag 후 새 vertex가 삽입되는지
+  - `VERTEX_EDIT` 드래그 후 geometry 변경이 세션 요약과 preview에 반영되는지
+  - `하수처리시설`이 point 기준으로 `VERTEX_EDIT` 비대상으로 처리되는지
+
+### 3.7 2026-05-15 QGIS 유사 `VERTEX_EDIT` 재구현 검증
+
+- QGIS 비교 기준으로 아래 항목을 별도 확인한다.
+  - 실꼭지점은 항상 보이되, midpoint는 모든 segment에 상시 표시되지 않고 hover segment 기준으로만 나타나는지
+  - endpoint와 중간 vertex가 동일한 주황색 handle 규칙으로 이동되는지
+  - midpoint drag가 새 vertex 삽입으로 반영되는지
+  - feature 선택이 유지된 상태에서 연속 꼭지점 편집이 가능한지
+  - `MOVE` 도구 회귀 없이 preview drag가 기존처럼 유지되는지
+
+### 3.8 2026-05-15 편집 세션 팝업 전환 및 도구 아이콘 검증
+
+- 편집 세션 고정 패널이 더 이상 지도 위에 남지 않는지
+- GIS 편집 진입 시 `GIS 편집 세션` window popup이 열리는지
+- 팝업에서 변경 목록, 마지막 변경 취소, 세션 초기화, 항목 focus가 메인 지도와 동기화되는지
+- 세션 안내 문구 영역이 제거됐는지
+- `추가`, `이동`, `꼭지점편집`, `삭제` 버튼에 `lucide-react` 아이콘이 표시되는지
+
+### 3.9 2026-05-21 관로 기본정보 세션 편집 검증
+
+- 편집 대상 레이어가 `하수관로`일 때만 편집 상세정보창이 열리는지
+- `MOVE`, `VERTEX_EDIT`, `ADD` change 선택 후 상세정보창 상단 `기본정보` 테이블에서 7개 필드가 직접 수정 가능한지
+- 신규 추가일 때 `경과년도`, `설치일자 확인불가` 같은 조회 전용 표식이 노출되지 않는지
+- 상세정보창 저장이 즉시 DB 저장이 아니라 `basicInfo` 세션 저장으로만 처리되는지
+- 입력 중 스크롤이 상단으로 점프하지 않고 현재 편집 위치를 유지하는지
+- `GIS 편집 세션` 목록에 `기본정보 세션저장` 표식이 나타나는지
+- 최종 저장 payload에 `featureRef`, `basicInfo`, `beforeGeometry`, `afterGeometry`가 함께 들어가는지
+- `DELETE` change나 관로 외 레이어에서는 상세정보 세션 편집창이 열리지 않는지
+- 편집 세션 모드에서는 `보수 및 갱신`, `청소 및 준설`, `점검 및 진단` 섹션이 숨겨지는지
+- `MOVE`, `VERTEX_EDIT` 중 비하수관로 클릭 시 선택/줌 이동 없이 차단되고 상태문구만 바뀌는지
+- `MOVE`, `VERTEX_EDIT`에서 하수관로 선택 즉시 편집 상세정보창이 열리는지
+
+### 3.10 2026-06-26 MOVE 도구 on/off 유지보수 검증 계획
+
+- 구현 후 아래 순서로 검증한다.
+  1. `GIS편집`을 켜고 `이동` 버튼을 한 번 클릭한다.
+  2. 하수관로 A를 선택하고 drag 이동을 완료한다.
+  3. 이동 완료 후 툴바의 `이동` 버튼 active 상태가 유지되는지 확인한다.
+  4. `이동` 버튼을 다시 누르지 않은 상태에서 하수관로 B를 선택해 이동 interaction이 다시 준비되는지 확인한다.
+  5. 하수관로 B 이동 완료 후에도 `이동` active 상태가 유지되는지 확인한다.
+  6. `이동` 버튼을 다시 클릭하면 active 상태가 꺼지고, 이후 지도 클릭이 이동 변경분을 만들지 않는지 확인한다.
+- 회귀 확인
+  - `추가`, `꼭지점편집`, `삭제` 버튼은 기존처럼 하나만 active여야 한다.
+  - `스냅핑` on/off는 `이동` active 유지와 별개로 유지되어야 한다.
+  - `닫기`, `저장`, `세션 초기화`, `마지막 변경 취소` 후 이동 도구와 interaction이 남지 않아야 한다.
+- 검증 분류
+  - 툴바 active 상태와 상태 메시지는 자동 관측 가능하다.
+  - 실제 canvas drag와 관로별 연속 이동 체감은 수동 브라우저 검증을 기본으로 한다.
+## 4. 현재 검증 범위
+
+### 4.1 진행 중
+
+- `ADD` geometry family별 직접 캡처
+- `VERTEX_EDIT`의 QGIS 기준 사용자 경험 재정렬
+
+### 4.2 이후 범위
+
+- 실제 저장 API 연결 이후 통합 저장 검증
+- 원본 보호와 편집본 참조 갱신 검증
+
+## 5. 현재 테스트 메모
+
+- dev 서버가 켜져 있으면 `next build`는 수행하지 않는다.
+- `next lint`는 환경 이슈로 안정적인 회귀 수단이 되지 못하고 있다.
+- 지도 캔버스 기반 drag/vertex 테스트는 수동 브라우저 검증이 핵심이다.
+
+## 5-1. 브라우저 검증 선행조건
+
+- `/map` 진입 가능한 로그인 상태 또는 로컬 임시 로그인 경로가 준비되어 있어야 한다.
+- FE dev 서버와 관련 BE API가 모두 응답해야 한다.
+- 편집 대상 레이어와 샘플 객체를 재현 가능한 테스트 데이터로 확보해야 한다.
+- 인증 또는 외부 연동 문제로 진입이 막히면 `기능 결함`이 아니라 `인증 차단` 또는 `환경 차단`으로 분류한다.
+- 로컬 인증 우회 필요 시 `COMMON_DOCS_ROOT/작업내용/공통-로그인/001-de-공통-로그인-로컬임시로그인-검토계획.md`를 참조한다.
+
+## 5-2. 브라우저 자동검증 관측 포인트
+
+| 구분 | 관측 포인트 | 기대 결과 | 검증 방식 |
+| --- | --- | --- | --- |
+| 공통 | `GIS편집` 버튼 | 편집 모드 진입 시 강조, 종료 시 해제 | 자동 |
+| 공통 | 편집 툴바 | 편집 모드에서만 노출 | 자동 |
+| 공통 | 레이어 선택 | 미선택 시 도구 비활성, 선택 시 활성 | 자동 |
+| 세션 | 변경 목록 | 조작 후 항목 누적 | 자동 |
+| 세션 | `undo`, `reset` | 상태 복구 또는 초기화 | 자동 |
+| `ADD` | 상태 메시지/신규 항목 | geometry family별 신규 추가 반영 | 자동 중심 |
+| `MOVE` | preview label, 목록 요약 | drag 후 geometry 변경 반영 | 자동+수동 |
+| `VERTEX_EDIT` | vertex marker 또는 modify handle | 선택 직후 노출, 이동 후 geometry 변경 | 수동 중심 |
+| `DELETE` | 임시 삭제 스타일 | 저장 전까지 유지 | 자동+수동 |
+| `SAVE` | payload/응답 처리 | 성공 또는 실패 메시지와 세션 상태 반영 | 자동 |
+
+## 5-3. 차단 사유 분류 기준
+
+- `기능 결함`: 기대한 상태 전이 또는 응답 처리가 깨짐
+- `인증 차단`: 로그인, 토큰, 권한 문제로 진입 또는 호출이 막힘
+- `환경 차단`: 서버 미기동, 프록시/네트워크 문제
+- `데이터 차단`: 레이어 메타, 샘플 객체, 테스트 BBOX 부족
+- `자동화 한계`: canvas drag, vertex 조작을 도구가 안정적으로 재현하지 못함
+
+## 6. 다음 검증 순서
+
+1. `ADD`
+   - 점형 클릭 추가
+   - 선형 연속 클릭 추가
+   - 면형 폐합 추가
+   - 편집 모드 종료 후에도 세션/preview 유지 확인
+2. `MOVE`
+   - preview drag 회귀 없는지 확인
+   - drag 종료 후 요약/geometry 반영 확인
+3. `VERTEX_EDIT`
+   - 실꼭지점 marker 표시
+   - hover segment midpoint 표시
+   - 양 끝점 이동
+   - 중간 vertex 이동
+   - 드래그 후 geometry/요약 반영 확인
+4. `DELETE`
+   - 임시 삭제 스타일 유지
+
+## 7. 흡수한 기존 문서
+
+- `001-qa-SFR-012-003-하수관로편집-검증계획.md`
+- `003-qa-SFR-012-003-하수관로편집-후속검증계획.md`
+- `005-qa-SFR-012-003-하수관로편집-세션도구확장검증계획.md`
+- `007-qa-SFR-012-003-하수관로편집-실제지도조작검증계획.md`
+- `009-qa-SFR-012-003-하수관로편집-MOVE실드래그검증계획.md`
+- `011-qa-SFR-012-003-하수관로편집-VERTEX_EDIT실조작검증계획.md`
+
+## 8. 2026-07-15 편집 세션 인라인 전환 검증 계획
+
+1. 정적 구조
+   - GIS 편집 진입 시 팝업 자동 호출이 제거되었는지 확인한다.
+   - 인라인 세션이 시설물 관리 오른쪽, 검색바와 같은 상단 기준으로 배치되는지 확인한다.
+   - 편집 도구바가 `top: 84px`로 이동했는지 확인한다.
+2. 세션 크기와 스크롤
+   - 변경분 0건에서 패널이 빈 상태 내용 높이만 차지하는지 확인한다.
+   - 변경분 증가 시 패널이 최대 높이까지 늘어나는지 확인한다.
+   - 최대 높이 이후 변경 목록에 세로 스크롤이 생기고 시설물 접기 토글을 가리지 않는지 확인한다.
+3. 팝업 호환
+   - 인라인 `팝업` 버튼으로만 기존 팝업이 열리는지 확인한다.
+   - 팝업 정의의 `460 x 640` 크기와 기존 위치/메시지 계약이 유지되는지 확인한다.
+4. 회귀
+   - 인라인/팝업에서 변경분 선택, 취소, 되돌리기, 초기화가 동일 편집 상태에 반영되는지 확인한다.
+   - 타입 검사와 `git diff --check`를 수행하고 선행 오류와 신규 오류를 구분한다.
+
+## 9. 2026-07-15 사용자 화면 피드백 2차 검증 계획
+
+1. 검색바 비가림
+   - 인라인 세션 표시 전후 검색바의 시도·시군구·시설물·조회 컨트롤이 모두 노출되는지 확인한다.
+   - 팝업 뷰 전환 시 검색바가 원래 중앙 위치로 돌아오는지 확인한다.
+2. 도구바 종속 배치
+   - GIS 편집 도구바가 인라인 세션 카드 바로 아래에서 같은 왼쪽 기준으로 시작하는지 확인한다.
+   - 세션 변경분 증가 시 도구바가 카드 아래로 내려가고 카드 목록이 최대 높이부터 스크롤되는지 확인한다.
+3. 인라인/팝업 상호 배타 전환
+   - 인라인 `팝업` 클릭 직후 화면 인라인 세션이 사라지는지 확인한다.
+   - 팝업의 `화면에서 보기` 클릭 시 팝업이 닫히고 인라인 세션이 같은 변경 상태로 복원되는지 확인한다.
+   - 팝업 창의 닫기 버튼을 직접 눌러도 300ms 이내 인라인 세션이 복원되는지 확인한다.
+4. 회귀
+   - 취소·뒤로가기·초기화·변경분 포커스가 전환 전후 동일 상태를 사용하는지 확인한다.
+   - 다른 `Gis` 사용 화면에서 검색바 기본 중앙 배치가 유지되는지 확인한다.
+
+## 10. 2026-07-15 표시 영역 기준 최종 검증 계획
+
+1. 검색바 고정
+   - 편집 모드 진입, 변경분 추가, 팝업 전환 전후 검색바 좌표가 바뀌지 않는지 확인한다.
+2. 상단 축약 세션
+   - 변경분 0건에서 편집 세션이 검색바와 유사한 높이로 보이는지 확인한다.
+   - 첫 변경분부터 작업 버튼과 목록이 나타나며 아래 방향으로 커지는지 확인한다.
+   - 최대 높이 이후 목록에만 세로 스크롤이 생기는지 확인한다.
+3. 하단 도구바
+   - GIS 편집 도구바가 지도 하단 중앙 표시 영역에 고정되는지 확인한다.
+   - 세션 확장과 팝업 전환에도 도구바 좌표가 유지되는지 확인한다.
+4. 팝업 왕복
+   - 팝업 열기 시 인라인 숨김, `화면에서 보기`와 직접 닫기 시 인라인 복원을 재확인한다.
+
+## 11. 2026-07-15 GIS 편집 토글 종료 회귀 검증
+
+1. 변경분이 있는 상태에서 분석도구 `GIS 편집`을 두 번째 클릭한다.
+2. 하단 GIS 편집 바와 인라인 편집 세션이 함께 사라지는지 확인한다.
+3. 팝업 뷰 상태에서 GIS 편집을 끄면 팝업도 닫히는지 확인한다.
+4. GIS 편집을 다시 켜면 기존 변경분이 인라인 세션에 복원되는지 확인한다.
diff --git a/apps/sn/docs/작업검증/SFR-012-003-하수관로편집/002-qa-SFR-012-003-하수관로편집-통합검증결과.md b/apps/sn/docs/작업검증/SFR-012-003-하수관로편집/002-qa-SFR-012-003-하수관로편집-통합검증결과.md
new file mode 100644
index 000000000..93697c3fe
--- /dev/null
+++ b/apps/sn/docs/작업검증/SFR-012-003-하수관로편집/002-qa-SFR-012-003-하수관로편집-통합검증결과.md
@@ -0,0 +1,761 @@
+# SFR-012-003 하수관로편집 통합 검증 결과
+
+## 1. 문서 목적
+
+- `SFR-012-003 하수관로편집`의 검증 결과를 기능당 1개 문서로 누적 관리한다.
+- 기존 `002`, `004`, `006`, `008`, `010`, `012` 결과 문서를 이 문서로 흡수한다.
+- 이후 라운드부터는 새 검증 결과 파일을 추가하지 않고 이 문서 내부 헤더로만 구분한다.
+
+## 2. 수행한 검증 요약
+
+### 2.1 초기/후속 검증
+
+- `GIS 편집` 모드 진입/종료
+- 메뉴 강조 잔류 재확인
+
+### 2.2 세션도구 확장 검증
+
+- 7개 편집 레이어 노출
+- 도구 활성 규칙
+- `undo`, `reset`
+
+### 2.3 실제지도조작 확장 검증
+
+- `MOVE`, `VERTEX_EDIT`, `DELETE` 구조 점검
+- 자동 브라우저 drag 한계 확인
+
+### 2.4 `MOVE`
+
+- preview drag 구조와 세션 반영 흐름은 상대적으로 안정적
+
+### 2.5 `VERTEX_EDIT`
+
+- 여러 차례 보강했지만 현재는 재검증 필요 상태
+
+### 2.6 2026-05-15 세션 유지 / 상호작용 회귀 대응 점검
+
+- 코드 기준 점검
+  - `GIS편집` 모드 종료 후에도 변경분이 있으면 세션 패널과 지도 preview를 유지하도록 수정했다.
+  - 신규 추가 preview는 레이어별 색상을 우선 사용하도록 보강했다.
+  - 편집 세션 기본 패널은 최근 5건 정도 높이만 보이도록 고정하고, 아래 이력은 패널 내부 스크롤로 바로 확인하도록 바꿨다.
+  - 추가 조정으로 세션 패널 높이를 더 줄이고, 하단 안내 문구는 제거했다.
+  - preview layer는 상호작용 중 redraw되도록 `updateWhileInteracting` 보강이 들어갔다.
+  - `MOVE`, `VERTEX_EDIT` interaction effect는 `gisEdit` 전체 객체 의존 대신 실제 pending interaction 중심으로 좁혔다.
+  - 원본 피처 선택 시 layerId 정규화를 추가해 namespace 또는 feature id 형식 차이로 편집 진입이 막히지 않게 했다.
+  - `하수처리시설(tb_il_swage_prcs_fclt)`은 point 기준으로 정정해 `VERTEX_EDIT` 대상에서 빠지도록 맞췄다.
+- 정적 검증
+  - `node node_modules/typescript/bin/tsc --noEmit --incremental false --pretty false`
+  - 결과: 기존 저장소 오류로 실패
+  - 확인된 기존 오류 예시
+    - `components/common/index.ts` 타입 불일치
+    - `PipeAnalysisPopupPage.tsx` 타입 변환 경고
+    - 공통 chart 컴포넌트 implicit any
+- 로컬 라우트 응답 확인
+  - `http://127.0.0.1:3002/map` 응답 200
+  - `http://127.0.0.1:3002/auth/login` 응답 200
+- 자동 브라우저 검증
+  - Playwright headless 실행 시 `spawn EPERM`으로 실패해 실제 canvas drag 자동검증은 수행하지 못했다.
+  - 따라서 `MOVE`, `VERTEX_EDIT`의 실조작 확인은 수동 브라우저 재검증이 남아 있다.
+
+### 2.7 2026-05-15 QGIS 유사 `VERTEX_EDIT` 재구현 점검
+
+- 코드 기준 점검
+  - `VERTEX_EDIT`는 custom vertex handle layer를 유지하되, 실꼭지점 상시 표시와 hover segment midpoint 1건 표시 구조로 단순화했다.
+  - midpoint 후보는 `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon` 모두 계산 가능하도록 분리했다.
+  - vertex 근처에서는 midpoint를 숨기고, segment 근처에서만 midpoint를 띄우도록 pixel tolerance를 적용했다.
+  - endpoint와 일반 vertex는 같은 drag 규칙을 사용하고, midpoint drag는 새 좌표 삽입으로 처리한다.
+  - `MOVE` preview layer의 `clickPsblYn="Y"` 기준은 유지했고, vertex layer는 별도 레이어로 계속 분리했다.
+- 정적 검증
+  - `pnpm exec tsc --noEmit --incremental false --pretty false`
+  - 결과: 이번 변경분 관련 신규 타입 오류는 정리했고, 저장소 기존 오류만 남았다.
+  - 남은 기존 오류 예시
+    - `components/common/index.ts` 타입 불일치
+    - `PipeAnalysisPopupPage.tsx`의 `JSON[]` 캐스팅 경고
+    - 공통 chart 컴포넌트 implicit any
+- 로컬 환경 확인
+  - `http://127.0.0.1:3002/map` 응답 200
+  - `http://127.0.0.1:3002/auth/login` 응답 200
+  - `http://127.0.0.1:3002/popup/gisEditSessionPopup` 응답 200
+  - 현재 세션에서는 브라우저 전용 자동화 도구를 확보하지 못해 canvas 기반 midpoint hover/drag 실조작은 수동 재검증 필요로 남긴다.
+
+### 2.8 2026-05-15 편집 세션 팝업 전환 및 도구 아이콘 점검
+
+- 코드 기준 점검
+  - 지도 좌하단 고정 세션 패널 렌더링은 제거했다.
+  - `GIS 편집 세션` popup definition, registry, popup content를 추가해 기존 window popup 체계에 맞췄다.
+  - 메인 `/map`은 GIS 편집 진입 시 세션 팝업을 열고, postMessage로 세션 snapshot을 동기화하도록 바꿨다.
+  - 팝업에서 `마지막 변경 취소`, `세션 초기화`, `항목 focus`를 메인 지도에 다시 전달하도록 연결했다.
+  - 세션 패널의 안내 문구 영역은 제거했다.
+  - `추가`, `이동`, `꼭지점편집`, `삭제` 버튼은 `lucide-react` 아이콘을 사용하도록 바꿨다.
+- 정적 검증
+  - `pnpm exec tsc --noEmit --incremental false --pretty false`
+  - 결과: 여전히 저장소 기존 오류로 실패
+  - 기존 오류 범주
+    - 기존 공통 타입 불일치
+    - 기존 chart implicit any
+- 수동 재검증 필요 항목
+  - 브라우저 팝업 차단 여부
+  - 세션 팝업과 메인 지도 간 메시지 동기화
+  - 도구 아이콘 실제 렌더링
+
+### 2.9 2026-05-21 관로 기본정보 세션 편집 점검
+
+- 코드 기준 점검
+  - `GisEditChange`에 `featureRef`, `basicInfo`, `basicInfoSavedAt`가 추가돼 geometry change와 관로 기본정보 draft를 함께 담을 수 있게 했다.
+  - 하수관로 change를 선택하면 편집 전용 상세정보창을 열고, 기존 `GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd}`로 기본정보를 읽어 와 세션 저장할 수 있게 했다.
+  - 상세정보창 저장은 기존 즉시 `POST /api/v1/fcltppl`이 아니라 `updateChangeBasicInfo`로 change draft만 갱신한다.
+  - 최종 저장 payload는 `changeId`, `featureRef`, `basicInfo`, `beforeGeometry`, `afterGeometry`를 함께 조립하도록 바뀌었다.
+- 정적 검증
+  - `node node_modules/typescript/bin/tsc --noEmit --incremental false --pretty false`
+  - 결과: 기존 저장소 오류로 실패
+  - 확인된 기존 오류
+    - `app/(map-layout)/map/components/common/index.ts` 타입 불일치
+    - `PipeAnalysisPopupPage.tsx`의 `JSON[]` 캐스팅 경고
+    - html 라우트 경로 import 누락
+    - 공통 chart 컴포넌트 implicit any
+  - 이번 변경 파일 관련 신규 오류는 별도 출력되지 않았다.
+- 수동 재검증 필요 항목
+  - 편집 모드에서 실제 하수관로 선택 시 상세정보창이 예상대로 열리는지
+  - 기본정보 저장 후 세션 목록 뱃지가 정상 반영되는지
+  - 최종 payload 미리보기에 관로 기본정보와 geometry가 함께 담기는지
+  - 백엔드 geometry 저장 API 부재 상태에서 사용자가 최종 저장 한계를 어떻게 인지할지
+
+### 2.10 2026-05-21 자동저장 루프/선택 제한 보강 점검
+
+- 코드 기준 점검
+  - 입력값 변경을 `useEffect` 자동 저장으로 처리하던 구조를 제거하고, 실제 `input/select` 변경 이벤트에서만 세션 draft를 갱신하도록 바꿨다.
+  - 편집 팝업 wrapper를 안정화해 입력 중 remount로 인한 스크롤 상단 점프 가능성을 줄였다.
+  - 공통 `GisSelect`에 `canSelectFeature` 가드를 연결해 `MOVE`, `VERTEX_EDIT` + 하수관로 레이어 조합일 때 비하수관로 선택을 선택 단계에서 차단하도록 확장했다.
+  - 비하수관로 차단 시 지도 줌 이동이나 상세정보 전환 없이 상태문구 `하수관로를 선택해주세요.`만 남기도록 정리했다.
+  - `MOVE`, `VERTEX_EDIT`의 하수관로 선택 시 상세정보창 오픈은 preview 준비 완료 대기 대신 `setTimeout(0)` 기준 즉시 오픈으로 단순화했다.
+- 정적 검증
+  - `node node_modules/typescript/bin/tsc --noEmit --incremental false --pretty false`
+  - 결과: 기존 저장소 오류로 실패
+  - 확인된 기존 오류
+    - `app/(map-layout)/map/components/common/index.ts` 타입 불일치
+    - `PipeAnalysisPopupPage.tsx`의 `JSON[]` 캐스팅 경고
+    - html 라우트 경로 import 누락
+    - 공통 chart 컴포넌트 implicit any
+- 수동 재검증 필요 항목
+  - 하수관로 편집 팝업의 입력 중 스크롤 위치 유지
+  - `MOVE`, `VERTEX_EDIT`에서 하수관로 선택 즉시 팝업 오픈
+  - 비하수관로 클릭 시 줌 이동 완전 차단
+  - `ADD` 미리보기와 `MOVE`, `VERTEX_EDIT` interaction 회귀 여부
+
+### 2.11 2026-05-22 최종본/이력 DB 저장 통합 검증
+
+- 검증 환경
+  - 화면: `http://localhost:3002/map`
+  - 프론트 프록시 대상: `http://localhost:8883/sewerage-service`
+  - 백엔드: `sewerage-service` local profile, port `8883`
+  - DB: `sm_bs_ms.tb_ms_swage_ppl`, `sm_bs_ms.tb_ms_edit_swage_ppl`
+- 발견 문제
+  - 브라우저에서 `ADD` 저장 요청은 정상 전송됐지만 최초 검증 시 `500 / E999`가 반환됐다.
+  - DB 직접 확인 결과, 최종본 `tb_ms_swage_ppl`의 다음 fid는 `4132694`였지만 이력 테이블에는 이미 `fid=4132694, edit_sn=0` 이력이 존재했다.
+  - 기존 BE 채번이 최종본 `MAX(fid)+1`만 사용해 삭제 이력이 남은 fid를 재사용했고, 이력 테이블 복합키 `tb_ms_edit_swage_ppl_pk(fid, edit_sn)`와 충돌했다.
+- 조치 내용
+  - 신규 fid 채번 기준을 최종본과 이력 테이블을 합친 `MAX(fid::bigint)+1`로 변경했다.
+  - 브라우저 저장 성공 후 원본 레이어 refresh가 호출되도록 기존 저장 성공 처리 흐름을 유지했다.
+  - 신규 관로의 시설관리번호와 관로관리번호가 비어 있거나 `NEW-*` 임시값이면 저장 API를 호출하지 않고 상세 입력창을 열도록 FE 검증을 추가했다.
+- 브라우저/API 검증 결과
+  - `ADD`: 지도에서 신규 관로를 그리고 `저장` 버튼 클릭, 응답 `200`, `editCd=C`, `editSn=0`, 신규 `fid=4132695`
+  - `MOVE`: 같은 브라우저 세션에서 신규 fid 기준 수정 저장, 응답 `200`, `editCd=U`, `editSn=1`
+  - `DELETE`: 같은 브라우저 세션에서 신규 fid 기준 삭제 저장, 응답 `200`, `editCd=D`, `editSn=2`
+  - 번호 미입력 신규 저장: 저장 요청 `0건`, 상태문구 `신규 하수관로 저장 전 시설관리번호와 관로관리번호를 입력해주세요.` 노출 확인
+- DB 검증 결과
+  - 삭제 후 `tb_ms_swage_ppl`의 테스트 fid 최종본 건수: `0`
+  - 삭제 전 검증 시 `tb_ms_edit_swage_ppl`의 테스트 fid 이력: `0:C,1:U,2:D`
+  - 검증 완료 후 테스트 fid `4132695`의 최종본/이력 흔적은 정리했다.
+  - 중간 자동화 중 잘못 선택된 기존 관로 `fid=2280012`는 직전 이력 기준으로 geometry를 원복했고, 테스트로 생성된 `edit_sn=1` 이력은 삭제했다.
+- 정적 검증
+  - BE: `.\gradlew.bat compileJava test --tests iipbs.sewerage.service.map.SwagePplEditServiceTest` 성공
+  - FE: `pnpm --filter sn exec tsc --noEmit --pretty false`는 저장소 기존 오류로 실패했으며, 이번 GIS 편집 변경 파일 관련 신규 오류는 확인되지 않았다.
+- 남은 확인 사항
+  - 자동화 좌표 클릭으로 `MOVE` 대상을 고를 때, 새 관로와 기존 관로가 겹치면 기존 관로가 선택될 수 있다. 실제 QA에서는 신규 관로를 기존 관로와 겹치지 않는 위치에 생성하거나 fid 기반 재선택 보조가 필요하다.
+  - 저장 전 신규 관로의 시설관리번호/관로관리번호 입력 편의성은 별도 화면 검증에서 추가 확인이 필요하다.
+
+### 2.12 2026-05-26 하수관망도 GIS 편집 UI/기능 상세 재검증
+
+#### 2.12.1 검증 목적
+
+- 하수관망도 화면의 `GIS 편집` 기능을 실제 사용자 조작 흐름 기준으로 재검증한다.
+- `추가`, `이동`, `꼭지점편집`, `삭제`, `저장 검증`, `편집 세션` 흐름을 함께 확인한다.
+- 사용자가 제기한 "기능이 이상한 것 같다"는 관찰을 UI/기능/계약/검증 가능성 관점으로 분해한다.
+- OpenLayers, ArcGIS, QGIS의 일반적인 GIS 편집 UX와 비교해 개선 방향을 정리한다.
+
+#### 2.12.2 검증 환경
+
+- 작업 루트: `D:\workspace`
+- 프론트엔드 앱: `D:\workspace\IIPBS-FRONTEND\frontend\apps\sn`
+- 화면 URL: `http://localhost:3002/map`
+- 백엔드 URL: `http://localhost:8883/sewerage-service`
+- 기준 화면: 하수관망도
+- 기준 편집 대상 레이어: `tb_ms_swage_ppl`
+- 기준 브라우저 검증 방식: 로컬 개발 서버에 로그인 후 실제 지도 화면에서 버튼 클릭, 좌표 클릭, 드래그, 더블클릭 수행
+- 병행 QA: `qa` 서브에이전트로 백엔드 테스트, API 검증, 인증 차단 여부 확인
+
+#### 2.12.3 검증 전제와 환경 제약
+
+- `sn` Next 개발 서버가 `3002` 포트에서 이미 실행 중이었다.
+- `AGENTS.md` 기준에 따라 개발 서버가 실행 중인 상태에서는 `next build`, `pnpm --filter sn run build`, `pnpm turbo run build --filter=sn`을 실행하지 않았다.
+- 로컬 브라우저 직접 검증은 개발 로그인 계정으로 진행했다.
+- QA 서브에이전트는 별도 세션에서 `/auth/login` 인증 차단에 걸려 화면 직접 검증을 수행하지 못했다.
+- 따라서 본 섹션의 UI 직접 조작 결과는 메인 브라우저 검증 결과를 기준으로 하고, 서브에이전트 결과는 API/BE/정적 검증 보조 증적으로 사용한다.
+
+#### 2.12.4 브라우저 진입 및 초기 로딩 상태
+
+- `/map` 직접 접근 시 로그인 페이지로 이동하는 것을 확인했다.
+- 개발 로그인 후 하수관망도 화면에 진입했다.
+- 지도, 좌측 시설 트리, 우측 분석 메뉴, 하수관망도 레이어 표시는 확인됐다.
+- `GIS 편집` 버튼 클릭 시 지도 상단 중앙에 편집 툴바가 표시됐다.
+- 툴바 구성은 `추가`, `이동`, `꼭지점편집`, `삭제`, `저장`으로 확인됐다.
+- 편집 진입 직후 `저장` 버튼은 비활성 상태였다.
+- 상태 문구는 `하수관로 편집 도구를 선택한 뒤 지도에서 편집 작업을 진행하세요.`로 표시됐다.
+- 지도 초기 로딩 중 다음 오류가 관찰됐다.
+  - `BIZ_TY_CD 데이터 로드 실패`
+  - `BIZ_SE_CD 데이터 로드 실패`
+  - 레이어 설정 조회 실패, `500 Internal Server Error`
+  - 메뉴 wrapper 계열 `AxiosError`
+- 위 오류는 GIS 편집 단독 결함으로 단정하지 않았지만, 편집 QA 중 화면 신뢰도와 재현성을 낮추는 환경/연동 리스크로 기록한다.
+
+#### 2.12.5 `추가` 검증 결과
+
+| 항목 | 내용 |
+| --- | --- |
+| 재현 절차 | `GIS 편집` 진입 후 `추가` 선택, 지도 위 여러 지점 클릭, 마지막 지점 더블클릭 |
+| 기대 결과 | 신규 하수관로 선형 sketch가 생성되고, 지도 위에서 선택 가능한 preview가 명확히 표시되며, 상세정보 입력 패널과 저장 가능 상태가 연결된다. |
+| 실제 결과 | 신규 변경분 `NEW-1`이 생성되고 `저장` 버튼이 활성화됐다. 우측 상세정보 패널이 열렸고 기본정보 입력 영역이 표시됐다. |
+| 통과 항목 | 도구 활성화, 선형 입력 완료, 신규 변경분 생성, 상세 패널 오픈, 저장 버튼 활성화 |
+| 문제 항목 | 신규 선형이 지도 위에서 충분히 강조되지 않았고, 우측 상세정보 패널이 지도 영역을 크게 가려 생성 위치 확인이 어렵다. |
+| 판정 | 부분 통과 |
+
+- `추가` 도구의 기본 기능은 동작한다.
+- 다만 사용자는 "내가 방금 추가한 관로가 어디에 생겼는지"를 지도에서 즉시 확인하기 어렵다.
+- 신규 객체는 고대비 선형, 라벨, 선택 테두리, 꼭지점 표시 중 최소 하나 이상의 강한 피드백이 필요하다.
+- 상세정보 패널이 우측 지도 영역을 크게 차지하므로 추가 직후 선형 위치와 패널 입력을 동시에 확인하기 어렵다.
+
+#### 2.12.6 `이동` 검증 결과
+
+| 항목 | 내용 |
+| --- | --- |
+| 재현 절차 | 신규 관로 추가 후 `이동` 선택, 신규 관로가 생성된 것으로 예상되는 위치에서 클릭 및 드래그 |
+| 기대 결과 | 이동 대상이 선택되고, 이동용 preview 또는 선택 테두리가 표시되며, 드래그 시 객체 geometry만 이동한다. |
+| 실제 결과 | 이동 도구 안내 문구는 표시됐지만, 대상 선택 상태와 드래그 핸들이 명확하지 않았다. 드래그 시 객체 이동보다 지도 pan처럼 보이는 동작이 관찰됐다. |
+| 통과 항목 | 도구 활성화, 상태 문구 표시 |
+| 문제 항목 | 선택 대상 식별 불명확, 이동 preview 식별 불명확, 드래그 중 지도 이동과 객체 이동이 구분되지 않음 |
+| 판정 | 불안정 |
+
+- `이동`은 GIS 편집에서 사용자가 가장 직관적으로 기대하는 기능 중 하나지만, 현재 화면에서는 "어떤 객체가 선택됐고 무엇을 잡고 움직여야 하는지"가 명확하지 않다.
+- 편집 대상이 선택되면 지도 pan보다 객체 이동 interaction이 우선되어야 한다.
+- 선택 후 이동 가능한 상태에서는 cursor, 선택 테두리, preview 색상, 상태 문구가 함께 바뀌어야 한다.
+
+#### 2.12.7 `꼭지점편집` 검증 결과
+
+| 항목 | 내용 |
+| --- | --- |
+| 재현 절차 | `꼭지점편집` 선택 후 신규 관로 또는 기존 관로로 보이는 위치를 클릭하고 vertex handle 표시 및 드래그 가능 여부 확인 |
+| 기대 결과 | 실꼭지점은 주황색 handle로, 새 점 삽입 후보 midpoint는 흰색 handle로 안정적으로 표시된다. 꼭지점을 드래그하면 선형 geometry가 즉시 갱신된다. |
+| 실제 결과 | 안내 문구는 표시됐지만 실제 주황색 꼭지점과 흰색 midpoint handle을 안정적으로 확인하지 못했다. 꼭지점 선택/드래그 가능 상태도 사용자 관점에서 확정하기 어려웠다. |
+| 통과 항목 | 도구 활성화, 상태 문구 표시 |
+| 문제 항목 | vertex handle 표시 불명확, midpoint 삽입 후보 확인 불가, 드래그 가능 대상 식별 불가 |
+| 판정 | 불량 |
+
+- `꼭지점편집`은 현재 가장 큰 기능 리스크다.
+- 기존 문서에서도 `VERTEX_EDIT`는 QGIS 기준 사용자 경험 재정렬과 실조작 수동 재검증이 필요한 항목으로 남아 있었다.
+- 이번 재검증에서도 사용자가 기대하는 "꼭지점이 보이고 잡아서 움직인다"는 핵심 피드백이 충분하지 않았다.
+- 선형 편집 도구는 실꼭지점, 선택 꼭지점, hover segment, midpoint 삽입 후보를 시각적으로 구분해야 한다.
+
+#### 2.12.8 `삭제` 검증 결과
+
+| 항목 | 내용 |
+| --- | --- |
+| 재현 절차 | `삭제` 선택 후 신규 관로 또는 기존 관로로 보이는 위치 클릭 |
+| 기대 결과 | 삭제 대상이 선택되고, 즉시 최종 삭제하지 않더라도 pending-delete 스타일이 표시되며, 세션 변경목록에 삭제 변경분이 추가된다. |
+| 실제 결과 | 삭제 도구 안내 문구는 표시됐지만, 어떤 객체가 삭제 대상으로 선택됐는지 명확한 지도 피드백을 확인하지 못했다. |
+| 통과 항목 | 도구 활성화, 상태 문구 표시 |
+| 문제 항목 | 삭제 대상 선택 피드백 부족, pending-delete 스타일 확인 어려움, 되돌리기 흐름 노출 부족 |
+| 판정 | 불안정 |
+
+- 삭제는 저장 전 pending 상태가 반드시 명확해야 한다.
+- 현재처럼 선택 피드백이 약하면 사용자는 기존 관로를 잘못 삭제 대상으로 올렸는지 확인하기 어렵다.
+- 삭제 대상은 빨간 점선, 반투명 처리, `삭제 예정` 라벨, 세션 목록 강조가 함께 필요하다.
+
+#### 2.12.9 저장 검증 결과
+
+| 항목 | 내용 |
+| --- | --- |
+| 재현 절차 | 신규 관로 `NEW-1` 생성 후 필수값을 충분히 입력하지 않은 상태에서 `저장` 클릭 |
+| 기대 결과 | 저장 API 호출 전 필수값 누락을 차단하고, 누락 필드와 입력 위치를 정확히 안내한다. |
+| 실제 결과 | 저장 API 호출 전 차단됐고, 상세정보 패널이 열리며 상태 문구가 표시됐다. |
+| 통과 항목 | 신규 관로 필수값 누락 시 저장 API 호출 차단 |
+| 문제 항목 | 상태 문구와 화면 필드명이 일치하지 않음 |
+| 판정 | 부분 통과 |
+
+- 표시 문구: `신규 하수관로 저장 전 시설관리번호와 관로관리번호를 입력해주세요.`
+- 화면 필드명: `시설관리번호`, `기관관리번호`
+- `관로관리번호`와 `기관관리번호`가 서로 다른 의미라면 화면에 두 필드를 모두 분명히 노출해야 한다.
+- 같은 의미라면 필드명과 검증 문구를 통일해야 한다.
+- 이 불일치는 저장 실패 원인을 사용자가 잘못 이해하게 만들 수 있으므로 UI 문구 결함으로 분류한다.
+
+#### 2.12.10 편집 세션 및 팝업 검증 결과
+
+| 항목 | 내용 |
+| --- | --- |
+| 기대 결과 | GIS 편집 진입 시 편집 세션 목록, 마지막 변경 취소, 세션 초기화, 항목 focus가 사용자가 확인 가능한 위치에 표시된다. |
+| 실제 결과 | 메인 지도 툴바는 표시됐지만, 세션 팝업 또는 변경목록이 사용자에게 명확히 노출되는지 확인이 어려웠다. |
+| 판정 | 불안정 |
+
+- 기존 구현 기록상 GIS 편집 세션은 popup 기반으로 전환되어 있다.
+- 실제 사용자는 브라우저 팝업 차단, 포커스 이동, 별도 창 위치 문제로 세션 상태를 놓칠 수 있다.
+- 편집 기능은 저장 전 변경목록 확인이 중요하므로, 팝업이 열리지 않거나 가려져도 메인 화면 안에서 최소 변경 건수와 마지막 변경 요약은 확인 가능해야 한다.
+
+#### 2.12.11 서브에이전트 QA 결과 요약
+
+- 코드 변경 없이 읽기, 브라우저, API, 테스트 중심으로 검증했다.
+- BE `.\gradlew.bat compileJava`: 통과
+- BE `.\gradlew.bat test`: 통과, `BUILD SUCCESSFUL`
+- FE 빌드: 미실행
+  - `sn` 개발 서버가 `3002`에서 실행 중이므로 사용자 확인 없이 빌드하지 않았다.
+- FE `pnpm --filter sn exec tsc --noEmit --pretty false`: 실패
+  - 기존 공통/앱 TypeScript 오류 다수 확인
+  - 이번 GIS 편집 단독 신규 오류로 단정하지 않음
+- 서브에이전트 브라우저 검증: `/auth/login` 인증 차단으로 GIS 화면 직접 검증 불가
+- API 검증:
+  - `GET /sewerage-service/api/v1/map/gisEdit/swagePpl/meta?lyrGrp=SN_NETWORK`: 통과
+  - 편집 대상: `tb_ms_swage_ppl`
+  - 지원 편집: `ADD`, `MOVE`, `VERTEX_EDIT`, `DELETE`
+  - 저장 테이블: `sm_bs_ms.tb_ms_swage_ppl`
+  - 이력 테이블: `sm_bs_ms.tb_ms_edit_swage_ppl`
+  - 빈 변경분 저장 요청: `400 GIS_EDIT_EMPTY_CHANGES` 정상
+  - 비관로 레이어 저장 요청: `400 GIS_EDIT_PIPE_ONLY` 정상
+  - `GET /gisEdit/swagePpl/histories?fid=1`: `200 OK`
+- 서브에이전트 증적:
+  - `D:\workspace\qa-evidence\sfr-012-003-auth-blocker.png`
+  - `D:\workspace\qa-evidence\sfr-012-003-session-popup-direct.png`
+
+#### 2.12.12 외부 GIS 편집 UX 비교
+
+| 비교 대상 | 참고 기준 | 현재 화면과의 차이 |
+| --- | --- | --- |
+| OpenLayers Draw | `Draw` interaction은 sketch 시작, 진행, 완료 이벤트를 별도 interaction으로 관리한다. | 현재 `추가`는 완료 후 신규 sketch의 시각 강조가 약하다. |
+| OpenLayers Modify | `Modify` interaction은 vertex 조작을 명확한 handle 기반으로 제공한다. | 현재 `꼭지점편집`은 실꼭지점과 midpoint handle이 안정적으로 보이지 않는다. |
+| OpenLayers Translate | `Translate` interaction은 선택 feature 이동을 지도 pan과 분리해 처리한다. | 현재 `이동`은 드래그 시 객체 이동과 지도 pan이 사용자에게 구분되지 않는다. |
+| ArcGIS Map Viewer / Web Editor | 편집 대상 선택, vertex 편집, 저장 전 확인 흐름을 사용자에게 명확히 제공한다. | 현재 세션 변경목록과 pending 상태 노출이 약하다. |
+| QGIS Vertex Tool | 실꼭지점, segment, midpoint 삽입 후보를 시각적으로 구분한다. | 현재 `VERTEX_EDIT`는 QGIS 수준의 조작 피드백에 도달하지 못했다. |
+
+참고 링크:
+
+- OpenLayers Draw: https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html
+- OpenLayers Modify: https://openlayers.org/en/latest/apidoc/module-ol_interaction_Modify-Modify.html
+- OpenLayers Translate: https://openlayers.org/en/latest/apidoc/module-ol_interaction_Translate-Translate.html
+- ArcGIS Online Map Viewer editing: https://doc.arcgis.com/en/arcgis-online/manage-data/edit-features-mv.htm
+- ArcGIS Web Editor vertex editing: https://doc.arcgis.com/en/web-editor/latest/create-and-edit/edit-vertices.htm
+- QGIS geometry editing: https://docs.qgis.org/latest/en/docs/user_manual/working_with_vector/editing_geometry_attributes.html
+
+#### 2.12.13 결함 및 개선 백로그
+
+| 우선순위 | 구분 | 내용 | 개선 방향 |
+| --- | --- | --- | --- |
+| P1 | 기능/UX | `이동`, `꼭지점편집`, `삭제`에서 편집 대상 선택 피드백이 불충분하다. | 선택 feature를 고대비 overlay로 표시하고, 선택/drag 가능 상태를 cursor와 상태 문구로 함께 제공한다. |
+| P1 | 기능 | `꼭지점편집`의 vertex handle과 midpoint handle이 안정적으로 확인되지 않는다. | 실꼭지점, 선택 꼭지점, hover segment, midpoint 삽입 후보를 별도 style로 분리한다. |
+| P1 | 기능 | `이동` 드래그가 지도 pan과 구분되지 않는다. | 선택 feature drag 중 지도 pan을 일시 제한하고, 이동 preview source를 명확히 분리한다. |
+| P1 | 기능/세션 | 세션 변경목록과 pending 상태가 사용자에게 명확하지 않다. | 팝업 실패 fallback 또는 메인 지도 내 축약 세션 패널을 제공한다. |
+| P2 | UI | `추가` 후 신규 선형이 지도에서 충분히 강조되지 않는다. | 신규 객체 label, 선택 테두리, vertex 표시, 자동 focus를 보강한다. |
+| P2 | UI | 상세정보 패널이 지도 확인을 방해한다. | 패널 폭/위치/접힘 상태를 조정하고, 선택 객체 focus와 겹치지 않게 한다. |
+| P2 | 문구 | 저장 검증 문구의 `관로관리번호`와 화면 필드 `기관관리번호`가 불일치한다. | 백엔드 계약 기준으로 필드명을 통일하고 누락 필드를 행 단위로 강조한다. |
+| P2 | 연동 | 지도 초기 로딩 중 코드/레이어 설정 조회 오류가 발생한다. | GIS 편집 결함과 분리해 공통 코드/레이어 설정 API 오류를 먼저 정리한다. |
+| P3 | QA | QA 서브에이전트 세션에서 인증 차단으로 화면 검증이 막힌다. | QA용 로컬 로그인 절차, 테스트 계정, 토큰 주입 절차를 문서화한다. |
+
+#### 2.12.14 종합 판정
+
+- 백엔드 컴파일, 테스트, 기본 GIS 편집 API 계약은 정상 범위로 확인됐다.
+- 프론트엔드 정적 검증은 기존 TypeScript 오류로 실패 상태이며, 이번 검증만으로 GIS 편집 단독 신규 오류라고 단정하지 않는다.
+- 실제 사용자 기준의 GIS 편집 UI는 `추가`만 부분 통과이고, `이동`, `꼭지점편집`, `삭제`는 선택 피드백과 조작 피드백이 부족해 개선 필요로 판정한다.
+- 특히 `VERTEX_EDIT`는 기존 검증 문서에서 이미 진행 중/리스크로 분류된 항목이며, 이번 재검증에서도 동일하게 핵심 개선 대상으로 확인됐다.
+- 다음 개선 순서는 `선택 피드백`, `vertex handle`, `이동 drag와 지도 pan 분리`, `세션 변경목록 노출`, `저장 검증 문구 정리` 순서가 적절하다.
+
+### 2.13 2026-05-26 Playwright 기반 GIS 편집 실조작 재검증
+
+#### 2.13.1 검증 범위와 경로
+
+- 검증 방식: Playwright MCP 브라우저 자동화 기반 실제 화면 조작
+- 로그인 경로: `http://localhost:3002/auth/login`
+- 로그인 계정: `CLEANWATER`
+- 지도 경로: `http://localhost:3002/map`
+- 백엔드 경로: `http://localhost:8883/sewerage-service`
+- 세션 팝업 경로: `http://localhost:3002/popup/gisEditSessionPopup`
+- 테스트 관리번호:
+  - 1차: `QA-PW-20260526-001`, `clientTempId=NEW-1`
+  - 2차: `QA-PW-20260526-002`, `clientTempId=NEW-2`
+- 최종 정리 상태: 저장 API가 두 차례 모두 `500 E999`로 실패해 `fid/editSn`은 발급되지 않았고, DB 삭제 저장은 수행할 대상이 없었다. 미저장 로컬 세션은 `마지막 변경 취소`로 `총 0건`까지 정리했다.
+
+#### 2.13.2 기능별 실조작 결과
+
+| 기능 | 재현 절차 | 기대 결과 | 실제 결과 | 심각도 | 개선 제안 |
+| --- | --- | --- | --- | --- | --- |
+| 로그인/진입 | `/auth/login`에서 `CLEANWATER` 로그인 후 `/map` 진입, `GIS 편집` 클릭 | 지도와 편집 툴바, 세션 팝업이 표시된다. | 로그인 성공, `/map` 진입 성공, `GIS 편집` 클릭 시 툴바와 세션 팝업 탭 표시 확인 | 통과 | QA 계정 기반 재현 절차를 검증 문서에 유지한다. |
+| 추가 | 빈 위치에 선형 클릭-더블클릭, 상세정보에 `QA-PW-20260526-001/002` 입력, `저장` 클릭 | 신규 관로가 저장되고 응답에서 신규 `fid`, `editSn=0`, `editCd=C`가 확인된다. | preview, 상세 패널, 세션 목록, 저장 버튼 활성화는 확인됐으나 저장 API가 2회 모두 `500 E999`로 실패했다. `fid/editSn` 미발급 | P1 | BE는 `E999/ERROR` 대신 원인 코드와 메시지를 반환해야 한다. FE는 저장 실패 시 사용자가 조치 가능한 필드/원인을 표시해야 한다. |
+| 추가 payload | 상세정보의 `시설관리번호`, `기관관리번호`에 테스트 번호 입력 후 세션 payload 확인 | 입력한 관리번호가 저장 payload의 필수 식별 필드에 일관되게 반영된다. | `fclt_mng_no`, `inst_mng_no`에는 값이 들어가지만 `fcltMngNo`, `mngInstCd`는 빈 문자열로 전송됐다. | P1 | 신규 관로 입력값 병합 시 빈 문자열을 유효값으로 우선하지 말고 snake/camel 필드를 동일 값으로 정규화해야 한다. |
+| 이동 | 저장 실패 후 남은 `NEW-2` preview 기준 `이동` 선택, 대상 클릭 후 drag | 대상 관로가 선택되고 지도 pan이 아니라 관로 preview가 이동한다. | 상태문구는 이동 모드로 전환됐지만 대상 선택/drag 후 세션 변경이나 화면상 선택 피드백을 확인하지 못했다. | P2 | 미저장 ADD preview도 선택 가능 여부를 명확히 하거나, 지원하지 않는다면 상태문구로 제한을 안내한다. |
+| 꼭지점편집 | `꼭지점편집` 선택 후 `NEW-2` preview 클릭 및 vertex drag 시도 | 주황색 실꼭지점과 흰색 midpoint가 보이고 vertex/midpoint 조작이 가능하다. | 상태문구는 vertex 안내로 전환됐지만 주황색/흰색 handle과 실제 drag 반영을 확인하지 못했다. | P2 | 선택 성공/실패 피드백, vertex handle 표시 조건, midpoint 삽입 가능 범위를 화면에서 명확히 표시한다. |
+| 삭제 | `삭제` 선택 후 `NEW-2` preview 클릭 | 삭제 예정 스타일, 세션 변경목록, 되돌리기 가능 상태가 표시된다. | 저장된 fid가 없어 최종 삭제 저장은 불가했다. 미저장 preview 클릭 후 삭제 변경 전환은 확인되지 않았고, 세션에는 ADD 1건만 남았다. | P2 | 미저장 ADD 객체 삭제는 세션 목록의 `마지막 변경 취소`와 같은 명시적 UI로 안내하거나 지도 클릭 삭제를 지원한다. |
+| 취소/롤백 | 세션 팝업에서 `마지막 변경 취소` 클릭 | 마지막 변경분이 제거되고 저장할 변경분이 없어야 한다. | `총 0건`, `저장할 편집 변경분이 없습니다.` 확인. 지도 상태문구도 `가장 최근 편집 변경분을 세션에서 제거했습니다.`로 표시 | 통과 | 최종 저장 실패 후 사용자가 쉽게 정리할 수 있도록 이 동작을 메인 툴바에도 노출하는 방안을 검토한다. |
+
+#### 2.13.3 네트워크/API 응답
+
+| 순번 | 요청 | 테스트 관리번호 | 응답 | 기록 |
+| --- | --- | --- | --- | --- |
+| 147 | `POST http://localhost:3002/sewerage-service/api/v1/map/gisEditSessions/save` | `QA-PW-20260526-001` | `500 Internal Server Error`, body `{"message":"ERROR","status":500,"code":"E999"}` | `clientTempId=NEW-1`, `fid/editSn` 미발급 |
+| 149 | `POST http://localhost:3002/sewerage-service/api/v1/map/gisEditSessions/save` | `QA-PW-20260526-002` | `500 Internal Server Error`, body `{"message":"ERROR","status":500,"code":"E999"}` | `clientTempId=NEW-2`, `fid/editSn` 미발급 |
+
+- 2차 저장 요청 주요 payload:
+  - `layerId`: `tb_ms_swage_ppl`
+  - `saveTargetType`: `FINAL`
+  - `view.srs`: `EPSG:5179`
+  - `editType`: `ADD`
+  - `geometry.type`: `LineString`
+  - `coordinates`: `[[1068626.8294507712,1774978.3276935548],[1068741.356641528,1774930.6080307395],[1068855.8838322847,1774978.3276935548]]`
+  - `attributes.fclt_mng_no`: `QA-PW-20260526-002`
+  - `attributes.inst_mng_no`: `QA-PW-20260526-002`
+  - `attributes.fcltMngNo`: 빈 문자열
+  - `attributes.mngInstCd`: 빈 문자열
+
+#### 2.13.4 콘솔 오류
+
+- `GET http://localhost:3002/server/cms-service/api/v1/menu-roles/SN` -> `401 Unauthorized`
+- `POST http://localhost:3002/sewerage-service/api/v1/map/gisEditSessions/save` -> `500 Internal Server Error`
+- `GIS 편집 저장 실패: Error: ERROR`
+- `AxiosError`
+
+#### 2.13.5 화면 캡처
+
+- `D:\workspace\qa-evidence\sfr-012-003-login-map-loaded.png`
+- `D:\workspace\qa-evidence\sfr-012-003-add-before-save.png`
+- `D:\workspace\qa-evidence\sfr-012-003-session-add-failed-payload.png`
+- `D:\workspace\qa-evidence\sfr-012-003-add-retry-before-save.png`
+- `D:\workspace\qa-evidence\sfr-012-003-move-unsaved-no-selection.png`
+- `D:\workspace\qa-evidence\sfr-012-003-vertex-unsaved-no-handles.png`
+- `D:\workspace\qa-evidence\sfr-012-003-session-undo-clean.png`
+
+#### 2.13.6 현재 판정
+
+- `ADD`는 화면 조작, 상세정보 입력, 세션 반영, 저장 버튼 활성화까지는 통과했지만 최종 저장 API가 `500 E999`로 실패해 통합 검증은 실패로 판정한다.
+- `MOVE`, `VERTEX_EDIT`, `DELETE`는 저장된 테스트 fid가 없어 최종본 기준 검증을 수행하지 못했다. 미저장 preview 기준으로는 선택/drag/삭제 피드백이 명확하지 않아 보류 및 UX 결함으로 분류한다.
+- 테스트 관리번호 `QA-PW-20260526-001/002`는 저장 실패로 `fid/editSn`이 생성되지 않았다. 최종본 삭제 저장 정리 대상은 없었고, FE 로컬 세션은 `총 0건`으로 정리했다.
+- `next build`, `pnpm --filter sn run build`, `pnpm turbo run build --filter=sn`은 실행하지 않았다. `sn` dev server가 `3002`에서 실행 중이므로 AGENTS.md 기준에 따라 빌드 검증은 제외했다.
+
+### 2.14 2026-06-08 스냅핑 토글 / Delete 키 꼭지점 삭제 코드 반영 점검
+
+- 코드 기준 점검
+  - `GisEditToolbar`에 `스냅핑` on/off 버튼이 추가됐고, 편집 세션 팝업 헤더에도 `스냅핑 ON/OFF` 상태가 보이도록 반영했다.
+  - `useGisEdit`는 `isSnapEnabled` 상태를 관리하고, `MOVE`, `VERTEX_EDIT` 안내 문구에 스냅핑 상태를 함께 반영한다.
+  - 초기 반영 직후 `ADD`에는 스냅핑이 연결되지 않아 사용자가 스냅핑 ON 상태로 신규 관로를 그려도 기존 관로에 붙지 않는 문제가 있었다.
+  - 후속 수정으로 `page.tsx`의 `ADD`, `MOVE`, `VERTEX_EDIT` interaction 진입 시 현재 보이는 하수관로 원본/preview feature를 묶은 `Snap` interaction을 함께 추가한다.
+  - `VERTEX_EDIT` 중 vertex handle을 클릭하면 선택 상태가 유지되고, 키보드 `Delete`로 해당 꼭지점을 삭제한 뒤 `updateChangeGeometry(..., { keepVertexEditActive: true })` 흐름으로 세션/preview를 다시 갱신한다.
+  - midpoint는 클릭 시 안내 문구만 내리고 Delete 삭제 대상에서는 제외한다.
+  - 꼭지점 삭제 유틸은 선형 최소 2점, 폴리곤 최소 3점을 보장하도록 방어 로직이 들어갔다.
+- 정적 검증
+  - 실행 명령
+    - `node apps/sn/node_modules/typescript/bin/tsc -p apps/sn/tsconfig.json --noEmit --pretty false --ignoreDeprecations 5.0`
+  - 결과
+    - 이번 변경분 관련 신규 타입 오류는 정리했다.
+    - 아래 기존 저장소 오류는 그대로 남아 있다.
+      - `app/(map-layout)/map/components/common/index.ts` 타입 불일치
+      - `app/(map-layout)/map/page.tsx` 기존 null 가능성 경고 1건
+      - `app/html/(with-base-layout)/layout.tsx` import 누락
+      - 공통 chart 컴포넌트 implicit any
+- 수동 재검증 필요 항목
+  - 스냅핑 `ON/OFF`에 따라 `ADD`, `MOVE`, `VERTEX_EDIT` 체감이 실제로 달라지는지
+  - 주황색 실꼭지점 클릭 후 `Delete` 입력이 정상 동작하는지
+  - 2점만 남은 선형에서 Delete가 차단되는지
+  - 겹친 handle 묶음에서 Delete가 기대한 범위만 제거하는지
+
+### 2.15 2026-06-08 QGIS 기준 1차 스냅 재구현 점검
+
+- 코드 기준 점검
+  - 기존 “현재 지도에 이미 올라온 feature를 임시 수집”하던 방식 대신, 현재 화면 BBOX 기준 `tb_ms_swage_ppl` WFS를 직접 다시 읽어오는 전용 pipe snap source를 추가했다.
+  - `ADD`는 `Draw + Snap(source)` 구조로 다시 연결했고, `VERTEX_EDIT`도 custom vertex handle 위에 같은 pipe snap source를 사용하도록 조정했다.
+  - 후속 보정으로 `MOVE`도 같은 pipe snap source를 우선 사용하도록 확장했다.
+  - `VERTEX_EDIT`에서 기존 관로를 편집하는 경우에는 자기 자신 fid를 snap source에서 제외해 원본 자기 geometry에 다시 달라붙는 현상을 줄이도록 보강했다.
+  - `moveend` 시 pipe snap source를 재조회해 현재 보이는 원본 하수관로를 기준으로 스냅 상태를 갱신한다.
+- 정적 검증
+  - 실행 명령
+    - `node apps/sn/node_modules/typescript/bin/tsc -p apps/sn/tsconfig.json --noEmit --pretty false --ignoreDeprecations 5.0`
+  - 결과
+    - 이번 1차 재구현으로 인한 신규 타입 오류는 정리했다.
+    - 남은 오류는 기존 저장소 오류와 기존 `page.tsx` null 가능성 1건이다.
+- 수동 재검증 필요 항목
+  - 기존 오수관 끝점/선분 근처에서 `ADD` 시작점과 끝점이 실제로 붙는지
+  - 기존 오수관 꼭지점 근처에서 `VERTEX_EDIT` 주황색 실꼭지점이 실제로 붙는지
+  - 기존 오수관 끝점/선분 근처에서 `MOVE` 결과 geometry가 실제로 붙는지
+  - 지도 이동 후 다른 위치에서도 snap source가 새로 갱신되어 계속 붙는지
+
+### 2.16 2026-06-08 MOVE grip 기준 재보정 및 입력정보 조회 오류 점검
+
+- 코드 기준 점검
+  - `MOVE`는 이제 관로 선택 순간 클릭 위치에서 가장 가까운 관로 꼭지점 meta를 `move grip`으로 기억한다.
+  - 드래그 시작/중/종료 시 원본 geometry snapshot을 다시 만들고, `move grip`이 하수관로 원본 snap source에 붙도록 전체 geometry를 재정렬한다.
+  - 따라서 `MOVE`도 `ADD`, `VERTEX_EDIT`처럼 “사용자가 조작하는 한 점이 스냅 기준”이 되도록 맞췄다.
+  - 관로 상세 팝업의 입력정보 조회는 `fcltMngNo`, `mngInstCd`를 `encodeURIComponent(...)` 처리하고, `NEW-*` 임시값 조회를 차단하도록 보강했다.
+- 정적 검증
+  - 실행 명령
+    - `node apps/sn/node_modules/typescript/bin/tsc -p apps/sn/tsconfig.json --noEmit --pretty false --ignoreDeprecations 5.0`
+  - 결과
+    - 이번 보정으로 인한 신규 타입 오류는 정리했다.
+    - 저장소 기존 오류만 남아 있다.
+- 수동 재검증 필요 항목
+  - 관로 끝점 근처를 잡고 `MOVE`할 때 grip 기준으로 자연스럽게 붙는지
+  - 관로 중간을 잡고 `MOVE`했을 때도 가장 가까운 관로 꼭지점을 기준으로 결과가 일관적인지
+  - 이동 중 관로 상세 팝업이 열려도 `fetchPipeInputInfo` 500이 재발하지 않는지
+
+### 2.17 2026-06-26 MOVE 도구 on/off 요구사항 분석 결과
+
+- 문서/코드 대조 결과
+  - 툴바는 이미 같은 `이동` 버튼을 다시 누르면 `deactivateTool()`로 꺼지는 구조다.
+  - 현재 “한 번 이동하면 이동이 꺼지는” 동작은 사용자가 버튼을 다시 눌러서가 아니라 `MOVE` `translateend` 이후 `updateChangeGeometry()` 기본 경로가 `activeTool`을 `null`로 비우기 때문에 발생한다.
+  - `VERTEX_EDIT`는 `keepVertexEditActive` 옵션으로 연속 편집을 유지하는 특수 경로가 있으나, `MOVE`는 같은 유지 옵션이 없다.
+- 이번 라운드 결과
+  - `useGisEdit.updateChangeGeometry()`에 `keepMoveToolActive` 옵션을 추가했다.
+  - `MOVE` `translateend` 호출에서 `{ keepMoveToolActive: true }`를 넘겨 이동 완료 후에도 `activeTool="MOVE"`가 유지되도록 했다.
+  - `pendingInteraction`은 이동 완료 후 비워 다음 관로 클릭이 새 이동 대상으로 처리되게 했다.
+- 정적 검증
+  - 실행 명령: `node apps/sn/node_modules/typescript/bin/tsc -p apps/sn/tsconfig.json --noEmit --pretty false --ignoreDeprecations 5.0`
+  - 결과: 실패. 저장소 기존 오류(`components/common/index.ts`, `floodHistoryTypes.ts`, `page.tsx` 기존 null 가능성, html route, chart props implicit any`)에서 중단됐다.
+  - 이번 변경 파일인 `useGisEdit.ts` 관련 신규 오류는 출력되지 않았다.
+- 후속 검증 필요
+  - 관로 A 이동 후 이동 버튼 active 유지 여부
+  - 관로 B 연속 이동 가능 여부
+  - 이동 버튼 재클릭 off 여부
+  - `추가`/`꼭지점편집`/`삭제`/`스냅핑`/`닫기`/`저장` 회귀 여부
+
+## 3. 현재 검증 상태
+
+### 3.1 통과
+
+- `GIS 편집` 모드 진입/종료
+- 레이어별 도구 활성 규칙
+- 세션 `undo`, `reset`
+- `MOVE`의 기본 preview drag
+- `스냅핑` 토글 상태의 툴바/세션 스냅샷 반영
+- `VERTEX_EDIT` 실꼭지점 선택 후 `Delete` 키 처리 코드 경로
+- `ADD`, `VERTEX_EDIT`의 하수관로 전용 WFS snap source 연결
+- `MOVE`의 grip vertex 기준 snap 보정 코드 경로
+- 하수관로 `ADD/MOVE/DELETE` 최종본/이력 DB 저장
+
+### 3.2 진행 중
+
+- `ADD` geometry family별 직접 캡처
+- 2026-05-26 Playwright 재검증 기준 `ADD` 최종 저장 API `500 E999` 원인 분석 및 재검증
+- `VERTEX_EDIT`의 QGIS 기준 사용자 경험 재정렬
+- `ADD`, `VERTEX_EDIT`의 실제 QGIS 체감 스냅 수동 재검증
+- `MOVE`, `VERTEX_EDIT` 실조작 수동 재검증
+- `MOVE` grip 기준 snap 체감 수동 재검증
+- `스냅핑 ON/OFF` 체감과 실제 snap 대상 범위 수동 재검증
+- `Delete` 꼭지점 삭제 후 남은 선형 연결 상태 수동 재검증
+- 2026-05-26 재검증에서 확인된 `이동`, `꼭지점편집`, `삭제` 선택 피드백/조작 피드백 개선
+
+### 3.3 보류
+
+- 저장 성공 후 GeoServer/GWC 캐시 무효화 운영 방식 검증
+- `ADD` 저장 실패로 인한 신규 fid 기반 `MOVE/VERTEX_EDIT/DELETE/삭제 저장 정리` 재검증
+- QA 서브에이전트 또는 독립 검증자가 사용할 수 있는 로컬 로그인/인증 절차 문서화
+
+## 4. 보류/리스크
+
+- 2026-05-26 Playwright 재검증에서 신규 관로 저장 API가 `500 E999`로 실패해 최종본 기준 편집 시나리오가 차단됐다.
+- 신규 관로 상세정보 저장 payload에서 `fclt_mng_no`/`inst_mng_no`는 입력값이 들어가지만 `fcltMngNo`/`mngInstCd`는 빈 문자열로 남아 필수 식별자 정합성 리스크가 있다.
+- dev 서버가 켜져 있으면 `next build`를 함께 돌리기 어렵다.
+- `next lint`는 환경 이슈로 안정적인 회귀 수단이 되지 못하고 있다.
+- 지도 캔버스 기반 drag/vertex 테스트는 수동 브라우저 검증 의존도가 높다.
+- `VERTEX_EDIT`는 하수관로 `LineString`/`MultiLineString` 처리와 vertex marker UX를 다시 고정해야 한다.
+- 현재 저장소의 기존 TypeScript 오류 때문에 변경분만 분리한 정적 통과 여부를 보장하기 어렵다.
+- 기존 관로와 겹친 위치에서 자동 클릭 기반 `MOVE/DELETE` 검증을 수행하면 의도하지 않은 기존 관로가 선택될 수 있다.
+- `GIS 편집 세션`이 popup에 의존하면 팝업 차단, 포커스 이동, 별도 창 위치 문제로 사용자가 변경목록을 놓칠 수 있다.
+- 저장 검증 메시지와 화면 필드명이 불일치하면 신규 관로 저장 실패 원인을 사용자가 잘못 이해할 수 있다.
+- 지도 초기 로딩 오류가 남아 있으면 GIS 편집 결함과 공통 지도/코드/레이어 설정 오류를 분리하기 어렵다.
+- 스냅핑은 현재 source에 로드된 하수관로 원본/preview만 대상으로 하므로, 화면 밖 객체나 미로딩 객체까지는 맞추지 못할 수 있다.
+- 겹친 handle을 하나의 묶음으로 보여주는 현재 구조상, 같은 좌표를 공유하는 raw vertex는 Delete 시 함께 제거될 수 있다.
+
+## 4-1. 관측 증적 요약
+
+- 자동으로 확인된 항목
+  - `CLEANWATER` 계정 로그인 후 `/map` 진입
+  - `GIS편집` 모드 진입/종료
+  - 신규 관로 `ADD` preview 생성, 상세정보 입력, 세션 목록 반영
+  - 레이어별 도구 활성 규칙
+  - 세션 `undo`, `reset`
+  - `MOVE`의 기본 preview drag 준비 구조
+- 수동 또는 후속 확인이 필요한 항목
+  - `ADD` 저장 API `500 E999` 원인 확인
+  - 실제 canvas drag 정확도
+  - `VERTEX_EDIT`의 vertex marker 노출과 꼭지점 직접 이동
+  - 저장 API 연결 후 응답 처리와 원본 보호
+- 간접 관측 표식
+  - 상태 메시지
+  - 변경 목록
+  - preview label
+  - 임시 삭제 스타일
+
+## 4-2. 차단 사유 분류
+
+- `자동화 한계`
+  - 지도 캔버스 기반 drag/vertex 조작은 자동 브라우저 재현 안정성이 낮다.
+  - 이번 세션에서는 Playwright 또는 브라우저 플러그인 기반 canvas 자동화 경로를 확보하지 못했다.
+- `인증 차단`
+  - 실제 브라우저 통합 검증은 로그인/세션 준비 여부에 따라 막힐 수 있다.
+- `환경 차단`
+  - dev 서버 실행 중 build 병행이 어렵고, lint도 안정적 회귀 수단이 아니다.
+- `기능 결함 또는 미완료`
+  - `ADD` 최종 저장이 `500 E999`로 실패해 신규 fid 기반 후속 검증이 차단된다.
+  - `VERTEX_EDIT`는 아직 요구사항 기준으로 다시 고정이 필요하다.
+
+## 5. 흡수한 기존 문서
+
+- `002-qa-SFR-012-003-하수관로편집-검증결과.md`
+- `004-qa-SFR-012-003-하수관로편집-후속검증결과.md`
+- `006-qa-SFR-012-003-하수관로편집-세션도구확장검증결과.md`
+- `008-qa-SFR-012-003-하수관로편집-실제지도조작검증결과.md`
+- `010-qa-SFR-012-003-하수관로편집-MOVE실드래그검증결과.md`
+- `012-qa-SFR-012-003-하수관로편집-VERTEX_EDIT실조작검증결과.md`
+### 2.18 2026-06-26 관로 입력정보 조회 오류 방어 결과
+
+- 확인된 오류
+  - `GisEditPipeSessionPopup.useEffect.fetchPipeInputInfo`에서 `GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd}` 실패 응답이 `buildRequestError()`를 거쳐 `Error: ERROR`로 콘솔 출력됐다.
+- 조치 결과
+  - 프론트는 잘못된 상세 식별값 조회를 차단하고, 선택적 조회 실패를 콘솔 오류로 출력하지 않도록 수정했다.
+  - 백엔드는 관로 상세 보조속성/관리기관명 조회 실패를 빈 보조정보로 fallback하여 상세 API가 가능한 한 200 응답을 유지하도록 보강했다.
+- 정적 검증
+  - FE TypeScript 명령은 기존 저장소 오류로 실패했다. 이번 수정 파일인 `GisEditPipeSessionPopup.tsx` 관련 신규 오류는 출력되지 않았다.
+  - BE `./gradlew.bat compileJava`는 통과했다.
+  - FE/BE `git diff --check`는 CRLF 경고만 출력했고 whitespace 오류는 없었다.
+- 남은 수동 검증
+  - 브라우저에서 MOVE 후 상세 팝업 진입 시 Console Error 오버레이가 뜨지 않는지 확인이 필요하다.
+  - Network 탭에서 `fcltppl` 조회가 실패해도 팝업 입력 흐름이 유지되는지 확인이 필요하다.
+
+### 2.19 2026-06-29 임시 관로 스냅 및 세션 버튼 재정렬 점검
+
+- 코드 기준 점검
+  - `page.tsx`의 pipe snap source는 이제 원본 하수관로 WFS만 담지 않고, 현재 세션의 `ADD`/`MOVE`/`VERTEX_EDIT` preview 관로도 함께 합친다.
+  - 기존 수정 관로의 원본 fid는 WFS snap source에서 제외해, 이미 옮겨진 preview 관로가 수정 전 원본 geometry에 다시 붙지 않도록 조정했다.
+  - `GIS 편집 세션` popup은 `취소`, `뒤로가기`, `초기화` 3버튼으로 바뀌었고, `취소`는 현재 focus된 change 제거, `뒤로가기`는 기존 마지막 변경 취소, `초기화`는 전체 세션 비우기 역할로 분리됐다.
+  - 현재 상세 패널이 열린 change를 `취소`로 제거하면 우측 상세 패널도 닫히도록 방어 로직을 추가했다.
+- 정적 검증
+  - 실행 명령: `node apps/sn/node_modules/typescript/bin/tsc -p apps/sn/tsconfig.json --noEmit --pretty false --ignoreDeprecations 5.0`
+  - 결과: 실패. 저장소 기존 오류(`components/common/index.ts`, `floodHistoryTypes.ts`, `page.tsx` 기존 null 가능성, html route, chart implicit any`)만 남았고, 이번 변경 파일 신규 오류는 출력되지 않았다.
+- 남은 수동 검증
+  - 신규 관로 A를 추가한 직후 신규 관로 B를 추가하거나 이동/꼭지점편집할 때 A preview에 실제로 스냅되는지 확인이 필요하다.
+  - `취소` 버튼이 현재 선택 change만 제거하고, `뒤로가기`는 가장 최근 change를 제거하는지 popup과 지도 focus 기준으로 확인이 필요하다.
+  - `취소`로 현재 상세 패널 대상 change를 제거했을 때 우측 패널이 자연스럽게 닫히는지 확인이 필요하다.
+
+### 2.20 2026-07-15 편집 세션 인라인 전환 검증 결과
+
+- 통과
+  - `git diff --check`: 통과
+  - 레이아웃/팝업 계약 정적 검사: 통과
+    - 인라인 위치 `left-[278px] top-4`, 최대 높이 `max-h-[calc(50dvh-82px)]` 확인
+    - 도구바 위치 `top-[84px]`, 최대 너비 `760px` 확인
+    - 변경 목록 `overflow-y-auto` 확인
+    - 기존 팝업 정의 `width: 460`, `height: 640` 유지 확인
+  - 변경 파일 기준 TypeScript 신규 오류는 확인되지 않았다.
+- 전체 TypeScript 검사
+  - 명령: `node apps/sn/node_modules/typescript/bin/tsc -p apps/sn/tsconfig.json --noEmit --pretty false --ignoreDeprecations 5.0`
+  - 결과: 실패. 이번 변경과 무관한 기존 선행 오류 9건(`components/common/index.ts`, `floodHistoryTypes.ts`, `map/page.tsx:4666`, html route, 공통 chart implicit any)이 남아 있다.
+- 브라우저 확인
+  - 개발 서버는 기동됐으나 `/map` 접근이 `/auth/login`으로 리다이렉트되어 로그인 정보 없이 실제 지도 조작 검증은 수행하지 않았다.
+  - 인증 우회나 임의 계정 사용은 하지 않았다.
+- 후속 수동 검증
+  - 로그인 세션에서 GIS 편집 진입 시 새 창이 자동 생성되지 않고 인라인 세션이 표시되는지 확인한다.
+  - 실제 변경분을 여러 건 추가해 패널 성장과 목록 스크롤, 시설물 접기 토글 비가림을 확인한다.
+  - `팝업` 버튼으로 기존 크기/위치의 팝업이 열리고 인라인과 상태가 동기화되는지 확인한다.
+
+### 2.21 2026-07-15 사용자 화면 피드백 2차 반영 결과
+
+- 정적 검증 통과
+  - 인라인 표시 조건과 팝업 표시 조건이 `gisEditSessionView`로 상호 배타 처리되는 것을 확인했다.
+  - 검색바 이동 클래스 `ml-[clamp(160px,16vw,220px)]`와 공통 `Gis.searchBarClassName` 기본값을 확인했다.
+  - embedded 도구바가 인라인 세션 다음 형제로 렌더링되는 것을 확인했다.
+  - 팝업 `화면에서 보기` 버튼, `GIS_EDIT_SESSION_SHOW_INLINE` 송수신, 팝업 직접 닫기 시 인라인 복원 처리를 확인했다.
+  - 기존 팝업 정의 `width: 460`, `height: 640` 유지 및 `git diff --check` 통과.
+- TypeScript
+  - 전체 검사 결과는 기존 선행 오류 9건으로 실패했으며 이번 2차 변경 파일의 신규 오류는 출력되지 않았다.
+  - 기존 오류 위치 중 `map/page.tsx` 행 번호만 코드 추가로 `4677`로 이동했다.
+- 자동 브라우저 제한
+  - 로그인된 지도 탭이 없어 실제 화면 조작 검증은 수행하지 못했다.
+  - 사용자 제공 화면으로 배치 결함을 확인했고, 9절의 검색바 비가림·도구바 종속 배치·양방향 전환은 로그인 환경에서 후속 확인이 필요하다.
+
+### 2.22 2026-07-15 표시 영역 기준 최종 보정 결과
+
+- 정적 검증 통과
+  - 검색바 이동용 prop과 클래스가 제거되고 공통 `Gis.js` diff가 없는 것을 확인했다.
+  - 인라인 세션 위치 `left-[258px] top-4`, 너비 `360px`를 확인했다.
+  - 변경분 0건 축약 조건과 작업 버튼/빈 목록 숨김 처리를 확인했다.
+  - 도구바 위치 `bottom-12 left-1/2`, 최대 너비 `960px`를 확인했다.
+  - 팝업 상호 전환 계약과 기존 `460 x 640` 크기는 유지된다.
+  - `git diff --check` 통과.
+- TypeScript
+  - 전체 검사는 기존 선행 오류 9건으로 실패했으며 이번 최종 위치 보정의 신규 오류는 출력되지 않았다.
+- 수동 확인 대기
+  - 로그인된 지도 화면에서 파란 표시 영역과 실제 좌표가 일치하는지 확인이 필요하다.
+
+### 2.23 2026-07-15 인라인 편집 세션 너비 보정 결과
+
+- 사용자 화면으로 `360px` 세션의 검색바 돌출을 확인했다.
+- 인라인 세션 계약을 `left-[258px] top-4 w-[220px]`로 변경했다.
+- 검색바 이동 코드가 없고 하단 도구바 `bottom-12`가 유지되는 것을 정적으로 확인했다.
+- `git diff --check` 통과. 로그인 화면에서 검색바 비가림 해소 최종 확인이 필요하다.
+
+### 2.24 2026-07-15 인라인 세션 260px 보정 결과
+
+- 인라인 세션 계약을 `left-[258px] top-4 w-[260px]`로 조정했다.
+- 검색바 이동 코드가 없고 하단 도구바 위치가 유지되는 것을 확인했다.
+- `git diff --check` 통과.
+
+### 2.25 2026-07-15 축약 세션 높이·너비 조정 결과
+
+- 인라인 세션 위치/크기 계약 `left-[258px] top-4 w-[265px]`를 확인했다.
+- 변경분 0건 축약 조건에만 `h-[58px]`가 적용되는 것을 확인했다.
+- 하단 도구바와 검색바 위치가 변경되지 않았고 `git diff --check`가 통과했다.
+
+### 2.26 2026-07-15 편집 세션 상단 정렬 보정 결과
+
+- 인라인 세션 위치 계약 `left-[258px] top-[26px] w-[265px]`를 확인했다.
+- 축약 높이 `58px`와 하단 도구바 위치가 유지되는 것을 확인했다.
+- `git diff --check` 통과.
+
+### 2.27 2026-07-15 변경 카드 표시 보정 결과
+
+- 제목과 선택 배지에 한 줄 표시 계약이 적용된 것을 확인했다.
+- 선택 카드에서 정보저장 배지가 동시에 표시되지 않는 것을 확인했다.
+- 추가·이동·꼭지점편집·삭제·상세정보수정별 축약 안내 문구를 확인했다.
+- `git diff --check` 통과.
+- 전체 TypeScript 검사는 기존 선행 오류 9건만 출력됐고 이번 변경 파일의 신규 오류는 없었다.
+
+### 2.28 2026-07-15 한 줄 안내 문구 보정 결과
+
+- 다섯 편집 유형의 안내가 다음 행동을 설명하는 짧은 문구로 변경된 것을 확인했다.
+- 카드 하단 `truncate text-[11px]` 계약과 제목/선택 배지 한 줄 표시가 유지된다.
+- `git diff --check` 통과.
+
+### 2.29 2026-07-15 사용자 수동 검증 완료
+
+- 사용자가 로그인된 실제 지도 화면에서 이번 유지보수 범위의 수동 검증 완료를 확인했다.
+- 확인 범위
+  - 검색바 위치 유지 및 인라인 편집 세션 비가림 해소
+  - 축약 세션 위치·높이·너비와 변경분 증가 시 확장/스크롤
+  - 하단 중앙 GIS 편집 도구바 배치
+  - 인라인·윈도우 팝업 상호 전환
+  - 변경 카드 제목/선택 표시 한 줄 노출 및 안내 문구 가독성
+- 결론: SFR-012-003 프론트 유지보수 수동 검증 완료.
+
+### 2.30 2026-07-15 GIS 편집 토글 종료 보정 결과
+
+- 인라인 세션 표시와 팝업 sync가 `gisEdit.isEditMode`를 기준으로 동작하는 것을 정적으로 확인했다.
+- 편집 종료 시 팝업 닫기, 재진입 시 inline 복원 처리를 확인했다.
+- 변경분 배열을 비우지 않아 재진입 복원 계약이 유지된다.
+- `git diff --check` 통과. 실제 지도에서 11절 시나리오 수동 검증이 필요하다.
+
+### 2.31 2026-07-15 GIS 편집 토글 종료 사용자 수동 검증 완료
+
+- 사용자가 실제 지도에서 GIS 편집 두 번째 클릭 시 하단 도구바와 인라인 세션이 함께 사라지는 것을 확인했다.
+- 다시 GIS 편집 진입 시 기존 변경분과 인라인 세션이 복원되는 것을 확인했다.
+- 결론: 추가 회귀 보정까지 사용자 수동 검증 완료.
diff --git a/apps/sn/docs/작업검증/SN-정보검색-하수도정비기본계획보고서-유지보수/001-qa-정보검색-하수도정비기본계획보고서-통합검증계획.md b/apps/sn/docs/작업검증/SN-정보검색-하수도정비기본계획보고서-유지보수/001-qa-정보검색-하수도정비기본계획보고서-통합검증계획.md
new file mode 100644
index 000000000..a66ce8e0e
--- /dev/null
+++ b/apps/sn/docs/작업검증/SN-정보검색-하수도정비기본계획보고서-유지보수/001-qa-정보검색-하수도정비기본계획보고서-통합검증계획.md
@@ -0,0 +1,56 @@
+# 정보검색-하수도정비기본계획보고서 통합검증계획
+
+## 1. 문서 목적
+
+- 분석도구 `정보검색` 내 `하수도 정비 기본계획 보고서` 유지보수 검증 계획을 기록한다.
+
+## 2. 검증 범위
+
+- report 탭 추가 팝업 제거 여부
+- 조회조건 순서 및 필터 동작
+- 탭 전환 시 자동조회 동작
+- 파일명 셀 직접 다운로드 동작
+- 보고서 행 클릭 제한 동작
+- 공통 select 포커스 표시 잘림 여부
+- 기존 `dc-service` 호출 유지 여부
+
+## 3. 검증 기준
+
+1. `정보검색` 팝업에서 `report` 탭 선택 시 추가 윈도우 팝업이 열리지 않아야 한다.
+2. 조회조건이 `시도 > 시군구 > 승인년도 > 구분 > 보고서 구분` 순서로 보여야 한다.
+3. 조회조건이 한 줄 우선 정렬로 보이고 불필요한 하단 공백이 없어야 한다.
+4. `기본 정보`, `유지관리 정보`, `하수도 정비 기본계획 보고서` 탭 전환 시 각 탭의 기본조회가 자동 실행되어야 한다.
+5. 파일이 있는 행의 `파일명`만 링크 스타일을 가져야 한다.
+6. 파일명 클릭 시 별도 파일목록 팝업 없이 다운로드가 시작되어야 한다.
+7. 파일명 외 다른 셀 클릭 시 추가 동작이 없어야 한다.
+8. `시도`, `시군구`, `승인년도`, `구분`, `보고서 구분` select 포커스 표시가 잘리지 않아야 한다.
+9. Network에서 `dc-service`의 `clsf`, `file`, `fileDownload` 호출이 유지되어야 한다.
+
+## 4. 라운드별 검증 계획
+
+### 4.1 정적 검증
+
+- 수정 파일 import/상태 흐름 재검토
+- 기존 popup 호출 제거 여부 검색
+- `UiTable` 옵션 추가가 다른 화면 기본동작을 깨지 않는지 코드 기준 확인
+
+### 4.2 명령 검증
+
+- `pnpm --filter sn lint`
+  - 목적: 타입/구문/기본 lint 문제 확인
+
+### 4.3 수동 브라우저 검증
+
+- 분석도구 `정보검색` 클릭
+- `기본 정보`, `유지관리 정보`, `하수도 정비 기본계획 보고서` 순서로 탭 전환
+- 각 탭 진입 시 버튼 없이 기본조회 자동 실행 확인
+- 보고서 탭 조건 변경 후 조회
+- 파일명 클릭 다운로드 확인
+- 파일명 외 셀 클릭 무반응 확인
+- 기본정보/유지관리/보고서 탭의 select 포커스 잘림 여부 확인
+- 하수처리시설 상세의 `조회` 버튼으로 여는 `reportTab` 팝업 회귀 확인
+
+## 5. 차단 사유 분류 기준
+
+- 코드 문제: 타입 오류, 런타임 오류, 잘못된 자동조회/필터/다운로드 동작
+- 환경 문제: pnpm 설치 정책, lockfile 설정, TTY 제약, 개발 서버 충돌
diff --git a/apps/sn/docs/작업검증/SN-정보검색-하수도정비기본계획보고서-유지보수/002-qa-정보검색-하수도정비기본계획보고서-통합검증결과.md b/apps/sn/docs/작업검증/SN-정보검색-하수도정비기본계획보고서-유지보수/002-qa-정보검색-하수도정비기본계획보고서-통합검증결과.md
new file mode 100644
index 000000000..4debf96f4
--- /dev/null
+++ b/apps/sn/docs/작업검증/SN-정보검색-하수도정비기본계획보고서-유지보수/002-qa-정보검색-하수도정비기본계획보고서-통합검증결과.md
@@ -0,0 +1,37 @@
+# 정보검색-하수도정비기본계획보고서 통합검증결과
+
+## 1. 문서 목적
+
+- 분석도구 `정보검색` 내 `하수도 정비 기본계획 보고서` 유지보수 검증 수행 결과를 기록한다.
+
+## 2. 수행한 검증
+
+### 2.1 정적 확인
+
+- `report` 탭 자동 팝업 오픈 제거 반영 여부 확인
+- `reportFiles` 팝업 호출 제거 반영 여부 확인
+- 파일명 직접 다운로드 로직 연결 여부 확인
+- 탭 전환 시 자동조회 흐름 추가 여부 확인
+- `UiTable`의 `clickableHeadIds` 옵션이 미지정 화면에는 영향이 없는 구조인지 확인
+- 공통 `SelectBox` 포커스 보정이 style 변경 수준인지 확인
+
+### 2.2 명령 실행
+
+- 2026-06-30: `pnpm --filter sn lint`
+  - 1차 결과: 샌드박스 임시 파일 권한 오류로 실패
+  - 2차 결과: `ERR_PNPM_ABORTED_REMOVE_MODULES_DIR_NO_TTY`로 실패
+  - 3차 결과: `CI=true` 재시도 후 `ERR_PNPM_LOCKFILE_CONFIG_MISMATCH`로 실패
+
+## 3. 현재 검증 상태
+
+- 코드 반영: 완료
+- 정적 구조 확인: 완료
+- 자동 lint 검증: 환경 문제로 미완료
+- 브라우저 수동 검증: 미실행
+
+## 4. 보류/리스크
+
+1. 현재 워크스페이스 pnpm 환경이 lockfile 설정 불일치로 자동 lint를 진행하지 못한다.
+2. 브라우저 수동 검증이 남아 있어 탭별 자동조회 체감, select 포커스 표시, 여백 보정 체감은 아직 확인하지 못했다.
+3. 다건 파일 대표 다운로드 기준은 현재 첫 번째 파일 기준이다.
+4. `reportFiles` 팝업 관련 미사용 코드 정리는 후속 정리 대상으로 남긴다.
diff --git a/apps/sn/docs/작업계획/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-작업카드.md b/apps/sn/docs/작업계획/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-작업카드.md
new file mode 100644
index 000000000..03072e28a
--- /dev/null
+++ b/apps/sn/docs/작업계획/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-작업카드.md
@@ -0,0 +1,275 @@
+# SFR-010-010 지반침하정보 작업카드
+
+## 1. 작업 개요
+
+- 작업 ID: SFR-010-010-FE
+- 작업명: 하수관망도 지반침하정보 프론트엔드 유지보수
+- 상태: 완료
+- 작성일: 2026-06-02
+- 담당 역할: FE
+- 관련 역할: DE, BE, QA
+- 담당 범위: `apps/sn` 지도 화면에서 지반침하 레이어 체크/해제, 목록 팝업, 우측 상세 패널, 반경 적용, 관리자 동기화 버튼 노출 제어, BE API 연동 준비
+- 근거 문서:
+  - `COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/001-de-SFR-010-010-지반침하정보-설계.md`
+  - `COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/지반침하정보_요구사항명세서_v1_1.docx`
+  - `COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/지반침하정보-화면구성시나리오_v1_1.md`
+  - `COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/지반침하정보_업무검토시안_v1_1.html`
+  - `COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/지반침하정보_화면설계서.png`
+
+## 1-1. 공통 동기화 확인
+
+- 공통 작업현황판 확인 여부: 확인
+- 파일점유현황 확인 여부: 확인
+- 결정로그 확인 여부: 확인
+- 기존 진행 중 작업과의 관계:
+  - `map/page.tsx`는 노후관로, 유하방향표출, GIS편집 이력이 있어 충돌 주의가 필요하다.
+  - FE 문서 루트 전체는 문서 재정리 흔적이 있으므로 기존 경로/파일명은 유지한다.
+
+## 1-2. 최신 해석 메모
+
+- 현재 `apps/sn`에는 레이어 on/off, 목록 팝업, 지도 포인트 선택, 사고별 우측 상세 탭, 반경 원과 반경 내 관로 표시가 구현되어 있다.
+- 이번 작업은 신규 화면 구축이 아니라 반경 값 라벨, 트리 심볼, 빈 지도 클릭 선택 해제, 목록 사고번호 첫 열을 보완하는 현행 유지보수다.
+- 목록 팝업은 `SinkholePopupPage`, 우측 상세와 선택 오버레이는 `map/page.tsx`의 기존 상태 흐름을 유지해 확장한다.
+- 목록의 `acdntNo`와 상세/반경의 `radiusMeters`가 이미 제공되므로 백엔드 계약은 변경하지 않는다.
+
+## 2. 작업 목적
+
+- 하수관망도 레이어 트리에서 `지반침하정보`를 실제 기능으로 연결한다.
+- 사용자는 목록 팝업에서 사고 이력을 조회하고, 행 클릭 또는 지도 포인트 클릭으로 상세정보와 반경 내 하수관로를 확인할 수 있어야 한다.
+- 관리자만 수동 동기화 버튼을 볼 수 있어야 하고, 일반 사용자는 조회/다운로드 중심 UX만 가져야 한다.
+- 실제 구현 전 문서 단계에서 FE 상태관리, 재사용 컴포넌트, API 연결 지점, 검증 포인트를 먼저 고정한다.
+
+## 3. 수정 대상 파일
+
+| 구분 | 파일 경로 | 수정 여부 | 근거 |
+| --- | --- | --- | --- |
+| 메인 화면 | `FE_APP_ROOT/app/(map-layout)/map/page.tsx` | 예정 | 레이어 트리, 지도 포인트, 반경 원, 상세 패널 상태 연결 |
+| 신규 컴포넌트 | `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/*` | 예정 | 목록 팝업, 상세 패널, 반경 패널, API 훅 분리 |
+| 팝업 정의 | `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts` | 예정 | 목록 팝업을 기존 popup 체계로 열 경우 필요 |
+| 팝업 등록 | `FE_APP_ROOT/src/features/windowPopup/registry.tsx` | 예정 | popup key와 화면 등록 |
+| 팝업 UI | `FE_APP_ROOT/src/features/windowPopup/ui/*` | 예정 | `지반침하발생현황` popup content |
+| 공통 비즈니스 컴포넌트 | `FE_BC_ROOT/**` | 기본 제외 | 현재 계획은 `apps/sn` 내부 재사용 우선 |
+
+## 3-1. 쓰기 범위와 충돌 주의
+
+| 구분 | 경로 | 담당 역할 | 처리 기준 |
+| --- | --- | --- | --- |
+| 쓰기 허용 | `apps/sn/**` | FE | 신규 지도 기능과 문서 작성 |
+| 쓰기 허용 | `packages/common/business_components/**` | FE | 꼭 필요한 경우만 최소 범위 수정 |
+| 쓰기 금지 | `packages/common/business_components` 외 공통 패키지 | FE | 원인과 영향 범위만 기록 |
+| 쓰기 금지 | 타 앱 `apps/*` | FE | 보고만 수행 |
+
+- 충돌 주의 파일
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+  - `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts`
+  - `FE_APP_ROOT/src/features/windowPopup/registry.tsx`
+
+## 4. 화면 흐름
+
+- 진입 경로: `하수관망도 > 지반침하정보`
+- 사용자 조작
+  - 레이어 트리에서 `지반침하정보` 체크
+  - 목록 아이콘 클릭
+  - 목록 팝업에서 조건 입력 후 조회
+  - 좌표보정상태 조건 선택
+  - 목록 행 클릭 또는 지도 포인트 클릭
+  - 좌측 하단 반경 입력 후 적용
+  - 관리자일 경우 동기화 클릭
+- 정상 흐름
+  - 지도에 지반침하 포인트 표시
+  - 우측 상세 패널 노출
+  - 반경 원과 반경 내 관로 목록 갱신
+  - 목록 다운로드 가능
+- 오류 흐름
+  - 날짜 미입력
+  - `2016-01-01` 이전 날짜 입력
+  - 좌표 없음
+  - 상세조회 실패
+  - 반경 내 관로 없음
+  - 동기화 실패
+
+## 5. API 연동
+
+| 기능 | Method | URL | 요청 | 응답 | 확인 상태 |
+| --- | --- | --- | --- | --- | --- |
+| 지도 포인트 조회 | `GET` | `/api/v1/sinkholes/geometry` | 기간/행정구역/limit | GeoJSON `FeatureCollection` | 현재 BE 선반영 |
+| 목록 조회 | `GET` | `/api/v1/sinkholes` | 기간, 시도, 시군구, 복구상태, 좌표보정상태, page, size | `items[]`, `total` | 구현 확인 |
+| 상세 조회 | `GET` | `/api/v1/sinkholes/{acdntNo}` | 사고번호 | 상세 DTO | 구현 확인 |
+| 반경 내 관로 조회 | `GET` | `/api/v1/sinkholes/{acdntNo}/nearbyPipes` | 사고번호, 반경 | 관로 목록 | 구현 확인 |
+| 동기화 | `POST` | `/api/v1/sinkholes/sync` | 관리자 요청 body | 처리 결과 | 구현 확인 |
+| 다운로드 | `GET` | `/api/v1/sinkholes` | 현재 조회조건 + `includeCoordStatus=false` | FE xlsx 생성 | 목록 재조회 기반 |
+
+- FE 메모
+  - 좌표 보정과 반경 내 관로 거리 계산은 프론트에서 하지 않는다.
+  - 목록 행의 좌표를 바로 믿지 않고 상세 API 응답으로 다시 기준을 맞춘다.
+  - 화면에 필요한 일부 필드는 원천 부재 가능성이 있으므로 `null -> "-"` 렌더링 정책이 필요하다.
+
+## 6. 영향 범위
+
+- `apps/sn` 화면 영향
+  - 레이어 트리
+  - 지도 포인트/반경 원
+  - 중앙 목록 팝업
+  - 우측 상세 패널
+  - 좌측 하단 반경 패널
+- 공통 패키지 영향
+  - 현재 계획상 없음
+  - 지도 포인트 레이어/클러스터 공통 확장이 꼭 필요하면 별도 승인 후 검토
+- 백엔드 API 영향
+  - 지반침하 신규 목록/상세/동기화/다운로드 계약
+
+## 6-1. 멀티에이전트 작업 분리
+
+- DE 산출물
+  - 공통 설계 문서
+  - API/DTO/DB 영향 초안
+- FE 산출물
+  - 지도 상태관리 구조
+  - 목록 팝업 / 상세 패널 설계
+  - API 호출 연결 계획
+- BE 산출물
+  - 지반침하 API 세트 확장
+  - 좌표 캐시 / 동기화 구조
+  - 반경 내 관로 조회
+- QA 산출물
+  - 정상/예외/권한/환경 검증 시나리오
+
+## 7. 검증 방법
+
+- 빌드 명령
+  - 개발 서버 미실행 확인 후 `pnpm --filter sn run build`
+  - 필요 시 `pnpm turbo run build --filter=sn`
+- 브라우저 URL
+  - `/map`
+- 사용자 조작
+  - 지반침하 레이어 체크/해제
+  - 목록 아이콘 클릭
+  - 조건 조회
+  - 목록 행 클릭
+  - 지도 포인트 클릭
+  - 반경 변경
+  - 관리자 동기화
+- 기대 결과
+  - 목록/상세/반경/다운로드가 요구사항과 일치
+  - 좌표 없음/조회 결과 없음/반경 내 관로 없음이 각각 다른 안내로 표시
+
+## 7-1. 하네스 관측 포인트
+
+- 레이어 체크박스 상태
+- 목록 팝업 열림 여부
+- 우측 상세 패널 노출 여부
+- 반경 값과 적용 메시지
+- 지도 중심 이동 여부
+- 포인트와 반경 원 노출 여부
+- 관리자 버튼 노출 여부
+
+## 8. 롤백 방법
+
+- `지반침하정보` 관련 신규 컴포넌트 제거
+- 레이어 트리와 팝업 등록 분기 제거
+- `map/page.tsx`의 지반침하 상태관리 제거
+- 문서는 설계 단계 기준으로 유지하고 코드만 롤백
+
+## 9. 예상 위험
+
+- `map/page.tsx`에 또 하나의 지도 도메인 로직이 들어가면서 책임이 더 커질 수 있다.
+- 목록 팝업을 `window popup`으로 할지 인라인 모달로 할지 구현 방식이 달라질 수 있다.
+- 원천 데이터에 없는 상세 필드를 FE가 어떻게 보여줄지 합의가 필요하다.
+- 좌표 없는 사고건을 지도와 목록에서 다르게 다뤄야 해 예외 분기가 많다.
+
+## 10. 완료 기준
+
+- `지반침하정보` 체크 시 포인트 표출 가능
+- 목록 아이콘 클릭 시 조회 팝업 오픈 가능
+- 목록 조회/행 클릭/지도 포인트 클릭 흐름이 연결됨
+- 반경 적용 시 반경 원과 반경 내 관로 목록 재조회 가능
+- 관리자 전용 동기화 버튼이 권한 기준으로 분기됨
+- BE 계약 문서와 FE 작업카드가 같은 필드 기준을 사용함
+
+## 11. 구현 전 승인 필요 항목
+
+- 화면 원본이 없는 필드의 FE 표시 방식
+- 목록 팝업을 기존 popup 창으로 열지, `/map` 내부 모달로 열지
+- 최근 동기화 일시 위치와 노출 범위
+- 좌표 캐시를 메모리 캐시로만 둘지 DB 영속화까지 포함할지
+
+## 11-2. 2026-07-02 유지보수 분석: 사고번호 기반 좌표 원천화 전환
+
+- 현재 FE는 이미 `지반침하정보` 레이어 on/off, 별도 윈도우 팝업 기반 목록, 우측 상세 패널, 반경 적용, 우측 상세 패널 공통 탭까지 구현돼 있다.
+- 따라서 기존 작업카드의 `실구현 없음` 전제는 현행 코드와 맞지 않으며, 이번 유지보수의 FE 역할은 신규 화면 설계보다 “현행 BE 계약 변경 시 FE 회귀 범위를 좁게 유지하는 것”에 가깝다.
+- 현행 FE가 소비하는 핵심 계약은 아래와 같다.
+  - 목록/상세 응답의 `coordStatus`, `geocodeStatus`, `latitude`, `longitude`, `x`, `y`
+  - 반경 조회 응답의 `items[]`
+  - 동기화 완료 후 `SINKHOLE_SYNC_COMPLETED_MESSAGE` payload
+- 이번 사용자 요구처럼 좌표 원천을 주소 geocoding에서 사고번호 기반 JIS 조회 + 원천 DB update로 바꾸더라도, BE가 위 응답 필드를 그대로 유지하면 FE 코드는 1차 구현에서 변경하지 않아도 된다.
+- FE 후속 변경이 필요한 경우는 아래로 한정한다.
+  - `coordStatus` 상태값이 추가되거나 의미가 바뀌는 경우
+  - 관리자용 동기화 버튼/최근 동기화 요약이 “JIS backfill 결과” 중심 문구로 재정의되는 경우
+  - 상세 실패 메시지를 주소 geocoding 실패가 아니라 사고번호 기반 조회 실패 문구로 바꾸는 경우
+- 결론적으로 이번 라운드의 FE 기본 입장은 `계약 유지 시 무코드 대응`, `표시 문구/운영성만 후속 점검`이다.
+## 12. 2026-07-13 우측 상세 탭 유지보수 구현 범위
+
+- `map/page.tsx`의 기존 공통 우측 탭을 확장해 지반침하·관로·처리시설·처리구역을 유형별 색상과 명칭으로 구분한다.
+- 지반침하는 사고번호별 다중 탭, 관로는 전역 단일 탭으로 관리한다.
+- 지반침하 반경 내 관로에서 연 경우에만 `관로(관리번호)` 표시명 옆에 부모 지반침하로 돌아가는 소형 화살표를 노출한다.
+- 탭 이름은 `지반침하(사고번호)`, `관로(관리번호)`, `처리시설(시설명)`, `처리구역(구역명)` 형식을 사용한다.
+- 기존 응답과 GeoServer 피처 속성으로 구현 가능하므로 BE API·DTO·DB 변경은 하지 않는다.
+- 완료 기준은 변경 파일 타입 오류 0건, Next 컴파일 성공, 부모/단일 탭 상태 전이 정적 확인이며 실브라우저 상호작용은 로그인 가능한 통합 환경에서 후속 확인한다.
+
+## 13. 처리시설·처리구역 탭 정책 후속 검토
+
+- 현재 처리시설·처리구역 탭은 `feature:{layerType}:{featureId}` ID를 사용해 피처별로 여러 개 열릴 수 있다.
+- 후속 결정 후보는 `현행 다중 탭 유지`와 `처리시설 1개 + 처리구역 1개 유형별 singleton`이다.
+- singleton을 선택하면 동일 유형의 다음 선택은 새 탭을 추가하지 않고 기존 탭의 표시명, feature payload, 활성 시각을 최신 대상으로 교체한다.
+- 이 정책은 아직 미확정이며 현재 코드 변경 대상이 아니다.
+
+## 14. 2026-07-14 현행 유지보수 설계 범위
+
+### 14.1 구현 원칙
+
+- 현행 지도/우측 탭/API 흐름을 유지하고 네 요구사항에 필요한 최소 분기만 추가한다.
+- 지도 반경 라벨은 원 상단 Point 피처로 추가해 원·중심점과 같은 생명주기로 관리한다.
+- 트리 심볼은 기존 파란 지반침하 자산을 사용하고 공통 트리 영향은 기본 숨김인 선택 prop으로 격리한다.
+- 빈 지도 클릭은 현재 선택 지반침하와 종속 관로 강조만 정리하며 다른 탭과 GIS 편집 상태는 보존한다.
+- 목록 팝업은 사고번호를 첫 데이터 열로 두고 화면 NO 열은 표시하지 않는다.
+
+### 14.2 예상 코드 대상
+
+- `app/(map-layout)/map/page.tsx`
+- `app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx`
+- `packages/common/business_components/src/ui/map/Gis.js`
+- `packages/common/business_components/src/ui/map/GisTree.js`
+- `packages/common/business_components/src/ui/map/GisSelect.js`
+- `packages/common/business_components/src/ui/map/lib/gis.select.js`
+
+### 14.3 제외 범위
+
+- BE API·DTO·Repository·DB 변경
+- 엑셀 다운로드 열 순서 변경
+- 기존 탭 최대 개수, 처리시설·처리구역 탭 정책 변경
+
+### 14.4 완료 기준
+
+- 구현·정적 검사·빌드 후 로그인 가능한 `/map`에서 반경 라벨, 트리 심볼, 빈 클릭 해제, 목록 첫 열을 수동 확인한다.
+- 구현 결과는 통합구현기록과 통합검증결과, 2026-07-14 공통 작업기록에 반영했다.
+- 사용자가 통합 화면에서 반경 라벨, 트리 심볼, 빈 지도 클릭 해제, 사고번호 첫 열 및 화면 NO 열 제거를 모두 확인했으며 최종 완료로 판정했다.
+
+### 14.5 실제 구현 파일
+
+- `app/(map-layout)/map/page.tsx`
+- `app/(map-layout)/map/components/sinkhole/SinkholePopupPage.tsx`
+- `packages/common/business_components/src/ui/map/Gis.js`
+- `packages/common/business_components/src/ui/map/GisTree.js`
+- `packages/common/business_components/src/ui/map/GisSelect.js`
+- `packages/common/business_components/src/ui/map/lib/gis.select.js`
+
+- BE API·DTO·Repository·DB는 변경하지 않았다.
+
+## 15. 2026-07-15 관로 탭 누적 정책 후속 변경
+
+- 기존의 관로 전역 단일 탭 정책을 진입 경로별 정책으로 변경한다.
+- 지도에서 직접 선택한 일반 관로는 관로 식별값별 탭으로 누적한다.
+- 지반침하 상세의 반경 내 관로에서 선택한 관로는 부모 지반침하가 있는 단일 슬롯을 공유하며, 다음 관로 선택 시 같은 탭의 상세를 교체한다.
+- 부모가 있는 관로 탭은 활성 여부와 무관하게 `←` 버튼을 항상 표시해 일반 관로와 구분하고 지반침하 상세로 복귀한다.
+- 공용 우측 탭은 최대 5개 FIFO를 적용하되, 제거 대상이 부모 지반침하이면 그 부모에서 열린 연계 관로도 함께 제거한다. 연계 관로만 제거될 때는 부모 지반침하를 유지한다.
+- 변경 범위는 `app/(map-layout)/map/page.tsx`이며 BE API·DTO·DB 계약은 변경하지 않는다.
diff --git a/apps/sn/docs/작업계획/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-작업카드.md b/apps/sn/docs/작업계획/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-작업카드.md
new file mode 100644
index 000000000..ca84bc821
--- /dev/null
+++ b/apps/sn/docs/작업계획/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-작업카드.md
@@ -0,0 +1,175 @@
+# SFR-011-007 통수위험분석 작업카드
+
+## 1. 작업 개요
+
+- 작업 ID: `SFR-011-007-FE`
+- 작업명: 통수위험분석 프론트엔드 구현 계획
+- 상태: 완료
+- 작성일: 2026-05-18
+- 담당 역할: FE
+- 관련 역할: DE, BE, QA
+- 담당 범위: `apps/sn` 지도 화면에서 통수위험 진입, 결과 조회 popup, 지도보기, 설정 현황, staged 유출관로 선택, 저장 payload 준비까지
+- 근거 문서
+  - `COMMON_DOCS_ROOT/작업계획/SFR-011-007-통수위험분석/001-de-SFR-011-007-통수위험분석-설계.md`
+  - `COMMON_DOCS_ROOT/작업내용/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-통합공유기록.md`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-007-통수위험분석/통수위험분석_요구사항명세서_v1_2.docx`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-007-통수위험분석/통수위험분석_화면_v1.1.html`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-007-통수위험분석/통수위험분석_통수위험분석결과 조회_화면설계서.png`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-007-통수위험분석/통수위험분석_통수위험분석결과 지도보기_화면설계서.png`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-007-통수위험분석/통합위험분석_화면구성시나리오_v1.1.md`
+
+## 1-1. 공통 동기화 확인
+
+- 공통 작업현황판 확인 여부: 확인
+- 파일점유현황 확인 여부: 확인
+- 결정로그 확인 여부: 확인
+- 기존 진행 중 작업과의 관계: `map/page.tsx`, `AnalysisPopupMenu.tsx`, `windowPopup/**`는 최근 지도형 기능 작업 이력이 있어 충돌 주의가 필요하다.
+
+## 2. 작업 목적
+
+- 기존 하수관망도 지도 화면에 `통수위험` 기능을 추가해 사용자가 결과 조회, 지도보기, 설정 현황 조회, 유출관로 설정 편집을 한 흐름 안에서 수행할 수 있게 한다.
+- 프론트는 백엔드 연결 전 단계에서 popup UI, 동적 관로 컬럼, mock 지도 강조, staged 설정 목록, 저장 payload preview까지 먼저 구현한다.
+- 실제 산정 로직, geometry 데이터, 다운로드 파일, 저장 API는 BE 범위로 분리하고 FE는 그 계약을 맞출 준비 상태까지 수행한다.
+
+## 2-1. 최근 진행 갱신
+
+- 2026-05-18
+  - `통수위험` 메뉴의 placeholder popup을 실제 `WaterRiskPopupContent`로 교체했다.
+  - popup 안에서 결과 조회, 설정 현황, staged 유출관로 목록, 결과/설정 다운로드 preview, 저장 payload preview가 동작하도록 FE-only mock 흐름을 연결했다.
+  - `map/page.tsx`에는 popup과 동기화되는 선택 지역 강조, 예측강우 sample grid overlay, 설정 편집 모드, 지도 하수관로 클릭 기반 staged 추가 흐름을 연결했다.
+  - 실제 API 호출은 아직 붙이지 않았고, BE 신규 API 계약과 mock 상태를 기준으로만 동작한다.
+- 2026-05-19
+  - 결과 조회/설정 현황 mock 데이터를 확대해 페이지네이션이 실제로 보이도록 조정했다.
+  - 결과 조회와 설정 현황 toolbar 버튼을 우측 정렬로 정리하고, 본문 행 배경과 헤더 컬러를 관로분석 계열 톤으로 맞췄다.
+  - 지도 상세정보 카드는 프로토타입 표 구조, 위험/정상 배지, 유출유량 초과 강조, compact spacing을 기준으로 재정리했다.
+  - 지도 상세정보 카드는 선택 중점관리지역의 오른쪽에 붙어 움직이는 프로토타입 기준으로 다시 조정했다.
+  - 지도 강조와 상세정보 카드는 계속 실험이 반복된 항목이라, 최종 운영 규칙은 BE 연동 및 수동 브라우저 검증 단계에서 한 번 더 확정한다.
+
+## 3. 수정 대상 파일
+
+| 구분 | 파일 경로 | 수정 여부 | 근거 |
+| --- | --- | --- | --- |
+| 화면 | `FE_APP_ROOT/app/(map-layout)/map/page.tsx` | 완료 | 지도 이동, 강조 overlay, 상태 연결, 상세정보 카드 프로토타입 |
+| 우측 메뉴 | `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx` | 완료 | `통수위험` 아이콘 진입점 추가 |
+| popup 정의 | `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts` | 완료 | 신규 popup 정의 |
+| popup 등록 | `FE_APP_ROOT/src/features/windowPopup/registry.tsx` | 완료 | popup content 연결 |
+| 신규 컴포넌트 | `FE_APP_ROOT/app/(map-layout)/map/components/waterRisk/*` | 완료 | 결과/설정 UI, mock 데이터, 타입 분리 |
+| popup content | `FE_APP_ROOT/src/features/windowPopup/ui/WaterRiskPopupContent.tsx` | 완료 | window popup 본문 연결 |
+| 공통 비즈니스 컴포넌트 | `FE_BC_ROOT/**` | 기본 제외 | 초기 구현은 `apps/sn` 내부 해결 우선 |
+
+## 4. 화면 흐름
+
+- 진입 경로
+  - 하수관망도 지도 화면 우측 기능 아이콘 `통수위험`
+- 정상 흐름
+  - 결과 조회 popup 열기
+  - 조회조건 입력
+  - 결과 목록 표시
+  - 결과 행 선택 후 지도 강조/상세정보 표시
+  - `설정`으로 화면 전환
+  - 설정 현황 조회
+  - 중점관리지역 선택 후 유출관로 staged 편집
+  - 저장 payload 생성
+- 오류 흐름
+  - 날짜/시간 누락
+  - 결과 없음
+  - 중복 유출관로 선택
+  - 3건 초과 선택
+  - 저장 실패 시 staged 목록 유지
+
+## 5. API 연동
+
+| 기능 | Method | URL | 요청 | 응답 | 확인 상태 |
+| --- | --- | --- | --- | --- | --- |
+| 결과 조회 | `GET` | `/api/v1/map/wraResults` | 분석일시, 지역, 위험상태 | 요약 + 결과 목록 + 관로 반복형 데이터 | BE 신규 필요 |
+| 지도 상세 | `GET` | `/api/v1/map/wraResults/{focusAreaId}/mapView` | 중점관리지역 식별값 | polygon + rain grid + 상세 popup 데이터 | BE 신규 필요 |
+| 설정 현황 조회 | `GET` | `/api/v1/map/wraOutletPipeSettings` | 지역 조건 | 설정 목록 | BE 신규 필요 |
+| 설정 저장 | `POST` | `/api/v1/map/wraOutletPipeSettings/save` | 중점관리지역 + 유출관로 1~3건 + 순번 | 저장 결과 + 최신 상태 | BE 신규 필요 |
+| 결과 다운로드 | `POST` | `/api/v1/map/wraResults/download` | 현재 조회조건 | 파일 또는 파일 토큰 | BE 신규 필요 |
+| 설정 다운로드 | `POST` | `/api/v1/map/wraOutletPipeSettings/download` | 현재 조회조건 | 파일 또는 파일 토큰 | BE 신규 필요 |
+
+- FE 메모
+  - 1차 구현은 실제 네트워크 대신 payload preview 또는 mock service 기준으로 상태를 먼저 맞춘다.
+  - 동적 관로 그룹은 `pipeSummaries[]` 반복 렌더링 기준으로 구현한다.
+
+## 6. 영향 범위
+
+- `apps/sn` 영향
+  - 지도 메인 화면
+  - 우측 분석 기능 메뉴
+  - popup registry와 popup content
+  - 지도 선택/강조/overlay 상태
+  - 지도 상세정보 카드와 표형 mock UI
+- `business_components` 영향
+  - 현재 계획상 없음
+  - overlay 또는 popup wrapper 요구가 기존 패턴으로 해결되지 않을 때만 추가 검토
+- 백엔드 영향
+  - 결과 조회/상세/설정/저장/다운로드 API
+  - 권한과 지역 조건 cascade
+
+## 7. 구현 범위 분리
+
+### 7.1 FE 단독 구현 범위
+
+- popup 레이아웃
+- 조회/설정 폼
+- mock 결과/설정 데이터
+- 동적 관로 그룹 컬럼
+- 위험/정상 스타일 변경
+- 예측강우 sample overlay
+- staged 유출관로 목록
+- 저장/다운로드 payload preview
+
+### 7.2 BE 필요 범위
+
+- 실제 분석 결과 수치
+- geometry와 grid 데이터
+- 저장/다운로드
+- 권한 검증
+- 중복/유효성 서버 검증
+
+## 8. 검증 방법
+
+- 브라우저 기준
+  - `통수위험` 아이콘 클릭
+  - 결과 popup 열림
+  - 날짜/시간 필수값 검증
+  - 위험상태 필터 동작
+  - 1건/2건/3건 동적 관로 그룹 표시
+  - 페이지네이션 노출과 행 수 변화
+  - 결과 행 선택 후 지도 강조
+  - 설정 화면 전환
+  - 유출관로 staged 목록 추가/삭제/순번 변경
+  - 저장 payload preview 확인
+- 정적 확인
+  - FE-only 프로토타입 코드는 완료됐고, 실제 브라우저 검증/BE 연동은 후속으로 진행한다.
+
+## 9. 현재 결정 상태
+
+- popup 구조는 결과 조회와 설정 현황을 같은 popup 내부 전환 구조로 유지한다.
+- 격자 overlay는 FE 1차 범위에 sample overlay로 포함했다.
+- 다운로드는 실제 파일 처리 없이 preview까지를 FE 프로토타입 범위로 본다.
+- staged 설정 편집 화면은 popup 내부 + 지도 연동 구조를 유지한다.
+
+## 10. 롤백 방법
+
+- `통수위험` 아이콘 진입점 제거
+- waterRisk 전용 popup/hook/overlay 제거
+- 기존 지도 기본 기능만 남기기
+
+## 11. 예상 위험
+
+- 동적 관로 그룹 헤더/컬럼 렌더링이 테이블 공통 컴포넌트와 맞물리며 복잡해질 수 있다.
+- 지도 강조와 예측강우 격자 overlay가 동시에 올라가면 렌더 성능 이슈가 생길 수 있다.
+- 설정 편집 모드에서 기존 피처 클릭 상세와 충돌 가능성이 있다.
+- 상세정보 카드의 지도 기준 고정 규칙은 사용자 피드백에 따라 다시 조정될 수 있다.
+
+## 12. 완료 기준
+
+- `통수위험` 진입과 popup UI가 동작한다.
+- 결과/설정 화면 전환이 가능하다.
+- 동적 관로 그룹 렌더링이 1~3건 모두 자연스럽다.
+- 지도 강조/상세정보/mock 격자 표시가 가능하다.
+- staged 설정 목록과 저장 payload preview가 준비된다.
+- FE-only 프로토타입 기준 구현이 완료되고, BE 연동 및 실제 통합 검증 후속 범위가 문서로 정리된다.
+- 지도 상세정보 카드 위치 규칙은 현재 프로토타입 기준 동작으로 마감하고, 운영 기준 확정은 후속 검증으로 넘긴다.
diff --git a/apps/sn/docs/작업계획/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-작업카드.md b/apps/sn/docs/작업계획/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-작업카드.md
new file mode 100644
index 000000000..574acdb4d
--- /dev/null
+++ b/apps/sn/docs/작업계획/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-작업카드.md
@@ -0,0 +1,117 @@
+# SFR-011-009 침수발생이력 작업카드
+
+## 1. 작업 개요
+
+- 작업 ID: `SFR-011-009-FE`
+- 작업명: 침수발생이력 프론트엔드 구현
+- 상태: 검증
+- 작성일: 2026-06-15
+- 담당 역할: FE
+- 관련 역할: DE, QA
+- 담당 범위: `apps/sn` 지도 화면에서 레이어 트리 `침수흔적도` 목록 popup, 목록 조회, 지도 preview, 지도 클릭 플로팅 상세 팝업, mock 침수심 overlay 구현
+- 근거 문서
+  - `COMMON_DOCS_ROOT/작업계획/SFR-011-009-침수발생이력/001-de-SFR-011-009-침수발생이력-설계.md`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-009-침수발생이력/0.침수발생이력_요구사항명세서_v2.0.docx`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-009-침수발생이력/5.침수발생이력_화면시나리오_V2.0.md.docx`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-009-침수발생이력/침수발생이력 목록화면설계서.png`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-009-침수발생이력/침수발생이력 지도상세정보화면설계서.png`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-011-009-침수발생이력/침수발생이력_화면.html`
+
+## 1-1. 공통 동기화 확인
+
+- 공통 작업현황판 확인 여부: 확인
+- 파일점유현황 확인 여부: 확인
+- 결정로그 확인 여부: 확인
+- 기존 진행 중 작업과의 관계: `map/page.tsx`, `windowPopup/**`는 다른 지도형 기능과 최근 수정 이력이 있어 충돌 주의가 필요하다.
+
+## 2. 작업 목적
+
+- 레이어 트리 `침수흔적도` 목록 진입을 placeholder가 아닌 실제 popup UI로 연결한다.
+- popup 조회 결과를 메인 지도와 연동해 사용자가 선택한 침수발생이력을 즉시 확인할 수 있게 한다.
+- 설계 이미지의 `침수흔적도 on/off + 목록 popup + 지도 강조 + 지도 위 상세 팝업` 흐름을 현재 `sn` 지도형 구조 안에서 자연스럽게 재현한다.
+
+## 3. 수정 대상 파일
+
+| 구분 | 파일 경로 | 수정 여부 | 비고 |
+| --- | --- | --- | --- |
+| 메인 지도 | `FE_APP_ROOT/app/(map-layout)/map/page.tsx` | 진행 | popup 선택 결과 수신, 지도 overlay, 우측 상세패널 연결 |
+| popup 정의 | `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts` | 진행 | tree 목록 진입 popup 키/크기 정의 |
+| popup 등록 | `FE_APP_ROOT/src/features/windowPopup/registry.tsx` | 진행 | placeholder에서 실제 popup content로 교체 |
+| 분석도구 메뉴 | `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx` | 진행 | 분석도구에서 `침수발생이력` 제거 |
+| popup content | `FE_APP_ROOT/src/features/windowPopup/ui/FloodHistoryPopupContent.tsx` | 진행 | popup 본문 연결 |
+| 신규 popup 페이지 | `FE_APP_ROOT/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx` | 진행 | 조회조건/목록/다운로드 |
+| 신규 상세패널 | `FE_APP_ROOT/app/(map-layout)/map/components/floodHistory/FloodHistoryDetailPanel.tsx` | 진행 | 기본정보/발생일시/원인·피해 탭 |
+| 신규 타입/샘플데이터 | `FE_APP_ROOT/app/(map-layout)/map/components/floodHistory/floodHistoryTypes.ts` | 진행 | mock 데이터, postMessage 타입, legend 정의 |
+
+## 4. 구현 범위
+
+### 4.1 이번 라운드 포함
+
+- 레이어 트리 `침수흔적도` 목록 popup 진입
+- 레이어 트리 `침수흔적도` on/off
+- 시도/시군구/침수발생년도 선택/침수재해명 조회조건
+- mock 목록 조회/페이징
+- 목록 다운로드
+- 목록 행 클릭 preview + 더블클릭 후 메인 지도 이동
+- 메인 지도 mock polygon/침수심 overlay
+- 지도 클릭 플로팅 상세 팝업
+- `강우 분석정보` 묶음 헤더 유지 + 상세 필드 가로 스크롤 그리드
+
+### 4.2 이번 라운드 제외
+
+- 실제 백엔드 API 연동
+- 실제 레이어 트리 토글 연계
+- 지도 click 상세조회
+- 실제 기준데이터 기반 GIS layer 렌더링
+
+## 5. 화면 흐름
+
+1. 사용자가 레이어 트리에서 `침수흔적도`를 체크한다.
+2. 사용자가 `침수흔적도` 목록 버튼을 클릭한다.
+3. popup이 열린다.
+4. 사용자가 조회조건을 입력하고 `조회`를 클릭한다.
+5. 목록이 popup 그리드에 표시된다.
+6. 사용자가 행을 클릭하면 메인 지도에 테스트 레이어가 먼저 표시된다.
+7. 사용자가 행을 더블클릭하면 popup이 닫히고 메인 지도는 해당 침수 이력 영역으로 이동한다.
+8. `침수흔적도` 체크 상태에 따라 영역/침수심 표현이 함께 보인다.
+9. 메인 지도 위 큰 침수흔적 영역을 클릭하면 작은 상세 팝업이 열린다.
+
+## 6. 구현 메모
+
+- popup은 기존 `windowPopup` 체계를 그대로 사용하되, 분석도구가 아니라 레이어 트리 `침수흔적도` 목록 버튼으로 연다.
+- 목록 선택 결과는 `window.opener.postMessage`로 메인 지도에 전달한다.
+- popup의 `침수발생년도`는 같은 필터 줄 안의 선택 컴포넌트로 처리한다.
+- 메인 지도는 `VectorLayer` 두 개를 사용해
+  - 침수발생이력상세 영역
+  - 침수심 표현 영역
+  을 임시 렌더링한다.
+- 두 overlay는 `침수흔적도` 체크 상태를 따르도록 맞춘다.
+- 상세정보는 우측 패널이 아니라 지도 위 플로팅 팝업으로 노출하고, 탭은 `침수년도탭`, `재해명탭`, `침수발생강우탭` 기준으로 보여준다.
+
+## 7. 검증 방법
+
+- 레이어 트리 `침수흔적도` 목록 popup이 열린다.
+- `침수흔적도` 체크 on/off에 따라 영역/침수심 overlay가 함께 바뀐다.
+- 시도 없이 시군구를 선택하면 조회가 차단된다.
+- 침수발생년도 선택이 동작한다.
+- 조건 변경 시 목록 필터가 바뀐다.
+- 행 클릭 시 지도 preview가 표시된다.
+- 지도 위 큰 polygon 클릭 시 작은 상세 팝업이 열린다.
+- 상세 팝업 탭 전환이 동작한다.
+
+## 8. 현재 메모
+
+- 문서 우선 원칙에 맞춰 이번 라운드는 설계서/작업카드/검증계획을 먼저 정리한 뒤 구현을 이어간다.
+- 현재 코드에는 일부 draft 구현이 이미 들어가 있으므로, 이후 단계에서 이 작업카드 기준으로 정합성을 다시 맞춘다.
+
+## 9. 롤백 방법
+
+- 레이어 트리 목록 진입 연결 해제
+- `floodHistory` 신규 컴포넌트 삭제
+- `map/page.tsx`의 floodHistory overlay/상세패널 분기 제거
+
+## 10. 남은 리스크
+
+- 실제 API 필드명이 mock 데이터와 다를 수 있다.
+- 실제 지도 레이어 기준데이터가 준비되면 현재 mock overlay 방식과 상태 관리가 달라질 수 있다.
+- popup 상세정보를 우측 패널로 둘지 지도 내부 floating popup으로 둘지는 실제 사용성 피드백 후 재조정 가능성이 있다.
diff --git a/apps/sn/docs/작업계획/SFR-012-002-하수관망도 업로드/001-fe-SFR-012-002-하수관망도 업로드-작업카드.md b/apps/sn/docs/작업계획/SFR-012-002-하수관망도 업로드/001-fe-SFR-012-002-하수관망도 업로드-작업카드.md
new file mode 100644
index 000000000..af3d4b3e6
--- /dev/null
+++ b/apps/sn/docs/작업계획/SFR-012-002-하수관망도 업로드/001-fe-SFR-012-002-하수관망도 업로드-작업카드.md	
@@ -0,0 +1,175 @@
+# SFR-012-002 하수관망도 업로드 작업카드
+
+## 1. 작업 개요
+
+- 작업 ID: SFR-012-002-FE
+- 작업명: 하수관망도 업로드 프론트엔드 구현 계획
+- 상태: 완료
+- 작성일: 2026-05-15
+- 담당 역할: FE
+- 관련 역할: DE, BE, QA
+- 담당 범위: `GIS 관리` popup UI, 시설구분 선택, 파일 찾기, mock 업로드/다운로드 흐름, 업로드 payload 준비 상태까지
+- 운영 제약: `GIS 관리`는 하수관로만 업로드 대상으로 사용하고, 다른 GIS 테이블은 FE 시설구분 목록에서 제외
+- 구현 제외: 실제 서버 업로드/다운로드 연결, 백엔드 저장 로직, DB 반영
+- 근거 문서
+  - `COMMON_DOCS_ROOT/작업계획/SFR-012-002-하수관망도 업로드/001-de-SFR-012-002-하수관망도 업로드-설계.md`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-002-하수관망도 업로드/하수관망도업로드_요구사항명세서_v1_1.docx`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-002-하수관망도 업로드/하수관망도업로드_시나리오_v1.0.md`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-002-하수관망도 업로드/하수관망도업로드_화면_v1_1.html`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-002-하수관망도 업로드/하수관망도업로두_화면설계서_v1.0.png`
+
+## 1-1. 공통 동기화 확인
+
+- 공통 작업현황판 확인 여부: 확인
+- 파일점유현황 확인 여부: 확인
+- 결정로그 확인 여부: 확인
+- 기존 진행 중 작업과의 관계
+  - `SFR-012-003`에서 `GIS 편집`은 지도 로컬 모드로 구현됐다.
+  - 이번 `SFR-012-002`는 같은 우측 기능 버튼 그룹을 사용하지만 popup 업무 흐름으로 분리해야 한다.
+
+## 1-2. 최근 설계 갱신
+
+- 2026-05-15
+  - `SFR-012-003`의 문서 구조를 기준으로 `SFR-012-002` canonical 문서 세트를 신규 작성한다.
+  - 이번 기능의 FE 핵심은 `map/page.tsx` 직접 수정 확대보다 `gisManagementPopup` placeholder를 실제 popup content로 교체하는 데 있다.
+  - 승인 전에는 코드 수정 없이 설계, 작업카드, 구현기록, 검증 문서 초안까지만 진행한다.
+- 2026-05-15 구현 반영
+  - `gisManagementPopup` placeholder를 실제 업로드 관리 popup content로 교체했다.
+  - 시설구분 선택, 파일 찾기, mock 업로드 이력 추가, 다운로드 요청 미리보기, 업로드/다운로드 payload 미리보기까지 FE-only 범위를 반영했다.
+  - 실제 multipart 업로드와 다운로드 바이너리 처리, 서버 이력 재조회는 후속 BE 연동 단계로 남긴다.
+- 2026-05-18 구현 마감 정리
+  - popup 구현 구조를 `windowPopup` wrapper + 실제 popup page 컴포넌트 분리 방식으로 재구성했다.
+  - `GIS 관리` popup 디자인을 분석도구 계열의 타이포와 색 축에 맞춰 재정렬했다.
+  - 업로드 현황은 10건 단위 페이징을 붙이고, 팝업을 닫으면 분석도구 메뉴의 active 상태도 같이 해제되도록 보완했다.
+  - `찾기`, `업로드` 버튼은 상황판/검색영역 `조회` 버튼 계열 색으로 정리했고, `다운로드` 버튼은 운영정보 `파일 다운로드`와 같은 `green` 계열로 정리했다.
+  - 업로드 row는 좌측 입력 그룹과 우측 버튼 그룹을 분리해 버튼 위치와 간격을 조정했다.
+
+## 2. 작업 목적
+
+- 기존 지도 화면의 `GIS 관리` 기능을 실제 업로드 관리 popup으로 구체화한다.
+- 사용자가 하수관로 GIS 파일을 찾은 뒤 업로드 이력과 다운로드 대상을 관리할 수 있는 FE 화면 흐름을 마련한다.
+- 실제 백엔드 연결 전에도 UI, 상태, mock 데이터, 업로드 요청 payload 구조를 검토할 수 있도록 준비한다.
+
+## 3. 예상 수정 대상 파일
+
+| 구분 | 파일 경로 | 수정 여부 | 근거 |
+| --- | --- | --- | --- |
+| popup registry | `FE_APP_ROOT/src/features/windowPopup/registry.tsx` | 예정 | `gisManagementPopup` placeholder를 실제 content로 교체 |
+| popup definition | `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts` | 가능성 있음 | popup 크기 조정 필요 시 |
+| 신규 popup content | `FE_APP_ROOT/src/features/windowPopup/ui/GisManagementPopupContent.tsx` | 예정 | 업로드 관리 popup 본문 |
+| 신규 보조 컴포넌트 | `FE_APP_ROOT/src/features/windowPopup/ui/gisManagement/*` | 가능성 있음 | 폼/그리드/상태영역 분리 시 |
+| 지도 메인 화면 | `FE_APP_ROOT/app/(map-layout)/map/page.tsx` | 가능성 낮음 | popup open 이후 동기화가 필요할 때만 최소 수정 |
+| 우측 기능 버튼 | `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx` | 기본 제외 | 버튼 key와 open 흐름이 이미 존재 |
+
+## 3-1. 이번 라운드 실제 수정 파일
+
+- `FE_APP_ROOT/src/features/windowPopup/ui/GisManagementPopupContent.tsx`
+- `FE_APP_ROOT/src/features/windowPopup/registry.tsx`
+- `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts`
+- `FE_APP_ROOT/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+
+## 4. 화면 흐름
+
+- 진입 경로
+  - 하수관망도 지도 화면
+  - 우측 기능 버튼 `GIS 관리`
+- 사용자 조작
+  - `GIS 관리` 클릭
+  - 시설구분 선택
+  - `찾기` 클릭 후 파일 선택
+  - `업로드` 클릭
+  - 업로드 현황 행 선택
+  - `다운로드` 클릭
+- 정상 흐름
+  - popup 열림
+  - 시설구분 선택 전 `찾기`/`업로드` 안내
+  - 파일 선택 후 파일명 표시
+  - 업로드 후 현황 목록 갱신
+  - 다운로드 대상 선택 후 다운로드 요청 가능 상태
+- 오류 흐름
+  - 시설구분 미선택
+  - 파일 미선택
+  - 미지원 확장자
+  - 업로드 실패
+  - 다운로드 대상 미선택
+
+## 5. FE 단독 구현 범위
+
+- popup UI 렌더링
+- 시설구분 select 상태
+- 브라우저 파일 선택 상태
+- mock 업로드 이력 목록
+- 업로드 시 mock 행 추가
+- 다운로드 대상 선택 상태
+- 상태 메시지 및 토스트
+- 업로드 payload 직렬화 준비
+
+## 6. 백엔드 필요 범위
+
+- 업로드 가능 시설구분/허용 확장자/최대 파일 크기 메타 API
+- 업로드 현황 조회 API
+- GIS 파일 업로드 API
+- GIS 파일 다운로드 API
+- 원본 분리 저장 및 최신 참조 갱신
+
+## 7. API 연동 초안
+
+| 기능 | Method | URL | 요청 | 응답 | 확인 상태 |
+| --- | --- | --- | --- | --- | --- |
+| 시설구분 메타 조회 | `GET` | `/api/v1/map/gisUploadFacilityTypes` | `screenId` | 시설구분, 허용 확장자, 업로드 가능 여부 | BE 신규 필요 |
+| 업로드 현황 조회 | `GET` | `/api/v1/map/gisUploadHistories` | `screenId`, `facilityTypeCode` | 업로드 이력 목록 | BE 신규 필요 |
+| GIS 업로드 | `POST` | `/api/v1/map/gisUploads` | `multipart/form-data` | 업로드 결과, 참조 갱신 정보 | BE 신규 필요 |
+| GIS 다운로드 | `GET` | `/api/v1/map/gisUploads/{uploadId}/download` | `uploadId` | 파일 다운로드 | BE 신규 필요 |
+
+## 8. 영향 범위
+
+- `apps/sn` 화면 영향
+  - 지도 화면 우측 기능 버튼의 `GIS 관리` popup 실제 동작
+  - popup 내부 폼/그리드/상태 메시지
+- 지도 기능 영향
+  - 지도 이동, 확대/축소, 레이어 트리 기존 동작은 유지돼야 한다.
+- 공통 비즈니스 컴포넌트 영향
+  - 현재 계획상 없음
+- 타 앱 영향 가능성
+  - 없음
+
+## 9. 검증 방법
+
+- 브라우저
+  - `GIS 관리` popup 열림
+  - 시설구분 미선택 시 차단
+  - 파일 선택 후 파일명 노출
+  - mock 업로드 후 목록 갱신
+  - 다운로드 대상 선택 상태
+  - popup 종료 시 분석도구 메뉴 active 해제
+  - 10건 단위 페이징과 첫 화면 5행 수준 밀도 확인
+  - `찾기`, `업로드`, `다운로드` 버튼 색/간격 확인
+- 정적 확인
+  - payload preview 또는 직렬화 결과 점검
+- 이번 라운드 수행 결과
+  - `http://127.0.0.1:3002/popup/gisManagementPopup` 응답 `200`
+  - popup 응답 HTML에서 `GIS 업로드`, `GIS 업로드 현황`, `시설구분`, `다운로드` 문자열 확인
+  - `pnpm --filter sn exec tsc --noEmit --pretty false --incremental false` 실행 시 기존 저장소 타입 오류로 실패했으며, 이번 popup 파일 관련 신규 오류는 출력되지 않았다.
+- 보류 항목
+  - 실제 multipart 업로드 응답
+  - 실제 다운로드 파일 수신
+
+## 10. 롤백 방법
+
+- `gisManagementPopup`을 placeholder content로 되돌린다.
+- 신규 popup content와 관련 mock 상태를 제거한다.
+
+## 11. 예상 위험
+
+- popup 구현 위치가 `src/features/windowPopup/**`라 지도 화면 코드와 책임 경계를 명확히 잡지 않으면 유지보수가 어려워질 수 있다.
+- 파일 업로드는 브라우저 객체와 서버 multipart 계약이 어긋나기 쉬워 FE-only 구현이 오래 임시 상태로 남을 수 있다.
+- 업로드 후 실제 지도 레이어 refresh 시점은 서버 계약 없이는 임의로 확정하기 어렵다.
+- 시설구분 목록은 아직 실제 `시설물 레이어`나 업로드 메타 API를 조회하지 않고 mock 값으로 유지된다.
+
+## 12. 완료 기준
+
+- FE 범위의 `GIS 관리` popup UI, mock 업로드 흐름, 페이지네이션, active 상태 해제가 반영됐을 것
+- 예상 수정 파일, 화면 흐름, BE 필요 범위가 문서로 정리됐을 것
+- 실제 업로드/다운로드 API 연동 전까지 FE와 BE 경계가 분리돼 있을 것
diff --git a/apps/sn/docs/작업계획/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-작업카드.md b/apps/sn/docs/작업계획/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-작업카드.md
new file mode 100644
index 000000000..9d73683f5
--- /dev/null
+++ b/apps/sn/docs/작업계획/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-작업카드.md
@@ -0,0 +1,292 @@
+# SFR-012-003 하수관로편집 작업카드
+
+## 1. 작업 개요
+- 작업 ID: SFR-012-003-FE
+- 작업명: 하수관망도 GIS편집 프론트엔드 구현 계획
+- 상태: 진행
+- 작성일: 2026-05-14
+- 담당 역할: FE
+- 관련 역할: DE, BE, QA
+- 담당 범위: `apps/sn` 지도형 화면에서 GIS편집 진입, 레이어 선택, 추가/이동/꼭지점편집/삭제, 관로 기본정보 세션 편집, 저장 payload 준비까지 구현
+- 근거 문서:
+  - `COMMON_DOCS_ROOT/작업계획/SFR-012-003-하수관로편집/001-de-SFR-012-003-하수관로편집-설계.md`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-003-하수관로편집/하수관망도편집_요구사항명세서_v1_1.docx`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-003-하수관로편집/하수관망도편집_화면시나리오_v1_1.md`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-003-하수관로편집/하수관망도편집_화면_v1_1.html`
+  - `COMMON_DOCS_ROOT/작업지시/SFR-012-003-하수관로편집/하수관망도편집_화면설계서_v1_1.png`
+
+## 1-2. 최근 진행 갱신
+- 2026-06-29
+  - 원본 하수관로 WFS snap source를 우선 사용할 때 사용자 임시 추가 관로 preview가 스냅 대상에서 빠지는 구조를 확인했다.
+  - `page.tsx`의 pipe snap source 로더를 보강해 현재 세션의 `ADD`/`MOVE`/`VERTEX_EDIT` preview 관로도 함께 병합하고, 기존 수정 관로의 원본 fid는 숨겨 stale geometry로 스냅되지 않게 했다.
+  - `GIS 편집 세션` popup 버튼은 `취소/뒤로가기/초기화` 3종으로 재정렬하고, `취소`는 현재 선택 change 제거, `뒤로가기`는 기존 마지막 변경 취소 의미로 분리했다.
+  - 정적 타입체크 결과 이번 변경 파일 신규 오류는 없었고, 저장소 기존 오류만 남았다. 브라우저 수동 검증은 다음 범위로 남긴다.
+- 2026-06-26
+  - `MOVE` 도구가 관로 1회 이동 후 자동 해제되는 현상을 요구사항 분석 범위로 확인했다.
+  - 현재 원인은 `useGisEdit.updateChangeGeometry()` 기본 경로가 geometry 갱신 뒤 `activeTool`과 `pendingInteraction`을 모두 비우는 구조이고, `page.tsx`의 `MOVE translateend`가 이 함수를 옵션 없이 호출하는 데 있다.
+  - 구현은 `MOVE` 완료 후 `activeTool="MOVE"`를 유지하고 `pendingInteraction`만 비워 다음 관로 클릭을 새 이동 대상으로 받는 방식으로 반영했다.
+  - 정적 타입체크는 실행했으나 저장소 기존 오류에서 실패했고, 실제 브라우저 연속 이동 검증은 다음 수동 검증 범위로 남긴다.
+- 2026-06-08
+  - `MOVE`와 `꼭지점편집` 사이에 `스냅핑` on/off 버튼을 추가하고, 편집 세션/상태 스냅샷에도 `ON/OFF`가 보이도록 연결했다.
+  - 기존 임시 스냅 수집 방식으로는 원본 오수관에 안정적으로 붙지 않는다고 판단해, 1차 재구현 범위를 `ADD`, `VERTEX_EDIT`로 줄였다.
+  - `ADD`, `VERTEX_EDIT`는 현재 화면 BBOX 기준으로 읽어온 `tb_ms_swage_ppl` 원본 WFS geometry를 전용 snap source로 사용하도록 재구성했다.
+  - 후속 보정으로 `MOVE`도 같은 원본 하수관로 snap source를 사용하도록 넓혔고, 이동 기준점은 사용자가 처음 집은 관로 꼭지점(grip vertex)으로 다시 고정했다.
+  - `MOVE` 중 관로 입력정보 조회에서 `500`이 발생하는 케이스를 줄이기 위해 상세 팝업의 path segment를 인코딩하고 `NEW-*` 임시값 조회를 차단했다.
+  - `VERTEX_EDIT` 중 주황색 실꼭지점을 클릭해 선택한 뒤 키보드 `Delete`로 삭제할 수 있게 했고, 하수관로 최소 2점 유지 규칙을 넣었다.
+  - 흰색 midpoint는 새 점 삽입 전용으로 유지하고, Delete 삭제 대상에서는 제외했다.
+  - 수동 브라우저 재검증은 아직 남아 있고, 정적 타입체크는 저장소 기존 오류와 별개로 이번 변경분 신규 오류는 정리했다.
+- 2026-05-21
+  - 실제 구현 코드를 다시 점검한 결과, 현재 GIS편집은 geometry 세션만 관리하고 관로 기본정보 세션은 없는 상태로 정리했다.
+  - `tb_ms_swage_ppl` geometry와 `tb_sn_swage_ppl` 기본정보 저장 구조가 분리돼 있어, 최종 저장 payload는 `featureRef + basicInfo + geometryPatch` 기준으로 재설계했다.
+  - 편집 모드에서 하수관로 change를 선택하면 기본정보만 세션 저장할 수 있는 편집 상세정보창을 추가하고, 최종 저장은 geometry와 기본정보를 함께 조립하는 방향으로 구현 중이다.
+  - 하수관로 편집 팝업의 입력정보 저장버튼은 제거하고, 입력 변경 시 세션 draft가 바로 반영되도록 수정했다.
+  - 편집 팝업 입력 시 스크롤 상단 점프와 `Maximum update depth exceeded` 에러 원인을 자동저장 effect 루프로 보고 제거했다.
+  - `MOVE`, `VERTEX_EDIT` 중에는 하수관로만 선택 가능하게 차단하고, 하수관로 선택 즉시 편집 상세정보창이 열리도록 보강했다.
+- 2026-05-14
+  - 7개 편집 레이어 확장, 레이어별 허용 도구 규칙, 로컬 세션 undo/reset, `MOVE`/`VERTEX_EDIT`/`DELETE` 임시 변경분 누적까지 반영했다.
+  - 이번 라운드에서 `MOVE`를 preview feature 기반 실제 drag 흐름으로 올리고, 지도 위 preview 강조와 재선택 UX를 보강했다.
+  - `VERTEX_EDIT` 구현은 QGIS 기준 사용자 경험과 어긋나는 구간이 확인되어 재설계가 필요하다.
+  - 재구현 기준은 `ADD=geometry family별 직접 캡처`, `MOVE=현 방식 유지`, `VERTEX_EDIT=양 끝점 포함 vertex marker 조작`으로 다시 고정한다.
+  - 다음 핵심 잔여 범위는 설계 문서 기준 재정렬 후 `ADD`, `VERTEX_EDIT`, `DELETE`를 순서대로 안정화하는 것이다.
+
+## 1-3. 브라우저 검증 선행조건
+- 접속 URL: `sn` 지도 메인 화면 진입이 가능해야 한다.
+- 로그인/권한: `/map` 진입과 지도 API 호출이 가능한 계정 또는 로컬 임시 로그인 경로가 준비되어야 한다.
+- 서버 조건: FE dev 서버, BE API, 프록시 또는 gateway 경로가 응답해야 한다.
+- 데이터 조건: 편집 대상 레이어, 샘플 객체, 테스트 BBOX를 확보해야 한다.
+- 인증 차단 시 대체 경로: `COMMON_DOCS_ROOT/작업내용/공통-로그인/001-de-공통-로그인-로컬임시로그인-검토계획.md` 기준으로 로컬 로그인 가능 여부를 먼저 확인한다.
+- 자동화 한계 예상 항목: canvas drag, vertex 직접 조작은 수동 검증 전환 가능 항목으로 본다.
+
+## 1-1. 공통 동기화 확인
+- 공통 작업현황판 확인 여부: 확인
+- 파일점유현황 확인 여부: 확인
+- 결정로그 확인 여부: 확인
+- 기존 진행 중 작업과의 관계: 지도 메인 화면 `map/page.tsx`는 최근 유하방향표출 작업 이력이 있어 동일 파일 충돌 주의가 필요하다.
+
+## 2. 작업 목적
+- 기존 하수관망도 지도 화면에 `GIS편집` 기능을 추가해 사용자가 편집 대상 레이어를 고른 뒤 객체 추가, 이동, 꼭지점편집, 삭제, 저장까지 한 흐름에서 수행할 수 있게 한다.
+- 프론트는 저장 전까지 편집 변경분을 로컬 세션으로 관리하고, 저장 시 BE가 제공할 편집 저장 API에 맞춰 payload를 전달한다.
+- 백엔드 개발자가 바로 이어받을 수 있도록 필요한 API, 화면 상태, 예외 흐름을 FE 기준으로 구체화한다.
+- 실제 API 구현은 범위 밖이며, 백엔드 공유용 요청 사항은 `작업내용` 문서로 분리해 관리한다.
+- 추가 운영 제약:
+  - `GIS편집`, `GIS관리`는 하수관로만 대상으로 제한한다.
+  - 다른 GIS 테이블은 타회사 소유 범위로 보고 FE에서 선택/업로드 대상으로 노출하지 않는다.
+
+## 3. 수정 대상 파일
+| 구분 | 파일 경로 | 수정 여부 | 근거 |
+| --- | --- | --- | --- |
+| 화면 | `FE_APP_ROOT/app/(map-layout)/map/page.tsx` | 예정 | 지도 메인 화면에서 우측 기능 버튼, 편집 모드 상태, OpenLayers interaction 연결 필요 |
+| 컴포넌트 | `FE_APP_ROOT/app/(map-layout)/map/components/gisEdit/*` | 예정 | 툴바, 세션 패널, 편집 훅 분리 후보 |
+| 팝업/선택 | `FE_APP_ROOT/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx` | 가능성 있음 | 편집 모드 중 기존 상세 팝업 충돌 차단 필요 |
+| API 호출 | `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 또는 `components/gisEdit/*` | 부분 완료 | 현재는 저장 payload 미리보기까지 구현, 실제 API 호출은 후속 |
+| 공통 비즈니스 컴포넌트 | `FE_BC_ROOT/**` | 기본 제외 | 초기 구현은 `apps/sn` 내부 해결 우선 |
+
+## 3-1. 쓰기 범위와 충돌 주의
+| 구분 | 경로 | 담당 역할 | 처리 기준 |
+| --- | --- | --- | --- |
+| 쓰기 허용 | `apps/sn/**` | FE | 지도 화면, 편집 상태, API 호출 작업 |
+| 쓰기 허용 | `packages/common/business_components/**` | FE | 꼭 필요한 경우에만 최소 범위 수정 |
+| 쓰기 금지 | `packages/common/business_components` 외 공통 패키지 | FE | 문제 원인과 영향 범위만 기록 |
+| 쓰기 금지 | 타 앱 `apps/*` | FE | 문제 원인과 영향 범위만 기록 |
+
+- 충돌 주의 파일:
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx`
+- 인수인계 메모:
+  - `map/page.tsx`는 이미 레이어 트리, 검색, 유하방향표출까지 담당 중이라 편집 기능을 그대로 누적하면 과도하게 비대해질 수 있다.
+  - 가능하면 `components/gisEdit` 하위로 상태/뷰를 나눠야 한다.
+- 파일점유 등록 여부: 공통 파일점유현황에 계획 작업 반영
+
+## 4. 화면 흐름
+- 진입 경로: `관망도편집 > 하수관망도 편집`의 지도형 메인 화면
+- 사용자 조작:
+  - 우측 `GIS편집` 클릭
+  - 편집 대상 레이어 선택
+  - `추가`, `이동`, `꼭지점편집`, `삭제` 중 선택
+  - 저장 클릭
+- 정상 흐름:
+  - 편집 모드 진입
+  - 레이어 선택 전 도구 비활성
+  - 레이어 선택 후 도구 활성
+  - `추가`는 geometry family별로 사용자가 지도에서 직접 형상을 캡처
+  - `이동`은 preview drag로 위치 조정
+  - `꼭지점편집`은 선택 객체의 vertex marker를 노출하고 양 끝점을 포함해 이동
+  - 변경분이 로컬 편집 세션에 누적
+  - 하수관로 편집은 기존 상세정보창 구조를 재사용하고, `입력정보` 저장은 세션 저장으로 처리
+  - 저장 시 원본과 분리된 편집본 저장 요청
+- 빈 결과 흐름:
+  - 변경분이 없으면 저장 비활성 또는 안내 메시지 표시
+- 오류 흐름:
+  - 편집 대상 미선택
+  - 미지원 레이어 선택
+  - 객체 미선택
+  - geometry 오류
+  - 저장 실패 시 임시 변경분 유지
+
+## 5. API 연동
+| 기능 | Method | URL | 요청 | 응답 | 확인 상태 |
+| --- | --- | --- | --- | --- | --- |
+| 기존 레이어 트리 조회 | `GET` | `/api/v1/map/lyrStngs/SN_NETWORK` | 기존 지도 레이어 그룹 | 레이어 트리 데이터 | 기존 사용 중 |
+| 편집 가능 레이어 메타 조회 | `GET` | `/api/v1/map/gisEditLayers` | `lyrGrp`, `screenId` | 편집 가능 레이어, geometry 타입, 허용 도구 | BE 신규 필요 |
+| 관로 기본정보 조회 | `GET` | `/api/v1/fcltppl/{fcltMngNo}/{mngInstCd}` | 관로 식별자 | `PplDto` 기본정보 7개 필드 | 기존 사용 중 |
+| 편집 저장 | `POST` | `/api/v1/map/gisEditSessions/save` | 레이어 정보, view, `changes[]` | `sessionId`, `editFileId`, `versionNo`, `savedCount` | BE 신규 필요 |
+
+- FE 메모:
+  - 저장 전까지 변경분은 FE 로컬 상태로 보관한다.
+  - 관로 상세정보창의 저장은 즉시 API 호출이 아니라 change별 세션 저장으로 해석한다.
+  - 현재 구현은 실제 최종 저장 호출 대신 payload 미리보기만 생성한다.
+  - BE 요청 사항은 `FE_APP_DOCS_ROOT/작업내용/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-프론트공유API요청.md`에 별도 정리한다.
+
+## 6. 영향 범위
+- `apps/sn` 화면 영향:
+  - 지도 메인 화면 상단 툴바
+  - 우측 기능 버튼
+  - 편집 세션 패널
+  - 기존 피처 클릭 상세와의 충돌 제어
+- `business_components` 영향:
+  - 초기 계획상 없음
+  - `Gis` 공통 확장이 꼭 필요해지면 별도 승인/영향분석 후 검토
+- 백엔드 API 영향:
+  - 편집 가능 레이어 메타 API
+  - 저장 API
+  - 원본 분리 저장 및 참조 갱신 로직
+- 다른 앱 영향 가능성:
+  - 현재 계획상 없음
+  - `apps/sn` 내부 구현 우선
+
+## 6-1. 멀티에이전트 작업 분리
+- FE 담당 산출물:
+  - 편집 모드 토글
+  - 툴바 및 세션 패널
+  - OpenLayers 편집 interaction
+  - 저장 payload 조립
+- BE 담당 산출물:
+  - 편집 가능 레이어 메타 조회
+  - 저장 API
+  - 원본 분리 저장, 편집본 참조 갱신
+- QA 담당 산출물:
+  - 편집 대상 미선택/객체 미선택/geometry 오류/저장 실패 검증
+  - 저장 후 원본 보호 검증
+- 병렬 진행 가능 항목:
+  - FE 로컬 상태/툴바 UI 설계
+  - BE API 명세 확정
+- 순차 진행 필요 항목:
+  - 저장 payload 최종 필드 확정 후 FE-BE 연동 검증
+
+## 6-2. 채팅방 간 충돌 방지
+- 같은 기능을 다른 채팅방에서 진행 중인지: 현재 공통 작업현황판에는 신규 기능 구현 행이 아직 없다. 이번 문서 작성으로 최초 등록한다.
+- 겹치는 파일 또는 폴더:
+  - `map/page.tsx`
+  - `featureClickEventPopup.tsx`
+  - `FE_APP_DOCS_ROOT/작업계획/**`는 문서 재정리 흔적이 있어 경로 유지 주의
+- 점유 충돌 시 처리 방식:
+  - 문서와 실제 코드 작업을 분리하고, 코드 착수 전에 파일점유현황을 다시 갱신한다.
+
+## 7. 검증 방법
+- 빌드 명령:
+  - 개발 서버 미실행 확인 후 `pnpm --filter sn run build`
+  - 필요 시 `pnpm turbo run build --filter=sn`
+- 브라우저 URL:
+  - 기본 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 진입 화면
+- 사용자 조작:
+  - `GIS편집` 클릭
+  - 레이어 선택 전/후 도구 활성 상태 확인
+  - `추가`, `이동`, `꼭지점편집`, `삭제` 각각 1회 수행
+  - 저장 클릭
+- 기대 결과:
+  - 레이어 선택 전 편집 도구 비활성
+  - 변경분 누적 시 저장 활성
+  - 저장 실패 시 임시 변경분 유지
+  - 저장 성공 시 원본 보존 메시지 표시
+- 네트워크 응답 확인 기준:
+  - `gisEditLayers` 응답에 editable 여부와 도구 목록 포함
+  - `gisEditSessions/save` 요청에 `changes[]`가 변경 유형별로 정확히 담김
+  - 저장 성공 응답에 편집본 식별자와 버전 정보 포함
+
+## 7-1. 하네스 관측 포인트
+- 화면 관측
+  - `GIS편집` 버튼 강조 여부
+  - 툴바 노출 여부
+  - 선택 레이어명
+  - 상태 메시지
+  - 변경 목록 행 수
+- 지도 상호작용 관측
+  - `ADD` 완료 후 신규 항목 생성
+  - `MOVE` drag 종료 후 preview label과 목록 요약 변화
+  - `VERTEX_EDIT` 시 vertex marker 또는 modify handle 노출
+  - `DELETE` 시 삭제 예정 스타일 유지
+- 세션 관측
+  - `undo`, `reset`, `canSave`
+  - 저장 실패 시 임시 변경분 유지
+- 차단 사유 분류
+  - 기능 결함
+  - 인증 차단
+  - 환경 차단
+  - 데이터 차단
+  - 자동화 한계
+
+## 8. 롤백 방법
+- `GIS편집` 토글과 편집 툴바 UI 제거
+- `components/gisEdit/*` 신규 파일 제거
+- 편집 저장 API 호출 분기 제거
+- 기존 지도 조회/레이어 트리/피처 상세 흐름만 남기기
+
+## 9. 예상 위험
+- `map/page.tsx`가 이미 크기와 책임이 커서 기능 누적 시 회귀 위험이 높다.
+- 점형/선형 객체의 편집 interaction이 달라 공통 훅 설계가 어색해질 수 있다.
+- 편집 가능 레이어/geometry 타입/저장 대상이 확정되지 않으면 FE 구현이 임의 가정을 하게 될 수 있다.
+- 편집 모드 중 기존 피처 클릭 상세 팝업이 뜨면 객체 선택/이동과 충돌할 수 있다.
+
+## 10. 완료 기준
+- `GIS편집` 버튼으로 편집 모드 on/off 가능
+- 레이어 선택 전 편집 도구 비활성
+- 선택 레이어 기준으로 `추가`, `이동`, `꼭지점편집`, `삭제` 최소 동작 가능
+- 변경분이 로컬 편집 세션에 누적되고 목록으로 확인 가능
+- 저장 payload가 설계 문서 계약과 맞게 구성됨
+- BE 공유용 API 요청 문서가 별도 정리됨
+- 브라우저에서 정상/예외 시나리오를 확인할 수 있음
+- 결과 보고 시 작업 목적, 수정 대상 파일, 영향 범위, 검증 방법, 롤백, 리스크를 정리할 수 있음
+- 2026-06-26 관로 입력정보 조회 오류 방어
+  - MOVE on/off 기능 테스트 중 기존 관로 상세 입력정보 조회 실패가 `Error: ERROR` 콘솔 오류로 노출되는 문제를 확인했다.
+  - `GisEditPipeSessionPopup`은 선택적 입력정보 조회 실패를 편집 세션 중단/콘솔 오류로 처리하지 않고, 기존 WFS/세션 draft 값을 유지하도록 보강한다.
+  - 백엔드 `PplService`는 MS 보조 상세속성/관리기관명 조회 실패를 전체 API 500으로 전파하지 않고 fallback하도록 보강한다.
+
+## 11. 2026-07-15 편집 세션 배치 유지보수
+
+- 작업 모드: `maintenance`
+- 범위: 프론트엔드 `sn` 지도 화면
+- 구현 범위
+  - GIS 편집 진입 시 편집 세션을 시설물 관리 옆 인라인 패널로 표시
+  - 초기 패널은 내용 높이로 표시하고 변경분 증가에 따라 확장
+  - 시설물 접기 토글 전 최대 높이 제한 및 변경 목록 세로 스크롤
+  - 하수관로 편집 도구바를 검색/세션 영역 아래로 이동
+  - 인라인 패널의 명시적 `팝업` 버튼으로 기존 윈도우 팝업 재사용
+- 제외 범위
+  - 편집 저장 API, 편집 도구 로직, 백엔드 및 DB 계약 변경 없음
+- 완료 기준
+  - 편집 모드 진입만으로 새 창이 자동 생성되지 않는다.
+  - 인라인 세션과 기존 팝업의 취소/되돌리기/초기화/포커스 동작이 같은 상태를 사용한다.
+  - 변경 목록이 최대 높이를 넘으면 패널 전체가 아니라 목록 영역에 세로 스크롤이 생성된다.
+
+## 12. 2026-07-15 사용자 화면 피드백 2차 유지보수
+
+- 11절의 `top: 84px` 중앙 도구바 배치는 사용자 확인 결과를 반영해 폐기한다.
+- 수정 완료 기준
+  - 인라인 세션 표시 중 검색바의 모든 검색 조건이 가려지지 않는다.
+  - GIS 편집 도구바는 인라인 세션 바로 아래에 표시되고 세션 높이 증가를 따라 내려간다.
+  - 팝업을 열면 인라인 세션은 숨는다.
+  - 팝업의 `화면에서 보기` 또는 팝업 닫기로 인라인 세션이 복원된다.
+  - 팝업과 인라인은 동시에 보이지 않으며 편집 변경 상태는 유지된다.
+- 공통 영향
+  - `FE_BC_ROOT/ui/map/Gis.js`에 선택적 검색바 래퍼 클래스 전달 기능을 추가하되 기본 화면 동작은 유지한다.
+
+## 13. 2026-07-15 표시 영역 기준 최종 배치
+
+- 12절의 검색바 이동과 세션 종속 도구바 배치는 사용자 표시 영역 기준으로 대체한다.
+- 완료 기준
+  - 검색바는 편집 모드 전후 같은 중앙 위치를 유지한다.
+  - 변경분 0건의 편집 세션은 검색바와 유사한 축약 높이로 상단 표시 영역에 배치된다.
+  - 변경분이 추가되면 편집 세션만 아래로 확장되고 최대 높이 이후 목록 스크롤이 생긴다.
+  - GIS 편집 도구바는 하단 표시 영역 중앙에 고정된다.
+  - 팝업 전환 시 인라인 숨김과 `화면에서 보기` 복귀는 유지된다.
+- 공통 `Gis.js`는 수정하지 않는다.
diff --git a/apps/sn/docs/작업계획/SN-침입수분석결과-지도연계유지보수/001-fe-SN-침입수분석결과-지도연계유지보수-작업카드.md b/apps/sn/docs/작업계획/SN-침입수분석결과-지도연계유지보수/001-fe-SN-침입수분석결과-지도연계유지보수-작업카드.md
new file mode 100644
index 000000000..d0cd924e7
--- /dev/null
+++ b/apps/sn/docs/작업계획/SN-침입수분석결과-지도연계유지보수/001-fe-SN-침입수분석결과-지도연계유지보수-작업카드.md
@@ -0,0 +1,204 @@
+# SN 침입수분석결과 지도연계 유지보수 작업카드
+
+## 1. 작업 개요
+
+- 작업 ID: `SN-INFTWT-RESULT-FE`
+- 작업명: 침입수분석결과 지도형 popup 및 하이라이트 연계
+- 상태: 검증
+- 작성일: 2026-06-30
+- 담당 역할: FE
+- 관련 역할: DE, BE, QA
+- 담당 범위: `apps/sn` 하수관망도 `분석도구`, popup registry, 지도 하이라이트, 결과 전용 popup 모드
+- 근거 문서
+  - `COMMON_DOCS_ROOT/작업계획/SN-침입수분석결과-지도연계유지보수/001-de-SN-침입수분석결과-지도연계유지보수-설계.md`
+  - `COMMON_DOCS_ROOT/기준문서/010-AI개발작업흐름.md`
+  - `FE_APP_DOCS_ROOT/기준문서/010-용어사전.md`
+  - `FE_APP_DOCS_ROOT/기준문서/013-UI레이아웃가이드.md`
+
+## 1-1. 공통 동기화 확인
+
+- 공통 작업현황판 확인 여부: 확인
+- 파일점유현황 확인 여부: 확인
+- 결정로그 확인 여부: 확인
+- 기존 진행 중 작업과의 관계
+  - `map/page.tsx`, `AnalysisPopupMenu.tsx`, `windowPopup/**`는 최근 지도형 popup 기능과 겹친다.
+  - 따라서 기존 `노후관로`, `관로분석`, `지반침하` popup 패턴을 그대로 재사용하는 방향을 우선한다.
+
+## 2. 작업 목적
+
+- 기존 업무형 `ii/result` 화면의 침입수 분석결과 조회를 지도형 `분석도구` popup으로 옮긴다.
+- 결과 행 선택 시 지도에서 결과 관로를 강조하고, `실측하수량` 보유 관로를 별도 색으로 구분한다.
+- 하이라이트 관로 클릭 시 기본 관로 상세가 아니라 `침입수 분석결과` 전용 popup이 열리도록 FE 흐름을 전환한다.
+
+## 3. 수정 대상 파일
+
+| 구분 | 파일 경로 | 수정 여부 | 메모 |
+| --- | --- | --- | --- |
+| 우측 메뉴 | `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx` | 완료 | `침입수 분석` 메뉴 추가 |
+| 지도 메인 | `FE_APP_ROOT/app/(map-layout)/map/page.tsx` | 완료 | popup 열기, 결과 overlay, 클릭 분기, popup message 처리 |
+| popup 정의 | `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts` | 완료 | `inftwtResultPopup` 정의 추가 |
+| popup 등록 | `FE_APP_ROOT/src/features/windowPopup/registry.tsx` | 완료 | 결과 popup content 연결 |
+| 기존 결과 popup | `FE_APP_ROOT/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx` | 완료 | `resultOnly` 모드 추가 |
+| 기존 API helper | `FE_APP_ROOT/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts` | 유지 | 기존 helper 재사용, popup content에서 고정 파라미터만 추가 |
+| 기존 업무형 화면 | `FE_APP_ROOT/app/(with-base-layout)/ii/result/page.tsx` | 유지 | 현재 구현은 popup 전용으로 분리하고 기존 화면은 읽기 기준으로 유지 |
+| 신규 popup | `FE_APP_ROOT/app/(map-layout)/map/components/inftwtResult/**` | 완료 | 결과 목록 popup 화면 및 지도 연계 hook 구현 |
+
+## 4. 구현 범위
+
+### 4.1 포함
+
+- `분석도구 > 침입수 분석` popup 진입
+- 기존 `ii/result` 조회조건과 결과 목록의 popup 재구성
+- 결과 row click -> 부모창 message 전달
+- map/page 결과 overlay state와 focus 처리
+- 일반 결과 관로 / `실측하수량` 관로 이중 스타일
+- overlay 관로 click -> `infilChart` 결과 전용 모드
+
+### 4.2 제외 또는 후속
+
+- 실제 분석 산정 로직 수정
+- 신규 업무형 route 추가
+- 공통 패키지(`business_components`) 확장
+- 다른 앱 공통 popup 체계 변경
+
+## 5. 화면 흐름
+
+1. 사용자가 하수관망도 우측 `분석도구`에서 `침입수 분석`을 클릭한다.
+2. 시스템이 `inftwtResultPopup`을 연다.
+3. 사용자가 기존 침입수 분석 이력 목록을 조회한다.
+4. 사용자가 특정 분석 row를 클릭한다.
+5. popup은 부모창으로 `inftwtAnlsSn`과 row 요약을 전달한다.
+6. `map/page.tsx`가 분석 결과 overlay를 그리고 focus area로 이동한다.
+7. 사용자가 강조된 관로를 클릭한다.
+8. 시스템은 `openWindowPopup("infilChart", { pplMngNo, inftwtAnlsSn, resultOnly: "Y" })`를 호출한다.
+9. popup은 좌측 조건 없이 결과 그래프와 침입수량만 보여준다.
+
+## 6. FE 구현 메모
+
+- popup UI는 `AgedPipePopupPage`, `PipeAnalysisPopupPage` 패턴을 우선 따른다.
+- 새 popup에서 기존 `ii/result/page.tsx` 전체를 그대로 감싸기보다:
+  - 조회조건/테이블 데이터 조회
+  - 다운로드 매핑
+  - row 선택 로직
+  - 이 3가지를 shared util 또는 hook으로 추출하는 쪽이 안전하다.
+- overlay 관로는 기존 피처 클릭과 분리하기 위해 전용 vector layer를 우선 검토한다.
+- `실측하수량` 관로 스타일은 `infilChart`의 주황 의미와 맞춘다.
+
+## 7. API 연동
+
+| 기능 | Method | URL | 상태 | FE 메모 |
+| --- | --- | --- | --- | --- |
+| 분석이력 조회 | `GET` | `/api/v1/inftwtAnls` | 재사용 | popup 목록 조회 |
+| 결과 전체 다운로드 | `GET` | `/api/v1/inftwtAnlsRslt/ppl/{inftwtAnlsSn}` | 재사용 | 엑셀 생성 source |
+| 지도 연계 요약 | `GET` | `/api/v1/inftwtAnlsRslt/mapView/{inftwtAnlsSn}` | 신규 | focus geometry + highlight 대상 |
+| 관로 결과 그래프 | `GET` | `/api/v1/inftwtAnlsRslt/ppl/{inftwtAnlsSn}/{pplMngNo}` | 재사용 | 결과 전용 popup |
+| 실측하수량 시계열 | `GET` | `/api/v1/inftwtAnlsRslt/oilqPpl/{inftwtAnlsSn}/{pplMngNo}` | 재사용 | 결과 전용 popup |
+| 침입수량 집계 | `GET` | `/api/v1/inftwtAnlsRslt/pplInftwtQty/{inftwtAnlsSn}/{pplMngNo}` | 재사용 | 결과 전용 popup |
+
+## 8. 검증 계획
+
+- popup 진입/닫기
+- 기존 `ii/result`와 동일 조건 조회 결과 일치
+- row click 후 map focus 이동
+- 결과 관로 / 실측하수량 관로 스타일 구분
+- overlay click 시 기본 `FeatureClickEventPopup` 대신 결과 전용 popup 노출
+- `양평` 데이터에서 실측하수량 관로 색상 및 그래프 확인
+
+## 9. 롤백 방법
+
+- `AnalysisPopupMenu.tsx`의 `침입수 분석` 메뉴 제거
+- `page.tsx`의 결과 overlay state 및 message listener 제거
+- `infilChart.tsx`의 `resultOnly` 모드 제거
+- 신규 popup registry/definition 제거
+
+## 10. 남은 리스크
+
+- `ii/result`와 popup의 조회/다운로드 로직 공용화 범위를 잘못 잡으면 중복 수정이 생길 수 있다.
+- 결과 관로 수가 많은 경우 overlay 피처 수와 클릭 성능을 점검해야 한다.
+- 기본 하수관로 상세와 overlay click 분기 우선순위를 잘못 잡으면 사용자 체감이 어색해질 수 있다.
+
+## 11. 2026-07-01 유지보수 보정
+
+- row click 후 FE가 기대하는 `mapView` 계약을 `focusLayerType`, `focusFid`, `focusFallbackApplied`, `pipeCount`, `oilqPipeCount` 중심으로 재정리했다.
+- FE는 백엔드가 내려준 결과 관로 GeoJSON을 그대로 하이라이트하되, 지도 이동은 처리구역 1건의 `focus fid`를 우선 사용하고 실패 시 결과 관로 extent fallback만 수행한다.
+- 이 보정으로 FE는 더 이상 전체 시계열 결과를 별도로 들고 있지 않고, 결과 popup row 요약 + 경량 mapView 응답만 기준으로 지도 연계를 수행한다.
+- 브라우저 수동 검증 전까지 상태는 `검증`을 유지한다.
+
+## 12. 2026-07-01 row click 지도 이동 보정
+
+- row click 직후 FE는 더 이상 `showSearchResultsFromGeoJSON`로 처리구역/관로를 강제 선택하지 않는다.
+- `focusTargetType=ZONE`이면 처리구역 overlay extent를 우선 fit 하고, 아니면 결과 관로 extent를 fit 한다.
+- 이 보정으로 잘못된 기본 관로 상세 패널이 자동으로 열리는 현상을 막고, 지도 이동과 overlay 하이라이트를 분리한다.
+
+## 13. 2026-07-01 분석 실행 화면 선택구조 유지보수
+
+- `ii/irsetting`만 기존 시설 우선 selector를 그대로 쓰지 않고, 커스텀 `selectionComponent`로 처리구역 우선 selector를 주입한다.
+- 새 selector는 시도/시군구 선택 뒤 `GET /api/v1/swagePrcsZones/selectionOptions`를 호출해 `하수처리구역명` 목록을 받고, 선택 시 `하수처리시설명`을 읽기 전용으로 자동 표시한다.
+- `ii/rdii`, `ii/result`, 지도 검색 모달 등 기존 `CtpvSggPrcsFcltSelectBox` 사용처는 이번 범위에서 변경하지 않는다.
+- 저장 payload는 기존과 동일하게 `swtrmtFcltNm`만 유지해 회귀 범위를 최소화한다.
+## 14. 2026-07-09 분석 실행 화면 결과보기 유지보수
+
+- `ii/irsetting` 우측 액션 영역에 `결과보기` 버튼을 추가한다.
+- 버튼 클릭 시 분석 화면을 닫지 않고, 별도 `/map` 창과 `침입수 분석결과` popup을 함께 열어 기존 지도형 결과 흐름으로 바로 진입시킨다.
+- popup row select는 기존 `window.opener.postMessage`를 유지하되, opener가 분석 화면일 수 있으므로 storage 이벤트 기반 보조 동기화를 함께 둔다.
+- `map` 화면은 `analysisPopupKey` query를 받아 `분석도구` 활성 메뉴 상태를 `침입수 분석결과` 기준으로 맞춘다.
+
+## 15. 2026-07-10 전역 progress watcher / overlay 설계
+
+- 현재 FE는 `ii/useAnalysisCompletionWatcher.ts`에서 완료 alert용 polling만 담당하므로, 같은 파일 또는 인접 컴포넌트로 역할을 아래처럼 확장한다.
+  - 분석 요청 등록
+  - 상태 polling 갱신
+  - 완료 alert 처리
+  - 전역 progress overlay 렌더용 상태 제공
+- 실제 전역 mount는 `FE_APP_ROOT/src/app/providers/app-provider.tsx`에만 둔다.
+- 구현 단계에서는 `FE_APP_ROOT/app/(with-base-layout)/layout.tsx`의 중복 `GlobalAnalysisCompletionWatcher` mount를 제거해 polling 2중 실행을 막는다.
+
+### 15.1 수정 대상 파일 보정
+
+| 구분 | 파일 경로 | 수정 예정 | 메모 |
+| --- | --- | --- | --- |
+| 전역 provider | `FE_APP_ROOT/src/app/providers/app-provider.tsx` | 예정 | watcher / progress overlay 단일 mount |
+| 레이아웃 정리 | `FE_APP_ROOT/app/(with-base-layout)/layout.tsx` | 예정 | 중복 watcher 제거 또는 전역 mount 정리 |
+| 상태 watcher | `FE_APP_ROOT/app/(with-base-layout)/ii/useAnalysisCompletionWatcher.ts` | 예정 | storage schema, progress polling, 완료/실패 종료 처리 확장 |
+| 침입수 실행 화면 | `FE_APP_ROOT/app/(with-base-layout)/ii/irsetting/page.tsx` | 예정 | 접수 후 progress 감시 등록, full-screen 로딩 즉시 해제 유지 |
+| 전역 overlay | `FE_APP_ROOT/app/(with-base-layout)/ii/**` 또는 `FE_APP_ROOT/src/app/providers/**` | 예정 | 좌측 하단 progress UI 신규 컴포넌트 |
+
+### 15.2 FE 상태 모델
+
+- 기존 `SN_PENDING_ANALYSIS_WATCHES` storage key는 유지하되 item schema를 확장한다.
+- 1차 침입수 분석용 item 초안
+  - `analysisType: "INFTWT"`
+  - `analysisSn`
+  - `analysisName`
+  - `statusUrl`
+  - `progressPercent`
+  - `progressStep`
+  - `progressMessage`
+  - `updatedAt`
+  - `successMessage`
+  - `failureMessage`
+- 추후 RDII 복제를 위해 `analysisType` 필드는 미리 포함한다.
+
+### 15.3 사용자 표시 규칙
+
+- 접수 직후 alert 문구는 기존 사용자 요구대로 `분석 데이터가 성공적으로 제출되었습니다.`를 유지한다.
+- 중앙 로딩 overlay는 접수 응답 직후 바로 닫는다.
+- 전역 progress overlay는 좌측 하단에 고정하고 아래만 표시한다.
+  - 분석명
+  - 진행률 바
+  - 현재 단계 1줄 문구
+- 완료 후에는 overlay 안에서 별도 성공 메시지를 띄우지 않고 기존 alert만 사용한다.
+
+### 15.4 polling / 렌더링 규칙
+
+- polling 주기는 현재 3초를 유지하되, status 응답이 바뀔 때마다 storage를 갱신해 overlay가 같은 데이터를 읽게 한다.
+- `scsYn`이 `Y` 또는 `N`이면 해당 watch item을 제거하고 alert를 띄운다.
+- 진행 중(`P`)이면 overlay만 갱신한다.
+- `/map`, `ii/result`, `ii/irsetting`, 기타 `with-base-layout` 페이지에서 같은 storage를 읽으므로 페이지 이동과 무관하게 overlay가 유지된다.
+
+### 15.5 검증 포인트 보강
+
+- `침입수분석 실행 -> 접수 alert -> 중앙 로딩 종료 -> 좌측 하단 progress 표시`
+- `ii/irsetting -> ii/result -> /map` 이동 중 overlay 유지
+- 완료 시점 alert 수신 후 overlay 제거
+- 새로고침 또는 새 창 진입 시 storage에 남아 있는 진행 건을 다시 복구할지 여부는 구현 단계에서 확인하되, 1차는 같은 브라우저 세션 내 유지에 집중한다.
diff --git a/apps/sn/docs/작업내용/FE-MAP-하수처리시설검색동기화/001-fe-FE-MAP-하수처리시설검색동기화-구현기록.md b/apps/sn/docs/작업내용/FE-MAP-하수처리시설검색동기화/001-fe-FE-MAP-하수처리시설검색동기화-구현기록.md
new file mode 100644
index 000000000..cd4a3094c
--- /dev/null
+++ b/apps/sn/docs/작업내용/FE-MAP-하수처리시설검색동기화/001-fe-FE-MAP-하수처리시설검색동기화-구현기록.md
@@ -0,0 +1,37 @@
+# FE-MAP 하수처리시설 검색 동기화 구현기록
+
+## 1. 작업 목적
+- 지도 레이어 트리의 하수처리시설 500톤 기준 레이어 선택 상태와 상단 시설물 검색 조건을 동기화한다.
+
+## 2. 수정 대상
+- `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- `FE_REPO_ROOT/packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx`
+- `COMMON_DOCS_ROOT/DB작업.sql`
+
+## 3. 구현 내용
+- 하수처리시설 하위 레이어명은 DB `tb_sn_lyr_stng`의 `lyr_nm`을 그대로 사용하고, 프론트 강제 치환은 제거했다.
+- 레이어 선택 상태에 따라 시설물 검색 셀렉트 문구를 `하수처리시설(전체)`, `하수처리시설(500톤 이상)`, `하수처리시설(500톤 미만)`, `하수처리시설(레이어 꺼짐)`으로 표시한다.
+- 하수처리시설 검색 목록 조회 시 선택된 레이어 기준에 맞춰 `fclt_cpct >= 500` 또는 `fclt_cpct < 500` 조건을 함께 적용한다.
+- WFS 목록 조회의 `cql_filter`는 `URLSearchParams`로 인코딩해 500톤 기준 조건이 실제 요청에 반영되도록 보정했다.
+- 시설 선택 시 현재 지도 source만 검색하지 않고, feature id 기준 GeoServer 재조회 후 검색 레이어를 선택하도록 보정했다.
+- 두 레이어가 모두 꺼진 경우 하수처리시설 목록은 선택 불가 placeholder만 표시한다.
+- `tb_sn_lyr_stng`의 `lyr_sn=112/113` 레이어명을 `500톤 이상`, `500톤 미만`으로 정리하는 DML 초안을 `DB작업.sql`에 추가했다.
+
+## 4. 검증
+- TSX 파서 검사 통과
+- `pnpm --filter @common/business_components run build` 통과
+
+## 5. 영향 범위와 리스크
+- 프론트 지도 화면의 레이어명 표시와 상단 시설물 검색 목록에 한정된다.
+- API 계약과 DB 스키마 변경은 없다.
+- DB 기준데이터 레이어명 변경 DML은 실제 대상 DB 반영 후 지도 레이어 트리에서 확인해야 한다.
+- 레이어 메타데이터의 `flterSql/filtrSql` 또는 레이어명이 변경되면 500톤 기준 판별 조건을 함께 확인해야 한다.
+
+## 6. 2026-07-14 시도 단위 처리시설 목록 조회 보완
+- 작업 모드: `quick_vibe`
+- 요구사항: 하수관망도 상단 검색바에서 시군구를 선택하지 않아도 선택한 시도의 하수처리시설 목록을 조회한다.
+- 원인: 시설 목록 조회 조건과 WFS CQL이 시도·시군구 동시 선택을 전제로 해, 시도만 선택하면 목록을 초기화했다.
+- 변경: 시도명은 필수 조건으로 유지하고 시군구명은 선택된 경우에만 CQL에 추가하며, 기존 500톤 이상·미만 필터는 그대로 조합한다.
+- 검증: `pnpm --filter @common/business_components run build` 통과
+- 문서 판단: API·DB·공유 범위·공통 결정 변경이 없어 공통 문서는 갱신하지 않았다.
+- 남은 검증: 실제 하수관망도에서 시도만 선택했을 때 시설 목록과 시설 선택 후 지도 포커스를 수동 확인한다.
diff --git a/apps/sn/docs/작업내용/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-통합구현기록.md b/apps/sn/docs/작업내용/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-통합구현기록.md
new file mode 100644
index 000000000..2babe2395
--- /dev/null
+++ b/apps/sn/docs/작업내용/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-통합구현기록.md
@@ -0,0 +1,501 @@
+# SFR-010-010 지반침하정보 통합 구현 기록
+
+## 1. 문서 목적
+
+- `SFR-010-010 지반침하정보`의 FE 구현 이력, 설계 결정, 남은 리스크를 기능당 1개 문서로 누적 관리한다.
+- 이번 턴은 구현 전 단계이므로 설계 검토 결과와 승인 필요 항목만 먼저 기록한다.
+- 승인 후에는 새 파일을 추가하지 않고 이 문서 내부 헤더로만 구현 라운드를 누적한다.
+
+## 2. 입력 근거
+
+- `COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/001-de-SFR-010-010-지반침하정보-설계.md`
+- `COMMON_DOCS_ROOT/작업계획/SFR-010-010 지반침하정보/지반침하정보-화면구성시나리오_v1_1.md`
+- `FE_APP_DOCS_ROOT/작업계획/SFR-010-010-지반침하정보/001-fe-SFR-010-010-지반침하정보-작업카드.md`
+
+## 3. 공통 계약
+
+- 프론트는 `reuse-service`를 직접 호출하지 않고 `sewerage-service`만 호출한다.
+- 지도 포인트 좌표, 반경 내 관로 거리 계산, 좌표보정상태 판단은 백엔드 응답을 기준으로 처리한다.
+- 목록 행 클릭 후 상세 패널은 목록행 데이터가 아니라 상세 API 응답으로 다시 맞춘다.
+- 원천에 없는 상세 필드는 FE에서 `null -> "-"` 렌더링을 기본안으로 두되 승인 전까지 확정하지 않는다.
+- 목록 팝업은 기존 `노후관로` 팝업 패턴, 우측 상세는 `FeatureClickEventPopup` 패턴 재사용을 우선한다.
+
+## 4. 라운드별 기록
+
+### 4.1 2026-06-02 설계 착수
+
+- 작업지시 폴더의 요구사항명세서, 시나리오, HTML, PNG를 읽고 기능 범위를 재해석했다.
+- 백엔드 현재 작업트리에서 아래 선반영 코드를 확인했다.
+  - `GET /api/v1/sinkholes/geometry`
+  - IL datasource
+  - 주소 기반 지오코딩 서비스
+- 프론트 현재 코드에서는 `지반침하정보` 실제 기능 구현은 없고, HTML 샘플 및 레이어 명칭 흔적만 확인됐다.
+- 이번 기능의 FE 핵심 축을 아래로 정리했다.
+  - 레이어 체크/해제
+  - 목록 팝업
+  - 우측 상세 패널
+  - 반경 적용 UX
+  - 관리자 전용 동기화 버튼 노출 제어
+- 아직 구현하지 않은 항목
+  - 실제 코드 수정
+  - 브라우저 검증
+  - API 연결
+
+### 4.2 2026-06-05 좌표 응답 정합화
+
+- 프론트 목록 팝업에 `좌표보정상태` 컬럼을 추가해 지오코딩 성공/실패를 운영 화면에서 바로 볼 수 있게 했다.
+- 상세 패널에서 좌표가 없어 반경 내 관로를 조회하지 못하는 경우 `geocodeErrorMessage`를 함께 노출하도록 보강했다.
+- 같은 시점의 로컬 백엔드 응답을 확인한 결과, `reuse-service` 지오코딩 응답의 추가 필드를 무시하지 못해 `Unrecognized field "adresTy"` 예외가 나고 있었음을 확인했다.
+- 즉 프론트 좌표 표시 이상은 지도 상태관리 자체보다 백엔드 좌표 응답 실패가 선행 원인이었다.
+
+### 4.3 2026-06-05 구현 흐름 메모
+
+- 지반침하 원천 데이터에는 사고 정보는 있는데 지도에 바로 표시할 좌표가 없는 경우가 있어서, 프론트는 백엔드가 좌표보정상태까지 붙여 내려주는 구조를 전제로 구현했다.
+
+예시데이터
+
+- 사고번호: `20260024`
+- 주소: `인천광역시 서구 백석동 74-11`
+- 발생일자: `20260409`
+- 복구상태: `복구중`
+- `ocrn_txcrd`, `ocrn_tycrd`: 비어 있음
+
+프론트에서 본 처리 흐름
+
+- 목록 API에서 지반침하사고 1건을 받음
+- 백엔드가 원천 좌표 또는 주소 API 결과를 기준으로 `x`, `y`, `coordStatus`를 같이 내려줌
+- 프론트는 `coordStatus`가 성공이면 지도 포인트를 그림
+- 실패면 목록에서 `좌표보정상태 = 실패`로 보여주고 상세에서 실패 사유를 보여줌
+
+### 4.4 2026-06-05 상세 패널 유지보수
+
+- 지반침하 상세를 열었을 때 중심점과 반경 원은 그려지지만 줌이 그대로여서 사용자가 위치를 바로 확인하기 어렵다고 판단했다.
+- 그래서 상세 조회 성공 시점과 반경 재적용 시점 모두 반경 원 extent 기준으로 `fit` 하도록 보강했다.
+- `침하발생 반경내 관로정보` 표는 기존 단순 HTML 테이블에서 공용 `Table` 스타일로 바꿔 발생정보 카드와 더 비슷한 시각 톤을 맞췄다.
+- 관로 ID 행을 클릭하면 `GisApp.Module.layer.showSearchResultsFromGeoJSON`로 `tb_ms_swage_ppl`의 `fid`를 넘겨 지도 강조를 요청하도록 연결해, 반경 내 관로를 상세 패널에서 바로 따라갈 수 있게 했다.
+
+### 4.5 2026-06-05 관로 강조와 상세 복귀 유지보수
+
+- 관로 ID 클릭 시 현재 줌레벨은 유지한 채 해당 관로만 지도에 하이라이트하고, 관로 상세정보 창을 함께 열도록 수정했다.
+- 관로 상세정보 창의 닫기 버튼을 누르면 선택된 관로 하이라이트를 해제하고, 직전에 보던 지반침하 상세 패널이 다시 보이도록 복귀 흐름을 추가했다.
+
+### 4.6 2026-06-05 레이어설정 기준 지반침하 트리 재정리
+
+- 초기에는 프론트에서 `지반침하정보` 루트와 연도 노드를 임의로 만들었지만, 실제 `tb_sn_lyr_stng`에는 `지반침하정보` 루트만 있고 자식 노드가 없어서 도시침수지도와 같은 토글 구조로 보이지 않았다.
+- 그래서 프론트는 실제 루트 row를 부모 토글로 사용하고, DB 자식 노드가 없을 때만 `현재년도`, `전체` 2개를 fallback으로 붙이도록 정리했다.
+- 연도 노드 클릭 시에는 노드명 하드코딩 대신 `filter_sql`을 우선 읽어 목록 조회 조건을 만들고, `filter_sql`이 없을 때만 `sinkholeYear` 값을 fallback으로 사용하도록 수정했다.
+
+### 4.7 2026-06-09 연도/전체 노드 해석 유지보수
+
+- `tb_sn_lyr_stng`에 `2026년`, `전체` 자식 노드를 실제로 넣은 뒤에는 프론트 fallback 노드가 아니라 DB 노드를 주로 타게 됐는데, 기존 `applySinkholeYearFilters`는 `sinkholeYear` 커스텀 필드만 읽고 있어 DB 자식 노드 선택을 해석하지 못하고 있었다.
+- 그 결과 화면에는 `2026년`, `전체`가 보여도 초기 레이어 표출과 팝업 동기화에서는 기본 최근 3개월 조건이 남아 있을 수 있는 드리프트가 생겼다.
+- 이번 유지보수에서 프론트는 `sinkholeYear`가 없는 경우에도 노드 텍스트 `2026년`, `전체`를 각각 `2026`, `ALL` 토큰으로 해석하도록 보강했다.
+- 또한 `page.tsx`의 레이어 설정 초기 로딩에 지반침하 루트/자식 보정 유틸을 다시 연결해, DB 자식 노드가 있을 때와 없을 때 모두 같은 정리 경로를 거치도록 맞췄다.
+
+### 4.8 2026-06-09 발생기간 조회 시작일 2016년 확장
+
+- 지반침하발생현황 팝업은 빈 조회조건으로 열릴 때 최근 3개월을 기본값으로 넣고 있었는데, 운영 확인용 장기 이력 조회에서는 시작일을 2016년까지 바로 내릴 수 있어야 한다는 요청이 생겼다.
+- 프론트 기본 조회조건은 `2016-01-01 ~ 오늘`로 바꾸고, 날짜 입력 `min`도 `2016-01-01`로 고정했다.
+- 이 변경만으로는 서버가 `최대 1년` 검증에서 막히므로, 백엔드 검증 규칙도 같은 기준으로 함께 맞춰야 한다고 정리했다.
+
+### 4.9 2026-06-09 다운로드 전체 결과 기준 재조회 유지보수
+
+- 기존 다운로드 버튼은 현재 테이블에 렌더된 `rows`만 엑셀로 내보내고 있어, 사용자가 2페이지 이후 결과를 조회하지 않아도 “전체 조회 결과 다운로드”를 기대하는 UX와 어긋나고 있었다.
+- 이번 수정으로 다운로드는 현재 조회조건을 그대로 유지한 채 `/api/v1/sinkholes`를 200건 단위로 다시 호출해 전체 결과를 합친 뒤 엑셀을 생성하도록 바꿨다.
+- 엑셀 `NO` 컬럼도 현재 페이지 기준이 아니라 전체 결과 기준 1번부터 연속 번호가 매겨지도록 정리했다.
+
+### 4.10 2026-06-09 다운로드 체감속도 재검토
+
+- 지반침하 다운로드는 기능적으로 전체 결과 기준으로 맞췄지만, 1600건 수준에서도 체감이 길다면 단순 페이지 수보다 백엔드 좌표보정 경로가 병목일 가능성이 높다고 판단했다.
+- 프론트 재조회 배치 크기는 2000으로 올려 1600건 정도는 1회 목록 호출로 내려받게 조정했다.
+- 이와 별개로 동일 주소의 지오코딩 실패도 30분 동안은 캐시되도록 백엔드 정책을 바꿔, 같은 다운로드를 반복할 때 외부 지오코딩을 매번 다시 치지 않게 정리했다.
+
+### 4.11 2026-06-09 좌표 실패 건 상세 fallback 표시
+
+- 좌표변환 실패 건을 목록에서 클릭했을 때 상세 API가 generic 500으로 실패하면, 사용자는 사고 상세 자체를 전혀 열 수 없게 되는 문제가 있었다.
+- 하지만 목록 행에는 사고번호, 발생일자, 주소, 복구상태, 좌표보정상태, 지오코딩 실패 사유가 이미 있으므로, 이 경우에는 목록 데이터를 우선 상세 패널 fallback 값으로 사용해도 UX가 성립한다고 판단했다.
+- 그래서 목록 행 클릭 경로에서는 상세 API 실패 시 row 데이터를 `SinkholeDetail` 형태로 보강해 우측 패널을 열고, 반경 내 관로 조회가 실패하더라도 상세 자체는 계속 보여주도록 방어 로직을 추가했다.
+- 이후 추가 정리로, 목록 row에 좌표가 없고 `coordStatus/geocodeStatus`가 이미 실패 상태인 경우에는 상세 API를 아예 호출하지 않고 곧바로 fallback 상세 패널을 여는 쪽으로 단순화했다.
+
+### 4.12 2026-06-09 연도 노드 지도범례 아이콘 표시
+
+- 지반침하 `2026년`, `전체` 노드는 체크박스만 보이고 지도 범례 느낌이 약해, 하수처리시설처럼 노드 앞에 작은 아이콘을 두는 쪽이 더 직관적이라고 판단했다.
+- `2026년`은 주황 원형, `전체`는 파랑 원형 SVG 아이콘을 `public/images/map/layericon/` 아래에 추가했고, DB 자식 노드와 FE fallback 노드 모두 같은 규칙으로 아이콘을 붙이도록 맞췄다.
+- 공용 트리 렌더러는 기존에 `SN_SINKHOLE*` 전체를 아이콘 숨김 대상으로 보고 있었기 때문에, 지반침하 루트만 예외로 두고 연도 노드는 아이콘이 보이도록 분기 범위를 조정했다.
+- 추가 확인 결과 공용 트리의 `makeLegendSrc()`가 `gobjTy`를 먼저 검사해 `iconNm`만 있는 노드를 바로 탈락시키고 있었고, 이 때문에 `icon_nm`을 넣어도 화면에 변화가 없었다.
+- 그래서 공용 트리 렌더 순서를 `iconNm 우선 -> 없으면 gobjTy 기반 범례 생성`으로 바꿔, DB `icon_nm`과 FE 주입 `iconNm` 모두 실제로 보이게 맞췄다.
+
+### 4.13 2026-06-09 연도 노드 색과 지도 포인트 색상 일치
+
+- 연도 노드 아이콘이 보여도 아이콘 중앙의 흰 점 때문에 지도 포인트와 시각 톤이 달라 보여, SVG를 단색 원형 + 진한 외곽선 형태로 다시 정리했다.
+- 지도 포인트도 같은 색 규칙을 쓰도록 `createSinkholePointStyle`을 연도 기반 variant 구조로 바꿨다.
+- `전체` 선택 시에는 `2026년` 건만 주황, 나머지 연도는 파랑으로 보이고, 선택 상세 포인트와 반경 원도 같은 색 계열을 따르도록 맞췄다.
+
+### 4.14 2026-06-09 포인트/아이콘 시각 농도 완화
+
+- 실제 화면 확인 피드백 기준으로 지반침하 포인트가 너무 진해서 바탕지도를 가리고 있었고, 연도 노드 아이콘도 가운데가 빈 점처럼 보여 지도 포인트와 다르게 느껴졌다.
+- 그래서 연도 아이콘 SVG는 외곽선과 중심 흰 점을 모두 제거한 꽉 찬 단색 점으로 단순화했다.
+- 지도 포인트는 주황/파랑 모두 fill alpha와 stroke alpha를 낮추고 반경 원 투명도도 줄여, 기존보다 바탕지도가 더 잘 보이도록 완화했다.
+
+### 4.15 2026-06-09 포인트 농도 재보정
+
+- 완화 이후 실제 체감이 지나치게 옅어져 포인트 존재감이 약해졌기 때문에, 일반 포인트 fill/stroke alpha와 반지름을 한 단계 다시 올렸다.
+- 목표는 “예전 지반침하정보처럼 자연스럽게 보이되 지도 바탕을 과도하게 가리지 않는 중간 농도”로 두었다.
+
+### 4.17 2026-06-09 포인트 투명도 미세 상향
+
+- 추가 피드백 기준으로는 아직도 포인트가 너무 연하게 느껴졌기 때문에, 일반 포인트 fill/stroke와 반경 원 alpha를 현재 값에서 절반 정도 더 보이는 수준으로 한 번 더 올렸다.
+- 선택 포인트는 이미 충분히 강조되고 있어 선택 색은 유지하고, 일반 점과 반경 원의 가시성만 미세 조정했다.
+
+### 4.18 2026-06-09 목록/다운로드 조회조건 정리
+
+- 추가 요구사항으로 지반침하 목록에 `좌표보정상태` 조회조건을 넣고, 다운로드는 `좌표보정상태` 열 자체를 제외한 채 현재 조회조건 전체 결과를 받아야 한다는 기준이 확정됐다.
+- 프론트는 기본 발생기간을 다시 `현재 기준 최근 1년`으로 되돌렸고, 팝업 조회영역에 `좌표보정상태` select를 추가했다.
+- 다운로드는 현재 조회조건을 유지하되 `includeCoordStatus=false`로 목록 API를 재조회해, 좌표보정상태 컬럼과 좌표해석 비용을 함께 줄이는 방향으로 정리했다.
+
+### 4.19 2026-06-09 팝업 닫힘 시 기본 최근 1년 복귀
+
+- 기존에는 지반침하 팝업에서 마지막으로 조회한 조건이 `appliedSinkholeFilters`에 남아, 팝업을 닫아도 지도 레이어가 그 조건을 계속 유지하고 있었다.
+- 추가 협의 기준으로는 팝업을 닫으면 다시 기본 최근 1년 조건으로 복귀하는 쪽이 더 자연스럽다고 보고, 팝업 close watcher를 붙였다.
+- 이제 팝업이 닫히면 지도 지반침하 레이어 조회조건도 `buildSinkholeDefaultFilters()` 기준 최근 1년으로 즉시 되돌아간다.
+
+### 4.20 2026-06-09 초기 지도 표출 기준을 팝업 조건으로 단일화
+
+- 기존에는 `appliedSinkholeFilters`와 별도로 `2026년`/`전체` 연도 자식 노드 체크 상태가 `applySinkholeYearFilters()`로 다시 날짜조건을 덮어쓰고 있어, 초기 로드 시 최근 1년 기본조건과 충돌했다.
+- 그래서 지도 레이어 조회와 팝업 초기 전달에는 연도 노드 덮어쓰기를 제거하고, 팝업 조회조건 자체를 유일한 필터 기준으로 정리했다.
+- 결과적으로 초기 로드, 팝업 조회 후 지도 반영, 팝업 닫힘 후 기본 최근 1년 복귀가 같은 필터 흐름으로 맞춰졌다.
+
+### 4.22 2026-06-09 팝업 활성 중 필터 우선순위 재정리
+
+- 추가 확인 결과 사용자가 원하는 동작은 “평소에는 트리 연도 체크 상태 기준, 팝업이 열려 조회를 수행한 동안만 팝업 조건 우선, 팝업을 닫으면 다시 트리 기준 복귀”였다.
+- 그래서 지반침하 레이어 조회에 `isSinkholePopupFilterActive` 상태를 추가하고, 팝업 sync 메시지를 받았을 때만 팝업 필터를 우선 사용하도록 조정했다.
+- 팝업이 닫히거나 지반침하 레이어 자체를 끄면 popup-active 상태를 해제하고, 기본 최근 1년 필터를 기준으로 다시 트리 연도 조건이 적용되도록 정리했다.
+
+### 4.23 2026-06-09 목록보기 오픈 즉시 지도 동기화
+
+- 추가 요구사항으로 `목록보기` 버튼을 눌러 팝업이 열리는 순간에도, 팝업이 들고 뜨는 초기 조회조건이 즉시 지도에 반영돼야 한다는 기준을 확인했다.
+- 그래서 `openSinkholePopupWindow()`에서 팝업 오픈 직후 `isSinkholePopupFilterActive=true`, `appliedSinkholeFilters=effectiveFilters`를 바로 반영하고 selection version도 증가시키도록 연결했다.
+- 이로써 팝업 내부 첫 조회 응답을 기다리지 않아도 지도와 팝업의 초기 조건이 먼저 맞춰진다.
+
+### 4.24 2026-06-09 트리 상위조건 + 팝업 하위조건 결합
+
+- 추가 정리 결과 최종 UX는 `2026년`, `전체`를 상위 큰 조건으로 두고, 팝업 조회조건은 그 범위 안에서만 한 번 더 좁히는 구조가 가장 자연스럽다고 판단했다.
+- 그래서 popup-active가 아닐 때는 `buildSinkholeTreeBaseFilters()`에 트리 연도 조건만 적용하고, popup-active일 때만 `팝업 조회조건 ∩ 트리 연도조건`을 계산하도록 로직을 바꿨다.
+- 이로써 `2026년`만 체크 시 다른 연도는 나오지 않고, `전체` 체크 시에는 팝업 조건이 전체 범위 안에서만 적용되며, 팝업 종료 후에는 다시 트리 기준으로 복귀한다.
+
+### 4.25 2026-06-09 팝업 열린 상태에서 레이어 재체크 시 필터 유지
+
+- 추가 확인 결과 팝업이 열린 상태에서 지반침하 레이어를 껐다가 다시 켜면, 레이어 해제 분기에서 popup-active 상태와 `appliedSinkholeFilters`를 같이 초기화하고 있어 팝업 조건이 사라지고 있었다.
+- 이건 팝업 close 시점과 레이어 토글 시점을 혼동한 것이므로, 레이어 해제 시에는 popup-active와 팝업 필터를 건드리지 않고 레이어/상세만 닫도록 수정했다.
+- 이제 팝업이 열린 상태에서 레이어를 다시 켜면 방금 보던 팝업 조건이 그대로 유지된 채 지도에 재적용된다.
+
+### 4.26 2026-06-09 기능 테스트 성공 반영
+
+- 최종 사용자 확인 기준으로 현재 대화에서 다뤘던 지반침하 팝업/지도/다운로드 연동 이슈는 모두 기대 동작으로 수렴했다.
+- 따라서 본 문서는 이번 라운드 기능 구현이 사용자 기능 테스트 기준 성공 상태임을 기준점으로 남긴다.
+
+### 4.16 2026-06-09 연도 노드 아이콘 외곽선 재조정
+
+- 연도 노드 아이콘은 단색 점만 두었을 때 경계가 약해 보여, 사용자가 보여준 예시처럼 `색 원 + 흰 외곽선` 형태가 더 읽기 쉽다고 판단했다.
+- 그래서 `2026년` 주황 아이콘과 `전체` 파랑 아이콘 모두 흰 외곽선을 다시 추가해 트리 안에서 더 또렷하게 보이도록 맞췄다.
+
+### 4.21 2026-06-09 조회옵션/다운로드 마감 정리
+
+- `좌표보정상태` 조회조건은 최종적으로 `전체 / 성공 / 실패`만 남기고 `주소없음` 옵션은 제거했다.
+- 다운로드 엑셀은 `좌표보정상태` 열을 제외한 9개 컬럼만 내리도록 유지했고, 헤더 범위도 `A1:I1`로 맞춰 첫 데이터 행이 헤더색을 먹지 않게 수정했다.
+
+### 4.27 2026-06-10 개발서버 SVG 아이콘 400 유지보수
+
+- 로컬에서는 보였지만 개발서버에서는 `SN_SINKHOLE_SPOT_ORANGE.svg`, `SN_SINKHOLE_SPOT_BLUE.svg` 요청이 각각 `400 Bad Request`로 떨어지는 현상을 확인했다.
+- 경로 생성은 기존 `Layer_Select_BTN.png`와 같은 `/images/map/layericon/` 규칙을 타고 있었고, 개발서버에서만 신규 `svg` 2건만 실패했으므로 이번 이슈는 트리 로직보다 개발서버의 정적 SVG 처리 차이로 판단했다.
+- `layericon` 폴더의 기존 운영 자산이 대부분 `png` 기반인 점도 고려해, 연도 노드 아이콘 자산을 `png`로 추가하고 `sinkholeTypes.ts` 상수도 `.png`를 바라보도록 바꿨다.
+- 이렇게 하면 DB 자식 노드와 FE fallback 노드 모두 기존 정적 아이콘 자산 체계와 같은 형식을 사용하므로, 서버 설정 차이 없이 같은 경로 규칙으로 안정적으로 로드할 수 있다.
+
+### 4.28 2026-06-11 목록 총 건수 헤더 보강
+
+- 지반침하 목록 팝업은 기존에도 `/api/v1/sinkholes` 응답의 `total` 값을 상태로 보관하고 있었지만, `UiTable`의 `headName`을 비워 둔 상태라 노후관로처럼 상단에 “조회 결과 총 n건” 문구가 노출되지 않았다.
+- 이번 유지보수에서는 `SinkholePopupPage.tsx`의 목록 테이블 헤더를 `지반침하 조회 결과 총 {total.toLocaleString()}건`으로 지정하고, `isHideCount={true}`를 함께 적용해 `UiTable` 기본 건수 문구와 중복되지 않도록 정리했다.
+- 결과적으로 노후관로 팝업과 같은 위치/형식으로 총 건수가 표시되며, 별도 API 변경 없이 기존 `total` 응답을 그대로 재사용한다.
+
+### 4.29 2026-06-11 시설물 트리 하단 설정영역 분리
+
+- 기존에는 `지반침하정보`의 반경 설정 패널이 트리 노드 바로 아래 인라인으로 붙어 있었는데, 생활안전지도처럼 “레이어를 사용할 때만 하단 설정영역에 따로 모아 보여주는 구조” 요청이 추가됐다.
+- 이번 유지보수에서는 패널 디자인과 입력/적용 동작은 그대로 두고, `map/page.tsx`에서 인라인 노출 분기를 제거한 뒤 `Gis`의 `layerSettingView` 하단 영역으로 이동시켰다.
+- 따라서 `지반침하정보`를 체크하지 않으면 설정 패널이 보이지 않고, 연도/전체 노드가 활성화된 동안에만 트리 하단 별도 영역에 나타난다.
+- 후속 보정으로 하단 영역 자체에 `선택 레이어 설정` 헤더와 선택된 레이어명 표시를 추가하고, 세로 공간이 부족할 때는 내부 스크롤이 생기도록 정리했다.
+- `노후관로 설정`과 패널 폭이 달라 보이지 않도록 `지반침하정보` 설정 패널 폭도 하단 영역 기준 `w-full`로 통일했다.
+- 추가 보정으로 별도 상단 타이틀 줄은 제거하고, 대신 시설물 레이어 목록 영역 자체를 얇은 직사각형 테두리로 감싸서 위 레이어 영역과 아래 설정영역이 자연스럽게 구분되도록 정리했다.
+- 추가 점검으로 `선택 레이어 설정` 노출 기준을 연도 자식 노드 탐지 대신 실제 `isSinkholeChecked` 상태로 바꿔, 지반침하 레이어 체크 시 하단 설정영역 반영이 누락되지 않도록 보정했다.
+- 공용 트리 접기 버튼이 세로 스크롤바 위를 덮어 보이는 문제를 줄이기 위해, 버튼을 패널 안쪽이 아니라 우측 바깥 경계 쪽으로 이동시켜 핸들처럼 보이도록 조정했다.
+- 후속 조정으로 버튼이 아예 보이지 않는 문제를 해결하기 위해, 접기/펼치기 버튼을 패널 밖 가운데에 붙는 단일 토글 핸들 구조로 재배치했다.
+- 추가 수정으로 토글 버튼이 `overflow-hidden` 패널 박스에 같이 들어가 잘리던 구조를 분리해, 버튼을 패널 박스 바깥 형제 위치로 옮겨 실제 화면에서 보이도록 보정했다.
+- 최종 보정으로 토글 버튼 시각 스타일은 분석도구 패널에서 사용 중인 `36x20` 핸들 디자인과 동일하게 맞추고, 위치는 패널 바깥 중앙을 유지하도록 정리했다.
+- 추가 구조 보정으로 시설물 레이어 직사각형 박스는 화면에 항상 보이는 고정 영역으로 두고, 실제 롤업/스크롤은 그 내부에서만 일어나도록 바꿨다. 토글 핸들도 이제 패널 전체가 아니라 이 직사각형 박스 기준 중앙에 붙는다.
+- 후속 위치 보정으로 토글 핸들이 박스 바깥으로 너무 멀리 빠지지 않도록 `left-full` 배치를 제거하고, 레이어 직사각형 박스 오른쪽 경계에 걸치는 `right` 음수 오프셋 기준으로 다시 맞췄다.
+- 후속 가시성 보정으로 토글 핸들 크기를 키우고 파란 계열 대비와 그림자를 강화해, 배경 지도와 겹쳐도 버튼이 바로 보이도록 조정했다.
+- 추가 구조 보정으로 생활안전지도처럼 `레이어 박스 내부 스크롤`과 `패널 전체 스크롤`을 분리했다. 시설물 레이어 박스는 고정 높이와 고정 테두리를 유지하고, 선택 레이어 설정이 많아질 때는 패널 전체 스크롤로 아래 내용을 보도록 정리했다.
+- `침수위험지도(중점관리지역)`, `도시침수지도(정보제공포털)` 선택 시 `침수심 범례`는 토글 제어가 아니라 선택 레이어 설정 안에서 실제 범례 항목을 그대로 보여주는 정보 카드로 정리했다.
+- 스크롤바 폭은 줄이되 색상은 브라우저 기본색으로 되돌려, 이전보다 얇지만 과한 커스텀 색은 보이지 않도록 맞췄다.
+- 후속 정리로 선택 레이어 설정 안의 침수심 범례 카드는 실제 범례 본문만 남기고, 지도 우측 하단에 별도로 뜨던 기존 범례 박스는 제거했다.
+- 추가 구조 보정으로 토글 핸들을 패널 이동 영역과 완전히 분리된 형제로 빼고, 열림 시에는 레이어 박스 옆에, 닫힘 시에는 화면 왼쪽 가장자리에 남도록 바꿔 다시 열기 버튼이 사라지지 않게 정리했다.
+
+### 4.30 2026-06-24 개발서버 PNG 아이콘 400 재점검
+
+- 개발서버에서 `SN_SINKHOLE_SPOT_ORANGE.png`, `SN_SINKHOLE_SPOT_BLUE.png`만 `400 Bad Request`로 실패하고, 없는 파일은 `404`, 기존 `layericon` PNG는 `200`으로 내려오는 차이를 재확인했다.
+- 코드의 `/images/map/layericon/` 경로 조합은 기존 PNG와 같으므로, 아이콘명을 다른 자산으로 바꾸지 않고 두 PNG의 저장 구조를 비교했다.
+- 문제 PNG는 `sRGB`, `gAMA`, `pHYs` 부가 청크를 포함하고 있었고, 정상 로드되는 단순 RGBA PNG 중 `WTL_RSRV_PS_ORANGE.png`는 `IHDR`, `IDAT`, `IEND`만 가지고 있었다.
+- 이에 `SN_SINKHOLE_SPOT_ORANGE.png`, `SN_SINKHOLE_SPOT_BLUE.png`의 파일명과 픽셀은 유지하고, PNG 컨테이너만 `IHDR + IDAT + IEND` 구조로 재인코딩해 개발서버 정적 파일 처리 차이를 줄였다.
+
+### 4.31 2026-06-25 반경 내 관로정보 경과년도 컬럼 및 요약문구 추가
+
+- 요구사항 변경으로 관로 `용도` 컬럼은 이번 범위에서 제외하고, 지반침하 상세 패널의 `침하발생 반경내 관로정보` 표에 `경과년도` 컬럼만 추가했다.
+- 표는 `NO / 관로 ID / 경과년도 / 거리(m)` 4개 컬럼으로 구성하고, 기존 제목은 유지하고 제목 아래에 요약문구 한 줄을 추가해 `건수`, `평균경과`, `최장경과` 값을 파란색 볼드로 표시한다.
+- 집계값은 `nearbyPipes` 응답의 `elapsedYears` 중 숫자로 해석 가능한 값만 대상으로 계산하며, 계산 대상이 없으면 기존 표시 정책대로 `-`를 보여준다.
+- 개별 행의 `경과년도`는 백엔드 `nearbyPipes` 응답에 추가한 `elapsedYears`를 사용한다.
+
+### 4.32 2026-06-25 반경 조회 흐름 원복 확인
+
+- 기존 반경 내 관로 조회 기능은 정상 동작하던 기능이므로, `map/page.tsx`에 추가했던 좌표/사고번호 재조회 fallback 변경은 제거했다.
+- FE 변경 범위는 `SinkholeDetailPanel.tsx`의 표 컬럼 추가와 `sinkholeTypes.ts`의 `elapsedYears` 타입 추가로 제한한다.
+
+### 4.33 2026-06-26 레이어 연도범위 설정 전환 사전 분석
+
+- 이번 요청은 구현 전 분석 단계로 한정하며, 실제 FE/BE 코드는 수정하지 않았다.
+- 요구사항은 기존 `2026년`, `전체` 자식 레이어를 화면에서 제거하고, `지반침하정보` 루트 레이어만 on/off 하도록 단순화하는 것이다.
+- 현재 하단 `선택 레이어 설정`의 `SinkholeLayerSettingPanel`에는 `지반침하반경(m)`만 있으므로, 다음 구현에서는 같은 패널에 `시작년도`, `종료년도` 입력과 적용 버튼을 추가한다.
+- 기본 연도 범위는 현재 연도 기준 최근 1년으로 해석한다. 현재 연도가 2026년이면 화면 입력값은 `2025 ~ 2026`이고, API 호출값은 `startYmd=20250101`, `endYmd=20261231`로 변환한다.
+- 현재 코드에서 정리해야 할 지점은 아래와 같다.
+  - `sinkholeTypes.ts`: `buildSinkholeYearNodes`, `isSinkholeYearNode`, `applySinkholeYearFilters`, 연도 노드 아이콘 상수의 사용 범위 축소 또는 제거
+  - `page.tsx`: `appendSinkholeControlNode`의 연도 fallback 추가 제거, `applySinkholeYearFilters` 호출 제거, 팝업 close 시 기본 필터 복귀 기준 재정의
+  - `SinkholeLayerSettingPanel.tsx`: 연도 범위 입력 상태와 검증, 적용 callback 추가
+  - `DB작업.sql`: `2026년`, `전체` 자식 레이어 추가/보정 DML 제거 또는 기존 행 삭제 DML로 전환
+- BE는 이미 `startYmd/endYmd` 목록 조회 파라미터와 최소일 검증을 제공하므로, 이번 요구는 현재 분석 기준으로 FE/DB 기준정보 변경만으로 처리 가능하다.
+- 팝업 조회조건과 설정패널 연도 범위의 관계는 다음 구현에서 명확히 고정해야 한다. 우선안은 설정패널 연도 범위를 지도 레이어 기본 조건으로 두고, 팝업은 그 조건을 초기값으로 받아 목록 조회를 시작하는 방식이다.
+
+
+### 4.34 2026-06-26 레이어 연도범위 설정 전환 구현
+
+- `sinkholeTypes.ts`에서 `2026년`/`전체` 합성 노드와 연도 노드 기반 필터 결합 로직을 제거하고, `SinkholeYearRange` 및 시작/종료년도 기반 필터 변환 유틸을 추가했다.
+- `page.tsx`는 지반침하정보 트리 노출을 루트 on/off로 단순화하고, 지도 조회/팝업 동기화는 선택 레이어 설정의 연도 범위에서 만든 `startYmd/endYmd`를 사용하도록 변경했다.
+- `SinkholeLayerSettingPanel.tsx`에 시작년도/종료년도 입력을 추가하고 적용 시 연도 유효성 검증 후 지도 레이어를 다시 조회하도록 연결했다.
+- 기본 연도 범위는 현재년도 기준 최근 1년이다. 2026년 기준 화면 기본값은 `2025 ~ 2026`이며 조회 파라미터는 `20250101 ~ 20261231`로 변환된다.
+- 기존 반경 설정, 상세 패널 반경 내 관로 조회, 목록 팝업 row 선택 흐름은 유지했다.
+
+
+
+### 4.35 2026-06-26 상세 500 fallback 및 설정 패널 UI 보정
+
+- 지도 포인트 선택 시 `loadSinkholeDetail`에 feature/list 응답 기반 fallback 상세정보를 함께 전달하도록 변경했다. 상세 API가 500을 반환해도 목록 응답에 있는 주소, 발생일자, 좌표, 복구상태 등으로 상세 패널을 계속 열 수 있다.
+- 지반침하반경 설정은 선택 지점이 없어도 전역 값으로 저장되며, 선택 지점이 있을 때만 반경 내 관로를 즉시 재조회한다.
+- 선택 지점 좌표가 있는 경우 반경 내 관로 재조회는 `nearbyPipesByPoint`를 우선 사용해 사고번호 기반 주변 관로 API 실패 영향을 줄였다.
+- 선택 레이어 설정 패널의 시작/종료년도 줄은 기존 반경 입력 줄과 같은 버튼 크기와 입력 높이, 간격으로 정렬했다.
+
+
+
+### 4.36 2026-06-26 지반침하 포인트 색상 단일화
+
+- 지반침하 포인트가 발생연도 기준으로 현재년도는 주황색, 그 외 연도는 파란색으로 표시되던 분기 로직을 제거했다.
+- `resolveSinkholePointVariant`는 발생일자를 받아도 항상 `blue`를 반환하도록 변경해, 2026년 데이터와 그 외 데이터가 모두 동일한 파란색 원형 포인트로 표시된다.
+- 선택 지점 포인트와 반경 표시 기본 스타일도 파란색 기준으로 맞췄다.
+
+### 4.37 2026-06-26 선택 레이어 설정 안내문구 및 범례 높이 미세조정
+
+- 지반침하 반경 적용 alert는 적용된 반경 값을 포함해 `지반침하반경은 {값}m로 반영되었습니다.`로 표시한다.
+- 지반침하 시작/종료년도 적용 alert는 적용된 연도 범위를 포함해 `시작년도 {시작년도} ~ 종료년도 {종료년도} 반영되었습니다.`로 표시한다.
+- 노후관로 경과년도 적용 alert는 적용된 경과년 값을 포함해 `노후관로 경과년도 {값}년으로 반영되었습니다.`로 표시한다.
+- 침수심 범례는 내부 디자인은 유지하고 외곽 세로 여백만 줄여 선택 레이어 설정 영역의 높이를 소폭 낮췄다.
+
+### 4.38 2026-06-26 우측 상세 패널 공통 탭 UX 설계
+
+- 사용자 요구사항을 재해석해, 이번 보완은 `SinkholeDetailPanel`에만 탭을 붙이는 작업이 아니라 `/map` 오른쪽 상세 패널 자리에 열리는 모든 상세 컴포넌트를 공통 탭으로 관리하는 UX 개선으로 정리했다.
+- 현재 지반침하 상세에서 관로 ID를 클릭하면 `FeatureClickEventPopup`으로 하수관로 상세가 열리고, `restoreSinkholeDetailOnCloseRef`를 통해 닫기 시 지반침하 상세로 복귀한다. 이 숨은 복귀 흐름이 사용자에게 혼란을 줄 수 있으므로, 열린 상세를 책갈피 탭으로 명시하는 방향을 채택한다.
+- 1개 상세만 열렸을 때는 기존과 동일하게 탭을 숨기고, 2개 이상일 때만 오른쪽 패널 왼쪽 가장자리에 세로 책갈피 탭을 표시한다.
+- 탭 관리 대상은 우선 `FeatureClickEventPopup`과 `SinkholeDetailPanel`로 두고, 편집 세션처럼 저장 전 입력값 손실 위험이 있는 팝업은 구현 단계에서 포함 여부를 별도 판단한다.
+- 다음 구현에서는 `page.tsx`에 `rightPanelTabs`, `activeRightPanelTabId` 상태와 `openRightPanelTab`, `closeRightPanelTab`, `activateRightPanelTab` helper를 추가하는 방향을 우선 검토한다.
+- 기존 `featureData`/`selectedSinkholeDetail` 단일 패널 흐름은 한 번에 제거하지 않고, 탭 활성 payload 기반 렌더러로 감싸 회귀 위험을 줄인다.
+- 같은 상세 대상은 중복 탭을 만들지 않고 기존 탭을 활성화한다. 예: 같은 `tb_ms_swage_ppl.fid` 관로를 다시 클릭하면 기존 하수관로 탭으로 이동한다.
+- 이번 설계는 FE 상태관리와 UX 변경이며, BE API나 DB 계약 변경은 필요하지 않다.
+### 4.39 2026-06-26 우측 상세 패널 공통 탭 UX 구현
+
+- `page.tsx`에 `RightPanelTab`, `RightPanelBookmarkTabs`를 추가해 오른쪽 상세 패널에 열린 상세들을 탭 단위로 관리하도록 구현했다.
+- 탭이 1개일 때는 기존 화면처럼 책갈피를 숨기고, 2개 이상일 때만 오른쪽 패널 왼쪽 가장자리에 세로 책갈피 탭을 표시한다.
+- `featureData`, `selectedSinkholeDetail`, `gisEditDetailChangeId`를 기준으로 탭 id/title/payload를 만들고, 같은 피처나 같은 지반침하 사고번호를 다시 열면 기존 탭을 활성화한다.
+- 기존 `GisEditAwareDetailView`는 `props.featureData`만 보던 구조에서 활성 탭 payload를 우선 사용하는 구조로 변경했다.
+- `FeatureClickEventPopup`, `SinkholeDetailPanel`, `GisEditPipeSessionPopup` 내부 레이아웃은 유지하고, `X` 버튼은 현재 활성 탭 닫기로 연결했다.
+- 지반침하 반경 내 관로 클릭 경로에서 기존 `restoreSinkholeDetailOnCloseRef` 복귀 플래그 의존을 제거하고, 지반침하/하수관로 탭을 병렬로 유지하도록 전환했다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 단일 파일이다.
+- BE API, DTO, DB 변경은 없다.
+
+### 4.40 2026-06-26 우측 상세 패널 탭 식별값 보강
+
+- 책갈피 탭이 여러 개 표시될 때 사용자가 같은 종류의 상세를 구분하기 쉽도록 탭 내부에 보조 식별값을 추가했다.
+- 지반침하 탭은 제목 아래에 `사고번호`를 표시하고, 하수관로 탭은 제목 아래에 `관리번호`를 표시한다.
+- 보조 식별값이 없는 상세 탭은 기존처럼 제목만 표시해 불필요한 빈 줄이 생기지 않도록 했다.
+- 탭 폭과 최소 높이를 소폭 넓혀 긴 숫자가 줄바꿈되더라도 기존 오른쪽 상세 패널을 가리지 않는 범위에서 읽히도록 조정했다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 단일 파일이다.
+- BE API, DTO, DB 변경은 없다.
+### 4.41 2026-06-29 우측 상세 패널 탭 최대 개수 제한
+
+- 책갈피 탭이 과도하게 쌓여 오른쪽 상세 패널 주변을 가리는 문제를 줄이기 위해 우측 상세 패널 탭 최대 개수를 5개로 제한했다.
+- 5개가 열린 상태에서 새 상세를 추가하면 새 탭은 정상적으로 열고, 현재 활성 탭은 유지하며, 나머지 중 가장 오래 사용하지 않은 일반 상세 탭을 우선 제거한다.
+- 지반침하 탭은 관로 탐색의 기준점이 될 수 있으므로 일반 하수관로 탭보다 늦게 제거되도록 했다.
+- GIS 편집 상세 탭은 저장 전 입력값 손실 가능성이 있어 자동 제거 후보의 우선순위를 낮췄다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 단일 파일이다.
+- BE API, DTO, DB 변경은 없다.
+### 4.42 2026-06-29 우측 상세 패널 탭 전환 지도 선택 동기화
+
+- 책갈피 탭을 클릭해 활성 상세를 바꿀 때 오른쪽 패널 내용만 바뀌고 지도상의 관로 강조가 이전 선택에 남아 있던 문제를 보정했다.
+- 우측 상세 탭 전환 시 활성 탭의 feature payload를 기준으로 지도 선택 상태와 지반침하 관로 강조 레이어를 함께 갱신하도록 `syncRightPanelFeatureSelectionOnMap` 경로를 추가했다.
+- 하수관로 탭으로 이동하면 해당 관로 feature를 `SN_SINKHOLE_FOCUSED_PIPE_LAYER`에 다시 그리고 선택 상태로 맞춘다.
+- 지반침하 탭으로 이동하면 관로 강조 레이어를 지우고 지반침하 중심점/반경 표시만 남도록 했다.
+- 반경 내 관로 ID 최초 클릭 경로도 같은 지도 동기화 함수를 사용하도록 정리해, 최초 클릭과 탭 전환의 지도 선택 동작이 같은 규칙을 따른다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 단일 파일이다.
+- BE API, DTO, DB 변경은 없다.
+### 4.43 2026-06-29 지도 직접 선택 시 지반침하 관로 포커스 해제
+
+- 지반침하 상세의 반경 내 관로 ID 클릭으로 표시한 파란 관로 포커스가 남아 있는 상태에서 사용자가 지도상의 다른 관로를 직접 클릭하면, 기존 파란 포커스가 함께 남는 문제가 있었다.
+- 일반 지도 피처 선택 진입점에서 `clearSinkholeFocusedPipeLayer()`를 먼저 호출하도록 보정해, 사용자가 직접 선택한 보라색 선택선만 남도록 했다.
+- 반경 내 관로 ID 클릭과 책갈피 탭 전환은 기존처럼 `syncRightPanelFeatureSelectionOnMap`을 통해 필요한 관로 포커스를 다시 그린다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 단일 파일이다.
+- BE API, DTO, DB 변경은 없다.
+### 4.45 2026-06-29 우측 상세 책갈피 탭 비활성 글자색 조정
+
+- 사용자 확인 기준으로 우측 상세 책갈피 탭의 비활성 글자색이 파란색이라 현재 지도/패널 톤에서 과하게 튄다는 피드백이 들어왔다.
+- `page.tsx`의 `RightPanelBookmarkTabs` 비활성 상태 클래스를 `text-[#1d4ed8]`에서 `text-slate-900`으로 바꿔, 활성 탭만 청록 헤더 강조를 받고 비활성 탭은 검은색 계열 텍스트로 보이도록 정리했다.
+- 테두리와 hover 배경은 기존 값을 유지해, 탭 상태 구분은 남기되 색 대비만 낮추는 방향으로 조정했다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 1개이며, BE API/DTO/DB 변경은 없다.
+
+### 4.46 2026-06-29 지반침하 연도설정 선택형 UI 및 한 줄 레이아웃 보정
+
+- 추가 요구사항으로 지반침하 하단 설정영역의 시작/종료년도 직접 입력 대신 프로젝트 기존 선택형 UI 패턴으로 바꿔 달라는 요청이 들어왔다.
+- `SinkholeLayerSettingPanel.tsx`에서 연도 범위를 숫자 `input` 2개 대신 `SelectBox` 2개로 바꾸고, 선택 가능한 연도는 `SINKHOLE_MIN_SEARCH_YEAR`부터 현재 연도까지로 제한했다.
+- 시작 연도는 현재 종료 연도 이하만, 종료 연도는 현재 시작 연도 이상만 보이도록 옵션을 좁혀 기존 검증 규칙을 입력 단계에서도 미리 반영했다.
+- 이어서 compact 패널이 너무 좁아 보인다는 피드백에 맞춰 연도 셀렉트 폭을 넓히고, `종료년도` 라벨을 제거해 `년도설정 [시작연도] ~ [종료연도] [적용]` 한 줄 구성을 유지하도록 다시 다듬었다.
+- 최종 라벨은 사용자 요청대로 `시작년도` 대신 `년도설정`으로 바꿨고, 카드 내부 좌우 여백과 행 간격도 소폭 늘려 답답한 인상을 줄였다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/SinkholeLayerSettingPanel.tsx` 1개이며, BE API/DTO/DB 변경은 없다.
+- 이번 라운드는 브라우저 실화면 수동 검증까지는 진행하지 못했고, 코드 diff 기준으로만 반영 상태를 확인했다.
+
+## 5. 승인 전 보류 사항
+
+- 목록 팝업을 `window popup`으로 열지 `/map` 내부 중앙 모달로 열지 확정 필요
+- 최근 동기화 일시를 관리자에게 어디에 보여줄지 확정 필요
+- 원천 부재 필드를 FE에서 `-`로 고정해도 되는지 승인 필요
+- 좌표 캐시를 메모리만 쓸지 DB 영속화까지 포함할지 BE 승인 필요
+
+## 6. 남은 리스크
+
+- `map/page.tsx`는 기존 기능이 많아 무리하게 누적하면 회귀 위험이 크다.
+- 원천 데이터에 없는 컬럼을 화면은 요구하고 있어, API/FE 표시 정책이 늦게 확정되면 구현이 되돌아갈 수 있다.
+- 좌표 없는 사고건과 좌표 실패 사고건은 UI와 QA 시나리오가 달라 예외 흐름이 많다.
+
+### 4.44 2026-06-29 지반침하 상세 전용 OGC011 공통코드 매핑으로 범위 제한
+
+- 지반침하 상세의 반경 내 관로 `용도`만 `OGC011` 공통코드로 한글화하도록 범위를 다시 좁혔다.
+- 초기 보완에서는 `searchCmmnCd` 공통 헬퍼를 확장했지만, 다른 기능으로 영향 범위가 번질 수 있어 공통 헬퍼 변경은 되돌렸다.
+- 대신 `SinkholeDetailPanel.tsx` 내부에서만 `getCmsData('/api/v1/code/cache/OGC011/Y')`를 우선 조회하고, 실패 시 `OGC011` 전체 조회로 fallback 하도록 로컬 캐시 로더를 추가했다.
+- 이로써 현재 `sn`에서 공통코드 확장 영향은 지반침하 상세 패널 내부에만 한정되고, 기존 다른 화면의 공통코드/하드코딩 코드표 흐름은 건드리지 않는다.
+- 표 컬럼 폭도 함께 조정해 `관로 ID`는 소폭 줄이고 `용도`는 한 줄로 보이도록 미세 보정했다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/components/sinkhole/SinkholeDetailPanel.tsx`, `FE_APP_ROOT/app/components/lib/common/apiHelpers.ts` 2개이며, 공통 헬퍼는 원래 계약으로 복구했다.
+- BE API, DTO, DB 변경은 없다.
+
+### 4.47 2026-07-02 사고번호 기반 좌표 원천화 설계 분석
+
+- 사용자 요구사항은 현재 주소 기반 실시간 좌표보정 대신, 사고번호 기반 외부 조회 결과를 원천 `ocrn_txcrd`, `ocrn_tycrd`에 영속화하는 구조로 바꾸자는 것이다.
+- 현재 FE 구현은 목록/상세/반경 조회 모두 백엔드가 내려주는 `coordStatus`, `latitude`, `longitude`, `x`, `y` 계약만 소비하므로, 좌표 원천 전략이 바뀌어도 같은 DTO를 유지하면 FE 코드는 1차 변경이 필요하지 않다.
+- 이번 분석에서 확인한 현행 FE 포인트는 아래와 같다.
+  - 목록은 별도 윈도우 팝업 `SinkholePopupPage.tsx`에서 `/api/v1/sinkholes`를 호출한다.
+  - 지도 레이어도 `page.tsx`에서 같은 목록 API 응답을 GeoJSON feature로 재조립해 사용한다.
+  - 상세/반경 조회는 상세 API와 `nearbyPipesByPoint` 우선 fallback 구조를 사용한다.
+- 따라서 이번 설계 변경의 FE 리스크는 “새 좌표 취득 방식” 그 자체보다 “BE가 응답 필드와 상태값을 바꾸는지 여부”에 집중된다.
+- FE 후속 구현은 다음 조건이 생길 때만 고려한다.
+  - `coordStatus` 값 정의 변경
+  - 관리자 동기화 결과 문구/요약 구조 변경
+  - 좌표 실패 안내문을 JIS 사고번호 조회 기준으로 재정비해야 하는 경우
+
+### 4.48 2026-07-02 사고번호 기반 좌표 원천화 구현 라운드 FE 영향 재확인
+
+- 이번 구현 라운드에서는 FE 코드 수정 없이 대응했다.
+- 백엔드가 기존 계약인 `coordStatus`, `latitude`, `longitude`, `x`, `y`를 유지하도록 구현했기 때문에, 현행 `SinkholePopupPage`, `SinkholeDetailPanel`, `page.tsx`는 그대로 동작해야 한다는 판단을 유지한다.
+- 따라서 이번 라운드의 FE 검증 포인트는 “화면 코드 변경”이 아니라 “기존 화면이 새 백엔드 응답 경로에서도 회귀 없이 동작하는지”에 집중한다.
+
+### 4.49 2026-07-02 잔여 실패 건에 대한 FE 관점 이슈 메모
+
+- 사용자 확인 기준 JIS 성공 케이스 `20260040`은 상세 페이지 HTML에 `poly_lonlat=POINT(...)`가 존재하는데도, 홈페이지 `위치 확인` 버튼 클릭 시 `mapNew.js:524 ... clone` 오류가 발생할 수 있었다.
+- 이 오류는 JIS 프론트 지도 이동 스크립트 문제로 보이며, 우리 FE가 받는 백엔드 DTO 실패와는 직접 원인이 다르다.
+- 실제 잔여 실패 159건은 대부분 JIS 구 사고번호 응답 자체가 `fail`이거나 주소 fallback도 실패하는 케이스로 확인됐기 때문에, 현재 FE 수정 포인트는 없다.
+- FE 후속 액션은 백엔드가 `JIS 우선 + 주소 fallback`을 최종 운영안으로 채택할 때도 기존 `coordStatus`, `geocodeErrorMessage` 표시만 회귀 없이 유지되는지 확인하는 정도다.
+### 4.50 2026-07-13 우측 상세 탭 유형·단일 관로·부모 복귀 구현
+
+- `RightPanelTab`에 렌더링 종류와 별개인 `category`, 사용자 표시용 `displayLabel`, 관로의 `parentTabId`를 추가했다.
+- 지반침하, 관로, 처리시설, 처리구역, GIS 편집, 기타 피처별 정적 Tailwind class map을 두어 활성/비활성 색상을 구분했다.
+- 기존 제목/보조값 2줄 구조를 괄호형 단일 표시명으로 바꾸고, 처리시설명·처리구역명 후보도 OpenLayers Feature/plain object 양쪽에서 읽도록 통합했다.
+- 지반침하 탭 ID는 사고번호별로 유지하고, 관로 탭 ID는 `feature:tb_ms_swage_ppl:singleton`으로 고정해 마지막 선택 관로로 교체 갱신한다.
+- 반경 내 관로 클릭 시 현재 활성 지반침하 탭을 부모로 기록하고, 부모 탭이 남아 있을 때만 `관로(관리번호)` 표시명 바로 옆에 20px 소형 `←` 버튼을 표시한다.
+- 화살표 클릭은 관로 탭을 유지한 채 부모 지반침하 탭을 활성화하고 지도 반경/선택 동기화 경로를 재사용한다.
+- 관로 탭 닫기는 부모 지반침하를 MRU보다 우선하고, 부모 탭 닫기는 남은 관로의 부모 링크를 제거한다.
+- 최대 5개 자동 정리 시 활성 관로 탭의 유효한 부모는 제거 후보에서 보호한다.
+- 지도에서 관로를 직접 선택하면 부모 ref를 비워 이전 지반침하 복귀 링크가 재사용되지 않게 했다.
+- 읽히지 않던 `restoreSinkholeDetailOnCloseRef`는 제거했다.
+- 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 1개이며 BE API·DTO·Repository·DB 변경은 없다.
+
+### 4.51 2026-07-14 부모 복귀 화살표 및 처리구역 API 후속 유지보수
+
+- 관로 탭 내부의 부모 복귀 화살표를 20px에서 24px로 키워 현재 배치 안에서 시인성과 클릭 영역을 소폭 확대했다.
+- 화살표 표시 조건에 `isActive`를 추가했다. 따라서 부모가 연결된 관로 탭을 보고 있을 때만 화살표가 보이고, 화살표를 눌러 부모 지반침하 탭이 활성화되면 관로 탭의 화살표는 숨겨진다.
+- 최대 5개 탭의 overflow 로직을 재확인했다. 현재 정책은 FIFO가 아니라 신규/활성/관로 부모 탭을 보호하고 `lastActiveAt`이 오래된 일반 feature 탭을 우선 제거하는 보호형 LRU다.
+- 하수처리구역 클릭 500 오류의 FE 호출 경로는 변경하지 않았다. `swtrmtPrcsZoneAnalysisApi.ts`의 기존 API 계약은 정상이며, 삭제된 백엔드 Controller/Service를 복구해 계약을 다시 연결했다.
+- 프론트 변경 파일은 `FE_APP_ROOT/app/(map-layout)/map/page.tsx` 1개다.
+- DB 변경은 없다.
+
+### 4.52 2026-07-14 현재 완료 범위 및 후속 탭 정책 메모
+
+- 현재 완료 범위는 유형별 색상·괄호형 탭 이름, 지반침하 다중 탭, 관로 singleton, 부모 지반침하 복귀, 활성 관로에서만 보이는 24px 화살표, 최대 5개 보호형 LRU 정리다.
+- 처리시설과 처리구역은 현재 피처별 다중 탭으로 동작한다.
+- 후속 운영 결과에 따라 처리시설 1개와 처리구역 1개를 각각 singleton으로 바꾸는 안을 검토한다.
+- 정책 확정 전에는 현행 동작을 유지하며 이번 라운드에서 추가 코드 변경은 하지 않았다.
+
+### 4.53 2026-07-14 반경 라벨·트리 심볼·지도 선택 해제·목록 사고번호 유지보수 설계
+
+- 현행 구현을 기준으로 유지보수 변경 지점을 확정했다. 이번 단계에서는 FE 코드를 수정하지 않았다.
+- `map/page.tsx`에는 반경 원 상단 라벨 피처와 빈 지도 클릭 시 현재 지반침하/종속 관로 강조 정리 로직을 추가할 예정이다.
+- `SinkholePopupPage.tsx` 목록은 사고번호를 첫 데이터 열로 조정하고 화면 NO 열은 표시하지 않을 예정이다.
+- 공통 `Gis.js`, `GisTree.js`에는 기본값이 현행 숨김인 선택 prop을 추가하고 `sn` 지반침하 루트에서만 기존 파란 심볼을 노출할 예정이다.
+- 기존 `acdntNo`, `radiusMeters` 계약으로 구현 가능하므로 BE·DB 변경은 없다.
+- 실제 코드, 검사 및 브라우저 결과는 다음 구현 단계에서 같은 통합 기록의 후속 절로 추가한다.
+
+### 4.54 2026-07-14 지도 반경 라벨·트리 심볼·빈 클릭 해제·목록 사고번호 구현
+
+- `map/page.tsx`의 지반침하 선택 source에 반경 원 상단 Point 라벨을 추가했다. 문구는 `반경 {radiusMeters}m`이며 원·중심점과 함께 정리된다.
+- 지반침하 루트 `iconNm`은 기존 값 우선, 값이 없으면 `SN_SINKHOLE_SPOT_BLUE.png`를 사용하도록 변경했다.
+- 공통 `GisTree`의 `sinkholeLegendIconVisible` 기본값을 false로 두고 `sn` 지도에서만 true를 전달해 타 앱 노출을 격리했다.
+- 공통 선택 모듈은 선택 결과가 없을 때 빈 배열을 전달하고, `GisSelect`가 선택적 `onMapBlankClick` 콜백을 호출하도록 확장했다.
+- `sn` 지도는 GIS 편집 중 빈 클릭을 무시하고 현재 지반침하를 기존 닫기 흐름으로 정리한다. 비활성 지반침하 탭은 활성 탭을 바꾸지 않고 제거하며 종속 관로 부모 링크를 비운다.
+- `SinkholePopupPage.tsx` 그리드 첫 데이터 열에 `사고번호(acdntNo)`를 배치하고 화면 `NO` 열은 제거했다. 내부 `rowNo`와 다운로드 순번은 유지했다.
+- 반경 내 관로 GeoServer 조회의 기존 storage nullable 타입 경고는 저장소 이름 확인 후 요청하도록 방어 처리했다.
+- BE API·DTO·Repository·DB 변경은 없다.
+- 브라우저·API·빌드 검증은 사용자 요청에 따라 수행하지 않았으며 사용자 검증 대기 상태다.
+
+### 4.55 2026-07-14 목록 NO 열 제거 후속 반영
+
+- 사용자 후속 결정에 따라 `HEADLIST`에서 `rowNo/NO` 열을 제거했다.
+- 사고번호를 첫 화면 열로 유지하고 열 너비를 17로 조정했다.
+- `SinkholeTableRow.rowNo`, `toTableRows`, `buildDownloadRows`는 다운로드 순번 호환을 위해 유지했다.
+- BE API·DTO·Repository·DB 변경은 없다.
+- 브라우저·API·빌드 검증은 사용자 요청에 따라 수행하지 않았으며 사용자 수동 검증 대기 상태다.
+
+### 4.56 2026-07-14 사용자 통합 검증 완료
+
+- 사용자가 통합 화면에서 이번 유지보수 요구사항 전체를 직접 검증했고 모두 정상 동작함을 확인했다.
+- 반경 라벨은 실제 반경 값과 일치하고, 지반침하 레이어 트리 심볼은 의도한 위치에 정상 표시됐다.
+- 지도 지반침하 선택 후 빈 지도 영역 클릭 시 선택 상세, 반경 원·라벨, 종속 강조가 정상 해제되고 다른 탭과 기본 레이어는 유지됐다.
+- 지반침하발생현황 목록은 사고번호가 첫 열로 표시되고 화면 `NO` 열은 제거된 상태로 정상 동작했다.
+- BE API·DTO·Repository·DB 계약 변경 없이 최종 상태를 `완료`로 전환했다.
+
+### 4.57 2026-07-15 일반 관로 다중·지반침하 연계 관로 단일 탭 분리
+
+- 원인은 `buildRightPanelTab`이 모든 하수관로에 전역 singleton ID를 부여해 일반 지도 클릭도 기존 관로 탭을 덮어쓰던 것이었다.
+- 일반 지도 선택은 `onFeatureSelect`에서 부모 참조를 비우는 기존 흐름을 유지하고, 관로 식별값 기반 탭 ID를 사용하도록 변경했다.
+- 지반침하 상세의 반경 내 관로 선택은 `parentTabId`가 있을 때만 `sinkhole-singleton` ID를 사용해 관련 관로 탭 하나를 교체한다.
+- 부모가 있는 지반침하 연계 관로는 비활성 상태에서도 `←`를 항상 표시해 일반 관로와 구분되도록 후속 보완했다.
+- 탭 최대 5개 초과 시 가장 먼저 열린 탭을 제거하는 FIFO를 유지하고, 제거 대상이 부모 지반침하이면 그 부모를 참조하는 연계 관로 탭도 함께 제거하도록 공통 그룹 제거 함수를 적용했다. 연계 관로 단독 제거는 부모에 영향을 주지 않는다.
+- BE API·DTO·Repository·DB 변경은 없다.
diff --git a/apps/sn/docs/작업내용/SFR-011-002-관로분석/001-fe-SFR-011-002-관로분석-통합구현기록.md b/apps/sn/docs/작업내용/SFR-011-002-관로분석/001-fe-SFR-011-002-관로분석-통합구현기록.md
new file mode 100644
index 000000000..69784f54b
--- /dev/null
+++ b/apps/sn/docs/작업내용/SFR-011-002-관로분석/001-fe-SFR-011-002-관로분석-통합구현기록.md
@@ -0,0 +1,37 @@
+# SFR-011-002 관로분석 FE 통합구현기록
+
+## 1. 문서 목적
+- 관로분석 팝업 유지보수 과정에서 프론트에 반영한 오류 처리 변경을 기록한다.
+
+## 2. 유지보수 배경
+- `경과년도별 조회`는 정상 동작하지만 `관재질별 조회`, `경과년도 & 관재질별 조회`는 집계 조회 실패 시점에 프론트가 `Failed to fetch data`만 표시해 실제 원인 파악이 어려웠다.
+
+## 3. 수정 파일
+- `FE_APP_ROOT/app/components/lib/api/index.ts`
+- `FE_APP_ROOT/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx`
+
+## 4. 구현 내용
+- `getData`
+  - 비정상 응답 본문을 읽어 JSON 또는 text로 보존한다.
+  - 응답 body의 `message` 또는 중첩 error message가 있으면 그 값을 `Error.message`로 사용한다.
+  - fallback에는 HTTP status와 statusText를 포함한다.
+- `PipeAnalysisPopupPage`
+  - 집계 조회/다운로드 실패 시 실제 `Error.message`를 우선 alert에 노출한다.
+  - 엑셀 다운로드 data 캐스팅을 `unknown as JSON[]`로 조정했다.
+  - 집계 헤더의 `총 N건` 문구를 제거했다.
+  - 집계 결과는 10개 단위 클라이언트 페이징으로 잘라 렌더링한다.
+  - `경과년도&재질`은 rowSpan 구조를 유지하기 위해 처리구역 10묶음 기준으로 페이지를 나눈다.
+  - 모든 분석구분 헤더에 현재 집계 건수를 `N건` 형식으로 노출한다.
+- `PipeAnalysisDetailPopupPage`
+  - 상세 조회/다운로드 실패 시 실제 `Error.message`를 우선 alert에 노출한다.
+
+## 5. 영향 범위
+- 관로분석 팝업 집계 조회
+- 관로분석 상세 팝업 조회
+- 동일 `getData` 유틸을 사용하는 다른 화면의 오류 메시지 표현
+- 재질별/경과년도&재질별 요약 렌더링 성능
+
+## 6. 리스크 및 메모
+- `getData` 공통 유틸 수정이라 다른 화면에서도 이제 서버 메시지가 더 직접적으로 노출된다.
+- 서버 메시지 문구가 사용자 친화적이지 않은 API는 추후 별도 화면 단에서 다듬을 수 있다.
diff --git a/apps/sn/docs/작업내용/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-통합구현기록.md b/apps/sn/docs/작업내용/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-통합구현기록.md
new file mode 100644
index 000000000..a485657bb
--- /dev/null
+++ b/apps/sn/docs/작업내용/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-통합구현기록.md
@@ -0,0 +1,176 @@
+# SFR-011-007 통수위험분석 통합 구현 기록
+
+## 1. 문서 목적
+
+- `SFR-011-007 통수위험분석`의 FE 구현 이력과 남은 리스크를 기능당 1개 문서로 누적 관리한다.
+- 현재 문서는 설계 초안부터 FE-only 프로토타입 구현까지의 누적 이력을 기록하며, 이후 실제 BE 연동과 통합 검증 결과를 계속 추가한다.
+
+## 2. 입력 근거
+
+- `COMMON_DOCS_ROOT/작업계획/SFR-011-007-통수위험분석/001-de-SFR-011-007-통수위험분석-설계.md`
+- `COMMON_DOCS_ROOT/작업내용/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-통합공유기록.md`
+- `FE_APP_DOCS_ROOT/작업계획/SFR-011-007-통수위험분석/001-fe-SFR-011-007-통수위험분석-작업카드.md`
+
+## 3. 공통 계약
+
+- 작성자 승인 전에는 코드 수정 없이 문서 설계까지만 진행한다.
+- FE 1차 구현은 실제 백엔드 연결 없이도 검토 가능한 범위를 우선한다.
+- 결과 목록의 관로 정보는 1~3건 반복형 렌더링으로 구현하고, 고정 3세트 컬럼 가정은 두지 않는다.
+- 설정 편집은 중점관리지역 1건 기준 staged 유출관로 1~3건을 FE 로컬 상태에 유지한다.
+- 저장 실패 시 staged 목록과 지도 선택 상태는 유지한다.
+
+## 4. 구현 라운드 요약
+
+### 4.1 2026-05-18 설계/초안 라운드
+
+- 수행 내용
+  - 작업지시 DOCX, HTML, PNG, 시나리오를 기준으로 기능 범위를 재정리했다.
+  - `SFR-012-003` 문서 구조를 기준으로 공통 설계서, 공통 공유기록, FE 작업카드, FE 구현기록, QA 계획/결과 문서 세트를 정의했다.
+  - 결과 조회, 지도보기, 설정 현황, 설정 편집/저장 흐름을 FE 단독 범위와 BE 필요 범위로 분리했다.
+  - 예상 수정 파일과 승인 필요 항목을 정리했다.
+- 아직 하지 않은 내용
+  - FE 코드 수정
+  - popup 등록
+  - mock 데이터 연결
+  - 지도 overlay 구현
+  - staged 설정 상태 구현
+
+### 4.2 2026-05-18 FE-only 1차 구현
+
+- 반영 파일
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/waterRisk/waterRiskTypes.ts`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx`
+  - `FE_APP_ROOT/src/features/windowPopup/model/types.ts`
+  - `FE_APP_ROOT/src/features/windowPopup/registry.tsx`
+  - `FE_APP_ROOT/src/features/windowPopup/ui/WaterRiskPopupContent.tsx`
+- 구현 내용
+  - `통수위험` popup registry 연결
+  - 결과 조회/설정 현황 2탭 popup UI
+  - 관로 1~3건 동적 컬럼 렌더링
+  - 결과 행 선택 시 main map 강조와 sample rain grid overlay 동기화
+  - 설정 편집 모드 시작/종료, 지도 하수관로 클릭 기반 staged 목록 추가
+  - staged 목록 순번 조정/삭제/초기화
+  - 결과 다운로드 preview, 설정 다운로드 preview, 설정 저장 payload preview
+- 아직 mock 기준인 항목
+  - 실제 통수위험 결과 API
+  - 실제 중점관리지역 geometry/예측강우 grid 연계
+  - 실제 설정 저장/재조회
+  - 실제 파일 다운로드
+
+### 4.3 2026-05-19 FE 프로토타입 마감 정리
+
+- 반영 파일
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/waterRisk/waterRiskTypes.ts`
+- 구현 내용
+  - 결과 조회/설정 현황 더미데이터를 확대해 페이지네이션이 실제로 보이도록 정리했다.
+  - 결과 조회와 설정 현황 toolbar 버튼 정렬, 본문 배경, 헤더 컬러를 기존 지도형 기능과 유사한 톤으로 맞췄다.
+  - 지도 상세정보 카드를 compact 표 구조로 재구성하고, 유출유량이 통수량을 초과하는 경우 강조 표시가 가능하게 정리했다.
+  - 지도 상세정보 카드 위치는 여러 차례 사용자 피드백을 반영해 프로토타입 기준 위치 조정이 가능한 상태까지 정리했다.
+- 아직 mock 또는 후속 검증이 필요한 항목
+  - 상세정보 카드의 최종 고정/앵커 규칙 확정
+  - 실제 API 응답 구조에 맞춘 결과/상세/설정 데이터 치환
+  - 실제 다운로드 및 저장 성공/실패 후처리
+
+### 4.4 2026-05-19 FE 추가 보정
+
+- 반영 파일
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- 구현 내용
+  - 상세정보 카드 위치 규칙은 사용자 피드백 기준으로 반복 보정되었고, 현재는 직접 추가 조정이 가능한 상태로 유지한다.
+  - 상세정보 카드 표 구조, 헤더/본문 spacing, 유출유량 초과 강조, 페이지네이션 노출 상태를 사용자 피드백에 맞춰 세부 조정했다.
+- 확인 메모
+  - UI 세부 보정 과정에서 타입 오류 1건(`buildWaterRiskInfoAnchor`)이 발생했으나 바로 수정했다.
+
+### 4.5 2026-05-19 상세정보 카드 위치 규칙 보정
+
+- 반영 파일
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- 구현 내용
+  - 상세정보 카드는 선택된 중점관리지역의 오른쪽에 붙어 보이는 프로토타입 기준으로 재조정했다.
+  - 카드 anchor 좌표는 선택 대상 중점관리지역 geometry 기준으로 유지하고, 지도 렌더링 중에는 같은 anchor 기준으로 픽셀 위치를 다시 계산하도록 보정했다.
+  - 화면 고정형 팝업이 아니라 지도 대상 옆에서 같이 움직이는 정보 카드 방향으로 정리했다.
+- 남은 메모
+  - 실제 운영에서 요구되는 카드 고정 규칙과 사용성은 브라우저 수동 검증에서 한 번 더 확정할 필요가 있다.
+
+### 4.6 2026-06-15 통수위험 팝업 디자인 톤 재정렬
+
+- 반영 파일
+  - `FE_APP_ROOT/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx`
+- 배경
+  - 사용자 피드백 기준으로 현재 `통수위험분석` 팝업은 `관로분석`, `노후관로` 계열과 비교해 별도 그라데이션/카드/버튼 톤이 강해 혼자 튀는 상태로 보였다.
+  - 이번 라운드에서는 기능 흐름은 유지하고, 시각 언어만 기존 지도형 팝업 계열과 같은 방향으로 다시 맞추는 것을 목표로 했다.
+- 구현 내용
+  - 상단 헤더를 `bg-primary` + 흰색 제목 구조로 바꿔 `관로분석`, `노후관로` 팝업과 같은 첫인상을 맞췄다.
+  - 본문 배경을 흰색으로 단순화하고, 조회조건 영역을 `slate-50` 기반 필터 바 형태로 바꿨다.
+  - 결과/설정 화면 모두에 `card-header` 스타일의 제목 줄을 추가해 기존 팝업의 표 제목 리듬과 맞췄다.
+  - 버튼 높이, 입력 높이, 테이블 외곽선, 편집 영역 상단 바를 기존 팝업 계열과 가까운 톤으로 조정했다.
+- 남은 메모
+  - 현재는 `노후관로`/`관로분석` 계열에 시각 톤을 맞춘 1차 정리이며, 실제 사용자 체감 기준에서 간격이나 글자 크기 보정이 더 필요하면 후속 유지보수로 미세조정할 수 있다.
+
+## 5. 기능별 현재 상태
+
+### 5.1 결과 조회
+
+- 설계 완료
+- FE-only 프로토타입 구현 완료
+- 핵심 구현 메모
+  - 날짜/시간/지역/위험상태 필터
+  - 결과 목록
+  - 관로 1~3건 동적 컬럼
+  - 페이지네이션 및 mock 행 렌더링
+
+### 5.2 지도보기
+
+- 설계 완료
+- FE-only 프로토타입 구현 완료
+- 핵심 구현 메모
+  - 결과 행 선택 기반 지도 이동
+  - 위험/정상 polygon 스타일
+  - 예측강우 sample grid overlay
+  - 상세정보 카드
+
+### 5.3 설정 현황
+
+- 설계 완료
+- FE-only 프로토타입 구현 완료
+- 핵심 구현 메모
+  - 결과 popup에서 같은 흐름으로 전환
+  - 설정 목록 조회
+  - 설정 목록 다운로드 조건 유지
+  - 페이지네이션 및 mock 설정 행 렌더링
+
+### 5.4 설정 편집/저장
+
+- 설계 완료
+- FE-only 프로토타입 구현 완료
+- 핵심 구현 메모
+  - 지도 유출관로 선택
+  - staged 목록 1~3건
+  - 순번 조정
+  - 저장 payload preview
+
+## 6. 예상 구현 순서
+
+1. `통수위험` 아이콘과 popup 진입점 연결
+2. 결과 조회/설정 현황 화면 구조 구현
+3. mock 결과 데이터와 동적 관로 컬럼 렌더링
+4. 결과 행 선택 기반 지도 강조와 sample grid overlay
+5. staged 유출관로 편집 상태와 저장 payload preview
+6. BE 계약 확정 후 실제 API 연결
+
+## 7. 남은 리스크
+
+- popup 1개 탭 구조와 popup 2개 분리 구조 중 하나를 먼저 확정해야 구현 방향이 흔들리지 않는다.
+- 격자 overlay는 mock 단계와 실제 데이터 단계의 렌더 방식 차이가 클 수 있다.
+- 설정 편집 모드에서 기존 지도 클릭 기능과 충돌 가능성이 있다.
+- 상세정보 카드 위치 규칙은 FE 프로토타입 단계에서 반복 조정된 항목이라 운영 규칙 확정 전 재검토가 필요하다.
+- 지도 drag/zoom 중 상세정보 카드의 체감 동작은 실제 사용자 손 기준으로 재확인이 필요하다.
+
+## 8. 다음 라운드 착수 조건
+
+- 실제 API 응답 구조 확정
+- BE 저장/다운로드 계약 확정
+- 인증 가능한 브라우저 환경에서 수동 검증 가능 상태 확보
diff --git a/apps/sn/docs/작업내용/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-통합구현기록.md b/apps/sn/docs/작업내용/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-통합구현기록.md
new file mode 100644
index 000000000..db4e62129
--- /dev/null
+++ b/apps/sn/docs/작업내용/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-통합구현기록.md
@@ -0,0 +1,73 @@
+# SFR-011-009 침수발생이력 통합 구현 기록
+
+## 1. 문서 목적
+
+- `SFR-011-009 침수발생이력`의 FE 구현 이력과 남은 리스크를 기능당 1개 문서로 누적 관리한다.
+- 현재 문서는 docs-first 재정렬 이후의 1차 FE draft 구현 상태를 기록한다.
+
+## 2. 입력 근거
+
+- `COMMON_DOCS_ROOT/작업계획/SFR-011-009-침수발생이력/001-de-SFR-011-009-침수발생이력-설계.md`
+- `COMMON_DOCS_ROOT/작업내용/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-통합공유기록.md`
+- `FE_APP_DOCS_ROOT/작업계획/SFR-011-009-침수발생이력/001-fe-SFR-011-009-침수발생이력-작업카드.md`
+
+## 3. 구현 라운드 요약
+
+### 3.1 2026-06-15 docs-first 재정렬
+
+- 수행 내용
+  - 작업지시 DOCX, 시나리오 DOCX, 설계 PNG, HTML 시안을 먼저 읽고 기능 범위를 재정리했다.
+  - 공통 설계서, FE 작업카드, FE 통합검증계획을 먼저 작성했다.
+  - 공통 작업현황판/파일점유현황에 `SFR-011-009-DE-FE-PLAN` 진행 상태를 등록했다.
+
+### 3.2 2026-06-15 FE draft 구현
+
+- 반영 파일
+  - `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx`
+  - `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts`
+  - `FE_APP_ROOT/src/features/windowPopup/registry.tsx`
+  - `FE_APP_ROOT/src/features/windowPopup/ui/FloodHistoryPopupContent.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/floodHistory/FloodHistoryDetailPanel.tsx`
+  - `FE_APP_ROOT/app/(map-layout)/map/components/floodHistory/floodHistoryTypes.ts`
+- 구현 내용
+  - 분석도구의 `침수발생이력` 항목은 제거하고, 레이어 트리 `침수흔적도` 목록 진입으로 popup을 열도록 바꿨다.
+  - `침수발생이력` popup placeholder를 실제 popup 페이지로 교체했다.
+  - 시도/시군구/침수발생년도 선택/침수재해명 조회조건과 mock 목록 조회/다운로드를 연결했다.
+  - 그리드는 현재 파란 톤을 유지하되, 사용안함 항목을 제외한 상세 필드를 모두 노출하도록 바꾸고 가로 스크롤을 허용했다. `강우 분석정보` 묶음은 유지하면서 뒤쪽 컬럼을 재배치했다.
+  - 행 클릭 시 popup을 유지한 채 `postMessage`로 메인 지도에 mock preview를 보내고, 더블클릭 시 popup을 닫도록 구성했다.
+  - 메인 지도는 mock polygon layer와 침수심 표현 layer를 임시 `VectorLayer`로 그리도록 구성했고, 표시 여부는 `침수흔적도` 체크 상태를 따르도록 보정했다.
+  - 메인 지도 우측 상세패널은 제거하고, 지도 위 큰 침수흔적 영역 클릭 시 작은 플로팅 팝업이 열리도록 바꿨다.
+  - 상세 팝업 탭은 `침수년도탭`, `재해명탭`, `침수발생강우탭` 구조에 맞춰 재배치했고, 탭별 표 항목도 캡처 기준에 가깝게 맞췄다.
+
+## 4. 기능별 현재 상태
+
+### 4.1 popup 조회
+
+- FE-only draft 구현 완료
+- 레이어 트리 `침수흔적도` 목록 진입 기준
+- 시도/시군구/년도/재해명 조건과 목록 필터, 페이지네이션, 다운로드를 포함한다.
+
+### 4.2 지도 이동 및 강조
+
+- FE-only draft 구현 완료
+- 더블클릭 시 popup close 후 메인 지도 fit 이동과 mock polygon/침수심 표현 overlay를 수행한다.
+- `침수흔적도` 체크 상태에 따라 영역과 침수심 overlay를 함께 표시/숨김한다.
+
+### 4.3 지도 상세 팝업
+
+- FE-only draft 구현 완료
+- 선택 이력 기준 3탭 플로팅 팝업을 제공한다.
+
+## 5. 현재 검증 메모
+
+- 로컬 `localhost:3002` 응답은 확인했다.
+- `next dev`는 샌드박스 내에서 `spawn EPERM`이 발생해 권한 상승 후 로컬 서버를 띄웠다.
+- 사용자가 직접 로컬 화면을 수동 검증할 예정이므로, popup 실제 진입/더블클릭/상세패널 체감 확인은 후속 결과를 받아 갱신한다.
+
+## 6. 남은 리스크
+
+- popup 라우트의 초기 컴파일 시간이 길어 자동 요청에서 timeout이 발생할 수 있다.
+- `침수흔적도` 기준데이터 이름/구조와 FE 판별식이 다를 수 있다.
+- 실제 API 필드가 확정되면 상세패널 항목명/정렬이 일부 바뀔 수 있다.
diff --git a/apps/sn/docs/작업내용/SFR-011-노후관로관리/001-fe-SFR-011-노후관로관리-통합구현기록.md b/apps/sn/docs/작업내용/SFR-011-노후관로관리/001-fe-SFR-011-노후관로관리-통합구현기록.md
new file mode 100644
index 000000000..d6f51e189
--- /dev/null
+++ b/apps/sn/docs/작업내용/SFR-011-노후관로관리/001-fe-SFR-011-노후관로관리-통합구현기록.md
@@ -0,0 +1,98 @@
+# SFR-011 노후관로관리 통합 구현 기록
+
+## 1. 문서 목적
+
+- `SFR-011 노후관로관리`의 FE 구현 이력과 유지보수 보정 사항을 기능당 1개 문서로 누적 관리한다.
+- 이번 라운드는 신규 기능 추가가 아니라, 기존 `노후관로` 목록 팝업의 위치와 폭을 유지보수하는 목적이다.
+
+## 2. 입력 근거
+
+- `COMMON_DOCS_ROOT/작업계획/SFR-011-노후관로관리/001-DE-P2-노후관로관리-설계초안.md`
+- 사용자 유지보수 요청
+  - 하수관망도 `노후관로` 목록보기 팝업 가로 사이즈 축소
+  - 지도와 같이 볼 수 있도록 팝업 위치 좌측 상단 쪽으로 이동
+  - 폭 축소 후 컴포넌트가 자연스럽게 재배치되도록 보정
+
+## 3. 현재 라운드 구현 요약
+
+### 3.1 2026-06-04 팝업 위치/폭 유지보수
+
+- `agedPipePopup` 최종 크기를 `850 x 600`으로 조정했다.
+- 팝업 공통 열기 유틸에 위치 미세조정 옵션을 추가해 `노후관로` 팝업이 `placement: "browser-left"`, `alignTop: true`, `offsetTop: 200` 기준으로 열리도록 정리했다.
+- 상단 조회 조건 영역은 `경과년도 / 시도 / 시군구 / 조회 / 다운로드`가 한 줄로 보이도록 맞췄다.
+- 현재 팝업 높이에서 표 아래 공백이 과도하지 않도록 높이 기준을 재조정했다.
+
+### 3.2 2026-06-04 후속 미세조정
+
+- 사용 피드백 기준으로 팝업 위치는 현재 좌측 기준 + 세로 오프셋 `200px` 배치를 유지했다.
+- 조회/다운로드 버튼을 `시군구`와 같은 수평선에서 우측 정렬되도록 다시 조정했다.
+- 필터 영역 하단 여백을 줄여 버튼 아래 빈 공간이 남지 않게 보정했다.
+- `UiTable`에 전달하는 외곽 마진을 제거하고, 중복 총 건수 문구를 숨겨 팝업 내부 가로/세로 스크롤 발생 가능성을 낮췄다.
+- 표 영역은 현재 팝업 폭과 높이 안에서 보이도록 유지하는 방향으로 정리했다.
+
+### 3.3 2026-06-11 시설물 트리 하단 설정영역 분리
+
+- 기존 `노후관로 설정` 패널은 시설물 트리 안에서 `노후관로` 노드 바로 아래에 인라인으로 열렸지만, 지반침하정보와 동일하게 “레이어 사용 시 하단 설정영역에 추가되는 방식”으로 맞춰 달라는 요청이 들어왔다.
+- 이번 유지보수에서는 `노후관로 설정` 패널 컴포넌트 자체는 유지하고, `map/page.tsx`에서 `isAgedPipeChecked`일 때만 `Gis` 하단 `layerSettingView` 영역에 렌더되도록 위치만 조정했다.
+- 체크 해제 시에는 설정 패널도 같이 사라지고, 목록보기/필터 적용/지도 표시 흐름은 기존과 동일하게 유지한다.
+- 후속 보정으로 하단 영역은 `선택 레이어 설정` 묶음으로 감싸고, 선택된 설정이 없으면 섹션 자체가 사라지도록 해 “선택된 게 있을 때만 뜨는 느낌”을 명확히 했다.
+- 같은 영역 안에서 `지반침하정보`와 `노후관로 설정` 패널이 서로 다른 폭으로 보이지 않도록 두 패널 모두 하단 영역 기준으로 동일 폭을 쓰게 맞췄다.
+- 추가 보정으로 별도 상단 구분 타이틀은 제거하고, 시설물 레이어 목록을 얇은 사각형 프레임으로 감싸 위 레이어 영역과 아래 설정영역의 구획만 남기도록 정리했다.
+- 스크롤바가 생길 때 레이어명이 2줄로 꺾이는 현상을 줄이기 위해, 공용 트리 스크롤 영역에 `scrollbar-gutter: stable`을 적용하고 레이어명은 한 줄 `truncate` 기준으로 보정했다.
+- 공용 트리 접기 버튼이 스크롤바를 가려 보이는 배치도 함께 조정해, 버튼이 패널 외곽 핸들처럼 보이도록 옮겼다.
+- 후속 조정으로 버튼이 잘려 보이지 않는 문제를 해결하기 위해, 접기/펼치기 버튼을 패널 밖 가운데에 붙는 단일 토글 핸들 구조로 재배치했다.
+- 추가 수정으로 토글 버튼이 패널의 `overflow-hidden` 범위에 포함돼 실제로는 잘려 보이지 않던 구조를 분리해, 패널 바깥 형제 위치에서 항상 보이도록 보정했다.
+- 최종 보정으로 토글 시각 스타일은 분석도구 패널과 같은 `36x20` 핸들 디자인을 재사용하고, 위치는 패널 바깥 중앙으로 유지하도록 정리했다.
+- 추가 구조 보정으로 시설물 레이어 박스는 항상 윤곽이 유지되게 하고, 스크롤은 그 박스 내부에서만 동작하도록 바꿨다. 토글 핸들 위치도 박스 기준 중앙으로 다시 정리했다.
+- 후속 위치 보정으로 토글 핸들이 박스 오른쪽 경계에 자연스럽게 걸치도록 다시 맞춰, 지도 영역 쪽으로 과하게 밀려나 보이던 배치를 줄였다.
+- 후속 가시성 보정으로 토글 핸들 크기, 파란 계열 대비, 그림자를 함께 올려 지도 배경 위에서도 더 눈에 띄도록 정리했다.
+- 추가 구조 보정으로 패널은 `바깥 전체 스크롤`, 시설물 레이어 박스는 `고정 높이 + 내부 스크롤`로 분리해 생활안전지도와 비슷한 사용 흐름으로 정리했다.
+- `침수심 범례`는 선택 레이어 설정 안에서 별도 토글을 두지 않고, 관련 침수 레이어가 선택된 경우 실제 범례 항목을 그대로 확인하는 정보 카드로 반영했다.
+- 스크롤바는 폭만 얇게 유지하고 색상은 기본값으로 되돌려, 생활안전지도처럼 덜 눈에 띄는 톤으로 정리했다.
+- 후속 정리로 선택 레이어 설정에는 침수심 범례 본문만 남기고, 지도 우측 하단에 따로 뜨던 기존 범례 박스는 제거했다.
+- 추가 구조 보정으로 토글 핸들을 패널 본체와 분리된 고정 핸들로 바꿔, 닫았을 때도 화면 왼쪽 가장자리에 다시 열기 버튼이 남도록 정리했다.
+
+## 4. 실제 수정 파일
+
+- `FE_APP_ROOT/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx`
+- `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts`
+- `FE_APP_ROOT/src/features/windowPopup/model/types.ts`
+- `FE_APP_ROOT/src/features/windowPopup/lib/openWindowPopup.ts`
+
+## 5. 구현 상세
+
+### 5.1 팝업 정의
+
+- `agedPipePopup`
+  - `width: 850`
+  - `height: 600`
+  - `placement: "browser-left"`
+  - `alignTop: true`
+  - `offsetLeft: 0`
+  - `offsetTop: 200`
+
+### 5.2 공통 팝업 유틸
+
+- 기존 `center`, `browser-left` 배치 외에, 개별 팝업이 좌표를 미세 조정할 수 있도록 아래 속성을 허용했다.
+  - `alignTop`
+  - `offsetLeft`
+  - `offsetTop`
+- 이번 라운드에서는 `agedPipePopup`만 이 옵션을 사용한다.
+
+### 5.3 팝업 본문 레이아웃
+
+- 최상위 컨테이너에 `min-w-0`, `min-h-0` 기준을 추가했다.
+- 조회조건 영역을 `시군구`와 버튼이 같은 줄에서 정렬되도록 재배치했다.
+- 표는 현재 팝업 높이 안에서 하단 공백이 과도하지 않게 보이도록 구성했다.
+
+## 6. 영향 범위
+
+- `노후관로` 목록 팝업 초기 오픈 위치
+- `노후관로` 목록 팝업 초기 오픈 폭
+- 현재 팝업 높이에서의 조건영역/표 레이아웃
+- 다른 팝업은 기본 동작을 유지하며, 이번 위치 미세조정 옵션은 사용하지 않는다.
+
+## 7. 남은 리스크
+
+- 사용자 스크린샷 기준의 정확한 위치 체감은 실제 브라우저 수동 확인이 필요하다.
+- 최소화 후 다시 열 때 사용하는 메인 화면의 미니 카드 위치는 이번 라운드 범위에 포함하지 않았다.
diff --git a/apps/sn/docs/작업내용/SFR-012-002-하수관망도 업로드/001-fe-SFR-012-002-하수관망도 업로드-통합구현기록.md b/apps/sn/docs/작업내용/SFR-012-002-하수관망도 업로드/001-fe-SFR-012-002-하수관망도 업로드-통합구현기록.md
new file mode 100644
index 000000000..8f9d81d59
--- /dev/null
+++ b/apps/sn/docs/작업내용/SFR-012-002-하수관망도 업로드/001-fe-SFR-012-002-하수관망도 업로드-통합구현기록.md	
@@ -0,0 +1,116 @@
+# SFR-012-002 하수관망도 업로드 통합 구현 기록
+
+## 1. 문서 목적
+
+- `SFR-012-002 하수관망도 업로드`의 FE 구현 이력, 결정사항, BE 연동 경계, 남은 리스크를 기능당 1개 문서로 누적 관리한다.
+- 구현 전 단계에서는 설계 기준과 착수 조건을 먼저 기록한다.
+- 이후 라운드부터는 새 파일을 추가하지 않고 이 문서 내부 헤더만 추가한다.
+
+## 2. 입력 근거
+
+- `COMMON_DOCS_ROOT/작업계획/SFR-012-002-하수관망도 업로드/001-de-SFR-012-002-하수관망도 업로드-설계.md`
+- `FE_APP_DOCS_ROOT/작업계획/SFR-012-002-하수관망도 업로드/001-fe-SFR-012-002-하수관망도 업로드-작업카드.md`
+
+## 3. 공통 계약
+
+- `GIS 관리`는 지도 화면 내부 로컬 편집 모드가 아니라 `window popup` 업무 흐름으로 구현한다.
+- 업로드 대상 GIS는 원본과 분리된 업로드본으로 저장된다는 업무 규칙을 FE 문구와 payload 구조에 모두 반영한다.
+- 승인 전에는 코드 구현을 시작하지 않는다.
+- FE는 승인 후에도 실제 업로드/다운로드 API 연결 전까지는 mock 이력과 payload 준비 상태까지만 구현한다.
+
+## 4. 라운드 요약
+
+### 4.1 2026-05-15 설계 착수
+
+- 작업지시의 요구사항 명세서, 시나리오, HTML, PNG를 읽고 `SFR-012-003`과 비교했다.
+- `SFR-012-003`이 지도 위 직접 편집 중심이었다면, `SFR-012-002`는 popup 기반 업로드 관리라는 점을 핵심 차이로 확정했다.
+- canonical 문서 구조는 그대로 재사용하되, 이번 기능의 구현 후보를 `src/features/windowPopup/**` 중심으로 재설계했다.
+
+### 4.2 2026-05-15 FE-only popup 구현
+
+- `gisManagementPopup` placeholder를 실제 popup content로 교체했다.
+- 구현 범위
+  - 시설구분 select
+  - 파일 찾기 input
+  - 파일 확장자/크기 1차 검증
+  - mock 업로드 이력 갱신
+  - 다운로드 대상 선택
+  - 업로드/다운로드 요청 미리보기
+- 구현 원칙
+  - 실제 API 호출 없이도 백엔드 계약과 payload 구조를 검토할 수 있어야 한다.
+  - 업로드 성공 시 같은 시설구분의 기존 최신 참조 행은 `이력` 상태로 내리고, 신규 행을 `최신 참조`로 올리는 mock 규칙을 둔다.
+  - 미지원 시설구분은 select에서 비활성 처리해 예외 흐름을 먼저 노출한다.
+- 실제 수정 파일
+  - `FE_APP_ROOT/src/features/windowPopup/ui/GisManagementPopupContent.tsx`
+  - `FE_APP_ROOT/src/features/windowPopup/registry.tsx`
+  - `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts`
+
+### 4.3 2026-05-18 popup 구조/스타일 재정리
+
+- `windowPopup` 내부에서 직접 화면을 모두 그리던 방식을 걷어내고, `GisManagementPopupContent`는 얇은 wrapper로 두고 실제 화면은 `GisManagementPopupPage`로 분리했다.
+- 분석도구 popup과 비슷한 타이포/버튼/테이블 톤으로 재정리했다.
+- 팝업 초기 폭과 높이를 조정하고, 내부 컨텐츠는 창 크기에 맞춰 유동적으로 늘어나도록 변경했다.
+- 업로드 현황은 10건 단위 페이징을 적용했고, 기본적으로 5행 수준이 편하게 보이도록 높이를 조정했다.
+- `GIS 관리` window popup을 닫으면 분석도구 메뉴 active가 같이 해제되도록 보완했다.
+- `찾기`, `업로드` 버튼은 상황판/검색영역 `조회` 버튼 계열 색으로 통일했다.
+- `다운로드` 버튼은 운영정보 `파일 다운로드`와 같은 `green` 계열 버튼으로 분리했다.
+- 업로드 row는 좌측 입력 그룹과 우측 버튼 그룹을 분리 정렬하고, 버튼 간격을 별도로 조정했다.
+
+### 4.4 현재 FE 구현 범위 확정
+
+- 구현 완료 범위
+  - `GIS 관리` popup 진입
+  - 하수관로 단일 시설구분 표시/사용
+  - 파일 찾기
+  - 확장자/크기 1차 검증
+  - mock 업로드 이력 누적
+  - 업로드 현황 10건 페이징
+  - 다운로드 대상 선택
+  - popup close 시 분석도구 active 해제
+  - 버튼 색/정렬/간격 정리
+- 미완료 범위
+  - 실제 업로드 API 호출
+  - 실제 다운로드 바이너리 응답
+  - 업로드 성공 후 서버 이력 재조회
+  - 실제 시설물 레이어 기반 시설구분 동기화
+
+### 4.5 2026-05-21 업로드 대상 하수관로 단일화
+
+- 운영 제약 기준으로 `GIS 관리` 업로드 대상은 하수관로만 사용한다.
+- 이에 따라 `UPLOAD_FACILITY_TYPES` mock 상수에서 하수맨홀, 하수처리시설 항목을 제거했다.
+- 업로드 현황 mock 목록도 하수관로 이력만 남기고 정리했다.
+- FE 문서와 공통 공유 기록에서도 다른 GIS 테이블은 타회사 소유 범위라 업로드 대상에서 제외한다는 근거를 함께 남긴다.
+- 현재 구조는 `/map` 진입 시 전체 레이어 트리를 읽더라도 `GIS 관리` popup 소비 단계에서는 하수관로만 노출하는 방식으로 유지한다.
+
+## 5. BE 공유 초안
+
+### 5.1 FE가 기대하는 메타 정보
+
+- 업로드 가능 시설구분 목록
+- 시설구분별 허용 확장자
+- 시설구분별 최대 파일 크기
+- 시설구분별 업로드 가능 여부
+
+### 5.2 FE가 기대하는 업로드 응답 정보
+
+- `uploadId`
+- `facilityTypeCode`
+- `facilityTypeName`
+- `fileName`
+- `registeredAt`
+- `registeredBy`
+- `activeYn`
+- 최신 참조 갱신 여부
+
+### 5.3 FE가 기대하는 다운로드 조건
+
+- 선택 업로드 ID 기준 다운로드
+- 권한 없음 / 파일 없음 / 다운로드 실패 메시지 구분
+
+## 6. 남은 리스크
+
+- popup UI를 어느 수준까지 기존 공용 폼 패턴으로 맞출지 구현 직전에 다시 확인이 필요하다.
+- 업로드 후 지도 레이어를 즉시 새 업로드본 기준으로 refresh할지 여부는 서버 계약 없이는 확정하기 어렵다.
+- 실제 upload history 스키마가 설계 초안과 달라질 수 있다.
+- 현재 업로드/다운로드는 요청 미리보기와 mock 목록 갱신만 수행하므로, 실제 파일 바이너리 흐름은 백엔드 구현 후 재검증이 필요하다.
+- 시설구분 목록은 현재 `UPLOAD_FACILITY_TYPES` mock 상수에 고정돼 있어 실제 좌측 `시설물 레이어`와 다를 수 있다.
diff --git a/apps/sn/docs/작업내용/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-통합구현기록.md b/apps/sn/docs/작업내용/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-통합구현기록.md
new file mode 100644
index 000000000..d764b6ba6
--- /dev/null
+++ b/apps/sn/docs/작업내용/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-통합구현기록.md
@@ -0,0 +1,490 @@
+# SFR-012-003 하수관로편집 통합 구현 기록
+
+## 1. 문서 목적
+
+- `SFR-012-003 하수관로편집`의 FE 구현 이력, 결정사항, 남은 리스크를 기능당 1개 문서로 누적 관리한다.
+- 기존 `001~006` 구현 문서를 이 문서로 흡수한다.
+- 이후 라운드부터는 새 파일을 추가하지 않고 이 문서 내부 헤더로만 구분한다.
+
+## 2. 입력 근거
+
+- `COMMON_DOCS_ROOT/작업계획/SFR-012-003-하수관로편집/001-de-SFR-012-003-하수관로편집-설계.md`
+- `COMMON_DOCS_ROOT/작업지시/SFR-012-003-하수관로편집/하수관망도편집_화면시나리오_v1_1.md`
+- `FE_APP_DOCS_ROOT/작업계획/SFR-012-003-하수관로편집/001-fe-SFR-012-003-하수관로편집-작업카드.md`
+
+## 3. 공통 계약
+
+- 편집 결과는 원본 GIS를 직접 수정하지 않고 FE 로컬 세션에 우선 누적한다.
+- `ADD`, `MOVE`, `VERTEX_EDIT`, `DELETE`는 동시에 활성화하지 않는다.
+- `ADD`
+  - geometry family별 직접 캡처 방식으로 구현한다.
+  - `POINT`는 클릭 1회, `LINE`은 연속 클릭 + 종료, `POLYGON`은 연속 클릭 + 폐합 종료를 따른다.
+- `MOVE`
+  - preview feature drag 기반으로 유지한다.
+- `VERTEX_EDIT`
+  - QGIS vertex tool 기준으로 vertex marker를 노출하고, 양 끝점 포함 vertex 이동이 가능해야 한다.
+- `DELETE`
+  - 원본을 즉시 지우지 않고 임시 삭제 상태로만 유지한다.
+
+## 3-1. 편집도구 아이콘 기준
+
+현재 구현과 문서 표기는 화면 시안 기준 편집도구 아이콘 의미를 따른다.
+
+| 도구 | 아이콘 | 메모 |
+| --- | --- | --- |
+| 추가 | <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"></path><path d="M5 12h14"></path><path d="M5 19h14"></path></svg> | geometry family별 직접 캡처 대상 |
+| 이동 | <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M12 2l-3 3M12 2l3 3M12 22l-3-3M12 22l3-3"></path><path d="M2 12h20M2 12l3-3M2 12l3 3M22 12l-3-3M22 12l-3 3"></path></svg> | preview drag 유지 기준 |
+| 꼭지점편집 | <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17l6-10 8 8"></path><circle cx="5" cy="17" r="2"></circle><circle cx="11" cy="7" r="2"></circle><circle cx="19" cy="15" r="2"></circle></svg> | 양 끝점 포함 vertex 조정 목표 |
+| 삭제 | <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"></path><path d="M10 11v6M14 11v6"></path><path d="M6 7l1 14h10l1-14"></path><path d="M9 7V4h6v3"></path></svg> | 임시 삭제 상태 유지 |
+| 저장 | <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h12l2 2v16H5z"></path><path d="M8 3v6h8V3"></path><path d="M8 17h8"></path></svg> | 원본 분리 저장 계약 |
+
+## 4. 구현 라운드 요약
+
+### 4.1 초기 범위 정리
+
+- FE 로컬 세션, 툴바, 저장 payload 미리보기 구조를 준비했다.
+- 백엔드 공유용 편집 메타/저장 API 초안을 정리했다.
+
+### 4.2 레이어/도구 확장
+
+- 편집 후보 레이어를 7종으로 확장했다.
+- 레이어별 허용 도구 활성 규칙을 추가했다.
+- 세션 `undo`, `reset`을 추가했다.
+
+### 4.3 `MOVE`
+
+- preview feature 기반 `Translate` interaction을 연결했다.
+- 같은 객체 재선택 시 중복 change 누적을 줄이는 focus 흐름을 추가했다.
+- 현재 `MOVE`는 유지 기준으로 본다.
+
+### 4.4 `VERTEX_EDIT`
+
+- 여러 차례 interaction 보강을 시도했으나, 요구사항과 다른 구현 흔적이 남았다.
+- 현재 핵심 재정렬 기준:
+  - vertex marker가 보일 것
+  - 양 끝점 이동 가능
+  - `MOVE`와 서로 회귀를 일으키지 않을 것
+
+### 4.5 현재 라운드 `ADD` 재구현 시작
+
+- 기존 지도 중심 임시 생성 방식을 폐기했다.
+- `ADD` 도구 선택 시 geometry type별 `Draw` interaction을 연결하는 방향으로 재구현 중이다.
+
+### 4.6 2026-05-15 세션 유지 및 상호작용 회귀 대응
+
+- 사용자 피드백 기준 이슈
+  - `ADD`, `MOVE`, `VERTEX_EDIT` 변경분이 화면에서 바로 사라져 세션 추적이 어렵다.
+  - `MOVE` 선택 후 드래그가 실제로 움직이지 않는다.
+  - `VERTEX_EDIT`는 주황색 점이 기대보다 빈약하게 보이고 드래그 편집이 체감되지 않는다.
+- 이번 라운드 반영
+  - `GIS편집` 모드를 꺼도 변경분이 있으면 세션 패널과 지도 preview를 유지하도록 조정했다.
+  - preview layer를 `updateWhileInteracting=true`로 바꾸고, interaction start/end 시 `renderSync`와 source 변경 반영을 보강했다.
+  - 원본 피처 선택 시 layerId 비교가 namespace/feature id 형식 차이로 깨지지 않도록 layerId 정규화를 추가했다.
+  - interaction effect가 `gisEdit` 전체 객체 변경에 과민하게 반응하지 않도록 의존성을 좁혀 `MOVE`, `VERTEX_EDIT` 재연결 흐름을 안정화했다.
+  - 세션 패널은 편집 모드 종료 후에도 변경분이 남아 있으면 계속 노출되도록 바꿨다.
+  - 신규 추가 preview는 레이어별 색상을 우선 사용하도록 보강해 같은 화면에서 여러 시설을 편집해도 사용자가 구분할 수 있게 했다.
+  - `하수처리시설(tb_il_swage_prcs_fclt)`은 실제 레이어 설정 기준에 맞춰 `Point`로 정정하고 `VERTEX_EDIT` 대상에서 제외했다.
+
+### 4.7 2026-05-15 편집 세션 패널 축소/확장 UX 보강
+
+- 편집 세션이 길어질 때 지도를 과도하게 가리는 문제가 있어 기본 패널은 최근 5건만 표시하도록 줄였다.
+- 기본 패널에는 `총 N건` 배지와 `전체 보기` 버튼을 추가했다.
+- `전체 보기`는 드래그 가능한 팝업으로 분리해 사용자가 지도 위에서 위치를 옮기며 확인할 수 있게 했다.
+- 편집 모드를 종료한 뒤에도 세션이 남아 있으면 compact 패널과 전체 보기 팝업에서 계속 확인할 수 있다.
+
+### 4.8 2026-05-15 편집 세션 패널 단순화
+
+- 사용자 피드백에 따라 `전체 보기` 팝업은 제거했다.
+- 대신 기본 패널 높이를 최근 5건 정도만 보이는 크기로 고정하고, 패널 내부 스크롤로 아래 이력을 바로 확인할 수 있게 바꿨다.
+- 결과적으로 지도 맥락은 유지하면서도 추가 팝업 조작 없이 세션 전체를 훑을 수 있는 구조로 단순화했다.
+- 후속 조정으로 패널 높이를 한 번 더 줄이고, 하단 안내 문구 영역도 제거해 화면 점유를 더 낮췄다.
+
+### 4.9 2026-05-15 QGIS Vertex Tool 기준 재설계 착수
+
+- QGIS 공식 문서 기준 확인 결과, Vertex Tool은 “모든 실꼭지점 표시”, “끝점 이동”, “segment 중간 가상점 추가”, “selection persistent”를 기본으로 제공한다.
+- 기존 구현은 OpenLayers `Modify` 기본 overlay 위주여서 marker 표시와 endpoint drag 체감이 QGIS와 크게 달랐다.
+- 이번 라운드부터 `VERTEX_EDIT`는 아래 구조로 재구성한다.
+  - preview geometry와 분리된 vertex handle 전용 레이어
+  - 실꼭지점 handle
+  - segment 중간 가상 handle
+  - handle drag 후 geometry 재조립 및 세션 반영
+
+### 4.10 2026-05-15 `VERTEX_EDIT` QGIS 유사화 재구현
+
+- 이번 라운드 결정
+  - `ADD`, `MOVE`는 기준선으로 유지하고 `VERTEX_EDIT`만 재구현 대상으로 제한했다.
+  - OpenLayers `Modify` 기본 overlay로 되돌리지 않고, 기존 custom handle layer 방향을 유지하되 실험 코드를 단순화했다.
+  - “모든 midpoint 상시 표시” 방식은 버리고 “실꼭지점 상시 + hover segment midpoint 1건” 구조로 바꿨다.
+- 코드 반영
+  - 선택 preview feature의 실제 vertex만 항상 렌더링하도록 handle 생성 함수를 분리했다.
+  - `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon`에서 segment 후보를 계산하는 midpoint candidate 수집 유틸을 추가했다.
+  - pointer move 기준으로 가장 가까운 segment 1건만 midpoint handle을 노출하고, vertex 근처에서는 midpoint를 숨기도록 pixel tolerance 로직을 넣었다.
+  - midpoint drag 시 해당 segment 사이에 새 좌표를 삽입하고, vertex drag 시 기존 좌표만 이동하도록 geometry 재조립 흐름을 유지했다.
+  - interaction 시작/종료 중 midpoint hover가 섞여 드래그가 흔들리지 않도록 dragging flag와 pointer move cleanup을 분리했다.
+  - `MOVE` preview layer의 `clickPsblYn="Y"` 기준은 그대로 유지했고, vertex layer는 계속 별도 레이어로 유지했다.
+- 사용자 체감 개선 목표
+  - 어떤 점이 실꼭지점인지 즉시 보인다.
+  - midpoint는 필요한 segment 근처에서만 나타나 화면이 덜 산개된다.
+  - endpoint도 일반 vertex와 같은 방식으로 조작된다.
+
+### 4.11 2026-05-15 편집 세션창 팝업 전환 및 도구 아이콘 정리
+
+- 사용자 추가 요청 기준 반영
+  - 편집 세션창의 “현재 구현 ... 검토합니다” 안내 영역을 제거했다.
+  - 지도 좌하단 고정 세션 패널은 제거하고, 기존 `window popup` 체계의 `GIS 편집 세션` 팝업으로 전환했다.
+  - 팝업 기본 크기는 세션 목록과 payload 미리보기를 함께 볼 수 있게 `520 x 820`으로 잡았다.
+  - `추가`, `이동`, `꼭지점편집`, `삭제` 버튼은 분석도구와 같은 `lucide-react` 아이콘을 붙였다.
+- 구현 방식
+  - 메인 `/map` 화면은 GIS 편집 모드 진입 시 세션 팝업을 열고, postMessage로 세션 snapshot을 동기화한다.
+  - 팝업에서 `마지막 변경 취소`, `세션 초기화`, `항목 focus`를 누르면 다시 메인 창으로 메시지를 보내 실제 편집 세션을 제어한다.
+  - 기존 `gisEditPopup` placeholder는 유지하고, 세션 전용 팝업은 `gisEditSessionPopup`으로 별도 등록했다.
+
+### 4.12 2026-05-15 중복 endpoint handle 통합
+
+- 사용자 피드백 기준 이슈
+  - 관로 시점/종점 주변에 같은 위치의 주황색 꼭지점이 2개씩 겹쳐 보이는 경우가 있었다.
+- 이번 라운드 반영
+  - vertex handle 생성 시 raw vertex를 그대로 전부 노출하지 않고, 같은 좌표를 공유하는 vertex들은 화면에서 handle 1개로 묶었다.
+  - 단순 표시만 합친 것이 아니라, 묶인 handle을 드래그하면 같은 좌표를 공유하던 raw vertex들을 함께 이동시키도록 처리했다.
+  - 내부 `MultiLineString`/분리 part 구조는 유지하고, 표시와 드래그 동작만 통합했다.
+
+### 4.13 2026-05-15 외부 제출용 단일 산출물 생성
+
+- 사용자 요청으로 오늘 작업 내역, 설계 변경, 검증 계획, 검증 결과를 묶은 제출용 단일 `md` 파일을 별도 생성한다.
+- 이는 통합 문서 체계 예외 산출물이며, 기능 운영 문서는 기존 canonical 4문서 체계를 계속 기준으로 유지한다.
+
+### 4.14 2026-05-21 관로 기본정보 세션 편집 결합
+
+- 실제 구현 재점검 결과
+  - `useGisEdit`는 geometry change 세션만 관리하고 있었다.
+  - 관로 상세정보 저장은 기존 `FeatureClickEventPopup` 내부 `POST /api/v1/fcltppl` 즉시 저장 구조였다.
+  - 편집 모드에서는 피처 클릭이 상세 팝업 대신 session change 누적으로 우선 처리돼, 이동/꼭지점편집 중 기존 상세정보를 보며 수정하는 흐름이 없었다.
+- 이번 라운드 반영
+  - `GisEditChange`에 `featureRef`, `basicInfo`, `basicInfoSavedAt`를 추가했다.
+  - 기존 상세정보 구현 파일은 직접 수정하지 않는 방향으로 정리하고, GIS 편집 전용 하수관로 팝업을 별도 컴포넌트로 분리했다.
+  - 신규 추가는 같은 상세정보 형태의 편집 팝업을 빈 값으로 열고, 기존 관로 이동/꼭지점편집은 기존 값이 채워진 상태로 연다.
+  - 편집 전용 팝업은 `기본정보` editable 테이블과 `입력정보` editable 테이블만 표시하고, `보수 및 갱신`, `청소 및 준설`, `점검 및 진단` 섹션은 렌더링하지 않는다.
+  - 관로 기본정보는 기존 `GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd}`로 읽어 오되, 저장은 즉시 API 호출이 아니라 change draft 갱신으로만 처리한다.
+  - 최종 저장 payload는 `featureRef + basicInfo + geometryPatch` 구조로 다시 조립하도록 바꿨다.
+- 남긴 판단
+  - 현재 백엔드에는 geometry batch save API가 없어 FE는 payload 조립과 저장 지점 정렬까지 수행한다.
+  - 실제 DB 반영은 `tb_ms_swage_ppl` geometry와 `tb_sn_swage_ppl` 기본정보 저장 구조를 함께 처리하는 백엔드 계약이 추가로 필요하다.
+
+### 4.15 2026-05-21 편집 팝업 자동저장 루프 및 선택 제한 보강
+
+- 사용자 피드백 기준 이슈
+  - 편집 팝업 입력 시 스크롤이 상단으로 튀고, 일부 입력에서는 `Maximum update depth exceeded` 런타임 에러가 발생했다.
+  - `MOVE`, `VERTEX_EDIT` 중 하수관로 외 객체를 클릭하면 지도 기본 선택 흐름이 타면서 줌 이동이 발생했다.
+  - `MOVE`, `VERTEX_EDIT`에서 하수관로를 선택해도 편집 상세정보창이 항상 즉시 뜨지 않았다.
+- 원인 정리
+  - 편집 팝업 draft를 `useEffect`에서 자동 저장하도록 구성하면서 `팝업 입력 -> parent change 갱신 -> 팝업 재초기화 -> 재저장` 루프가 생겼다.
+  - `detailView` wrapper가 부모 렌더마다 재생성되어 스크롤/포커스가 흔들릴 여지가 있었다.
+  - `MOVE`, `VERTEX_EDIT`의 상세정보창 오픈을 preview 준비 완료 시점에 의존시켜 선택 직후 오픈이 누락되는 경우가 있었다.
+- 이번 라운드 반영
+  - 자동 세션 저장은 렌더 기반 effect에서 제거하고, 실제 `input/select` 변경 이벤트 시점에만 draft를 세션에 반영하도록 바꿨다.
+  - `detailView` wrapper를 안정화해 편집 팝업이 입력 중 불필요하게 remount되지 않도록 조정했다.
+  - `MOVE`, `VERTEX_EDIT`에서 하수관로를 선택하면 `setTimeout(0)` 기준으로 상세정보창을 즉시 열도록 단순화했다.
+  - 공통 `GisSelect`에 `canSelectFeature` 가드를 연결해, 하수관로 편집 중에는 비하수관로 피처를 아예 선택 단계에서 차단하도록 확장했다.
+  - 차단된 경우에는 지도 줌 이동이나 상세정보 전환 없이 상태문구 `하수관로를 선택해주세요.`만 남기도록 정리했다.
+
+### 4.16 2026-06-08 스냅핑 토글 및 Delete 키 꼭지점 삭제
+
+- 사용자 요구사항 기준
+  - `이동`과 `꼭지점편집` 사이에 QGIS 유사 `스냅핑` on/off 토글을 두고 실제 프론트 interaction에서 사용 가능해야 한다.
+  - `꼭지점편집` 중 주황색 실꼭지점을 클릭한 뒤 키보드 `Delete`를 누르면 해당 꼭지점을 삭제하고, 남은 꼭지점끼리 다시 연결돼야 한다.
+- 이번 라운드 반영
+  - `useGisEdit`에 `isSnapEnabled` 상태와 `toggleSnapEnabled`를 추가하고, 툴바와 세션 팝업 스냅샷에 함께 노출했다.
+  - `GisEditToolbar`에 `꼭지점편집` 오른쪽 `스냅핑` 버튼을 추가했다.
+  - 처음 구현은 `MOVE`, `VERTEX_EDIT`에만 스냅을 붙여 `ADD`에서는 스냅핑이 동작하지 않는 문제가 있었다.
+  - 후속 보정으로 `ADD`, `MOVE`, `VERTEX_EDIT` 모두 현재 보이는 `tb_ms_swage_ppl` 원본 feature와 다른 preview feature를 수집해 OpenLayers `Snap` interaction을 함께 부착하도록 수정했다.
+  - `VERTEX_EDIT` handle feature에 선택 키를 부여해, 사용자가 주황색 실꼭지점을 클릭하면 선택 상태를 유지하도록 보강했다.
+  - 전역 `keydown`에서 `Delete`를 감지하되 `input`, `textarea`, `select`, contentEditable 포커스 중에는 무시하도록 방어했다.
+  - `Delete` 대상은 주황색 실꼭지점만 허용하고, 흰색 midpoint는 “새 점 삽입 전용”으로 유지했다.
+  - `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon` 기준 삭제 유틸을 추가했지만, 현재 운영 범위상 핵심 대상은 하수관로 선형이다.
+  - 선형 최소 꼭지점 규칙을 넣어 하수관로가 2점 미만이 되는 삭제는 차단했다.
+- 남긴 판단
+  - 현재 스냅 대상은 지도 source에 로드된 하수관로 원본/preview만 사용하므로 화면 밖 또는 비로딩 객체까지 보장하지는 않는다.
+  - 겹쳐 있는 handle은 기존 구현처럼 하나의 묶음으로 표현되므로, 같은 좌표를 공유하는 raw vertex는 Delete 시 함께 제거될 수 있다.
+
+### 4.17 2026-06-08 QGIS 기준 1차 스냅 재구현
+
+- 사용자 재피드백 기준 이슈
+  - 스냅핑 `ON` 상태에서도 `ADD`가 기존 오수관에 붙지 않았다.
+  - `MOVE`, `VERTEX_EDIT`도 원본 하수관로를 기준으로 붙는 체감이 약했다.
+- 원인 재정리
+  - 기존 구현은 “지도에 이미 feature로 올라와 있는 객체”를 즉석에서 수집해 snap 대상으로 쓰는 구조였다.
+  - 하수관로 원본이 WMS로만 보이는 경우에는 브라우저 메모리에 snap 기준 feature가 충분히 없을 수 있어, 사용자는 관로가 보여도 실제로는 스냅 기준 geometry가 없는 상태가 생긴다.
+- 이번 1차 재구현 반영
+  - 범위를 `ADD`, `VERTEX_EDIT` 우선으로 줄여 시작했지만, 후속 보정으로 `MOVE`도 같은 원본 하수관로 snap source를 사용하도록 확장했다.
+  - 현재 화면 extent를 기준으로 `tb_ms_swage_ppl` WFS를 직접 다시 조회해 전용 `pipe snap source`를 만든다.
+  - `ADD`는 `Draw + Snap(source)` 구조로, `VERTEX_EDIT`는 custom vertex handle + `Snap(source)` 구조로 다시 연결했다.
+  - `MOVE`도 preview 수집 기반 fallback보다 원본 하수관로 WFS snap source를 우선 사용하도록 보강했다.
+  - `VERTEX_EDIT`에서 기존 관로를 편집하는 경우 자기 자신 원본 fid는 snap source에서 제외해 자기 geometry에 다시 달라붙는 문제를 줄였다.
+  - 지도 `moveend` 시 snap source를 다시 조회해 현재 보이는 하수관로 기준을 유지하도록 보강했다.
+- 현재 한계
+  - 이번 1차는 `MOVE`를 아직 QGIS 기준으로 다시 고정하지 않았다.
+  - 수동 브라우저 검증 전이라 실제 체감과 시각 피드백은 아직 최종 확정 상태가 아니다.
+
+### 4.18 2026-06-08 MOVE 기준점 재정렬 및 입력정보 조회 방어
+
+- 사용자 재피드백 기준 이슈
+  - `ADD`, `VERTEX_EDIT`는 비교적 잘 붙는데 `MOVE`는 붙는 위치와 안 붙는 위치가 섞여 보였다.
+  - 이동 중 관로 상세 팝업이 열릴 때 `fetchPipeInputInfo`에서 `500`이 간헐적으로 발생했다.
+- 원인 정리
+  - 기존 `MOVE`는 드래그 후 커서 좌표나 임의의 가장 가까운 꼭지점 기준으로 보정해, 사용자가 실제로 잡아 끈 관로 끝점과 snap 기준점이 달라질 수 있었다.
+  - 관로 입력정보 조회는 `fcltMngNo`, `mngInstCd`를 path에 그대로 넣고 있어 특수문자/임시값 케이스에 취약했다.
+- 이번 라운드 반영
+  - `MOVE`는 관로 선택 순간 클릭 위치에서 가장 가까운 관로 꼭지점 meta를 `move grip`으로 저장한다.
+  - 드래그 시작/중/종료 모두 원본 geometry snapshot을 기준으로 다시 계산하고, 선택된 `move grip`이 원본 하수관로 snap source에 붙도록 전체 geometry를 재정렬한다.
+  - 즉 `MOVE`도 `ADD`, `VERTEX_EDIT`처럼 “명확한 한 점을 기준으로 붙는다”는 QGIS 관점에 더 가깝게 재해석했다.
+  - `GisEditPipeSessionPopup`의 입력정보 조회는 path segment를 `encodeURIComponent(...)` 처리하고, `NEW-*` 임시값은 조회하지 않도록 방어했다.
+- 남긴 판단
+  - `MOVE` 체감이 여전히 어색하면 다음 단계는 grip point를 지도 위에 직접 시각화해 사용자가 “지금 어떤 점을 잡고 이동 중인지”를 보이게 해야 한다.
+
+### 4.19 2026-06-26 MOVE 도구 on/off 유지보수 분석
+
+- 사용자 요구사항
+  - `GIS편집`에서 `이동`을 한 번 누르면 여러 관로를 연속으로 이동할 수 있어야 한다.
+  - `이동` 버튼을 다시 누르면 이동 모드가 꺼지는 on/off 방식이어야 한다.
+- 현재 코드 확인
+  - `GisEditToolbar`는 `activeTool === "MOVE"`일 때 `이동` 버튼을 active 색상으로 표시한다.
+  - `handleSelectGisEditTool()`은 같은 도구를 다시 누르면 `gisEdit.deactivateTool()`을 호출하므로 버튼 재클릭 off 구조는 이미 있다.
+  - 문제는 `MOVE` `Translate`의 `translateend`가 끝날 때 `gisEdit.updateChangeGeometry(...)`를 호출하고, 해당 훅 함수가 기본적으로 `setActiveTool(null)`과 `setPendingInteraction(null)`을 실행하는 데 있다.
+  - 따라서 한 번 이동이 끝나면 사용자가 버튼을 다시 누른 것이 아니어도 `activeTool`이 `null`로 바뀌어 이동 도구가 꺼진다.
+- 다음 구현 방향
+  - `MOVE` 완료 후에는 `activeTool`을 `"MOVE"`로 유지한다.
+  - 이동이 끝난 같은 preview feature에 interaction이 계속 묶이지 않도록 `pendingInteraction`은 비운다.
+  - 다음 관로 또는 preview feature를 클릭하면 기존 `registerFeatureSelection()` 흐름이 새 `pendingInteraction`을 만들고 이동 interaction을 다시 붙이게 한다.
+  - 기존 `VERTEX_EDIT`의 `keepVertexEditActive` 동작과 충돌하지 않도록 `MOVE` 전용 옵션 또는 범용 `keepActiveTool` 옵션으로 좁혀 구현한다.
+- 이번 라운드 반영
+  - `useGisEdit.updateChangeGeometry()` 옵션에 `keepMoveToolActive`를 추가했다.
+  - `MOVE` `translateend`에서 geometry를 세션에 반영한 뒤 `{ keepMoveToolActive: true }`를 넘겨 `이동` 도구 active 상태를 유지한다.
+  - 같은 preview feature에 interaction이 계속 묶이지 않도록 `pendingInteraction`은 `null`로 비운다.
+  - 버튼 재클릭 off는 기존 `handleSelectGisEditTool()`의 동일 도구 클릭 분기를 그대로 사용한다.
+- 검증
+  - `node apps/sn/node_modules/typescript/bin/tsc -p apps/sn/tsconfig.json --noEmit --pretty false --ignoreDeprecations 5.0` 실행 결과, 저장소 기존 TypeScript 오류에서 실패했다.
+  - 이번 변경 파일인 `useGisEdit.ts` 관련 신규 오류는 출력되지 않았고, `page.tsx`는 기존 `GisApp.Module.layer` null 가능성 오류가 남아 있다.
+  - 실제 브라우저에서 관로 A/B 연속 이동과 버튼 재클릭 off 검증은 아직 필요하다.
+
+## 5. 기능별 현재 상태
+
+### 5.1 `ADD`
+
+- 요구사항
+  - 사용자가 지도 위에서 직접 점/선/면을 캡처해야 한다.
+- 이전 상태
+  - 지도 중심 기준 임시 geometry 자동 생성
+- 현재 상태
+  - `Draw` interaction 기반으로 전환 중
+- 남은 과제
+  - 선형/면형 종료 UX
+  - 캡처 취소 UX
+  - 세션 summary와 preview label 정교화
+  - 신규 추가 색상은 레이어 메타 우선, 없으면 FE fallback 색으로 처리
+
+### 5.2 `MOVE`
+
+- preview drag 방식으로 동작 확인
+- 유지 기준
+  - 선택 객체 1건 기준 preview 생성
+  - drag 종료 후 세션 geometry 갱신
+- 2026-05-15 보강
+  - preview layer redraw와 interaction 재바인딩 타이밍을 안정화했다.
+  - 실제 브라우저 수동 drag 재확인은 아직 남아 있다.
+
+### 5.3 `VERTEX_EDIT`
+
+- 요구사항
+  - 선택 객체의 vertex marker가 표시되어야 함
+  - 양 끝점 이동 가능
+  - 중간 vertex 이동 가능
+- 현재 리스크
+  - 하수관로 geometry가 `LineString`/`MultiLineString`으로 섞여 들어온다.
+  - interaction 구현이 흔들리면 `MOVE`까지 회귀할 수 있다.
+- 다음 기준
+  - 하수관로를 기준으로 QGIS형 vertex handle 흐름부터 고정
+- 2026-05-15 보강
+  - preview geometry와 별도인 vertex handle 레이어를 유지하되, 실꼭지점만 상시 표시하고 midpoint는 hover segment에 대해서만 노출하도록 재구현했다.
+  - endpoint drag, midpoint drag 후 vertex 삽입, geometry 재조립 흐름을 하나의 custom handle 규칙으로 통일했다.
+  - `하수처리시설`은 point라서 `VERTEX_EDIT` 대상이 아니라는 기준을 코드와 문서에 함께 맞췄다.
+
+### 5.4 `DELETE`
+
+- 임시 삭제 세션 흐름은 존재
+- 삭제 대상 시각 구분 강화는 후속
+
+## 6. BE 공유 사항
+
+- `GET /api/v1/map/gisEditLayers`
+  - geometry type/family
+  - editable 여부
+  - allowed tools
+- `POST /api/v1/map/gisEditSessions/save`
+  - 변경 유형별 geometry payload
+  - 원본 분리 저장
+
+## 7. 남은 리스크
+
+- `map/page.tsx`에 interaction 책임이 많이 몰려 있어 회귀 위험이 높다.
+- `VERTEX_EDIT`는 하수관로 기준 단순화가 먼저 필요하다.
+- `ADD`가 QGIS capture 경험과 완전히 같아지려면 종료/취소 UX를 더 다듬어야 한다.
+- canvas 기반 `MOVE`, `VERTEX_EDIT`는 자동화 브라우저 검증이 제한적이라 실제 드래그 체감은 수동 확인이 남아 있다.
+
+## 8. 흡수한 기존 문서
+
+- `001-fe-SFR-012-003-하수관로편집-프론트공유API요청.md`
+- `002-fe-SFR-012-003-하수관로편집-GIS편집상태재검토.md`
+- `003-fe-SFR-012-003-하수관로편집-세션도구확장.md`
+- `004-fe-SFR-012-003-하수관로편집-실제지도조작확장.md`
+- `005-fe-SFR-012-003-하수관로편집-MOVE실드래그구현.md`
+- `006-fe-SFR-012-003-하수관로편집-VERTEX_EDIT실조작구현.md`
+
+## 2026-06-10 관로 상세 조회 성능 개선
+
+- 작업 목적
+  - 하수관로 클릭 후 상세 팝업이 API 응답 전까지 비어 보이던 체감을 줄이고, 잘못된 상세 호출을 막는다.
+- 프론트 변경
+  - `featureClickEventPopup.tsx`에서 지도 클릭 feature 값으로 하수관로 기본정보를 먼저 렌더링하고, 상세 API 응답이 오면 기존 병합 흐름으로 덮어쓴다.
+  - 상세 식별값이 비어 있거나 `null`/`undefined` 문자열인 경우 `fcltppl` 상세 호출을 건너뛴다.
+  - `MsSwagePpl.tsx`의 운영이력 조회는 snake/camel 식별값을 모두 허용하고, 식별값이 없는 경우 호출하지 않도록 가드했다.
+- 기대 효과
+  - 관로 클릭 직후 팝업 기본정보가 즉시 표시된다.
+  - `/api/v1/fcltppl/null/null` 같은 불필요 호출을 줄여 상세 체감 지연과 백엔드 부하를 함께 낮춘다.
+### 4.20 2026-06-26 관로 입력정보 조회 오류 방어
+
+- 배경
+  - MOVE on/off 동작 확인 중 `GisEditPipeSessionPopup`의 기존 관로 입력정보 조회에서 `Error: ERROR` 콘솔 오류가 발생했다.
+  - 해당 조회는 편집 세션 보조 입력정보를 채우기 위한 선택적 조회이므로, 실패해도 관로 이동/세션 편집 자체를 막지 않아야 한다.
+- 반영 내용
+  - `GisEditPipeSessionPopup`에 `isInvalidPipeLookupKey`를 추가해 빈 값, `-`, `NEW-*`, `null`, `undefined` 문자열이면 `GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd}` 호출을 건너뛰도록 했다.
+  - 관리기관 목록과 관로 입력정보 조회 실패 catch에서 `console.error`를 제거해 Next 개발 콘솔 오버레이가 뜨지 않도록 했다.
+  - 조회 실패 시 기존 WFS 속성/세션 draft 값을 유지하고 팝업 입력 흐름은 계속 진행한다.
+- 백엔드 연동 보강
+  - `PplService.findByFcltMngNo(fcltMngNo, mngInstCd)`에서 MS 관로 상세 보조속성 조회와 관리기관명 조회를 안전 래퍼로 감싸, 보조 조회 실패가 `GET /api/v1/fcltppl/...` 전체 500으로 전파되지 않게 했다.
+
+### 4.21 2026-06-29 임시 관로 스냅 및 세션 버튼 재정렬
+
+- 사용자 요구사항 기준
+  - 기존 관로에는 잘 붙지만, 사용자가 임시로 추가한 관로에는 스냅핑이 제대로 동작하지 않는 문제가 있었다.
+  - `GIS 편집 세션` popup 버튼도 `취소`, `뒤로가기`, `초기화` 3종 의미로 다시 나눠야 했다.
+- 원인 정리
+  - pipe snap source는 현재 화면 BBOX 기준 `tb_ms_swage_ppl` 원본 WFS를 다시 읽는 구조라서, FE 세션 preview로만 존재하는 신규 관로/수정 관로가 source 우선 경로에서는 빠질 수 있었다.
+  - 세션 popup은 `마지막 변경 취소`, `초기화`만 있어 현재 선택한 change 1건만 제거하는 동작을 구분해 제공하지 못했다.
+- 이번 라운드 반영
+  - `page.tsx`에 `buildGisEditPipeSnapPreviewFeatures()`를 추가해 현재 세션의 하수관로 preview geometry를 별도 snap feature로 만들고, pipe snap source에 원본 WFS와 함께 병합했다.
+  - 기존 관로를 이동/꼭지점편집한 change는 원본 fid를 WFS snap source에서 제외해 수정 전 geometry에 다시 붙는 현상을 줄였다.
+  - pipe snap source는 WFS 응답 전에도 preview snap feature를 먼저 채워, 신규 관로를 추가한 직후 다른 신규 관로에 연속으로 스냅할 수 있게 했다.
+  - `useGisEdit`에 `removeFocusedChange()`를 추가해 현재 선택 change 제거를 지원하고, popup message type과 세션 패널 버튼도 `취소/뒤로가기/초기화` 기준으로 재정렬했다.
+  - 현재 상세 패널이 열려 있던 change가 세션에서 제거되면 우측 상세 패널도 함께 닫히도록 `page.tsx`의 detail effect를 보강했다.
+- 남긴 판단
+  - 이번 수정으로 임시 preview 관로가 snap 대상에서 빠지는 구조적 누락은 해소했지만, 실제 QGIS 체감과 지도 시각 피드백은 브라우저 수동 검증이 아직 필요하다.
+  - 세션 `취소`는 현재 focus된 change 기준이므로, 사용자가 어떤 change를 지우는지 목록 highlight와 지도 focus를 함께 보는 UX를 유지한다.
+
+### 4.22 2026-07-15 편집 세션 인라인 전환 및 도구바 재배치
+
+- `map/page.tsx`
+  - GIS 편집 버튼에서 기존 세션 팝업 자동 열기를 제거하고 편집 모드만 토글하도록 변경했다.
+  - 편집 모드 또는 잔여 변경분이 있을 때 시설물 관리 오른쪽에 `GisEditSessionPanel`을 인라인으로 렌더링한다.
+  - 인라인 패널의 최대 높이를 `calc(50dvh - 82px)`로 제한해 시설물 접기 토글 영역을 피하고, 팝업 버튼은 기존 `handleOpenGisEditSessionPopup()`을 호출한다.
+  - 인라인/팝업의 변경분 선택은 `handleFocusGisEditSessionChange()`로 통합해 지도 포커스와 상세 패널 열기 흐름을 공유한다.
+- `GisEditSessionPanel.tsx`
+  - `inline`/`popup` 변형과 선택적 `onOpenPopup`을 추가했다.
+  - 인라인 변형에 제목, 현재 레이어/도구, 명시적 `팝업` 버튼을 제공한다.
+  - 변경 목록 영역을 `flex-1` + `overflow-y-auto`로 구성해 항목 증가 시 패널이 최대 높이까지 늘고 이후 목록만 스크롤한다.
+- `GisEditToolbar.tsx`
+  - 상단 위치를 `16px`에서 `84px`로 내려 검색바/세션과 겹치지 않도록 했다.
+  - 최대 너비를 `860px`에서 `760px`로 줄이고 중복 세션 버튼을 제거했다.
+- `GisEditSessionPopupContent.tsx`
+  - 공용 세션 패널에 `variant="popup"`을 전달해 기존 팝업 제목/레이아웃을 유지한다.
+- `useGisEdit.ts`
+  - 변경분 취소 과정에 남아 있던 깨진 한글 상태 메시지를 정상 문구로 복원했다.
+- 호환성
+  - `gisEditSessionPopup` 정의는 수정하지 않아 기존 `460 x 640` 크기와 위치, opener 메시지 계약을 유지한다.
+  - API, 저장 payload, 백엔드 코드는 변경하지 않았다.
+
+### 4.23 2026-07-15 사용자 화면 피드백에 따른 배치 및 양방향 전환 보정
+
+- 피드백
+  - 4.22 구현 화면에서 인라인 세션이 검색바 일부를 가리고, 도구바가 세션 아래가 아닌 중앙 검색바 아래에 표시됐다.
+  - 팝업을 열어도 인라인이 남았으며 팝업에서 화면 세션으로 돌아오는 기능이 필요했다.
+- `map/page.tsx`
+  - `gisEditSessionView`를 `inline | popup`으로 관리해 두 뷰를 상호 배타적으로 렌더링한다.
+  - 인라인 세션과 `GisEditToolbar`를 `left: 278px`, `top: 16px`의 동일 플로팅 열에 넣고 도구바를 세션 바로 아래에 렌더링한다.
+  - 팝업 뷰에서는 인라인 카드 대신 초기 카드 높이만큼 자리 표시자를 유지해 도구바 위치가 갑자기 위로 이동하지 않게 했다.
+  - 인라인 표시 중 `searchBarClassName`으로 검색바를 `clamp(160px, 16vw, 220px)`만큼 오른쪽 이동한다.
+  - 팝업 열기 성공 시 `popup` 뷰로 전환하고, 팝업 복귀 메시지·직접 닫기 감시·세션 종료 시 `inline`으로 복원한다.
+- `GisEditToolbar.tsx`
+  - `embedded` 변형을 추가해 절대 중앙 배치 대신 부모 플로팅 열 안에서 렌더링할 수 있게 했다.
+  - embedded 너비는 최대 `650px`로 제한했다.
+- `Gis.js`
+  - 선택적 `searchBarClassName`을 추가해 `sn` 지도에서만 편집 세션 표시 중 검색바 위치를 보정한다. 기본값은 빈 문자열이다.
+- 팝업
+  - `GIS_EDIT_SESSION_SHOW_INLINE` 메시지를 추가했다.
+  - 팝업 헤더에 `화면에서 보기` 버튼을 추가해 opener에 복귀 메시지를 보낸다.
+  - 기존 팝업 크기와 위치, 세션 동기화/편집 명령 메시지는 유지한다.
+
+### 4.24 2026-07-15 파란 표시 영역 기준 최종 위치 보정
+
+- 사용자 표시 해석
+  - 상단 표시 영역은 축약형 인라인 편집 세션, 하단 표시 영역은 GIS 편집 도구바의 목표 위치다.
+  - 검색바는 이동하지 않는다.
+- `GisEditSessionPanel.tsx`
+  - `variant="inline"`이고 변경분이 0건이면 `isCompactInline`을 적용한다.
+  - 축약 상태에서는 패딩을 줄이고 취소·뒤로가기·초기화 버튼과 빈 목록 안내를 숨긴다.
+  - 첫 변경분이 생기면 기존 작업 버튼과 변경 목록을 표시해 항목 수에 따라 확장한다.
+- `map/page.tsx`
+  - 인라인 세션을 `left-[258px] top-4`, 너비 `360px`에 배치했다.
+  - 검색바 이동용 `searchBarClassName` 전달을 제거했다.
+  - 도구바를 세션 컨테이너 밖의 독립 오버레이로 복원했다.
+- `GisEditToolbar.tsx`
+  - embedded 변형을 제거했다.
+  - 위치를 `bottom-12 left-1/2`, 최대 너비 `960px`로 변경해 하단 표시 영역에 고정했다.
+- `Gis.js`
+  - 검색바 이동을 위해 추가했던 선택적 prop 변경을 모두 철회해 원본 상태로 복원했다.
+- 팝업
+  - 인라인 숨김, `화면에서 보기`, 직접 닫기 복원 동작은 유지한다.
+
+### 4.25 2026-07-15 인라인 편집 세션 너비 보정
+
+- 사용자 실제 화면에서 `w-[360px]` 인라인 세션이 검색바 첫 선택 조건을 가리는 것을 확인했다.
+- `map/page.tsx`의 인라인 세션 너비를 `w-[220px]`로 축소하고 불필요한 최대 너비 계산을 제거했다.
+- 세션 위치·축약/확장·팝업 전환과 하단 GIS 편집 바는 변경하지 않았다.
+
+### 4.26 2026-07-15 인라인 세션 너비 여백 조정
+
+- 사용자 화면 피드백에 따라 인라인 세션 너비를 `220px`에서 `260px`로 확대했다.
+- 검색바 위치, 세션 좌표, 하단 도구바와 팝업 기능은 변경하지 않았다.
+
+### 4.27 2026-07-15 축약 세션 높이 통일 및 5px 확대
+
+- `map/page.tsx` 인라인 세션 너비를 `260px`에서 `265px`로 변경했다.
+- `GisEditSessionPanel.tsx`에서 변경분 0건인 inline 변형에 `h-[58px] p-2`를 적용했다.
+- 변경분이 생긴 뒤에는 높이 고정을 적용하지 않는다. 검색바, 하단 도구바, 팝업 기능은 유지한다.
+
+### 4.28 2026-07-15 편집 세션 상단 정렬 10px 보정
+
+- 사용자 화면에서 편집 세션이 검색바보다 약 10px 위에 표시되는 것을 확인했다.
+- `map/page.tsx`의 세션 위치를 `top-4`에서 `top-[26px]`로 변경했다.
+- 크기와 나머지 화면 동작은 변경하지 않았다.
+
+### 4.29 2026-07-15 변경 카드 한 줄 제목과 안내 요약
+
+- `GisEditSessionPanel.tsx`의 카드 패딩을 `px-2 py-2`로 줄였다.
+- 제목에 `whitespace-nowrap`, `text-[11px]`를 적용해 `편집유형 / 객체번호`를 한 줄로 표시한다.
+- `지도 미리보기 선택` 배지는 `text-[9px]`, 축소 패딩, `whitespace-nowrap`으로 전체 문구를 유지한다.
+- 선택 카드에서는 `정보저장` 배지를 숨겨 두 배지 동시 표시로 인한 가로 넘침을 방지한다.
+- `getChangeSummary()`를 추가해 카드 하단 안내만 편집 유형별 짧은 문구로 표시했다. 내부 `change.summary`와 상태 메시지는 변경하지 않았다.
+
+### 4.30 2026-07-15 한 줄 안내 문구 친절도 보정
+
+- `getChangeSummary()`의 완료형 문구를 짧은 행동 안내형으로 변경했다.
+- 추가 위치 확인, 이동 위치 조정, 점 이동/선분 추가, 삭제 대상 확인, 상세정보 확인을 한 줄 길이로 제공한다.
+- 카드 레이아웃과 원본 `change.summary` 데이터는 변경하지 않았다.
+
+### 4.31 2026-07-15 GIS 편집 종료 시 세션 UI 동시 숨김
+
+- `map/page.tsx`의 `shouldShowGisEditSession`을 변경분 존재 여부가 아닌 `gisEdit.isEditMode`만 사용하도록 변경했다.
+- 편집 종료 시 `closeGisEditSessionPopup()`을 호출해 열린 세션 팝업도 닫는다.
+- 편집 재진입 시 `gisEditSessionView`를 `inline`으로 복원한다.
+- 팝업 sync effect도 편집 모드가 꺼져 있으면 실행하지 않는다.
+- `useGisEdit`의 변경분 배열은 유지하므로 다시 진입하면 기존 변경 카드가 복원된다.
diff --git a/apps/sn/docs/작업내용/SN-RDII분석결과-지도연계유지보수/001-fe-SN-RDII분석결과-지도연계유지보수-통합구현기록.md b/apps/sn/docs/작업내용/SN-RDII분석결과-지도연계유지보수/001-fe-SN-RDII분석결과-지도연계유지보수-통합구현기록.md
new file mode 100644
index 000000000..554bced1c
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-RDII분석결과-지도연계유지보수/001-fe-SN-RDII분석결과-지도연계유지보수-통합구현기록.md
@@ -0,0 +1,89 @@
+# SN RDII분석결과 지도연계 유지보수 FE 통합구현기록
+
+## 1. 작업 목적
+- RDII 분석결과를 좌측 LNB 대신 하수관망도 `분석도구` popup으로 옮기고, 침입수 분석결과와 같은 지도 연계 흐름으로 정리한다.
+
+## 2. 실제 수정 파일
+- `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/components/rdiiResult/**`
+- `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- `FE_APP_ROOT/src/features/windowPopup/**`
+- `FE_APP_ROOT/src/app/styles/components.css`
+
+## 3. 구현 내용
+- `rdiiResultPopup` popup 정의와 registry를 추가했다.
+- `RdiiResultPopupPage`를 만들어 기존 `ii/rdiiResult`의 조회/다운로드 흐름을 popup에서 재사용하도록 옮겼다.
+- row click 시 `SN_RDII_RESULT_ROW_SELECT` 메시지를 부모 창으로 전달하고, `useRdiiResultMap`에서 `/sewerage-service/api/v1/rdiiAnlsRslt/mapView/{rainInfwtAnlsSn}`를 호출해 결과 관로 overlay를 렌더하도록 연결했다.
+- row click 직후 지도 이동은 `SN_INFTWT_PROC_SEARCH` 검색바 동기화 이벤트를 재사용해 시도/시군구 중심 이동 규칙을 그대로 따르도록 맞췄다.
+- overlay 관로 click 시 `rdiiChart` popup을 `resultOnly` 모드로 열고, `rainInfwtAnlsSn/aplcnYm/analysisInfo`를 함께 넘겨 좌측 선택조건 없이 결과만 보이도록 확장했다.
+- `분석도구` 메뉴에는 popup key를 `rdiiResultPopup`으로 연결하되, 실제 노출 라벨은 `RDII 분석`으로 맞췄고 legacy `ii/rdiiResult`는 CSS로만 숨겨 route는 유지했다.
+
+## 4. 검증
+- FE 변경분 기준 `node node_modules\typescript\bin\tsc --noEmit --ignoreDeprecations 5.0 -p tsconfig.json`을 실행했다.
+- 이번 변경으로 새로 생긴 오류는 없었고, 아래 선행 타입 오류 때문에 전체 통과는 하지 못했다.
+  - `app/(map-layout)/map/components/common/index.ts`
+  - `app/(map-layout)/map/components/floodHistory/floodHistoryTypes.ts`
+  - `app/(map-layout)/map/page.tsx`
+  - `app/html/(map-layout)/map/components/common/index.ts`
+  - `app/html/(with-base-layout)/layout.tsx`
+  - `packages/common/business_components/src/ui/chart/*`
+
+## 5. 2026-07-02 후속 UI 보정
+- 사용자의 피드백에 따라 침입수 분석 메뉴 아이콘은 기존 물방울 표시로 되돌렸다.
+- RDII 분석결과 메뉴 문구는 실제 노출 기준 RDII 분석으로 조정했다.
+
+## 6. 남은 이슈
+- 브라우저 실동작 검증은 이번 세션에서 수행하지 못했다.
+- LNB 숨김 규칙은 현재 메뉴 순서 기준 `nth-child(4)`를 사용하므로, 추후 I/I 메뉴 순서가 바뀌면 selector를 함께 조정해야 한다.
+## 7. 2026-07-02 resultOnly popup 후속 보정
+- `rdiiChart` resultOnly 우측 요약 카드의 제목 라벨을 `shrink-0 + whitespace-nowrap` 기준으로 보정해 `강우유입수량 분석결과`가 한 줄로 유지되도록 맞췄다.
+- 차트/요약 조회 Promise 묶음에 예외 방어를 추가해 조회 실패 시 콘솔 오류를 남기고 상태를 빈 값으로 명확히 초기화하도록 정리했다.
+- FE가 계속 호출하던 `/api/v1/rdiiAnlsRslt/ppl/{rainInfwtAnlsSn}/{pplMngNo}`, `/api/v1/rdiiAnlsRslt/ppl/{rainInfwtAnlsSn}` 경로가 BE에 실제로 필요함을 기준으로 연동 계약을 다시 점검했다.
+- `node node_modules\typescript\bin\tsc --noEmit --ignoreDeprecations 5.0 -p tsconfig.json` 재실행 결과, 이번 변경과 무관한 기존 선행 오류만 남고 RDII 변경 파일 기준 신규 오류는 확인되지 않았다.
+## 8. 최종 확인 메모
+- 사용자 실동작 기준으로 `분석도구 > RDII 분석` popup, row click 지도 이동, 관로 highlight, resultOnly popup 흐름이 정상 동작하는 것으로 마감한다.
+- FE 전체 타입 오류는 이번 RDII 변경과 무관한 기존 선행 이슈만 남아 별도 정리 대상으로 유지한다.
+## 9. 2026-07-09 분석 화면 결과보기 버튼 연계
+
+- `ii/BaseLayout.tsx` 공통 액션 영역에 `결과보기` 버튼 슬롯을 추가하고, `ii/rdii/page.tsx`에서 `rdiiResultPopup` 전용 진입 함수를 연결했다.
+- `ii/analysisResultView.ts`는 `/map?analysisPopupKey=rdiiResultPopup` 창과 RDII 결과 popup을 같은 사용자 클릭에서 함께 연다.
+- `RdiiResultPopupPage` row click은 storage 이벤트용 payload를 함께 남기고, `useRdiiResultMap`은 storage listener를 추가해 opener가 map이 아닌 경우에도 highlight 흐름을 이어가게 했다.
+- `map/page.tsx`와 `AnalysisPopupMenu.tsx`는 query 기준으로 `RDII 분석결과` 메뉴 활성 상태를 맞춘다.
+- 같은 TypeScript 검증에서 이번 RDII 결과보기 버튼 연계 파일 기준 신규 오류는 확인되지 않았다.
+
+## 10. 2026-07-09 버튼 순서 미세조정
+
+- 사용자 요청에 따라 RDII 분석 화면 액션 버튼 순서를 `양식 받기 -> RDII분석 실행 -> 결과보기`로 조정했다.
+- 변경은 공통 `ii/BaseLayout.tsx` 렌더 순서만 수정해 침입수 분석 화면과 동일한 배치 규칙을 사용하도록 맞췄다.
+
+## 11. 2026-07-09 RDII 분석 완료 alert 구현
+
+- `ii/rdii/page.tsx`는 `savewithfile` 성공 직후 `분석 요청이 접수되었습니다. 완료 시 안내됩니다.` 문구를 먼저 보여주고, 응답의 `rainInfwtAnlsSn`으로 완료 감시를 시작하도록 바꿨다.
+- 감시는 공통 `ii/useAnalysisCompletionWatcher.ts`를 재사용해 `GET /api/v1/rdiiAnls/{rainInfwtAnlsSn}/status` polling과 `Y/N` 종료 alert를 처리한다.
+- `app/(with-base-layout)/layout.tsx`에 `GlobalAnalysisCompletionWatcher`를 mount해 사용자가 RDII 화면을 떠난 뒤에도 같은 레이아웃 범위 안에서는 완료 alert가 이어지도록 보강했다.
+- FE 정적 검증은 `node node_modules\typescript\bin\tsc --noEmit --ignoreDeprecations 5.0 -p tsconfig.json`까지 수행했고, 이번 RDII 완료 alert 변경 파일 기준 신규 오류는 없고 기존 선행 오류만 남았다.
+
+## 12. 2026-07-13 RDII 분석 progress overlay 이관
+
+- `ii/rdii/page.tsx`의 완료 watcher 등록에 `analysisType=RDII`, `analysisName=RDII 분석`, 초기 `10% REQUEST_ACCEPTED` 상태를 추가했다.
+- 공통 `useAnalysisCompletionWatcher.tsx`는 overlay 허용 분석유형을 `INFTWT`, `RDII`로 확장해 기존 좌측 하단 UI와 localStorage 감시 흐름을 그대로 재사용한다.
+- RDII status API의 `progressPercent`, `progressStep`, `progressMessage`, `updatedAt`을 기존 공통 polling 로직이 받아 화면에 반영한다.
+- TypeScript 전체 검사는 기존 지도·HTML·공통 차트 선행 오류로 실패했으며, 이번 RDII 변경 파일에서 새 오류는 확인되지 않았다.
+- 실제 브라우저에서 RDII 실행 후 단계 전환과 페이지 이동 중 overlay 유지 여부를 수동 확인해야 한다.
+
+## 13. 2026-07-13 RDII 분석정보 헤더/내용 줄바꿈 보정
+
+- 지도 `RDII 분석결과` 팝업의 `anlsInfo` 헤더를 `RDII\n분석정보`로 변경했다.
+- 공통 `UiTable`의 `white-space: pre-line` 렌더링을 재사용해 `RDII`와 `분석정보`가 두 줄로 표시되도록 맞췄다.
+- 긴 분석정보 값이 다음 열과 겹치지 않도록 RDII `UiTable`의 `anlsInfo` 데이터 셀에 침입수와 동일한 `whitespace-normal break-all leading-[1.35]` 클래스를 적용했다.
+- 레거시 `ii/rdiiResult` 화면과 공통 테이블 컴포넌트는 수정하지 않았다.
+- TypeScript 전체 검사는 기존 선행 오류로 실패했으며, `RdiiResultPopupPage.tsx` 관련 신규 오류는 없었다.
+
+## 14. 2026-07-13 최종 코드 재검토 및 마감
+
+- RDII 분석 실행 후 watcher 등록값, 전역 overlay의 `INFTWT/RDII` 필터, status 응답 반영과 `Y/N` 종료 alert 흐름을 다시 대조했다.
+- RDII 분석결과 팝업은 헤더 줄바꿈과 `anlsInfo` 데이터 셀의 `break-all` 처리가 침입수 팝업 패턴과 동일함을 확인했다.
+- 최종 TypeScript 전체 검사는 기존 지도·HTML·공통 차트 선행 오류로 실패했으며, RDII 변경 파일의 신규 오류는 없었다.
+- `git diff --check`를 통과했고 자동 검증 기준 추가 수정이 필요한 프론트 결함은 발견되지 않아 구현 범위를 마감한다.
+- 실제 단계 전환과 긴 분석정보 표시 상태는 배포 환경 브라우저 smoke test 항목으로 남긴다.
diff --git a/apps/sn/docs/작업내용/SN-정보검색-하수도정비기본계획보고서-유지보수/001-fe-정보검색-하수도정비기본계획보고서-통합구현기록.md b/apps/sn/docs/작업내용/SN-정보검색-하수도정비기본계획보고서-유지보수/001-fe-정보검색-하수도정비기본계획보고서-통합구현기록.md
new file mode 100644
index 000000000..a0a6ea34b
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-정보검색-하수도정비기본계획보고서-유지보수/001-fe-정보검색-하수도정비기본계획보고서-통합구현기록.md
@@ -0,0 +1,82 @@
+# 정보검색-하수도정비기본계획보고서 통합구현기록
+
+## 1. 문서 목적
+
+- 분석도구 `정보검색` 내 `하수도 정비 기본계획 보고서` 유지보수 구현 내용을 기록한다.
+
+## 2. 입력 근거
+
+- 공통 설계: `IIPBS/docs/작업계획/SN-정보검색-하수도정비기본계획보고서-유지보수/001-de-정보검색-하수도정비기본계획보고서-설계.md`
+- 사용자 요구사항
+  - report 탭 조회결과를 기존 영역에 표시
+  - 파일명 클릭 즉시 다운로드
+  - 조회조건 순서 변경
+  - 조회조건 한 줄 정렬 및 여백 보정
+  - 탭 전환 시 기본조회
+  - select 포커스 잘림 보정
+
+## 3. 공통 계약
+
+- 기존 `dc-service` 프록시 계약 `clsf`, `file`, `fileDownload`를 그대로 사용한다.
+- `sewerage-service` 신규 API와 DB 변경은 이번 범위에서 수행하지 않는다.
+- 공통 컴포넌트 수정은 `sn` 요구사항을 위한 옵션 추가 또는 스타일 보정으로만 한정한다.
+
+## 4. 구현 라운드 요약
+
+### 4.1 report 탭 인라인 복구
+
+- `SearchModal`에서 `report` 탭 선택 시 전용 팝업을 자동으로 열던 흐름을 제거했다.
+- 안내 카드 대신 `ReportTab`을 같은 본문 영역에 직접 렌더링하도록 바꿨다.
+
+### 4.2 파일명 직접 다운로드 전환
+
+- `ReportTab`의 셀 클릭을 `파일명` 컬럼으로 한정했다.
+- 파일이 있는 행의 `파일명` 셀에 파란 글씨, 밑줄, 포인터 스타일을 적용했다.
+- 파일 클릭 시 `dc-service` 파일 다운로드를 바로 호출하도록 연결했다.
+- 다건 파일은 현재 구조상 대표 파일 정의가 필요해서 첫 번째 파일을 대표 다운로드 대상으로 사용했다.
+- 표시 문자열은 `1건이면 실제 파일명`, `2건 이상이면 첫 파일명 외 N건`으로 보정했다.
+
+### 4.3 조회조건 재배치 및 필터 보강
+
+- 조회조건 표시 순서를 `시도 > 시군구 > 승인년도 > 구분 > 보고서 구분`으로 맞췄다.
+- 기존에 조회 UI에 없던 `구분(plantZoneGubun)` 필터를 추가했다.
+- 승인년도는 `0`, `9999` 같은 placeholder 값을 실제 필터에서 제외하도록 정리했다.
+
+### 4.4 탭 기본조회 보강
+
+- 팝업 최초 진입 시 1회 자동조회만 하던 흐름을 탭 전환 기준으로 보강했다.
+- `기본 정보`, `유지관리 정보`는 탭 또는 대표 조건이 바뀔 때 기본조건 조회가 다시 돌도록 `SearchModal/useSearchModal` 공통 흐름을 정리했다.
+- `하수도 정비 기본계획 보고서`는 `ReportTab` 내부에서 탭 진입 시 1회 자동조회되도록 유지했다.
+
+### 4.5 조회조건 레이아웃 및 결과 영역 정리
+
+- 보고서 탭 조회조건은 한 줄 우선 정렬로 재배치하고, 화면이 좁을 때는 줄바꿈 대신 가로 스크롤이 나도록 바꿨다.
+- 조회조건 박스의 과한 최소 높이와 하단 여백을 줄여 빈 줄처럼 보이던 공간을 제거했다.
+- 결과 영역은 고정 높이 wrapper를 제거하고 `UiTable` 자체 레이아웃을 사용하게 정리해 상하 공백을 줄였다.
+- 최종 보정으로 조회조건 각 요소 간 간격을 조금 더 벌려 보이도록 조정했다.
+
+### 4.6 행 클릭 제한 및 공통 select 포커스 보정
+
+- 보고서 표는 이제 행 전체가 아니라 `파일명` 컬럼만 클릭되도록 `UiTable`에 `clickableHeadIds` 옵션을 추가했다.
+- 이 옵션은 기본 미지정 시 기존 동작을 유지하므로 다른 화면에 영향이 없다.
+- 공통 `SelectBox`는 포커스 outline이 위에서 잘리지 않도록 root에 `overflow-visible`과 세로 여유를 주고, trigger 높이를 조금 늘렸다.
+- 추가로 포커스 ring을 바깥이 아닌 안쪽(`ring-inset`)으로 바꿔 기본정보/유지관리/보고서 탭 모두에서 잘림 없이 보이도록 보정했다.
+
+## 5. 수정 파일
+
+- `frontend/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx`
+- `frontend/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx`
+- `frontend/apps/sn/app/(map-layout)/map/searchModal/useReportTab.ts`
+- `frontend/apps/sn/app/(map-layout)/map/searchModal/useSearchModal.ts`
+- `frontend/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx`
+- `frontend/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx`
+- `frontend/packages/common/business_components/src/ui/table/index.tsx`
+- `frontend/packages/common/business_components/src/ui/select/select.css`
+- `frontend/packages/common/business_components/src/ui/select/lib/selectBox.tsx`
+
+## 6. 남은 리스크
+
+- 다건 파일 대표 다운로드 기준은 현재 첫 번째 파일 기준이다.
+- `reportFiles` 윈도우 팝업 코드는 현재 미호출 상태로 남아 있다.
+- lint/build 자동 검증은 워크스페이스 pnpm 환경 문제로 완료하지 못했다.
+- 브라우저에서 최신 select 포커스 스타일과 자동조회 체감은 추가 수동 확인이 필요하다.
diff --git a/apps/sn/docs/작업내용/SN-침입수분석결과-지도연계유지보수/001-fe-SN-침입수분석결과-지도연계유지보수-통합구현기록.md b/apps/sn/docs/작업내용/SN-침입수분석결과-지도연계유지보수/001-fe-SN-침입수분석결과-지도연계유지보수-통합구현기록.md
new file mode 100644
index 000000000..f1228deca
--- /dev/null
+++ b/apps/sn/docs/작업내용/SN-침입수분석결과-지도연계유지보수/001-fe-SN-침입수분석결과-지도연계유지보수-통합구현기록.md
@@ -0,0 +1,173 @@
+# SN 침입수분석결과 지도연계 유지보수 FE 통합구현기록
+
+## 1. 작업 목적
+
+- 하수관망도 `분석도구`에 `침입수 분석` popup을 추가하고, 기존 `ii/result` 결과 조회 흐름을 지도 중심 popup으로 옮긴다.
+- 결과 row 선택 시 지도에서 처리구역과 결과 관로를 강조하고, `실측하수량` 보유 관로는 별도 색상으로 구분한다.
+- 결과 관로 클릭 시 기존 관로 상세 대신 `침입수 분석결과` 전용 popup을 재사용한다.
+
+## 2. 실제 수정 파일
+
+- `FE_APP_ROOT/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/page.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx`
+- `FE_APP_ROOT/app/(map-layout)/map/components/inftwtResult/inftwtResultTypes.ts`
+- `FE_APP_ROOT/app/(map-layout)/map/components/inftwtResult/useInftwtResultMap.ts`
+- `FE_APP_ROOT/src/features/windowPopup/model/popupDefinitions.ts`
+- `FE_APP_ROOT/src/features/windowPopup/registry.tsx`
+- `FE_APP_ROOT/src/features/windowPopup/ui/InfilChartPopupContent.tsx`
+- `FE_APP_ROOT/src/features/windowPopup/ui/InftwtResultPopupContent.tsx`
+
+## 3. 구현 내용
+
+- `AnalysisPopupMenu`에 `침입수 분석` 메뉴를 추가했다.
+- window popup 체계에 `inftwtResultPopup`을 등록했다.
+- 신규 `InftwtResultPopupPage`를 추가해 기존 침입수 분석이력 조회와 결과 다운로드를 popup 안에서 수행하도록 구성했다.
+- 결과 row 클릭 시 `SN_INFTWT_RESULT_ROW_SELECT` message를 부모창으로 전달하도록 구현했다.
+- `useInftwtResultMap` hook을 추가해:
+  - 신규 `mapView` endpoint 호출
+  - 처리구역 geometry overlay
+  - 결과 관로 overlay
+  - `실측하수량` 보유 관로 주황색 강조
+  - overlay 관로 클릭 시 결과 전용 `infilChart` popup 분기
+  - 를 한 곳에서 처리하게 했다.
+- 기존 `infilChart`는 그대로 두지 않고 `resultOnly` 모드를 추가했다.
+  - 기본 모드: 기존처럼 사용자가 상수사용월/분석정보를 선택
+  - 결과 전용 모드: `inftwtAnlsSn`, `aplcnYm`, `analysisInfo`, `pplMngNo`를 받아 좌측 조건 없이 결과만 표시
+
+## 4. 지도 연계 기준
+
+- 현재 구현은 처리분구 geometry 원천이 명확하지 않아 `처리구역` geometry를 우선 focus source로 사용한다.
+- 처리구역 geometry가 없으면 결과 관로 extent로 fallback 한다.
+- 일반 결과 관로는 파란색, `실측하수량` 보유 관로는 주황색으로 표시한다.
+
+- 후속 UI 보정으로 `침입수 분석` 메뉴를 분석도구 최하단으로 이동했고, popup 조회조건의 `상수사용기간`은 기존 `DateMonthPicker` 패턴으로 교체했으며, 하수처리시설은 텍스트 입력 대신 기존 `CtpvSggPrcsFcltSelectBox` 기반 선택으로 바꿨다.
+- 지도 이동 안정화를 위해 결과 row 선택 후에는 처리구역 첫 feature id 또는 첫 번째 결과 관로 fid를 기존 `showSearchResultsFromGeoJSON` 경로로 우선 사용하고, overlay geometry는 GeoJSON `crs` 값을 읽어 동적으로 projection을 해석하도록 보강했다.
+
+## 5. 검증'
+
+- 코드 기준 정적 확인
+  - popup 정의/registry 연결 확인
+  - `map/page.tsx` message listener 및 overlay click 분기 확인
+- 자동 검증
+  - FE TypeScript 검증은 저장소 `pnpm` lockfile 정책 문제로 수행하지 못했다.
+  - 오류 내용: `ERR_PNPM_LOCKFILE_CONFIG_MISMATCH`
+
+## 6. 남은 이슈
+
+- 실제 브라우저에서 popup row 선택 후 지도 focus, 색상 구분, overlay 관로 click 동작을 수동으로 확인해야 한다.
+- `양평` 데이터 기준 `실측하수량` 관로가 기대대로 주황색으로 분리되는지 검증이 필요하다.
+- 처리분구 geometry 원천이 확정되면 `useInftwtResultMap` 내부 focus 규칙을 확장해야 한다.
+
+
+## 7. 2026-07-01 속도/안정화 보정
+
+- `useInftwtResultMap`이 `focusLayerType`, `focusFid`를 우선 사용해 기존 `showSearchResultsFromGeoJSON` 이동 경로를 재사용하도록 보정했다.
+- 결과 관로 하이라이트는 백엔드가 조합한 dedup `pplMngNo` 기준 GeoJSON만 사용하고, 실패 시에만 관로 extent fallback을 수행한다.
+- FE 정적 검증은 로컬 `tsc` 실행까지 시도했지만 `apps/sn/tsconfig.json`의 `ignoreDeprecations` 값이 현재 TypeScript 버전과 맞지 않아 미완료였다.
+
+## 8. 2026-07-01 row click 오동작 보정
+
+- `useInftwtResultMap`의 지도 이동 기준을 `showSearchResultsFromGeoJSON` 선택 흐름에서 overlay extent fit 기준으로 바꿨다.
+- `focusTargetType=ZONE`이면 처리구역 extent를 우선 사용하고, 아니면 결과 관로 extent를 사용하도록 수정했다.
+- 이 보정으로 row click 직후 잘못된 기본 관로 상세가 자동으로 열리는 현상을 줄인다.
+
+## 9. 2026-07-01 분석 실행 화면 선택구조 보정
+
+- `ii/BaseLayout.tsx`에 `selectionComponent` 주입 지점을 추가해, 화면별로 기본 시설 selector를 교체할 수 있게 했다.
+- `ii/irsetting/page.tsx`는 새 `CtpvSggSwtrmtZoneSelectBox`를 사용하도록 바꿨다.
+- 새 selector는 `하수처리구역명`을 먼저 선택하고, 대응 `하수처리시설명`은 읽기 전용으로 자동 표시한다.
+- 선택 검증 유틸은 기존 로직을 유지하되 `treatmentPlantLabel` 옵션만 추가해, `irsetting`에서는 안내 문구가 `하수처리구역을 선택해주세요.`로 나오게 맞췄다.
+- FE 타입 검증은 `tsc --ignoreDeprecations 5.0` 기준 새 변경 파일 오류 없이 통과했고, 남은 오류는 기존 지도/공통 차트 파일 선행 이슈로 분리했다.
+## 10. 2026-07-01 분석 실행 500 디버깅 보강
+- postMutiPart는 Axios 500 응답의 본문 메시지를 추출해 상위 화면으로 다시 던지도록 바꿨다.
+- ii/irsetting은 자동 표시된 시설명, 매칭결과 배열, 시간패턴 배열이 비어 있으면 서버 호출 전에 사용자에게 즉시 알린다.
+## 11. 2026-07-01 분석도구 popup 조회조건 처리구역 우선 전환
+- InftwtResultPopupPage의 조회조건 selector도 CtpvSggSwtrmtZoneSelectBox로 교체했다.
+- 팝업 목록 조회는 저장 구조를 유지하기 위해 여전히 swtrmtFcltNm으로 필터링하되, 사용자가 선택하는 순서는 하수처리구역명 -> 하수처리시설명 자동 표시로 맞췄다.
+## 12. 2026-07-01 popup 하이라이트 렌더 보강
+- useInftwtResultMap은 처리구역 focus 시 현재 처리구역 extent 안에 결과 관로가 하나도 없으면 결과 관로 extent로 자동 fallback 하도록 보강했다.
+- zone/pipe source와 layer에 changed, setVisible(true), 
enderSync를 호출해 overlay가 바로 그려지도록 보강했다.
+- 브라우저 콘솔에는 침입수 FE overlay 렌더 결과 로그를 남겨 zone/pipe feature count를 확인할 수 있게 했다.
+## 13. 2026-07-01 시설명 기준 복귀와 시도/시군구 조회 이동
+- InftwtResultPopupPage 조회조건은 처리구역 selector를 제거하고 다시 CtpvSggPrcsFcltSelectBox 기반 하수처리시설명 선택 구조로 복귀했다.
+- 팝업 다운로드 버튼은 상단 헤더가 아니라 조회 버튼 옆으로 이동시켜, 실제 결과 조회와 내려받기 동선을 한 줄에 맞췄다.
+- row click 직후 지도는 처리구역 extent fit 대신 SN_INFTWT_PROC_SEARCH 이벤트로 메인 상단 검색바의 시도/시군구/시설명 상태를 동기화하고, 검색바와 같은 시도/시군구 중심 이동 규칙을 우선 사용한다.
+- 처리구역 우선 selector 실험용 CtpvSggSwtrmtZoneSelectBox.tsx는 현재 구현에서 더 이상 참조되지 않아 정리했다.
+## 14. 2026-07-01 I/I 분석 legacy 결과 탭 임시 숨김
+- 사용자 요청 기준으로 좌측 `I/I 분석` 메뉴의 `침입수 분석결과` 항목은 현재 화면에서 숨겼다.
+- 숨김 방식은 공통 LNB 데이터 구조를 다시 건드리지 않고, `FE_APP_ROOT/src/app/styles/components.css`에서 해당 서브메뉴 항목만 표시하지 않도록 제한했다.
+- 이 보정은 메뉴 노출만 감추는 수준이며, 기존 `ii/result` route와 화면 코드는 유지한다.
+- 따라서 추후 필요 시 스타일 규칙만 제거하면 기존 업무형 결과 화면 진입선을 다시 살릴 수 있다.
+## 15. 2026-07-09 분석 화면 결과보기 버튼 연계
+
+- `ii/BaseLayout.tsx`에 `결과보기` 버튼 슬롯을 추가하고, `ii/irsetting/page.tsx`에서 `inftwtResultPopup` 전용 진입 함수를 연결했다.
+- 새 helper `ii/analysisResultView.ts`는 사용자 클릭 1회에서 `/map?analysisPopupKey=inftwtResultPopup` 창과 결과 popup을 함께 열어 popup 차단 가능성을 줄인다.
+- `InftwtResultPopupPage` row click은 기존 opener postMessage 외에 `localStorage`에도 선택 row를 기록하고, `useInftwtResultMap`은 storage 이벤트를 함께 구독해 map 창이 opener가 아니어도 지도 연계를 이어가게 했다.
+- `map/page.tsx`와 `AnalysisPopupMenu.tsx`는 `analysisPopupKey`가 있을 때 `침입수 분석결과` 메뉴를 활성 상태로 보여 주도록 보강했다.
+- `node node_modules\typescript\bin\tsc --noEmit --ignoreDeprecations 5.0 -p tsconfig.json` 재실행 결과, 이번 변경 파일 기준 신규 오류는 없고 기존 선행 오류만 남았다.
+
+## 16. 2026-07-09 버튼 순서 미세조정
+
+- 사용자 요청에 따라 침입수 분석 화면 액션 버튼 순서를 `양식 받기 -> 침입수분석 실행 -> 결과보기`로 조정했다.
+- 변경은 공통 `ii/BaseLayout.tsx` 렌더 순서만 수정해 RDII 분석 화면에도 같은 순서가 적용되도록 맞췄다.
+
+## 17. 2026-07-09 실측하수량 관로 우선 줌인 보정
+
+- 침입수 분석결과 popup에서 row click 시 `oilqPipeCount > 0`이면 시도/시군구 중심 이동보다 `hasOilq` 관로 extent fit을 우선 적용하도록 `useInftwtResultMap`을 보정했다.
+- 실측하수량 관로가 없는 row만 기존 지역 중심 이동과 일반 결과 관로 fallback을 유지한다.
+- 이 보정으로 주황색으로 표시되는 실측하수량 관로가 있는 케이스는 지도 진입 직후 해당 관로 주변으로 바로 확대된다.
+
+## 18. 2026-07-09 지역 선이동 제거 보정
+
+- `useInftwtResultMap`은 row click 직후 mapView를 먼저 확보한 뒤, `oilqPipeCount > 0`이면 검색바 동기화 이벤트에 `suppressMapMove`를 내려 지역 중심 이동을 건너뛰도록 보정했다.
+- `procSearchBar`는 `suppressMapMove`가 내려오면 시도/시군구/시설 상태만 갱신하고 `moveMapToCenter`는 호출하지 않는다.
+- 이 보정으로 실측하수량 관로가 있는 케이스는 처음부터 해당 관로 extent로 바로 확대된다.
+
+## 19. 2026-07-09 분석 대상지역 기본값 보정
+
+- `ii/irsetting`, `ii/rdii`의 기본 선택값을 `경기도 / 양평군 / 양평`으로 맞췄다.
+- 공통 `CtpvSggPrcsFcltSelectBox`는 mount 시 부모 값을 강제로 `0`으로 되돌리던 초기화 흐름을 제거하고, 시설 목록 로딩 후 `defaultSwtrmtFcltNm` 이름 기준으로 기본 시설을 자동 선택하게 보강했다.
+- 이 보정으로 두 분석 화면 진입 직후 `하수처리시설명` select도 `양평` 기준으로 바로 보이도록 정리했다.
+## 20. 2026-07-09 침입수 분석 완료 alert 구현
+
+- `ii/irsetting/page.tsx`는 더 이상 `savewithfile` 즉시 응답을 `분석 완료`로 간주하지 않는다.
+- 제출 성공 시 문구를 `분석 요청이 접수되었습니다. 완료 시 안내됩니다.`로 바꾸고, 응답으로 받은 `inftwtAnlsSn` 기준으로 상태 감시를 시작한다.
+- 신규 hook `ii/useAnalysisCompletionWatcher.ts`를 추가해 `GET /api/v1/inftwtAnls/{inftwtAnlsSn}/status` polling과 `Y/N` 종료 alert를 공통 처리한다.
+- 상태 추적 번호가 없으면 즉시 사용자에게 후속 결과목록 확인 안내를 띄운다.
+- FE 검증은 `node node_modules\typescript\bin\tsc --noEmit --ignoreDeprecations 5.0 -p tsconfig.json`까지 수행했고, 이번 변경 파일이 아닌 기존 선행 오류만 남았다.
+
+## 21. 2026-07-10 침입수 분석 전역 progress overlay 구현
+
+- `ii/useAnalysisCompletionWatcher.tsx`로 파일을 옮기고, 기존 완료 alert watcher를 `localStorage` 기반 전역 progress watcher + 좌측 하단 overlay 렌더 구조로 확장했다.
+- `SN_PENDING_ANALYSIS_WATCHES` item에는 `analysisType`, `analysisName`, `progressPercent`, `progressStep`, `progressMessage`, `updatedAt`를 함께 저장해 페이지 이동 뒤에도 같은 진행 상태를 다시 그릴 수 있게 했다.
+- 전역 watcher mount는 `src/app/providers/app-provider.tsx` 하나로 유지하고, `with-base-layout/layout.tsx`의 중복 mount는 제거해 같은 창에서 polling이 두 번 돌지 않도록 정리했다.
+- `ii/irsetting/page.tsx`는 `analysisType=INFTWT`, 초기 `10% / REQUEST_ACCEPTED / 요청 접수 완료` 상태로 감시를 시작하면서도, 접수 alert 문구는 사용자 요구대로 `분석 데이터가 성공적으로 제출되었습니다.`를 그대로 유지한다.
+- FE 검증은 `node node_modules\typescript\bin\tsc --noEmit --ignoreDeprecations 5.0 -p tsconfig.json`까지 수행했고, 이번 변경 파일 신규 오류는 제거되었으며 남은 실패는 기존 선행 오류만 확인됐다.
+
+## 22. 2026-07-13 프로그래스바 최종 표시 방식 정리
+
+- 팝업창에서는 progress overlay를 숨기고 메인 화면에서만 보이도록 최종 정리했다.
+- `status` polling 응답은 공용 wrapper `{ status, message, data }`를 해제해 실제 `data.progressPercent`를 읽도록 보강했다.
+- 최종 화면 표시는 보간이 아니라 단계값 고정형으로 정리했다.
+  - `10%` 요청 접수 완료
+  - `20%` 상세 데이터 저장 시작
+  - `30%` 상세 데이터 저장 완료
+  - `40%` SWMM 분석 실행 중
+  - `80%` 결과 저장 중
+  - `100%` 완료
+- 이 정리로 사용자는 오래 걸리는 두 구간을 `40%`, `80%`부터 보게 되어, 막판 `99%` 고정처럼 보이는 체감을 줄일 수 있다.
+
+## 23. 2026-07-13 프로그래스바 구현 마감 정리
+
+- 전역 progress overlay는 메인 화면에서만 보이고 `/popup/` 경로에서는 표시하지 않도록 마감했다.
+- 최종 표시 방식은 보간 없이 고정 단계값 기준으로 정리했다.
+  - `10%` 요청 접수 완료
+  - `20%` 상세 데이터 저장 시작
+  - `30%` 상세 데이터 저장 완료
+  - `40%` SWMM 분석 실행 중
+  - `80%` 결과 저장 중
+  - `100%` 완료
+- `status` polling은 공용 wrapper `{ status, message, data }`를 해제해 실제 `data.progressPercent`를 읽도록 보강했고, `_ts` query와 `cache: no-store`를 적용해 캐시된 상태 응답이 재사용되지 않게 했다.
+- 진행상태 카드 폭/색상/팝업 중복 노출도 함께 정리했다.
diff --git a/apps/sn/middleware.ts b/apps/sn/middleware.ts
index c4da97544..f0a6733d6 100644
--- a/apps/sn/middleware.ts
+++ b/apps/sn/middleware.ts
@@ -2,11 +2,11 @@ import { NextRequest, NextResponse } from "next/server";
 
 const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
 const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
-const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
+const SERVER_API_URL = process.env.SERVER_API_URL || "";
+const SEWERAGE_API_URL = process.env.SEWERAGE_API_URL || "";
 const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
 const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
-const DC_URL = process.env.NEXT_PUBLIC_DC_URL || "";
+const DC_URL = process.env.DC_URL || "";
 
 /** 공통: URLSearchParams의 값을 decodeURIComponent 적용하여 querystring 생성 */
 function toDecodedQueryString(params: URLSearchParams): string {
diff --git a/apps/sn/package.json b/apps/sn/package.json
index 5b89e93db..8cfd172aa 100644
--- a/apps/sn/package.json
+++ b/apps/sn/package.json
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@common/assets": "workspace:*",
-    "@common/business_components": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
+    "@common/business_components": "workspace:*",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
@@ -28,12 +30,14 @@
     "js-cookie": "^3.0.5",
     "moment": "^2.30.1",
     "next": "15.5.18",
+    "lucide-react": "^0.474.0",
     "react-chartjs-2": "^5.3.0",
     "react-hot-toast": "^2.5.2",
     "react-dnd": "^16.0.1",
     "react-hook-form": "^7.54.2",
     "tailwindcss-animate": "^1.0.7",
     "tus-js-client": "^4.3.1",
+    "uuid": "^14.0.1",
     "xlsx": "^0.18.5",
     "xlsx-populate": "^1.21.0",
     "zod": "^3.24.2",
diff --git a/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_BLUE.png b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_BLUE.png
new file mode 100644
index 000000000..073f396c1
Binary files /dev/null and b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_BLUE.png differ
diff --git a/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_BLUE.svg b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_BLUE.svg
new file mode 100644
index 000000000..cc160ef47
--- /dev/null
+++ b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_BLUE.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle cx="8" cy="8" r="4.5" fill="#2563eb" stroke="#ffffff" stroke-width="2"/>
+</svg>
diff --git a/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_ORANGE.png b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_ORANGE.png
new file mode 100644
index 000000000..4e0c046ce
Binary files /dev/null and b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_ORANGE.png differ
diff --git a/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_ORANGE.svg b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_ORANGE.svg
new file mode 100644
index 000000000..db569fe19
--- /dev/null
+++ b/apps/sn/public/images/map/layericon/SN_SINKHOLE_SPOT_ORANGE.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle cx="8" cy="8" r="4.5" fill="#f59e0b" stroke="#ffffff" stroke-width="2"/>
+</svg>
diff --git a/apps/sn/src/app/providers/app-provider.tsx b/apps/sn/src/app/providers/app-provider.tsx
index 81821a635..654acb9c4 100644
--- a/apps/sn/src/app/providers/app-provider.tsx
+++ b/apps/sn/src/app/providers/app-provider.tsx
@@ -11,7 +11,7 @@ import { PromptProvider, StoreProvider } from "@/shared/providers";
 import { AlertDialog } from "@/shared/ui/alert-dialog";
 import { PromptDialog } from "@/shared/ui/prompt-dialog";
 import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
-
+import { GlobalAnalysisCompletionWatcher } from "../../../app/(with-base-layout)/ii/useAnalysisCompletionWatcher";
 
 const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   const queryClient = new QueryClient();
@@ -29,6 +29,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
                   {children}
                 </DndProvider>
               </MenuWrapper>
+              <GlobalAnalysisCompletionWatcher />
               <AlertDialog />
               <PromptDialog />
               <ConfirmDialog />
@@ -43,4 +44,4 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   );
 };
 
-export { AppProvider };
+export { AppProvider };
\ No newline at end of file
diff --git a/apps/sn/src/app/styles/components-black.css b/apps/sn/src/app/styles/components-black.css
index 4dc30bafd..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-black.css
+++ b/apps/sn/src/app/styles/components-black.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="black"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components-blue.css b/apps/sn/src/app/styles/components-blue.css
index 7c1e9db27..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-blue.css
+++ b/apps/sn/src/app/styles/components-blue.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="blue"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components-green.css b/apps/sn/src/app/styles/components-green.css
index 4b4cc770e..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-green.css
+++ b/apps/sn/src/app/styles/components-green.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="green"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components-red.css b/apps/sn/src/app/styles/components-red.css
index cadffac52..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-red.css
+++ b/apps/sn/src/app/styles/components-red.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="red"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components.css b/apps/sn/src/app/styles/components.css
index 3aa3c770d..a92f6ad27 100644
--- a/apps/sn/src/app/styles/components.css
+++ b/apps/sn/src/app/styles/components.css
@@ -2,19 +2,200 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
+  }
+
+  .sn-popup-page {
+    @apply flex h-screen min-w-0 flex-col overflow-hidden bg-background text-foreground;
+  }
+
+  .sn-popup-modal-page {
+    @apply flex h-screen items-start justify-center bg-container px-3 py-3 text-foreground;
+  }
+
+  .sn-popup-shell {
+    @apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
+  }
+
+  .sn-popup-modal-shell {
+    @apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
+  }
+
+  .sn-popup-header {
+    @apply flex min-h-[44px] items-center justify-between border-b border-border bg-primary px-5 py-3;
+  }
+
+  .sn-popup-modal-header {
+    @apply flex h-[44px] items-center border-b border-border bg-secondary px-[18px];
+  }
+
+  .sn-popup-title {
+    @apply text-[1.45rem] font-semibold text-primary-foreground;
+  }
+
+  .sn-popup-modal-title {
+    @apply text-[1.35rem] font-semibold tracking-[-0.01em] text-foreground;
+  }
+
+  .sn-popup-header-link {
+    @apply mr-3 text-[1.05rem] font-medium text-primary-foreground hover:text-primary-foreground;
+    opacity: 0.9;
+  }
+
+  .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);
+  }
+
+  .sn-popup-section {
+    @apply flex min-h-0 flex-1 flex-col overflow-hidden p-4;
+  }
+
+  .sn-popup-filter-panel {
+    @apply grid grid-cols-1 gap-3 border-b border-border bg-secondary pb-4;
+  }
+
+  .sn-popup-filter-panel-compact {
+    @apply border-b border-border bg-secondary pb-3;
+  }
+
+  .sn-popup-field {
+    @apply block min-w-0;
+  }
+
+  .sn-popup-field-label {
+    @apply mb-1 text-[1.05rem] font-medium text-label;
+  }
+
+  .sn-popup-input {
+    @apply h-10 w-full rounded-md border border-input bg-field px-3 text-[1.05rem] text-foreground outline-none placeholder:text-placeholder focus:ring-2 focus:ring-ring;
+  }
+
+  .sn-popup-input-sm {
+    @apply h-[32px] rounded-[6px] border border-input bg-field px-[10px] text-[1.02rem] font-medium text-foreground outline-none transition placeholder:text-placeholder focus:ring-2 focus:ring-ring;
+  }
+
+  .sn-popup-actions {
+    @apply flex flex-wrap items-end justify-end gap-2;
+  }
+
+  .sn-popup-primary-button {
+    @apply h-10 px-5 !text-[1.05rem];
+  }
+
+  .sn-popup-secondary-button {
+    @apply h-10 rounded-md border border-input bg-background px-5 text-[1.05rem] text-foreground hover:bg-accent;
+  }
+
+  .sn-popup-secondary-button-sm {
+    @apply h-9 rounded-md border border-input bg-background px-4 text-[1.05rem] text-foreground hover:bg-accent;
+  }
+
+  .sn-popup-danger-button-sm {
+    @apply h-9 rounded-md border border-destructive bg-background px-4 text-[1.05rem] text-destructive;
+  }
+
+  .sn-popup-danger-button-sm:hover {
+    background-color: color-mix(in srgb, var(--destructive) 10%, var(--background));
+  }
+
+  .sn-popup-primary-button-sm {
+    @apply h-[32px] min-w-[56px] rounded-sm bg-primary px-0 py-2 text-sm font-medium text-primary-foreground hover:opacity-90;
+  }
+
+  .sn-popup-status-bar {
+    @apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-label;
+  }
+
+  .sn-popup-success-bar {
+    @apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-foreground;
+  }
+
+  .sn-popup-card {
+    @apply overflow-hidden rounded-[10px] border border-border bg-background;
+  }
+
+  .sn-popup-panel-title {
+    @apply text-[1.05rem] font-medium tracking-[-0.01em] text-label;
+  }
+
+  .sn-popup-grid-table {
+    @apply w-full border-collapse text-[1.05rem];
+  }
+
+  .sn-popup-grid-head-row {
+    @apply bg-secondary text-title;
+  }
+
+  .sn-popup-grid-head-row-strong {
+    @apply bg-muted text-foreground;
+  }
+
+  .sn-popup-grid-head-cell {
+    @apply border border-border px-2 py-2;
+  }
+
+  .sn-popup-grid-head-cell-sub {
+    @apply border border-border px-2 py-1;
+  }
+
+  .sn-popup-grid-cell {
+    @apply border border-border px-2 py-2 text-foreground;
+  }
+
+  .sn-popup-grid-row {
+    @apply bg-background;
+  }
+
+  .sn-popup-grid-row-hover {
+  }
+
+  .sn-popup-grid-row-hover:hover {
+    background-color: color-mix(in srgb, var(--secondary) 60%, var(--background));
+  }
+
+  .sn-popup-grid-row-selected {
+    @apply bg-primary-transparent;
+  }
+
+  .sn-popup-empty-cell {
+    @apply text-label;
+  }
+
+  .sn-popup-badge {
+    @apply inline-flex items-center justify-center px-2 py-1 text-[12px] font-semibold;
+  }
+
+  .sn-popup-badge-danger {
+    @apply bg-destructive text-destructive-foreground;
+  }
+
+  .sn-popup-badge-normal {
+    @apply border border-border bg-background text-foreground;
+  }
+
+  .sn-popup-help-text {
+    @apply mt-2 rounded-md border border-border bg-secondary px-4 py-3 text-[1.05rem] text-label;
   }
 }
+/* `I/I 분석 > 침입수 분석결과`는 나중에 다시 사용할 수 있도록 라우트는 유지하고 LNB에서만 임시 숨김 처리한다. */
+/* `I/I 분석 > 침입수 분석결과`, `RDII 분석결과`는 지도 popup 흐름으로 대체하고 레거시 라우트는 유지한 채 LNB에서만 숨긴다. */
+[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) {
+  display: none;
+}
diff --git a/apps/sn/src/features/auth/login/index.ts b/apps/sn/src/auth/login/index.ts
similarity index 100%
rename from apps/sn/src/features/auth/login/index.ts
rename to apps/sn/src/auth/login/index.ts
diff --git a/apps/sn/src/auth/login/ui/login-page.tsx b/apps/sn/src/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..c41ca5f0a
--- /dev/null
+++ b/apps/sn/src/auth/login/ui/login-page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { authService } from "@/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setErrorMessage("");
+
+        const formData = new FormData(e.target as HTMLFormElement);
+        const userId = formData.get("id") as string;
+        const password = formData.get("password") as string;
+
+        try {
+            await authService.login({ userId, password });
+            window.location.href = "/";
+        } catch (error) {
+            const message =
+                error instanceof Error
+                    ? error.message
+                    : "로그인에 실패했습니다.";
+            setErrorMessage(message);
+        }
+    };
+
+    return (
+        <div className="login fx">
+            <div className="left_box fx">
+                <div className="text">
+                    <h1>
+                        유역하수도통합플랫폼
+                        <br />
+                        <span>하수도통계 관리시스템</span>
+                    </h1>
+                    <p>
+                        유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을
+                        환영합니다.
+                    </p>
+                </div>
+                <div className="img">
+                    <Image
+                        src={images.logo}
+                        width={229}
+                        height={46}
+                        alt="logo"
+                    />
+                </div>
+            </div>
+            <form
+                id="loginForm"
+                name="loginForm"
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                <div className="login_box fx">
+                    <ul className="fx">
+                        <li>
+                            <h2>ID</h2>
+                            <div className="input_st st1">
+                                <i className="diveicon di-account-box" />
+                                <input
+                                    type="text"
+                                    className="id"
+                                    title="아이디를 입력하세요."
+                                    id="id"
+                                    name="id"
+                                    maxLength={12}
+                                />
+                            </div>
+                        </li>
+                        <li>
+                            <h2>PASSWORD</h2>
+                            <div className="input_st st2">
+                                <i className="diveicon di-key" />
+                                <input
+                                    type="password"
+                                    className="input_style"
+                                    maxLength={25}
+                                    title="비밀번호를 입력하세요."
+                                    id="password"
+                                    name="password"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                    <div className="bottom_box fx">
+                        <div className="checks fx">
+                            <input
+                                type="checkbox"
+                                name="checkId"
+                                title="로그인ID 저장여부"
+                                id="checkId"
+                            />
+                            <label htmlFor="checkId">아이디저장</label>
+                        </div>
+                        {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+                    </div>
+                    {errorMessage && (
+                        <div className="error_message">
+                            <span>{errorMessage}</span>
+                        </div>
+                    )}
+                    <button type="submit" className="login_btn fx">
+                        <span>LOGIN</span>
+                    </button>
+                    <div className="footer">
+                        <div className="copy fx">
+                            <p>copyright © 2023 KECO. All rights reserved.</p>
+                        </div>
+                        <div className="fot_btn fx">
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                                target="_blank"
+                            >
+                                개인정보처리방침
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                                target="_blank"
+                            >
+                                저작권정책안내
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                                target="_blank"
+                            >
+                                이메일무단수집거부
+                            </a>
+                        </div>
+                        <p className="addr fx">
+                            <span>
+                                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                                종합환경연구단지)
+                            </span>
+                            <span>
+                                전화 : (시스템) 032-590-4321, 3752, 4314 / (통
+                                계) 032-590-3723, 3722
+                            </span>
+                            <span>팩스 :032-590-3729</span>
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+export { LoginPage };
diff --git a/apps/wr/src/features/auth/login/ui/login.css b/apps/sn/src/auth/login/ui/login.css
similarity index 94%
rename from apps/wr/src/features/auth/login/ui/login.css
rename to apps/sn/src/auth/login/ui/login.css
index af73c9c68..e65180ae7 100644
--- a/apps/wr/src/features/auth/login/ui/login.css
+++ b/apps/sn/src/auth/login/ui/login.css
@@ -1,4 +1,4 @@
-/**
+/**
 * OLYM Cascading Style Sheets
 * File Name : login.css
 * Description : 로그인 스타일시트
@@ -24,7 +24,8 @@ body {
 }
 .login .left_box {
   width: 100%;
-  background: url(/images/bg_login.jpg) no-repeat center/cover;
+  background: url(../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
   flex-direction: column;
   justify-content: space-between;
   padding: 7% 5% 5% 5%;
@@ -117,6 +118,20 @@ body {
   color: #327af5;
   font-size: 20px;
 }
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
 .login .login_box .login_btn {
   position: relative;
   border-radius: 5px;
diff --git a/apps/sn/src/entities/auth/api/auth-service.ts b/apps/sn/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..93b158ef9
--- /dev/null
+++ b/apps/sn/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,115 @@
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/shared/config";
+import { getCookie } from "@/shared/lib";
+import {
+    type AuthPayload,
+    type AuthService,
+    getRemainingMs,
+} from "@common/auth";
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
+import {
+    clearRefreshTimer,
+    setToken,
+    setupRefreshTimer,
+    tokenManager,
+} from "../lib/token-manager";
+
+import { clearTabStorePersist } from "../../../store/tab-store";
+
+async function login(payload: AuthPayload): Promise<void> {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "X-Device-Id": getOrCreateDeviceId(),
+        },
+        body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+        throw new Error("인증 토큰을 받지 못했습니다.");
+    }
+
+    const prevTokenId = getCookie(AUTH_USER_ID);
+    if (prevTokenId !== undefined && prevTokenId !== tokenId) {
+        clearTabStorePersist();
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+        setupRefreshTimer(silentRefresh, remainingMs);
+    }
+}
+
+async function silentRefresh(): Promise<void> {
+    console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+    try {
+        const response = await fetch(
+            `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+            {
+                method: "PUT",
+                headers: {
+                    "X-Device-Id": getOrCreateDeviceId(),
+                },
+            },
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+        }
+
+        const accessToken = data[ACCESS_TOKEN];
+        const tokenId = data[AUTH_USER_ID];
+
+        if (!accessToken || !tokenId) {
+            throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+        }
+
+        setToken(CLAIM_NAME, accessToken);
+        setToken(AUTH_USER_ID, tokenId);
+
+        const remainingMs = getRemainingMs(accessToken);
+        if (remainingMs > 0) {
+            setupRefreshTimer(silentRefresh, remainingMs);
+        }
+    } catch (error) {
+        console.error(
+            `[silentRefresh] Failed at ${new Date().toISOString()}`,
+            error,
+        );
+        tokenManager.clearAuthToken();
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("auth:logout"));
+        }
+    }
+}
+
+export async function logout(): Promise<void> {
+    tokenManager.clearAuthToken();
+    clearDeviceId();
+
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+}
+
+export const authService: AuthService = {
+    login,
+    silentRefresh,
+    declineSessionExtend: clearRefreshTimer,
+    logout,
+};
diff --git a/apps/sn/src/entities/auth/api/login-service.ts b/apps/sn/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 4d7a7cd8d..000000000
--- a/apps/sn/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { AxiosError } from "axios";
-import {
-  ENDPOINT,
-  JWT_EXPIRATION_TIME,
-  ACCESS_TOKEN,
-  AUTH_USER_ID,
-  CLAIM_NAME,
-  SITE_ID,
-} from "@/shared/config";
-import type { LoginService, ILogin } from "../model/login-interface";
-import { tokenManager } from "../lib/token-manager";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      tokenManager.clearAuthToken();
-      const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "X-Site-Id": SITE_ID,
-        },
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setupRefreshTimer(
-        () => this.silentRefresh(),
-        JWT_EXPIRATION_TIME,
-      );
-    } catch (error) {
-      if (error instanceof AxiosError) {
-        throw new Error(`Login failed: ${error.response?.data?.message}`);
-      }
-      throw new Error(`Login failed: ${error}`);
-    }
-  }
-
-  public async silentRefresh(): Promise<void> {
-    try {
-      const response = await fetch(
-        `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        {
-          method: "PUT",
-          headers: {
-            "X-Site-Id": SITE_ID,
-          },
-        },
-      );
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      if (error instanceof AxiosError) {
-        throw new Error(
-          `Silent refresh failed: ${error.response?.data?.message}`,
-        );
-      }
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/sn/src/entities/auth/index.ts b/apps/sn/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/sn/src/entities/auth/index.ts
+++ b/apps/sn/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/sn/src/entities/auth/lib/auth-wrapper.tsx b/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
index f37ff4041..534e1c776 100644
--- a/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,71 +1,88 @@
 "use client";
 
 import { useEffect } from "react";
-import { usePathname } from "next/navigation";
-import { client } from "@/shared/api";
-import type { IUserInfo } from "@/shared/store";
-import { useUserStore } from "@/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { isAtLoginRedirectUrl } from "@common/network";
-import { getCookie } from "@/shared/lib";
-import { tokenManager } from "./token-manager";
+import { useRouter } from "next/navigation";
 
-const LOGIN_PAGE_URL =
-  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+import { isAxiosError } from "axios";
+
+import { client } from "@/shared/api";
+import {
+    AUTH_LOGIN_REDIRECT_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/shared/config";
+import { useUserStore } from "@/shared/lib";
+import type { IUserInfo } from "@/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const pathname = usePathname();
-  const { userInfo, setUserInfo } = useUserStore((state) => state);
+    const router = useRouter();
+    const userInfo = useUserStore((state) => state.userInfo);
+    const setUserInfo = useUserStore((state) => state.setUserInfo);
 
-  async function authCheck() {
-    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-      return;
-    }
+    useEffect(() => {
+        // 페이지 새로고침 시 silentRefresh 타이머 복구
+        const token = getToken(CLAIM_NAME);
+        if (token) {
+            const remainingMs = getRemainingMs(token);
+            if (remainingMs > 0) {
+                console.log(
+                    `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+                );
+                setupRefreshTimer(authService.silentRefresh, remainingMs);
+            }
+        }
 
-    const userId = getCookie(AUTH_USER_ID);
-    if (!userId) {
-      throw new Error("Missing required authentication tokens");
-    }
+        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
 
-    const response = await client.get<IUserInfo>(
-      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-    );
-    if (!userInfo) setUserInfo(response.data);
-  }
+        async function authCheck() {
+            const userId = getToken(AUTH_USER_ID);
+            if (!userId) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+                return;
+            }
 
-  useEffect(() => {
-    (async () => {
-      try {
-        await authCheck();
-      } catch (error) {
-        console.error(error);
-        
-        setUserInfo(null);
+            if (userInfo) return;
 
-        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) return;
+            const response = await client.get<IUserInfo>(
+                `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+            );
+            setUserInfo(response.data);
+        }
 
-        // const hostname = window.location.hostname;
+        authCheck().catch((error) => {
+            // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+            if (isAxiosError(error) && error.response?.status === 401) return;
 
-        // // 개발 환경에서는 localhost 도메인 사용
-        // if (
-        //   hostname === "localhost" ||
-        //   hostname === "127.0.0.1" ||
-        //   hostname === "con.mind-one.co.kr"
-        // )
-        //   window.location.href = "/";
+            console.error(error);
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        });
+    }, []);
 
-        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-        // if (hostname.includes("hasuon.or.kr"))
-        //   window.location.href = LOGIN_PAGE_URL; // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+    // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+    useEffect(() => {
+        function handleAuthLogout() {
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        }
 
-        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
-        window.location.assign(LOGIN_PAGE_URL);
-      }
-    })();
-  }, [pathname]);
+        window.addEventListener("auth:logout", handleAuthLogout);
+        return () =>
+            window.removeEventListener("auth:logout", handleAuthLogout);
+    }, []);
 
-  return <>{children}</>;
+    return <>{children}</>;
 };
 
 export { AuthWrapper };
diff --git a/apps/sn/src/entities/auth/lib/device-id.ts b/apps/sn/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..f844fcbef
--- /dev/null
+++ b/apps/sn/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+    if (typeof window === "undefined") return "";
+
+    const existing = localStorage.getItem(DEVICE_ID_KEY);
+    if (existing) return existing;
+
+    const id = uuidv4();
+    localStorage.setItem(DEVICE_ID_KEY, id);
+    return id;
+}
+
+export function clearDeviceId(): void {
+    if (typeof window === "undefined") return;
+
+    localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/apps/sn/src/entities/auth/lib/token-manager.ts b/apps/sn/src/entities/auth/lib/token-manager.ts
index 5b24c8bd3..83affbcaf 100644
--- a/apps/sn/src/entities/auth/lib/token-manager.ts
+++ b/apps/sn/src/entities/auth/lib/token-manager.ts
@@ -1,127 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
-import { getCookie, setCookie, removeCookie } from "@/shared/lib";;
+import { authConfig } from "@/shared/config/auth";
+import { createTokenManager } from "@common/auth";
 
-type JwtPayload = {
-  sub?: string;
-  exp?: number;
-  iat?: number;
-  [key: string]: unknown;
-};
+export const tokenManager = createTokenManager(authConfig);
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() { }
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  private parseJwt(token: string): JwtPayload {
-    const parts = token.split(".");
-    if (parts.length !== 3) {
-      throw new Error("유효한 JWT 형식이 아닙니다.");
-    }
-
-    const base64Url = parts[1] ?? "";
-    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
-    const jsonPayload = decodeURIComponent(
-      atob(padded)
-        .split("")
-        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
-        .join("")
-    );
-
-    return JSON.parse(jsonPayload) as JwtPayload;
-  }
-
-  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
-    const token = this.getToken(key);
-    if (!token) {
-      return null;
-    }
-
-    try {
-      const payload = this.parseJwt(token);
-      if (typeof payload.exp !== "number") {
-        return null;
-      }
-
-      return payload.exp * 1000 - Date.now();
-    } catch (error) {
-      console.error("JWT 파싱 오류:", error);
-      return null;
-    }
-  }
-
-  public isExpiredToken(key: string = CLAIM_NAME): boolean {
-    const remainingMs = this.getRemainingMsFromToken(key);
-    return remainingMs === null || remainingMs <= 0;
-  }
-
-  public setToken(key: string, value: string): void {
-    // 환경에 따른 도메인 설정
-    //const domain = this.getCookieDomain();
-
-    setCookie(key, value, {
-      secure: window.location.protocol === "https:",
-      sameSite: "lax",
-      //domain: domain,
-      path: "/",
-    });
-  }
-
-  private getCookieDomain(): string | undefined {
-    const hostname = window.location.hostname;
-
-    // 개발 환경에서는 localhost 도메인 사용
-    if (hostname === "localhost" || hostname === "127.0.0.1") return undefined; // localhost에서는 도메인 설정하지 않음
-
-    // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-    if (hostname.includes("hasuon.or.kr")) return ".hasuon.or.kr"; // 모든 서브도메인에서 공유
-
-    // 기타 환경에서는 현재 호스트명 사용
-    return hostname;
-  }
-
-  public removeToken(key: string): void {
-    removeCookie(key);
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+    getToken,
+    setToken,
+    removeToken,
+    setupRefreshTimer,
+    clearRefreshTimer,
+    getAccessToken,
+    getRefreshToken,
+    getUserId,
+} = tokenManager;
diff --git a/apps/sn/src/entities/menu-authority/index.ts b/apps/sn/src/entities/menu-authority/index.ts
index 2a555b77e..d5991d01c 100644
--- a/apps/sn/src/entities/menu-authority/index.ts
+++ b/apps/sn/src/entities/menu-authority/index.ts
@@ -1,2 +1,9 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export {
+    menuAuthorityFormSchema,
+    type MenuAuthority,
+    type MenuAuthorityPayload,
+    type MenuAuthorityFormData,
+} from "./model/menu-authority-interface";
 export { AuthorityButton } from "./ui/authority-button";
 export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/sn/src/entities/menu/api/menu-service.ts b/apps/sn/src/entities/menu/api/menu-service.ts
index 4424f8d37..02a2d1718 100644
--- a/apps/sn/src/entities/menu/api/menu-service.ts
+++ b/apps/sn/src/entities/menu/api/menu-service.ts
@@ -11,4 +11,4 @@ export class MenuApiService implements MenuService {
   }
 }
 
-export const MenuApi = new MenuApiService();
+export const MenuApi = new MenuApiService();
\ No newline at end of file
diff --git a/apps/sn/src/entities/menu/index.ts b/apps/sn/src/entities/menu/index.ts
index 04f63e38b..2bd1b1787 100644
--- a/apps/sn/src/entities/menu/index.ts
+++ b/apps/sn/src/entities/menu/index.ts
@@ -1,2 +1,3 @@
+export { MenuApi } from "./api/menu-service";
+export type { MenuItem, MenuService } from "./model/menu-interface";
 export { MenuWrapper } from "./lib/menu-wrapper";
-export type { MenuItem } from "./model/menu-interface";
diff --git a/apps/sn/src/entities/user/api/user-service.ts b/apps/sn/src/entities/user/api/user-service.ts
new file mode 100644
index 000000000..482d51e16
--- /dev/null
+++ b/apps/sn/src/entities/user/api/user-service.ts
@@ -0,0 +1,225 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  UserService,
+  UserSearchParams,
+  UserList,
+  UserDetailResponse,
+  UserSttsStatsList,
+  UserUpdateData,
+  UserPasswordUpdateData,
+  UserFindPasswordUpdateData,
+  UserPasswordMatchData,
+  UserUpdateInfoData,
+  UserSaveData,
+  UserFindPasswordSaveData,
+  UserVerifyData,
+  UserEmailData,
+  UserIdData,
+  AdminUserList,
+} from "../model/user-interface";
+
+export class UserApiService implements UserService {
+  // 사용자 목록 조회
+  public async findPageUser(params: UserSearchParams): Promise<UserList> {
+    const response = await client.get<UserList>(
+      `${ENDPOINT.USER_SERVICE.USERS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  // 사용자 단건 조회
+  public async findByUserUnqId(userUnqId: string): Promise<UserDetailResponse> {
+    const response = await client.get<UserDetailResponse>(
+      `${ENDPOINT.USER_SERVICE.USERS}/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 로그인한 사용자 정보 조회
+  public async findByUserUnqIdByLogin(): Promise<UserDetailResponse> {
+    const response = await client.get<UserDetailResponse>(
+      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+    );
+    return response.data;
+  }
+
+  // 사용자 회원상태 통계 조회
+  public async selectUserSttsStats(): Promise<UserSttsStatsList> {
+    const response = await client.get<UserSttsStatsList>(
+      `${ENDPOINT.USER_SERVICE.USERS}/stts/stats`,
+    );
+    return response.data;
+  }
+
+  // 사용자 저장
+  public async saveUser(data: UserSaveData): Promise<string> {
+    const response = await client.post<string>(
+      `${ENDPOINT.USER_SERVICE.USERS}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 수정
+  public async updateUser(
+    userUnqId: string,
+    data: UserUpdateData,
+  ): Promise<string> {
+    const response = await client.put<string>(
+      `${ENDPOINT.USER_SERVICE.USERS}/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 삭제
+  public async deleteUser(userUnqId: string): Promise<boolean> {
+    const response = await client.delete<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/delete/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 계정잠금 처리
+  public async lockUser(userUnqId: string): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/lock/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 계정잠금 해제처리
+  public async unlockUser(userUnqId: string): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/unlock/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 리프레시 토큰 정보 재발급
+  public async refreshToken(): Promise<void> {
+    await client.put(`${ENDPOINT.USER_SERVICE.USERS}/token/refresh`);
+  }
+
+  // 사용자 비밀번호 변경
+  public async updatePassword(data: UserPasswordUpdateData): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/update`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 초기화(관리자용)
+  public async initializePassword(
+    userUnqId: string,
+    data: UserPasswordUpdateData,
+  ): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/initialize/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 찾기 변경
+  public async changePassword(
+    data: UserFindPasswordUpdateData,
+  ): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/change`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 확인
+  public async matchPassword(data: UserPasswordMatchData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/match`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 찾기
+  public async findPasswordUser(
+    data: UserFindPasswordSaveData,
+  ): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/find`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 찾기 유효성 확인
+  public async validPassword(token: string): Promise<boolean> {
+    const response = await client.get<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/valid/${token}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 회원정보 변경
+  public async updateInfo(
+    userUnqId: string,
+    data: UserUpdateInfoData,
+  ): Promise<string> {
+    const response = await client.put<string>(
+      `${ENDPOINT.USER_SERVICE.USERS}/info/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 승인처리
+  public async applyUser(userUnqId: string): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/apply/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 회원탈퇴
+  public async leaveUser(data: UserVerifyData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/leave`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 이메일 중복 체크
+  public async existsEmail(data: UserEmailData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/exists`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 아이디 중복 체크
+  public async existsUserId(data: UserIdData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/existsUserId`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 관리자 목록 조회
+  public async findPageAdminUser(
+    params: UserSearchParams,
+  ): Promise<AdminUserList> {
+    const response = await client.get<AdminUserList>(
+      `${ENDPOINT.USER_SERVICE.USERS}/admin/list`,
+      { params },
+    );
+    return response.data;
+  }
+}
+
+export const UserApi = new UserApiService();
diff --git a/apps/sn/src/entities/user/index.ts b/apps/sn/src/entities/user/index.ts
new file mode 100644
index 000000000..8927256f9
--- /dev/null
+++ b/apps/sn/src/entities/user/index.ts
@@ -0,0 +1,17 @@
+export { UserApi } from "./api/user-service";
+export {
+  USER_STATE_CODE,
+  userSaveSchema,
+  userPasswordUpdateSchema,
+  userUpdateSchema,
+  type UserStateCode,
+  type UserSearchParams,
+  type UserListResponse,
+  type UserSaveData,
+  type UserDetailResponse,
+  type UserPasswordUpdateData,
+  type UserUpdateData,
+  type AdminUserList,
+  type AdminUserListResponse,
+} from "./model/user-interface";
+export { PasswordResetDialog } from "./ui/password-reset-dialog";
diff --git a/apps/sn/src/entities/user/model/user-interface.ts b/apps/sn/src/entities/user/model/user-interface.ts
new file mode 100644
index 000000000..012fe9e92
--- /dev/null
+++ b/apps/sn/src/entities/user/model/user-interface.ts
@@ -0,0 +1,362 @@
+import { z } from "zod";
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export const USER_STATE_CODE = {
+  대기: "00",
+  정상: "01",
+  정지: "07",
+  탈퇴: "08",
+  삭제: "09",
+} as const;
+
+export type UserStateCode =
+  (typeof USER_STATE_CODE)[keyof typeof USER_STATE_CODE];
+
+// 사용자 검색 파라미터
+export interface UserSearchParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+  userStateCode?: string;
+  aprvYn?: string;
+  grpId?: string;
+  frDateYmd?: string;
+  toDateYmd?: string;
+  userName?: string;
+}
+
+// 사용자 목록 응답 인터페이스
+export interface UserListResponse {
+  userId: string;
+  userName: string;
+  email: string;
+  roleId: string;
+  roleName: string;
+  userStateCode: UserStateCode;
+  userStateCodeName: string;
+  lastLoginDate: string;
+  loginFailCount: number;
+  userUnqId: string;
+  mphn: string;
+  telno: string;
+  aprvYn: string;
+  regDt: string;
+  laeSeCd: string;
+  laeSeNm: string;
+  ogdpSeCd: string;
+  ogdpSeNm: string;
+  instSeCd: string;
+  instSeNm: string;
+  aprvYmd: string;
+}
+
+// 사용자 상세 응답 인터페이스
+export interface UserDetailResponse {
+  regDt: string;
+  mdfcnDt: string;
+  rgtr: string;
+  mdfr: string;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  email: string;
+  encryptedPassword: string;
+  refreshToken: string;
+  userStateCode: UserStateCode;
+  lastLoginDate: string;
+  loginFailCount: number;
+  pswdHnt: string;
+  pswdAns: string;
+  mphn: string;
+  telno: string;
+  zip: string;
+  addr: string;
+  daddr: string;
+  laeSeCd: string;
+  ogdpSeCd: string;
+  aprvYn: string;
+  autzrId: string;
+  expryYmd: string;
+  lastPswdChgDt: string;
+  googleId: string;
+  kakaoId: string;
+  naverId: string;
+  isSocialUser: boolean;
+  hasPassword: boolean;
+  twoFactorEnabled: boolean;
+  adminRoleYn: string;
+  instSeCd: string;
+  aprvYmd: string;
+  enoCd: string;
+  dtlInstCd: string;
+  laeSeNm: string;
+  ogdpSeNm: string;
+  instSeNm: string;
+  userStateNm: string;
+  pswdHntNm: string;
+  ecoNm: string;
+  dtlInstNm: string;
+}
+
+// 사용자 상태 통계 응답 인터페이스
+export interface UserSttsStatsResponse {
+  sttsCd: string;
+  sttsNm: string;
+  cnt: number;
+}
+
+// 관리자 목록 응답 인터페이스
+export interface AdminUserListResponse {
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  groupId: string;
+  groupNm: string;
+  userStateCode: string;
+  userStateCodeName: string;
+  laeSeCd: string;
+  laeSeNm: string;
+  ogdpSeCd: string;
+  ogdpSeNm: string;
+  instSeCd: string;
+  instSeNm: string;
+  dtlInstCd: string;
+  dtlInstNm: string;
+  mdfr: string;
+  mdfrNm: string;
+  mdfcnDt: string;
+}
+
+// 사용자 수정 요청 스키마
+export const userUpdateSchema = z.object({
+  userId: z.string().optional(),
+  userName: z.string(),
+  email: z.string().email().optional(),
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    )
+    .optional(),
+  roleId: z.string().optional(),
+  userStateCode: z.string(),
+  pswdHnt: z.string().max(10),
+  pswdAns: z.string().max(100).optional(),
+  mphn: z.string().max(11).optional(),
+  telno: z.string().max(11).optional(),
+  zip: z.string().max(5).optional(),
+  addr: z.string().max(200).optional(),
+  daddr: z.string().max(200).optional(),
+  laeSeCd: z.string().max(10),
+  ogdpSeCd: z.string().max(10),
+  aprvYn: z.string(),
+  autzrId: z.string().uuid().optional(),
+  expryYmd: z.string().max(8),
+  instSeCd: z.string().optional(),
+  dtlInstCd: z.string().optional(),
+  aprvYmd: z.string().max(8).optional(),
+  enoCd: z.string().optional(),
+});
+
+// 사용자 비밀번호 변경 스키마
+export const userPasswordUpdateSchema = z
+  .object({
+    password: z.string().optional(),
+    provider: z.string().optional(),
+    token: z.string().optional(),
+    newPassword: z
+      .string()
+      .regex(
+        /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+        "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+      ),
+    newPasswordConfirm: z.string(),
+  })
+  .refine((data) => data.newPassword === data.newPasswordConfirm, {
+    message: "비밀번호가 일치하지 않습니다.",
+    path: ["newPasswordConfirm"],
+  });
+
+// 사용자 비밀번호 찾기 변경 스키마
+export const userFindPasswordUpdateSchema = z.object({
+  tokenValue: z.string(),
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    ),
+});
+
+// 사용자 비밀번호 확인 스키마
+export const userPasswordMatchSchema = z.object({
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    ),
+});
+
+// 사용자 회원정보 변경 스키마
+export const userUpdateInfoSchema = z.object({
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    )
+    .optional(),
+  provider: z.string().optional(),
+  token: z.string().optional(),
+  userName: z.string(),
+  email: z.string().email().optional(),
+});
+
+// 사용자 저장 스키마
+export const userSaveSchema = z.object({
+  userId: z.string(),
+  userName: z.string(),
+  email: z.string().email().optional(),
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    ),
+  pswdHnt: z.string().max(10),
+  pswdAns: z.string().max(100).optional(),
+  mphn: z.string().max(11).optional(),
+  telno: z.string().max(11).optional(),
+  zip: z.string().max(5).optional(),
+  addr: z.string().max(200).optional(),
+  daddr: z.string().max(200).optional(),
+  laeSeCd: z.string().max(10),
+  ogdpSeCd: z.string().max(10),
+  expryYmd: z.string().max(8),
+  instSeCd: z.string().optional(),
+  dtlInstCd: z.string().optional(),
+  enoCd: z.string().optional(),
+});
+
+// 사용자 비밀번호 찾기 저장 스키마
+export const userFindPasswordSaveSchema = z.object({
+  userName: z.string(),
+  emailAddr: z.string().email(),
+  mainUrl: z.string(),
+  changePasswordUrl: z.string(),
+});
+
+// 사용자 인증 요청 스키마
+export const userVerifySchema = z.object({
+  password: z
+    .string()
+    .regex(/((?=.*[0-9])(?=.*[a-zA-Z])(?=.*\W)(?=\S+$).{8,20})|()/)
+    .optional(),
+  provider: z.string().optional(),
+  token: z.string().optional(),
+});
+
+// 사용자 이메일 요청 스키마
+export const userEmailSchema = z.object({
+  userId: z.string().optional(),
+  email: z.string().email(),
+});
+
+// 사용자 ID 요청 스키마
+export const userIdSchema = z.object({
+  userId: z.string(),
+});
+
+// Zod 스키마 타입 정의
+export type UserUpdateData = z.infer<typeof userUpdateSchema>;
+export type UserPasswordUpdateData = z.infer<typeof userPasswordUpdateSchema>;
+export type UserFindPasswordUpdateData = z.infer<
+  typeof userFindPasswordUpdateSchema
+>;
+export type UserPasswordMatchData = z.infer<typeof userPasswordMatchSchema>;
+export type UserUpdateInfoData = z.infer<typeof userUpdateInfoSchema>;
+export type UserSaveData = z.infer<typeof userSaveSchema>;
+export type UserFindPasswordSaveData = z.infer<
+  typeof userFindPasswordSaveSchema
+>;
+export type UserVerifyData = z.infer<typeof userVerifySchema>;
+export type UserEmailData = z.infer<typeof userEmailSchema>;
+export type UserIdData = z.infer<typeof userIdSchema>;
+
+// 페이지네이션 타입 정의
+export type UserList = PageableList<UserListResponse>;
+export type UserSttsStatsList = UserSttsStatsResponse[];
+export type AdminUserList = PageableList<AdminUserListResponse>;
+
+// 사용자 서비스 인터페이스
+export interface UserService {
+  // 사용자 목록 조회
+  findPageUser: (params: UserSearchParams) => Promise<UserList>;
+
+  // 사용자 단건 조회
+  findByUserUnqId: (userUnqId: string) => Promise<UserDetailResponse>;
+
+  // 로그인한 사용자 정보 조회
+  findByUserUnqIdByLogin: () => Promise<UserDetailResponse>;
+
+  // 사용자 회원상태 통계 조회
+  selectUserSttsStats: () => Promise<UserSttsStatsList>;
+
+  // 사용자 저장
+  saveUser: (data: UserSaveData) => Promise<string>;
+
+  // 사용자 수정
+  updateUser: (userUnqId: string, data: UserUpdateData) => Promise<string>;
+
+  // 사용자 삭제
+  deleteUser: (userUnqId: string) => Promise<boolean>;
+
+  // 사용자 계정잠금 처리
+  lockUser: (userUnqId: string) => Promise<boolean>;
+
+  // 사용자 계정잠금 해제처리
+  unlockUser: (userUnqId: string) => Promise<boolean>;
+
+  // 리프레시 토큰 정보 재발급
+  refreshToken: () => Promise<void>;
+
+  // 사용자 비밀번호 변경
+  updatePassword: (data: UserPasswordUpdateData) => Promise<boolean>;
+
+  // 사용자 비밀번호 초기화(관리자용)
+  initializePassword: (
+    userUnqId: string,
+    data: UserPasswordUpdateData,
+  ) => Promise<boolean>;
+
+  // 사용자 비밀번호 찾기 변경
+  changePassword: (data: UserFindPasswordUpdateData) => Promise<boolean>;
+
+  // 사용자 비밀번호 확인
+  matchPassword: (data: UserPasswordMatchData) => Promise<boolean>;
+
+  // 사용자 비밀번호 찾기
+  findPasswordUser: (data: UserFindPasswordSaveData) => Promise<boolean>;
+
+  // 사용자 비밀번호 찾기 유효성 확인
+  validPassword: (token: string) => Promise<boolean>;
+
+  // 사용자 회원정보 변경
+  updateInfo: (userUnqId: string, data: UserUpdateInfoData) => Promise<string>;
+
+  // 사용자 승인처리
+  applyUser: (userUnqId: string) => Promise<boolean>;
+
+  // 사용자 회원탈퇴
+  leaveUser: (data: UserVerifyData) => Promise<boolean>;
+
+  // 사용자 이메일 중복 체크
+  existsEmail: (data: UserEmailData) => Promise<boolean>;
+
+  // 사용자 아이디 중복 체크
+  existsUserId: (data: UserIdData) => Promise<boolean>;
+
+  // 관리자 목록 조회
+  findPageAdminUser: (params: UserSearchParams) => Promise<AdminUserList>;
+}
diff --git a/apps/sn/src/entities/user/ui/password-reset-dialog.tsx b/apps/sn/src/entities/user/ui/password-reset-dialog.tsx
new file mode 100644
index 000000000..548e8fa1a
--- /dev/null
+++ b/apps/sn/src/entities/user/ui/password-reset-dialog.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+  Button,
+  Input,
+  DialogTrigger,
+} from "@common/components";
+import {
+  UserApi,
+  userPasswordUpdateSchema,
+  type UserPasswordUpdateData,
+} from "@/entities/user";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/ui/form";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+
+interface PasswordResetDialogProps {
+  userUnqId: string;
+  children: ReactNode;
+}
+
+export function PasswordResetDialog({
+  userUnqId,
+  children,
+}: PasswordResetDialogProps) {
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<UserPasswordUpdateData>({
+    resolver: zodResolver(userPasswordUpdateSchema),
+    defaultValues: {
+      newPassword: "",
+      newPasswordConfirm: "",
+      provider: "password",
+    },
+  });
+
+  const { mutate: onPasswordReset } = useMutationWrapper({
+    mutationFn: (data: UserPasswordUpdateData) =>
+      UserApi.initializePassword(userUnqId, data),
+    onSuccess: () => {
+      alert("비밀번호가 초기화되었습니다.", () => {
+        setOpen(false);
+        form.reset();
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>비밀번호 초기화</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((data) => onPasswordReset(data))}
+            className="space-y-6"
+          >
+            <FormField
+              control={form.control}
+              name="newPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>새 비밀번호</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      type="password"
+                      className="!text-[1.3rem]"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="newPasswordConfirm"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>새 비밀번호 확인</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      type="password"
+                      className="!text-[1.3rem]"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" className="white">
+                  취소
+                </Button>
+              </DialogClose>
+              <Button type="submit">확인</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/sn/src/features/auth/login/ui/login-page.tsx b/apps/sn/src/features/auth/login/ui/login-page.tsx
deleted file mode 100644
index dea3c90f1..000000000
--- a/apps/sn/src/features/auth/login/ui/login-page.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useEffect } from "react";
-import { images } from "@common/assets";
-import { LoginApi } from "@/entities/auth";
-import "./login.css";
-
-function LoginPage() {
-  useEffect(() => {
-    const hostname = window.location.hostname;
-    if (hostname.includes("hasuon.or.kr")) {
-      window.location.href =
-        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
-    }
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target as HTMLFormElement);
-    const userId = formData.get("id") as string;
-    const password = formData.get("password") as string;
-
-    await LoginApi.login({ userId, password });
-    window.location.href = "/map";
-  };
-
-  return (
-    <div className="login fx">
-      <div className="left_box fx">
-        <div className="text">
-          <h1>
-            하수도정보시스템
-            <br />
-            <span>CMS 통합관리시스템</span>
-          </h1>
-          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
-        </div>
-        <div className="img">
-          <Image src={images.logo} width={229} height={46} alt="logo" />
-        </div>
-      </div>
-      <form
-        id="loginForm"
-        name="loginForm"
-        method="post"
-        onSubmit={handleSubmit}
-      >
-        <div className="login_box fx">
-          <ul className="fx">
-            <li>
-              <h2>ID</h2>
-              <div className="input_st st1">
-                <i className="diveicon di-account-box" />
-                <input
-                  type="text"
-                  className="id"
-                  title="아이디를 입력하세요."
-                  id="id"
-                  name="id"
-                  maxLength={12}
-                />
-              </div>
-            </li>
-            <li>
-              <h2>PASSWORD</h2>
-              <div className="input_st st2">
-                <i className="diveicon di-key" />
-                <input
-                  type="password"
-                  className="input_style"
-                  maxLength={25}
-                  title="비밀번호를 입력하세요."
-                  id="password"
-                  name="password"
-                />
-              </div>
-            </li>
-          </ul>
-          <div className="bottom_box fx">
-            <div className="checks fx">
-              <input
-                type="checkbox"
-                name="checkId"
-                title="로그인ID 저장여부"
-                id="checkId"
-              />
-              <label htmlFor="checkId">아이디저장</label>
-            </div>
-            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
-          </div>
-          <button type="submit" className="login_btn fx">
-            <span>LOGIN</span>
-          </button>
-          <div className="footer">
-            <div className="copy fx">
-              <p>copyright © 2023 KECO. All rights reserved.</p>
-            </div>
-            <div className="fot_btn fx">
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
-                target="_blank"
-              >
-                개인정보처리방침
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
-                target="_blank"
-              >
-                저작권정책안내
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
-                target="_blank"
-              >
-                이메일무단수집거부
-              </a>
-            </div>
-            <p className="addr fx">
-              <span>
-                주소 : (22689) 인천광역시 서구 환경로 42(경서동
-                종합환경연구단지)
-              </span>
-              <span>
-                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                3722
-              </span>
-              <span>팩스 :032-590-3729</span>
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export { LoginPage };
-
diff --git a/apps/sn/src/features/windowPopup/lib/openWindowPopup.ts b/apps/sn/src/features/windowPopup/lib/openWindowPopup.ts
index dbb90794a..892d065d4 100644
--- a/apps/sn/src/features/windowPopup/lib/openWindowPopup.ts
+++ b/apps/sn/src/features/windowPopup/lib/openWindowPopup.ts
@@ -3,7 +3,7 @@ import {
   windowPopupDefinitions,
   type WindowPopupKey,
 } from "../model/popupDefinitions";
-import type { OpenWindowPopupParams } from "../model/types";
+import type { OpenWindowPopupParams, WindowPopupDefinition } from "../model/types";
 
 const buildQueryString = (params: OpenWindowPopupParams = {}) => {
   const searchParams = new URLSearchParams();
@@ -17,17 +17,59 @@ const buildQueryString = (params: OpenWindowPopupParams = {}) => {
   return queryString ? `?${queryString}` : "";
 };
 
-const buildPopupFeatures = (width: number, height: number) => {
+const clamp = (value: number, min: number, max: number) => {
+  if (max < min) return min;
+  return Math.min(Math.max(value, min), max);
+};
+
+const buildPopupFeatures = ({
+  width,
+  height,
+  placement = "center",
+  alignTop = false,
+  offsetLeft = 0,
+  offsetTop = 0,
+}: Pick<
+  WindowPopupDefinition,
+  "width" | "height" | "placement" | "alignTop" | "offsetLeft" | "offsetTop"
+>) => {
   const screenLeft = window.screenX ?? window.screenLeft ?? 0;
   const screenTop = window.screenY ?? window.screenTop ?? 0;
   const outerWidth = window.outerWidth || window.screen.width;
   const outerHeight = window.outerHeight || window.screen.height;
-  const left = Math.max(0, screenLeft + Math.round((outerWidth - width) / 2));
-  const top = Math.max(0, screenTop + Math.round((outerHeight - height) / 2));
+  const screen = window.screen as Screen & {
+    availLeft?: number;
+    availTop?: number;
+  };
+  const availableLeft = screen.availLeft ?? 0;
+  const availableTop = screen.availTop ?? 0;
+  const availableWidth = window.screen.availWidth || outerWidth;
+  const availableHeight = window.screen.availHeight || outerHeight;
+  const safeWidth = Math.min(width, Math.max(360, availableWidth - 48));
+  const safeHeight = Math.min(height, Math.max(420, availableHeight - 72));
+  const minLeft = availableLeft;
+  const minTop = availableTop + 24;
+  const maxLeft = availableLeft + availableWidth - safeWidth - 16;
+  const maxTop = availableTop + availableHeight - safeHeight - 24;
+  const left =
+    placement === "browser-left"
+      ? clamp(screenLeft + offsetLeft, minLeft, maxLeft)
+      : clamp(
+          screenLeft + Math.round((outerWidth - safeWidth) / 2) + offsetLeft,
+          availableLeft + 16,
+          maxLeft,
+        );
+  const top = clamp(
+    alignTop
+      ? screenTop + 24 + offsetTop
+      : screenTop + Math.round((outerHeight - safeHeight) / 2) + offsetTop,
+    minTop,
+    maxTop,
+  );
 
   return [
-    `width=${width}`,
-    `height=${height}`,
+    `width=${safeWidth}`,
+    `height=${safeHeight}`,
     `left=${left}`,
     `top=${top}`,
     "resizable=yes",
@@ -48,7 +90,7 @@ export const openWindowPopup = (
 
   const definition = windowPopupDefinitions[popupKey];
   const popupUrl = `/popup/${popupKey}${buildQueryString(params)}`;
-  const popupFeatures = buildPopupFeatures(definition.width, definition.height);
+  const popupFeatures = buildPopupFeatures(definition);
   const popupWindow = window.open(
     popupUrl,
     `sn-popup-${popupKey}`,
diff --git a/apps/sn/src/features/windowPopup/model/popupDefinitions.ts b/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
index fe2ee66ba..744ccfe8a 100644
--- a/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
+++ b/apps/sn/src/features/windowPopup/model/popupDefinitions.ts
@@ -46,18 +46,38 @@ export const windowPopupDefinitions = {
     width: 1280,
     height: 980,
   },
+  inftwtResultPopup: {
+    key: "inftwtResultPopup",
+    title: "침입수 분석결과",
+    width: 1280,
+    height: 900,
+  },
+  rdiiResultPopup: {
+    key: "rdiiResultPopup",
+    title: "RDII 분석결과",
+    width: 1280,
+    height: 900,
+  },
   infilChart: {
     key: "infilChart",
     title: "침입수 분석",
-    width: 1360,
-    height: 980,
+    width: 940,
+    height: 860,
+    placement: "browser-left",
+    alignTop: true,
+    offsetLeft: 0,
+    offsetTop: 70,
     requiredParams: ["pplMngNo"],
   },
   rdiiChart: {
     key: "rdiiChart",
     title: "RDII 분석",
-    width: 1360,
-    height: 980,
+    width: 940,
+    height: 860,
+    placement: "browser-left",
+    alignTop: true,
+    offsetLeft: 0,
+    offsetTop: 70,
     requiredParams: ["pplMngNo"],
   },
   sscDetail: {
@@ -70,8 +90,18 @@ export const windowPopupDefinitions = {
   agedPipePopup: {
     key: "agedPipePopup",
     title: "노후 하수관로 관리 ",
-    width: 1180,
-    height: 760,
+    width: 850,
+    height: 600,
+    placement: "browser-left",
+    alignTop: true,
+    offsetLeft: 0,
+    offsetTop: 200,
+  },
+  sinkholePopup: {
+    key: "sinkholePopup",
+    title: "지반침하발생현황",
+    width: 1380,
+    height: 820,
   },
   pipeAnalysisPopup: {
     key: "pipeAnalysisPopup",
@@ -94,8 +124,8 @@ export const windowPopupDefinitions = {
   floodHistoryPopup: {
     key: "floodHistoryPopup",
     title: "침수발생이력",
-    width: 1080,
-    height: 760,
+    width: 1160,
+    height: 820,
   },
   gisEditPopup: {
     key: "gisEditPopup",
@@ -103,16 +133,23 @@ export const windowPopupDefinitions = {
     width: 1080,
     height: 760,
   },
+  gisEditSessionPopup: {
+    key: "gisEditSessionPopup",
+    title: "편집 세션",
+    width: 460,
+    height: 640,
+    placement: "browser-left",
+  },
   gisManagementPopup: {
     key: "gisManagementPopup",
     title: "GIS 관리",
-    width: 1080,
-    height: 760,
+    width: 860,
+    height: 700,
   },
   flowRiskPopup: {
     key: "flowRiskPopup",
     title: "통수 위험",
-    width: 1080,
+    width: 920,
     height: 760,
   },
 } as const satisfies Record<string, WindowPopupDefinition>;
diff --git a/apps/sn/src/features/windowPopup/model/types.ts b/apps/sn/src/features/windowPopup/model/types.ts
index 8387e03c1..cd07c5119 100644
--- a/apps/sn/src/features/windowPopup/model/types.ts
+++ b/apps/sn/src/features/windowPopup/model/types.ts
@@ -14,6 +14,10 @@ export type WindowPopupDefinition = {
   title: string;
   width: number;
   height: number;
+  placement?: "center" | "browser-left";
+  alignTop?: boolean;
+  offsetLeft?: number;
+  offsetTop?: number;
   requiredParams?: string[];
 };
 
@@ -31,6 +35,21 @@ export const WINDOW_POPUP_MESSAGE_TYPE = {
   FLOOD_PRE_UPLOAD_COMPLETED: "sn:popup:floodPreUploadCompleted",
   MAP_SEARCH_SELECT_FEATURE: "sn:popup:mapSearchSelectFeature",
   MAP_SEARCH_SHOW_MULTIPLE: "sn:popup:mapSearchShowMultiple",
+  GIS_EDIT_SESSION_READY: "sn:popup:gisEditSessionReady",
+  GIS_EDIT_SESSION_SYNC: "sn:popup:gisEditSessionSync",
+  GIS_EDIT_SESSION_SHOW_INLINE: "sn:popup:gisEditSessionShowInline",
+  GIS_EDIT_SESSION_FOCUS_CHANGE: "sn:popup:gisEditSessionFocusChange",
+  GIS_EDIT_SESSION_REMOVE_FOCUSED_CHANGE: "sn:popup:gisEditSessionRemoveFocusedChange",
+  GIS_EDIT_SESSION_REMOVE_LAST_CHANGE: "sn:popup:gisEditSessionRemoveLastChange",
+  GIS_EDIT_SESSION_CLEAR_CHANGES: "sn:popup:gisEditSessionClearChanges",
+  WATER_RISK_READY: "sn:popup:waterRiskReady",
+  WATER_RISK_SYNC: "sn:popup:waterRiskSync",
+  WATER_RISK_SELECT_RESULT: "sn:popup:waterRiskSelectResult",
+  WATER_RISK_START_SETTING_EDIT: "sn:popup:waterRiskStartSettingEdit",
+  WATER_RISK_STOP_SETTING_EDIT: "sn:popup:waterRiskStopSettingEdit",
+  WATER_RISK_REMOVE_STAGED_PIPE: "sn:popup:waterRiskRemoveStagedPipe",
+  WATER_RISK_REORDER_STAGED_PIPE: "sn:popup:waterRiskReorderStagedPipe",
+  WATER_RISK_CLEAR_STAGED_PIPES: "sn:popup:waterRiskClearStagedPipes",
 } as const;
 
 export type WindowPopupMessageType =
diff --git a/apps/sn/src/features/windowPopup/registry.tsx b/apps/sn/src/features/windowPopup/registry.tsx
index c76d9064f..fe6758bf2 100644
--- a/apps/sn/src/features/windowPopup/registry.tsx
+++ b/apps/sn/src/features/windowPopup/registry.tsx
@@ -4,44 +4,35 @@ import AgedPipePopupContent from "./ui/AgedPipePopupContent";
 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 SscDetailPopupContent from "./ui/SscDetailPopupContent";
 import type { WindowPopupContentProps } from "./model/types";
 import FeaturePlaceholderPopupContent from "./ui/FeaturePlaceholderPopupContent";
+import FloodHistoryPopupContent from "./ui/FloodHistoryPopupContent";
+import GisEditSessionPopupContent from "./ui/GisEditSessionPopupContent";
+import GisManagementPopupContent from "./ui/GisManagementPopupContent";
 import PipeAnalysisPopupContent from "./ui/PipeAnalysisPopupContent";
 import PipeAnalysisDetailPopupContent from "./ui/PipeAnalysisDetailPopupContent";
+import WaterRiskPopupContent from "./ui/WaterRiskPopupContent";
 
-const FloodPredictionMapPopupContent = (_props: WindowPopupContentProps) => (
+const FloodPredictionPlaceholderPopupContent = (_props: WindowPopupContentProps) => (
   <FeaturePlaceholderPopupContent
     title={windowPopupDefinitions.floodPredictionMapPopup.title}
   />
 );
 
-const FloodHistoryPopupContent = (_props: WindowPopupContentProps) => (
-  <FeaturePlaceholderPopupContent
-    title={windowPopupDefinitions.floodHistoryPopup.title}
-  />
-);
-
 const GisEditPopupContent = (_props: WindowPopupContentProps) => (
   <FeaturePlaceholderPopupContent title={windowPopupDefinitions.gisEditPopup.title} />
 );
 
-const GisManagementPopupContent = (_props: WindowPopupContentProps) => (
-  <FeaturePlaceholderPopupContent
-    title={windowPopupDefinitions.gisManagementPopup.title}
-  />
-);
-
-const FlowRiskPopupContent = (_props: WindowPopupContentProps) => (
-  <FeaturePlaceholderPopupContent title={windowPopupDefinitions.flowRiskPopup.title} />
-);
-
 export const windowPopupRegistry = {
   oldPpUpload: {
     ...windowPopupDefinitions.oldPpUpload,
@@ -71,6 +62,14 @@ export const windowPopupRegistry = {
     ...windowPopupDefinitions.mapSearch,
     component: SearchModalPopupContent,
   },
+  inftwtResultPopup: {
+    ...windowPopupDefinitions.inftwtResultPopup,
+    component: InftwtResultPopupContent,
+  },
+  rdiiResultPopup: {
+    ...windowPopupDefinitions.rdiiResultPopup,
+    component: RdiiResultPopupContent,
+  },
   infilChart: {
     ...windowPopupDefinitions.infilChart,
     component: InfilChartPopupContent,
@@ -87,6 +86,10 @@ export const windowPopupRegistry = {
     ...windowPopupDefinitions.agedPipePopup,
     component: AgedPipePopupContent,
   },
+  sinkholePopup: {
+    ...windowPopupDefinitions.sinkholePopup,
+    component: SinkholePopupContent,
+  },
   pipeAnalysisPopup: {
     ...windowPopupDefinitions.pipeAnalysisPopup,
     component: PipeAnalysisPopupContent,
@@ -97,7 +100,7 @@ export const windowPopupRegistry = {
   },
   floodPredictionMapPopup: {
     ...windowPopupDefinitions.floodPredictionMapPopup,
-    component: FloodPredictionMapPopupContent,
+    component: FloodPredictionPlaceholderPopupContent,
   },
   floodHistoryPopup: {
     ...windowPopupDefinitions.floodHistoryPopup,
@@ -107,12 +110,16 @@ export const windowPopupRegistry = {
     ...windowPopupDefinitions.gisEditPopup,
     component: GisEditPopupContent,
   },
+  gisEditSessionPopup: {
+    ...windowPopupDefinitions.gisEditSessionPopup,
+    component: GisEditSessionPopupContent,
+  },
   gisManagementPopup: {
     ...windowPopupDefinitions.gisManagementPopup,
     component: GisManagementPopupContent,
   },
   flowRiskPopup: {
     ...windowPopupDefinitions.flowRiskPopup,
-    component: FlowRiskPopupContent,
+    component: WaterRiskPopupContent,
   },
-} as const satisfies Record<WindowPopupKey, WindowPopupRegistryItem>;
+} as const satisfies Record<WindowPopupKey, WindowPopupRegistryItem>;
\ No newline at end of file
diff --git a/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
index e05b3b6b5..a38a8b46b 100644
--- a/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
@@ -4,18 +4,18 @@ type Props = {
 
 export default function FeaturePlaceholderPopupContent({ title }: Props) {
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
-      <header className="flex min-h-[44px] items-center border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">{title}</h1>
+    <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-slate-50 p-8">
-        <div className="w-full max-w-[520px] rounded-md border border-slate-200 bg-white p-8 text-center shadow-sm">
-          <h2 className="text-[1.35rem] font-semibold text-slate-800">{title}</h2>
-          <p className="mt-4 text-[1.1rem] leading-7 text-slate-600">
+      <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">
             현재는 팝업 창 구조만 우선 연결했습니다.
           </p>
-          <p className="mt-2 text-[1.05rem] leading-7 text-slate-500">
+          <p className="mt-2 text-[1.05rem] leading-7 text-muted-foreground">
             상세 기능은 추후 단계에서 구현될 예정입니다.
           </p>
         </div>
diff --git a/apps/sn/src/features/windowPopup/ui/FloodHistoryPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FloodHistoryPopupContent.tsx
new file mode 100644
index 000000000..d363c7ecf
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/FloodHistoryPopupContent.tsx
@@ -0,0 +1,5 @@
+import FloodHistoryPopupPage from "@/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage";
+
+export default function FloodHistoryPopupContent() {
+  return <FloodHistoryPopupPage />;
+}
diff --git a/apps/sn/src/features/windowPopup/ui/GisEditSessionPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/GisEditSessionPopupContent.tsx
new file mode 100644
index 000000000..28a60967c
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/GisEditSessionPopupContent.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import GisEditSessionPanel from "@/app/(map-layout)/map/components/gisEdit/GisEditSessionPanel";
+import type { GisEditSessionSnapshot } from "@/app/(map-layout)/map/components/gisEdit/gisEditTypes";
+import {
+  WINDOW_POPUP_MESSAGE_TYPE,
+  type WindowPopupContentProps,
+} from "../model/types";
+import { windowPopupDefinitions } from "../model/popupDefinitions";
+
+const EMPTY_SNAPSHOT: GisEditSessionSnapshot = {
+  isEditMode: false,
+  selectedLayerName: "",
+  activeTool: null,
+  isSnapEnabled: false,
+  changes: [],
+  lastSavedPayload: null,
+  canUndo: false,
+  focusedChangeId: null,
+};
+
+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);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      const data = event.data;
+      if (data?.type === WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_SYNC) {
+        setSnapshot((data.payload ?? EMPTY_SNAPSHOT) as GisEditSessionSnapshot);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_READY);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  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
+          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"
+          onClick={() => {
+            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_SHOW_INLINE);
+          }}
+        >
+          화면에서 보기
+        </button>
+      </header>
+
+      <section className="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);
+          }}
+          onRemoveLastChange={() => {
+            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_REMOVE_LAST_CHANGE);
+          }}
+          onClearChanges={() => {
+            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_CLEAR_CHANGES);
+          }}
+          onFocusChange={(changeId) => {
+            postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.GIS_EDIT_SESSION_FOCUS_CHANGE, {
+              changeId,
+            });
+          }}
+        />
+      </section>
+    </main>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/GisManagementPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/GisManagementPopupContent.tsx
new file mode 100644
index 000000000..9e2dce7d7
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/GisManagementPopupContent.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import GisManagementPopupPage from "@/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage";
+
+export default function GisManagementPopupContent() {
+  return (
+    <Suspense fallback={null}>
+      <GisManagementPopupPage />
+    </Suspense>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/InfilChartPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/InfilChartPopupContent.tsx
index f6a739f53..daed9f2d1 100644
--- a/apps/sn/src/features/windowPopup/ui/InfilChartPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/InfilChartPopupContent.tsx
@@ -8,6 +8,10 @@ export default function InfilChartPopupContent({
   searchParams,
 }: WindowPopupContentProps) {
   const pplMngNo = getPopupParamValue(searchParams.pplMngNo);
+  const resultOnly = getPopupParamValue(searchParams.resultOnly) === "Y";
+  const aplcnYm = getPopupParamValue(searchParams.aplcnYm);
+  const analysisInfo = getPopupParamValue(searchParams.analysisInfo);
+  const inftwtAnlsSn = Number(getPopupParamValue(searchParams.inftwtAnlsSn) || "0");
 
   if (!pplMngNo) {
     return (
@@ -18,5 +22,13 @@ export default function InfilChartPopupContent({
     );
   }
 
-  return <InfilChart pplMngNo={pplMngNo} />;
-}
+  return (
+    <InfilChart
+      pplMngNo={pplMngNo}
+      inftwtAnlsSn={Number.isFinite(inftwtAnlsSn) ? inftwtAnlsSn : 0}
+      aplcnYm={aplcnYm}
+      analysisInfo={analysisInfo}
+      resultOnly={resultOnly}
+    />
+  );
+}
\ No newline at end of file
diff --git a/apps/sn/src/features/windowPopup/ui/InftwtResultPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/InftwtResultPopupContent.tsx
new file mode 100644
index 000000000..66bb296e2
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/InftwtResultPopupContent.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import InftwtResultPopupPage from "@/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage";
+
+export default function InftwtResultPopupContent() {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return <div className="h-dvh bg-white" suppressHydrationWarning />;
+  }
+
+  return <InftwtResultPopupPage />;
+}
\ No newline at end of file
diff --git a/apps/sn/src/features/windowPopup/ui/RdiiChartPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/RdiiChartPopupContent.tsx
index 8a591e004..148813108 100644
--- a/apps/sn/src/features/windowPopup/ui/RdiiChartPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/RdiiChartPopupContent.tsx
@@ -8,6 +8,10 @@ export default function RdiiChartPopupContent({
   searchParams,
 }: WindowPopupContentProps) {
   const pplMngNo = getPopupParamValue(searchParams.pplMngNo);
+  const resultOnly = getPopupParamValue(searchParams.resultOnly) === "Y";
+  const aplcnYm = getPopupParamValue(searchParams.aplcnYm);
+  const analysisInfo = getPopupParamValue(searchParams.analysisInfo);
+  const rainInfwtAnlsSn = Number(getPopupParamValue(searchParams.rainInfwtAnlsSn) || "0");
 
   if (!pplMngNo) {
     return (
@@ -18,5 +22,13 @@ export default function RdiiChartPopupContent({
     );
   }
 
-  return <RdiiChart pplMngNo={pplMngNo} />;
-}
+  return (
+    <RdiiChart
+      pplMngNo={pplMngNo}
+      rainInfwtAnlsSn={Number.isFinite(rainInfwtAnlsSn) ? rainInfwtAnlsSn : 0}
+      aplcnYm={aplcnYm}
+      analysisInfo={analysisInfo}
+      resultOnly={resultOnly}
+    />
+  );
+}
\ No newline at end of file
diff --git a/apps/sn/src/features/windowPopup/ui/RdiiResultPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/RdiiResultPopupContent.tsx
new file mode 100644
index 000000000..c3e6f3039
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/RdiiResultPopupContent.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import RdiiResultPopupPage from "@/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage";
+
+export default function RdiiResultPopupContent() {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return <div className="h-dvh bg-white" suppressHydrationWarning />;
+  }
+
+  return <RdiiResultPopupPage />;
+}
\ No newline at end of file
diff --git a/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
index d2913df8e..14af20da4 100644
--- a/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/ReportTabPopupContent.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import ReportTab from "@/app/(map-layout)/map/searchModal/reportTab";
+import { useEffect, useState } from "react";
 import { windowPopupDefinitions } from "../model/popupDefinitions";
 import type { WindowPopupContentProps } from "../model/types";
 import { getPopupParamValue } from "./popupContentUtils";
@@ -6,9 +9,18 @@ import { getPopupParamValue } from "./popupContentUtils";
 export default function ReportTabPopupContent({
   searchParams,
 }: WindowPopupContentProps) {
+  const [isMounted, setIsMounted] = useState(false);
   const ctpvNm = getPopupParamValue(searchParams.ctpvNm);
   const sggNm = getPopupParamValue(searchParams.sggNm);
 
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return <div className="h-dvh bg-white" 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">
diff --git a/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
index 0bbb50bbe..e85b8fb1d 100644
--- a/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
@@ -1,5 +1,44 @@
+"use client";
+
 import SearchModal from "@/app/(map-layout)/map/searchModal/searchModal";
+import useStore from "@/store/useStore";
+import { useEffect, useState } from "react";
 
 export default function SearchModalPopupContent() {
-  return <SearchModal renderMode="popup" />;
+  const [isMounted, setIsMounted] = useState(false);
+  const {
+    ctpv,
+    sgg,
+    BIZ_SE_CD,
+    BIZ_TY_CD,
+    fetchCtpv,
+    fetchSgg,
+    fetchBIZ_SE_CD,
+    fetchBIZ_TY_CD,
+  } = useStore();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted) return;
+
+    // Popup windows do not run map-layout initialization, so load location codes here.
+    if (ctpv.length === 0) void fetchCtpv();
+    if (sgg.length === 0) void fetchSgg();
+  }, [ctpv.length, fetchCtpv, fetchSgg, isMounted, sgg.length]);
+
+  useEffect(() => {
+    if (!isMounted) return;
+
+    if (BIZ_SE_CD.length === 0) void fetchBIZ_SE_CD();
+    if (BIZ_TY_CD.length === 0) void fetchBIZ_TY_CD();
+  }, [BIZ_SE_CD.length, BIZ_TY_CD.length, fetchBIZ_SE_CD, fetchBIZ_TY_CD, isMounted]);
+
+  if (!isMounted) {
+    return <div className="h-dvh bg-background" suppressHydrationWarning />;
+  }
+
+  return <SearchModal renderMode="popup" autoSearchReady={ctpv.length > 0 && sgg.length > 0} />;
 }
diff --git a/apps/sn/src/features/windowPopup/ui/SinkholePopupContent.tsx b/apps/sn/src/features/windowPopup/ui/SinkholePopupContent.tsx
new file mode 100644
index 000000000..387fc511e
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/SinkholePopupContent.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import SinkholePopupPage from "@/app/(map-layout)/map/components/sinkhole/SinkholePopupPage";
+
+export default function SinkholePopupContent() {
+  return (
+    <Suspense fallback={null}>
+      <SinkholePopupPage />
+    </Suspense>
+  );
+}
diff --git a/apps/sn/src/features/windowPopup/ui/WaterRiskPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/WaterRiskPopupContent.tsx
new file mode 100644
index 000000000..eb8cf33ee
--- /dev/null
+++ b/apps/sn/src/features/windowPopup/ui/WaterRiskPopupContent.tsx
@@ -0,0 +1,12 @@
+import { Suspense } from "react";
+
+import WaterRiskPopupPage from "@/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage";
+import type { WindowPopupContentProps } from "../model/types";
+
+export default function WaterRiskPopupContent(props: WindowPopupContentProps) {
+  return (
+    <Suspense fallback={null}>
+      <WaterRiskPopupPage {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/sn/src/shared/config/api.ts b/apps/sn/src/shared/config/api.ts
index 16d1b5452..eebb15c19 100644
--- a/apps/sn/src/shared/config/api.ts
+++ b/apps/sn/src/shared/config/api.ts
@@ -1,9 +1,6 @@
 import { PROXY_HOST } from "./env";
 
-// 브라우저에서는 동일 오리진으로 상대경로 호출 → CORS/localhost 고정 문제 방지
-// (Next middleware가 /server/* 요청을 백엔드로 rewrite)
-// 서버 환경(SSR 등)에서는 절대 URL이 필요할 수 있어 기존 PROXY_HOST 기반 유지
-export const BASE_URL = `${PROXY_HOST}/server`;
+export const BASE_URL = `${PROXY_HOST}`;
 
 export const ENDPOINT = {
   ATTACH_SERVICE: {
@@ -17,13 +14,21 @@ export const ENDPOINT = {
   },
   USER_SERVICE: {
     LOGIN: "/user-service/login",
+    LOGIN_2FA: "/user-service/api/v1/auth/login",
     USERS: "/user-service/api/v1/users",
     SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
     AUTHORIZATIONS: "/user-service/api/v1/authorizations",
     ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations",
     ROLES: "/user-service/api/v1/roles",
+    LOGINLOG: "/user-service/api/v1/login-logs",
+    PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
+    OTP_VERIFY: "/user-service/api/v1/auth/2fa/verify",
+    TWOFA_SETUP: "/user-service/api/v1/auth/2fa/setup",
+    TWOFA_ENABLE: "/user-service/api/v1/auth/2fa/enable",
+    USER_JOIN: "/user-service/api/v1/anonymouse/users/join",
   },
   CMS_SERVICE: {
+    DASHBOARD: "/cms-service/api/v1/dashboard",
     SITES: "/cms-service/api/v1/sites",
     IPS: "/cms-service/api/v1/site-ips",
     DOMAINS: "/cms-service/api/v1/site-dmns",
@@ -32,6 +37,8 @@ export const ENDPOINT = {
     MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
     MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
+    MENU_TEMPORARY_STORAGE: "/cms-service/api/v1/menu-tmpr-strg",
+    MENU_HISTORY: "/cms-service/api/v1/menu-hstry",
     CONTENTS: "/cms-service/api/v1/contents",
     CONTENTS_DETAILS: "/cms-service/api/v1/contents-details",
     ORGANIZATIONS: "/cms-service/api/v1/ognzs",
@@ -47,13 +54,32 @@ export const ENDPOINT = {
     SURVEY: "/cms-service/api/v1/srvy",
     SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem",
     SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl",
+    ZIPS: "/cms-service/api/v1/zips",
+    GROUPS: "/cms-service/api/v1/groups",
+    GROUP_USERS: "/cms-service/api/v1/group-users",
+    MANAGER_IP: "/cms-service/api/v1/mgrip",
+    APILOG: "/cms-service/api/v1/api-logs",
+    SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
+    CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
     BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
     POSTS: "/board-service/api/v1/posts",
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
+    POST_EVALUATION: "/board-service/api/v1/pstEvl",
   },
+  SEWERAGE_SERVICE: {
+    PPL_COUNTS: "/sewerage-service/api/v1/ms/pplCounts",
+    OLD_PPL_COUNTS: "/sewerage-service/api/v1/ms/oldPplCounts",
+  },    
+  IC_SERVICE: {
+    GROUPING_STATISTICS: "/ic-service/api/v1/nti/grouping-statistics",
+  },
+  DC_SERVICE: {
+    DATA_STATUS: "/dc-service/api/v1/dc/dataStatus",
+  },
+
 };
 
 export const JWT_EXPIRATION_TIME = 1800000;
diff --git a/apps/sn/src/shared/config/auth.ts b/apps/sn/src/shared/config/auth.ts
new file mode 100644
index 000000000..7c35ad9f0
--- /dev/null
+++ b/apps/sn/src/shared/config/auth.ts
@@ -0,0 +1,17 @@
+import type { AuthConfig } from "@common/auth";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/sn/src/shared/config/env.ts b/apps/sn/src/shared/config/env.ts
index ad982d727..788fdf36f 100644
--- a/apps/sn/src/shared/config/env.ts
+++ b/apps/sn/src/shared/config/env.ts
@@ -1,8 +1,17 @@
+export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
-export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
+export const SERVER_API_URL = process.env.SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+
+export const AUTH_LOGIN_REDIRECT_URL =
+    process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-export const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
+export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
+export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
+export const SERVER_SEWERAGE_API_URL = process.env.SEWERAGE_API_URL;
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+
+
+
+
diff --git a/apps/sn/src/shared/config/index.ts b/apps/sn/src/shared/config/index.ts
index cd83447d5..04e4f2df5 100644
--- a/apps/sn/src/shared/config/index.ts
+++ b/apps/sn/src/shared/config/index.ts
@@ -1,2 +1,4 @@
 export * from "./api";
 export * from "./env";
+
+export const DEFAULT_LIST_SIZE = 10;
diff --git a/apps/sn/src/shared/lib/bbs-notice-menu.ts b/apps/sn/src/shared/lib/bbs-notice-menu.ts
new file mode 100644
index 000000000..a621ed669
--- /dev/null
+++ b/apps/sn/src/shared/lib/bbs-notice-menu.ts
@@ -0,0 +1,12 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export const BBS_NOTICE_MENU_MARKER = "bbsnotice";
+
+export function isBbsNoticeMenu(item: MenuItem): boolean {
+    const marker = BBS_NOTICE_MENU_MARKER;
+    return (
+        item.urlPath?.toLowerCase().includes(marker) ||
+        item.menuEngNm?.toLowerCase().includes(marker) ||
+        item.menuPath?.toLowerCase().includes(marker)
+    );
+}
diff --git a/apps/sn/src/shared/lib/cookie.ts b/apps/sn/src/shared/lib/cookie.ts
index 8f5d0011b..4bc0fe142 100644
--- a/apps/sn/src/shared/lib/cookie.ts
+++ b/apps/sn/src/shared/lib/cookie.ts
@@ -1,5 +1,7 @@
+
 import Cookies from "js-cookie";
 
+
 export function getCookie(name: string): string | undefined {
   if (typeof window === "undefined") {
     return undefined;
diff --git a/apps/sn/src/shared/lib/index.ts b/apps/sn/src/shared/lib/index.ts
index 061346946..1d0c4a3a8 100644
--- a/apps/sn/src/shared/lib/index.ts
+++ b/apps/sn/src/shared/lib/index.ts
@@ -2,6 +2,12 @@ export { useMutationWrapper } from "./use-mutation-wrapper";
 export { useAlertStore } from "./use-alert-store";
 export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
-export { useDataStore } from "./use-data-store";
 export { usePrompt } from "./use-prompt";
 export { getCookie, setCookie, removeCookie } from "./cookie";
+export {
+    buildStatisticsComponentImportPath,
+    menuMatchesStatisticsTabId,
+    parseStatisticsMenuUrlPath,
+    resolveStatisticsCategory,
+    resolveStatisticsTabId,
+} from "./statistics-menu-url";
diff --git a/apps/sn/src/shared/lib/statistics-menu-url.ts b/apps/sn/src/shared/lib/statistics-menu-url.ts
new file mode 100644
index 000000000..c20dded4c
--- /dev/null
+++ b/apps/sn/src/shared/lib/statistics-menu-url.ts
@@ -0,0 +1,84 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export type ParsedStatisticsMenuUrl = {
+    categoryFromPath: string | null;
+    componentName: string | null;
+    rawUrlPath: string;
+};
+
+/** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
+export function parseStatisticsMenuUrlPath(
+    urlPath: string,
+): ParsedStatisticsMenuUrl {
+    const trimmed = (urlPath ?? "").trim();
+    if (!trimmed) {
+        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+    }
+
+    let pathPart = trimmed;
+    let queryString = "";
+    const queryIndex = trimmed.indexOf("?");
+    if (queryIndex >= 0) {
+        pathPart = trimmed.slice(0, queryIndex);
+        queryString = trimmed.slice(queryIndex + 1);
+    }
+
+    const tabParam = new URLSearchParams(queryString).get("tab")?.trim() || null;
+    const segments = pathPart.replace(/^\/+/, "").split("/").filter(Boolean);
+
+    let categoryFromPath: string | null = null;
+    if (segments[0] === "statistics" && segments.length >= 2) {
+        categoryFromPath = segments[1] ?? null;
+    }
+
+    let componentName = tabParam;
+    if (!componentName) {
+        if (!pathPart.includes("/") && !queryString) {
+            componentName = trimmed;
+        } else if (segments.length === 1 && segments[0] !== "statistics") {
+            componentName = segments[0] ?? null;
+        } else if (segments[0] === "statistics" && segments.length >= 3) {
+            componentName = segments[segments.length - 1] ?? null;
+        }
+    }
+
+    return { categoryFromPath, componentName, rawUrlPath: trimmed };
+}
+
+/** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
+export function resolveStatisticsCategory(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+    return categoryFromPath || parentEngNm || "";
+}
+
+/** 탭 ID·URL `?tab=` 값 - 컴포넌트 파일명(확장자 제외) */
+export function resolveStatisticsTabId(urlPath: string): string {
+    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+    return componentName || rawUrlPath;
+}
+
+/** `@/src/components/statistics/{category}/{Component}` 또는 루트 컴포넌트 경로 */
+export function buildStatisticsComponentImportPath(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+    const category = resolveStatisticsCategory(urlPath, parentEngNm);
+    const name = componentName || urlPath;
+    if (!category) {
+        return `@/src/components/statistics/${name}`;
+    }
+    return `@/src/components/statistics/${category}/${name}`;
+}
+
+export function menuMatchesStatisticsTabId(
+    menu: MenuItem,
+    tabId: string,
+): boolean {
+    if (!tabId) return false;
+    if (menu.urlPath === tabId) return true;
+    return resolveStatisticsTabId(menu.urlPath) === tabId;
+}
diff --git a/apps/sn/src/shared/ui/form.tsx b/apps/sn/src/shared/ui/form.tsx
new file mode 100644
index 000000000..bd579d263
--- /dev/null
+++ b/apps/sn/src/shared/ui/form.tsx
@@ -0,0 +1,175 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { cn, Label } from "@common/components";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[1rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/apps/sn/src/store/tab-store.ts b/apps/sn/src/store/tab-store.ts
new file mode 100644
index 000000000..7e942879a
--- /dev/null
+++ b/apps/sn/src/store/tab-store.ts
@@ -0,0 +1,327 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import type { MenuItem } from "@/entities/menu";
+import { MenuAuthorityApi } from "@/entities/menu-authority";
+import type { PageMenuAuthority } from "@/entities/menu-authority/model/menu-authority-interface";
+import { isBbsNoticeMenu } from "@/shared/lib/bbs-notice-menu";
+import { resolveStatisticsTabId } from "@/shared/lib/statistics-menu-url";
+
+export interface Tab {
+    id: string; // 고유 ID (urlPath)
+    label: string; // 탭에 표시될 이름
+    path: string; // 메뉴 경로
+    urlPath: string; // url 경로
+    parentEngNm: string; // 부모 menuEngNm
+    menuItem: MenuItem; // 메뉴 정보
+    /** undefined: 미조회, null: 조회했으나 없음/실패 */
+    pageMenuAuthority?: PageMenuAuthority | null;
+}
+
+async function fetchTabPageMenuAuthority(
+    menuCd: number,
+    apply: (authority: PageMenuAuthority | null) => void,
+): Promise<void> {
+    try {
+        const response = await MenuAuthorityApi.getPageMenuAuthority(menuCd);
+        apply(response?.[0] ?? null);
+    } catch {
+        apply(null);
+    }
+}
+
+function scheduleTabPageMenuAuthorityFetch(
+    get: () => TabStore,
+    set: (
+        partial:
+            | Partial<TabStore>
+            | ((state: TabStore) => Partial<TabStore>),
+    ) => void,
+    tabId: string,
+    menuCd: number,
+): void {
+    void fetchTabPageMenuAuthority(menuCd, (authority) => {
+        const { tabs } = get();
+        if (!tabs.some((tab) => tab.id === tabId)) return;
+        set((state) => ({
+            tabs: state.tabs.map((tab) =>
+                tab.id === tabId ? { ...tab, pageMenuAuthority: authority } : tab,
+            ),
+        }));
+    });
+}
+
+type TabStoreSetState = (
+    partial:
+        | Partial<TabStore>
+        | ((state: TabStore) => Partial<TabStore>),
+) => void;
+
+const tabStoreSetState: TabStoreSetState = (partial) => {
+    useTabStoreHook.setState(partial);
+};
+
+function ensureTabPageMenuAuthority(
+    get: () => TabStore,
+    set: TabStoreSetState,
+    tab: Tab,
+): void {
+    if (tab.pageMenuAuthority !== undefined) return;
+    scheduleTabPageMenuAuthorityFetch(get, set, tab.id, tab.menuItem.menuCd);
+}
+
+/** persist 복원·새로고침 후 활성 탭 메뉴 권한이 없으면 조회 */
+export function hydrateActiveTabPageMenuAuthority(): void {
+    const { tabs, activeTabId } = getTabStoreState();
+    if (!activeTabId) return;
+    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!tab) return;
+    ensureTabPageMenuAuthority(getTabStoreState, tabStoreSetState, tab);
+}
+
+interface TabStore {
+    tabs: Tab[];
+    activeTabId: string | null;
+    menuList: MenuItem[] | null;
+    addTab: (menuItem: MenuItem) => boolean;
+    removeTab: (tabId: string) => void;
+    setActiveTab: (tabId: string) => void;
+    setMenuList: (menuList: MenuItem[] | null) => void;
+    closeAllTabs: () => void;
+    closeOtherTabs: (tabId: string) => void;
+    closeTabsToLeft: (tabId: string) => void;
+    closeTabsToRight: (tabId: string) => void;
+}
+
+export const TAB_STORE_PERSIST_KEY = "st-tab-store";
+const TAB_STORE_VERSION = 1;
+const MAX_TABS = 10;
+
+function tabForPersist(tab: Tab): Tab {
+    return {
+        ...tab,
+        menuItem: { ...tab.menuItem, children: null },
+        pageMenuAuthority: undefined,
+    };
+}
+
+function normalizePersistedTab(tab: Tab): Tab {
+    const tabId = resolveStatisticsTabId(tab.urlPath || tab.id);
+    return tabId === tab.id ? tab : { ...tab, id: tabId };
+}
+
+function sanitizePersistedTabsAndActive(
+    tabs: Tab[],
+    activeTabId: string | null,
+): { tabs: Tab[]; activeTabId: string | null } {
+    let nextTabs = Array.isArray(tabs)
+        ? tabs.filter((tab) => !isBbsNoticeMenu(tab.menuItem)).map(normalizePersistedTab)
+        : [];
+    if (nextTabs.length > MAX_TABS) nextTabs = nextTabs.slice(0, MAX_TABS);
+
+    if (nextTabs.length === 0) {
+        return { tabs: [], activeTabId: null };
+    }
+
+    let nextActive = activeTabId;
+    if (nextActive && !nextTabs.some((t) => t.id === nextActive)) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+    if (nextActive == null && nextTabs.length > 0) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+
+    return { tabs: nextTabs, activeTabId: nextActive };
+}
+
+const useTabStoreHook = create<TabStore>()(
+    persist(
+        (set, get) => ({
+            tabs: [],
+            activeTabId: null,
+            menuList: null,
+            addTab: (menuItem: MenuItem) => {
+                if (isBbsNoticeMenu(menuItem)) {
+                    return false;
+                }
+
+                const { tabs, menuList } = get();
+                const tabId = resolveStatisticsTabId(menuItem.urlPath || "");
+
+                const existingTab = tabs.find((tab) => tab.id === tabId);
+
+                if (existingTab) {
+                    set({ activeTabId: tabId });
+                    ensureTabPageMenuAuthority(get, set, existingTab);
+                    return true;
+                }
+
+                if (tabs.length < MAX_TABS) {
+                    const newTab: Tab = {
+                        id: tabId,
+                        label: menuItem.menuKornNm,
+                        path: menuItem.menuPath,
+                        urlPath: menuItem.urlPath,
+                        parentEngNm:
+                            menuList?.find(
+                                (m) => m.menuCd === menuItem.parentId,
+                            )?.menuEngNm || "",
+                        menuItem,
+                        pageMenuAuthority: undefined,
+                    };
+
+                    set({
+                        tabs: [...tabs, newTab],
+                        activeTabId: tabId,
+                    });
+
+                    scheduleTabPageMenuAuthorityFetch(
+                        get,
+                        set,
+                        tabId,
+                        menuItem.menuCd,
+                    );
+
+                    return true;
+                }
+                return false;
+            },
+            removeTab: (tabId: string): void => {
+                const { tabs, activeTabId } = get();
+                const newTabs = tabs.filter((tab) => tab.id !== tabId);
+
+                let newActiveTabId = activeTabId;
+                if (activeTabId === tabId) {
+                    const closedTabIndex = tabs.findIndex(
+                        (tab) => tab.id === tabId,
+                    );
+                    if (newTabs.length > 0) {
+                        if (closedTabIndex > 0) {
+                            const prevTab = tabs[closedTabIndex - 1];
+                            newActiveTabId = prevTab ? prevTab.id : null;
+                        } else {
+                            const firstTab = newTabs[0];
+                            newActiveTabId = firstTab ? firstTab.id : null;
+                        }
+                    } else {
+                        newActiveTabId = null;
+                    }
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            setActiveTab: (tabId: string) => {
+                set({ activeTabId: tabId });
+                const tab = get().tabs.find((t) => t.id === tabId);
+                if (tab) ensureTabPageMenuAuthority(get, set, tab);
+            },
+            setMenuList: (menuList: MenuItem[] | null) => {
+                set({ menuList });
+            },
+            closeAllTabs: () => {
+                set({
+                    tabs: [],
+                    activeTabId: null,
+                });
+            },
+            closeOtherTabs: (tabId: string) => {
+                const { tabs } = get();
+                const tabToKeep = tabs.find((tab) => tab.id === tabId);
+
+                if (tabToKeep) {
+                    set({
+                        tabs: [tabToKeep],
+                        activeTabId: tabId,
+                    });
+                }
+            },
+            closeTabsToLeft: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index <= 0) return;
+
+                const newTabs = tabs.slice(index);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            closeTabsToRight: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index === -1 || index >= tabs.length - 1) return;
+
+                const newTabs = tabs.slice(0, index + 1);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+        }),
+        {
+            name: TAB_STORE_PERSIST_KEY,
+            version: TAB_STORE_VERSION,
+            storage: createJSONStorage(() => localStorage),
+            partialize: (state) => ({
+                tabs: state.tabs.map(tabForPersist),
+                activeTabId: state.activeTabId,
+            }),
+            merge: (persistedState, currentState) => {
+                const p = persistedState as Partial<
+                    Pick<TabStore, "tabs" | "activeTabId">
+                > | null;
+                const rawTabs = p?.tabs;
+                const rawActive = p?.activeTabId;
+                const { tabs, activeTabId } = sanitizePersistedTabsAndActive(
+                    (rawTabs as Tab[]) ?? [],
+                    typeof rawActive === "string" || rawActive === null
+                        ? rawActive
+                        : null,
+                );
+                return {
+                    ...currentState,
+                    tabs,
+                    activeTabId,
+                };
+            },
+            onRehydrateStorage: () => (state, error) => {
+                if (error || !state) return;
+                queueMicrotask(() => hydrateActiveTabPageMenuAuthority());
+            },
+        },
+    ),
+);
+
+export const useTabStore = useTabStoreHook;
+export const getTabStoreState = () => useTabStoreHook.getState();
+
+// 로그아웃 또는 사용자 전환 시 로컬 탭 스냅샷 제거 및 메모리 상태 초기화
+export function clearTabStorePersist(): void {
+    useTabStoreHook.getState().closeAllTabs();
+    useTabStoreHook.persist.clearStorage();
+}
diff --git a/apps/sn/src/types/lucide-react.d.ts b/apps/sn/src/types/lucide-react.d.ts
new file mode 100644
index 000000000..708828bd1
--- /dev/null
+++ b/apps/sn/src/types/lucide-react.d.ts
@@ -0,0 +1,44 @@
+declare module "lucide-react" {
+  import type { ComponentType, SVGProps } from "react";
+
+  export type LucideProps = SVGProps<SVGSVGElement> & {
+    size?: string | number;
+    color?: string;
+    strokeWidth?: string | number;
+    absoluteStrokeWidth?: boolean;
+  };
+
+  type LucideIcon = ComponentType<LucideProps>;
+
+  export const ChartColumnBig: LucideIcon;
+  export const ArrowLeft: LucideIcon;
+  export const ArrowRight: LucideIcon;
+  export const CalendarIcon: LucideIcon;
+  export const Check: LucideIcon;
+  export const CheckIcon: LucideIcon;
+  export const ChevronDown: LucideIcon;
+  export const ChevronDownIcon: LucideIcon;
+  export const ChevronLeft: LucideIcon;
+  export const ChevronLeftIcon: LucideIcon;
+  export const ChevronRight: LucideIcon;
+  export const ChevronRightIcon: LucideIcon;
+  export const ChevronUp: LucideIcon;
+  export const Circle: LucideIcon;
+  export const CloudUpload: LucideIcon;
+  export const History: LucideIcon;
+  export const Move: LucideIcon;
+  export const MoreHorizontal: LucideIcon;
+  export const PanelsTopLeft: LucideIcon;
+  export const PanelLeft: LucideIcon;
+  export const Paperclip: LucideIcon;
+  export const PenTool: LucideIcon;
+  export const PencilRuler: LucideIcon;
+  export const Plus: LucideIcon;
+  export const Search: LucideIcon;
+  export const Settings2: LucideIcon;
+  export const Trash2: LucideIcon;
+  export const TriangleAlert: LucideIcon;
+  export const Waves: LucideIcon;
+  export const X: LucideIcon;
+  export const XIcon: LucideIcon;
+}
diff --git a/apps/sn/tsconfig.json b/apps/sn/tsconfig.json
index 1634b3f08..794b8c055 100644
--- a/apps/sn/tsconfig.json
+++ b/apps/sn/tsconfig.json
@@ -12,6 +12,7 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "verbatimModuleSyntax": true,
+    "ignoreDeprecations": "6.0",
     "strictNullChecks": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
diff --git a/apps/st/app/(main)/(with-base-layout)/layout.tsx b/apps/st/app/(main)/(with-base-layout)/layout.tsx
index 16baba982..96468f9d5 100644
--- a/apps/st/app/(main)/(with-base-layout)/layout.tsx
+++ b/apps/st/app/(main)/(with-base-layout)/layout.tsx
@@ -187,7 +187,7 @@ function WithBaseLayoutInner({ children }: { children: React.ReactNode }) {
 
     const handleMenuClick = useCallback(
         (item: MenuItem) => {
-            if (item.urlPath.includes("/cms/")) return;
+            // if (item.urlPath.includes("/cms/")) return;
 
             setCurrentMenuInfo(item);
 
diff --git a/apps/st/app/api/proxy/[...url]/route.ts b/apps/st/app/api/proxy/[...url]/route.ts
index c9f0d3730..8d2ce62dc 100644
--- a/apps/st/app/api/proxy/[...url]/route.ts
+++ b/apps/st/app/api/proxy/[...url]/route.ts
@@ -1,13 +1,15 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
 import {
     ACCESS_TOKEN,
     AUTH_USER_ID,
     CLAIM_NAME,
+    COOKIE_DOMAIN,
     REFRESH_TOKEN,
     SERVER_API_URL,
     SITE_ID,
 } from "@/shared/config";
-import { cookies } from "next/headers";
-import { NextResponse } from "next/server";
 
 async function handler(
     request: Request,
@@ -19,6 +21,10 @@ async function handler(
         "Content-Type": "application/json",
         "X-Site-Id": SITE_ID,
     };
+    const deviceId = request.headers.get("X-Device-Id");
+    if (deviceId) {
+        headers["X-Device-Id"] = deviceId;
+    }
     let body = {};
     const isRefreshHandler = params.url.includes("refresh");
 
@@ -70,6 +76,7 @@ async function handler(
                 cookieStore.set(REFRESH_TOKEN, refreshToken, {
                     httpOnly: true,
                     sameSite: "lax",
+                    domain: COOKIE_DOMAIN,
                     path: "/",
                 });
             }
diff --git a/apps/st/next.config.ts b/apps/st/next.config.ts
index a0adf6946..743a29bdd 100644
--- a/apps/st/next.config.ts
+++ b/apps/st/next.config.ts
@@ -1,47 +1,47 @@
 import type { NextConfig } from "next";
 
 const subDomain =
-  process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
+    process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
 
 const nextConfig: NextConfig = {
-  // output: "standalone",
-  async headers() {
-    return [
-      {
-        source: "/(.*)",
-        headers: [
-          {
-            key: "Content-Security-Policy",
-            value: "img-src 'self' data: https: blob:;",
-          },
-        ],
-      },
-    ];
-  },
-  async rewrites() {
-    return {
-      beforeFiles: [
-        {
-          source: "/_next/static/:path*",
-          destination: `${subDomain}/_next/static/:path*`,
-          has: [
+    output: "standalone",
+    async headers() {
+        return [
             {
-              type: "header",
-              key: "referer",
-              value: "(.*)/cms(.*)",
+                source: "/(.*)",
+                headers: [
+                    {
+                        key: "Content-Security-Policy",
+                        value: "img-src 'self' data: https: blob:;",
+                    },
+                ],
             },
-          ],
-        },
-      ],
-      afterFiles: [
-        {
-          source: "/cms/:path*",
-          destination: `${subDomain}/cms/:path*`,
-        },
-      ],
-      fallback: [],
-    };
-  },
+        ];
+    },
+    async rewrites() {
+        return {
+            beforeFiles: [
+                {
+                    source: "/_next/static/:path*",
+                    destination: `${subDomain}/_next/static/:path*`,
+                    has: [
+                        {
+                            type: "header",
+                            key: "referer",
+                            value: "(.*)/cms(.*)",
+                        },
+                    ],
+                },
+            ],
+            afterFiles: [
+                {
+                    source: "/cms/:path*",
+                    destination: `${subDomain}/cms/:path*`,
+                },
+            ],
+            fallback: [],
+        };
+    },
 };
 
 export default nextConfig;
diff --git a/apps/st/package.json b/apps/st/package.json
index 7ae6c9f53..08f5bde6b 100644
--- a/apps/st/package.json
+++ b/apps/st/package.json
@@ -57,6 +57,7 @@
         "swr": "^2.3.7",
         "tailwindcss-animate": "^1.0.7",
         "tus-js-client": "^4.3.1",
+        "uuid": "^14.0.1",
         "xlsx": "^0.18.5",
         "zod": "^3.24.2",
         "zustand": "^5.0.3"
diff --git a/apps/st/src/components/button/LastYearDataButton.tsx b/apps/st/src/components/button/LastYearDataButton.tsx
index d9020c4ae..c0cc89f3b 100644
--- a/apps/st/src/components/button/LastYearDataButton.tsx
+++ b/apps/st/src/components/button/LastYearDataButton.tsx
@@ -1,12 +1,21 @@
 import { Button } from "@common/components";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 
 interface LastYearDataButtonProps {
     getLastYearDataFunc: () => void;
 }
 
 const LastYearDataButton = ({ getLastYearDataFunc }: LastYearDataButtonProps) => {
+    const { confirm } = useConfirm();
+
+    const handleLastYearDataButton = async () => {
+        if (await confirm('작년 데이터를 불러오시겠습니까?')) {
+            getLastYearDataFunc();
+        }
+    };
+
     return (
-        <Button color="emerald" className="h-[3.2rem] w-[176px]" onClick={getLastYearDataFunc}>
+        <Button color="emerald" className="h-[3.2rem] w-[176px]" onClick={handleLastYearDataButton}>
             <i className="diveicon di-search" />
             <span>지난연도 데이터 가져오기</span>
         </Button>
diff --git a/apps/st/src/components/module/DataGrid.tsx b/apps/st/src/components/module/DataGrid.tsx
index 06e0882eb..c910b104e 100644
--- a/apps/st/src/components/module/DataGrid.tsx
+++ b/apps/st/src/components/module/DataGrid.tsx
@@ -794,7 +794,24 @@ const DataGrid = ({
     onCellEditedRef.current = onCellEdited;
     onDataCellClickRef.current = onDataCellClick;
 
-    
+    // rowData 변경 시 편집 중인 셀을 commit한 뒤 수동으로 setRows (RealGridReact에 rows prop을 넘기지 않음)
+    const rowDataMountedRef = useRef(false);
+    useEffect(() => {
+        if (!rowDataMountedRef.current) {
+            rowDataMountedRef.current = true;
+            return;
+        }
+        const gv = gridRef.current?.gridView as
+            | { commit?: (force?: boolean) => boolean; cancel?: () => void }
+            | undefined;
+        const dp = gridRef.current?.dataProvider as
+            | { setRows?: (rows: Record<string, string | number>[]) => void }
+            | undefined;
+        if (!dp?.setRows) return;
+        try { gv?.commit?.(); } catch { try { gv?.cancel?.(); } catch { /* noop */ } }
+        dp.setRows(rowData);
+    }, [rowData]);
+
     // highlightedRowId가 변경될 때 해당 행으로 스크롤 및 선택
     useEffect(() => {
         if (!gridRef.current?.gridView || highlightedRowId == null) return;
@@ -1673,9 +1690,11 @@ useEffect(() => {
                               getRowCount(): number;
                               getValue(r: number, f: string): unknown;
                           };
+                          commit?: (force?: boolean) => boolean;
                       }
                     | undefined;
                 if (!gv?.getDataSource) return [];
+                try { gv.commit?.(); } catch { /* ignore */ }
                 const ds = gv.getDataSource();
                 if (!ds) return [];
                 const cnt = ds.getRowCount();
@@ -1835,13 +1854,6 @@ useEffect(() => {
         if (!gridRef.current?.gridView || !showHeaderCheckbox) return;
 
         const gridView = gridRef.current.gridView as GridViewWithCheckApi;
-        const dataProvider = gridRef.current.dataProvider as
-            | { setRows?: (rows: Record<string, string | number>[]) => void }
-            | undefined;
-
-        if (dataProvider?.setRows) {
-            dataProvider.setRows(rowData);
-        }
 
         const hasCheckedColumn = rowData.some((row) =>
             Object.prototype.hasOwnProperty.call(row, "__checked"),
@@ -1989,7 +2001,6 @@ useEffect(() => {
                     ref={gridRef}
                     autoGenerateField={true}
                     layout={columnLayout}
-                    rows={rowData}
                     onRGDataColumnsChanged={(grid) => {
                         const dp = gridRef.current?.dataProvider as
                             | {
diff --git a/apps/st/src/components/statistics/VerificationSelectionReport.tsx b/apps/st/src/components/statistics/VerificationSelectionReport.tsx
index f9e0fc599..82b80d295 100644
--- a/apps/st/src/components/statistics/VerificationSelectionReport.tsx
+++ b/apps/st/src/components/statistics/VerificationSelectionReport.tsx
@@ -357,16 +357,16 @@ const VerificationSelectionReport = ({
                                 }
                             }}
                         >
-                            <div className="mb-2 flex items-center justify-between">
-                                <span className="font-medium">
+                            <div className="mb-2">
+                                <div className="font-medium">
                                     {formatReportItemTitle(item)}
-                                </span>
+                                </div>
                                 <Badge
                                     color={
                                         TYPE_CODE_COLOR_MAP[item.vrfcMthdCd] ??
                                         "gray"
                                     }
-                                    className="text-sm"
+                                    className="text-sm float-end"
                                 >
                                     {TYPE_CODE_NAME_MAP[item.vrfcMthdCd] ??
                                         item.vrfcMthdNm}
@@ -397,8 +397,8 @@ const VerificationSelectionReport = ({
     );
 
     return (
-        <div className="w-1/5 bg-container p-4 !pb-2 flex border-r border-border">
-            <div className="card card-border flex-1 bg-background !px-0 max-h-[1000px] flex flex-col">
+        <div className="w-1/5 min-w-0 bg-container p-4 !pb-2 flex border-r border-border">
+            <div className="card card-border min-w-0 flex-1 bg-background !px-0 max-h-[1000px] flex flex-col">
                 <div className="border-b border-border flex justify-between">
                     <div className="flex justify-center items-center text-[2.4rem] ">
                         <h2 className="font-semibold text-title p-4 pr-1">이상치 선별 보고서</h2>
@@ -434,14 +434,14 @@ const VerificationSelectionReport = ({
                         <i className="ri-close-line" />
                     </span>
                 </div>
-                <div className="flex items-center gap-2 pt-2.5 px-4">
+                <div className="flex min-w-0 items-center gap-2 pt-2.5 px-4">
                     <Label className="text-label shrink-0">통계항목</Label>
                     <CodeSelectWithAll
                         upCd="STITEM"
                         value={statsCd}
                         onValueChange={handleStatsCdChange}
                         placeholder="전체"
-                        className="w-full"
+                        className="min-w-0 flex-1 overflow-hidden"
                     />
                 </div>
                 <div className="card-body p-2.5 flex-1 flex flex-col overflow-hidden relative min-h-0">
diff --git a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
index 685cea13c..33461faf7 100644
--- a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
+++ b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
@@ -148,6 +148,37 @@ const PUBLIC_SEWAGE_FACILITY_COLUMN_GUIDE_TAB_KEYS = Array.from(
     new Set(PublicSewageFactInpColumnList.map((tab) => tab.tabKey).filter(Boolean)),
 );
 
+/** 위탁계약기간: `yyyymmdd~yyyymmdd` (빈 값 허용). 하이픈 형식은 정규화 */
+function normalizePrxyCtrtCn(raw: unknown): string | null {
+    if (raw === null || raw === undefined) return null;
+    const s = String(raw).trim().replace(/\s/g, '');
+    if (s === '' || s === '~') return null;
+    const dashed = s.match(/^(\d{4})-(\d{2})-(\d{2})~(\d{4})-(\d{2})-(\d{2})$/);
+    if (dashed) {
+        return `${dashed[1]}${dashed[2]}${dashed[3]}~${dashed[4]}${dashed[5]}${dashed[6]}`;
+    }
+    return s;
+}
+
+function isValidPrxyCtrtCn(value: string | null): boolean {
+    if (value === null) return true;
+    if (!/^\d{8}~\d{8}$/.test(value)) return false;
+    const start = value.slice(0, 8);
+    const end = value.slice(9, 17);
+    return start <= end;
+}
+
+function validatePrxyCtrtCnInRows(rows: Record<string, string | number>[]): string | null {
+    for (let i = 0; i < rows.length; i++) {
+        const normalized = normalizePrxyCtrtCn(rows[i]?.prxyCtrtCn);
+        if (!isValidPrxyCtrtCn(normalized)) {
+            const facilityNm = String(rows[i]?.swtrmtFcltNm ?? '').trim() || `${i + 1}행`;
+            return `위탁계약기간은 yyyymmdd~yyyymmdd 형식으로 입력해 주세요.\n(대상: ${facilityNm})`;
+        }
+    }
+    return null;
+}
+
 // 하수도 통계 관리 > 06. 공공하수처리시설
 const PublicSewageFacilityInp = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
@@ -220,6 +251,11 @@ const PublicSewageFacilityInp = () => {
                 alert('해당사항 없음을 체크해주세요.');
                 return;
             }
+            const prxyCtrtCnError = validatePrxyCtrtCnInRows(currentData);
+            if (prxyCtrtCnError) {
+                alert(prxyCtrtCnError);
+                return;
+            }
             const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
             if (verificationBlocked) {
                 alert(verificationBlocked);
@@ -258,7 +294,7 @@ const PublicSewageFacilityInp = () => {
             prcsPhysCpct: toNumber(d.prcsPhysCpct),
             prcsBoilCpct: toNumber(d.prcsBoilCpct),
             prcsAltdCpct: toNumber(d.prcsAltdCpct),
-            prxyCtrtCn: d.prxyCtrtCn === '' ? null : toNullableString(d.prxyCtrtCn),
+            prxyCtrtCn: normalizePrxyCtrtCn(d.prxyCtrtCn),
             sftyAcdntEvntcsCnt: toNumber(d.sftyAcdntEvntcsCnt),
             rmrk: toNullableString(d.rmrk),
         }));
@@ -298,6 +334,12 @@ const PublicSewageFacilityInp = () => {
         const currentData =
             st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
 
+        const prxyCtrtCnError = validatePrxyCtrtCnInRows(currentData);
+        if (prxyCtrtCnError) {
+            alert(prxyCtrtCnError);
+            return;
+        }
+
         const submitList = treatAsNoApplicable ? [] : buildFacilitySaveList(currentData);
         if (!treatAsNoApplicable && submitList.length === 0) {
             alert('해당사항 없음을 체크해주세요.');
@@ -541,6 +583,11 @@ const PublicSewageFacilityInp = () => {
                 const treatAsNoApplicable = noApplicable || isNotApplicable;
                 const currentData =
                     st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
+                const prxyCtrtCnError = validatePrxyCtrtCnInRows(currentData);
+                if (prxyCtrtCnError) {
+                    alert(prxyCtrtCnError);
+                    return;
+                }
                 const saveList = treatAsNoApplicable ? [] : buildFacilitySaveList(currentData);
                 if (!treatAsNoApplicable && saveList.length === 0) {
                     alert('해당사항 없음을 체크해주세요.');
@@ -556,7 +603,7 @@ const PublicSewageFacilityInp = () => {
                         sggNm: lastSearchedValues.gugun === 'ALL' ? '' : lastSearchedValues.gugun ?? '',
                         sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? 'superAdmin' : '',
+                        ...(isAdminInfo ? { superAdmin: 'superAdmin' } : {}),
                         noApplicable,
                         saveList,
                     };
diff --git a/apps/st/src/components/statistics/input/SewagePipeInp.tsx b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
index d49ba291a..57d3fc8e1 100644
--- a/apps/st/src/components/statistics/input/SewagePipeInp.tsx
+++ b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
@@ -1670,7 +1670,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1750,7 +1750,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1835,7 +1835,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1898,7 +1898,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1977,7 +1977,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
diff --git a/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx b/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
index 518f2da32..84c24aec4 100644
--- a/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
+++ b/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
@@ -81,7 +81,7 @@ const RegistDialog = memo(
                 trgtStatsCd: detailData?.data.trgtStatsCd ?? '',
                 trgtStatsNm: detailData?.data.trgtStatsNm ?? '',
                 dcptDigtCnt: detailData?.data.dcptDigtCnt ?? 0,
-                dcptPrcsMthCd: detailData?.data.dcptPrcsMthCd ?? '',
+                dcptPrcsMthCd: detailData?.data.dcptPrcsMthCd ?? null,
                 useYn: detailData?.data.useYn ?? 'Y',
                 rgtrId: detailData?.data.rgtrId ?? '',
                 regDt: detailData?.data.regDt ?? '',
diff --git a/apps/st/src/components/type/DataGrid.type.ts b/apps/st/src/components/type/DataGrid.type.ts
index ea4769dcb..47d0179fc 100644
--- a/apps/st/src/components/type/DataGrid.type.ts
+++ b/apps/st/src/components/type/DataGrid.type.ts
@@ -233,7 +233,7 @@ export type ColumnConfig = {
     datetimeFormat?: string;
     /** RealGrid 셀 편집기 */
     editor?: {
-        type?: "dropdown" | "list" | "date";
+        type?: "dropdown" | "list" | "date" | "text" | "line";
         domainOnly?: boolean;
         textReadOnly?: boolean;
         commitOnSelect?: boolean;
@@ -242,6 +242,18 @@ export type ColumnConfig = {
         datetimeFormat?: string;
         values?: string[];
         labels?: string[];
+        /** RealGrid 입력 마스크 (예: 위탁계약기간 `yyyymmdd~yyyymmdd`) */
+        mask?:
+            | string
+            | {
+                  editMask?: string;
+                  includedFormat?: boolean;
+                  allowEmpty?: boolean;
+                  placeHolder?: string;
+                  overWrite?: boolean;
+                  showInvalidFormatMessage?: boolean;
+                  invalidFormatMessage?: string;
+              };
     };
     footer?:
     | {
diff --git a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
index d9943bbd6..82198b336 100644
--- a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
+++ b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
@@ -145,7 +145,20 @@ export const PublicSewageFactColumn = {
         // 위탁현황
         { name: 'prxyBzentyNmCn', fieldName: 'prxyBzentyNmCn', header: { text: '위탁업체명' }, editable: false, styleName: 'rg-cell-readonly' },
         { name: 'cnsgnCstVl', fieldName: 'cnsgnCstVl', header: { text: '위탁비용(백만원/년)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
-        { name: 'prxyCtrtCn', fieldName: 'prxyCtrtCn', header: { text: '위탁계약기간' } },
+        {
+            name: 'prxyCtrtCn',
+            fieldName: 'prxyCtrtCn',
+            header: { text: '위탁계약기간\n(yyyymmdd~yyyymmdd)' },
+            editor: {
+                mask: {
+                    editMask: '00000000~00000000',
+                    includedFormat: true,
+                    allowEmpty: true,
+                    placeHolder: 'yyyymmdd~yyyymmdd',
+                    overWrite: true,
+                },
+            },
+        },
         
         // 기타
         { name: 'intgPrcsFcltCn', fieldName: 'intgPrcsFcltCn', header: { text: '중심처리시설' }, editable: false, styleName: 'rg-cell-readonly' },
diff --git a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
index c4af5d5a6..7d7d6c7ba 100644
--- a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
+++ b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
@@ -4,7 +4,7 @@ export const PrivateSewageTab1ColumnConfig = {
     tabKey: "ST00080001",
     tabLabel: "처리용량별 오수처리시설",
     rowStartNum: 3,
-    fixedColumns: 3,
+    fixedColumns: 2,
     columns: [
         { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
         { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
index af0afc329..279baed23 100644
--- a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
@@ -4,7 +4,7 @@ export const SewerageOrgCauseTab4ColumnConfig = {
     tabKey: "ST00090004",
     tabLabel: "원인자부담금",
     rowStartNum: 3,
-    fixedColumns: 3,
+    fixedColumns: 1,
     columns: [
         { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
         { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
index 5bfe56b94..03ce956b5 100644
--- a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
@@ -4,7 +4,7 @@ export const SewerageUsageFeeTab3ColumnConfig = {
     tabKey: "ST00090003",
     tabLabel: "하수도 사용료",
     rowStartNum: 3,
-    fixedColumns: 3,
+    fixedColumns: 1,
     columns: [
         { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
         { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
diff --git a/apps/st/src/entities/auth/api/auth-service.ts b/apps/st/src/entities/auth/api/auth-service.ts
index 48ead6a84..c79034a70 100644
--- a/apps/st/src/entities/auth/api/auth-service.ts
+++ b/apps/st/src/entities/auth/api/auth-service.ts
@@ -5,17 +5,12 @@ import {
     ENDPOINT,
 } from "@/shared/config";
 import { getCookie } from "@/shared/lib";
-import {
-    type AuthPayload,
-    type AuthService,
-    getRemainingMs,
-} from "@common/auth";
+import { type AuthPayload, type AuthService } from "@common/auth";
 
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
 import {
     clearRefreshTimer,
-    removeToken,
     setToken,
-    setupRefreshTimer,
     tokenManager,
 } from "../lib/token-manager";
 
@@ -24,7 +19,10 @@ import { clearTabStorePersist } from "@/store/tab-store";
 async function login(payload: AuthPayload): Promise<void> {
     const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+            "Content-Type": "application/json",
+            "X-Device-Id": getOrCreateDeviceId(),
+        },
         body: JSON.stringify(payload),
     });
 
@@ -45,10 +43,10 @@ async function login(payload: AuthPayload): Promise<void> {
     setToken(CLAIM_NAME, accessToken);
     setToken(AUTH_USER_ID, tokenId);
 
-    const remainingMs = getRemainingMs(accessToken);
-    if (remainingMs > 0) {
-        setupRefreshTimer(silentRefresh, remainingMs);
-    }
+    // const remainingMs = getRemainingMs(accessToken);
+    // if (remainingMs > 0) {
+    //     setupRefreshTimer(silentRefresh, remainingMs);
+    // }
 }
 
 async function silentRefresh(): Promise<void> {
@@ -56,7 +54,12 @@ async function silentRefresh(): Promise<void> {
     try {
         const response = await fetch(
             `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-            { method: "PUT" },
+            {
+                method: "PUT",
+                headers: {
+                    "X-Device-Id": getOrCreateDeviceId(),
+                },
+            },
         );
 
         const data = await response.json();
@@ -75,10 +78,10 @@ async function silentRefresh(): Promise<void> {
         setToken(CLAIM_NAME, accessToken);
         setToken(AUTH_USER_ID, tokenId);
 
-        const remainingMs = getRemainingMs(accessToken);
-        if (remainingMs > 0) {
-            setupRefreshTimer(silentRefresh, remainingMs);
-        }
+        // const remainingMs = getRemainingMs(accessToken);
+        // if (remainingMs > 0) {
+        //     setupRefreshTimer(silentRefresh, remainingMs);
+        // }
     } catch (error) {
         console.error(
             `[silentRefresh] Failed at ${new Date().toISOString()}`,
@@ -93,8 +96,7 @@ async function silentRefresh(): Promise<void> {
 
 export async function logout(): Promise<void> {
     tokenManager.clearAuthToken();
-    removeToken("site-id-key");
-    removeToken("site-theme-key");
+    clearDeviceId();
 
     if (typeof window !== "undefined") {
         window.dispatchEvent(new CustomEvent("auth:logout"));
diff --git a/apps/st/src/entities/auth/lib/device-id.ts b/apps/st/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..a3b1aa800
--- /dev/null
+++ b/apps/st/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+    if (typeof window === "undefined") return "";
+
+    const existing = localStorage.getItem(DEVICE_ID_KEY);
+    if (existing) return existing;
+
+    const id = uuidv4();
+    localStorage.setItem(DEVICE_ID_KEY, id);
+    return id;
+}
+
+export function clearDeviceId(): void {
+    if (typeof window === "undefined") return;
+
+    localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx b/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx
index 6a5e3602d..b678099d3 100644
--- a/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx
+++ b/apps/st/src/pages/statistics/ui/panels/schedule-info-panel.tsx
@@ -84,7 +84,7 @@ export function ScheduleInfoPanel({ params }: ScheduleInfoPanelProps) {
                             <div className="space-y-2">
                                 <div className="flex items-center justify-between rounded-sm border border-border p-3">
                                     <Badge size="lg" className="font-semibold">
-                                        {data.inptSeCd}차 입력기간
+                                        입력기간
                                     </Badge>
                                     <p className="text-2xl">
                                         {dayjs(data.inptBgngYmd).format(
@@ -102,7 +102,7 @@ export function ScheduleInfoPanel({ params }: ScheduleInfoPanelProps) {
                                         color="gray"
                                         className="font-semibold"
                                     >
-                                        {data.vrfcSeCd}차 검증기간
+                                        검증기간
                                     </Badge>
                                     <p className="text-2xl">
                                         {dayjs(data.vrfcBgngYmd).format(
diff --git a/apps/wr/.env.local b/apps/wr/.env.local
index 96b66b536..d60b49979 100644
--- a/apps/wr/.env.local
+++ b/apps/wr/.env.local
@@ -6,17 +6,17 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://localhost:3001
 NEXT_PUBLIC_SUB_DOMAIN = http://localhost:13000
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-# NEXT_PUBLIC_FO_SERVER_API_URL = http://localhost:8883/operation-service/api/v1
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+SERVER_API_URL = http://dev.onasys.co.kr:8000
+FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+# FO_SERVER_API_URL = http://localhost:8883/operation-service/api/v1
+CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-# NEXT_PUBLIC_WR_SERVER_API_URL = http://localhost:8883/reuse-service/api/v1
-NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
-# NEXT_PUBLIC_SEWERAGE_API_URL=http://localhost:8883/sewerage-service
+WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+# WR_SERVER_API_URL = http://localhost:8883/reuse-service/api/v1
+SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+# SEWERAGE_API_URL=http://localhost:8883/sewerage-service
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 # NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
diff --git a/apps/wr/.env.mindone b/apps/wr/.env.mindone
index f5e3b6d7e..d6ccb9621 100644
--- a/apps/wr/.env.mindone
+++ b/apps/wr/.env.mindone
@@ -6,14 +6,14 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11301
 NEXT_PUBLIC_SUB_DOMAIN = http://con.mind-one.co.kr:13000
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+SERVER_API_URL = http://dev.onasys.co.kr:8000
+FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /auth/login
diff --git a/apps/wr/.env.production b/apps/wr/.env.production
index 934f1e6a5..14641581d 100644
--- a/apps/wr/.env.production
+++ b/apps/wr/.env.production
@@ -7,17 +7,18 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devtiger.hasuon.or.kr
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
-NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
-NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
-NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
+WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
+SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
 NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
 NEXT_PUBLIC_HASUDOINFO = https://www.hasudoinfo.or.kr
 NEXT_PUBLIC_HASUDOINFO_IN = http://10.101.163.102:8889
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
-NEXT_PRIVATE_WR_ADDRESS_KEY = U01TXOFVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA=
\ No newline at end of file
+NEXT_PRIVATE_WR_ADDRESS_KEY = U01TXOFVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA=
+NEXT_PUBLIC_COOKIE_DOMAIN=.hasuon.or.kr
\ No newline at end of file
diff --git a/apps/wr/.gitignore b/apps/wr/.gitignore
index 8c5b2ee3a..9463ca1b6 100644
--- a/apps/wr/.gitignore
+++ b/apps/wr/.gitignore
@@ -39,3 +39,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#test
+/tests
+/test-results
+.*.log
+playwright.config.ts
diff --git a/apps/wr/AGENTS.md b/apps/wr/AGENTS.md
index 5b690843c..3f05ba328 100644
--- a/apps/wr/AGENTS.md
+++ b/apps/wr/AGENTS.md
@@ -19,6 +19,9 @@ Main technologies:
 - UTF-8 
 - 한글이 깨지지 않도록 주의할 것
 
+## 수정 불가
+- `packages/common/components`는 수정하면 안된다.
+  
 ## 주석 comment
 - 한글 주석을 삭제하지 말 것
 - 신규 component나 함수 자동 생성시 주석을 추가할 것(기본 함수의 역할과 인수 설명)
@@ -37,3 +40,5 @@ apps/
   st
   wr
 
+## local backend src 경로
+D:\iipbs\wr_back_out - http://localhost:8883/reuse-service
diff --git a/apps/wr/app/(auth)/auth/layout.tsx b/apps/wr/app/(auth)/auth/layout.tsx
new file mode 100644
index 000000000..2e676e5e0
--- /dev/null
+++ b/apps/wr/app/(auth)/auth/layout.tsx
@@ -0,0 +1,17 @@
+import "@/src/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/apps/wr/app/(auth)/auth/login/page.tsx b/apps/wr/app/(auth)/auth/login/page.tsx
new file mode 100644
index 000000000..52bab35c9
--- /dev/null
+++ b/apps/wr/app/(auth)/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/src/auth/login";
+export default LoginPage;
diff --git a/apps/wr/app/(with-layout)/jwttest/page.tsx b/apps/wr/app/(with-layout)/jwttest/page.tsx
index a0d9735a0..c9df447ef 100644
--- a/apps/wr/app/(with-layout)/jwttest/page.tsx
+++ b/apps/wr/app/(with-layout)/jwttest/page.tsx
@@ -6,7 +6,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { LoginApi } from "@/src/entities/auth/api/login-service";
+import { authService } from "@/src/entities/auth";
 import { CLAIM_NAME } from "@/src/shared/config";
 import { getCookie } from "@/src/shared/lib";
 
@@ -125,7 +125,7 @@ export default function Page() {
 
   const handleSilentRefresh = async () => {
     try {
-      await LoginApi.silentRefresh();
+      await authService.silentRefresh();
     } catch (error) {
       console.error("Manual silent refresh failed:", error);
     } finally {
@@ -145,7 +145,7 @@ export default function Page() {
       ) {
         isRefreshingRef.current = true;
         try {
-          await LoginApi.silentRefresh();
+          await authService.silentRefresh();
         } catch (error) {
           console.error("JWT test silent refresh failed:", error);
         }
diff --git a/apps/wr/app/(with-layout)/layout.tsx b/apps/wr/app/(with-layout)/layout.tsx
index 1e43f4c32..03d48aa1c 100644
--- a/apps/wr/app/(with-layout)/layout.tsx
+++ b/apps/wr/app/(with-layout)/layout.tsx
@@ -1,22 +1,3 @@
-// "use client";
-// import Base from "../base";
-
-// export default function RootLayout({
-//   children,
-// }: Readonly<{
-//   children: React.ReactNode;
-// }>) {
-
-
-//   return (
-   
-//             <Base>
-//               {children}
-//             </Base>
-    
-//   );
-// }
-
 "use client";
 import { BaseLayout } from "@common/components/ui";
 import { useQueryClient } from "@tanstack/react-query";
@@ -26,6 +7,7 @@ import type { MenuItem } from "../store/common/type/menu";
 import { usePathname, useRouter } from "next/navigation";
 import { useMenuStore } from "@/src/shared/lib";
 import { PageLayout } from "@/src/shared/ui/page-layout";
+import { authService } from "@/src/entities/auth";
 
 export default function RootLayout({
   children,
@@ -48,7 +30,10 @@ export default function RootLayout({
     }
   };
   return (
-    <BaseLayout queryClient={queryClient} currentPath={pathname ?? ""} handleMenuClick={changeMenu}>
+    <BaseLayout queryClient={queryClient}
+      authService={authService}
+      currentPath={pathname ?? ""}
+      handleMenuClick={changeMenu}>
       <PageLayout>
         <MainDiv>{children}</MainDiv>
       </PageLayout>
diff --git a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
index 580edc7a3..6cdef62db 100644
--- a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
@@ -186,11 +186,11 @@ export default function CoSttn() {
       const dmdInfoId = updateData.dmdInfoId;
       const dmdInfoSliceId = `${dmdInfoId.slice(0, 3)}-${dmdInfoId.slice(3, 5)}-${dmdInfoId.slice(5, 10)}-${dmdInfoId.slice(10)}`
       const handleConfirm = async () => {
-        if (!updateData?.dmdCoSn) {
+        if (!updateData?.dmdCoSn || !updateData?.dmdInfoId) {
           alert("수요처 식별값이 없어 비밀번호를 초기화할 수 없습니다.");
           return;
         }
-        const message = await coSttnPwInit(Number(updateData.dmdCoSn));
+        const message = await coSttnPwInit(Number(updateData.dmdCoSn), updateData.dmdInfoId);
         alert(message);
       };
       if (await confirm(t('isInitPw', { dmdInfoId: dmdInfoSliceId }))) {
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
index a93575f33..ad2e4d44b 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
@@ -364,7 +364,7 @@ export default function PublicReuseFaciltyInsert() {
                 headlist={pubFacHeadList}
                 pageSize={DEFAULT_LIST_SIZE}
                 total={pbnstHasuResCount || 20}
-                headName={"공공 하수처리시설 목록"}
+                headName={"시설물 목록"}
                 cellClick={cellClick}
                 onPageChange={(page) => {
                   setSelectRow(undefined);
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
index 37fcab7fc..07b604f9c 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
@@ -165,7 +165,7 @@ export default function Home() {
                 headlist={rain.upHeadList}
                 pageSize={rainRegSize}
                 total={rainResCount}
-                headName={"건축물 목록"}
+                headName={"시설물 목록"}
                 cellClick={(val) => {
                   cellClick(val);
                 }}
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
index 8cdfa1866..95e8702d7 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
@@ -142,7 +142,7 @@ export default function Home() {
                   <Button
                     className={btnClass}
                     onClick={() => {
-                      rswtBdstSearch(searchTxt || "", pageNation,laeSeCd);
+                      rswtBdstSearch(searchTxt || "", 1, laeSeCd);
                     }}
                   >
                     조회
@@ -171,7 +171,7 @@ export default function Home() {
                 headlist={rswt.upHeadList}
                 pageSize={rswtRegSize}
                 total={rswtResCount}
-                headName={"건축물 목록"}
+                headName={"시설물 목록"}
                 cellClick={cellClick}
                 onPageChange={setPageNation}
                 index={rswtTableIndex}
diff --git a/apps/wr/app/api/proxy/[...url]/route.ts b/apps/wr/app/api/proxy/[...url]/route.ts
index 8fabc89dc..36c611459 100644
--- a/apps/wr/app/api/proxy/[...url]/route.ts
+++ b/apps/wr/app/api/proxy/[...url]/route.ts
@@ -1,116 +1,115 @@
-/**
- * 📄 Proxy Route
- * API 프록시 라우트
- *
- * - 서버 API로의 요청 프록시 처리
- * - 쿠키 기반 인증 토큰 및 리프레시 토큰 관리
- * - POST 및 PUT 요청 핸들링
- * - 사용자 인증 정보 검증 및 응답 처리
- * - 에러 핸들링 및 상태 코드 반환
- * - 사이트 ID 및 헤더 설정
- */
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    COOKIE_DOMAIN,
+    REFRESH_TOKEN,
+    SERVER_API_URL,
+    SITE_ID,
+} from "@/src/shared/config";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
-const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
-const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
-const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
-const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "WR";
-
 async function handler(
-  request: Request,
-  params: { url: string[] },
-  method: "GET" | "POST" | "PUT" | "DELETE",
+    request: Request,
+    params: { url: string[] },
+    method: "GET" | "POST" | "PUT" | "DELETE",
 ) {
-  const cookieStore = await cookies();
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    "X-Site-Id": SITE_ID,
-  };
-  let body = {};
-  const isRefreshHandler = params.url.includes("refresh");
-
-  // silent refresh
-  if (isRefreshHandler) {
-    const refreshToken = cookieStore.get(REFRESH_TOKEN); // "refresh-token"
-    console.log("refreshToken", refreshToken?.value);
-    headers[CLAIM_NAME] = refreshToken?.value ?? ""; // "Authorization"
-
-    if (!headers[CLAIM_NAME]) { // "Authorization"
-      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
+    const cookieStore = await cookies();
+    const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        "X-Site-Id": SITE_ID,
+    };
+    const deviceId = request.headers.get("X-Device-Id");
+    if (deviceId) {
+        headers["X-Device-Id"] = deviceId;
     }
-  }
+        
+    let body = {};
+    const isRefreshHandler = params.url.includes("refresh");
 
-  try {
-    if (!isRefreshHandler) {
-      body = await request.json();
+    // silent refresh
+    if (isRefreshHandler) {
+        const refreshToken = cookieStore.get(REFRESH_TOKEN);
+        headers[CLAIM_NAME] = refreshToken?.value ?? "";
+
+        if (!headers[CLAIM_NAME]) {
+            return NextResponse.json(
+                { message: "Can't refresh" },
+                { status: 401 },
+            );
+        }
     }
 
-    const result = await fetch(`${SERVER_API_URL}/${params.url.join("/")}`, {
-      method,
-      headers,
-      body: JSON.stringify(body),
-    });
-// console.log(result);
-    if (!result.ok) {
-      return NextResponse.json(
-        { message: "first Invalid Credentials" },
-        { status: result.status },
-      );
+    try {
+        if (!isRefreshHandler) {
+            body = await request.json();
+        }
+
+        const result = await fetch(
+            `${SERVER_API_URL}/${params.url.join("/")}`,
+            {
+                method,
+                headers,
+                body: JSON.stringify(body),
+            },
+        );
+
+        if (!result.ok) {
+            return NextResponse.json(
+                { message: "Invalid Credentials" },
+                { status: 401 },
+            );
+        }
+
+        const accessToken = result.headers.get(ACCESS_TOKEN);
+        const refreshToken = result.headers.get(REFRESH_TOKEN);
+        const userId = result.headers.get(AUTH_USER_ID);
+
+        if (accessToken && userId) {
+            const response = NextResponse.json({
+                [ACCESS_TOKEN]: accessToken,
+                [AUTH_USER_ID]: userId,
+            });
+
+            if (refreshToken) {
+                cookieStore.set(REFRESH_TOKEN, refreshToken, {
+                    httpOnly: true,
+                    sameSite: "lax",
+                    domain: getCookieDomain(),
+                    path: "/",
+                });
+            }
+
+            return response;
+        }
+
+        return NextResponse.json(
+            { message: "Invalid Credentials" },
+            { status: 401 },
+        );
+    } catch (error) {
+        return NextResponse.json(
+            { message: "Server Error", error },
+            { status: 500 },
+        );
     }
-
-    const accessToken = result.headers.get(ACCESS_TOKEN); // "access-token"
-    const refreshToken = result.headers.get(REFRESH_TOKEN); // "refresh-token" 신규 받아온 token
-    const userId = result.headers.get(AUTH_USER_ID); // "token-id"
-
-    if (accessToken && userId) {
-      const response = NextResponse.json({
-        [ACCESS_TOKEN]: accessToken,
-        [AUTH_USER_ID]: userId,
-      });
-
-      if (refreshToken) {
-        response.cookies.set(REFRESH_TOKEN, refreshToken, {
-          httpOnly: true,
-          sameSite: "lax", // 다른 사이트에서 들어오는 모든 요청에 대해 쿠키를 보내지 않는 가장 강력한 설정
-          domain: getCookieDomain(),
-          path: "/",
-        });
-        console.log("refresh cookie setting : " + refreshToken);
-      }
-
-      return response;
-    }
-
-    return NextResponse.json(
-      { message: "Invalid Credentials" },
-      { status: 401 },
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Server Error", error },
-      { status: 500 },
-    );
-  }
 }
 
 export async function POST(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "POST");
+    const params = await props.params;
+    return handler(request, params, "POST");
 }
 
 export async function PUT(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "PUT");
+    const params = await props.params;
+    return handler(request, params, "PUT");
 }
 
 function getCookieDomain(): string | undefined {
@@ -122,4 +121,4 @@ function getCookieDomain(): string | undefined {
   if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
 
   return hostname;
-}
+}
\ No newline at end of file
diff --git a/apps/wr/app/auth/login/page.tsx b/apps/wr/app/auth/login/page.tsx
deleted file mode 100644
index 0dbc42284..000000000
--- a/apps/wr/app/auth/login/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { LoginPage } from "@/src/features/auth/login";
-export default LoginPage;
diff --git a/apps/wr/app/auth/login/route-bak.ts b/apps/wr/app/auth/login/route-bak.ts
deleted file mode 100644
index 65bbce15e..000000000
--- a/apps/wr/app/auth/login/route-bak.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-export async function GET(request: NextRequest) {
-  const hostname = request.nextUrl.hostname;
-  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
-
-  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
-    return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경
-  } else {
-    return NextResponse.redirect(new URL(redirectUrl)); // 공단 환경
-  }
-}
\ No newline at end of file
diff --git a/apps/wr/app/store/matDmd/coSttn/index.tsx b/apps/wr/app/store/matDmd/coSttn/index.tsx
index aa34f13a3..fd9baab73 100644
--- a/apps/wr/app/store/matDmd/coSttn/index.tsx
+++ b/apps/wr/app/store/matDmd/coSttn/index.tsx
@@ -1,6 +1,7 @@
 import type { CommonTableProps } from "@/app/store/common/type/header";
 import { fetchType, getFetchWithCount, putFectch } from "@/components/lib/api";
 import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
+import { sha512 } from "js-sha512";
 import { coSttHeadListExport, coSttNodeListExport } from "./headList";
 
 // 테이블 헤드 리스트
@@ -24,7 +25,7 @@ type coSttnActions = {
   coSttnInit: (pageNo: string, pageCnt: string, con: string) => void;
   coSttnSearch: (pageNo: string, pageCnt: string, con: string) => void;
   coSttnTxtSearch: (pageNo: string, pageCnt: string, con: string, txt: string) => void;
-  coSttnPwInit: (dmdCoSn: number) => Promise<string>;
+  coSttnPwInit: (dmdCoSn: number, dmdInfoId: string) => Promise<string>;
 };
 
 export type coSttnType = coSttnState & coSttnActions;
@@ -122,9 +123,12 @@ export const coSttnActionsExport: (set: any) => coSttnActions = (
         console.log("error", erTxt);
       }
     },
-    coSttnPwInit: async (dmdCoSn: number) => {
+    coSttnPwInit: async (dmdCoSn: number, dmdInfoId: string) => {
       try {
-        const response = await putFectch(`/reuseFc/request/chgPassword/${dmdCoSn}`,[])
+        const initialPasswordHash = sha512.hex(dmdInfoId.substring(0, 10));
+        const response = await putFectch(`/reuseFc/request/chgPassword/${dmdCoSn}`, {
+          dmdAplyPswd: initialPasswordHash,
+        })
         if (response.status === 200) {
           return "비밀번호가 초기화되었습니다.";
         } else {
diff --git a/apps/wr/components/lib/api/index.ts b/apps/wr/components/lib/api/index.ts
index 44eef5924..fba544685 100644
--- a/apps/wr/components/lib/api/index.ts
+++ b/apps/wr/components/lib/api/index.ts
@@ -1,6 +1,7 @@
 import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "../config/";
 import { CLAIM_NAME, SITE_ID } from "@/src/shared/config";
 import { tokenManager } from "@/src/entities/auth/lib/token-manager";
+import { getRemainingMs } from "@common/auth";
 
 export const fetchType = {
   COMMON: "common",
@@ -20,7 +21,8 @@ const getDefaultHeaders = (headers: HeadersInit = {}) => ({
 const handleUnauthorizedResponse = () => {
   if (typeof window === "undefined") return;
 
-  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const accessToken = tokenManager.getToken(CLAIM_NAME);
+  const remainingMs = accessToken ? getRemainingMs(accessToken) : null;
   const isExpired = remainingMs === null || remainingMs <= 0;
 
   if (!isExpired) return;
diff --git a/apps/wr/middleware.ts b/apps/wr/middleware.ts
index 498e45fed..b62159b83 100644
--- a/apps/wr/middleware.ts
+++ b/apps/wr/middleware.ts
@@ -7,9 +7,9 @@ import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
 const serverApiUrl = CS_URL;
 const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
 const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
-const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
-const REUSE_API_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL || "";
-const OPERATION_API_URL = process.env.NEXT_PUBLIC_FO_SERVER_API_URL || "";
+const SEWERAGE_API_URL = process.env.SEWERAGE_API_URL || "";
+const REUSE_API_URL = process.env.WR_SERVER_API_URL || "";
+const OPERATION_API_URL = process.env.FO_SERVER_API_URL || "";
 const BUSINESS_JUSO_API_URL = process.env.NEXT_PUBLIC_FINDADRESS_URL || "";
 const AdressKey = process.env.NEXT_PRIVATE_WR_ADDRESS_KEY || "";
 
diff --git a/apps/wr/package.json b/apps/wr/package.json
index 662585887..812bc6fa0 100644
--- a/apps/wr/package.json
+++ b/apps/wr/package.json
@@ -8,12 +8,18 @@
     "start": "next start -p 3001",
     "start:sn": "next start -p 3001",
     "start:wr": "next start -p 3001",
-    "lint": "next lint"
+    "lint": "next lint",
+    "dev:e2e": "next dev --port 3017",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "@common/assets": "workspace:*",
-    "@common/business_components": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
+    "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
+    "@common/business_components": "workspace:*",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
@@ -27,6 +33,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "i18next": "^25.3.2",
+    "js-sha512": "^0.9.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
     "moment": "^2.30.1",
@@ -42,6 +49,7 @@
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
     "tus-js-client": "^4.3.1",
+    "uuid": "^14.0.1",
     "xlsx": "^0.18.5",
     "xlsx-populate": "^1.21.0",
     "zod": "^3.24.2",
diff --git a/apps/wr/src/app/index.tsx b/apps/wr/src/app/index.tsx
index 4cf2ad5fa..692b55ef0 100644
--- a/apps/wr/src/app/index.tsx
+++ b/apps/wr/src/app/index.tsx
@@ -1,9 +1,5 @@
 import "./styles/base.css";
 import "./styles/components.css";
-import "./styles/components-black.css";
-import "./styles/components-blue.css";
-import "./styles/components-green.css";
-import "./styles/components-red.css";
 import "@fontsource-variable/noto-sans-kr";
 
 import { AppProvider } from "./providers";
diff --git a/apps/wr/src/app/styles/components.css b/apps/wr/src/app/styles/components.css
index 60549b226..fe7565b5a 100644
--- a/apps/wr/src/app/styles/components.css
+++ b/apps/wr/src/app/styles/components.css
@@ -18,7 +18,162 @@
     @apply mt-4 border border-border bg-[#eaf3fb] p-2 text-center text-xl font-medium text-[#647784];
   }
 
-  
+  [data-theme="black"] {
+    .card {
+      color: #fff;
+      background-color: #0a0a0a !important;
+    }
+    form {
+      color: rgb(255 255 255);
+    }
+    label {
+      color: rgb(241, 241, 241);
+    }
+    input {
+      height: 3.2rem;
+      background-color: #1a1a1a;
+      border: 1px solid #262626;
+      border-radius: 4px;
+    }
+    input.text-gray-600 {
+      color: #f1f1f1;
+    }
+    button[role="combobox"] {
+      color: #f1f1f1;
+      background-color: rgb(26, 26, 26);
+    }
+    div [role="tablist"] {
+      border: unset;
+      gap: 4px;
+    }
+    .tabs-trigger[data-state="inactive"] {
+      color: #a4b7bf;
+      background: #55595d;
+    }
+    .tabs-trigger[data-state="inactive"]:hover {
+      color: #6bbaff;
+      background: #4c4f52;
+    }
+    .card-border {
+      box-shadow: 0 0 10px -1px #0000000f;
+      border: 1px solid #393939;
+    }
+    a[aria-current="page"] {
+      background-color: rgb(32, 148, 250);
+      color: #000;
+    }
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#5e7b9c] text-[#fff];
+    }
+
+    .gis-layer-panel {
+      background: #111214;
+      border-right-color: #2f3136;
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
+    }
+
+    .gis-layer-panel-title {
+      color: #f3f4f6;
+    }
+
+    .gis-layer-panel hr {
+      border-color: #2f3136;
+    }
+
+    .gis-layer-row {
+      color: #e5e7eb;
+    }
+
+    .gis-layer-row:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .gis-layer-row span,
+    .gis-layer-row label {
+      color: #e5e7eb !important;
+    }
+
+    .gis-layer-row input[type="checkbox"] {
+      accent-color: #c026d3;
+    }
+
+    .gis-layer-action-button {
+      background: #1a1c20;
+      border-color: #3b82f6;
+      color: #cfe3ff;
+    }
+
+    .gis-layer-action-button:hover {
+      background: #23262b;
+    }
+
+    .gis-layer-setting {
+      background: #111214;
+      border-top: 1px solid #2f3136;
+    }
+
+    .gis-layer-toggle {
+      background: #111214;
+      border-color: #2f3136;
+      color: #f3f4f6;
+    }
+
+    .gis-layer-toggle:hover {
+      background: #1a1c20;
+    }
+
+    input[type="file"] {
+      background-color: #1a1a1a;
+      border-color: #262626;
+      color: #f1f1f1;
+    }
+  }
+
+  [data-theme="blue"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#eaf3fb] text-[#647784];
+    }
+  }
+
+  [data-theme="green"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#ebf7f7] text-[#64908f];
+    }
+  }
+
+  [data-theme="red"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#f6f6f9] text-[#808080];
+    }
+  }
 
   input[type="file"] {
     @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
diff --git a/apps/wr/src/features/auth/login/index.ts b/apps/wr/src/auth/login/index.ts
similarity index 100%
rename from apps/wr/src/features/auth/login/index.ts
rename to apps/wr/src/auth/login/index.ts
diff --git a/apps/wr/src/auth/login/ui/login-page.tsx b/apps/wr/src/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..6398700b9
--- /dev/null
+++ b/apps/wr/src/auth/login/ui/login-page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { authService } from "@/src/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setErrorMessage("");
+
+        const formData = new FormData(e.target as HTMLFormElement);
+        const userId = formData.get("id") as string;
+        const password = formData.get("password") as string;
+
+        try {
+            await authService.login({ userId, password });
+            window.location.href = "/";
+        } catch (error) {
+            const message =
+                error instanceof Error
+                    ? error.message
+                    : "로그인에 실패했습니다.";
+            setErrorMessage(message);
+        }
+    };
+
+    return (
+        <div className="login fx">
+            <div className="left_box fx">
+                <div className="text">
+                    <h1>
+                        유역하수도통합플랫폼
+                        <br />
+                        <span>하수도통계 관리시스템</span>
+                    </h1>
+                    <p>
+                        유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을
+                        환영합니다.
+                    </p>
+                </div>
+                <div className="img">
+                    <Image
+                        src={images.logo}
+                        width={229}
+                        height={46}
+                        alt="logo"
+                    />
+                </div>
+            </div>
+            <form
+                id="loginForm"
+                name="loginForm"
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                <div className="login_box fx">
+                    <ul className="fx">
+                        <li>
+                            <h2>ID</h2>
+                            <div className="input_st st1">
+                                <i className="diveicon di-account-box" />
+                                <input
+                                    type="text"
+                                    className="id"
+                                    title="아이디를 입력하세요."
+                                    id="id"
+                                    name="id"
+                                    maxLength={12}
+                                />
+                            </div>
+                        </li>
+                        <li>
+                            <h2>PASSWORD</h2>
+                            <div className="input_st st2">
+                                <i className="diveicon di-key" />
+                                <input
+                                    type="password"
+                                    className="input_style"
+                                    maxLength={25}
+                                    title="비밀번호를 입력하세요."
+                                    id="password"
+                                    name="password"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                    <div className="bottom_box fx">
+                        <div className="checks fx">
+                            <input
+                                type="checkbox"
+                                name="checkId"
+                                title="로그인ID 저장여부"
+                                id="checkId"
+                            />
+                            <label htmlFor="checkId">아이디저장</label>
+                        </div>
+                        {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+                    </div>
+                    {errorMessage && (
+                        <div className="error_message">
+                            <span>{errorMessage}</span>
+                        </div>
+                    )}
+                    <button type="submit" className="login_btn fx">
+                        <span>LOGIN</span>
+                    </button>
+                    <div className="footer">
+                        <div className="copy fx">
+                            <p>copyright © 2023 KECO. All rights reserved.</p>
+                        </div>
+                        <div className="fot_btn fx">
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                                target="_blank"
+                            >
+                                개인정보처리방침
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                                target="_blank"
+                            >
+                                저작권정책안내
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                                target="_blank"
+                            >
+                                이메일무단수집거부
+                            </a>
+                        </div>
+                        <p className="addr fx">
+                            <span>
+                                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                                종합환경연구단지)
+                            </span>
+                            <span>
+                                전화 : (시스템) 032-590-4321, 3752, 4314 / (통
+                                계) 032-590-3723, 3722
+                            </span>
+                            <span>팩스 :032-590-3729</span>
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+export { LoginPage };
diff --git a/apps/sn/src/features/auth/login/ui/login.css b/apps/wr/src/auth/login/ui/login.css
similarity index 94%
rename from apps/sn/src/features/auth/login/ui/login.css
rename to apps/wr/src/auth/login/ui/login.css
index af73c9c68..e65180ae7 100644
--- a/apps/sn/src/features/auth/login/ui/login.css
+++ b/apps/wr/src/auth/login/ui/login.css
@@ -1,4 +1,4 @@
-/**
+/**
 * OLYM Cascading Style Sheets
 * File Name : login.css
 * Description : 로그인 스타일시트
@@ -24,7 +24,8 @@ body {
 }
 .login .left_box {
   width: 100%;
-  background: url(/images/bg_login.jpg) no-repeat center/cover;
+  background: url(../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
   flex-direction: column;
   justify-content: space-between;
   padding: 7% 5% 5% 5%;
@@ -117,6 +118,20 @@ body {
   color: #327af5;
   font-size: 20px;
 }
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
 .login .login_box .login_btn {
   position: relative;
   border-radius: 5px;
diff --git a/apps/wr/src/entities/auth/api/auth-service.ts b/apps/wr/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..2ea6bab12
--- /dev/null
+++ b/apps/wr/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,115 @@
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { getCookie } from "@/src/shared/lib";
+import {
+    type AuthPayload,
+    type AuthService,
+    getRemainingMs,
+} from "@common/auth";
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
+import {
+    clearRefreshTimer,
+    setToken,
+    setupRefreshTimer,
+    tokenManager,
+} from "../lib/token-manager";
+
+import { clearTabStorePersist } from "@/src/store/tab-store";
+
+async function login(payload: AuthPayload): Promise<void> {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "X-Device-Id": getOrCreateDeviceId(),
+        },
+        body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+        throw new Error("인증 토큰을 받지 못했습니다.");
+    }
+
+    const prevTokenId = getCookie(AUTH_USER_ID);
+    if (prevTokenId !== undefined && prevTokenId !== tokenId) {
+        clearTabStorePersist();
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+        setupRefreshTimer(silentRefresh, remainingMs);
+    }
+}
+
+async function silentRefresh(): Promise<void> {
+    console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+    try {
+        const response = await fetch(
+            `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+            {
+                method: "PUT",
+                headers: {
+                    "X-Device-Id": getOrCreateDeviceId(),
+                },
+            },
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+        }
+
+        const accessToken = data[ACCESS_TOKEN];
+        const tokenId = data[AUTH_USER_ID];
+
+        if (!accessToken || !tokenId) {
+            throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+        }
+
+        setToken(CLAIM_NAME, accessToken);
+        setToken(AUTH_USER_ID, tokenId);
+
+        const remainingMs = getRemainingMs(accessToken);
+        if (remainingMs > 0) {
+            setupRefreshTimer(silentRefresh, remainingMs);
+        }
+    } catch (error) {
+        console.error(
+            `[silentRefresh] Failed at ${new Date().toISOString()}`,
+            error,
+        );
+        tokenManager.clearAuthToken();
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("auth:logout"));
+        }
+    }
+}
+
+export async function logout(): Promise<void> {
+    tokenManager.clearAuthToken();
+    clearDeviceId();
+
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+}
+
+export const authService: AuthService = {
+    login,
+    silentRefresh,
+    declineSessionExtend: clearRefreshTimer,
+    logout,
+};
diff --git a/apps/wr/src/entities/auth/api/login-service.ts b/apps/wr/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 92535f7b0..000000000
--- a/apps/wr/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-
-import type { LoginService, ILogin } from "../model/login-interface";
-import { tokenManager } from "../lib/token-manager";
-import { ACCESS_TOKEN, AUTH_USER_ID, SITE_ID, CLAIM_NAME, ENDPOINT,JWT_EXPIRATION_TIME } from "../../../shared/config";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      tokenManager.clearAuthToken();
-      const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data?.message ?? "Login failed");
-      }
-
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-      
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setToken("site-id-key", SITE_ID);
-      tokenManager.setupRefreshTimer(() => this.silentRefresh(),JWT_EXPIRATION_TIME );
-    } catch (error) {
-
-      throw new Error(`Login failed: ${error}`);
-    }
-  }
-
-
-  public async silentRefresh(): Promise<void> {
-    console.log('  silentRefresh ')
-    
-    try {
-      const response = await fetch(
-        `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        {
-          method: "PUT",
-        },
-      );
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data?.message ?? "Silent refresh failed");
-      }
-
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-     
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setupRefreshTimer(() => this.silentRefresh(),JWT_EXPIRATION_TIME);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/wr/src/entities/auth/index.ts b/apps/wr/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/wr/src/entities/auth/index.ts
+++ b/apps/wr/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/wr/src/entities/auth/lib/auth-wrapper.tsx b/apps/wr/src/entities/auth/lib/auth-wrapper.tsx
index 796cd44a9..0dc0661ea 100644
--- a/apps/wr/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/wr/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,69 +1,88 @@
 "use client";
 
 import { useEffect } from "react";
-import { usePathname } from "next/navigation";
-import { client } from "../../../shared/api";
-import type { IUserInfo } from "../../../shared/store";
-import { useUserStore } from "../../../shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "../../../shared/config";
-import { isAtLoginRedirectUrl } from "@common/network";
-import { getCookie } from "../../../shared/lib";
+import { useRouter } from "next/navigation";
 
-const LOGIN_PAGE_URL =
-  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+import { isAxiosError } from "axios";
+
+import { client } from "@/src/shared/api";
+import {
+    AUTH_LOGIN_REDIRECT_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { useUserStore } from "@/src/shared/lib";
+import type { IUserInfo } from "@/src/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const pathname = usePathname();
-  const { userInfo, setUserInfo } = useUserStore((state) => state);
+    const router = useRouter();
+    const userInfo = useUserStore((state) => state.userInfo);
+    const setUserInfo = useUserStore((state) => state.setUserInfo);
 
-  async function authCheck() {
-    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-      return;
-    }
+    useEffect(() => {
+        // 페이지 새로고침 시 silentRefresh 타이머 복구
+        const token = getToken(CLAIM_NAME);
+        if (token) {
+            const remainingMs = getRemainingMs(token);
+            if (remainingMs > 0) {
+                console.log(
+                    `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+                );
+                setupRefreshTimer(authService.silentRefresh, remainingMs);
+            }
+        }
 
-    const userId = getCookie(AUTH_USER_ID);
-    if (!userId) {
-      throw new Error("Missing required authentication tokens");
-    }
+        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
 
-    const response = await client.get<IUserInfo>(
-      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-    );
-    if (!userInfo) setUserInfo(response.data);
-  }
+        async function authCheck() {
+            const userId = getToken(AUTH_USER_ID);
+            if (!userId) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+                return;
+            }
 
-  useEffect(() => {
-    (async () => {
-      try {
-        await authCheck();
-      } catch (error) {
-        console.error(error);
-        setUserInfo(null);
+            if (userInfo) return;
 
-        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) return;
+            const response = await client.get<IUserInfo>(
+                `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+            );
+            setUserInfo(response.data);
+        }
 
-        // const hostname = window.location.hostname;
+        authCheck().catch((error) => {
+            // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+            if (isAxiosError(error) && error.response?.status === 401) return;
 
-        // // 개발 환경에서는 localhost 도메인 사용
-        // if (
-        //   hostname === "localhost" ||
-        //   hostname === "127.0.0.1" ||
-        //   hostname === "con.mind-one.co.kr"
-        // )
-        //   router.push("/auth/login");
+            console.error(error);
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        });
+    }, []);
 
-        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-        // if (hostname.includes("hasuon.or.kr"))
-        //   window.location.assign(LOGIN_PAGE_URL); // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+    // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+    useEffect(() => {
+        function handleAuthLogout() {
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        }
 
-        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
-        window.location.assign(LOGIN_PAGE_URL);
-      }
-    })();
-  }, [pathname]);
+        window.addEventListener("auth:logout", handleAuthLogout);
+        return () =>
+            window.removeEventListener("auth:logout", handleAuthLogout);
+    }, []);
 
-  return <>{children}</>;
+    return <>{children}</>;
 };
 
 export { AuthWrapper };
diff --git a/apps/wr/src/entities/auth/lib/device-id.ts b/apps/wr/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..f844fcbef
--- /dev/null
+++ b/apps/wr/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+    if (typeof window === "undefined") return "";
+
+    const existing = localStorage.getItem(DEVICE_ID_KEY);
+    if (existing) return existing;
+
+    const id = uuidv4();
+    localStorage.setItem(DEVICE_ID_KEY, id);
+    return id;
+}
+
+export function clearDeviceId(): void {
+    if (typeof window === "undefined") return;
+
+    localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/apps/wr/src/entities/auth/lib/token-manager.ts b/apps/wr/src/entities/auth/lib/token-manager.ts
index 919386622..172f2cc3a 100644
--- a/apps/wr/src/entities/auth/lib/token-manager.ts
+++ b/apps/wr/src/entities/auth/lib/token-manager.ts
@@ -1,109 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
+import { authConfig } from "@/src/shared/config/auth";
+import { createTokenManager } from "@common/auth";
 
-type JwtPayload = {
-  sub?: string; // 토큰 subject
-  exp?: number; // 만료 시각(초 단위)
-  iat?: number; // 발급 시각(초 단위)
-  [key: string]: unknown;
-};
+export const tokenManager = createTokenManager(authConfig);
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() {}
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  private parseJwt(token: string): JwtPayload {
-    const parts = token.split(".");
-    if (parts.length !== 3) {
-      throw new Error("유효한 JWT 형식이 아닙니다.");
-    }
-
-    const base64Url = parts[1] ?? ""; // Payload를 가져온다.
-    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
-    const jsonPayload = decodeURIComponent(
-      atob(padded)
-        .split("")
-        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
-        .join("")
-    );
-
-    return JSON.parse(jsonPayload) as JwtPayload;
-  }
-
-  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
-    const token = this.getToken(key);
-    if (!token) {
-      return null;
-    }
-
-    try {
-      const payload = this.parseJwt(token);
-      if (typeof payload.exp !== "number") {
-        return null;
-      }
-
-      return payload.exp * 1000 - Date.now();
-    } catch (error) {
-      console.error("JWT 파싱 오류:", error);
-      return null;
-    }
-  }
-
-  public isExpiredToken(key: string = CLAIM_NAME): boolean {
-    const remainingMs = this.getRemainingMsFromToken(key);
-    return remainingMs === null || remainingMs <= 0;
-  }
-
-  public setToken(key: string, value: string): void {
-    setCookie(key, value, {
-      secure: window.location.protocol === "https:",
-      sameSite: "lax",
-    });
-  }
-
-  public removeToken(key: string): void {
-    removeCookie(key);
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+    getToken,
+    setToken,
+    removeToken,
+    setupRefreshTimer,
+    clearRefreshTimer,
+    getAccessToken,
+    getRefreshToken,
+    getUserId,
+} = tokenManager;
diff --git a/apps/wr/src/entities/menu-authority/index.ts b/apps/wr/src/entities/menu-authority/index.ts
index 2a555b77e..d5991d01c 100644
--- a/apps/wr/src/entities/menu-authority/index.ts
+++ b/apps/wr/src/entities/menu-authority/index.ts
@@ -1,2 +1,9 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export {
+    menuAuthorityFormSchema,
+    type MenuAuthority,
+    type MenuAuthorityPayload,
+    type MenuAuthorityFormData,
+} from "./model/menu-authority-interface";
 export { AuthorityButton } from "./ui/authority-button";
 export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/wr/src/entities/menu/index.ts b/apps/wr/src/entities/menu/index.ts
index 04f63e38b..2bd1b1787 100644
--- a/apps/wr/src/entities/menu/index.ts
+++ b/apps/wr/src/entities/menu/index.ts
@@ -1,2 +1,3 @@
+export { MenuApi } from "./api/menu-service";
+export type { MenuItem, MenuService } from "./model/menu-interface";
 export { MenuWrapper } from "./lib/menu-wrapper";
-export type { MenuItem } from "./model/menu-interface";
diff --git a/apps/wr/src/features/auth/login/ui/login-page.tsx b/apps/wr/src/features/auth/login/ui/login-page.tsx
deleted file mode 100644
index 4c340f78e..000000000
--- a/apps/wr/src/features/auth/login/ui/login-page.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useEffect } from "react";
-import { images } from "@common/assets";
-import { LoginApi } from "@/src/entities/auth";
-import "./login.css";
-
-function LoginPage() {
-  useEffect(() => {
-    const hostname = window.location.hostname;
-    if (hostname.includes("hasuon.or.kr")) {
-      window.location.href =
-        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
-    }
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target as HTMLFormElement);
-    const userId = formData.get("id") as string;
-    const password = formData.get("password") as string;
-
-    await LoginApi.login({ userId, password });
-    window.location.href = "/map/mainMap";
-  };
-
-  return (
-    <div className="login fx">
-      <div className="left_box fx">
-        <div className="text">
-          <h1>
-            하수도정보시스템
-            <br />
-            <span>CMS 통합관리시스템</span>
-          </h1>
-          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
-        </div>
-        <div className="img">
-          <Image src={images.logo} width={229} height={46} alt="logo" />
-        </div>
-      </div>
-      <form
-        id="loginForm"
-        name="loginForm"
-        method="post"
-        onSubmit={handleSubmit}
-      >
-        <div className="login_box fx">
-          <ul className="fx">
-            <li>
-              <h2>ID</h2>
-              <div className="input_st st1">
-                <i className="diveicon di-account-box" />
-                <input
-                  type="text"
-                  className="id"
-                  title="아이디를 입력하세요."
-                  id="id"
-                  name="id"
-                  maxLength={12}
-                />
-              </div>
-            </li>
-            <li>
-              <h2>PASSWORD</h2>
-              <div className="input_st st2">
-                <i className="diveicon di-key" />
-                <input
-                  type="password"
-                  className="input_style"
-                  maxLength={25}
-                  title="비밀번호를 입력하세요."
-                  id="password"
-                  name="password"
-                />
-              </div>
-            </li>
-          </ul>
-          <div className="bottom_box fx">
-            <div className="checks fx">
-              <input
-                type="checkbox"
-                name="checkId"
-                title="로그인ID 저장여부"
-                id="checkId"
-              />
-              <label htmlFor="checkId">아이디저장</label>
-            </div>
-            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
-          </div>
-          <button type="submit" className="login_btn fx">
-            <span>LOGIN</span>
-          </button>
-          <div className="footer">
-            <div className="copy fx">
-              <p>copyright © 2023 KECO. All rights reserved.</p>
-            </div>
-            <div className="fot_btn fx">
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
-                target="_blank"
-              >
-                개인정보처리방침
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
-                target="_blank"
-              >
-                저작권정책안내
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
-                target="_blank"
-              >
-                이메일무단수집거부
-              </a>
-            </div>
-            <p className="addr fx">
-              <span>
-                주소 : (22689) 인천광역시 서구 환경로 42(경서동
-                종합환경연구단지)
-              </span>
-              <span>
-                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                3722
-              </span>
-              <span>팩스 :032-590-3729</span>
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export { LoginPage };
diff --git a/apps/wr/src/shared/config/auth.ts b/apps/wr/src/shared/config/auth.ts
new file mode 100644
index 000000000..7c35ad9f0
--- /dev/null
+++ b/apps/wr/src/shared/config/auth.ts
@@ -0,0 +1,17 @@
+import type { AuthConfig } from "@common/auth";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/wr/src/shared/config/env.ts b/apps/wr/src/shared/config/env.ts
index 89dd8addd..641d870a3 100644
--- a/apps/wr/src/shared/config/env.ts
+++ b/apps/wr/src/shared/config/env.ts
@@ -1,15 +1,20 @@
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "WR";
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3001";
 export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL ||'http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1';
-export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
-export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+export const SERVER_API_WR_URL = process.env.WR_SERVER_API_URL ||'http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1';
+export const SERVER_API_FO_URL = process.env.FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
+export const SERVER_API_CS_URL = process.env.CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+export const SERVER_API_URL = process.env.CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
 export const SERVER_API_CS_TUS_URL = process.env.NEXT_PUBLIC_CS_TUS_UPLOAD ||'/attach-service/api/v1/tus/upload'
+export const AUTH_LOGIN_REDIRECT_URL =
+    process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
 export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL;
+export const SERVER_SEWERAGE_API_URL = process.env.SEWERAGE_API_URL;
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+
 
 
 
diff --git a/apps/wr/src/shared/lib/bbs-notice-menu.ts b/apps/wr/src/shared/lib/bbs-notice-menu.ts
new file mode 100644
index 000000000..a621ed669
--- /dev/null
+++ b/apps/wr/src/shared/lib/bbs-notice-menu.ts
@@ -0,0 +1,12 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export const BBS_NOTICE_MENU_MARKER = "bbsnotice";
+
+export function isBbsNoticeMenu(item: MenuItem): boolean {
+    const marker = BBS_NOTICE_MENU_MARKER;
+    return (
+        item.urlPath?.toLowerCase().includes(marker) ||
+        item.menuEngNm?.toLowerCase().includes(marker) ||
+        item.menuPath?.toLowerCase().includes(marker)
+    );
+}
diff --git a/apps/wr/src/shared/lib/index.ts b/apps/wr/src/shared/lib/index.ts
index b8b4c52c0..1d0c4a3a8 100644
--- a/apps/wr/src/shared/lib/index.ts
+++ b/apps/wr/src/shared/lib/index.ts
@@ -4,3 +4,10 @@ export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
 export { usePrompt } from "./use-prompt";
 export { getCookie, setCookie, removeCookie } from "./cookie";
+export {
+    buildStatisticsComponentImportPath,
+    menuMatchesStatisticsTabId,
+    parseStatisticsMenuUrlPath,
+    resolveStatisticsCategory,
+    resolveStatisticsTabId,
+} from "./statistics-menu-url";
diff --git a/apps/wr/src/shared/lib/statistics-menu-url.ts b/apps/wr/src/shared/lib/statistics-menu-url.ts
new file mode 100644
index 000000000..c20dded4c
--- /dev/null
+++ b/apps/wr/src/shared/lib/statistics-menu-url.ts
@@ -0,0 +1,84 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export type ParsedStatisticsMenuUrl = {
+    categoryFromPath: string | null;
+    componentName: string | null;
+    rawUrlPath: string;
+};
+
+/** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
+export function parseStatisticsMenuUrlPath(
+    urlPath: string,
+): ParsedStatisticsMenuUrl {
+    const trimmed = (urlPath ?? "").trim();
+    if (!trimmed) {
+        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+    }
+
+    let pathPart = trimmed;
+    let queryString = "";
+    const queryIndex = trimmed.indexOf("?");
+    if (queryIndex >= 0) {
+        pathPart = trimmed.slice(0, queryIndex);
+        queryString = trimmed.slice(queryIndex + 1);
+    }
+
+    const tabParam = new URLSearchParams(queryString).get("tab")?.trim() || null;
+    const segments = pathPart.replace(/^\/+/, "").split("/").filter(Boolean);
+
+    let categoryFromPath: string | null = null;
+    if (segments[0] === "statistics" && segments.length >= 2) {
+        categoryFromPath = segments[1] ?? null;
+    }
+
+    let componentName = tabParam;
+    if (!componentName) {
+        if (!pathPart.includes("/") && !queryString) {
+            componentName = trimmed;
+        } else if (segments.length === 1 && segments[0] !== "statistics") {
+            componentName = segments[0] ?? null;
+        } else if (segments[0] === "statistics" && segments.length >= 3) {
+            componentName = segments[segments.length - 1] ?? null;
+        }
+    }
+
+    return { categoryFromPath, componentName, rawUrlPath: trimmed };
+}
+
+/** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
+export function resolveStatisticsCategory(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+    return categoryFromPath || parentEngNm || "";
+}
+
+/** 탭 ID·URL `?tab=` 값 - 컴포넌트 파일명(확장자 제외) */
+export function resolveStatisticsTabId(urlPath: string): string {
+    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+    return componentName || rawUrlPath;
+}
+
+/** `@/src/components/statistics/{category}/{Component}` 또는 루트 컴포넌트 경로 */
+export function buildStatisticsComponentImportPath(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+    const category = resolveStatisticsCategory(urlPath, parentEngNm);
+    const name = componentName || urlPath;
+    if (!category) {
+        return `@/src/components/statistics/${name}`;
+    }
+    return `@/src/components/statistics/${category}/${name}`;
+}
+
+export function menuMatchesStatisticsTabId(
+    menu: MenuItem,
+    tabId: string,
+): boolean {
+    if (!tabId) return false;
+    if (menu.urlPath === tabId) return true;
+    return resolveStatisticsTabId(menu.urlPath) === tabId;
+}
diff --git a/apps/wr/src/store/tab-store.ts b/apps/wr/src/store/tab-store.ts
new file mode 100644
index 000000000..0379b3601
--- /dev/null
+++ b/apps/wr/src/store/tab-store.ts
@@ -0,0 +1,327 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import type { MenuItem } from "@/src/entities/menu";
+import { MenuAuthorityApi } from "@/src/entities/menu-authority";
+import type { PageMenuAuthority } from "@/src/entities/menu-authority/model/menu-authority-interface";
+import { isBbsNoticeMenu } from "@/src/shared/lib/bbs-notice-menu";
+import { resolveStatisticsTabId } from "@/src/shared/lib/statistics-menu-url";
+
+export interface Tab {
+    id: string; // 고유 ID (urlPath)
+    label: string; // 탭에 표시될 이름
+    path: string; // 메뉴 경로
+    urlPath: string; // url 경로
+    parentEngNm: string; // 부모 menuEngNm
+    menuItem: MenuItem; // 메뉴 정보
+    /** undefined: 미조회, null: 조회했으나 없음/실패 */
+    pageMenuAuthority?: PageMenuAuthority | null;
+}
+
+async function fetchTabPageMenuAuthority(
+    menuCd: number,
+    apply: (authority: PageMenuAuthority | null) => void,
+): Promise<void> {
+    try {
+        const response = await MenuAuthorityApi.getPageMenuAuthority(menuCd);
+        apply(response?.[0] ?? null);
+    } catch {
+        apply(null);
+    }
+}
+
+function scheduleTabPageMenuAuthorityFetch(
+    get: () => TabStore,
+    set: (
+        partial:
+            | Partial<TabStore>
+            | ((state: TabStore) => Partial<TabStore>),
+    ) => void,
+    tabId: string,
+    menuCd: number,
+): void {
+    void fetchTabPageMenuAuthority(menuCd, (authority) => {
+        const { tabs } = get();
+        if (!tabs.some((tab) => tab.id === tabId)) return;
+        set((state) => ({
+            tabs: state.tabs.map((tab) =>
+                tab.id === tabId ? { ...tab, pageMenuAuthority: authority } : tab,
+            ),
+        }));
+    });
+}
+
+type TabStoreSetState = (
+    partial:
+        | Partial<TabStore>
+        | ((state: TabStore) => Partial<TabStore>),
+) => void;
+
+const tabStoreSetState: TabStoreSetState = (partial) => {
+    useTabStoreHook.setState(partial);
+};
+
+function ensureTabPageMenuAuthority(
+    get: () => TabStore,
+    set: TabStoreSetState,
+    tab: Tab,
+): void {
+    if (tab.pageMenuAuthority !== undefined) return;
+    scheduleTabPageMenuAuthorityFetch(get, set, tab.id, tab.menuItem.menuCd);
+}
+
+/** persist 복원·새로고침 후 활성 탭 메뉴 권한이 없으면 조회 */
+export function hydrateActiveTabPageMenuAuthority(): void {
+    const { tabs, activeTabId } = getTabStoreState();
+    if (!activeTabId) return;
+    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!tab) return;
+    ensureTabPageMenuAuthority(getTabStoreState, tabStoreSetState, tab);
+}
+
+interface TabStore {
+    tabs: Tab[];
+    activeTabId: string | null;
+    menuList: MenuItem[] | null;
+    addTab: (menuItem: MenuItem) => boolean;
+    removeTab: (tabId: string) => void;
+    setActiveTab: (tabId: string) => void;
+    setMenuList: (menuList: MenuItem[] | null) => void;
+    closeAllTabs: () => void;
+    closeOtherTabs: (tabId: string) => void;
+    closeTabsToLeft: (tabId: string) => void;
+    closeTabsToRight: (tabId: string) => void;
+}
+
+export const TAB_STORE_PERSIST_KEY = "st-tab-store";
+const TAB_STORE_VERSION = 1;
+const MAX_TABS = 10;
+
+function tabForPersist(tab: Tab): Tab {
+    return {
+        ...tab,
+        menuItem: { ...tab.menuItem, children: null },
+        pageMenuAuthority: undefined,
+    };
+}
+
+function normalizePersistedTab(tab: Tab): Tab {
+    const tabId = resolveStatisticsTabId(tab.urlPath || tab.id);
+    return tabId === tab.id ? tab : { ...tab, id: tabId };
+}
+
+function sanitizePersistedTabsAndActive(
+    tabs: Tab[],
+    activeTabId: string | null,
+): { tabs: Tab[]; activeTabId: string | null } {
+    let nextTabs = Array.isArray(tabs)
+        ? tabs.filter((tab) => !isBbsNoticeMenu(tab.menuItem)).map(normalizePersistedTab)
+        : [];
+    if (nextTabs.length > MAX_TABS) nextTabs = nextTabs.slice(0, MAX_TABS);
+
+    if (nextTabs.length === 0) {
+        return { tabs: [], activeTabId: null };
+    }
+
+    let nextActive = activeTabId;
+    if (nextActive && !nextTabs.some((t) => t.id === nextActive)) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+    if (nextActive == null && nextTabs.length > 0) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+
+    return { tabs: nextTabs, activeTabId: nextActive };
+}
+
+const useTabStoreHook = create<TabStore>()(
+    persist(
+        (set, get) => ({
+            tabs: [],
+            activeTabId: null,
+            menuList: null,
+            addTab: (menuItem: MenuItem) => {
+                if (isBbsNoticeMenu(menuItem)) {
+                    return false;
+                }
+
+                const { tabs, menuList } = get();
+                const tabId = resolveStatisticsTabId(menuItem.urlPath || "");
+
+                const existingTab = tabs.find((tab) => tab.id === tabId);
+
+                if (existingTab) {
+                    set({ activeTabId: tabId });
+                    ensureTabPageMenuAuthority(get, set, existingTab);
+                    return true;
+                }
+
+                if (tabs.length < MAX_TABS) {
+                    const newTab: Tab = {
+                        id: tabId,
+                        label: menuItem.menuKornNm,
+                        path: menuItem.menuPath,
+                        urlPath: menuItem.urlPath,
+                        parentEngNm:
+                            menuList?.find(
+                                (m) => m.menuCd === menuItem.parentId,
+                            )?.menuEngNm || "",
+                        menuItem,
+                        pageMenuAuthority: undefined,
+                    };
+
+                    set({
+                        tabs: [...tabs, newTab],
+                        activeTabId: tabId,
+                    });
+
+                    scheduleTabPageMenuAuthorityFetch(
+                        get,
+                        set,
+                        tabId,
+                        menuItem.menuCd,
+                    );
+
+                    return true;
+                }
+                return false;
+            },
+            removeTab: (tabId: string): void => {
+                const { tabs, activeTabId } = get();
+                const newTabs = tabs.filter((tab) => tab.id !== tabId);
+
+                let newActiveTabId = activeTabId;
+                if (activeTabId === tabId) {
+                    const closedTabIndex = tabs.findIndex(
+                        (tab) => tab.id === tabId,
+                    );
+                    if (newTabs.length > 0) {
+                        if (closedTabIndex > 0) {
+                            const prevTab = tabs[closedTabIndex - 1];
+                            newActiveTabId = prevTab ? prevTab.id : null;
+                        } else {
+                            const firstTab = newTabs[0];
+                            newActiveTabId = firstTab ? firstTab.id : null;
+                        }
+                    } else {
+                        newActiveTabId = null;
+                    }
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            setActiveTab: (tabId: string) => {
+                set({ activeTabId: tabId });
+                const tab = get().tabs.find((t) => t.id === tabId);
+                if (tab) ensureTabPageMenuAuthority(get, set, tab);
+            },
+            setMenuList: (menuList: MenuItem[] | null) => {
+                set({ menuList });
+            },
+            closeAllTabs: () => {
+                set({
+                    tabs: [],
+                    activeTabId: null,
+                });
+            },
+            closeOtherTabs: (tabId: string) => {
+                const { tabs } = get();
+                const tabToKeep = tabs.find((tab) => tab.id === tabId);
+
+                if (tabToKeep) {
+                    set({
+                        tabs: [tabToKeep],
+                        activeTabId: tabId,
+                    });
+                }
+            },
+            closeTabsToLeft: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index <= 0) return;
+
+                const newTabs = tabs.slice(index);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            closeTabsToRight: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index === -1 || index >= tabs.length - 1) return;
+
+                const newTabs = tabs.slice(0, index + 1);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+        }),
+        {
+            name: TAB_STORE_PERSIST_KEY,
+            version: TAB_STORE_VERSION,
+            storage: createJSONStorage(() => localStorage),
+            partialize: (state) => ({
+                tabs: state.tabs.map(tabForPersist),
+                activeTabId: state.activeTabId,
+            }),
+            merge: (persistedState, currentState) => {
+                const p = persistedState as Partial<
+                    Pick<TabStore, "tabs" | "activeTabId">
+                > | null;
+                const rawTabs = p?.tabs;
+                const rawActive = p?.activeTabId;
+                const { tabs, activeTabId } = sanitizePersistedTabsAndActive(
+                    (rawTabs as Tab[]) ?? [],
+                    typeof rawActive === "string" || rawActive === null
+                        ? rawActive
+                        : null,
+                );
+                return {
+                    ...currentState,
+                    tabs,
+                    activeTabId,
+                };
+            },
+            onRehydrateStorage: () => (state, error) => {
+                if (error || !state) return;
+                queueMicrotask(() => hydrateActiveTabPageMenuAuthority());
+            },
+        },
+    ),
+);
+
+export const useTabStore = useTabStoreHook;
+export const getTabStoreState = () => useTabStoreHook.getState();
+
+// 로그아웃 또는 사용자 전환 시 로컬 탭 스냅샷 제거 및 메모리 상태 초기화
+export function clearTabStorePersist(): void {
+    useTabStoreHook.getState().closeAllTabs();
+    useTabStoreHook.persist.clearStorage();
+}
diff --git a/docs/session-extend-confirm-guide.md b/docs/session-extend-confirm-guide.md
index 0668f1f3d..23a1ce099 100644
--- a/docs/session-extend-confirm-guide.md
+++ b/docs/session-extend-confirm-guide.md
@@ -47,7 +47,7 @@ sequenceDiagram
   else 취소
     Header->>API: declineSessionExtend()
     API->>RefreshTimer: clearRefreshTimer()
-    Note over RefreshTimer: 만료까지 자동 갱신 없음
+    Note over RefreshTimer: 취소시 만료까지 자동 갱신 없음
   end
 ```
 
diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js
index 2eea996df..04bf3a504 100644
--- a/packages/common/business_components/src/ui/map/Gis.js
+++ b/packages/common/business_components/src/ui/map/Gis.js
@@ -49,7 +49,9 @@ function Gis({
   searchView: SearchView,
   detailView: DetailView,
   onFeatureSelect,
+  onMapBlankClick,
   canSelectFeature,
+  sinkholeLegendIconVisible = false,
   setIsSearchModalOpen,
   onCheckedLayersChange,
   searchBar: SearchBar,
@@ -311,6 +313,7 @@ function Gis({
               }}
               imageVisible={imgVisble}
               layerIconVisible={layerIconVisible}
+              sinkholeLegendIconVisible={sinkholeLegendIconVisible}
               isPlaying={isPlaying}
               setIsPlaying={setIsPlaying}
               targetLayerTypes={targetLayerTypes}
@@ -359,7 +362,11 @@ function Gis({
               <GisZoomLevel zoomGuide={zoomGuide} showZoomScaleInfo={showZoomScaleInfo} />
             )}
             <GisMapToggle />
-            <GisSelect onFeatureSelect={handleFeatureSelect} canSelectFeature={canSelectFeature} />
+            <GisSelect
+              onFeatureSelect={handleFeatureSelect}
+              onMapBlankClick={onMapBlankClick}
+              canSelectFeature={canSelectFeature}
+            />
           </div>
         </div>
 
diff --git a/packages/common/business_components/src/ui/map/GisSelect.js b/packages/common/business_components/src/ui/map/GisSelect.js
index ac862c2f1..1ed788398 100644
--- a/packages/common/business_components/src/ui/map/GisSelect.js
+++ b/packages/common/business_components/src/ui/map/GisSelect.js
@@ -3,15 +3,21 @@ import { GisContext } from "./Gis";
 import GisApp from "./lib/gis.core";
 import GisOlSelect from "./lib/gis.select";
 
-export default React.memo(function GisSelect({ onFeatureSelect, canSelectFeature }) {
+export default React.memo(function GisSelect({ onFeatureSelect, onMapBlankClick, canSelectFeature }) {
   const { gisMap } = useContext(GisContext);
   const onFeatureSelectRef = useRef(onFeatureSelect);
+  // 빈 지도 클릭 콜백도 interaction 재생성 없이 최신 화면 상태를 참조하도록 ref로 보관한다.
+  const onMapBlankClickRef = useRef(onMapBlankClick);
   const canSelectFeatureRef = useRef(canSelectFeature);
 
   useEffect(() => {
     onFeatureSelectRef.current = onFeatureSelect;
   }, [onFeatureSelect]);
 
+  useEffect(() => {
+    onMapBlankClickRef.current = onMapBlankClick;
+  }, [onMapBlankClick]);
+
   useEffect(() => {
     canSelectFeatureRef.current = canSelectFeature;
   }, [canSelectFeature]);
@@ -31,6 +37,8 @@ export default React.memo(function GisSelect({ onFeatureSelect, canSelectFeature
           return;
         }
         onFeatureSelectRef.current?.(features[0]);
+      } else {
+        onMapBlankClickRef.current?.();
       }
     });
 
diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js
index cdf67af25..de04cb91b 100644
--- a/packages/common/business_components/src/ui/map/GisTree.js
+++ b/packages/common/business_components/src/ui/map/GisTree.js
@@ -46,6 +46,7 @@ export default React.memo(function GisTree({
 	onProgressChange = () => { },
 	layerSettingView: LayerSettingView = null,
 	layerIconVisible,
+	sinkholeLegendIconVisible = false,
 	inlineLayerSettingView,
 	treeSectionClassName = "",
 	toggleButtonPosition = "center",
@@ -526,7 +527,7 @@ export default React.memo(function GisTree({
 		<>
 			{/* 사이드 패널 */}
 			<div
-				className={`gis-layer-panel absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300 ${visible
+				className={`gis-layer-panel absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-border bg-background text-foreground transition-all duration-300 ${visible
 					? "translate-x-0 opacity-100"
 					: "pointer-events-none -translate-x-full opacity-0"
 					}`}
@@ -537,8 +538,8 @@ export default React.memo(function GisTree({
 				>
 					{showLayerPanelTitle && (
 						<>
-							<h3 className="gis-layer-panel-title mx-2 my-4 text-3xl font-bold text-gray-600 text-center">시설물</h3>
-							<hr className="mb-4" />
+							<h3 className="gis-layer-panel-title mx-2 my-4 text-center text-3xl font-bold text-label">시설물</h3>
+							<hr className="mb-4 border-border" />
 						</>
 					)}
 					{/* DnD Tree */}
@@ -561,7 +562,8 @@ export default React.memo(function GisTree({
 									nodeLabel === "지반침하정보";
 								const isFloodHistoryRootTreeNode = nodeLabel === "침수흔적도";
 								const hideTreeLegendIcon =
-									isSinkholeRootTreeNode || isFloodHistoryRootTreeNode;
+									(isSinkholeRootTreeNode && !sinkholeLegendIconVisible) ||
+									isFloodHistoryRootTreeNode;
 								const showLayerActionButton = layerIconVisible?.(node);
 								const showLayerActionIcon = depth > 0 && imageVisible;
 
@@ -570,7 +572,7 @@ export default React.memo(function GisTree({
 								return (
 									<div style={{ display: isVisible ? "block" : "none" }}>
 										<div
-											className="gis-layer-row flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
+											className="gis-layer-row flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-accent"
 											style={{
 												marginInlineStart: depth * 16,
 												width: `calc(100% - ${depth * 16}px)`,
@@ -602,7 +604,7 @@ export default React.memo(function GisTree({
 											{showLayerActionButton && (
 												<button
 													type="button"
-													className="gis-layer-action-button ml-auto shrink-0 rounded-sm border border-[#9cc6f0] bg-white px-2 py-[1px] text-[1.1rem] font-medium leading-5 text-[#2c6fb7] transition-colors hover:bg-[#eef6ff]"
+													className="gis-layer-action-button ml-auto shrink-0 rounded-sm border border-primary bg-background px-2 py-[1px] text-[1.1rem] font-medium leading-5 text-primary transition-colors hover:bg-accent"
 													onClick={() =>
 														handleLayerImgClick(
 															node.data.lyrTyNm,
@@ -652,14 +654,14 @@ export default React.memo(function GisTree({
 					</div>
 				</div>
 				{LayerSettingView && (
-					<div className="gis-layer-setting shrink-0 bg-white px-2 pb-3">
+					<div className="gis-layer-setting shrink-0 bg-background px-2 pb-3">
 						<LayerSettingView />
 					</div>
 				)}
 				{!detachedToggleButton && (
 					<button
 						onClick={() => setVisible(false)}
-						className={`gis-layer-toggle absolute right-[-3px] z-50 transform rounded-l-none rounded-r border border-l border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
+						className={`gis-layer-toggle absolute right-[-3px] z-50 transform rounded-l-none rounded-r border border-l border-border bg-background px-1 py-2 text-foreground shadow-sm ${toggleButtonPositionClass}`}
 					>
 						<ChevronLeft size={16} />
 					</button>
@@ -668,7 +670,7 @@ export default React.memo(function GisTree({
 			{detachedToggleButton && visible && (
 				<button
 					onClick={() => setVisible(false)}
-					className={`gis-layer-toggle absolute left-[250px] z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#1e88e5] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] ${toggleButtonPositionClass}`}
+					className={`gis-layer-toggle absolute left-[250px] z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-border bg-background text-primary shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-accent ${toggleButtonPositionClass}`}
 					title="접기"
 				>
 					<ChevronLeft className="h-4 w-4" />
@@ -678,8 +680,8 @@ export default React.memo(function GisTree({
 				<button
 					onClick={() => setVisible(true)}
 					className={detachedToggleButton
-						? `gis-layer-toggle absolute left-0 z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#1e88e5] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] ${toggleButtonPositionClass}`
-						: `gis-layer-toggle absolute left-[-3px] z-50 transform rounded-r border border-r border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
+						? `gis-layer-toggle absolute left-0 z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-border bg-background text-primary shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-accent ${toggleButtonPositionClass}`
+						: `gis-layer-toggle absolute left-[-3px] z-50 transform rounded-r border border-r border-border bg-background px-1 py-2 text-foreground shadow-sm ${toggleButtonPositionClass}`}
 					title="열기"
 				>
 					{detachedToggleButton ? <ChevronRight className="h-4 w-4" /> : <ChevronRight size={16} />}
diff --git a/packages/common/business_components/src/ui/map/lib/gis.select.js b/packages/common/business_components/src/ui/map/lib/gis.select.js
index e05edb9af..58fdc2592 100644
--- a/packages/common/business_components/src/ui/map/lib/gis.select.js
+++ b/packages/common/business_components/src/ui/map/lib/gis.select.js
@@ -388,7 +388,11 @@ GisOlSelect.prototype = {
 		this.selectInteraction.on('select', function (e) {
 			if (!e.auto) {
 				let features = me.selectInteraction.getFeatures();
-				if(features.getArray().length == 0) return;
+				if(features.getArray().length == 0) {
+					// 기존 소비자는 빈 배열을 무시하고, 필요한 화면만 빈 지도 클릭으로 해석할 수 있게 전달한다.
+					callback([], []);
+					return;
+				}
 				let layers = [];
 				for (let i in features.array_) {
 					let feature = features.array_[0];
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 6d042f62a..250f82636 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,7 @@ import { SelectBox, type SelectDataType } from "../../../ui";
 import { Button } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import GisApp from "../lib/gis.core";
-import { moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
+import { getSigunguCenter, moveMapToCenter, sidoCenter, sigunguCenter } from "./utils";
 // import { getGeometryCenter } from "./utils";
 
 const geoserverUrl =
@@ -12,11 +12,20 @@ const geoserverUrl =
 const FACILITY_TYPE_URL_MAP: Record<string, string> = {
   tb_il_swage_prcs_fclt: geoserverUrl,
 };
+const DEFAULT_SWAGE_PRCS_FCLT_LABEL = "하수처리시설";
+const INFTWT_PROC_SEARCH_EVENT = "SN_INFTWT_PROC_SEARCH";
+
+type FacilityLayerFilter = {
+  label: string;
+  cqlFilter?: string;
+  disabled?: boolean;
+};
 
 interface SearchBarProps {
   gisMaps: React.RefObject<any>;
   facilityTypes: { text: string; val: string }[];
   sidoSearchZoom?: number;
+  facilityLayerFilter?: FacilityLayerFilter;
 }
 
 interface CenterSelectDataType extends SelectDataType {
@@ -27,6 +36,7 @@ export const ProcSearchBar = ({
   gisMaps,
   facilityTypes,
   sidoSearchZoom = 11,
+  facilityLayerFilter,
 }: SearchBarProps) => {
   const [sidoValue, setSidoValue] = useState("0");
   const [sigunValue, setSigunValue] = useState("0");
@@ -39,14 +49,19 @@ export const ProcSearchBar = ({
   const [filteredSigunData, setFilteredSigunData] = useState<CenterSelectDataType[]>([
     { text: "시군구", val: "0" },
   ]);
-  const [facilityData, setFacilityData] = useState<SelectDataType[]>([
-    { text: "하수처리시설", val: "0" },
+  const [facilityData, setFacilityData] = useState<SelectDataType[]>(() => [
+    { text: facilityLayerFilter?.label ?? DEFAULT_SWAGE_PRCS_FCLT_LABEL, val: "0" },
   ]);
   const [facilityValue, setFacilityValue] = useState("0");
+  const [pendingExternalFacilityName, setPendingExternalFacilityName] = useState("");
 
   const [facilityType, setFacilityType] = useState(
     facilityTypes?.length === 1 && facilityTypes[0] ? facilityTypes[0].val : "0",
   );
+  const defaultFacilityData = useCallback(
+    () => [{ text: facilityLayerFilter?.label ?? DEFAULT_SWAGE_PRCS_FCLT_LABEL, val: "0" }],
+    [facilityLayerFilter?.label],
+  );
 
   const fetchSido = async () => {
     const url = `/geoserver/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo:tb_ms_ctpv&outputFormat=application/json&propertyName=mctpv_korn_nm,mctpv_cd`;
@@ -54,9 +69,9 @@ export const ProcSearchBar = ({
 
     const list = (res.features || [])
       .map((f: any) => ({
-        text: f.properties.mctpv_korn_nm,
-        val: f.properties.mctpv_cd,
-        center: sidoCenter[f.properties.mctpv_cd?.trim()] //getGeometryCenter(f.geometry) ?? undefined,
+        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,
       }))
       .sort((a: any, b: any) => {
         // 커스텀 순서 정의
@@ -105,97 +120,138 @@ export const ProcSearchBar = ({
 
     const list = (res.features || [])
       .map((f: any) => ({
-        text: f.properties.sgg_korn_nm,
-        val: f.properties.sgg_cd,
-        center: sigunguCenter[f.properties.sgg_cd?.trim()] //getGeometryCenter(f.geometry) ?? undefined,
+        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,
       }))
       .sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
 
     setSigunData(list);
   };
 
-  const fetchFacilitiesBySggNm = async (
-    sggCd: string,
-    sggNm: string,
-    sidoNm: string,
-    currentFacilityType?: string,
-  ) => {
-    const type = currentFacilityType ?? facilityType;
-    if (!type || type === "0") return;
+  // 선택한 시도를 기본 조회 범위로 사용하고, 시군구 선택 시 조회 범위를 추가로 좁힌다.
+  const fetchFacilitiesByRegion = useCallback(
+    async (
+      sggCd: string,
+      sggNm: string,
+      sidoNm: string,
+      currentFacilityType?: string,
+    ) => {
+      const type = currentFacilityType ?? facilityType;
+      if (!type || type === "0") return;
 
-    const baseUrlTemplate = FACILITY_TYPE_URL_MAP[type];
-    if (!baseUrlTemplate) return;
+      const activeFacilityFilter = type === "tb_il_swage_prcs_fclt" ? facilityLayerFilter : undefined;
+      if (activeFacilityFilter?.disabled) {
+        setFacilityData(defaultFacilityData());
+        setFacilityValue("0");
+        return;
+      }
 
-    const year = new Date().getFullYear().toString();
-    let url = baseUrlTemplate
-      .replace("{year}", year)
-      .replace("{sggCd}", sggCd)
-      .replace("{sidoNm}", encodeURIComponent(sidoNm))
-      .replace("{sggNm}", encodeURIComponent(sggNm));
+      const baseUrlTemplate = FACILITY_TYPE_URL_MAP[type];
+      if (!baseUrlTemplate) return;
 
-    let list: SelectDataType[] = [];
+      const year = new Date().getFullYear().toString();
+      let url = baseUrlTemplate
+        .replace("{year}", year)
+        .replace("{sggCd}", sggCd)
+        .replace("{sidoNm}", encodeURIComponent(sidoNm))
+        .replace("{sggNm}", encodeURIComponent(sggNm));
 
-    if (type === "tb_il_swage_prcs_fclt") {
-      const cqlFilter = `ctpv_nm='${encodeURIComponent(sidoNm)}' AND sgg_nm='${encodeURIComponent(sggNm)}'`;
-      url = `${url}&typeName=hasudo:${type}&cql_filter=${cqlFilter}`;
-      const res = await fetch(url);
-      const json = await res.json();
-      list = (json.features || [])
-        .map((f: any) => ({
-          text: f.properties.swtrmt_fclt_nm ?? "(이름없음)",
-          val: f.id,
-        }))
-        .sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
-    } else if (type === "tb_wr_bdst_ruse_fclt") {
-      const paramsRes = await fetch("/reuse-service/reuseFc/pubFc");
-      const paramsJson = await paramsRes.json();
-      const params = paramsJson.data;
+      let list: SelectDataType[] = [];
 
-      const res = await fetch(url, {
-        method: "POST",
-        headers: {
-          accept: "application/json",
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(params),
-      });
-      const json = await res.json();
-      list = (json.data || []).map((item: any) => ({
-        text: item.ruseUtztnFcltNm ?? "(이름없음)",
-        val: item.pbnstRuseFcltId,
-      }));
-    } else if (type === "tb_wr_ruse_fclt_dmd_co") {
-      const res = await fetch(url);
-      const json = await res.json();
-      list = (json.data || []).map((item: any) => ({
-        text: item.dmdCoNm ?? "(이름없음)",
-        val: item.dmdInfoId,
-      }));
-    } else if (type === "tb_wr_tmpr_dmd_co") {
-      const res = await fetch(url);
-      const json = await res.json();
-      list = (json.data || []).map((item: any) => ({
-        text: item.dmdCoNm ?? "(이름없음)",
-        val: item.fctryMngSn,
-      }));
-    } else {
-      const res = await fetch(url);
-      const json = await res.json();
-      list = (json.data || []).map((item: any) => ({
-        text: item.bdstNm ?? "(이름없음)",
-        val: item.bdstInfoSn,
-      }));
-    }
+      if (type === "tb_il_swage_prcs_fclt") {
+        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);
+        const params = new URLSearchParams({
+          typeName: `hasudo:${type}`,
+          cql_filter: cqlFilters.join(" AND "),
+        });
+        url = `${url}&${params.toString()}`;
+        const res = await fetch(url);
+        const json = await res.json();
+        list = (json.features || [])
+          .map((f: any) => ({
+            text: f.properties.swtrmt_fclt_nm ?? "(이름없음)",
+            val: f.id,
+          }))
+          .sort((a: any, b: any) => a.text.localeCompare(b.text, "ko"));
+      } else if (type === "tb_wr_bdst_ruse_fclt") {
+        const paramsRes = await fetch("/reuse-service/reuseFc/pubFc");
+        const paramsJson = await paramsRes.json();
+        const params = paramsJson.data;
 
-    const sorted = list.slice().sort((a, b) => a.text.localeCompare(b.text, "ko"));
-    setFacilityData([{ text: "하수처리시설", val: "0" }, ...sorted]);
-    setFacilityValue("0");
-  };
+        const res = await fetch(url, {
+          method: "POST",
+          headers: {
+            accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(params),
+        });
+        const json = await res.json();
+        list = (json.data || []).map((item: any) => ({
+          text: item.ruseUtztnFcltNm ?? "(이름없음)",
+          val: item.pbnstRuseFcltId,
+        }));
+      } else if (type === "tb_wr_ruse_fclt_dmd_co") {
+        const res = await fetch(url);
+        const json = await res.json();
+        list = (json.data || []).map((item: any) => ({
+          text: item.dmdCoNm ?? "(이름없음)",
+          val: item.dmdInfoId,
+        }));
+      } else if (type === "tb_wr_tmpr_dmd_co") {
+        const res = await fetch(url);
+        const json = await res.json();
+        list = (json.data || []).map((item: any) => ({
+          text: item.dmdCoNm ?? "(이름없음)",
+          val: item.fctryMngSn,
+        }));
+      } else {
+        const res = await fetch(url);
+        const json = await res.json();
+        list = (json.data || []).map((item: any) => ({
+          text: item.bdstNm ?? "(이름없음)",
+          val: item.bdstInfoSn,
+        }));
+      }
 
+      const sorted = list.slice().sort((a, b) => a.text.localeCompare(b.text, "ko"));
+      setFacilityData([...defaultFacilityData(), ...sorted]);
+      setFacilityValue("0");
+    },
+    [defaultFacilityData, facilityLayerFilter, facilityType],
+  );
   useEffect(() => {
     fetchSido();
     fetchSigungu();
   }, []);
+  useEffect(() => {
+    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 (sidoValue !== "0" && sidoNm) {
+      fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, facilityType);
+      return;
+    }
+
+    setFacilityData(defaultFacilityData());
+    setFacilityValue("0");
+  }, [defaultFacilityData, facilityLayerFilter?.cqlFilter, facilityLayerFilter?.disabled, facilityType, fetchFacilitiesByRegion, sidoData, sidoValue, sigunData, sigunValue]);
+
+  useEffect(() => {
+    if (!pendingExternalFacilityName) return;
+
+    const matchedFacility = facilityData.find(
+      (item) => String(item.text ?? "").trim() === pendingExternalFacilityName,
+    );
+    setFacilityValue(matchedFacility?.val ?? "0");
+    setPendingExternalFacilityName("");
+  }, [facilityData, pendingExternalFacilityName]);
+
 
   const initializeSigunData = useCallback(
     (nextSidoCd: string) => {
@@ -218,7 +274,7 @@ export const ProcSearchBar = ({
       if (type === "ctpvCd") {
         setSidoValue(val);
         initializeSigunData(val);
-        setFacilityData([{ text: "하수처리시설", val: "0" }]);
+        setFacilityData(defaultFacilityData());
         setFacilityValue("0");
         return;
       }
@@ -228,18 +284,18 @@ export const ProcSearchBar = ({
         const sidoNm = sidoData.find((item) => item.val === sidoValue)?.text || "";
         const sggNm = sigunData.find((item) => item.val === val)?.text || "";
         const sggCd = sigunData.find((item) => item.val === val)?.val || "";
-        if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, facilityType);
+        if (sidoNm) fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, facilityType);
         return;
       }
 
       if (type === "facilityType") {
         setFacilityType(val);
         setFacilityValue("0");
-        setFacilityData([{ text: "하수처리시설", val: "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 || "";
-        if (sggNm && sidoNm) fetchFacilitiesBySggNm(sggCd, sggNm, sidoNm, val);
+        if (sidoNm) fetchFacilitiesByRegion(sggCd, sggNm, sidoNm, val);
         return;
       }
 
@@ -253,12 +309,12 @@ export const ProcSearchBar = ({
         }
       }
     },
-    [initializeSigunData, sigunData, sigunValue, sidoData, sidoValue, facilityType],
+    [defaultFacilityData, fetchFacilitiesByRegion, initializeSigunData, sigunData, sigunValue, sidoData, sidoValue, facilityType],
   );
 
   const handleSearch = useCallback(() => {
     if (sidoValue === "0") {
-      alert("시도를 선택해 주세요");
+      alert("시도를 선택해 주세요.");
       return;
     }
 
@@ -279,48 +335,70 @@ export const ProcSearchBar = ({
     moveMapToCenter(gisMaps, selectedSido.center, sidoSearchZoom);
   }, [gisMaps, sidoValue, sigunValue, sidoData, filteredSigunData, sigunData, sidoSearchZoom]);
 
-  const handleFeatureFocus = (data: any) => {
-    const map = gisMaps.current;
-    if (!map) {
-      console.warn("지도가 초기화되지 않았습니다.");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleExternalSearch = (rawEvent: Event) => {
+      const event = rawEvent as CustomEvent<{
+        ctpvCd?: string;
+        sggCd?: string;
+        swtrmtFcltNm?: string;
+        suppressMapMove?: boolean;
+      }>;
+      const nextCtpvCd = String(event.detail?.ctpvCd ?? "0").trim() || "0";
+      const nextSggCd = String(event.detail?.sggCd ?? "0").trim() || "0";
+      const nextSwtrmtFcltNm = String(event.detail?.swtrmtFcltNm ?? "").trim();
+      const suppressMapMove = Boolean(event.detail?.suppressMapMove);
+      const nextSidoCenter = sidoCenter[nextCtpvCd.slice(0, 2)];
+      const nextSigunguCenter = getSigunguCenter(nextSggCd);
+
+      setSidoValue(nextCtpvCd);
+      initializeSigunData(nextCtpvCd);
+
+      if (nextCtpvCd !== "0") {
+        const prefix = nextCtpvCd.substring(0, 2);
+        const filtered = sigunData.filter((item) => item.val.startsWith(prefix));
+        setFilteredSigunData([{ text: "시군구", val: "0" }, ...filtered]);
+      }
+
+      setSigunValue(nextSggCd !== "0" ? nextSggCd : "0");
+      setFacilityValue("0");
+      setPendingExternalFacilityName(nextSwtrmtFcltNm);
+
+      if (suppressMapMove) {
+        return;
+      }
+
+      if (nextSggCd !== "0" && nextSigunguCenter) {
+        moveMapToCenter(gisMaps, nextSigunguCenter, 12);
+        return;
+      }
+
+      if (nextCtpvCd !== "0" && nextSidoCenter) {
+        moveMapToCenter(gisMaps, nextSidoCenter, sidoSearchZoom);
+      }
+    };
+
+    window.addEventListener(INFTWT_PROC_SEARCH_EVENT, handleExternalSearch as EventListener);
+    return () => {
+      window.removeEventListener(INFTWT_PROC_SEARCH_EVENT, handleExternalSearch as EventListener);
+    };
+  }, [gisMaps, initializeSigunData, sigunData, sidoSearchZoom]);
+
+  const handleFeatureFocus = async (data: any) => {
+    const layerNm = String(data?.layerNm ?? "").trim();
+    let featureId = String(data?.fid ?? "").trim();
+
+    if (!layerNm || !featureId) return;
+    if (!featureId.includes(".")) featureId = `${layerNm}.${featureId}`;
+
+    const searchLayer = GisApp.Module.layer as any;
+    if (!searchLayer?.showSearchResultsFromGeoJSON) {
+      console.warn("Search layer module is not ready:", data);
       return;
     }
 
-    const select = GisApp.Module.select as any;
-    if (!select) return;
-
-    let foundFeature: any = null;
-    const featureId = data.fid;
-
-    map
-      .getLayers()
-      .getArray()
-      .forEach((layer: any) => {
-        const source = layer.getSource?.();
-        if (source?.getFeatureById) {
-          const feature = source.getFeatureById(String(featureId).trim());
-          if (feature) foundFeature = feature;
-        }
-      });
-
-    if (foundFeature) {
-      const geometry = foundFeature.getGeometry();
-      if (geometry) {
-        const extent = geometry.getExtent();
-        map.getView().fit(extent, {
-          duration: 300,
-          padding: [50, 50, 50, 50],
-          maxZoom: 16,
-          constrainResolution: true,
-          nearest: true,
-        });
-      } else {
-        alert("위치정보를 찾을 수 없습니다.");
-        console.warn("geometry를 찾을 수 없습니다:", data);
-      }
-    } else {
-      console.warn("Feature를 찾을 수 없습니다:", data);
-    }
+    await searchLayer.showSearchResultsFromGeoJSON(layerNm, featureId);
   };
 
   return (
@@ -366,3 +444,4 @@ export const ProcSearchBar = ({
     </div>
   );
 };
+
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 cc4bac4d1..da0761733 100644
--- a/packages/common/business_components/src/ui/select/lib/selectBox.tsx
+++ b/packages/common/business_components/src/ui/select/lib/selectBox.tsx
@@ -1,4 +1,4 @@
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 import * as React from "react"
 
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-13 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-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "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
     )}
     {...props}
@@ -148,3 +148,5 @@ export {
   Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue
 }
 
+
+
diff --git a/packages/common/business_components/src/ui/select/select.css b/packages/common/business_components/src/ui/select/select.css
index 8aa16f386..721ab81b3 100644
--- a/packages/common/business_components/src/ui/select/select.css
+++ b/packages/common/business_components/src/ui/select/select.css
@@ -1,8 +1,8 @@
-@tailwind components;
+@tailwind components;
 
 @layer components {
   .selectbox_root {
-    @apply flex items-center;
+    @apply flex items-center overflow-visible py-1;
   }
 
   .selectbox_label {
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 351f08dff..e07d1e190 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import {
   Checkbox,
@@ -37,6 +37,7 @@ type UiTableProps<T extends object> = {
   headButton?: React.ReactNode | undefined;
   widthFixed?: boolean;
   isHideCount?: boolean; // 총 건수 default false
+  clickableHeadIds?: string[];
 };
 
 type UiHeadProps = {
@@ -69,7 +70,8 @@ export function UiTable<T extends object = Record<string, unknown>>({
   curPage = 1,
   headButton = undefined,
   widthFixed = false,
-  isHideCount = false, // 총 건수
+  isHideCount = false,
+  clickableHeadIds,
 }: UiTableProps<T>) {
   const [cur, setCur] = useState<number>(curPage);
   const [idx, setIdx] = useState<number>(index);
@@ -97,32 +99,36 @@ export function UiTable<T extends object = Record<string, unknown>>({
 
   useEffect(() => {
     setIdx(index);
-  }, [index])
+  }, [index]);
 
   useEffect(() => {
     setCur(curPage);
-  }, [curPage])
+  }, [curPage]);
 
   const handlePageChange = (page: number) => {
     setCur(page);
     onPageChange(page);
-    if (index == 0)
-      setIdx(0)
+    if (index == 0) setIdx(0);
+  };
+
+  const isHeadClickable = (headId: string) => {
+    if (!cellClick) return false;
+    if (!clickableHeadIds || clickableHeadIds.length === 0) return true;
+    return clickableHeadIds.includes(headId);
   };
 
   const handleCellClick = (index: number, headId: string) => {
-    if (cellClick) {
-      cellClick(index, headId);
-      setIdx(index);
-    }
+    if (!isHeadClickable(headId) || !cellClick) return;
+
+    cellClick(index, headId);
+    setIdx(index);
   };
 
   const getLeafCols = (list: UiHeadProps[]) => {
     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.visible !== false)
+      .filter((h) => ((h.row ?? 0) + (h.rowSpan ?? 1) - 1) >= maxRow);
   };
 
   const leafCols = getLeafCols(headlist);
@@ -153,12 +159,15 @@ export function UiTable<T extends object = Record<string, unknown>>({
       )}
       <div className={`card !m-[1.2rem] ${className}`}>
         <Table variant="secondary" className={widthFixed ? "table-fixed" : ""}>
-          {widthFixed ?
+          {widthFixed ? (
             <colgroup>
-              {leafCols.map(col => (
+              {leafCols.map((col) => (
                 <col key={col.id} style={{ width: col.widthPercent ? `${col.widthPercent}%` : undefined }} />
               ))}
-            </colgroup> : ""}
+            </colgroup>
+          ) : (
+            ""
+          )}
           <TableHeader ref={headerRef} className="font-bold">
             {children ? children : <HeadMakeColSpan upHeadList={headlist} />}
           </TableHeader>
@@ -174,9 +183,9 @@ 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"} ${cellClick && idx === index
+                            className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${isHeadClickable(head.id) && idx === index
                               ? "cursor-pointer !font-[1000]"
-                              : cellClick
+                              : isHeadClickable(head.id)
                                 ? "cursor-pointer"
                                 : ""
                               } ${cellClassName ? cellClassName(el, head.id, index) : ""} sticky top-20 z-40 bg-secondary !font-bold whitespace-pre-line`}
@@ -190,55 +199,38 @@ export function UiTable<T extends object = Record<string, unknown>>({
                                 ? String(cellValue ?? "")
                                 : String(cellValue).includes(".")
                                   ? String(cellValue)
-                                    .split(".")
-                                    .map((part, index) =>
-                                      index === 0
-                                        ? part.replace(
-                                          /\B(?=(\d{3})+(?!\d))/g,
-                                          ",",
-                                        )
-                                        : part,
-                                    )
-                                    .join(".")
-                                  : String(cellValue ?? "").replace(
-                                    /\B(?=(\d{3})+(?!\d))/g,
-                                    ",",
-                                  );
+                                      .split(".")
+                                      .map((part, index) =>
+                                        index === 0
+                                          ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                                          : part,
+                                      )
+                                      .join(".")
+                                  : String(cellValue ?? "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                             })()}
                           </TableCell>
                         ) : (
                           <TableCell
-                            className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${cellClick && idx === index
+                            className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${isHeadClickable(head.id) && idx === index
                               ? "cursor-pointer !font-[1000]"
-                              : cellClick
+                              : 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}`}
                           >
-                            {
-                              //체크박스 유형애서 readOnly가  필요한 경우를 위해서 ChkClass 를 사용해서 readOnly 처리함.
-                              (() => {
-                                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) ? (
+                            {(() => {
+                              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) => {
-                                    {
-                                      console.log(cellValue);
-                                    }
-                                    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" />
@@ -258,22 +250,13 @@ 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>
                         )),
                     )}
diff --git a/packages/common/components/src/api/banner.ts b/packages/common/components/src/api/banner.ts
index 8d9962529..330431c39 100644
--- a/packages/common/components/src/api/banner.ts
+++ b/packages/common/components/src/api/banner.ts
@@ -1,35 +1,31 @@
-import { getApiClient } from "./client";
 import { getConfig } from "@common/config";
 import { ENDPOINT } from "../config";
+import { getAuthHeaders } from "../lib/auth-header";
 
 export interface Banner {
-    bnrSn: number;
-    bnrTypeCd: string;
-    bnrTypeNm: string;
-    bnrTtl: string;
-    lnkgUrlAddr: string;
-    useYn: string;
-    atflCd: string;
-    mdfcnDt: string;
-    mdfr: string;
-    mdfrNm: string;
-  }
+  bnrSn: number;
+  bnrTypeCd: string;
+  bnrTypeNm: string;
+  bnrTtl: string;
+  lnkgUrlAddr: string;
+  useYn: string;
+  atflCd: string;
+  mdfcnDt: string;
+  mdfr: string;
+  mdfrNm: string;
+}
 
+const { PROXY_HOST } = getConfig();
+const BASE_URL = `${PROXY_HOST}/server`;
 
-  const { PROXY_HOST } = getConfig();
-  const BASE_URL = `${PROXY_HOST}/server`;
-
-const client = getApiClient();
-
-export const getBannerList = async (siteId: string) => {
-  const response = await client.get<Banner[]>(
+export const getBannerList = async (siteId: string): Promise<Banner[]> => {
+  const response = await fetch(
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.BANNERS}/${siteId}`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
-  return response.data;
+  return response.json();
 };
diff --git a/packages/common/components/src/api/menu.ts b/packages/common/components/src/api/menu.ts
index b4d84c95e..ee9e74357 100644
--- a/packages/common/components/src/api/menu.ts
+++ b/packages/common/components/src/api/menu.ts
@@ -1,4 +1,4 @@
-import { getApiClient } from "./client";
+import { getAuthHeaders } from "../lib/auth-header";
 import { ENDPOINT } from "../config";
 import { getConfig } from "@common/config";
 
@@ -27,22 +27,33 @@ export interface TreeMenu extends MenuItem {
   menuHlpCn: string;
 }
 
-const client = getApiClient();
 const { PROXY_HOST } = getConfig();
 const BASE_URL = `${PROXY_HOST}/server`;
 
-export const getMenuList = async (siteId: string) => {
-  const response = await client.get<MenuItem[]>(
-    `${ENDPOINT.CMS_SERVICE.MENU_ROLES}/${siteId}`,
+export const getMenuList = async (siteId: string): Promise<MenuItem[]> => {
+  const response = await fetch(
+    `${BASE_URL}${ENDPOINT.CMS_SERVICE.MENU_ROLES}/${siteId}`,
+    {
+      method: "GET",
+      headers: getAuthHeaders(),
+      credentials: "include",
+    },
   );
-  return response.data;
+  return response.json();
 };
 
-export const getPreviewTreeMenuList = async (siteId: string) => {
-  const response = await client.get<TreeMenu[]>(
-    `${ENDPOINT.CMS_SERVICE.MENUS}/${siteId}/tree/preview`,
+export const getPreviewTreeMenuList = async (
+  siteId: string,
+): Promise<TreeMenu[]> => {
+  const response = await fetch(
+    `${BASE_URL}${ENDPOINT.CMS_SERVICE.MENUS}/${siteId}/tree/preview`,
+    {
+      method: "GET",
+      headers: getAuthHeaders(),
+      credentials: "include",
+    },
   );
-  return response.data;
+  return response.json();
 };
 
 export const getAnonymouseMenuList = async (
@@ -52,9 +63,8 @@ export const getAnonymouseMenuList = async (
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.MENU_ANONYMOUS}/user/${siteId}`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
   return response.json();
diff --git a/packages/common/components/src/api/site.ts b/packages/common/components/src/api/site.ts
index bfe0f3275..56f8a7c30 100644
--- a/packages/common/components/src/api/site.ts
+++ b/packages/common/components/src/api/site.ts
@@ -1,6 +1,6 @@
-import { getApiClient } from "./client";
 import { getConfig } from "@common/config";
 import { ENDPOINT } from "../config";
+import { getAuthHeaders } from "../lib/auth-header";
 
 export interface SiteInfo {
   siteId: string;
@@ -62,25 +62,18 @@ export const getSiteInfo = async (siteId: string) => {
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
   return response.json() as Promise<SiteInfo>;
 };
 
-const client = getApiClient();
-
-export const getSiteList = async () => {
-  const response = await client.get<SiteListResponse>(
-    `${BASE_URL}${ENDPOINT.CMS_SERVICE.SITE_LIST}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  return response.data;
+export const getSiteList = async (): Promise<SiteListResponse> => {
+  const response = await fetch(`${BASE_URL}${ENDPOINT.CMS_SERVICE.SITE_LIST}`, {
+    method: "GET",
+    headers: getAuthHeaders(),
+    credentials: "include",
+  });
+  return response.json();
 };
diff --git a/packages/common/components/src/lib/auth-header.ts b/packages/common/components/src/lib/auth-header.ts
new file mode 100644
index 000000000..962688504
--- /dev/null
+++ b/packages/common/components/src/lib/auth-header.ts
@@ -0,0 +1,22 @@
+import Cookies from "js-cookie";
+import { getConfig } from "@common/config";
+
+export function getAuthHeaders(): HeadersInit {
+  const { CLAIM_NAME, AUTH_USER_ID } = getConfig();
+
+  if (!CLAIM_NAME || !AUTH_USER_ID) {
+    throw new Error("Required environment variables are not set");
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  const token = Cookies.get(CLAIM_NAME);
+  const userId = Cookies.get(AUTH_USER_ID);
+
+  if (token) headers[CLAIM_NAME] = token;
+  if (userId) headers[AUTH_USER_ID] = userId;
+
+  return headers;
+}
diff --git a/packages/common/components/src/ui/footer/index.tsx b/packages/common/components/src/ui/footer/index.tsx
index 2430820ff..4df6e170b 100644
--- a/packages/common/components/src/ui/footer/index.tsx
+++ b/packages/common/components/src/ui/footer/index.tsx
@@ -12,8 +12,6 @@ import {
   CarouselPrevious,
 } from "../carousel";
 
-const siteId = getCookie("site-id-key") ?? "";
-
 type BannerImageProps = {
   atflCd: string;
   bnrSn: number;
@@ -64,6 +62,8 @@ const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
 };
 
 export function Footer() {
+  const siteId = getCookie("site-id-key") ?? "";
+
   const { data: siteInfo } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.SITES, siteId],
     queryFn: () => getSiteInfo(siteId),
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 4adf7e9d6..01b0e1b2e 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -29,7 +29,6 @@ import { ScrollArea, ScrollBar } from "../scroll-area";
 
 const appConfig = getConfig();
 const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
-const siteId = getCookie("site-id-key") ?? "";
 const isLoggedIn = !!userId;
 
 function getRootDomain(hostname: string): string {
@@ -100,7 +99,8 @@ async function legacyLogout(tokenManager?: TokenManager) {
   }
 }
 
-function formatRemainingMs(remainingMs: number): string {
+function formatRemainingMs(remainingMs: number | null): string {
+  if (remainingMs === null) return "-";
   if (remainingMs <= 0) return "만료됨";
 
   const totalSeconds = Math.floor(remainingMs / 1000);
@@ -110,15 +110,18 @@ function formatRemainingMs(remainingMs: number): string {
   return `${minutes}분 ${seconds}초`;
 }
 
-function useTokenRemainingMs(enabled: boolean): number {
-  const [remainingMs, setRemainingMs] = useState(0);
+function useTokenRemainingMs(enabled: boolean): number | null {
+  const [remainingMs, setRemainingMs] = useState<number | null>(null);
 
   useEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      setRemainingMs(null);
+      return;
+    }
 
     const update = () => {
       const token = getCookie(appConfig.CLAIM_NAME ?? "");
-      setRemainingMs(token ? getRemainingMs(token) : 0);
+      setRemainingMs(token ? getRemainingMs(token, 0) : 0);
     };
 
     update();
@@ -143,8 +146,25 @@ export function Header({
   const [logoWidth, setLogoWidth] = useState(0);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const logoRef = useRef<HTMLImageElement>(null);
+  const siteId = getCookie("site-id-key") ?? "";
+
   const remainingMs = useTokenRemainingMs(mounted && isLoggedIn && !viewOnly);
 
+  useEffect(() => {
+    if (
+      !mounted ||
+      !isLoggedIn ||
+      viewOnly ||
+      !authService ||
+      remainingMs === null ||
+      remainingMs > 0
+    ) {
+      return;
+    }
+
+    void authService.logout();
+  }, [mounted, viewOnly, authService, remainingMs]);
+
   useSessionExtendConfirm({
     enabled:
       mounted &&
@@ -407,7 +427,7 @@ function UserMenuContent({
   remainingMs,
   onLogout,
 }: {
-  remainingMs: number;
+  remainingMs: number | null;
   onLogout: () => void;
 }) {
   return (
diff --git a/packages/common/components/src/ui/layout/nofooter.tsx b/packages/common/components/src/ui/layout/nofooter.tsx
index 12f14ceea..29b5cddf6 100644
--- a/packages/common/components/src/ui/layout/nofooter.tsx
+++ b/packages/common/components/src/ui/layout/nofooter.tsx
@@ -8,15 +8,18 @@ import { SidebarProvider } from "../sidebar";
 import { LNB } from "../lnb";
 import { Header } from "../header";
 import "./common.css";
+import type { AuthService } from "@common/auth";
 
 export function NoFooterLayout({
   children,
   queryClient,
+  authService,
   currentPath,
   handleMenuClick,
 }: {
   children: React.ReactNode;
   queryClient?: QueryClient;
+  authService?: AuthService;
   currentPath?: string;
   handleMenuClick?: (item: MenuItem) => void;
 }) {
@@ -26,19 +29,19 @@ export function NoFooterLayout({
         <PopupProvider>
           <HelpDialogProvider>
             <SidebarProvider>
-            <div className="flex-1">
-              <Header />
-              <div className="flex">
-                <LNB
-                  currentPath={currentPath}
-                  handleMenuClick={handleMenuClick}
-                />
-                <div className="flex min-h-[calc(100vh-50px)] flex-1 flex-col overflow-auto">
-                  <div className="flex-1">{children}</div>
+              <div className="flex-1">
+                <Header authService={authService} />
+                <div className="flex">
+                  <LNB
+                    currentPath={currentPath}
+                    handleMenuClick={handleMenuClick}
+                  />
+                  <div className="flex min-h-[calc(100vh-50px)] flex-1 flex-col overflow-auto">
+                    <div className="flex-1">{children}</div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </SidebarProvider>
+            </SidebarProvider>
           </HelpDialogProvider>
         </PopupProvider>
       </ClientIpGuard>
diff --git a/packages/common/components/src/ui/layout/nolnb.tsx b/packages/common/components/src/ui/layout/nolnb.tsx
index 47717c99b..abc436e23 100644
--- a/packages/common/components/src/ui/layout/nolnb.tsx
+++ b/packages/common/components/src/ui/layout/nolnb.tsx
@@ -6,7 +6,6 @@ import { HelpDialogProvider } from "../../provider/help-dialog-context";
 import { ClientIpGuard } from "../../lib/client-ip-guard";
 import type { MenuItem } from "../../api";
 import { SidebarProvider } from "../sidebar";
-import { LNB } from "../lnb";
 import { Header } from "../header";
 import { Footer } from "../footer";
 import "./common.css";
@@ -17,7 +16,6 @@ export function NoLNBLayout({
   authService,
   tokenManager,
   currentPath,
-  handleMenuClick,
 }: {
   children: React.ReactNode;
   queryClient?: QueryClient;
@@ -33,19 +31,19 @@ export function NoLNBLayout({
         <PopupProvider>
           <HelpDialogProvider>
             <SidebarProvider>
-            <div className="flex-1">
-              <Header
-                authService={authService}
-                tokenManager={authService ? undefined : tokenManager}
-              />
-              <div className="flex">
-                <div className="flex min-h-[calc(100vh-50px)] flex-1 flex-col overflow-auto">
-                  <div className="flex-1">{children}</div>
-                  <Footer />
+              <div className="flex-1">
+                <Header
+                  authService={authService}
+                  tokenManager={authService ? undefined : tokenManager}
+                />
+                <div className="flex">
+                  <div className="flex min-h-[calc(100vh-50px)] flex-1 flex-col overflow-auto">
+                    <div className="flex-1">{children}</div>
+                    <Footer />
+                  </div>
                 </div>
               </div>
-            </div>
-          </SidebarProvider>
+            </SidebarProvider>
           </HelpDialogProvider>
         </PopupProvider>
       </ClientIpGuard>
diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx
index 1c7722a36..35d2f121d 100644
--- a/packages/common/components/src/ui/lnb/index.tsx
+++ b/packages/common/components/src/ui/lnb/index.tsx
@@ -42,7 +42,6 @@ import {
 
 const appConfig = getConfig();
 const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
-const appSiteId = getCookie("site-id-key") ?? "";
 const isLoggedIn = !!userId;
 
 export function LNB({
@@ -74,6 +73,7 @@ export function LNB({
     helpContent,
   } = useHelpDialog();
 
+  const appSiteId = getCookie("site-id-key") ?? "";
   const siteId = propSiteId ?? appSiteId;
 
   const { data: menuListData } = useQuery({