refactor(#75) : 같은 상호명 바텀시트 닫기, 검색칸 검색어 출력, 첫 검색 수정

DaengPlace · Dec 11, 2024 · 61d59f5 · 61d59f5
1 parent f137587
commit 61d59f5
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 69 deletions.
diff --git 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 (
     <>
     <Header
@@ -276,7 +282,9 @@ console.log("All Markers with Parking Info:", allMarkers.map((marker) => marker.
         showHomeIcon={WithMapIcon.args.showHomeIcon}
       />
     <MapContainerWrapper>
-      <SearchBar onClick={() => setIsBottomSheetOpen(true)} />
+      <SearchBar
+      value={searchTerm}
+      onClick={() => setIsBottomSheetOpen(true)} />
       <Tabs
         selectedCategory={selectedCategory}
         onCategoryClick={handleCategoryClick}
@@ -305,6 +313,7 @@ console.log("All Markers with Parking Info:", allMarkers.map((marker) => marker.
         showGunguDropdown={showGunguDropdown}
         onSidoChange={handleSidoChange}
         onGunguChange={handleGunguChange}
+        setSearchTerm={handleSearchTermUpdate}
       />
     </MapContainerWrapper>
     </>

diff --git 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
@@ -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
@@ -54,17 +54,21 @@ const Map = ({ center, zoom, userLocation, markers }) => {
             }}
           />
         )}
-        {markers &&
-          markers.map((marker) => (
-            <Marker
-              key={marker.id}
-              position={marker.position}
-              zIndex={google.maps.Marker.MAX_ZINDEX + 1}
-              title={marker.name}
-              icon={getMarkerIcon(marker.category)}
-              onClick={() => handleMarkerClick(marker.id)} 
-            />
-          ))}
+        {markers && markers.length > 0 && 
+          markers.map((marker, index) => {
+            console.log(`Rendering marker #${index}:`, marker);
+            return (
+              <Marker
+                key={marker.id}
+                position={marker.position}
+                zIndex={google.maps.Marker.MAX_ZINDEX + 1}
+                title={marker.name}
+                icon={getMarkerIcon(marker.category)}
+                onClick={() => handleMarkerClick(marker.id)}
+              />
+            );
+          })}
+
       </GoogleMap>
     </MapContainer>
   );

diff --git 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 }) => (
   <SearchBarWrapper onClick={onClick}>
     <SearchWrapper>
       <Image
@@ -13,7 +13,11 @@ const SearchBar = ({ onClick }) => (
         height={30}
         style={{ marginRight: "10px" }}
       />
-      <SearchInput placeholder="내 위치 주변" />
+      <SearchInput
+        placeholder="내 위치 주변"
+        value={value || ""}
+        readOnly
+      />
     </SearchWrapper>
   </SearchBarWrapper>
 );