861 lines
33 KiB
TypeScript
861 lines
33 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { GoogleLogin } from "@react-oauth/google";
|
|
import { api } from "@/lib/api";
|
|
import type { Restaurant, Channel, Review } from "@/lib/api";
|
|
import { useAuth } from "@/lib/auth-context";
|
|
import MapView, { MapBounds, FlyTo } from "@/components/MapView";
|
|
import SearchBar from "@/components/SearchBar";
|
|
import RestaurantList from "@/components/RestaurantList";
|
|
import RestaurantDetail from "@/components/RestaurantDetail";
|
|
import MyReviewsList from "@/components/MyReviewsList";
|
|
import BottomSheet from "@/components/BottomSheet";
|
|
|
|
const CUISINE_GROUPS: { label: string; prefix: string }[] = [
|
|
{ label: "한식", prefix: "한식" },
|
|
{ label: "일식", prefix: "일식" },
|
|
{ label: "중식", prefix: "중식" },
|
|
{ label: "양식", prefix: "양식" },
|
|
{ label: "아시아", prefix: "아시아" },
|
|
{ label: "기타", prefix: "기타" },
|
|
];
|
|
|
|
function matchCuisineGroup(cuisineType: string | null, group: string): boolean {
|
|
if (!cuisineType) return false;
|
|
const g = CUISINE_GROUPS.find((g) => g.label === group);
|
|
if (!g) return false;
|
|
return cuisineType.startsWith(g.prefix);
|
|
}
|
|
|
|
const PRICE_GROUPS: { label: string; test: (p: string) => boolean }[] = [
|
|
{
|
|
label: "저렴 (~1만원)",
|
|
test: (p) => /저렴|가성비|착한|만원 이하|[3-9]천원|^\d[,.]?\d*천원/.test(p) || /^[1]만원대$/.test(p) || /^[5-9],?\d{3}원/.test(p),
|
|
},
|
|
{
|
|
label: "보통 (1~3만원)",
|
|
test: (p) => /[1-2]만원대|1-[23]만|인당 [12]\d?,?\d*원|1[2-9],?\d{3}원|2[0-9],?\d{3}원/.test(p),
|
|
},
|
|
{
|
|
label: "고가 (3만원~)",
|
|
test: (p) => /[3-9]만원|고가|높은|묵직|살벌|10만원|5만원|4만원|6만원/.test(p),
|
|
},
|
|
];
|
|
|
|
function matchPriceGroup(priceRange: string | null, group: string): boolean {
|
|
if (!priceRange) return false;
|
|
const g = PRICE_GROUPS.find((g) => g.label === group);
|
|
if (!g) return false;
|
|
return g.test(priceRange);
|
|
}
|
|
|
|
/** Parse pipe-delimited region "나라|시|구" into parts. */
|
|
function parseRegion(region: string | null): { country: string; city: string; district: string } | null {
|
|
if (!region) return null;
|
|
const parts = region.split("|");
|
|
return {
|
|
country: parts[0] || "",
|
|
city: parts[1] || "",
|
|
district: parts[2] || "",
|
|
};
|
|
}
|
|
|
|
/** Build 3-level tree: country → city → district[] */
|
|
function buildRegionTree(restaurants: Restaurant[]) {
|
|
const tree = new Map<string, Map<string, Set<string>>>();
|
|
for (const r of restaurants) {
|
|
const p = parseRegion(r.region);
|
|
if (!p || !p.country) continue;
|
|
if (!tree.has(p.country)) tree.set(p.country, new Map());
|
|
const cityMap = tree.get(p.country)!;
|
|
if (p.city) {
|
|
if (!cityMap.has(p.city)) cityMap.set(p.city, new Set());
|
|
if (p.district) cityMap.get(p.city)!.add(p.district);
|
|
}
|
|
}
|
|
return tree;
|
|
}
|
|
|
|
/** Compute centroid + appropriate zoom from a set of restaurants. */
|
|
function computeFlyTo(rests: Restaurant[]): FlyTo | null {
|
|
if (rests.length === 0) return null;
|
|
const lat = rests.reduce((s, r) => s + r.latitude, 0) / rests.length;
|
|
const lng = rests.reduce((s, r) => s + r.longitude, 0) / rests.length;
|
|
// Pick zoom based on geographic spread
|
|
const latSpread = Math.max(...rests.map((r) => r.latitude)) - Math.min(...rests.map((r) => r.latitude));
|
|
const lngSpread = Math.max(...rests.map((r) => r.longitude)) - Math.min(...rests.map((r) => r.longitude));
|
|
const spread = Math.max(latSpread, lngSpread);
|
|
let zoom = 13;
|
|
if (spread > 2) zoom = 8;
|
|
else if (spread > 1) zoom = 9;
|
|
else if (spread > 0.5) zoom = 10;
|
|
else if (spread > 0.2) zoom = 11;
|
|
else if (spread > 0.1) zoom = 12;
|
|
else if (spread > 0.02) zoom = 14;
|
|
else zoom = 15;
|
|
return { lat, lng, zoom };
|
|
}
|
|
|
|
/** Find best matching country + city from user's coordinates using restaurant data. */
|
|
function findRegionFromCoords(
|
|
lat: number,
|
|
lng: number,
|
|
restaurants: Restaurant[],
|
|
): { country: string; city: string } | null {
|
|
// Group restaurants by country|city and compute centroids
|
|
const groups = new Map<string, { country: string; city: string; lats: number[]; lngs: number[] }>();
|
|
for (const r of restaurants) {
|
|
const p = parseRegion(r.region);
|
|
if (!p || !p.country || !p.city) continue;
|
|
const key = `${p.country}|${p.city}`;
|
|
if (!groups.has(key)) groups.set(key, { country: p.country, city: p.city, lats: [], lngs: [] });
|
|
const g = groups.get(key)!;
|
|
g.lats.push(r.latitude);
|
|
g.lngs.push(r.longitude);
|
|
}
|
|
let best: { country: string; city: string } | null = null;
|
|
let bestDist = Infinity;
|
|
for (const g of groups.values()) {
|
|
const cLat = g.lats.reduce((a, b) => a + b, 0) / g.lats.length;
|
|
const cLng = g.lngs.reduce((a, b) => a + b, 0) / g.lngs.length;
|
|
const dist = (cLat - lat) ** 2 + (cLng - lng) ** 2;
|
|
if (dist < bestDist) {
|
|
bestDist = dist;
|
|
best = { country: g.country, city: g.city };
|
|
}
|
|
}
|
|
return best;
|
|
}
|
|
|
|
export default function Home() {
|
|
const { user, login, logout, isLoading: authLoading } = useAuth();
|
|
const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
|
|
const [selected, setSelected] = useState<Restaurant | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showDetail, setShowDetail] = useState(false);
|
|
const [channels, setChannels] = useState<Channel[]>([]);
|
|
const [channelFilter, setChannelFilter] = useState("");
|
|
const [cuisineFilter, setCuisineFilter] = useState("");
|
|
const [priceFilter, setPriceFilter] = useState("");
|
|
const [viewMode, setViewMode] = useState<"map" | "list">("list");
|
|
const [showMobileFilters, setShowMobileFilters] = useState(false);
|
|
const [mapBounds, setMapBounds] = useState<MapBounds | null>(null);
|
|
const [boundsFilterOn, setBoundsFilterOn] = useState(false);
|
|
const [countryFilter, setCountryFilter] = useState("");
|
|
const [cityFilter, setCityFilter] = useState("");
|
|
const [districtFilter, setDistrictFilter] = useState("");
|
|
const [regionFlyTo, setRegionFlyTo] = useState<FlyTo | null>(null);
|
|
const [showFavorites, setShowFavorites] = useState(false);
|
|
const [showMyReviews, setShowMyReviews] = useState(false);
|
|
const [myReviews, setMyReviews] = useState<(Review & { restaurant_id: string; restaurant_name: string | null })[]>([]);
|
|
const [visits, setVisits] = useState<{ today: number; total: number } | null>(null);
|
|
const geoApplied = useRef(false);
|
|
|
|
const regionTree = useMemo(() => buildRegionTree(restaurants), [restaurants]);
|
|
const countries = useMemo(() => [...regionTree.keys()].sort(), [regionTree]);
|
|
const cities = useMemo(() => {
|
|
if (!countryFilter) return [];
|
|
const cityMap = regionTree.get(countryFilter);
|
|
return cityMap ? [...cityMap.keys()].sort() : [];
|
|
}, [regionTree, countryFilter]);
|
|
const districts = useMemo(() => {
|
|
if (!countryFilter || !cityFilter) return [];
|
|
const cityMap = regionTree.get(countryFilter);
|
|
if (!cityMap) return [];
|
|
const set = cityMap.get(cityFilter);
|
|
return set ? [...set].sort() : [];
|
|
}, [regionTree, countryFilter, cityFilter]);
|
|
|
|
const filteredRestaurants = useMemo(() => {
|
|
return restaurants.filter((r) => {
|
|
if (channelFilter && !(r.channels || []).includes(channelFilter)) return false;
|
|
if (cuisineFilter && !matchCuisineGroup(r.cuisine_type, cuisineFilter)) return false;
|
|
if (priceFilter && !matchPriceGroup(r.price_range, priceFilter)) return false;
|
|
if (countryFilter) {
|
|
const parsed = parseRegion(r.region);
|
|
if (!parsed || parsed.country !== countryFilter) return false;
|
|
if (cityFilter && parsed.city !== cityFilter) return false;
|
|
if (districtFilter && parsed.district !== districtFilter) return false;
|
|
}
|
|
if (boundsFilterOn && mapBounds) {
|
|
if (r.latitude < mapBounds.south || r.latitude > mapBounds.north) return false;
|
|
if (r.longitude < mapBounds.west || r.longitude > mapBounds.east) return false;
|
|
}
|
|
return true;
|
|
});
|
|
}, [restaurants, channelFilter, cuisineFilter, priceFilter, countryFilter, cityFilter, districtFilter, boundsFilterOn, mapBounds]);
|
|
|
|
// Set desktop default to map mode on mount
|
|
useEffect(() => {
|
|
if (window.innerWidth >= 768) setViewMode("map");
|
|
}, []);
|
|
|
|
// Load channels + record visit on mount
|
|
useEffect(() => {
|
|
api.getChannels().then(setChannels).catch(console.error);
|
|
api.recordVisit().then(() => api.getVisits().then(setVisits)).catch(console.error);
|
|
}, []);
|
|
|
|
// Load restaurants on mount and when channel filter changes
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
api
|
|
.getRestaurants({ limit: 500, channel: channelFilter || undefined })
|
|
.then(setRestaurants)
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false));
|
|
}, [channelFilter]);
|
|
|
|
// Auto-select region from user's geolocation (once)
|
|
useEffect(() => {
|
|
if (geoApplied.current || restaurants.length === 0) return;
|
|
if (!navigator.geolocation) return;
|
|
navigator.geolocation.getCurrentPosition(
|
|
(pos) => {
|
|
if (geoApplied.current) return;
|
|
geoApplied.current = true;
|
|
const match = findRegionFromCoords(pos.coords.latitude, pos.coords.longitude, restaurants);
|
|
if (match) {
|
|
setCountryFilter(match.country);
|
|
setCityFilter(match.city);
|
|
const matched = restaurants.filter((r) => {
|
|
const p = parseRegion(r.region);
|
|
return p && p.country === match.country && p.city === match.city;
|
|
});
|
|
setRegionFlyTo(computeFlyTo(matched));
|
|
}
|
|
},
|
|
() => { /* user denied or error — do nothing */ },
|
|
{ timeout: 5000 },
|
|
);
|
|
}, [restaurants]);
|
|
|
|
const handleSearch = useCallback(
|
|
async (query: string, mode: "keyword" | "semantic" | "hybrid") => {
|
|
setLoading(true);
|
|
try {
|
|
const results = await api.search(query, mode);
|
|
setRestaurants(results);
|
|
setSelected(null);
|
|
setShowDetail(false);
|
|
} catch (e) {
|
|
console.error("Search failed:", e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
},
|
|
[]
|
|
);
|
|
|
|
const handleSelectRestaurant = useCallback((r: Restaurant) => {
|
|
setSelected(r);
|
|
setShowDetail(true);
|
|
}, []);
|
|
|
|
const handleCloseDetail = useCallback(() => {
|
|
setShowDetail(false);
|
|
}, []);
|
|
|
|
const handleBoundsChanged = useCallback((bounds: MapBounds) => {
|
|
setMapBounds(bounds);
|
|
}, []);
|
|
|
|
const handleCountryChange = useCallback((country: string) => {
|
|
setCountryFilter(country);
|
|
setCityFilter("");
|
|
setDistrictFilter("");
|
|
if (!country) { setRegionFlyTo(null); return; }
|
|
const matched = restaurants.filter((r) => {
|
|
const p = parseRegion(r.region);
|
|
return p && p.country === country;
|
|
});
|
|
setRegionFlyTo(computeFlyTo(matched));
|
|
}, [restaurants]);
|
|
|
|
const handleCityChange = useCallback((city: string) => {
|
|
setCityFilter(city);
|
|
setDistrictFilter("");
|
|
if (!city) {
|
|
// Re-fly to country level
|
|
const matched = restaurants.filter((r) => {
|
|
const p = parseRegion(r.region);
|
|
return p && p.country === countryFilter;
|
|
});
|
|
setRegionFlyTo(computeFlyTo(matched));
|
|
return;
|
|
}
|
|
const matched = restaurants.filter((r) => {
|
|
const p = parseRegion(r.region);
|
|
return p && p.country === countryFilter && p.city === city;
|
|
});
|
|
setRegionFlyTo(computeFlyTo(matched));
|
|
}, [restaurants, countryFilter]);
|
|
|
|
const handleDistrictChange = useCallback((district: string) => {
|
|
setDistrictFilter(district);
|
|
if (!district) {
|
|
const matched = restaurants.filter((r) => {
|
|
const p = parseRegion(r.region);
|
|
return p && p.country === countryFilter && p.city === cityFilter;
|
|
});
|
|
setRegionFlyTo(computeFlyTo(matched));
|
|
return;
|
|
}
|
|
const matched = restaurants.filter((r) => {
|
|
const p = parseRegion(r.region);
|
|
return p && p.country === countryFilter && p.city === cityFilter && p.district === district;
|
|
});
|
|
setRegionFlyTo(computeFlyTo(matched));
|
|
}, [restaurants, countryFilter, cityFilter]);
|
|
|
|
const handleReset = useCallback(() => {
|
|
setLoading(true);
|
|
setChannelFilter("");
|
|
setCuisineFilter("");
|
|
setPriceFilter("");
|
|
setCountryFilter("");
|
|
setCityFilter("");
|
|
setDistrictFilter("");
|
|
setRegionFlyTo(null);
|
|
setBoundsFilterOn(false);
|
|
setShowFavorites(false);
|
|
setShowMyReviews(false);
|
|
api
|
|
.getRestaurants({ limit: 500 })
|
|
.then((data) => {
|
|
setRestaurants(data);
|
|
setSelected(null);
|
|
setShowDetail(false);
|
|
})
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const handleToggleFavorites = async () => {
|
|
if (showFavorites) {
|
|
setShowFavorites(false);
|
|
const data = await api.getRestaurants({ limit: 500, channel: channelFilter || undefined });
|
|
setRestaurants(data);
|
|
} else {
|
|
try {
|
|
const favs = await api.getMyFavorites();
|
|
setRestaurants(favs);
|
|
setShowFavorites(true);
|
|
setShowMyReviews(false);
|
|
setMyReviews([]);
|
|
setSelected(null);
|
|
setShowDetail(false);
|
|
} catch { /* ignore */ }
|
|
}
|
|
};
|
|
|
|
const handleToggleMyReviews = async () => {
|
|
if (showMyReviews) {
|
|
setShowMyReviews(false);
|
|
setMyReviews([]);
|
|
} else {
|
|
try {
|
|
const reviews = await api.getMyReviews();
|
|
setMyReviews(reviews);
|
|
setShowMyReviews(true);
|
|
setShowFavorites(false);
|
|
setSelected(null);
|
|
setShowDetail(false);
|
|
} catch { /* ignore */ }
|
|
}
|
|
};
|
|
|
|
// Desktop sidebar: shows detail inline
|
|
const sidebarContent = showMyReviews ? (
|
|
<MyReviewsList
|
|
reviews={myReviews}
|
|
onClose={() => { setShowMyReviews(false); setMyReviews([]); }}
|
|
onSelectRestaurant={async (restaurantId) => {
|
|
try {
|
|
const r = await api.getRestaurant(restaurantId);
|
|
handleSelectRestaurant(r);
|
|
setShowMyReviews(false);
|
|
setMyReviews([]);
|
|
} catch { /* ignore */ }
|
|
}}
|
|
/>
|
|
) : showDetail && selected ? (
|
|
<RestaurantDetail
|
|
restaurant={selected}
|
|
onClose={handleCloseDetail}
|
|
/>
|
|
) : (
|
|
<RestaurantList
|
|
restaurants={filteredRestaurants}
|
|
selectedId={selected?.id}
|
|
onSelect={handleSelectRestaurant}
|
|
loading={loading}
|
|
/>
|
|
);
|
|
|
|
// Mobile list: always shows list (detail goes to bottom sheet)
|
|
const mobileListContent = showMyReviews ? (
|
|
<MyReviewsList
|
|
reviews={myReviews}
|
|
onClose={() => { setShowMyReviews(false); setMyReviews([]); }}
|
|
onSelectRestaurant={async (restaurantId) => {
|
|
try {
|
|
const r = await api.getRestaurant(restaurantId);
|
|
handleSelectRestaurant(r);
|
|
setShowMyReviews(false);
|
|
setMyReviews([]);
|
|
} catch { /* ignore */ }
|
|
}}
|
|
/>
|
|
) : (
|
|
<RestaurantList
|
|
restaurants={filteredRestaurants}
|
|
selectedId={selected?.id}
|
|
onSelect={handleSelectRestaurant}
|
|
loading={loading}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div className="h-screen flex flex-col">
|
|
{/* ── Header row 1: Logo + User ── */}
|
|
<header className="bg-white border-b shrink-0">
|
|
<div className="px-4 py-2 flex items-center justify-between">
|
|
<button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
|
|
Tasteby
|
|
</button>
|
|
|
|
{/* Desktop: search + filters — two rows */}
|
|
<div className="hidden md:flex flex-col gap-1.5 mx-4">
|
|
{/* Row 1: Search + dropdown filters */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-96 shrink-0">
|
|
<SearchBar onSearch={handleSearch} isLoading={loading} />
|
|
</div>
|
|
<select
|
|
value={channelFilter}
|
|
onChange={(e) => {
|
|
setChannelFilter(e.target.value);
|
|
setSelected(null);
|
|
setShowDetail(false);
|
|
}}
|
|
className="border rounded px-2 py-1 text-sm text-gray-600"
|
|
>
|
|
<option value="">전체 채널</option>
|
|
{channels.map((ch) => (
|
|
<option key={ch.id} value={ch.channel_name}>
|
|
{ch.channel_name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={cuisineFilter}
|
|
onChange={(e) => setCuisineFilter(e.target.value)}
|
|
className="border rounded px-2 py-1 text-sm text-gray-600"
|
|
>
|
|
<option value="">전체 장르</option>
|
|
{CUISINE_GROUPS.map((g) => (
|
|
<option key={g.label} value={g.label}>{g.label}</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={priceFilter}
|
|
onChange={(e) => setPriceFilter(e.target.value)}
|
|
className="border rounded px-2 py-1 text-sm text-gray-600"
|
|
>
|
|
<option value="">전체 가격</option>
|
|
{PRICE_GROUPS.map((g) => (
|
|
<option key={g.label} value={g.label}>{g.label}</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={countryFilter}
|
|
onChange={(e) => handleCountryChange(e.target.value)}
|
|
className="border rounded px-2 py-1 text-sm text-gray-600"
|
|
>
|
|
<option value="">전체 나라</option>
|
|
{countries.map((c) => (
|
|
<option key={c} value={c}>{c}</option>
|
|
))}
|
|
</select>
|
|
{countryFilter && cities.length > 0 && (
|
|
<select
|
|
value={cityFilter}
|
|
onChange={(e) => handleCityChange(e.target.value)}
|
|
className="border rounded px-2 py-1 text-sm text-gray-600"
|
|
>
|
|
<option value="">전체 시/도</option>
|
|
{cities.map((c) => (
|
|
<option key={c} value={c}>{c}</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
{cityFilter && districts.length > 0 && (
|
|
<select
|
|
value={districtFilter}
|
|
onChange={(e) => handleDistrictChange(e.target.value)}
|
|
className="border rounded px-2 py-1 text-sm text-gray-600"
|
|
>
|
|
<option value="">전체 구/군</option>
|
|
{districts.map((d) => (
|
|
<option key={d} value={d}>{d}</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
{/* Row 2: Toggle buttons + count */}
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setBoundsFilterOn(!boundsFilterOn)}
|
|
className={`px-2.5 py-1 text-sm border rounded transition-colors ${
|
|
boundsFilterOn
|
|
? "bg-blue-50 border-blue-300 text-blue-600"
|
|
: "hover:bg-gray-100 text-gray-600"
|
|
}`}
|
|
title="지도 영역 내 식당만 표시"
|
|
>
|
|
{boundsFilterOn ? "📍 영역" : "📍"}
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
|
|
className="px-2.5 py-1 text-sm border rounded transition-colors hover:bg-gray-100 text-gray-600"
|
|
title={viewMode === "map" ? "리스트 우선" : "지도 우선"}
|
|
>
|
|
{viewMode === "map" ? "🗺" : "☰"}
|
|
</button>
|
|
{user && (
|
|
<>
|
|
<button
|
|
onClick={handleToggleFavorites}
|
|
className={`px-3 py-1 text-sm rounded-full border transition-colors ${
|
|
showFavorites
|
|
? "bg-red-50 border-red-300 text-red-600"
|
|
: "border-gray-300 text-gray-600 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
{showFavorites ? "♥ 내 찜" : "♡ 찜"}
|
|
</button>
|
|
<button
|
|
onClick={handleToggleMyReviews}
|
|
className={`px-3 py-1 text-sm rounded-full border transition-colors ${
|
|
showMyReviews
|
|
? "bg-blue-50 border-blue-300 text-blue-600"
|
|
: "border-gray-300 text-gray-600 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
{showMyReviews ? "✎ 내 리뷰" : "✎ 리뷰"}
|
|
</button>
|
|
</>
|
|
)}
|
|
<span className="text-sm text-gray-500 whitespace-nowrap">
|
|
{filteredRestaurants.length}개
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User area */}
|
|
<div className="shrink-0 flex items-center gap-3 ml-auto">
|
|
{authLoading ? null : user ? (
|
|
<div className="flex items-center gap-2">
|
|
{user.avatar_url ? (
|
|
<img
|
|
src={user.avatar_url}
|
|
alt=""
|
|
className="w-8 h-8 rounded-full border border-gray-200"
|
|
/>
|
|
) : (
|
|
<div className="w-8 h-8 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center text-sm font-semibold border border-amber-200">
|
|
{(user.nickname || user.email || "?").charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<span className="hidden sm:inline text-sm font-medium text-gray-700">
|
|
{user.nickname || user.email}
|
|
</span>
|
|
<button
|
|
onClick={logout}
|
|
className="ml-1 px-2.5 py-1 text-xs text-gray-500 border border-gray-300 rounded-full hover:bg-gray-100 hover:text-gray-700 transition-colors"
|
|
>
|
|
로그아웃
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<GoogleLogin
|
|
onSuccess={(credentialResponse) => {
|
|
if (credentialResponse.credential) {
|
|
login(credentialResponse.credential).catch(console.error);
|
|
}
|
|
}}
|
|
onError={() => console.error("Google login failed")}
|
|
size="small"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── 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">
|
|
<button
|
|
onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
|
|
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" ? "🗺 지도" : "☰ 리스트"}
|
|
</button>
|
|
<button
|
|
onClick={() => setShowMobileFilters(!showMobileFilters)}
|
|
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 && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && (
|
|
<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>
|
|
{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>
|
|
|
|
{/* Collapsible filter panel */}
|
|
{showMobileFilters && (
|
|
<div className="bg-gray-50 rounded-lg p-3 space-y-2 border">
|
|
{/* Dropdown filters */}
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
<select
|
|
value={channelFilter}
|
|
onChange={(e) => {
|
|
setChannelFilter(e.target.value);
|
|
setSelected(null);
|
|
setShowDetail(false);
|
|
}}
|
|
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
|
|
>
|
|
<option value="">전체 채널</option>
|
|
{channels.map((ch) => (
|
|
<option key={ch.id} value={ch.channel_name}>
|
|
{ch.channel_name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={cuisineFilter}
|
|
onChange={(e) => setCuisineFilter(e.target.value)}
|
|
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
|
|
>
|
|
<option value="">전체 장르</option>
|
|
{CUISINE_GROUPS.map((g) => (
|
|
<option key={g.label} value={g.label}>{g.label}</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={priceFilter}
|
|
onChange={(e) => setPriceFilter(e.target.value)}
|
|
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
|
|
>
|
|
<option value="">전체 가격</option>
|
|
{PRICE_GROUPS.map((g) => (
|
|
<option key={g.label} value={g.label}>{g.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{/* Region filters */}
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
<select
|
|
value={countryFilter}
|
|
onChange={(e) => handleCountryChange(e.target.value)}
|
|
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
|
|
>
|
|
<option value="">전체 나라</option>
|
|
{countries.map((c) => (
|
|
<option key={c} value={c}>{c}</option>
|
|
))}
|
|
</select>
|
|
{countryFilter && cities.length > 0 && (
|
|
<select
|
|
value={cityFilter}
|
|
onChange={(e) => handleCityChange(e.target.value)}
|
|
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
|
|
>
|
|
<option value="">전체 시/도</option>
|
|
{cities.map((c) => (
|
|
<option key={c} value={c}>{c}</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
{cityFilter && districts.length > 0 && (
|
|
<select
|
|
value={districtFilter}
|
|
onChange={(e) => handleDistrictChange(e.target.value)}
|
|
className="border rounded px-2 py-1 text-xs text-gray-600 bg-white"
|
|
>
|
|
<option value="">전체 구/군</option>
|
|
{districts.map((d) => (
|
|
<option key={d} value={d}>{d}</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
{/* Toggle buttons */}
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
<button
|
|
onClick={() => setBoundsFilterOn(!boundsFilterOn)}
|
|
className={`px-2 py-1 text-xs border rounded transition-colors ${
|
|
boundsFilterOn
|
|
? "bg-blue-50 border-blue-300 text-blue-600"
|
|
: "text-gray-600 bg-white"
|
|
}`}
|
|
>
|
|
{boundsFilterOn ? "📍 영역 ON" : "📍 영역"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
{/* ── Body: Desktop = side-by-side, Mobile = stacked ── */}
|
|
|
|
{/* Desktop layout */}
|
|
<div className="hidden md:flex flex-1 overflow-hidden">
|
|
{viewMode === "map" ? (
|
|
<>
|
|
<aside className="w-80 bg-white border-r overflow-y-auto shrink-0">
|
|
{sidebarContent}
|
|
</aside>
|
|
<main className="flex-1 relative">
|
|
<MapView
|
|
restaurants={filteredRestaurants}
|
|
selected={selected}
|
|
onSelectRestaurant={handleSelectRestaurant}
|
|
onBoundsChanged={handleBoundsChanged}
|
|
flyTo={regionFlyTo}
|
|
/>
|
|
{visits && (
|
|
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded">
|
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</>
|
|
) : (
|
|
<>
|
|
<aside className="flex-1 bg-white overflow-y-auto">
|
|
{sidebarContent}
|
|
</aside>
|
|
<main className="w-[40%] shrink-0 relative border-l">
|
|
<MapView
|
|
restaurants={filteredRestaurants}
|
|
selected={selected}
|
|
onSelectRestaurant={handleSelectRestaurant}
|
|
onBoundsChanged={handleBoundsChanged}
|
|
flyTo={regionFlyTo}
|
|
/>
|
|
{visits && (
|
|
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded">
|
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile layout */}
|
|
<div className="md:hidden flex-1 flex flex-col overflow-hidden">
|
|
{viewMode === "map" ? (
|
|
<>
|
|
<div className="flex-1 relative">
|
|
<MapView
|
|
restaurants={filteredRestaurants}
|
|
selected={selected}
|
|
onSelectRestaurant={handleSelectRestaurant}
|
|
onBoundsChanged={handleBoundsChanged}
|
|
flyTo={regionFlyTo}
|
|
/>
|
|
{visits && (
|
|
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10">
|
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex-1 bg-white overflow-y-auto">
|
|
{mobileListContent}
|
|
{/* Scroll-down hint to reveal map */}
|
|
<div className="flex flex-col items-center py-4 text-gray-300">
|
|
<span className="text-lg">▼</span>
|
|
<span className="text-[10px]">아래로 스크롤하면 지도</span>
|
|
</div>
|
|
</div>
|
|
<div className="h-[35vh] shrink-0 relative border-t">
|
|
<MapView
|
|
restaurants={filteredRestaurants}
|
|
selected={selected}
|
|
onSelectRestaurant={handleSelectRestaurant}
|
|
onBoundsChanged={handleBoundsChanged}
|
|
flyTo={regionFlyTo}
|
|
/>
|
|
{visits && (
|
|
<div className="absolute bottom-1 right-2 bg-black/40 text-white text-[10px] px-2 py-0.5 rounded z-10">
|
|
오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Mobile Bottom Sheet for restaurant detail */}
|
|
<BottomSheet open={showDetail && !!selected} onClose={handleCloseDetail}>
|
|
{selected && (
|
|
<RestaurantDetail restaurant={selected} onClose={handleCloseDetail} />
|
|
)}
|
|
</BottomSheet>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="shrink-0 border-t bg-gray-50 py-2 text-center text-[11px] text-gray-400">
|
|
SDJ Labs Co., Ltd.
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|