diff --git a/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx b/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx index 8aab93966..1f1ec1ab7 100644 --- a/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx +++ b/apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx @@ -78,7 +78,7 @@ export function KoreaBasinMap() { const rowsRef = useRef(null); const colTitleRef = useRef(null); - const { selectedBasin } = useStore(basinStore); + const { selectedBasin, setSelectedBasin } = useStore(basinStore); const selectedBasinKey = basinKeyMap[selectedBasin]; // selectedBasinKey prop이 변경될 때 지도를 업데이트하는 useEffect useEffect(() => { @@ -351,7 +351,13 @@ export function KoreaBasinMap() { clear(); g.classList.add("active"); showForWithLabel(g); + const basinKey = g.dataset.key as keyof typeof BASIN_DATA | undefined; + if (basinKey) { + const basinName = BASIN_DATA[basinKey].name; + setSelectedBasin(basinName); + } }); + }); if (stageRef.current) { stageRef.current.addEventListener("mouseleave", clear); diff --git a/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx b/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx index 37d43248e..96d98ade4 100644 --- a/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx +++ b/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx @@ -1,11 +1,10 @@ "use client"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; -import { useStore } from "zustand"; import { tokenManager } from "@/entities/auth/lib/token-manager"; import { client } from "@/shared/api"; import { ENDPOINT } from "@/shared/config"; -import { KoreaBasinMap, basinKeyMap } from "../lib/korea-basin-map"; +import { KoreaBasinMap } from "../lib/korea-basin-map"; import { Chart as ChartJS, CategoryScale,