Merge pull request #83 from delicious-algorithme/dev

dev merge into main
delicious-algorithme · Nov 19, 2024 · bd00ac3 · bd00ac3
2 parents b1215be + 66407c8
commit bd00ac3
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 13 deletions.
diff --git a/src/components/bookmark/Bookmarks.jsx b/src/components/bookmark/Bookmarks.jsx
@@ -50,6 +50,10 @@ const Bookmarks = () => {
         }
     };
 
+    const handleClickScrap = () => {
+        navigate('/webmap');
+    };
+
     return (
         <>
             {stores.length !== 0 && (
@@ -73,7 +77,7 @@ const Bookmarks = () => {
             {stores.length === 0 && (
                 <EmptyBox>
                     <h2> 저장된 가게가 없습니다.</h2>
-                    <button>스크랩 하러 가기</button>
+                    <button onClick={handleClickScrap}>스크랩 하러 가기</button>
                 </EmptyBox>
             )}
         </>

diff --git a/src/components/common/filtering/Filtering.jsx b/src/components/common/filtering/Filtering.jsx
@@ -16,6 +16,7 @@ const Filtering = ({ category }) => {
     const { setIsFetchAll } = useIsFetch();
     const { tagList, setTagList } = useTagList();
 
+    const [seeMore, setSeeMore] = useState(true);
     const [categories, setCategories] = useState(filterParams.category);
     const [keywords, setKeywords] = useState(filterParams.positiveKeyword);
     const [locationValue, setLocationValue] = useState(filterParams.addresses);
@@ -42,6 +43,10 @@ const Filtering = ({ category }) => {
         };
     }, []);
 
+    const handleSeemore = () => {
+        setSeeMore(!seeMore);
+    };
+
     const isInitFilterParams = useCallback(() => {
         return isEqual(filterParams, initialParams);
     }, [filterParams, initialParams]);
@@ -214,8 +219,10 @@ const Filtering = ({ category }) => {
 
     return (
         <SelectLayout>
+            <SeemoreButton onClick={handleSeemore}>가게 필터링 하기</SeemoreButton>
             <div>
                 {FITERING_INFO &&
+                    seeMore &&
                     FITERING_INFO.map((item) => {
                         return (
                             <SelectBox key={item.key}>
@@ -376,6 +383,18 @@ const SelectLayout = styled.div`
     }
 `;
 
+const SeemoreButton = styled.button`
+    margin-right: 20px;
+    margin-bottom: 10px;
+    height: 30px;
+    border-radius: 20px;
+    font-weight: bold;
+
+    @media screen and (min-width: 350px) {
+        display: none;
+    }
+`;
+
 const SelectBox = styled.div`
     position: relative;
     height: auto;

diff --git a/src/components/common/store/StoreCard.jsx b/src/components/common/store/StoreCard.jsx
@@ -37,13 +37,15 @@ const StoreListCard = ({ image, alt, id, name, address, rating, positiveRatio, p
                             </p>
                         </PositiveRatioContainer>
                     </RatingContainer>
-                    <PositiveKeywordsBox>
-                        <p># {positiveKeywords}</p>
-                    </PositiveKeywordsBox>
-                    <LocationBox>
-                        <LocationOn />
-                        <p>{address}</p>
-                    </LocationBox>
+                    <KeywordAndLocationBox>
+                        <PositiveKeywordsBox>
+                            <p># {positiveKeywords}</p>
+                        </PositiveKeywordsBox>
+                        <LocationBox>
+                            <LocationOn />
+                            <p>{address}</p>
+                        </LocationBox>
+                    </KeywordAndLocationBox>
                 </ContentsBox>
             </ContentsContainer>
         </StoreListCardLayout>
@@ -64,19 +66,32 @@ const StoreListCardLayout = styled.div`
         cursor: pointer;
         background-color: ${LightGrey};
     }
+
+    @media screen and (max-width: 500px) {
+        flex-direction: column;
+        align-items: flex-start;
+        height: 160px;
+    }
 `;
 
 const ContentsContainer = styled.div`
     display: flex;
     flex-direction: row;
 `;
 
+const KeywordAndLocationBox = styled.div``;
+
 const ImageContainer = styled.div`
     width: 150px;
     height: 150px;
     overflow: hidden;
     flex-shrink: 0;
     border-radius: 10px;
+    display: flex;
+    @media screen and (max-width: 500px) {
+        width: 100px;
+        height: 100px;
+    }
 `;
 
 const StyledImage = styled.img`
@@ -91,6 +106,9 @@ const ContentsBox = styled.div`
     display: flex;
     flex-direction: column;
     gap: 10px;
+    @media screen and (max-width: 350px) {
+        width: 200px;
+    }
 `;
 
 const LocationBox = styled.div`
@@ -118,6 +136,13 @@ const NameAndBookmarkContainer = styled.div`
         font-weight: 700;
         font-size: 19px;
     }
+
+    @media screen and (max-width: 500px) {
+        & > p {
+            font-weight: 700;
+            font-size: 16px;
+        }
+    }
 `;
 
 const RatingContainer = styled.div`

diff --git a/src/components/common/store/StoreList.jsx b/src/components/common/store/StoreList.jsx
@@ -310,8 +310,8 @@ const StoreListLayout = styled.div`
     overflow-y: scroll;
     background-color: ${White};
 
-    @media screen and (max-width: 1024px) {
-        min-width: 200px;
+    @media screen and (max-width: 350px) {
+        width: 80%;
     }
 `;
 
@@ -320,6 +320,11 @@ const FilteringContentsContainer = styled.div`
     z-index: 10;
     padding: 10px;
     margin-bottom: 20px;
+
+    @media screen and (max-width: 350px) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 `;
 
 const StoreListCardContainer = styled.div``;

diff --git a/src/pages/StoreDetailPage.jsx b/src/pages/StoreDetailPage.jsx
@@ -8,6 +8,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { getStoreDetail } from '../apis/api/getStoreDetail';
 import { Button } from '../components/common';
 import { ReactComponent as BookmarkIcon } from '../assets/Icon/detail/Bookmark.svg';
+import { useSaveBookmarkId } from '../store';
 
 const StoreDetailPage = () => {
     const [item, setItem] = useState({});
@@ -16,6 +17,10 @@ const StoreDetailPage = () => {
     const [isLoading, setIsLoading] = useState(false);
     const storeId = id;
     const { setStoreDetail } = useStoreDetail();
+    const { savedStores } = useSaveBookmarkId();
+
+    const bookmark = savedStores.find((store) => store.storeResponseDto.storeId === item.id);
+    const bookmarkId = bookmark?.bookmarkId;
 
     const fetchStoreDetail = async (storeId) => {
         setIsLoading(true);
@@ -59,7 +64,12 @@ const StoreDetailPage = () => {
     return (
         <>
             <ButtonBox>
-                <Button onClickHandler={buttonClickHandler} text="뒤로 가기" color="orange" visible={true} />
+                <Button
+                    onClickHandler={buttonClickHandler}
+                    text="다른 식당 찾아 보러 가기"
+                    color="orange"
+                    visible={true}
+                />
                 <h4>{item.name}</h4>
             </ButtonBox>
             {!isLoading && (
@@ -76,8 +86,10 @@ const StoreDetailPage = () => {
                         </StyledLeftContainer>
                         <StyledRightContainer>
                             <BookmarkBox>
-                                <BookmarkIcon />
-                                <button>저장하기</button>
+                                <BookmarkIcon bookmarkId={bookmarkId} storeId={item.storeId} />
+                                <button>
+                                    저장하기<span>(북마크 아이콘을 눌러 저장해주세요.)</span>
+                                </button>
                             </BookmarkBox>
                             <StoreMap store={item} />
                         </StyledRightContainer>
@@ -154,6 +166,12 @@ const BookmarkBox = styled.div`
         font-size: 18px;
         font-weight: 600;
 
+        & > span {
+            font-size: 14px;
+            padding: 5px;
+            text-align: center;
+            font-weight: 500;
+        }
         &:hover {
             cursor: pointer;
         }