feat: 리스트와 지도 바운더리 내의 레스토랑 연동 기능 구현 (#176)

* feat: LoadingDots 추가 (#171)

* refactor: 일부 네이밍 변경 (#171)

* chore: 지도에 사용할 svg 추가 (#171)

* feat: 기본적인 map ui 구성 (#171)

* feat: 리스트와 지도 바운더리 내의 레스토랑 연동 기능 구현 (#169)

* feat: fetch함수 추상화 및 적용 (#169)

* refactor: onIdle 함수 리팩터링 (#169)

* fix: 맵 모달에 이미지 import오류 해결 (#169)

---------

Co-authored-by: d0dam <[email protected]>

frontend/src/components/@common/Map/Map.tsx

@@ -11,10 +11,13 @@ import { mapUIBase } from '~/styles/common';
 import MyLocation from '~/assets/icons/my-location.svg';
 import Minus from '~/assets/icons/minus.svg';
 import Plus from '~/assets/icons/plus.svg';
+import { RestaurantData } from '~/@types/api.types';
+import useFetch from '~/hooks/useFetch';
 
 interface MapProps {
   clickMarker: ({ lat, lng }: Coordinate) => void;
   markers: { position: Coordinate; celebs: Celebs }[];
+  setData: React.Dispatch<React.SetStateAction<RestaurantData[]>>;
 }
 
 const render = (status: Status) => {
@@ -23,19 +26,35 @@ const render = (status: Status) => {
   return <LoadingDots />;
 };
 
-function Map({ clickMarker, markers }: MapProps) {
+function Map({ clickMarker, markers, setData }: MapProps) {
   const [center, setCenter] = useState<Coordinate>({ lat: 37.5057482, lng: 127.050727 });
   const [clicks, setClicks] = useState<google.maps.LatLng[]>([]);
   const [zoom, setZoom] = useState(16);
   const [myPosition, setMyPosition] = useState<Coordinate | null>(null);
   const [loading, setLoading] = useState(false);
+  const { handleFetch } = useFetch('restaurants');
 
   const onClick = (e: google.maps.MapMouseEvent) => {
     setClicks([...clicks, e.latLng!]);
   };
 
   const onIdle = (m: google.maps.Map) => {
     setZoom(m.getZoom()!);
+
+    const lowLatitude = String(m.getBounds().getSouthWest().lat());
+    const highLatitude = String(m.getBounds().getNorthEast().lat());
+    const lowLongitude = String(m.getBounds().getSouthWest().lng());
+    const highLongitude = String(m.getBounds().getNorthEast().lng());
+
+    const queryString = new URLSearchParams({ lowLatitude, highLatitude, lowLongitude, highLongitude }).toString();
+
+    const fetchRestaurants = async () => {
+      const response = await handleFetch({ queryString });
+
+      setData(response);
+    };
+
+    fetchRestaurants();
   };
 
   const clickMyLocationButton = () => {

frontend/src/components/MapModalContent/MapModalContent.tsx

@@ -17,7 +17,10 @@ function MapModalContent({ content }: MapModalContentProps) {
           <div>{roadAddress}</div>
           <div>{phoneNumber}</div>
         </div>
-        <StyledRestaurantImage src={`images/${images[0].name}`} alt={`${name} 식당 이미지`} />
+        <StyledRestaurantImage
+          src={`http://3.35.157.27:3000/images-data/${images[0].name}`}
+          alt={`${name} 식당 이미지`}
+        />
       </StyledRestaurantInfo>
       <TextButton
         type="button"

frontend/src/components/RestaurantCard/RestaurantCard.tsx

@@ -16,7 +16,7 @@ function RestaurantCard({ restaurant, celebs, size, onClick }: RestaurantCardPro
 
   return (
     <StyledContainer onClick={onClick}>
-      <StyledImage alt={`${name} 대표 이미지`} src={`images-data/${images[0].name}`} />
+      <StyledImage alt={`${name} 대표 이미지`} src={`http://3.35.157.27:3000/images-data/${images[0].name}`} />
       <section>
         <StyledInfo>
           <StyledCategory>{category}</StyledCategory>

frontend/src/hooks/useFetch.ts

@@ -0,0 +1,24 @@
+type FetchMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+const useFetch = (endPoint: string) => {
+  const baseUrl = 'http://3.35.157.27:8080/api/';
+
+  const handleFetch = async ({
+    method = 'GET',
+    body = {},
+    queryString = '',
+  }: {
+    method?: FetchMethod;
+    body?: object;
+    queryString?: string;
+  }) => {
+    const url = `${baseUrl}${endPoint}${queryString && `?${queryString}`}`;
+    const response = method === 'GET' ? await fetch(url) : await fetch(url, { method, body: JSON.stringify(body) });
+
+    return response.json();
+  };
+
+  return { handleFetch };
+};
+
+export default useFetch;

frontend/src/pages/MainPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { styled } from 'styled-components';
 import { RestaurantData } from '~/@types/api.types';
 import { Coordinate } from '~/@types/map.types';
@@ -16,16 +16,6 @@ function MainPage() {
   const { modalOpen, isVisible, closeModal, openModal } = useMapModal(true);
   const [data, setData] = useState<RestaurantData[]>([]);
 
-  useEffect(() => {
-    const fetchRestaurant = async () => {
-      const response = await fetch('http://3.35.157.27:8080/api/restaurants');
-      const newData = await response.json();
-
-      setData(newData);
-    };
-    fetchRestaurant();
-  }, []);
-
   const clickCard = (restaurant: Restaurant) => {
     const { lat, lng, ...restaurantModalInfo } = restaurant;
 
@@ -57,6 +47,7 @@ function MainPage() {
         <StyledRightSide>
           <Map
             clickMarker={clickMarker}
+            setData={setData}
             markers={data.map(({ lat, lng, celebs }) => ({ position: { lat, lng }, celebs }))}
           />
           {currentRestaurant && (