feat: 버스 정류장 맵핀에 클릭 이벤트 추가

src/App.tsx

@@ -139,7 +139,11 @@ function AppContent({
                     />
                 </Suspense>
             ) : null}
-            <MapContainer mapId={mapId} selectedStopName={bubbleStop?.name}>
+            <MapContainer 
+                mapId={mapId} 
+                selectedStopName={bubbleStop?.name}
+                onStopClick={(stop) => setBubbleStop(stop)}
+            >
                 <Bubble
                     stop={bubbleStop}
                     onClose={() => setBubbleStop(undefined)}

src/components/MapContainer.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { useBusLocations } from "../api/bus";
+import type { BusStop } from "../data/busStops";
 import { busStops } from "../data/busStops";
 import { useKakaoMap } from "../hooks/useKakaoMap";
 import { useMapEventHandlers } from "../hooks/useMapEventHandlers";
@@ -10,18 +11,20 @@ interface MapContainerProps {
     mapId: string;
     children?: ReactNode;
     selectedStopName?: string;
+    onStopClick?: (stop: BusStop) => void;
 }
 
 export const MapContainer = ({
     mapId,
     children,
     selectedStopName,
+    onStopClick,
 }: MapContainerProps) => {
     const { toast } = useToast();
     const map = useKakaoMap({ mapId, toast });
     const { data: buses = [] } = useBusLocations();
 
-    useMapOverlays(map, [...busStops], buses, selectedStopName);
+    useMapOverlays(map, [...busStops], buses, selectedStopName, onStopClick);
     useMapEventHandlers(mapId);
 
     return (

src/hooks/useMapOverlays.ts

@@ -11,13 +11,14 @@ export const useMapOverlays = (
     map: unknown,
     busStops: BusStop[],
     buses: Bus[],
-    selectedStopName?: string
+    selectedStopName?: string,
+    onStopClick?: (stop: BusStop) => void
 ) => {
     useEffect(() => {
         if (!map) return;
 
         const overlays: OverlayHandle[] = [
-            ...createBusStopOverlays(map, busStops, selectedStopName),
+            ...createBusStopOverlays(map, busStops, selectedStopName, onStopClick),
             ...createBusOverlays(map, buses),
         ];
 
@@ -30,5 +31,5 @@ export const useMapOverlays = (
                 }
             });
         };
-    }, [map, busStops, buses, selectedStopName]);
+    }, [map, busStops, buses, selectedStopName, onStopClick]);
 };

src/utils/mapOverlays.ts

@@ -130,7 +130,8 @@ const createIconSVG = (iconType: "mapPin" | "bus", showCircle = false) => {
 export const createBusStopOverlays = (
     map: unknown,
     busStops: BusStop[],
-    selectedStopName?: string
+    selectedStopName?: string,
+    onStopClick?: (stop: BusStop) => void
 ): OverlayHandle[] => {
     if (!map || typeof window === "undefined" || !window.kakao?.maps) return [];
 
@@ -143,12 +144,21 @@ export const createBusStopOverlays = (
         busIconDiv.style.display = "flex";
         busIconDiv.style.alignItems = "center";
         busIconDiv.style.justifyContent = "center";
-        busIconDiv.setAttribute("role", "img");
+        busIconDiv.style.cursor = "pointer";
+        busIconDiv.setAttribute("role", "button");
         busIconDiv.setAttribute("aria-label", `정류장: ${stop.name}`);
+        busIconDiv.setAttribute("tabindex", "0");
 
         const iconSVG = createIconSVG("mapPin", isSelected);
         busIconDiv.appendChild(iconSVG);
 
+        // 클릭 이벤트 추가
+        busIconDiv.addEventListener("click", () => {
+            if (onStopClick) {
+                onStopClick(stop);
+            }
+        });
+
         const markerPosition = new window.kakao.maps.LatLng(stop.lat, stop.lng);
         const overlay = new window.kakao.maps.CustomOverlay({
             position: markerPosition,