refactor: Map에 data 로딩 상태 추가 (#199)

woowacourse-teams · Jul 29, 2023 · 3a8a10e · 3a8a10e
1 parent 389520b
commit 3a8a10e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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 />