From fbbf34b71cf1c2cb38131661feb0d7acc75af39c Mon Sep 17 00:00:00 2001
From: Kwon DaeGeun <dk31415@naver.com>
Date: Tue, 11 Nov 2025 15:48:28 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=ED=8C=A8=EB=84=90=20=EB=B9=88?=
 =?UTF-8?q?=20=EA=B3=B5=EA=B0=84=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=B2=84=EC=8A=A4=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/busIcon.svg           | 12 ++++++++++++
 src/components/BusStopsPanel.tsx |  6 ++++++
 src/components/MapContainer.tsx  |  2 +-
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/busIcon.svg

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 @@
+<svg width="38" height="73" viewBox="0 0 38 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" width="34" height="73" rx="5" fill="#4955E5"/>
+<rect x="6" y="6" width="26" height="6" rx="1" fill="#EEEEEE"/>
+<path d="M35 16H36C36.5523 16 37 16.4477 37 17V24C37 24.5523 36.5523 25 36 25H35V16Z" fill="black"/>
+<path d="M35 10H37C37.5523 10 38 10.4477 38 11V12C38 12.5523 37.5523 13 37 13H35V10Z" fill="black"/>
+<path d="M35 52H36C36.5523 52 37 52.4477 37 53V60C37 60.5523 36.5523 61 36 61H35V52Z" fill="black"/>
+<path d="M1 17C1 16.4477 1.44772 16 2 16H3V25H2C1.44772 25 1 24.5523 1 24V17Z" fill="black"/>
+<path d="M0 11C0 10.4477 0.447715 10 1 10H3V13H1C0.447715 13 0 12.5523 0 12V11Z" fill="black"/>
+<path d="M1 53C1 52.4477 1.44772 52 2 52H3V61H2C1.44772 61 1 60.5523 1 60V53Z" fill="black"/>
+<path d="M6 3C6 2.44772 6.44772 2 7 2H10C10.5523 2 11 2.44772 11 3C11 3.55228 10.5523 4 10 4H7C6.44772 4 6 3.55228 6 3Z" fill="#D9D9D9"/>
+<path d="M27 3C27 2.44772 27.4477 2 28 2H31C31.5523 2 32 2.44772 32 3C32 3.55228 31.5523 4 31 4H28C27.4477 4 27 3.55228 27 3Z" fill="#D9D9D9"/>
+</svg>
diff --git a/src/components/BusStopsPanel.tsx b/src/components/BusStopsPanel.tsx
index d730329..f73386b 100644
--- a/src/components/BusStopsPanel.tsx
+++ b/src/components/BusStopsPanel.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
diff --git a/src/components/MapContainer.tsx b/src/components/MapContainer.tsx
index a8a026a..dd98d42 100644
--- a/src/components/MapContainer.tsx
+++ b/src/components/MapContainer.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>
     );

From a5fc553bde6f7f4ad7f42c62a31fb682162fffad Mon Sep 17 00:00:00 2001
From: Kwon DaeGeun <dk31415@naver.com>
Date: Tue, 11 Nov 2025 15:57:24 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EB=B2=84=EC=8A=A4=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=8C=80=EC=B9=98=20=EB=B0=8F=20=ED=8C=A8?=
 =?UTF-8?q?=EB=84=90=20=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=95=EB=A0=AC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BusStops.tsx | 14 ++++++++------
 src/utils/mapOverlays.ts    | 13 +++++++++----
 2 files changed, 17 insertions(+), 10 deletions(-)

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"
                 >
                     <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
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({