From 5579ab677d6a352c65ab5118882d4fa3aed09fed Mon Sep 17 00:00:00 2001 From: swcho Date: Tue, 1 Jul 2025 10:26:40 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=AC=EC=9D=B4=EC=9A=A9=EC=8B=9C?= =?UTF-8?q?=EC=84=A4=ED=98=84=ED=99=A9=20=EC=83=81=EB=8B=A8=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=EB=B0=94=20=EC=8B=9C=EC=84=A4=EB=AA=85=20=EC=9E=90?= =?UTF-8?q?=EB=8F=99=EC=99=84=EC=84=B1=20=EA=B2=80=EC=83=89=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20(=EC=A1=B0=ED=9A=8C=20=EB=B2=84=ED=8A=BC,=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=B2=84=ED=8A=BC=20=EB=AF=B8?= =?UTF-8?q?=EA=B5=AC=ED=98=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/map/page.tsx | 1 + apps/wr/app/map/htdflSttn/page.tsx | 31 ++-- apps/wr/app/map/mapSearchBar.tsx | 157 +++++++----------- apps/wr/app/page.tsx | 4 +- .../business_components/src/ui/map/GisTree.js | 6 +- 5 files changed, 88 insertions(+), 111 deletions(-) diff --git a/apps/sn/app/map/page.tsx b/apps/sn/app/map/page.tsx index e1a90d5f1..d8bab06bb 100644 --- a/apps/sn/app/map/page.tsx +++ b/apps/sn/app/map/page.tsx @@ -106,6 +106,7 @@ const Map = () => { setIsSearchModalOpen={setIsSearchModalOpen} isOpen={isOpen} isSearchModalOpen={isSearchModalOpen} + onCheckedLayersChange={undefined} /> ); diff --git a/apps/wr/app/map/htdflSttn/page.tsx b/apps/wr/app/map/htdflSttn/page.tsx index 5ba199c8c..937490fe2 100644 --- a/apps/wr/app/map/htdflSttn/page.tsx +++ b/apps/wr/app/map/htdflSttn/page.tsx @@ -108,15 +108,15 @@ const Map = () => { }; // MapSearchBar 래퍼 컴포넌트 - const CustomMapSearchBar = (props: any) => { - return ( - - ); - }; + // const CustomMapSearchBar = (props: any) => { + // return ( + // + // ); + // }; return (
@@ -125,10 +125,21 @@ const Map = () => { isSearch={false} gisMaps={gisMaps} isMiniMap={true} - searchView={CustomMapSearchBar} + searchView={(props: any) => ( + + ) + } detailView={(props: any) => ( )} diff --git a/apps/wr/app/map/mapSearchBar.tsx b/apps/wr/app/map/mapSearchBar.tsx index f5d693ee3..eabc6b892 100644 --- a/apps/wr/app/map/mapSearchBar.tsx +++ b/apps/wr/app/map/mapSearchBar.tsx @@ -1,16 +1,12 @@ "use client" -import { Button, Input, Label } from "@common/components/ui"; -import React, { useCallback, useEffect, useRef, useState, useMemo } from "react"; -import { useForm } from "react-hook-form"; -import { MapSearchFormLeft } from "./mapSearchForm"; import { useWrStore } from "@/app/store"; -import { btnClass } from "@/app/store/common/code"; -import { SearchBaseForm } from "@common/business_components"; -import { FormUi, SelectBox, SearchFormLeft, SearchFormRight, Form, FormField } from "@common/business_components/ui"; -import type { ReturnType, SelectDataType, EnvPartSelectDataType } from "@common/business_components/ui"; import SearchInputText from "@/components/ui/searchInput/searchInput"; -import { zodResolver } from "@hookform/resolvers/zod"; +import type { EnvPartSelectDataType, ReturnType, SelectDataType } from "@common/business_components/ui"; +import { SelectBox } from "@common/business_components/ui"; +import { Button, Input, Label } from "@common/components/ui"; +import React, { useEffect, useMemo, useRef, useState } from "react"; +import { MapSearchFormLeft } from "./mapSearchForm"; // 건물 검색 타입 정의 @@ -49,6 +45,8 @@ type SearchBaseType = { showQueryButton?: boolean; showInitButton?: boolean; showApplyButton?: boolean; + checkedLayers?: string[]; + checkedLayersData?: any[]; } const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; @@ -82,17 +80,29 @@ export function MapSearchBar({ rightClassName, showQueryButton = true, showInitButton = true, - showApplyButton = true + showApplyButton = true, + checkedLayers = [], + checkedLayersData = [], }: SearchBaseType) { // 로딩바 const [isLoading, setIsLoading] = useState(false); // 상세 정보 조회를 위한 상태 추가 const [popupFeature, setPopupFeature] = useState(null); - const { code } = useWrStore((state) => state); const [isChHead, setIsChHead] = useState(false); const ref = useRef({} as ReturnType); + // 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([]); @@ -141,77 +151,16 @@ export function MapSearchBar({ ]; }, [selectedSigun]); - // 건물 검색 API 호출 함수 - const searchBuildings = async (searchText: string) => { - if (!searchText.trim()) { - setBuildingList([]); - return; - } - - try { - const flg = "41"; // 적절한 플래그 값으로 설정 - const sigunCode = selectedSigun.val !== '0' ? selectedSigun.val : ''; - const apiEndpoint = `${API_URL}/v1/reuseFc/building/${flg}/${sigunCode}/${encodeURIComponent(searchText)}`; - - const response = await fetch(apiEndpoint, { - method: "GET", - headers: { - accept: "application/json", - "Content-Type": "application/json" - } - }); - - if (!response.ok) { - throw new Error(`API 호출 실패: ${response.status}`); - } - - const result = await response.json(); - - if (result.status === 200 && Array.isArray(result.data)) { - // 건물 검색 결과를 demandCompList 형태로 변환 - const convertedList = result.data.map((building: BuildingInfo) => ({ - dmdInfoPk: String(building.bdstInfoPk), - dmdCoNm: building.bdstNm, - daddr: building.daddr, - useUsgCd: "", - splyCpct: 0, - splyFmYn: "Y", - // 추가 필드들... - })); - setBuildingList(result.data); - // 글로벌 상태에도 업데이트 (SearchInputText가 사용할 수 있도록) - // getDemandCompList를 직접 호출하는 대신 상태를 직접 설정 - const { setBuildingSearchResults } = useWrStore.getState(); - if (setBuildingSearchResults) { - setBuildingSearchResults(convertedList); - } - } else { - setBuildingList([]); - } - } catch (error) { - console.error("건물 검색 중 오류 발생:", error); - setBuildingList([]); - } - }; - // 조회 함수 const queryVal = () => { - console.log("조회버튼 클릭"); - if (searchType == '공급처 후보지 조회') { - // queryClick({ - // partValue: partValue, - // sidoValue: sidoValue, - // sigunValue: sigunValue, - // regionValue: regionValue, - // unitWaterShedValue: untitWaterShedValue, - // middleRegionValue: middleRegionValue, - // envPartValue: envPartValue, - // sidoText: selectedSido.text, - // sigunText: selectedSigun.text, - // }); - } else if (searchType == '우리동네가뭄지도보기') { - } else if (searchType == '지도보기') { - + // 46 : 하수처리시설 + // 47 : 하수재이용시설 + // 48 : 빗물이용시설 + // 49 : 중수도시설 + // 50 : 온배수시설 + console.log("조회버튼 클릭: ", checkedLayers); + if (checkedLayers && checkedLayers.includes('48')) { + // searchBuildings } } @@ -308,6 +257,27 @@ export function MapSearchBar({ } }, [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]); + return (
@@ -338,32 +308,23 @@ export function MapSearchBar({ value={selectedSigun.val} selectClass={'w-32'} /> - {/* -
- -
*/}
{ - setBuildingSearchText(searchText || ""); - if (searchText) { - searchBuildings(searchText); - } + setValue={(searchNm?: string) => { + setBuildingSearchText(searchNm || ""); }} - setRtnData={(buildingData) => { - if (buildingData && buildingData.length > 0 && buildingData[0]) { - // 선택된 건물 정보를 찾아서 설정 - const selectedBuildingInfo = buildingList.find(building => - building.bdstNm === buildingData[0].dmdCoNm - ); - setSelectedBuilding(selectedBuildingInfo || null); - console.log("선택된 시설:", selectedBuildingInfo); - } + setRtnData={function (rtnData: any): void { + // 선택된 건물 데이터 처리 + // if (rtnData && rtnData.bdstInfoPk) { + // setSelectedBuilding(rtnData); + // setBuildingSearchText(rtnData.bdstNm || ""); + // } }} + searchList={wrMap.buildingSearchRes || []} />
diff --git a/apps/wr/app/page.tsx b/apps/wr/app/page.tsx index 70261c4c6..c2be341cf 100644 --- a/apps/wr/app/page.tsx +++ b/apps/wr/app/page.tsx @@ -159,8 +159,8 @@ export default function Home() {

시설 현황(지도)

-
diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js index e36569143..3c2cb2819 100644 --- a/packages/common/business_components/src/ui/map/GisTree.js +++ b/packages/common/business_components/src/ui/map/GisTree.js @@ -41,8 +41,12 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes // 기본 체크된 레이어들을 지도에 표시 gisCore.setLayerOnMap(defaultChecked, true); + + // 초기 체크된 레이어 정보를 상위로 전달 + const defaultCheckedNodesData = nodes.filter(node => defaultChecked.includes(node.id)); + onCheckedChange?.(defaultChecked, defaultCheckedNodesData); } - }, [nodes]); + }, [nodes]); // onCheckedChange를 의존성에 추가 // 초기 표시 여부가 'Y'인 레이어들 찾기 const getDefaultCheckedNodes = (nodes, values = []) => {