노후관로 분석 공통 팝업 적용

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

@@ -33,7 +33,6 @@ export default function MapLayout({
   const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
 
   const { fetchCtpv, fetchSgg, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
-  const isPopupPage = pathname === "/map/aged-pipe-popup";
 
   useEffect(() => {
     document.body.classList.add("sn-map-page-lock");
@@ -55,10 +54,6 @@ export default function MapLayout({
     router.push(item.urlPath);
   };
 
-  if (isPopupPage) {
-    return <>{children}</>;
-  }
-
   return (
     <NoFooterLayout
       queryClient={queryClient}

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

@@ -1,10 +1,30 @@
-import { Suspense } from "react";
-import AgedPipePopupPage from "../components/agedPipe/AgedPipePopupPage";
+import { redirect } from "next/navigation";
 
-export default function Page() {
-  return (
-    <Suspense fallback={null}>
-      <AgedPipePopupPage />
-    </Suspense>
+type LegacyAgedPipePopupPageProps = {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+export default async function LegacyAgedPipePopupPage({
+  searchParams,
+}: LegacyAgedPipePopupPageProps) {
+  const resolvedSearchParams = await searchParams;
+  const nextSearchParams = new URLSearchParams();
+
+  Object.entries(resolvedSearchParams).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => nextSearchParams.append(key, item));
+      return;
+    }
+
+    if (typeof value === "string") {
+      nextSearchParams.set(key, value);
+    }
+  });
+
+  const queryString = nextSearchParams.toString();
+  redirect(
+    queryString
+      ? `/popup/agedPipePopup?${queryString}`
+      : "/popup/agedPipePopup",
   );
 }

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

@@ -45,6 +45,7 @@ import {
   type AgedPipeRow,
   AGED_PIPE_DEFAULT_FILTERS,
 } from "./components/agedPipe/agedPipeUtils";
+import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
 import { WINDOW_POPUP_MESSAGE_TYPE } from "@/features/windowPopup/model/types";
 
 const AGED_PIPE_CONTROL_NODE_ID = "SN_AGED_PIPE";
@@ -345,16 +346,11 @@ const Map = () => {
   }, [draftAgedPipeFilters, isAgedPipeListOpen, loadAgedPipeList, syncAgedPipePopupFilters]);
 
   const openAgedPipePopupWindow = useCallback(() => {
-    const popupParams = new URLSearchParams({
+    const popup = openWindowPopup("agedPipePopup", {
       elapsedYears: String(appliedAgedPipeFilters.elapsedYears),
       ctpvCd: appliedAgedPipeFilters.ctpvCd,
       sggCd: appliedAgedPipeFilters.sggCd,
     });
-    const popup = window.open(
-      `/map/aged-pipe-popup?${popupParams.toString()}`,
-      "sn-aged-pipe-list",
-      "popup=yes,width=1180,height=760,left=120,top=80,resizable=yes,scrollbars=no",
-    );
 
     if (!popup) {
       alert("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요.");

apps/sn/src/features/windowPopup/model/popupDefinitions.ts

@@ -67,6 +67,12 @@ export const windowPopupDefinitions = {
     height: 980,
     requiredParams: ["chmbrXcnts", "chmbrYdnts"],
   },
+  agedPipePopup: {
+    key: "agedPipePopup",
+    title: "노후 하수관로 관리 ",
+    width: 1180,
+    height: 760,
+  },
 } as const satisfies Record<string, WindowPopupDefinition>;
 
 export type WindowPopupKey = keyof typeof windowPopupDefinitions;

apps/sn/src/features/windowPopup/registry.tsx

@@ -1,5 +1,6 @@
 import { windowPopupDefinitions, type WindowPopupKey } from "./model/popupDefinitions";
 import type { WindowPopupRegistryItem } from "./model/types";
+import AgedPipePopupContent from "./ui/AgedPipePopupContent";
 import FloodPreTablePopupContent from "./ui/FloodPreTablePopupContent";
 import FloodPreUploadPopupContent from "./ui/FloodPreUploadPopupContent";
 import InfilChartPopupContent from "./ui/InfilChartPopupContent";
@@ -52,4 +53,8 @@ export const windowPopupRegistry = {
     ...windowPopupDefinitions.sscDetail,
     component: SscDetailPopupContent,
   },
+  agedPipePopup: {
+    ...windowPopupDefinitions.agedPipePopup,
+    component: AgedPipePopupContent,
+  },
 } as const satisfies Record<WindowPopupKey, WindowPopupRegistryItem>;

apps/sn/src/features/windowPopup/ui/AgedPipePopupContent.tsx

@@ -0,0 +1,10 @@
+import { Suspense } from "react";
+import AgedPipePopupPage from "@/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage";
+
+export default function AgedPipePopupContent() {
+  return (
+    <Suspense fallback={null}>
+      <AgedPipePopupPage />
+    </Suspense>
+  );
+}