From 3a8a10e5b03f3dc69deadcc0172b46e944b82d50 Mon Sep 17 00:00:00 2001
From: d0dam <smallkdb@gmail.com>
Date: Sat, 29 Jul 2023 22:34:46 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Map=EC=97=90=20data=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80=20(#199)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/@common/Map/Map.tsx | 8 ++++----
 frontend/src/pages/MainPage.tsx             | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/@common/Map/Map.tsx b/frontend/src/components/@common/Map/Map.tsx
index 048c7899b..474af74a3 100644
--- a/frontend/src/components/@common/Map/Map.tsx
+++ b/frontend/src/components/@common/Map/Map.tsx
@@ -19,6 +19,7 @@ interface MapProps {
   data: RestaurantData[];
   setBoundary: React.Dispatch<React.SetStateAction<CoordinateBoundary>>;
   toggleMapExpand: () => void;
+  loadingData: boolean;
 }
 
 const render = (status: Status) => {
@@ -27,7 +28,7 @@ const render = (status: Status) => {
   return <LoadingDots />;
 };
 
-function Map({ data, setBoundary, toggleMapExpand }: MapProps) {
+function Map({ data, setBoundary, toggleMapExpand, loadingData }: MapProps) {
   const [center, setCenter] = useState<Coordinate>({ lat: 37.5057482, lng: 127.050727 });
   const [clicks, setClicks] = useState<google.maps.LatLng[]>([]);
   const [zoom, setZoom] = useState(16);
@@ -93,7 +94,7 @@ function Map({ data, setBoundary, toggleMapExpand }: MapProps) {
           );
         })}
         {myPosition && <OverlayMyLocation position={myPosition} />}
-        {loading && (
+        {(loadingData || loading) && (
           <LoadingUI>
             <LoadingDots />
           </LoadingUI>
@@ -127,8 +128,7 @@ const LoadingUI = styled.div`
   right: calc(50% - 41px);
 
   width: 82px;
-
-  padding: 1.6rem 2.4rem;
+  height: 40px;
 `;
 
 const StyledMyPositionButtonUI = styled.button`
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index d41dd62e6..c55dba921 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -71,7 +71,7 @@ function MainPage() {
           <RestaurantCardList restaurantDataList={data} loading={loading} />
         </StyledLeftSide>
         <StyledRightSide>
-          <Map setBoundary={setBoundary} data={data?.content} toggleMapExpand={toggleMapExpand} />
+          <Map setBoundary={setBoundary} data={data?.content} toggleMapExpand={toggleMapExpand} loadingData={loading} />
         </StyledRightSide>
       </StyledLayout>
       <Footer />