From b3923dcc720be4a08cdf440df602f65f63ca5f7c Mon Sep 17 00:00:00 2001
From: joungmin <joungmin@joungmins-Mac-mini.local>
Date: Mon, 9 Mar 2026 16:16:40 +0900
Subject: [PATCH] Move channel legend to bottom-left of map

Also added dark mode support for the legend overlay.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/MapView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MapView.tsx b/frontend/src/components/MapView.tsx
index 2b3b55f..a8984c0 100644
--- a/frontend/src/components/MapView.tsx
+++ b/frontend/src/components/MapView.tsx
@@ -230,14 +230,14 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
         />
       </Map>
       {channelNames.length > 1 && (
-        <div className="absolute top-2 left-2 bg-white/90 rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
+        <div className="absolute bottom-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
           {channelNames.map((ch) => (
             <div key={ch} className="flex items-center gap-1">
               <span
                 className="inline-block w-2.5 h-2.5 rounded-full border"
                 style={{ backgroundColor: channelColors[ch].border, borderColor: channelColors[ch].border }}
               />
-              <span className="text-gray-700">{ch}</span>
+              <span className="text-gray-700 dark:text-gray-300">{ch}</span>
             </div>
           ))}
         </div>