-
- {/* Collapsible filter panel */}
- {showMobileFilters && (
-
- {/* Dropdown filters */}
-
+ {filteredRestaurants.length}개
+
+ {/* Line 2: 나라 + 시 + 구 + 내위치 */}
+
+ handleCountryChange(e.target.value)}
+ className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+ countryFilter ? "text-orange-600 dark:text-orange-400 border-orange-300 dark:border-orange-700" : "text-gray-500 dark:text-gray-400"
+ }`}
+ >
+ 🌍 나라
+ {countries.map((c) => (
+ {c}
+ ))}
+
+ {countryFilter && cities.length > 0 && (
{ setCuisineFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
- className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
- >
- 🍽 장르
- {CUISINE_TAXONOMY.map((g) => (
-
- 🍽 {g.category} 전체
- {g.items.map((item) => (
-
- {item}
-
- ))}
-
- ))}
-
- { setPriceFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
- className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
- >
- 💰 가격
- {PRICE_GROUPS.map((g) => (
- 💰 {g.label}
- ))}
-
-
- {/* Region filters */}
-
- handleCountryChange(e.target.value)}
- className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
- >
- 🌍 나라
- {countries.map((c) => (
- 🌍 {c}
- ))}
-
- {countryFilter && cities.length > 0 && (
- handleCityChange(e.target.value)}
- className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
- >
- 🏙 전체 시/도
- {cities.map((c) => (
- 🏙 {c}
- ))}
-
- )}
- {cityFilter && districts.length > 0 && (
- handleDistrictChange(e.target.value)}
- className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
- >
- 🏘 전체 구/군
- {districts.map((d) => (
- 🏘 {d}
- ))}
-
- )}
-
- {/* Toggle buttons */}
-
-
{
- const next = !boundsFilterOn;
- setBoundsFilterOn(next);
- if (next) {
- // 내위치 ON 시 다른 필터 초기화
- setCuisineFilter("");
- setPriceFilter("");
- setCountryFilter("");
- setCityFilter("");
- setDistrictFilter("");
- if (navigator.geolocation) {
- navigator.geolocation.getCurrentPosition(
- (pos) => setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 15 }),
- () => setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 }),
- { timeout: 5000 },
- );
- } else {
- setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 });
- }
- }
- }}
- className={`px-2.5 py-1.5 text-xs border rounded-lg transition-colors ${
- boundsFilterOn
- ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
- : "text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800"
+ value={cityFilter}
+ onChange={(e) => handleCityChange(e.target.value)}
+ className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+ cityFilter ? "text-orange-600 dark:text-orange-400 border-orange-300 dark:border-orange-700" : "text-gray-500 dark:text-gray-400"
}`}
>
- {boundsFilterOn ? "📍 내위치 ON" : "📍 내위치"}
+ 시/도
+ {cities.map((c) => (
+ {c}
+ ))}
+
+ )}
+ {cityFilter && districts.length > 0 && (
+ handleDistrictChange(e.target.value)}
+ className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+ districtFilter ? "text-orange-600 dark:text-orange-400 border-orange-300 dark:border-orange-700" : "text-gray-500 dark:text-gray-400"
+ }`}
+ >
+ 구/군
+ {districts.map((d) => (
+ {d}
+ ))}
+
+ )}
+ {countryFilter && (
+ { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }} className="text-gray-400 hover:text-orange-500">
+
-
+ )}
+
{
+ const next = !boundsFilterOn;
+ setBoundsFilterOn(next);
+ if (next) {
+ setCuisineFilter("");
+ setPriceFilter("");
+ setCountryFilter("");
+ setCityFilter("");
+ setDistrictFilter("");
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(
+ (pos) => setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 15 }),
+ () => setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 }),
+ { timeout: 5000 },
+ );
+ } else {
+ setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 });
+ }
+ }
+ }}
+ className={`flex items-center gap-0.5 rounded-lg px-2 py-1 border transition-colors ${
+ boundsFilterOn
+ ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
+ : "border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400"
+ }`}
+ >
+
+ {boundsFilterOn ? "내위치 ON" : "내위치"}
+