joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile header: split search and toolbar into two rows

Browse Source 
- 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
1 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/app/page.tsx
View File

@@ -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>
)}