Merge pull request #58 from delicious-algorithme/dev

fix: 메인페이지 반응형 수정
delicious-algorithme · Oct 29, 2024 · 1d54db5 · 1d54db5
2 parents 0bbe8b1 + 2562639
commit 1d54db5
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 10 deletions.
diff --git a/src/components/main/CategoryAndMap.jsx b/src/components/main/CategoryAndMap.jsx
@@ -37,6 +37,7 @@ const CategoryAndMapLayout = styled.div`
         gap: 20px;
     }
     @media screen and (max-width: 1024px) {
+        width: 100%;
         align-items: center;
     }
 `;
@@ -57,13 +58,13 @@ const CategoryAndMapBox = styled.div`
     :first-child {
         padding: 20px;
     }
+
     @media screen and (max-width: 1024px) {
         display: flex;
         flex-direction: column;
         align-items: center;
-
         & > div {
-            width: 80%;
+            width: 95%;
         }
     }
 `;
diff --git a/src/components/main/TopRecommendations.jsx b/src/components/main/TopRecommendations.jsx
@@ -130,12 +130,14 @@ const AnimatedContainer = styled.div`
         css`
             animation: ${animationDirection === 'in' ? moveIn : moveOut} 1s forwards;
         `}
+
     @media screen and (max-width: 768px) {
-        width: 60%;
-        flex-direction: column;
+        width: 100%;
+        flex-direction: row;
     }
+
     @media screen and (max-width: 576px) {
-        width: 80%;
+        width: 100%;
         flex-direction: column;
     }
 `;
@@ -152,7 +154,9 @@ const TopRecommendationsLayout = styled.div`
         flex-direction: row;
         gap: 10px;
     }
+
     @media screen and (max-width: 780px) {
+        width: 100%;
         align-items: center;
     }
 `;

diff --git a/src/components/storeCard/TopStoreCard.jsx b/src/components/storeCard/TopStoreCard.jsx
@@ -12,7 +12,9 @@ const TopStoreCard = ({ image, alt, id, name, positiveRatio, keyword }) => {
 
     return (
         <StoreCardContainer onClick={() => cardClickHandler(id)}>
-            <img src={image} width="100%" height="auto" alt={alt} />
+            <ImageContainer>
+                <img src={image} width="100%" height="auto" alt={alt} />
+            </ImageContainer>
             <NameAndCategoryContainer>
                 <p>{name}</p>
                 <span>{positiveRatio}</span>
@@ -41,16 +43,42 @@ const StoreCardContainer = styled.div`
         }
     }
 
-    & > img {
-        max-width: 100%;
-        height: 200px;
+    & > div > img {
+        width: 100%;
+        height: 100%;
         border-radius: 10px 10px 0px 0;
     }
+
     box-shadow: 2px 2px 2px ${Grey};
+
     @media screen and (max-width: 1024px) {
         max-width: 100%;
         margin: 0 auto;
     }
+
+    @media screen and (max-width: 768px) {
+        & > img {
+            //   height: 400px;
+        }
+    }
+`;
+
+const ImageContainer = styled.div`
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+
+    & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 10px 10px 0 0;
+    }
+
+    @media screen and (max-width: 500px) {
+        max-width: 100%;
+        margin: 0 auto;
+    }
 `;
 
 const NameAndCategoryContainer = styled.div`
@@ -81,6 +109,14 @@ const NameAndCategoryContainer = styled.div`
             border-radius: 10px;
         }
     }
+
+    @media screen and (max-width: 1024px) {
+        & > img {
+            max-width: 100%;
+            height: 400px;
+            border-radius: 10px;
+        }
+    }
 `;
 
 const Review = styled.div`

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -60,7 +60,10 @@ const MainPageLayout = styled.div`
     flex-direction: column;
     align-items: center;
     gap: 30px;
-    @media screen and (max-width: 1024px) {
+    @media screen and (max-width: 500px) {
         gap: 10px;
+        & > svg {
+            display: none;
+        }
     }
 `;