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>
This commit is contained in:
joungmin
2026-03-09 10:56:19 +09:00
parent 2bddb0f764
commit d6afb62c18

View File

@@ -591,36 +591,60 @@ export default function Home() {
{/* ── Header row 2 (mobile only): search + toolbar ── */} {/* ── Header row 2 (mobile only): search + toolbar ── */}
<div className="md:hidden px-4 pb-2 space-y-1.5"> <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 items-center gap-1.5">
<div className="flex-1">
<SearchBar onSearch={handleSearch} isLoading={loading} />
</div>
<button <button
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")} 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" viewMode === "map"
? "bg-blue-50 border-blue-300 text-blue-600" ? "bg-blue-50 border-blue-300 text-blue-600"
: "text-gray-600" : "text-gray-600"
}`} }`}
> >
{viewMode === "map" ? "🗺" : "☰"} {viewMode === "map" ? "🗺 지도" : "☰ 리스트"}
</button> </button>
<button <button
onClick={() => setShowMobileFilters(!showMobileFilters)} 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 showMobileFilters || channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn
? "bg-blue-50 border-blue-300 text-blue-600" ? "bg-blue-50 border-blue-300 text-blue-600"
: "text-gray-600" : "text-gray-600"
}`} }`}
> >
{showMobileFilters ? "✕" : "▽"} {showMobileFilters ? "✕ 필터" : "▽ 필터"}
{!showMobileFilters && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && ( {!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} {[channelFilter, cuisineFilter, priceFilter, countryFilter, boundsFilterOn].filter(Boolean).length}
</span> </span>
)} )}
</button> </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} {filteredRestaurants.length}
</span> </span>
</div> </div>
@@ -716,30 +740,6 @@ export default function Home() {
> >
{boundsFilterOn ? "📍 영역 ON" : "📍 영역"} {boundsFilterOn ? "📍 영역 ON" : "📍 영역"}
</button> </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>
</div> </div>
)} )}