diff --git a/src/assets/busIcon.svg b/src/assets/busIcon.svg new file mode 100644 index 0000000..fb39fd1 --- /dev/null +++ b/src/assets/busIcon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/BusStops.tsx b/src/components/BusStops.tsx index 1daec2d..fde2f7d 100644 --- a/src/components/BusStops.tsx +++ b/src/components/BusStops.tsx @@ -1,6 +1,7 @@ -import { Bus, ChevronDown } from "lucide-react"; +import { ChevronDown } from "lucide-react"; import { useEffect, useId, useRef, useState } from "react"; import type { BusStop } from "../data/busStops"; +import busIconSvg from "../assets/busIcon.svg"; type Props = { busStops: BusStop[]; @@ -74,7 +75,7 @@ export default function BusStops({ className="group inline-flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border-0 bg-transparent px-4 py-3 transition-all duration-200 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60" >
-
+
-
- + 버스
+
{children}
); diff --git a/src/utils/mapOverlays.ts b/src/utils/mapOverlays.ts index 8a8ec47..7ef7705 100644 --- a/src/utils/mapOverlays.ts +++ b/src/utils/mapOverlays.ts @@ -1,5 +1,6 @@ import type { Bus } from "../data/bus"; import type { BusStop } from "../data/busStops"; +import busIconSvg from "../assets/busIcon.svg"; export interface OverlayHandle { setMap: (map: unknown) => void; @@ -168,8 +169,8 @@ export const createBusOverlays = ( return buses.map((bus) => { const busDiv = document.createElement("div"); - busDiv.style.width = "32px"; - busDiv.style.height = "32px"; + busDiv.style.width = "24px"; + busDiv.style.height = "46px"; busDiv.style.display = "flex"; busDiv.style.alignItems = "center"; busDiv.style.justifyContent = "center"; @@ -177,8 +178,12 @@ export const createBusOverlays = ( busDiv.setAttribute("role", "img"); busDiv.setAttribute("aria-label", bus.shuttleId || "bus"); - const iconSVG = createIconSVG("bus"); - busDiv.appendChild(iconSVG); + const img = document.createElement("img"); + img.src = busIconSvg; + img.alt = "버스"; + img.style.width = "24px"; + img.style.height = "46px"; + busDiv.appendChild(img); const busPosition = new window.kakao.maps.LatLng(bus.lat, bus.lng); const busOverlay = new window.kakao.maps.CustomOverlay({