Merge pull request #103 from Kernel360/common-component-carousel-refa…

…ctoring

공통 컴포넌트 리팩토링: Carousel

package.json

@@ -29,7 +29,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.49.2",
     "react-redux": "^9.0.4",
-    "swiper": "^11"
+    "react-slick": "^0.29.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.6",
@@ -48,6 +48,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -64,6 +65,7 @@
     "jsdom": "^23.2.0",
     "msw": "^2.0.13",
     "sass": "^1.69.6",
+    "slick-carousel": "^1.8.1",
     "storybook": "^7.6.6",
     "storybook-react-context": "^0.6.0",
     "stylelint": "^16.1.0",
@@ -77,4 +79,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

src/app/globals.css

@@ -1,3 +1,6 @@
+@import "~slick-carousel/slick/slick.css"; 
+@import "~slick-carousel/slick/slick-theme.css";
+
 :root {
   --primary: #0075FF;
   --secondary: #B2D6FF;

src/app/page.module.scss

@@ -11,12 +11,7 @@
     padding: 0 24px;
   }
 
-  .bannerWrapper {
-    max-height: 140px;
-    overflow-y: hidden;
-  }
-
-  .recommandTextWrapper {
+  .recommendTextWrapper {
     padding: 0 24px;
   }
 

src/app/page.tsx

@@ -1,20 +1,18 @@
 import classNames from 'classnames/bind';
-import dynamic from 'next/dynamic';
 
-import BottomNav from '@components/shared/bottom-nav/BottomNav';
-import Flex from '@components/shared/flex/Flex';
-import Header from '@components/shared/header/Header';
-import ProductArticle from '@components/shared/product-article/ProductArticle';
-import Radio from '@components/shared/radio/Radio';
-import SearchBar from '@components/shared/search-bar/SearchBar';
-import Spacing from '@components/shared/spacing/Spacing';
-import Text from '@components/shared/text/Text';
+import BottomNav from '@shared/bottom-nav/BottomNav';
+import Banner from '@shared/carousel/Banner';
+import RecommendList from '@shared/carousel/RecommendList';
+import Flex from '@shared/flex/Flex';
+import Header from '@shared/header/Header';
+import ProductArticle from '@shared/product-article/ProductArticle';
+import Radio from '@shared/radio/Radio';
+import SearchBar from '@shared/search-bar/SearchBar';
+import Spacing from '@shared/spacing/Spacing';
+import Text from '@shared/text/Text';
 
 import styles from './page.module.scss';
 
-const Banner = dynamic(() => { return import('@components/shared/carousel/Banner'); });
-const RecommandList = dynamic(() => { return import('@components/shared/carousel/RecommandList'); });
-
 const cx = classNames.bind(styles);
 
 const bannerData = [
@@ -44,49 +42,49 @@ const bannerData = [
   },
 ];
 
-const recommandListData = [
+const recommendListData = [
   {
     id: 1,
     link: '/',
-    src: '/assets/recommandItem1.png',
+    src: '/assets/recommendItem1.png',
     alt: '그림',
     productName: '카샴푸',
   },
   {
     id: 2,
     link: '/',
-    src: '/assets/recommandItem2.png',
+    src: '/assets/recommendItem2.png',
     alt: '그림',
     productName: '휠 클리너',
   },
   {
     id: 3,
     link: '/',
-    src: '/assets/recommandItem3.png',
+    src: '/assets/recommendItem3.png',
     alt: '그림',
     productName: '타올',
 
   },
   {
     id: 4,
     link: '/',
-    src: '/assets/recommandItem4.png',
+    src: '/assets/recommendItem4.png',
     alt: '그림',
     productName: '먼지털이개',
 
   },
   {
     id: 5,
     link: '/',
-    src: '/assets/recommandItem4.png',
+    src: '/assets/recommendItem4.png',
     alt: '그림',
     productName: '먼지털이개',
 
   },
   {
     id: 6,
     link: '/',
-    src: '/assets/recommandItem4.png',
+    src: '/assets/recommendItem4.png',
     alt: '그림',
     productName: '먼지털이개',
 
@@ -139,23 +137,21 @@ export default function Home() {
           <SearchBar />
           <Spacing size={24} />
         </div>
-        <div className={cx('bannerWrapper')}>
-          <Banner bannerData={bannerData} />
-        </div>
+        <Banner bannerData={bannerData} />
         <Spacing size={32} />
-        <div className={cx('recommandTextWrapper')}>
+        <div className={cx('recommendTextWrapper')}>
           <Text bold>추천 세차용품</Text>
         </div>
         <Spacing size={16} />
-        <RecommandList recommandListData={recommandListData} />
+        <RecommendList recommendListData={recommendListData} />
         <Spacing size={32} />
         <div className={cx('productListContainer')}>
           <Text bold>WashPedia 랭킹</Text>
           <Spacing size={16} />
           <Flex justify="space-between" align="center" gap={8}>
             <Radio label="조회순" name="filter" type="filter" value="view" defaultChecked />
             <Radio label="위반제품" name="filter" type="filter" value="violatingProduct" />
-            <Radio label="추천순" name="filter" type="filter" value="recommand" />
+            <Radio label="추천순" name="filter" type="filter" value="recommend" />
             <Radio label="최신제품" name="filter" type="filter" value="latest" />
           </Flex>
           <Spacing size={16} />

src/components/shared/carousel/Banner.scss

@@ -0,0 +1,38 @@
+.container {
+  position: relative;
+
+  img {
+    width: auto;
+    margin: 0 auto;
+  }
+
+  .dotsCustom {
+    position: absolute;
+    bottom: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .dotsCustom li {
+    display: inline-block;
+    margin: 0 6px;
+    cursor: pointer;
+  }
+
+  .dotsCustom li button {
+    display: block;
+    width: 16px;
+    height: 8px;
+    border-radius: 8px;
+    background: var(--gray-100);
+    color: transparent;
+    cursor: pointer;
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .dotsCustom li.slick-active button {
+    width: 24px;
+    border-radius: 8px;
+    background-color: var(--primary);
+  }
+}

src/components/shared/carousel/Banner.tsx

@@ -1,43 +1,43 @@
 'use client';
 
+import Slider from 'react-slick';
+
 import Image from 'next/image';
 import Link from 'next/link';
-import { Autoplay, Pagination } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
 
-import 'swiper/scss';
-import 'swiper/scss/autoplay';
-import 'swiper/scss/pagination';
-import { IBannerdata } from './types/carousel.type';
+import './Banner.scss';
+import { IBannerData } from './types/carousel.type';
+
+const settings = {
+  dots: true,
+  infinite: true,
+  speed: 2000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  autoplay: true,
+  adaptiveHeight: true,
+  autoplaySpeed: 5000,
+  arrows: false,
+};
 
-function Banner({ bannerData }: { bannerData: IBannerdata[] }) {
+function Banner({ bannerData }: { bannerData: IBannerData[] }) {
   return (
-    <Swiper
-      modules={[Autoplay, Pagination]}
-      spaceBetween={20}
-      slidesPerView={1}
-      pagination={{ clickable: true, type: 'bullets' }}
-      slidesOffsetAfter={20}
-      slidesOffsetBefore={30}
-      autoplay={{ delay: 2000 }}
-      loop
-      speed={2000}
-    >
-      {bannerData.map((slide) => {
-        return (
-          <SwiperSlide key={slide.id}>
-            <Link href={slide.link}>
+    <div className="container">
+      <Slider {...settings} dotsClass="dotsCustom">
+        {bannerData.map((slide) => {
+          return (
+            <Link href={slide.link} key={slide.id}>
               <Image
                 src={slide.src}
                 alt={slide.alt}
                 width={315}
                 height={140}
               />
             </Link>
-          </SwiperSlide>
-        );
-      })}
-    </Swiper>
+          );
+        })}
+      </Slider>
+    </div>
   );
 }