Merge pull request #130 from delicious-algorithme/main

Main
delicious-algorithme · Dec 12, 2024 · f8ec49a · f8ec49a
2 parents a24ccd8 + a5ae448
commit f8ec49a
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 25 deletions.
diff --git a/src/components/common/slider/CustomArrow.jsx b/src/components/common/slider/CustomArrow.jsx
@@ -33,6 +33,10 @@ const StyledNextArrowButton = styled.div`
     background-color: ${White};
     border-radius: 50%;
     cursor: pointer;
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;
 
 const StyledPrevArrowButton = styled.div`
@@ -50,4 +54,8 @@ const StyledPrevArrowButton = styled.div`
     background-color: ${White};
     border-radius: 50%;
     cursor: pointer;
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;
diff --git a/src/components/common/slider/sliderSetting.js b/src/components/common/slider/sliderSetting.js
@@ -10,7 +10,7 @@ const sliderSettings = {
     arrow: false,
     nextArrow: <CustomNextArrow />,
     prevArrow: <CustomPrevArrow />,
-    initialSlide: 1,
+    initialSlide: 0,
     responsive: [
         {
             breakpoint: 1500,
@@ -25,7 +25,7 @@ const sliderSettings = {
             breakpoint: 768,
             settings: {
                 slidesToShow: 1,
-                slidesToScroll: 1,
+                dots: true,
             },
         },
     ],

diff --git a/src/components/main/cateogryAndMap/CategoryAndMap.jsx b/src/components/main/cateogryAndMap/CategoryAndMap.jsx
@@ -10,7 +10,6 @@ const CategoryAndMap = () => {
                 <h3>카테고리로 검색하기</h3>
                 <img src={tagIcon} alt="tag-icon" width="20px" />
             </label>
-            <p>카테고리로 원하는 맛집 탐색!</p>
             <CategoryAndMapBox>
                 <div>
                     <Category />
@@ -28,6 +27,7 @@ export default CategoryAndMap;
 const CategoryAndMapLayout = styled.div`
     width: 80%;
     max-width: 1120px;
+    min-height: 580px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -36,16 +36,29 @@ const CategoryAndMapLayout = styled.div`
 
     & > label {
         display: flex;
+        align-items: flex-start;
         flex-direction: row;
         gap: 10px;
 
         & > p {
             flex-wrap: nowrap;
         }
     }
+
     @media screen and (max-width: 768px) {
+        width: 80%;
+        margin-top: 0px;
+        min-height: 1100px;
+        align-items: flex-start;
+
+        & > label > h3 {
+            margin-left: 10px;
+            font-size: 16px;
+        }
+    }
+
+    @media screen and (max-width: 500px) {
         width: 100%;
-        align-items: center;
     }
 `;
 
@@ -82,6 +95,7 @@ const CategoryAndMapBox = styled.div`
         display: flex;
         flex-direction: column;
         align-items: center;
+
         & > div {
             width: 95%;
         }

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: '450px' }}>
             <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
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import Slider from 'react-slick';
 import sliderSettings from '../../common/slider/sliderSetting';
 import StoreCardWrapper from './StoreCardWrap';
+import trophyIcon from '../../../assets/Icon/trophy.svg';
 
 import { DarkGrey, Orange } from '../../../color';
 import 'slick-carousel/slick/slick.css';
@@ -12,6 +13,7 @@ const MainContentsWrap = ({ ranking, title, description, stores }) => {
         <MainContentsWrapLayout>
             <label>
                 <h3>{title}</h3>
+                <img src={trophyIcon} alt="trophy-icon" width="16px" />
             </label>
             <p>{description}</p>
             <SlideContainer>
@@ -29,10 +31,11 @@ export default MainContentsWrap;
 
 const MainContentsWrapLayout = styled.div`
     width: 100%;
+    height: 400px;
     display: flex;
     flex-direction: column;
     gap: 10px;
-    margin-bottom: 100px;
+    margin-bottom: 10px;
 
     & > label {
         text-align: center;
@@ -42,10 +45,17 @@ const MainContentsWrapLayout = styled.div`
     }
 
     @media screen and (max-width: 780px) {
-        width: 100%;
-        margin-bottom: 10px;
-        align-items: center;
         justify-content: center;
+
+        & > label > h3 {
+            align-items: flex-start;
+            margin-left: 10px;
+            font-size: 16px;
+        }
+
+        & > p {
+            display: none;
+        }
     }
 `;
 
@@ -84,7 +94,6 @@ const SlideContainer = styled.div`
 
     & .slick-list {
         overflow: hidden;
-        margin-right: -10px;
     }
 
     & > div > p {
@@ -96,12 +105,28 @@ const SlideContainer = styled.div`
         margin: 0;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 500px) {
         width: 100%;
-        gap: 20px;
+        gap: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /* 라이브러리 기본 스타일을 덮어쓰기 위해 사용 */
+        .slick-slide {
+            width: 210px !important;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
 
         .slick-dots li button::before {
-            display: none;
+            font-size: 0;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: ${DarkGrey};
+            border: none;
         }
     }
 `;
diff --git a/src/components/storeCard/StoreCard.jsx b/src/components/storeCard/StoreCard.jsx
@@ -54,9 +54,13 @@ const StoreCardContainer = styled.div`
     }
 
     @media screen and (max-width: 500px) {
-        width: fit-content;
-        max-width: 280px;
-        height: 350px;
+        width: 200px;
+        margin: 5px;
+        height: 280px;
+
+        &:hover {
+            transform: none;
+        }
     }
 `;
 
@@ -90,13 +94,14 @@ const NameAndBookmarkContainer = styled.div`
     height: 35px;
 
     & > p {
+        width: 100px;
         font-size: 18px;
-        text-align: center;
         display: flex;
-        align-items: center;
         font-weight: 600;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
         &:hover {
-            transform: scale(1.05);
             cursor: pointer;
         }
     }
@@ -108,6 +113,16 @@ const NameAndBookmarkContainer = styled.div`
         text-align: center;
         font-weight: bold;
     }
+
+    @media screen and (max-width: 500px) {
+        & > p {
+            font-size: 16px;
+        }
+
+        & > div {
+            display: none;
+        }
+    }
 `;
 
 const ContentsContainer = styled.div`
@@ -131,4 +146,8 @@ const LocationBox = styled.div`
 
     color: ${DarkGrey};
     font-size: 14px;
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -97,6 +97,7 @@ const MainPageLayout = styled.div`
 
     @media screen and (max-width: 500px) {
         gap: 10px;
+
         & > img {
             width: 100%;
             border-radius: 0px;
@@ -112,7 +113,7 @@ const SearchBarContainer = styled.div`
     }
 
     @media screen and (max-width: 500px) {
-        display: none;
+        width: 90%;
     }
 `;
 
@@ -126,4 +127,8 @@ const SliderContents = styled.section`
         width: 80%;
         max-width: 980px;
     }
+
+    @media screen and (max-width: 500px) {
+        width: 100%;
+    }
 `;