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<any | null>(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 (
+    <div className="bg-container">
+      <Gis
+        treeData={treeData}
+        isSearch={false}
+        gisMaps={gisMaps}
+        isMiniMap={false}
+        searchView={undefined}
+        detailView={undefined}
+        onFeatureSelect={undefined}
+        setIsOpen={setIsOpen}
+        setFeatureData={undefined}
+        featureData={undefined}
+        setIsSearchModalOpen={undefined}
+        isOpen={isOpen}
+        isSearchModalOpen={undefined}
+        onCheckedLayersChange={handleCheckedLayersChange}
+        imgVisble={true}
+        searchBar={<SearchBar gisMaps={gisMaps} ctpvCode={ctpvCd} sggCode={sggCd} fromDate={fromDate} toDate={toDate} />}
+        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]}
+      />
+    </div>
+  );
+}
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();