refactor: 의도치 않은 레이아웃 변경 방지

delicious-algorithme · Dec 11, 2024 · d6ebcd2 · d6ebcd2
1 parent 01c60cc
commit d6ebcd2
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git a/src/components/main/cateogryAndMap/CategoryAndMap.jsx b/src/components/main/cateogryAndMap/CategoryAndMap.jsx
@@ -28,6 +28,7 @@ export default CategoryAndMap;
 const CategoryAndMapLayout = styled.div`
     width: 80%;
     max-width: 1120px;
+    min-height: 1140px;
     display: flex;
     flex-direction: column;
     justify-content: center;

diff --git a/src/components/main/contents/TopRecommendations.jsx b/src/components/main/contents/TopRecommendations.jsx
@@ -4,10 +4,8 @@ import MainContentsWrap from '../slider/MainContentsWrap';
 
 const TopRecommendations = () => {
     const [topStores, setTopStores] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
 
     const fetchTopStores = async () => {
-        setIsLoading(true);
         try {
             const response = await getTopStores();
             if (response.status === 200) {
@@ -16,8 +14,6 @@ const TopRecommendations = () => {
             }
         } catch (error) {
             console.log(error);
-        } finally {
-            setIsLoading(false);
         }
     };
 
@@ -26,14 +22,14 @@ const TopRecommendations = () => {
     }, []);
 
     return (
-        !isLoading && (
+        <div style={{ minHeight: '500px' }}>
             <MainContentsWrap
                 ranking={true}
                 title="맛 알고리즘이 엄선한 TOP 10"
                 description="맛알고리즘에서 긍정키워드로 분석한 맛집 컬렉션 10"
                 stores={topStores}
             />
-        )
+        </div>
     );
 };
 

diff --git a/src/components/main/slider/MainContentsWrap.jsx b/src/components/main/slider/MainContentsWrap.jsx
@@ -29,6 +29,7 @@ export default MainContentsWrap;
 
 const MainContentsWrapLayout = styled.div`
     width: 100%;
+    height: 500px;
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -98,8 +99,7 @@ const SlideContainer = styled.div`
 
     @media screen and (max-width: 768px) {
         width: 100%;
-        gap: 20px;
-
+        gap: 5px;
         .slick-dots li button::before {
             display: none;
         }

diff --git a/src/components/storeCard/StoreCard.jsx b/src/components/storeCard/StoreCard.jsx
@@ -56,8 +56,8 @@ const StoreCardContainer = styled.div`
     @media screen and (max-width: 500px) {
         width: fit-content;
         max-width: 280px;
+        margin: 5px;
         height: 350px;
-        margin: 0;
     }
 `;