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:
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user