fix: 메인페이지 카테고리 지도 레이아웃 수정

src/components/common/store/StoreList.jsx

@@ -142,7 +142,12 @@ const StoreList = () => {
         setOrderByRating(null);
     };
 
-    if (isLoading) return <Loading />;
+    if (isLoading)
+        return (
+            <LoadingContainer>
+                <Loading />
+            </LoadingContainer>
+        );
     return (
         <StoreListLayout>
             <FilteringContentsContainer>
@@ -295,3 +300,9 @@ const Alert = styled.h3`
     font-size: 15px;
     color: ${Orange};
 `;
+
+const LoadingContainer = styled.div`
+    @media screen and (max-width: 450px) {
+        margin-right: 90px;
+    }
+`;

src/components/main/CategoryContainer.jsx → src/components/main/CategoryAndMap.jsx

@@ -1,27 +1,30 @@
 import styled from 'styled-components';
-import { Category } from '../common';
+import { Category, MyMap } from '../common';
 import { Grey } from '../../color';
 import { ReactComponent as CategoryIcon } from '../../assets/Icon/main/CategoryIcon.svg';
 
-const CategoryContainer = () => {
+const CategoryAndMap = () => {
     return (
-        <CategoryLayout>
+        <CategoryAndMapLayout>
             <label>
                 <CategoryIcon />
                 <h3>카테고리로 검색하기</h3>
             </label>
-            <CategoryBox>
+            <CategoryAndMapBox>
                 <div>
                     <Category />
                 </div>
-            </CategoryBox>
-        </CategoryLayout>
+                <div>
+                    <MyMap />
+                </div>
+            </CategoryAndMapBox>
+        </CategoryAndMapLayout>
     );
 };
 
-export default CategoryContainer;
+export default CategoryAndMap;
 
-const CategoryLayout = styled.div`
+const CategoryAndMapLayout = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -41,11 +44,11 @@ const CategoryLayout = styled.div`
     }
 `;
 
-const CategoryBox = styled.div`
+const CategoryAndMapBox = styled.div`
     display: flex;
     justify-content: center;
     flex-direction: row;
-    gap: 10px;
+    gap: 50px;
 
     & > div {
         width: 50%;

src/components/main/index.js

@@ -1,5 +1,6 @@
 import TopRecommendations from './TopRecommendations';
-import CategoryContainer from './CategoryContainer';
+import CategoryContainer from './CategoryAndMap';
 import SearchKeyword from './SearchKeyword';
-import MapContainer from './MapContainer';
-export { TopRecommendations, CategoryContainer, SearchKeyword, MapContainer };
+import CategoryAndMap from './CategoryAndMap';
+
+export { TopRecommendations, CategoryContainer, SearchKeyword, CategoryAndMap };

src/pages/MainPage.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as Banner } from '../assets/Icon/banner/Banner.svg';
 import { useIsFetch, useSaveBookmarkId } from '../store';
-import { CategoryContainer, SearchKeyword, TopRecommendations, MapContainer } from '../components/main';
+import { CategoryAndMap, SearchKeyword, TopRecommendations } from '../components/main';
 import { SearchBar, Button, Footer } from '../components/common';
 import { getBookmarksStores } from '../apis/api/bookmarks';
 
@@ -95,8 +95,7 @@ const MainPage = () => {
                 <SearchKeyword />
                 <Button color="green" text="식당 찾아 보기" visible="true" onClickHandler={buttonClickHandler} />
                 <TopRecommendations />
-                <CategoryContainer />
-                <MapContainer />
+                <CategoryAndMap />
             </MainPageLayout>
             <Footer />
         </>
@@ -125,4 +124,8 @@ const SearchBarContainer = styled.div`
     @media screen and (max-width: 1024px) {
         width: 80%;
     }
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;

src/pages/index.js

@@ -4,5 +4,4 @@ import StoreDetailPage from './StoreDetailPage';
 import SignUpPage from './SignUpPage';
 import LoginPage from './LoginPage';
 import NotFoundPage from './NotFoundPage';
-import MapContainer from '../components/main/MapContainer';
-export { MainPage, WebMap, SignUpPage, LoginPage, StoreDetailPage, NotFoundPage, MapContainer };
+export { MainPage, WebMap, SignUpPage, LoginPage, StoreDetailPage, NotFoundPage };