Feat/#75 동반가능시설 API 연동

src/app/place/page.jsx

@@ -32,8 +32,22 @@ const PlacePage = () => {
   }
 
   const handleImageClick = () => {
-    router.push(`/place/placesearch`);
-  }
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          router.push(`/place/placesearch?lat=${latitude}&lng=${longitude}`); 
+        },
+        () => {
+          alert("현재 위치를 가져올 수 없습니다.");
+          router.push(`/place/placesearch`); 
+        }
+      );
+    } else {
+      alert("Geolocation을 지원하지 않는 브라우저입니다.");
+      router.push(`/place/placesearch`);
+    }
+  };
 
   const handleImageClick2 = () => {
     router.push(`/recommend`);

src/app/place/placedetail/page.jsx

@@ -25,7 +25,7 @@ const PlaceDetailPage = () => {
 
 const ActualPlaceDetailPage = () => {
   const searchParams = useSearchParams();
-  const id = parseInt(searchParams.get("id"), 10);
+  const placeId = parseInt(searchParams.get("placeId"), 10);
   const router = useRouter();
   const [isClient, setIsClient] = useState(false);
   const [isMapBottomSheetOpen, setIsMapBottomSheetOpen] = useState(false);
@@ -36,7 +36,8 @@ const ActualPlaceDetailPage = () => {
   const [isUploadAction, setIsUploadAction] = useState(false);
   const fileInputRef = useRef(null);
   const { setPlaceName, setVisitDate, setCategory } = useReviewStore();
-  const selectedCard = cards.find((card) => card.id === id);
+  const [selectedCard, setSelectedCard] = useState(null); 
+  const [isLoading, setIsLoading] = useState(true); 
 
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
@@ -54,21 +55,37 @@ const ActualPlaceDetailPage = () => {
       if (data.status === "OK" && data.results.length > 0) {
         const { lat, lng } = data.results[0].geometry.location;
         setCenter({ lat, lng });
-      } else {
-        alert("주소에 대한 좌표를 가져올 수 없습니다.");
       }
     } catch (error) {
       console.error("Error fetching coordinates:", error);
     }
   };
 
+  useEffect(() => {
+    if (placeId) {
+      fetchPlaceDetails(placeId); 
+    }
+  }, [placeId]);
+  const fetchPlaceDetails = async (placeId) => {
+    try {
+      const response = await axios.get(`https://api.daengplace.com/places/${placeId}`);
+      console.log(response.data);
+      setSelectedCard(response.data.data); 
+    } catch (error) {
+      console.error("Error fetching place details:", error);
+      setSelectedCard(null); 
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   useEffect(() => {
     if (selectedCard) {
-      setPlaceName(selectedCard.title);
+      setPlaceName(selectedCard.name);
       setCategory(selectedCard.category);
       setIsClient(true);
-      setAddress(selectedCard.address);
-      fetchCoordinates(selectedCard.address);
+      setAddress(selectedCard.location);
+      fetchCoordinates(selectedCard.location);
     }
   }, [selectedCard]);
 
@@ -168,12 +185,18 @@ const ActualPlaceDetailPage = () => {
           <PlaceInfo
             isLiked={isLiked}
             toggleLike={toggleLike}
-            address={selectedCard.address}
+            address={selectedCard.location}
             handleAddressClick={handleAddressClick}
             category={selectedCard.category}
-            placeName={selectedCard.title}
-            openingHours={selectedCard.hours}
-            features={selectedCard.features}
+            placeName={selectedCard.name}
+            openhours={selectedCard.operationHour}
+            features={{
+              inside: selectedCard.inside,
+              outside: selectedCard.outside,
+              isParking: selectedCard.is_parking,
+              petFee: selectedCard.pet_fee,
+              weightLimit: selectedCard.weight_limit,
+            }}
           />
           <ReviewSection />
           <WriteReviewButton onClick={handleWriteReviewButtonClick} />