105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Gis from "@common/business_components/ui/map/Gis";
|
|
import { useEffect, useRef, useState, useCallback } from "react";
|
|
import { mapService } from "../service";
|
|
import NewWindowPopup from "../components/newWindowPopup";
|
|
import GisApp from "@common/business_components/ui/map/lib/gis.core";
|
|
import { SearchBar } from "@common/business_components/ui/map/searchBar/searchBar";
|
|
|
|
const Map = () => {
|
|
const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
|
|
const gisMaps = useRef<any | null>(null);
|
|
const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
|
|
const [isSearchModalOpen, setIsSearchModalOpen] = useState(true); // SearchModal 열림 상태
|
|
const [featureData, setFeatureData] = useState<any>(null); // 선택된 피쳐 데이터
|
|
const [checkedLayers, setCheckedLayers] = useState<string[]>([]);
|
|
const [checkedLayersData, setCheckedLayersData] = useState<any[]>([]);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await mapService.getLyrStngs();
|
|
setTreeData(response); // API 응답 저장
|
|
} catch (error) {
|
|
console.error("데이터 불러오기 실패:", error);
|
|
}
|
|
};
|
|
|
|
// 팝업 닫기 핸들러를 useCallback으로 메모이제이션
|
|
const handlePopupClose = useCallback(() => {
|
|
setIsOpen(false);
|
|
setFeatureData(null);
|
|
}, []);
|
|
|
|
// 컴포넌트 마운트 시 1회 실행
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
// 체크된 레이어 정보를 받는 핸들러
|
|
const handleCheckedLayersChange = (
|
|
checkedIds: string[],
|
|
checkedNodesData: any[]
|
|
) => {
|
|
setCheckedLayers(checkedIds);
|
|
setCheckedLayersData(checkedNodesData);
|
|
};
|
|
|
|
// SearchModal, GisContent 등에서 호출
|
|
const onFeatureFocus = (data: any) => {
|
|
console.log(data);
|
|
};
|
|
|
|
const renderDetailView = useCallback(
|
|
(props: any) => (
|
|
<NewWindowPopup
|
|
key={featureData?.fid || featureData?.id || featureData?.ftrIdn}
|
|
onClose={handlePopupClose}
|
|
checkedLayers={checkedLayers}
|
|
checkedLayersData={checkedLayersData}
|
|
{...props}
|
|
/>
|
|
),
|
|
[checkedLayers, checkedLayersData] // 필요 시 의존성 넣기
|
|
);
|
|
return (
|
|
<div className="bg-container">
|
|
<Gis
|
|
treeData={treeData}
|
|
isSearch={false}
|
|
gisMaps={gisMaps}
|
|
isMiniMap={false}
|
|
searchView={undefined}
|
|
detailView={renderDetailView}
|
|
onFeatureSelect={onFeatureFocus}
|
|
setIsOpen={setIsOpen}
|
|
setFeatureData={setFeatureData}
|
|
featureData={featureData}
|
|
setIsSearchModalOpen={setIsSearchModalOpen}
|
|
isOpen={isOpen}
|
|
isSearchModalOpen={isSearchModalOpen}
|
|
onCheckedLayersChange={handleCheckedLayersChange}
|
|
imgVisble={true}
|
|
searchBar={
|
|
<SearchBar
|
|
gisMaps={gisMaps}
|
|
facilityTypes={[
|
|
{ text: "하수처리시설", val: "tb_il_swage_prcs_fclt" },
|
|
{ text: "하수재이용시설", val: "tb_wr_bdst_ruse_fclt" },
|
|
{ text: "빗물이용시설", val: "tb_wr_rnwtr_utztn_fclt" },
|
|
{ text: "중수도시설", val: "tb_wr_rswtr_fclt" },
|
|
{ text: "온배수시설", val: "tb_wr_htdfl_fclt" },
|
|
{ text: "수요처", val: "tb_wr_ruse_fclt_dmd_co" },
|
|
{ text: "잠재수요처", val: "tb_wr_tmpr_dmd_co" },
|
|
]}
|
|
onFeatureFocus={onFeatureFocus}
|
|
/>
|
|
}
|
|
waterDepth={undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Map;
|