refactor: 패널 빈 공간 제거 및 버스 아이콘 대치 및 패널 내 아이콘, 텍스트 정렬 (#28)

* refactor: 패널 빈 공간 제거 및 버스 아이콘 추가

* refactor: 버스 아이콘 대치 및 패널 아이콘 텍스트 정렬 적용

Author: KwonDeaGeun

src/assets/busIcon.svg

@@ -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"
                 >
                     <div className="inline-flex items-center gap-3">
-                        <div className="flex-shrink-0 transition-transform duration-200 group-hover:scale-110">
+                        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center transition-transform duration-200 group-hover:scale-110">
                             <svg
                                 width="32"
                                 height="32"
@@ -155,10 +156,11 @@ 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"
                 >
                     <div className="inline-flex items-center gap-3">
-                        <div className="flex-shrink-0 transition-transform duration-200 group-hover:scale-110">
-                            <Bus
-                                className="h-8 w-8 text-blue-600"
-                                strokeWidth={2.5}
+                        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center transition-transform duration-200 group-hover:scale-110">
+                            <img 
+                                src={busIconSvg} 
+                                alt="버스" 
+                                style={{ width: "20px", height: "38px" }}
                             />
                         </div>
                         <span

src/components/BusStops.tsx

@@ -17,12 +17,18 @@ export const BusStopsPanel = ({
     return (
         <div
             style={{
+                position: "fixed",
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 50,
                 padding: "10px",
                 display: "flex",
                 alignItems: "center",
                 gap: "8px",
                 backgroundColor: "#f5f5f5",
                 borderTop: "1px solid #ddd",
+                boxShadow: "0 -6px 20px rgba(0,0,0,0.08)",
             }}
         >
             <BusStops

src/components/BusStopsPanel.tsx

@@ -25,7 +25,7 @@ export const MapContainer = ({
     useMapEventHandlers(mapId);
 
     return (
-        <div id={mapId} style={{ height: "70vh", width: "100vw" }}>
+        <div id={mapId} style={{ flex: 1, width: "100%", minHeight: 200 }}>
             {children}
         </div>
     );

src/components/MapContainer.tsx

@@ -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,17 +169,21 @@ 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";
         busDiv.style.cursor = "pointer";
         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({