Files
frontend/apps/sn/app/(map-layout)/layout.tsx
T

69 lines
1.9 KiB
TypeScript

/**
* ➡️ 경로 : 하수관망도 모든 페이지
*
* 📄 Map Layout
* Next.js App Router (app/) 기반 맵 레이아웃 컴포넌트
*
* - 메뉴 클릭 이벤트 처리 및 라우팅
* - 현재 메뉴 정보 Zustand를 통한 상태 관리
* - 시도/시군구/사업 구분/사업 유형 데이터 초기 로드
* - NoFooterLayout을 통한 공통 레이아웃 적용
* - QueryClient를 통한 데이터 캐싱 및 관리
* - 경로 변경 시 메뉴 정보 동기화
*/
"use client";
import React, { useEffect } from 'react';
import { usePathname, useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { NoFooterLayout } from "@common/components";
import type { MenuItem } from "@/entities/menu";
import { useMenuStore } from "@/shared/lib";
import useStore from "@/entities/reference-data/model/reference-data-store";
import { authService } from "@/entities/auth";
export default function MapLayout({
children,
}: {
children: React.ReactNode;
}) {
const router = useRouter();
const pathname = usePathname();
const queryClient = useQueryClient();
const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
const { fetchCtpv, fetchSgg, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
useEffect(() => {
document.body.classList.add("sn-map-page-lock");
return () => {
document.body.classList.remove("sn-map-page-lock");
};
}, []);
useEffect(() => {
fetchCtpv();
fetchSgg();
fetchBIZ_SE_CD();
fetchBIZ_TY_CD();
}, []);
const handleMenuClick = (item: MenuItem) => {
setCurrentMenuInfo(item);
router.push(item.urlPath);
};
return (
<NoFooterLayout
queryClient={queryClient}
authService={authService}
currentPath={pathname ?? ""}
handleMenuClick={handleMenuClick}
>
{children}
</NoFooterLayout>
);
}