diff --git a/apps/sn/app/(map-layout)/layout.tsx b/apps/sn/app/(map-layout)/layout.tsx index 01d2b166a..f840fa131 100644 --- a/apps/sn/app/(map-layout)/layout.tsx +++ b/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 ( - - +type LegacyAgedPipePopupPageProps = { + searchParams: Promise>; +}; + +export default async function LegacyAgedPipePopupPage({ + searchParams, +}: LegacyAgedPipePopupPageProps) { + const resolvedSearchParams = await searchParams; + const nextSearchParams = new URLSearchParams(); + + Object.entries(resolvedSearchParams).forEach(([key, value]) => { + if (Array.isArray(value)) { + value.forEach((item) => nextSearchParams.append(key, item)); + return; + } + + if (typeof value === "string") { + nextSearchParams.set(key, value); + } + }); + + const queryString = nextSearchParams.toString(); + redirect( + queryString + ? `/popup/agedPipePopup?${queryString}` + : "/popup/agedPipePopup", ); } diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx index afbb91c47..cbbea24b5 100644 --- a/apps/sn/app/(map-layout)/map/page.tsx +++ b/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("브라우저 팝업이 차단되었습니다. 팝업 허용 후 다시 시도해주세요."); diff --git a/apps/sn/src/features/windowPopup/model/popupDefinitions.ts b/apps/sn/src/features/windowPopup/model/popupDefinitions.ts index b3184650d..b288fb969 100644 --- a/apps/sn/src/features/windowPopup/model/popupDefinitions.ts +++ b/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; export type WindowPopupKey = keyof typeof windowPopupDefinitions; diff --git a/apps/sn/src/features/windowPopup/registry.tsx b/apps/sn/src/features/windowPopup/registry.tsx index f8b247744..7343e26b7 100644 --- a/apps/sn/src/features/windowPopup/registry.tsx +++ b/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; diff --git a/apps/sn/src/features/windowPopup/ui/AgedPipePopupContent.tsx b/apps/sn/src/features/windowPopup/ui/AgedPipePopupContent.tsx new file mode 100644 index 000000000..9ff897803 --- /dev/null +++ b/apps/sn/src/features/windowPopup/ui/AgedPipePopupContent.tsx @@ -0,0 +1,10 @@ +import { Suspense } from "react"; +import AgedPipePopupPage from "@/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage"; + +export default function AgedPipePopupContent() { + return ( + + + + ); +}