From 61d59f51ebb1f435daf369fa0752d547a089ac4b Mon Sep 17 00:00:00 2001 From: KangBoSeok Date: Wed, 11 Dec 2024 19:36:57 +0900 Subject: [PATCH] =?UTF-8?q?refactor(#75)=20:=20=EA=B0=99=EC=9D=80=20?= =?UTF-8?q?=EC=83=81=ED=98=B8=EB=AA=85=20=EB=B0=94=ED=85=80=EC=8B=9C?= =?UTF-8?q?=ED=8A=B8=20=EB=8B=AB=EA=B8=B0,=20=EA=B2=80=EC=83=89=EC=B9=B8?= =?UTF-8?q?=20=EA=B2=80=EC=83=89=EC=96=B4=20=EC=B6=9C=EB=A0=A5,=20?= =?UTF-8?q?=EC=B2=AB=20=EA=B2=80=EC=83=89=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/place/placemap/page.jsx | 89 ++++++++++--------- src/app/place/placesearch/page.jsx | 14 --- .../placemap/BottomSheet/BottomSheet.jsx | 7 +- src/components/place/placemap/Map/Map.jsx | 26 +++--- .../place/placemap/SearchBar/SearchBar.jsx | 8 +- 5 files changed, 75 insertions(+), 69 deletions(-) diff --git a/src/app/place/placemap/page.jsx b/src/app/place/placemap/page.jsx index 372c013..87d430a 100644 --- a/src/app/place/placemap/page.jsx +++ b/src/app/place/placemap/page.jsx @@ -29,9 +29,10 @@ const ActualPlaceMap = () => { const lat = parseFloat(searchParams.get("lat")); const lng = parseFloat(searchParams.get("lng")); + const searchname = searchParams.get("name"); const [center, setCenter] = useState({lat: 37.5665, lng: 126.9780}); - const [zoom, setZoom] = useState(20); + const [zoom, setZoom] = useState(14); const [userLocation, setUserLocation] = useState(null); const [selectedCategory, setSelectedCategory] = useState("전체"); const [hoveredCategory, setHoveredCategory] = useState(null); @@ -43,23 +44,37 @@ const ActualPlaceMap = () => { const [showGunguDropdown, setShowGunguDropdown] = useState(false); const [allMarkers, setAllMarkers] = useState([]); const [markers, setMarkers] = useState([]); + const [searchTerm, setSearchTerm] = useState(""); const { isLoaded } = useJsApiLoader({ googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY, }); - + useEffect(() => { - const searchname = searchParams.get("name"); - - if (searchname) { - fetchPlaces(null, null, searchname); - } else if (!isNaN(lat) && !isNaN(lng)) { - setCenter({ lat, lng }); - setUserLocation({ lat, lng }); - setZoom(14); - fetchPlaces(lat, lng); + if (!userLocation && navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const { latitude, longitude } = position.coords; + setUserLocation({ lat: latitude, lng: longitude }); + }, + () => { + alert("현재 위치를 가져올 수 없습니다."); + } + ); } - }, [lat, lng, searchParams]); + }, [userLocation]); + + useEffect(() => { + if (searchname) { + fetchPlaces(null, null, searchname); + } else if (!isNaN(lat) && !isNaN(lng)) { + setCenter({ lat, lng }); + fetchPlaces(lat, lng); + } else if (userLocation) { + setSelectedCategory("전체"); + fetchPlaces(userLocation.lat, userLocation.lng); + } + }, [lat, lng, searchname, userLocation]); useEffect(() => { if (!userLocation) { @@ -76,15 +91,12 @@ const ActualPlaceMap = () => { } } }, []); - - useEffect(() => { - if (userLocation) { - setSelectedCategory("전체"); - fetchPlaces(userLocation.lat, userLocation.lng); + if (searchname) { + setSearchTerm(searchname); // 검색어를 상태로 저장 } - }, [userLocation]); - + } +) const fetchPlaces = async (latitude, longitude, searchname = null) => { try { const params = { @@ -115,29 +127,23 @@ const ActualPlaceMap = () => { operationHour: place.operationHour, })); console.log("Fetched Markers:", fetchedMarkers); - setAllMarkers(fetchedMarkers); - setMarkers(fetchedMarkers); if (searchname) { const filteredMarkers = fetchedMarkers.filter((marker) => - marker.name.includes(searchname) + marker.name.includes(searchname) ); - console.log("Filtered Markers:", filteredMarkers); - setMarkers(filteredMarkers); + if (filteredMarkers.length > 0) { + setMarkers(filteredMarkers); const { lat, lng } = filteredMarkers[0].position; - if (!isNaN(lat) && !isNaN(lng)) { - setCenter({ lat, lng }); - setZoom(16); - } else { - console.error("Invalid marker coordinates:", { lat, lng }); - } - } else { + setCenter({ lat, lng }); + setZoom(16); + } else { alert(`${searchname}에 대한 결과를 찾을 수 없습니다.`); - if (userLocation) { - setCenter(userLocation); - setZoom(14); - } + setMarkers(allMarkers); } + } else { + setAllMarkers(fetchedMarkers); + setMarkers(fetchedMarkers); } } catch (error) { console.error("Error fetching places:", error); @@ -251,10 +257,6 @@ const ActualPlaceMap = () => { } setMarkers(filteredMarkers); - console.log("Filtered Markers:", filteredMarkers); - console.log("All Markers:", allMarkers); -console.log("Selected Filters:", filters); -console.log("All Markers with Parking Info:", allMarkers.map((marker) => marker.pet_fee)); }; @@ -267,6 +269,10 @@ console.log("All Markers with Parking Info:", allMarkers.map((marker) => marker. ); } + const handleSearchTermUpdate = (term) => { + setSearchTerm(term || "내 위치 주변"); + }; + return ( <>
marker. showHomeIcon={WithMapIcon.args.showHomeIcon} /> - setIsBottomSheetOpen(true)} /> + setIsBottomSheetOpen(true)} /> marker. showGunguDropdown={showGunguDropdown} onSidoChange={handleSidoChange} onGunguChange={handleGunguChange} + setSearchTerm={handleSearchTermUpdate} /> diff --git a/src/app/place/placesearch/page.jsx b/src/app/place/placesearch/page.jsx index dfec677..64c45f8 100644 --- a/src/app/place/placesearch/page.jsx +++ b/src/app/place/placesearch/page.jsx @@ -131,20 +131,6 @@ const ActualPlaceSearchPage = () => { ); }; - useEffect(() => { - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition( - (position) => { - const { latitude, longitude } = position.coords; - setUserLocation({ lat: latitude, lng: longitude }); - }, - () => { - alert("현재 위치를 가져올 수 없습니다."); - } - ); - } - }, []); - useEffect(() => { const lat = parseFloat(searchParams.get("lat")); const lng = parseFloat(searchParams.get("lng")); diff --git a/src/components/place/placemap/BottomSheet/BottomSheet.jsx b/src/components/place/placemap/BottomSheet/BottomSheet.jsx index c1ab882..1ed9241 100644 --- a/src/components/place/placemap/BottomSheet/BottomSheet.jsx +++ b/src/components/place/placemap/BottomSheet/BottomSheet.jsx @@ -18,6 +18,7 @@ const BottomSheet = ({ showGunguDropdown, sidoOptions, gunguOptions, + setSearchTerm, }) => { const router = useRouter(); const searchParams = useSearchParams(); @@ -57,6 +58,7 @@ const BottomSheet = ({ }; const handleSearch = async () => { + onClose(); if (useCurrentLocation) { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( @@ -71,6 +73,7 @@ const BottomSheet = ({ } } else if (inputValue) { console.log("Search Term:", inputValue); + setSearchTerm(inputValue); router.push(`/place/placemap?name=${encodeURIComponent(inputValue)}`); } else if (selectedSido || selectedGungu) { const location = `${selectedSido} ${selectedGungu || ""}`.trim(); @@ -412,8 +415,8 @@ const ImageWrapper = styled.div` const SelectBoxWrapper = styled.div` flex: 1; max-width: 210px; - min-width: 210px; /* 최소 너비 */ - min-height: 64px; /* 최소 높이 */ + min-width: 210px; + min-height: 64px; `; diff --git a/src/components/place/placemap/Map/Map.jsx b/src/components/place/placemap/Map/Map.jsx index 2088065..7b5e96b 100644 --- a/src/components/place/placemap/Map/Map.jsx +++ b/src/components/place/placemap/Map/Map.jsx @@ -54,17 +54,21 @@ const Map = ({ center, zoom, userLocation, markers }) => { }} /> )} - {markers && - markers.map((marker) => ( - handleMarkerClick(marker.id)} - /> - ))} + {markers && markers.length > 0 && + markers.map((marker, index) => { + console.log(`Rendering marker #${index}:`, marker); + return ( + handleMarkerClick(marker.id)} + /> + ); + })} + ); diff --git a/src/components/place/placemap/SearchBar/SearchBar.jsx b/src/components/place/placemap/SearchBar/SearchBar.jsx index 548d9aa..46ed166 100644 --- a/src/components/place/placemap/SearchBar/SearchBar.jsx +++ b/src/components/place/placemap/SearchBar/SearchBar.jsx @@ -3,7 +3,7 @@ import React from "react"; import styled from "styled-components"; import Image from "next/image"; -const SearchBar = ({ onClick }) => ( +const SearchBar = ({ value, onClick }) => ( ( height={30} style={{ marginRight: "10px" }} /> - + );