From f4b0af5edea5013b3b9204e69c4637b04be913f6 Mon Sep 17 00:00:00 2001 From: swcho Date: Tue, 1 Jul 2025 11:01:20 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20mapSearchBar=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/htdflSttn/page.tsx | 21 +- apps/wr/app/map/mapSearchBar.tsx | 771 +++++++++--------- apps/wr/app/map/newWindowPopup.tsx | 8 +- .../business_components/src/ui/map/Gis.js | 200 ++--- 4 files changed, 503 insertions(+), 497 deletions(-) diff --git a/apps/wr/app/map/htdflSttn/page.tsx b/apps/wr/app/map/htdflSttn/page.tsx index 937490fe2..e74d055d8 100644 --- a/apps/wr/app/map/htdflSttn/page.tsx +++ b/apps/wr/app/map/htdflSttn/page.tsx @@ -125,16 +125,17 @@ const Map = () => { isSearch={false} gisMaps={gisMaps} isMiniMap={true} - searchView={(props: any) => ( - - ) - } + searchView={undefined} + // searchView={(props: any) => ( + // + // ) + // } detailView={(props: any) => ( void; - btnClass?: string; - ref?: React.RefObject; - isAdmin?: boolean; - leftClassName?: string; - rightClassName?: string; - showQueryButton?: boolean; - showInitButton?: boolean; - showApplyButton?: boolean; - checkedLayers?: string[]; - checkedLayersData?: any[]; -} +// type SearchBaseType = { +// searchType: string; +// selectSidoData?: SelectDataType[] | []; +// selectSigunData?: SelectDataType[] | []; +// selectRegionData?: SelectDataType[] | []; +// selectUnitWaterShedData?: SelectDataType[] | []; +// selectMiddleRegionData?: SelectDataType[] | []; +// selectEnvPartData?: EnvPartSelectDataType[] | []; +// onFeatureSelect: () => void; +// btnClass?: string; +// ref?: React.RefObject; +// isAdmin?: boolean; +// leftClassName?: string; +// rightClassName?: string; +// showQueryButton?: boolean; +// showInitButton?: boolean; +// showApplyButton?: boolean; +// checkedLayers?: string[]; +// checkedLayersData?: any[]; +// } -const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; +// const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; -const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`); +// const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`); -interface SearchModalProps { - open: boolean; - onOpenChange: (open: boolean) => void; - onFeatureSelect: (row: any) => void; -} +// interface SearchModalProps { +// open: boolean; +// onOpenChange: (open: boolean) => void; +// onFeatureSelect: (row: any) => void; +// } -interface SelectedDataTypeWithSggNm { - text: string; - val: string; - sggNm: string; -} +// interface SelectedDataTypeWithSggNm { +// text: string; +// val: string; +// sggNm: string; +// } -export function MapSearchBar({ - searchType, - selectSidoData, - selectSigunData, - selectRegionData, - selectUnitWaterShedData, - selectMiddleRegionData, - selectEnvPartData, - btnClass, - onFeatureSelect, - isAdmin = false, - leftClassName, - rightClassName, - showQueryButton = true, - showInitButton = true, - showApplyButton = true, - checkedLayers = [], - checkedLayersData = [], -}: SearchBaseType) { +// export function MapSearchBar({ +// searchType, +// selectSidoData, +// selectSigunData, +// selectRegionData, +// selectUnitWaterShedData, +// selectMiddleRegionData, +// selectEnvPartData, +// btnClass, +// onFeatureSelect, +// isAdmin = false, +// leftClassName, +// rightClassName, +// showQueryButton = true, +// showInitButton = true, +// showApplyButton = true, +// checkedLayers = [], +// checkedLayersData = [], +// }: SearchBaseType) { - // 로딩바 - const [isLoading, setIsLoading] = useState(false); - // 상세 정보 조회를 위한 상태 추가 - const [popupFeature, setPopupFeature] = useState(null); - const [isChHead, setIsChHead] = useState(false); - const ref = useRef({} as ReturnType); +// // 로딩바 +// const [isLoading, setIsLoading] = useState(false); +// // 상세 정보 조회를 위한 상태 추가 +// const [popupFeature, setPopupFeature] = useState(null); +// const [isChHead, setIsChHead] = useState(false); +// const ref = useRef({} as ReturnType); - // zustand store에서 건물 검색 함수와 데이터 가져오기 - const { - code, - bdst, - findBdst, - wrMap, - // buildingSearchRes, - buildingNmSearch, - buildingNmSearchMultiple - } = useWrStore((state) => state); +// // zustand store에서 건물 검색 함수와 데이터 가져오기 +// const { +// code, +// bdst, +// findBdst, +// wrMap, +// buildingSearchRes, +// buildingNmSearch, +// buildingNmSearchMultiple +// } = useWrStore((state) => state); - const [selectedBuilding, setSelectedBuilding] = useState(null); - const [buildingSearchText, setBuildingSearchText] = useState(""); - const [buildingList, setBuildingList] = useState([]); +// const [selectedBuilding, setSelectedBuilding] = useState(null); +// const [buildingSearchText, setBuildingSearchText] = useState(""); +// const [buildingList, setBuildingList] = useState([]); - // 전체 목록 - const [partValue, setPartValue] = useState("A"); - const [sidoValue, setSidoValue] = useState("0"); - const [sigunValue, setSigunValue] = useState("0"); - const [regionValue, setRegionValue] = useState("0"); - const [untitWaterShedValue, setUntitWaterShedValue] = useState("0"); - const [middleRegionValue, setMiddleRegionValue] = useState("0"); - const [envPartValue, setEnvPartValue] = useState("0"); - const [resetTrigger, setResetTrigger] = useState(false); - const [sidoText, setSidoText] = useState("0"); - const [sigunText, setSigunText] = useState("0"); - // 공급처 후보지 조회 필터 목록 - const [selectedSido, setSelectedSido] = useState({ text: "전체", val: '0' }); - const [selectedSigun, setSelectedSigun] = useState({ text: "전체", val: '0' }); - const [selectedFclt, setSelectedFclt] = useState({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 - // 전체 시설 - let allFclt: SelectedDataTypeWithSggNm[] = [{ text: "전체", val: '0', sggNm: '전체' }]; - // 우리동네가뭄지도 필터 목록 - const [selectedDong, setSelectedDong] = useState({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 // 행정동 +// // 전체 목록 +// const [partValue, setPartValue] = useState("A"); +// const [sidoValue, setSidoValue] = useState("0"); +// const [sigunValue, setSigunValue] = useState("0"); +// const [regionValue, setRegionValue] = useState("0"); +// const [untitWaterShedValue, setUntitWaterShedValue] = useState("0"); +// const [middleRegionValue, setMiddleRegionValue] = useState("0"); +// const [envPartValue, setEnvPartValue] = useState("0"); +// const [resetTrigger, setResetTrigger] = useState(false); +// const [sidoText, setSidoText] = useState("0"); +// const [sigunText, setSigunText] = useState("0"); +// // 공급처 후보지 조회 필터 목록 +// const [selectedSido, setSelectedSido] = useState({ text: "전체", val: '0' }); +// const [selectedSigun, setSelectedSigun] = useState({ text: "전체", val: '0' }); +// const [selectedFclt, setSelectedFclt] = useState({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 +// // 전체 시설 +// let allFclt: SelectedDataTypeWithSggNm[] = [{ text: "전체", val: '0', sggNm: '전체' }]; +// const [selectedDong, setSelectedDong] = useState({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 // 행정동 - const filteredSigunData = useMemo(() => { - if (!selectedSido || selectedSido.val === '0' || !selectedSido.val) return [{ text: "전체", val: '0' }]; - return [ - { text: "전체", val: '0' }, - ...code.sggCd.filter(item => item.val.substring(0, 2) === selectedSido.val.substring(0, 2)) - ]; - }, [selectedSido]); +// const filteredSigunData = useMemo(() => { +// if (!selectedSido || selectedSido.val === '0' || !selectedSido.val) return [{ text: "전체", val: '0' }]; +// return [ +// { text: "전체", val: '0' }, +// ...code.sggCd.filter((item: { val: string; }) => item.val.substring(0, 2) === selectedSido.val.substring(0, 2)) +// ]; +// }, [selectedSido]); - const filteredFcltData = useMemo(() => { - if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }]; - return [ - { text: "전체", val: '0', sggNm: '전체' }, - ...allFclt.filter(item => item.sggNm === selectedSido.text) - ]; - }, [selectedSigun]); +// const filteredFcltData = useMemo(() => { +// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }]; +// return [ +// { text: "전체", val: '0', sggNm: '전체' }, +// ...allFclt.filter(item => item.sggNm === selectedSido.text) +// ]; +// }, [selectedSigun]); - const filteredDong = useMemo(() => { - if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }]; - return [ - { text: "전체", val: '0', sggNm: '전체' }, - // ...code.dong.filter(item => item.sggNm === selectedSido.text) - ]; - }, [selectedSigun]); +// const filteredDong = useMemo(() => { +// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }]; +// return [ +// { text: "전체", val: '0', sggNm: '전체' }, +// // ...code.dong.filter(item => item.sggNm === selectedSido.text) +// ]; +// }, [selectedSigun]); - // 조회 함수 - const queryVal = () => { - // 46 : 하수처리시설 - // 47 : 하수재이용시설 - // 48 : 빗물이용시설 - // 49 : 중수도시설 - // 50 : 온배수시설 - console.log("조회버튼 클릭: ", checkedLayers); - if (checkedLayers && checkedLayers.includes('48')) { - // searchBuildings - } - } +// // 조회 함수 +// const queryVal = () => { +// // 46 : 하수처리시설 +// // 47 : 하수재이용시설 +// // 48 : 빗물이용시설 +// // 49 : 중수도시설 +// // 50 : 온배수시설 +// console.log("조회버튼 클릭: ", checkedLayers); +// if (checkedLayers && checkedLayers.includes('48')) { +// // searchBuildings +// } +// } - // 초기화 함수 - const initVal = () => { - setPartValue("A"); - setSidoValue("0"); - setSigunValue("0"); - setRegionValue("0"); - setUntitWaterShedValue("0"); - setMiddleRegionValue("0"); - setEnvPartValue("0"); - setSidoText("전체"); - setSigunText("전체"); - setSelectedSido({ text: "전체", val: '0' }); - setSelectedSigun({ text: "전체", val: '0' }); - setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' }); - setSelectedDong({ text: "전체", val: '0', sggNm: '전체' }); - setResetTrigger(true); - }; +// // 초기화 함수 +// const initVal = () => { +// setPartValue("A"); +// setSidoValue("0"); +// setSigunValue("0"); +// setRegionValue("0"); +// setUntitWaterShedValue("0"); +// setMiddleRegionValue("0"); +// setEnvPartValue("0"); +// setSidoText("전체"); +// setSigunText("전체"); +// setSelectedSido({ text: "전체", val: '0' }); +// setSelectedSigun({ text: "전체", val: '0' }); +// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' }); +// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' }); +// setResetTrigger(true); +// }; - // 적용 버튼 - const applyVal = () => { - onFeatureSelect(); - }; +// // 적용 버튼 +// const applyVal = () => { +// onFeatureSelect(); +// }; - useEffect(() => { - if (resetTrigger) { - setResetTrigger(false); - } - }, [resetTrigger]); +// useEffect(() => { +// if (resetTrigger) { +// setResetTrigger(false); +// } +// }, [resetTrigger]); - // 시설 조회 - useEffect(() => { - const fetchData = async () => { - setIsLoading(true); - if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) { - allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]); - setIsLoading(false); - return; - } +// // 시설 조회 +// useEffect(() => { +// const fetchData = async () => { +// setIsLoading(true); +// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) { +// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]); +// setIsLoading(false); +// return; +// } - try { - const queryParamsFacility = new URLSearchParams({ - lyrTypeNm: 'tb_il_swage_prcs_fclt', - page: '0', - size: '100000', - sort: 'string', - }); - const cqlFiltersFacility: string[] = []; - if (selectedSigun.text && selectedSigun.val !== '0') { - cqlFiltersFacility.push(`sgg_nm ILIKE '%${selectedSigun.text}%'`); - } - if (cqlFiltersFacility.length > 0) { - queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and ')); - } - console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`); +// try { +// const queryParamsFacility = new URLSearchParams({ +// lyrTypeNm: 'tb_il_swage_prcs_fclt', +// page: '0', +// size: '100000', +// sort: 'string', +// }); +// const cqlFiltersFacility: string[] = []; +// if (selectedSigun.text && selectedSigun.val !== '0') { +// cqlFiltersFacility.push(`sgg_nm ILIKE '%${selectedSigun.text}%'`); +// } +// if (cqlFiltersFacility.length > 0) { +// queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and ')); +// } +// console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`); - const facilityRes = await fetch(`${API_URL}/v1/fclts?${queryParamsFacility.toString()}`, { - method: "GET", - headers: { accept: "application/json" } - }).then(res => res.json()); +// const facilityRes = await fetch(`${API_URL}/v1/fclts?${queryParamsFacility.toString()}`, { +// method: "GET", +// headers: { accept: "application/json" } +// }).then(res => res.json()); - const facilities = (facilityRes.data || []).map((item: any) => ({ - text: item.swtrmtFcltNm, - val: item.fid, - sggNm: item.sggNm - })); - allFclt = (facilities); +// const facilities = (facilityRes.data || []).map((item: any) => ({ +// text: item.swtrmtFcltNm, +// val: item.fid, +// sggNm: item.sggNm +// })); +// allFclt = (facilities); - } catch (error) { - console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error); - allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]); - } finally { - setIsLoading(false); - } - }; +// } catch (error) { +// console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error); +// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]); +// } finally { +// setIsLoading(false); +// } +// }; - fetchData(); - }, [selectedSigun]); +// fetchData(); +// }, [selectedSigun]); - useEffect(() => { - if (ref && ref.current) { - const customRef = ref.current; - customRef.partValue = partValue; - customRef.sidoValue = sidoValue; - customRef.sigunValue = sigunValue; - customRef.regionValue = regionValue; - customRef.unitWaterShedValue = untitWaterShedValue; - customRef.middleRegionValue = middleRegionValue; - customRef.envPartValue = envPartValue; - customRef.sidoText = selectedSido.text; - customRef.sigunText = selectedSigun.text; - } - }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]); +// useEffect(() => { +// if (ref && ref.current) { +// const customRef = ref.current; +// customRef.partValue = partValue; +// customRef.sidoValue = sidoValue; +// customRef.sigunValue = sigunValue; +// customRef.regionValue = regionValue; +// customRef.unitWaterShedValue = untitWaterShedValue; +// customRef.middleRegionValue = middleRegionValue; +// customRef.envPartValue = envPartValue; +// customRef.sidoText = selectedSido.text; +// customRef.sigunText = selectedSigun.text; +// } +// }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]); - // buildingSearchText가 변경될 때 API 호출 - useEffect(() => { - if (buildingSearchText && buildingSearchText.length > 1) { - if (checkedLayers && checkedLayers.length > 0) { - // 다중 레이어 검색 - // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", buildingSearchText); - buildingNmSearch("RNB", selectedSigun.val, buildingSearchText); - } else { - // 단일 레이어 검색 - // buildingNmSearch(checkedLayers[0], selectedSigun.val, buildingSearchText); - } - } else { - // 검색 텍스트가 짧으면 리스트 초기화 - if (checkedLayers && checkedLayers.length > 0) { - // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", ""); - } else { - buildingNmSearch("RNB", selectedSigun.val || "", ""); - } - } - }, [buildingSearchText]); +// // buildingSearchText가 변경될 때 API 호출 +// useEffect(() => { +// if (buildingSearchText && buildingSearchText.length > 1) { +// if (checkedLayers && checkedLayers.length > 0) { +// // 다중 레이어 검색 +// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", buildingSearchText); +// buildingNmSearch("RNB", selectedSigun.val, buildingSearchText); +// } else { +// // 단일 레이어 검색 +// // buildingNmSearch(checkedLayers[0], selectedSigun.val, buildingSearchText); +// } +// } else { +// // 검색 텍스트가 짧으면 리스트 초기화 +// if (checkedLayers && checkedLayers.length > 0) { +// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", ""); +// } else { +// buildingNmSearch("RNB", selectedSigun.val || "", ""); +// } +// } +// }, [buildingSearchText]); - return ( -
-
-
- {searchType == "공급처 후보지 조회" && ( - <> - { - const selected = code.cityCd.find(item => (item.val === val)); - setSelectedSido(selected || { text: "전체", val: '0' }); - setSelectedSigun({ text: "전체", val: '0' }); - }} - value={selectedSido.val} - selectClass={'w-32'} - /> - { - const selected = filteredSigunData.find(item => (item.val === val)); - setSelectedSigun(selected || { text: "전체", val: '0' }); - setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' }); - }} - value={selectedSigun.val} - selectClass={'w-32'} - /> -
- -
- { - setBuildingSearchText(searchNm || ""); - }} - setRtnData={function (rtnData: any): void { - // 선택된 건물 데이터 처리 - // if (rtnData && rtnData.bdstInfoPk) { - // setSelectedBuilding(rtnData); - // setBuildingSearchText(rtnData.bdstNm || ""); - // } - }} - searchList={wrMap.buildingSearchRes || []} - /> -
-
- - )} - {searchType == "우리동네가뭄지도보기" && ( - <> - { - const selected = code.cityCd.find(item => (item.val === val)); - setSelectedSido(selected || { text: "전체", val: '0' }); - setSelectedSigun({ text: "전체", val: '0' }); - }} - value={selectedSido.val} - selectClass={'w-44'} - /> - { - const selected = filteredSigunData.find(item => (item.val === val)); - setSelectedSigun(selected || { text: "전체", val: '0' }); - setSelectedDong({ text: "전체", val: '0', sggNm: '전체' }); - }} - value={selectedSigun.val} - selectClass={'w-32'} - /> - { - const selected = filteredDong.find(item => (item.val === val)); - setSelectedDong(selected || { text: "전체", val: '0', sggNm: '전체' }); - }} - value={selectedDong.val} - selectClass={'w-32'} - /> - - )} - {searchType == "지도보기" && ( -
-
{/* SearchFormLeft 래퍼 */} - -
- -
- -
-
- )} -
- {/* 버튼 부분 */} -
- {showQueryButton && } - {showInitButton && } - {showApplyButton && } -
-
-
- ) -} +// return ( +//
+//
+//
+// {searchType == "공급처 후보지 조회" && ( +// <> +// { +// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val)); +// setSelectedSido(selected || { text: "전체", val: '0' }); +// setSelectedSigun({ text: "전체", val: '0' }); +// }} +// value={selectedSido.val} +// selectClass={'w-32'} +// /> +// { +// const selected = filteredSigunData.find(item => (item.val === val)); +// setSelectedSigun(selected || { text: "전체", val: '0' }); +// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' }); +// }} +// value={selectedSigun.val} +// selectClass={'w-32'} +// /> +//
+// +//
+// { +// setBuildingSearchText(searchNm || ""); +// }} +// setRtnData={function (rtnData: any): void { +// // 선택된 건물 데이터 처리 +// // if (rtnData && rtnData.bdstInfoPk) { +// // setSelectedBuilding(rtnData); +// // setBuildingSearchText(rtnData.bdstNm || ""); +// // } +// }} +// searchList={buildingSearchRes || []} +// /> +//
+//
+// +// )} +// {searchType == "우리동네가뭄지도보기" && ( +// <> +// { +// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val)); +// setSelectedSido(selected || { text: "전체", val: '0' }); +// setSelectedSigun({ text: "전체", val: '0' }); +// }} +// value={selectedSido.val} +// selectClass={'w-44'} +// /> +// { +// const selected = filteredSigunData.find(item => (item.val === val)); +// setSelectedSigun(selected || { text: "전체", val: '0' }); +// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' }); +// }} +// value={selectedSigun.val} +// selectClass={'w-32'} +// /> +// { +// const selected = filteredDong.find(item => (item.val === val)); +// setSelectedDong(selected || { text: "전체", val: '0', sggNm: '전체' }); +// }} +// value={selectedDong.val} +// selectClass={'w-32'} +// /> +// +// )} +// {searchType == "지도보기" && ( +//
+//
{/* SearchFormLeft 래퍼 */} +// +//
+// +//
+// +//
+//
+// )} +//
+// {/* 버튼 부분 */} +//
+// {showQueryButton && } +// {showInitButton && } +// {showApplyButton && } +//
+//
+//
+// ) +// } diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index e67b2b0fb..dfbb1dc24 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -48,7 +48,8 @@ const NewWindowPopup: React.FC = ({ onClose }) => { const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "0"); - const [showDetailView, setShowDetailView] = useState(false); // 상세정보 화면 표시 상태 추가 + // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음 + const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가 // onClose 함수를 useCallback으로 메모이제이션 const memoizedOnClose = useCallback(() => { @@ -183,14 +184,15 @@ const NewWindowPopup: React.FC = ({ layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설') ); + // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음 // 재이용시설 const isPbnst = false; // 빗물이용시설 const isRain = false; // 중수도시설 - const isRswt = false; + const isRswt = true; // 온배수시설 - const isHtdfl = true; + const isHtdfl = false; return ( diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index e85b8d162..5ac98f27f 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -16,6 +16,7 @@ import GisToolBar from './GisToolBar'; import GisTree from './GisTree'; import './lib/css/gis.common.css'; import GisApp from './lib/gis.core'; +// import FacilityInfoPopup from './FacilityInfoPopup'; export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null }); export const useGisContext = () => useContext(GisContext); @@ -47,8 +48,8 @@ function Gis({ const checkedLayerIds = useRef([]); // 팝업 데이터를 저장할 상태와 오버레이 참조를 저장할 ref 추가 - const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]); - const facilityOverlaysRef = useRef([]); + // const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]); + // const facilityOverlaysRef = useRef([]); // 체크된 레이어 상태 관리 const [checkedLayers, setCheckedLayers] = useState([]); const [checkedLayersData, setCheckedLayersData] = useState([]); @@ -225,119 +226,119 @@ function Gis({ } } - // 데이터 로드 및 팝업 생성 로직 - useEffect(() => { - if (!mapInstanceRef.current) return; // 맵이 생성되지 않았으면 실행 안 함 + // // 데이터 로드 및 팝업 생성 로직 + // useEffect(() => { + // if (!mapInstanceRef.current) return; // 맵이 생성되지 않았으면 실행 안 함 - // 1. 팝업 데이터 가져오기 (feature.js의 getData와 유사) - const fetchPopupData = async () => { - // 실제 API 호출 로직으로 대체해야 합니다. - // 예시: const response = await yourApiService.getFcltyWtCnt(); - // setFacilityInfoPopupData(response.data); + // // 1. 팝업 데이터 가져오기 (feature.js의 getData와 유사) + // const fetchPopupData = async () => { + // // 실제 API 호출 로직으로 대체해야 합니다. + // // 예시: const response = await yourApiService.getFcltyWtCnt(); + // // setFacilityInfoPopupData(response.data); - // 임시 목업 데이터 - const mockData = [ - { ftrIdn: 1, ftrCde: 'SA206', bplcNm: '처리장A', fcltyUseYn: 'Y', x: 127.005, y: 37.282, aCnt: 10, cCnt: 5, eCnt: 3, mCnt: 8, iCnt: 2 }, - { ftrIdn: 2, ftrCde: 'SA112', bplcNm: '처리장B', fcltyUseYn: 'N', x: 127.010, y: 37.285, aCnt: 8, cCnt: 4, eCnt: 2, mCnt: 6, iCnt: 1 } - ]; - setFacilityInfoPopupData(mockData); - }; + // // 임시 목업 데이터 + // const mockData = [ + // { ftrIdn: 1, ftrCde: 'SA206', bplcNm: '처리장A', fcltyUseYn: 'Y', x: 127.005, y: 37.282, aCnt: 10, cCnt: 5, eCnt: 3, mCnt: 8, iCnt: 2 }, + // { ftrIdn: 2, ftrCde: 'SA112', bplcNm: '처리장B', fcltyUseYn: 'N', x: 127.010, y: 37.285, aCnt: 8, cCnt: 4, eCnt: 2, mCnt: 6, iCnt: 1 } + // ]; + // setFacilityInfoPopupData(mockData); + // }; - fetchPopupData(); + // fetchPopupData(); - }, [mapInstanceRef.current]); // 맵 인스턴스가 생성된 후 한 번만 실행 + // }, [mapInstanceRef.current]); // 맵 인스턴스가 생성된 후 한 번만 실행 - // 데이터가 변경되면 오버레이를 생성/업데이트하는 로직 - useEffect(() => { - const map = mapInstanceRef.current; - if (!map || facilityInfoPopupData.length === 0) return; + // // 데이터가 변경되면 오버레이를 생성/업데이트하는 로직 + // useEffect(() => { + // const map = mapInstanceRef.current; + // if (!map || facilityInfoPopupData.length === 0) return; - // 기존 오버레이 정리 - facilityOverlaysRef.current.forEach(overlay => map.removeOverlay(overlay)); - facilityOverlaysRef.current = []; + // // 기존 오버레이 정리 + // facilityOverlaysRef.current.forEach(overlay => map.removeOverlay(overlay)); + // facilityOverlaysRef.current = []; - facilityInfoPopupData.forEach(data => { - const popupId = `${data.ftrIdn}_${data.ftrCde}`; + // facilityInfoPopupData.forEach(data => { + // const popupId = `${data.ftrIdn}_${data.ftrCde}`; - // 팝업을 담을 div 엘리먼트 생성 - const popupElement = document.createElement('div'); - popupElement.id = popupId; + // // 팝업을 담을 div 엘리먼트 생성 + // const popupElement = document.createElement('div'); + // popupElement.id = popupId; - // OpenLayers Overlay 생성 - const position = olProj.transform([Number(data.x), Number(data.y)], GisApp.FROM_PROJ, GisApp.TO_PROJ); - const overlay = new Overlay({ - element: popupElement, - position: position, - offset: [-75, -210], // 팝업 너비의 절반, 높이만큼 오프셋 조정 - positioning: 'bottom-center', - className: 'facility-popup-overlay' // 필요시 공통 클래스 추가 - }); + // // OpenLayers Overlay 생성 + // const position = olProj.transform([Number(data.x), Number(data.y)], GisApp.FROM_PROJ, GisApp.TO_PROJ); + // const overlay = new Overlay({ + // element: popupElement, + // position: position, + // offset: [-75, -210], // 팝업 너비의 절반, 높이만큼 오프셋 조정 + // positioning: 'bottom-center', + // className: 'facility-popup-overlay' // 필요시 공통 클래스 추가 + // }); - map.addOverlay(overlay); - facilityOverlaysRef.current.push(overlay); + // map.addOverlay(overlay); + // facilityOverlaysRef.current.push(overlay); - // React 컴포넌트를 popupElement에 렌더링 - const root = createRoot(popupElement); - root.render(); - }); + // // React 컴포넌트를 popupElement에 렌더링 + // const root = createRoot(popupElement); + // root.render(); + // }); - // 초기 가시성 업데이트 - updatePopupVisibility(); + // // 초기 가시성 업데이트 + // updatePopupVisibility(); - }, [facilityInfoPopupData]); // 팝업 데이터가 변경될 때마다 실행 + // }, [facilityInfoPopupData]); // 팝업 데이터가 변경될 때마다 실행 - // 레이어 가시성에 따라 팝업 가시성을 제어하는 함수 - const updatePopupVisibility = useCallback(() => { - const map = mapInstanceRef.current; - if (!map) return; + // // 레이어 가시성에 따라 팝업 가시성을 제어하는 함수 + // const updatePopupVisibility = useCallback(() => { + // const map = mapInstanceRef.current; + // if (!map) return; - const visibleLayers = new Set(); - map.getLayers().forEach(layer => { - if (layer.getVisible()) { - // feature.js의 로직처럼 typeName이나 ftrCde를 사용해 필터링 - const typeName = layer.get('typeName'); - if (typeName === 'VW_WTL_FCLTY_AS') { // 예시 레이어 이름 - visibleLayers.add(layer.get('ftrCde')); - } - } - }); + // const visibleLayers = new Set(); + // map.getLayers().forEach(layer => { + // if (layer.getVisible()) { + // // feature.js의 로직처럼 typeName이나 ftrCde를 사용해 필터링 + // const typeName = layer.get('typeName'); + // if (typeName === 'VW_WTL_FCLTY_AS') { // 예시 레이어 이름 + // visibleLayers.add(layer.get('ftrCde')); + // } + // } + // }); - facilityOverlaysRef.current.forEach(overlay => { - const element = overlay.getElement(); - const ftrCde = element.querySelector('table')?.classList[0]; // FacilityPopup의 클래스에서 ftrCde 가져오기 + // facilityOverlaysRef.current.forEach(overlay => { + // const element = overlay.getElement(); + // const ftrCde = element.querySelector('table')?.classList[0]; // FacilityPopup의 클래스에서 ftrCde 가져오기 - if (visibleLayers.has(ftrCde)) { - element.style.display = ''; - } else { - element.style.display = 'none'; - } - }); - }, []); + // if (visibleLayers.has(ftrCde)) { + // element.style.display = ''; + // } else { + // element.style.display = 'none'; + // } + // }); + // }, []); // GisTree에서 체크 상태가 변경될 때 이 함수를 호출하도록 연결해야 합니다. // 예시: GisTree 컴포넌트에 onCheck 콜백을 추가하고, 그 콜백에서 이 함수를 호출 - useEffect(() => { - // 레이어 가시성이 변경될 때마다 팝업 가시성 업데이트 - const map = mapInstanceRef.current; - if (!map) return; + // useEffect(() => { + // // 레이어 가시성이 변경될 때마다 팝업 가시성 업데이트 + // const map = mapInstanceRef.current; + // if (!map) return; - const handleLayerVisibilityChange = () => { - updatePopupVisibility(); - }; + // const handleLayerVisibilityChange = () => { + // updatePopupVisibility(); + // }; - map.getLayers().on('change:length', handleLayerVisibilityChange); - map.getLayers().forEach(layer => { - layer.on('change:visible', handleLayerVisibilityChange); - }); + // map.getLayers().on('change:length', handleLayerVisibilityChange); + // map.getLayers().forEach(layer => { + // layer.on('change:visible', handleLayerVisibilityChange); + // }); - return () => { - // 클린업 - map.getLayers().un('change:length', handleLayerVisibilityChange); - map.getLayers().forEach(layer => { - layer.un('change:visible', handleLayerVisibilityChange); - }); - }; - }, [updatePopupVisibility]); + // return () => { + // // 클린업 + // map.getLayers().un('change:length', handleLayerVisibilityChange); + // map.getLayers().forEach(layer => { + // layer.un('change:visible', handleLayerVisibilityChange); + // }); + // }; + // }, [updatePopupVisibility]); // 체크된 레이어 정보를 처리하는 함수 const handleCheckedLayersChange = useCallback((checkedIds, checkedNodesData) => { @@ -359,18 +360,21 @@ function Gis({ {/* */} - {/* isSearchModalOpen이 true면 visible=false로 팝업 숨김 */} + {/* DetailView가 존재할 때만 렌더링 isSearchModalOpen이 true면 visible=false로 팝업 숨김 */} {isOpen && featureData && !isSearchModalOpen && ( )} - + {/* SearchView가 존재할 때만 렌더링 */} + {SearchView && ( + + )}