From d6afb62c181181fdc83bc0ce477f498a9a22dcf0 Mon Sep 17 00:00:00 2001
From: joungmin <joungmin@joungmins-Mac-mini.local>
Date: Mon, 9 Mar 2026 10:56:19 +0900
Subject: [PATCH] Mobile header: split search and toolbar into two rows

- Row 1: search bar (full width)
- Row 2: map/list toggle, filter toggle with badge, favorites, reviews, count
- Moved favorites/reviews buttons out of collapsible filter panel to toolbar row

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/app/page.tsx | 66 +++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 042bd1f..96a64a3 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -591,36 +591,60 @@ export default function Home() {
 
         {/* ── Header row 2 (mobile only): search + toolbar ── */}
         <div className="md:hidden px-4 pb-2 space-y-1.5">
+          {/* Row 1: Search */}
+          <SearchBar onSearch={handleSearch} isLoading={loading} />
+          {/* Row 2: Toolbar */}
           <div className="flex items-center gap-1.5">
-            <div className="flex-1">
-              <SearchBar onSearch={handleSearch} isLoading={loading} />
-            </div>
             <button
               onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
-              className={`px-2 py-1.5 text-xs border rounded transition-colors shrink-0 ${
+              className={`px-2.5 py-1 text-xs border rounded transition-colors ${
                 viewMode === "map"
                   ? "bg-blue-50 border-blue-300 text-blue-600"
                   : "text-gray-600"
               }`}
             >
-              {viewMode === "map" ? "🗺" : "☰"}
+              {viewMode === "map" ? "🗺 지도" : "☰ 리스트"}
             </button>
             <button
               onClick={() => setShowMobileFilters(!showMobileFilters)}
-              className={`px-2 py-1.5 text-xs border rounded transition-colors shrink-0 relative ${
+              className={`px-2.5 py-1 text-xs border rounded transition-colors relative ${
                 showMobileFilters || channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn
                   ? "bg-blue-50 border-blue-300 text-blue-600"
                   : "text-gray-600"
               }`}
             >
-              {showMobileFilters ? "✕" : "▽"} 필터
+              {showMobileFilters ? "✕ 필터" : "▽ 필터"}
               {!showMobileFilters && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && (
-                <span className="absolute -top-1 -right-1 w-3.5 h-3.5 bg-blue-500 text-white rounded-full text-[9px] flex items-center justify-center">
+                <span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-blue-500 text-white rounded-full text-[9px] flex items-center justify-center">
                   {[channelFilter, cuisineFilter, priceFilter, countryFilter, boundsFilterOn].filter(Boolean).length}
                 </span>
               )}
             </button>
-            <span className="text-xs text-gray-400 shrink-0">
+            {user && (
+              <>
+                <button
+                  onClick={handleToggleFavorites}
+                  className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
+                    showFavorites
+                      ? "bg-red-50 border-red-300 text-red-600"
+                      : "border-gray-300 text-gray-600"
+                  }`}
+                >
+                  {showFavorites ? "♥ 찜" : "♡ 찜"}
+                </button>
+                <button
+                  onClick={handleToggleMyReviews}
+                  className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
+                    showMyReviews
+                      ? "bg-blue-50 border-blue-300 text-blue-600"
+                      : "border-gray-300 text-gray-600"
+                  }`}
+                >
+                  {showMyReviews ? "✎ 리뷰" : "✎ 리뷰"}
+                </button>
+              </>
+            )}
+            <span className="text-xs text-gray-400 ml-auto">
               {filteredRestaurants.length}개
             </span>
           </div>
@@ -716,30 +740,6 @@ export default function Home() {
                 >
                   {boundsFilterOn ? "📍 영역 ON" : "📍 영역"}
                 </button>
-                {user && (
-                  <>
-                    <button
-                      onClick={handleToggleFavorites}
-                      className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
-                        showFavorites
-                          ? "bg-red-50 border-red-300 text-red-600"
-                          : "border-gray-300 text-gray-600 bg-white"
-                      }`}
-                    >
-                      {showFavorites ? "♥ 내 찜" : "♡ 찜"}
-                    </button>
-                    <button
-                      onClick={handleToggleMyReviews}
-                      className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
-                        showMyReviews
-                          ? "bg-blue-50 border-blue-300 text-blue-600"
-                          : "border-gray-300 text-gray-600 bg-white"
-                      }`}
-                    >
-                      {showMyReviews ? "✎ 내 리뷰" : "✎ 리뷰"}
-                    </button>
-                  </>
-                )}
               </div>
             </div>
           )}