From e797bdbdf799832df0e1a71bb23fb002cae096f9 Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 13 Aug 2025 16:11:33 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20Gis.js=20defaultZoom,=20defaultLonL?= =?UTF-8?q?at=20props=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/map/Gis.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index 3d810b48d..7aadc2296 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -124,7 +124,9 @@ function Gis({ checkInterval = 3000, height: height = "h-[calc(100vh-5rem)]", onOpenPopup = (data) => { }, - droughtDates = { startYmd: '', endYmd: '' } + droughtDates = { startYmd: '', endYmd: '' }, + defaultZoom = gisCore.defaults.zoom, + defaultLonLat = [127.4875, 37.4916], }) { const mapRef = useRef(); const [mapObject, setMapObject] = useState({}); @@ -209,9 +211,9 @@ function Gis({ }).extend([]), view: new View({ projection: GisApp.TO_PROJ, - zoom: gisCore.defaults.zoom, + zoom: defaultZoom, center: olProj.transform( - [127.4875, 37.4916], + defaultLonLat, GisApp.FROM_PROJ, GisApp.TO_PROJ, ), From 428f617802257813fb82cdd08500316054778871 Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 13 Aug 2025 16:20:15 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20defaultZoom=20props=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/map/Gis.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index 7aadc2296..7905fee7b 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -125,7 +125,7 @@ function Gis({ height: height = "h-[calc(100vh-5rem)]", onOpenPopup = (data) => { }, droughtDates = { startYmd: '', endYmd: '' }, - defaultZoom = gisCore.defaults.zoom, + defaultZoom = undefined, defaultLonLat = [127.4875, 37.4916], }) { const mapRef = useRef(); @@ -211,7 +211,7 @@ function Gis({ }).extend([]), view: new View({ projection: GisApp.TO_PROJ, - zoom: defaultZoom, + zoom: defaultZoom ?? gisCore.defaults.zoom, center: olProj.transform( defaultLonLat, GisApp.FROM_PROJ, From 056b7bae3c39c1129e659c8b1d5cbbfd2c46695f Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 13 Aug 2025 16:31:01 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20defaultZoom=20props=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/(popUp-layout)/mapDrgtPopUp/page.tsx | 90 +++++++++++++++++++ .../business_components/src/ui/map/Gis.js | 2 +- 2 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx diff --git a/apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx b/apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx new file mode 100644 index 000000000..e126feb99 --- /dev/null +++ b/apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx @@ -0,0 +1,90 @@ +"use client"; + +import Gis from "@common/business_components/ui/map/Gis"; +import { useEffect, useRef, useState, useCallback } from "react"; +import { useSearchParams } from "next/navigation"; +import { mapService } from "../../(map-layout)/service"; +import { DrgtLegend, DRGT_LAYER_TYPES, EXPRS_ORDERED_LAYERS } from "./drgtLegend"; +import { SearchBar } from "./searchBar"; + + +export default function MapDrgtPopUp() { + const searchParams = useSearchParams(); + const ctpvCd = searchParams.get('ctpvCd') || ''; + const sggCd = searchParams.get('sggCd') || ''; + const fromDate = searchParams.get('fromDate') || ''; + const toDate = searchParams.get('toDate') || ''; + + const gisMaps = useRef(null); + const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정 + const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태 + const [showDrgtLegend, setShowDrgtLegend] = useState(false); // DrgtLegend 표시 여부 + const [isPlaying, setIsPlaying] = useState(false); + + // 컴포넌트 마운트 시 1회 실행 + useEffect(() => { + fetchData(); + }, []); + + function fetchData() { + (async () => { + try { + const response = await mapService.getLyrStngs('WR_DROUGHT'); + setTreeData(response); // API 응답 저장 + console.log("Drought layers fetched:", response); + } catch (error) { + console.error("데이터 불러오기 실패:", error); + } + })(); + } + + // WaterDepth 표시 여부를 결정하는 함수 + const handleDrgtLegndVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => { + const drgtLegndLayers = checkedNodesData.filter(node => + DRGT_LAYER_TYPES.includes(node.data?.lyrTyNm) + ); + + const hasDrgtLegndLayer = drgtLegndLayers.length > 0; + setShowDrgtLegend(hasDrgtLegndLayer); + }, []); + + // 체크된 레이어 변경 처리 함수 + const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => { + handleDrgtLegndVisibility(checkedIds, checkedNodesData); + }, [handleDrgtLegndVisibility]); + + + + return ( +
+ } + waterDepth={showDrgtLegend ? DrgtLegend : undefined} + isPlaying={isPlaying} + setIsPlaying={setIsPlaying as any} + targetLayerTypes={DRGT_LAYER_TYPES as any} + orderedLayers={EXPRS_ORDERED_LAYERS as any} + checkInterval={2500} + height={`h-[100vh]`} + droughtDates={{ startYmd: fromDate, endYmd: toDate }} + defaultZoom={7} + defaultLonLat={[127.4875, 36.4916]} + /> +
+ ); +} diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index 7905fee7b..6d4d7d15c 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -125,7 +125,7 @@ function Gis({ height: height = "h-[calc(100vh-5rem)]", onOpenPopup = (data) => { }, droughtDates = { startYmd: '', endYmd: '' }, - defaultZoom = undefined, + defaultZoom = 15, defaultLonLat = [127.4875, 37.4916], }) { const mapRef = useRef(); From 262cf21546fcd513704e1c6edf118722d9523fad Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 13 Aug 2025 17:20:40 +0900 Subject: [PATCH 4/4] =?UTF-8?q?remove:=20=EC=9E=98=EB=AA=BB=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=EB=90=9C=20=EB=AC=BC=EC=9E=AC=EC=9D=B4=EC=9A=A9(wr)?= =?UTF-8?q?=EC=9D=98=20=EA=B0=80=EB=AD=84=EC=A7=80=EB=8F=84=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/(popUp-layout)/mapDrgtPopUp/page.tsx | 90 ------------------- 1 file changed, 90 deletions(-) delete mode 100644 apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx diff --git a/apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx b/apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx deleted file mode 100644 index e126feb99..000000000 --- a/apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx +++ /dev/null @@ -1,90 +0,0 @@ -"use client"; - -import Gis from "@common/business_components/ui/map/Gis"; -import { useEffect, useRef, useState, useCallback } from "react"; -import { useSearchParams } from "next/navigation"; -import { mapService } from "../../(map-layout)/service"; -import { DrgtLegend, DRGT_LAYER_TYPES, EXPRS_ORDERED_LAYERS } from "./drgtLegend"; -import { SearchBar } from "./searchBar"; - - -export default function MapDrgtPopUp() { - const searchParams = useSearchParams(); - const ctpvCd = searchParams.get('ctpvCd') || ''; - const sggCd = searchParams.get('sggCd') || ''; - const fromDate = searchParams.get('fromDate') || ''; - const toDate = searchParams.get('toDate') || ''; - - const gisMaps = useRef(null); - const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정 - const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태 - const [showDrgtLegend, setShowDrgtLegend] = useState(false); // DrgtLegend 표시 여부 - const [isPlaying, setIsPlaying] = useState(false); - - // 컴포넌트 마운트 시 1회 실행 - useEffect(() => { - fetchData(); - }, []); - - function fetchData() { - (async () => { - try { - const response = await mapService.getLyrStngs('WR_DROUGHT'); - setTreeData(response); // API 응답 저장 - console.log("Drought layers fetched:", response); - } catch (error) { - console.error("데이터 불러오기 실패:", error); - } - })(); - } - - // WaterDepth 표시 여부를 결정하는 함수 - const handleDrgtLegndVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => { - const drgtLegndLayers = checkedNodesData.filter(node => - DRGT_LAYER_TYPES.includes(node.data?.lyrTyNm) - ); - - const hasDrgtLegndLayer = drgtLegndLayers.length > 0; - setShowDrgtLegend(hasDrgtLegndLayer); - }, []); - - // 체크된 레이어 변경 처리 함수 - const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => { - handleDrgtLegndVisibility(checkedIds, checkedNodesData); - }, [handleDrgtLegndVisibility]); - - - - return ( -
- } - waterDepth={showDrgtLegend ? DrgtLegend : undefined} - isPlaying={isPlaying} - setIsPlaying={setIsPlaying as any} - targetLayerTypes={DRGT_LAYER_TYPES as any} - orderedLayers={EXPRS_ORDERED_LAYERS as any} - checkInterval={2500} - height={`h-[100vh]`} - droughtDates={{ startYmd: fromDate, endYmd: toDate }} - defaultZoom={7} - defaultLonLat={[127.4875, 36.4916]} - /> -
- ); -}