Merge pull request #129 from delicious-algorithme/dev

refactor: 메인 top카드 캐러셀 추가

package.json

@@ -15,7 +15,6 @@
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.7.4",
         "cross-env": "^7.0.3",
-        "lodash.debounce": "^4.0.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-infinite-scroller": "^1.2.6",
@@ -24,6 +23,7 @@
         "react-query": "^3.39.3",
         "react-router-dom": "^6.26.0",
         "react-scripts": "5.0.1",
+        "react-slick": "^0.30.2",
         "styled-components": "^6.1.12",
         "styled-reset": "^4.5.2",
         "sweetalert2": "^11.14.4",
@@ -58,6 +58,7 @@
     "devDependencies": {
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
-        "prettier": "^3.3.3"
+        "prettier": "^3.3.3",
+        "slick-carousel": "^1.8.1"
     }
 }

src/components/bookmark/Bookmarks.jsx → src/components/bookmark/BookmarkedStores.jsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { getBookmarksStores } from '../../apis/api/bookmarks';
-import { TopStoreCard } from '../storeCard';
+import { StoreCard } from '../storeCard';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Grey } from '../../color';
@@ -9,7 +9,7 @@ import { useInfiniteQuery } from 'react-query';
 import { useInView } from 'react-intersection-observer';
 import { Loading } from '../common';
 
-const Bookmarks = () => {
+const BookmarkedStores = () => {
     const [stores, setStores] = useState([]);
     const [isTimeout, setIsTimeout] = useState(false);
     const { setBookmarkStore } = useSaveBookmarkId();
@@ -81,7 +81,7 @@ const Bookmarks = () => {
                 {!isLoading &&
                     bookmarkStores.length > 0 &&
                     bookmarkStores.map((store) => (
-                        <TopStoreCard
+                        <StoreCard
                             address={store.storeResponseDto.address}
                             key={store.storeResponseDto.storeId}
                             storeId={store.storeResponseDto.storeId}
@@ -104,7 +104,7 @@ const Bookmarks = () => {
     );
 };
 
-export default Bookmarks;
+export default BookmarkedStores;
 
 const BookmarkLayout = styled.div`
     width: 100%;

src/components/bookmark/index.js

@@ -1,3 +1,3 @@
-import Bookmarks from './Bookmarks';
+import BookmarkedStores from './BookmarkedStores';
 
-export { Bookmarks };
+export { BookmarkedStores };

src/components/common/category/Category.jsx

@@ -3,7 +3,7 @@ import { Orange } from '../../../color';
 import { White } from '../../../color';
 import { useNavigate } from 'react-router-dom';
 import { useIsFetch } from '../../../store';
-import { CATEGORY_ITEMS } from '../../../constants/categoryItem';
+import { CATEGORY_ITEMS } from '../../../constants/CATEGORY_ITEMS';
 
 const Category = (position) => {
     const navigate = useNavigate();
@@ -47,6 +47,7 @@ const CategoryLayout = styled.div`
     align-items: center;
     justify-content: center;
     padding-bottom: 100px;
+
     & > div {
         display: flex;
         justify-content: center;
@@ -63,6 +64,7 @@ const CategoryLayout = styled.div`
             background-color: ${Orange};
             color: ${White};
         }
+
         @media screen and (max-width: 768px) {
             & > div {
                 display: flex;

src/components/common/filtering/Filtering.jsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { FITERING_INFO } from '../../../constants/filteringItems';
+import { FITERING_INFO } from '../../../constants/FILTERING_ITEMS';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { DarkGrey, Grey, Orange, White } from '../../../color';
 import { useFilterParams, useIsFetch, useTagList } from '../../../store';
@@ -395,6 +395,7 @@ export default Filtering;
 const SelectLayout = styled.div`
     display: flex;
     flex-direction: column;
+
     flex: 0 1 auto;
     & > div {
         display: flex;
@@ -437,6 +438,7 @@ const SelectBox = styled.div`
 const CategoryBox = styled.div`
     cursor: pointer;
     display: flex;
+    transition-duration: 2s;
     justify-content: space-between;
     gap: 10px;
     align-items: center;
@@ -477,6 +479,7 @@ const Contents = styled.ul`
     max-height: 200px;
     overflow-y: auto;
     color: ${DarkGrey};
+
     & > p {
         width: 100%;
     }
@@ -497,6 +500,7 @@ const Content = styled.li`
     height: 20px;
     display: flex;
     cursor: pointer;
+
     &:hover {
         color: ${Orange};
         font-weight: bold;
@@ -577,6 +581,7 @@ const TagBox = styled.div`
     display: flex;
     align-items: center;
     font-weight: 600;
+
     & > p {
         cursor: pointer;
         font-size: 13px;

src/components/common/index.js

@@ -1,7 +1,7 @@
 import Category from './category/Category';
 import MyMap from './map/Map';
-import StoreList from './store/StoreList';
-import StoreCard from './store/StoreCard';
+import StoreList from './storeList/StoreList';
+import StoreListCard from './storeList/StoreListCard';
 import Filtering from './filtering/Filtering';
 import Footer from './footer/Footer';
 import SearchBar from './searchBar/SearchBar';
@@ -16,7 +16,7 @@ export {
     Category,
     MyMap,
     StoreList,
-    StoreCard,
+    StoreListCard,
     Filtering,
     Footer,
     Button,

src/components/common/keyword/Keyword.jsx

@@ -45,6 +45,7 @@ const KeywordTag = styled.div`
     font-size: ${(props) => (props.mode === 'card' ? `10px` : `15px`)};
     border: 1px solid ${(props) => (props.type === 'positive' ? `${Orange}` : `${DarkGreen}`)};
     color: ${(props) => (props.type === 'positive' ? `${Orange}` : `${DarkGreen}`)};
+    background: ${(props) => (props.type === 'positive' ? `#FFF4E6` : `#E6F7F4`)};
 
     @media screen and (max-width: 768px) {
         font-size: 10px;

src/components/common/slider/CustomArrow.jsx

@@ -0,0 +1,53 @@
+import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
+import styled from 'styled-components';
+import { White } from '../../../color';
+
+export const CustomNextArrow = ({ onClick }) => {
+    return (
+        <StyledNextArrowButton>
+            <ArrowForwardIosRoundedIcon onClick={onClick} />
+        </StyledNextArrowButton>
+    );
+};
+
+export const CustomPrevArrow = ({ onClick }) => {
+    return (
+        <StyledPrevArrowButton>
+            <ArrowBackIosNewRoundedIcon onClick={onClick} />
+        </StyledPrevArrowButton>
+    );
+};
+
+const StyledNextArrowButton = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: -40px;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 10;
+    width: 20px;
+    height: 20px;
+    background-color: ${White};
+    border-radius: 50%;
+    cursor: pointer;
+`;
+
+const StyledPrevArrowButton = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: -40px;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 10;
+    width: 20px;
+    height: 20px;
+
+    background-color: ${White};
+    border-radius: 50%;
+    cursor: pointer;
+`;

src/components/common/slider/sliderSetting.js

@@ -0,0 +1,34 @@
+import { CustomNextArrow, CustomPrevArrow } from './CustomArrow';
+
+const sliderSettings = {
+    centerMode: true,
+    dots: true,
+    infinite: true,
+    speed: 1000,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    arrow: false,
+    nextArrow: <CustomNextArrow />,
+    prevArrow: <CustomPrevArrow />,
+    initialSlide: 1,
+    responsive: [
+        {
+            breakpoint: 1500,
+            settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                infinite: true,
+                dots: true,
+            },
+        },
+        {
+            breakpoint: 768,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+            },
+        },
+    ],
+};
+
+export default sliderSettings;

src/components/common/store/StoreList.jsx → src/components/common/storeList/StoreList.jsx

@@ -7,7 +7,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { getStoreList } from '../../../apis/api/getStoreList';
 import { getStoreAll } from '../../../apis/api/getStoreAll';
 
-import StoreListCard from './StoreCard';
+import StoreListCard from './StoreListCard';
 import Button from '../button/Button';
 import Filtering from '../filtering/Filtering';
 import SearchBar from '../searchBar/SearchBar';