Add icon+label combos to all filter buttons and dropdowns
Filters: 📺 채널, 🍽 장르, 💰 가격, 🌍 나라, 🏙 시/도, 🏘 구/군 Buttons: 📍 영역, 🗺 지도/☰ 리스트, 🔽 필터, ♥ 찜, ✎ 리뷰 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
@@ -442,10 +442,10 @@ export default function Home() {
|
||||
}}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
|
||||
>
|
||||
<option value="">전체 채널</option>
|
||||
<option value="">📺 전체 채널</option>
|
||||
{channels.map((ch) => (
|
||||
<option key={ch.id} value={ch.channel_name}>
|
||||
{ch.channel_name}
|
||||
📺 {ch.channel_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
@@ -454,9 +454,9 @@ export default function Home() {
|
||||
onChange={(e) => setCuisineFilter(e.target.value)}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
|
||||
>
|
||||
<option value="">전체 장르</option>
|
||||
<option value="">🍽 전체 장르</option>
|
||||
{CUISINE_GROUPS.map((g) => (
|
||||
<option key={g.label} value={g.label}>{g.label}</option>
|
||||
<option key={g.label} value={g.label}>🍽 {g.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
@@ -464,7 +464,7 @@ export default function Home() {
|
||||
onChange={(e) => setPriceFilter(e.target.value)}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
|
||||
>
|
||||
<option value="">전체 가격</option>
|
||||
<option value="">💰 전체 가격</option>
|
||||
{PRICE_GROUPS.map((g) => (
|
||||
<option key={g.label} value={g.label}>{g.label}</option>
|
||||
))}
|
||||
@@ -477,9 +477,9 @@ export default function Home() {
|
||||
onChange={(e) => handleCountryChange(e.target.value)}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
|
||||
>
|
||||
<option value="">전체 나라</option>
|
||||
<option value="">🌍 전체 나라</option>
|
||||
{countries.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
<option key={c} value={c}>🌍 {c}</option>
|
||||
))}
|
||||
</select>
|
||||
{countryFilter && cities.length > 0 && (
|
||||
@@ -488,9 +488,9 @@ export default function Home() {
|
||||
onChange={(e) => handleCityChange(e.target.value)}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
|
||||
>
|
||||
<option value="">전체 시/도</option>
|
||||
<option value="">🏙 전체 시/도</option>
|
||||
{cities.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
<option key={c} value={c}>🏙 {c}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
@@ -500,9 +500,9 @@ export default function Home() {
|
||||
onChange={(e) => handleDistrictChange(e.target.value)}
|
||||
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
|
||||
>
|
||||
<option value="">전체 구/군</option>
|
||||
<option value="">🏘 전체 구/군</option>
|
||||
{districts.map((d) => (
|
||||
<option key={d} value={d}>{d}</option>
|
||||
<option key={d} value={d}>🏘 {d}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
@@ -516,14 +516,14 @@ export default function Home() {
|
||||
}`}
|
||||
title="지도 영역 내 식당만 표시"
|
||||
>
|
||||
{boundsFilterOn ? "📍 영역" : "📍"}
|
||||
{boundsFilterOn ? "📍 영역 필터" : "📍 영역"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
|
||||
className="px-3 py-1.5 text-sm border rounded-lg transition-colors hover:bg-gray-100 text-gray-600"
|
||||
title={viewMode === "map" ? "리스트 우선" : "지도 우선"}
|
||||
>
|
||||
{viewMode === "map" ? "🗺" : "☰"}
|
||||
{viewMode === "map" ? "🗺 지도" : "☰ 리스트"}
|
||||
</button>
|
||||
{user && (
|
||||
<>
|
||||
@@ -618,7 +618,7 @@ export default function Home() {
|
||||
: "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{showMobileFilters ? "✕ 필터" : "▽ 필터"}
|
||||
{showMobileFilters ? "✕ 닫기" : "🔽 필터"}
|
||||
{!showMobileFilters && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && (
|
||||
<span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-orange-500 text-white rounded-full text-[9px] flex items-center justify-center">
|
||||
{[channelFilter, cuisineFilter, priceFilter, countryFilter, boundsFilterOn].filter(Boolean).length}
|
||||
@@ -668,10 +668,10 @@ export default function Home() {
|
||||
}}
|
||||
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
|
||||
>
|
||||
<option value="">전체 채널</option>
|
||||
<option value="">📺 전체 채널</option>
|
||||
{channels.map((ch) => (
|
||||
<option key={ch.id} value={ch.channel_name}>
|
||||
{ch.channel_name}
|
||||
📺 {ch.channel_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
@@ -680,9 +680,9 @@ export default function Home() {
|
||||
onChange={(e) => setCuisineFilter(e.target.value)}
|
||||
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
|
||||
>
|
||||
<option value="">전체 장르</option>
|
||||
<option value="">🍽 전체 장르</option>
|
||||
{CUISINE_GROUPS.map((g) => (
|
||||
<option key={g.label} value={g.label}>{g.label}</option>
|
||||
<option key={g.label} value={g.label}>🍽 {g.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
@@ -690,9 +690,9 @@ export default function Home() {
|
||||
onChange={(e) => setPriceFilter(e.target.value)}
|
||||
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
|
||||
>
|
||||
<option value="">전체 가격</option>
|
||||
<option value="">💰 전체 가격</option>
|
||||
{PRICE_GROUPS.map((g) => (
|
||||
<option key={g.label} value={g.label}>{g.label}</option>
|
||||
<option key={g.label} value={g.label}>💰 {g.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
@@ -703,9 +703,9 @@ export default function Home() {
|
||||
onChange={(e) => handleCountryChange(e.target.value)}
|
||||
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
|
||||
>
|
||||
<option value="">전체 나라</option>
|
||||
<option value="">🌍 전체 나라</option>
|
||||
{countries.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
<option key={c} value={c}>🌍 {c}</option>
|
||||
))}
|
||||
</select>
|
||||
{countryFilter && cities.length > 0 && (
|
||||
@@ -714,9 +714,9 @@ export default function Home() {
|
||||
onChange={(e) => handleCityChange(e.target.value)}
|
||||
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
|
||||
>
|
||||
<option value="">전체 시/도</option>
|
||||
<option value="">🏙 전체 시/도</option>
|
||||
{cities.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
<option key={c} value={c}>🏙 {c}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
@@ -726,9 +726,9 @@ export default function Home() {
|
||||
onChange={(e) => handleDistrictChange(e.target.value)}
|
||||
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white"
|
||||
>
|
||||
<option value="">전체 구/군</option>
|
||||
<option value="">🏘 전체 구/군</option>
|
||||
{districts.map((d) => (
|
||||
<option key={d} value={d}>{d}</option>
|
||||
<option key={d} value={d}>🏘 {d}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user