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

Add icon+label combos to all filter buttons and dropdowns

Browse Source 
Filters: 📺 채널, 🍽 장르, 💰 가격, 🌍 나라, 🏙 시/도, 🏘 구/군
Buttons: 📍 영역, 🗺 지도/☰ 리스트, 🔽 필터, ♥ 찜, ✎ 리뷰

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-09 16:04:08 +09:00
parent 4a1c8cf1cd
commit d1ef156f44
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -442,10 +442,10 @@ export default function Home() {
}} }}
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600" className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
> >
<option value="">전체 채널</option> <option value="">📺 전체 채널</option>
{channels.map((ch) => ( {channels.map((ch) => (
<option key={ch.id} value={ch.channel_name}> <option key={ch.id} value={ch.channel_name}>
{ch.channel_name} 📺 {ch.channel_name}
</option> </option>
))} ))}
</select> </select>
@@ -454,9 +454,9 @@ export default function Home() {
onChange={(e) => setCuisineFilter(e.target.value)} onChange={(e) => setCuisineFilter(e.target.value)}
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600" className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
> >
<option value="">전체 장르</option> <option value="">🍽 전체 장르</option>
{CUISINE_GROUPS.map((g) => ( {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>
<select <select
@@ -464,7 +464,7 @@ export default function Home() {
onChange={(e) => setPriceFilter(e.target.value)} onChange={(e) => setPriceFilter(e.target.value)}
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600" className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
> >
<option value="">전체 가격</option> <option value="">💰 전체 가격</option>
{PRICE_GROUPS.map((g) => ( {PRICE_GROUPS.map((g) => (
<option key={g.label} value={g.label}>{g.label}</option> <option key={g.label} value={g.label}>{g.label}</option>
))} ))}
@@ -477,9 +477,9 @@ export default function Home() {
onChange={(e) => handleCountryChange(e.target.value)} onChange={(e) => handleCountryChange(e.target.value)}
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600" className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
> >
<option value="">전체 나라</option> <option value="">🌍 전체 나라</option>
{countries.map((c) => ( {countries.map((c) => (
<option key={c} value={c}>{c}</option> <option key={c} value={c}>🌍 {c}</option>
))} ))}
</select> </select>
{countryFilter && cities.length > 0 && ( {countryFilter && cities.length > 0 && (
@@ -488,9 +488,9 @@ export default function Home() {
onChange={(e) => handleCityChange(e.target.value)} onChange={(e) => handleCityChange(e.target.value)}
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600" className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
> >
<option value="">전체 시/도</option> <option value="">🏙 전체 시/도</option>
{cities.map((c) => ( {cities.map((c) => (
<option key={c} value={c}>{c}</option> <option key={c} value={c}>🏙 {c}</option>
))} ))}
</select> </select>
)} )}
@@ -500,9 +500,9 @@ export default function Home() {
onChange={(e) => handleDistrictChange(e.target.value)} onChange={(e) => handleDistrictChange(e.target.value)}
className="border rounded-lg px-3 py-1.5 text-sm text-gray-600" className="border rounded-lg px-3 py-1.5 text-sm text-gray-600"
> >
<option value="">전체 구/군</option> <option value="">🏘 전체 구/군</option>
{districts.map((d) => ( {districts.map((d) => (
<option key={d} value={d}>{d}</option> <option key={d} value={d}>🏘 {d}</option>
))} ))}
</select> </select>
)} )}
@@ -516,14 +516,14 @@ export default function Home() {
}`} }`}
title="지도 영역 내 식당만 표시" title="지도 영역 내 식당만 표시"
> >
{boundsFilterOn ? "📍 영역" : "📍"} {boundsFilterOn ? "📍 영역 필터" : "📍 영역"}
</button> </button>
<button <button
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")} 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" className="px-3 py-1.5 text-sm border rounded-lg transition-colors hover:bg-gray-100 text-gray-600"
title={viewMode === "map" ? "리스트 우선" : "지도 우선"} title={viewMode === "map" ? "리스트 우선" : "지도 우선"}
> >
{viewMode === "map" ? "🗺" : "☰"} {viewMode === "map" ? "🗺 지도" : "☰ 리스트"}
</button> </button>
{user && ( {user && (
<> <>
@@ -618,7 +618,7 @@ export default function Home() {
: "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.5 -right-1.5 w-4 h-4 bg-orange-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-orange-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}
@@ -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" 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) => ( {channels.map((ch) => (
<option key={ch.id} value={ch.channel_name}> <option key={ch.id} value={ch.channel_name}>
{ch.channel_name} 📺 {ch.channel_name}
</option> </option>
))} ))}
</select> </select>
@@ -680,9 +680,9 @@ export default function Home() {
onChange={(e) => setCuisineFilter(e.target.value)} onChange={(e) => setCuisineFilter(e.target.value)}
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" 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) => ( {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>
<select <select
@@ -690,9 +690,9 @@ export default function Home() {
onChange={(e) => setPriceFilter(e.target.value)} onChange={(e) => setPriceFilter(e.target.value)}
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" 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) => ( {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> </select>
</div> </div>
@@ -703,9 +703,9 @@ export default function Home() {
onChange={(e) => handleCountryChange(e.target.value)} onChange={(e) => handleCountryChange(e.target.value)}
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" 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) => ( {countries.map((c) => (
<option key={c} value={c}>{c}</option> <option key={c} value={c}>🌍 {c}</option>
))} ))}
</select> </select>
{countryFilter && cities.length > 0 && ( {countryFilter && cities.length > 0 && (
@@ -714,9 +714,9 @@ export default function Home() {
onChange={(e) => handleCityChange(e.target.value)} onChange={(e) => handleCityChange(e.target.value)}
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" 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) => ( {cities.map((c) => (
<option key={c} value={c}>{c}</option> <option key={c} value={c}>🏙 {c}</option>
))} ))}
</select> </select>
)} )}
@@ -726,9 +726,9 @@ export default function Home() {
onChange={(e) => handleDistrictChange(e.target.value)} onChange={(e) => handleDistrictChange(e.target.value)}
className="border rounded-lg px-2.5 py-1.5 text-xs text-gray-600 bg-white" 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) => ( {districts.map((d) => (
<option key={d} value={d}>{d}</option> <option key={d} value={d}>🏘 {d}</option>
))} ))}
</select> </select>
)} )}