🎉 이미지 슬라이더 구현 - 상세정보페이지, 홈 배너에 적용

package.json

@@ -30,13 +30,13 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
-    "lucide-react": "^0.291.0",
     "js-cookie": "^3.0.5",
     "next": "14.0.1",
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.47.0",
+    "swiper": "^11.0.3",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",
@@ -45,7 +45,6 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.7.2",
     "@storybook/addon-essentials": "7.5.0",
     "@storybook/addon-interactions": "7.5.0",
     "@storybook/addon-links": "7.5.0",
@@ -57,6 +56,7 @@
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "^7.5.1",
     "@tanstack/eslint-plugin-query": "^5.0.0",
+    "@tanstack/react-query-devtools": "^5.7.2",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/js-cookie": "^3.0.5",
     "@types/node": "^20",

src/app/(root)/(routes)/(home)/components/HomSlider.tsx

@@ -0,0 +1,13 @@
+import Slider from '@/components/domain/Slider'
+import Assets from '@/config/assets'
+
+const HomeSlider = () => {
+  const bannerArr = [
+    { _id: 1, image: Assets.banner1 },
+    { _id: 2, image: Assets.banner2 },
+    { _id: 3, image: Assets.banner3 },
+  ]
+  return <Slider imageData={bannerArr} imageAspectRatio="auto" />
+}
+
+export default HomeSlider

src/app/(root)/(routes)/(home)/page.tsx

@@ -1,11 +1,14 @@
 import Link from 'next/link'
 import { DarkModeButton } from '@/components/ui/DarkModeButton'
+import HomeSlider from './components/HomSlider'
 import TestBlock from './components/TestBlock'
 
 function HomePage() {
   return (
-    <main className="flex flex-col items-center justify-between min-h-screen p-24 text-4xl font-bold text-text-color bg-background-color">
-      hi
+    <main className="flex flex-col items-center justify-between min-h-screen  text-4xl font-bold text-text-color bg-background-color">
+      <section>
+        <HomeSlider />
+      </section>
       <Link href={'/test-auth-only'}>auth only</Link>
       <Link href={'/test-not-auth-only'}>not auth only</Link>
       <TestBlock />

src/app/(root)/(routes)/items/[itemId]/page.tsx

@@ -1,3 +1,4 @@
+import Slider from '@/components/domain/Slider/Slider'
 import { getItemInfo } from '@/services/item/item'
 import ProfileSection from './components/ProfileSection'
 import DescriptionSection from './components/description-section'
@@ -21,11 +22,12 @@ async function getItemValue(itemId: string) {
 const ItemPage = async ({ params }: ItemPageProps) => {
   const data = await getItemValue(params.itemId)
   console.log(data)
-  const { cardId, userName, priceRange, tradeType, tradeArea, userId } = data
+  const { cardId, userName, priceRange, tradeType, tradeArea, userId, images } =
+    data
 
   return (
     <main className="flex-col min-h-screen bg-background-color">
-      <div>이미지 슬라이더 영역</div>
+      <Slider imageData={images} imageAspectRatio="square" />
       <div className="p-4">
         <ProfileSection profileImg={null} userName={userName} />
         <DescriptionSection itemData={data} />

src/components/domain/Slider/Slider.tsx

@@ -1,155 +1,49 @@
 'use client'
 
-import { useState, useEffect, useRef, useCallback } from 'react'
 import Image from 'next/image'
-import Assets from '@/config/assets'
+import SwiperCore from 'swiper'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import { Pagination, Autoplay } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { itemImages } from '@/types/item'
+import './index.css'
 
 type SliderProps = {
-  autoSlide?: boolean
-  autoSlideInterval?: number
-  slides: string[]
-  imageAspectRatio?: string
+  imageData: itemImages[]
+  imageAspectRatio: string
 }
 
-const Slider = ({
-  autoSlide = false,
-  autoSlideInterval = 3000,
-  slides,
-  imageAspectRatio = 'auto',
-}: SliderProps) => {
-  const [currentIndex, setCurrentIndex] = useState(1)
-  const [coordinate, setCoordinate] = useState({ start: 0, end: 0 })
-  const [style, setStyle] = useState({
-    transform: `translateX(-${currentIndex}00%)`,
-    transition: `all 0.4s ease-out`,
-  })
-
-  const ref = useRef<HTMLDivElement>(null)
-  const imageList = [slides.at(-1), ...slides, slides[0]]
-
-  const goPrevSlide = () => {
-    setCurrentIndex(currentIndex - 1)
-    setStyle({
-      transform: `translateX(-${currentIndex - 1}00%)`,
-      transition: `all 0.4s ease-out`,
-    })
-  }
-  const goNextSlide = useCallback(() => {
-    setCurrentIndex(currentIndex + 1)
-    setStyle({
-      transform: `translateX(-${currentIndex + 1}00%)`,
-      transition: `all 0.4s ease-out`,
-    })
-  }, [currentIndex])
-
-  const handleTouchStart = (e: React.TouchEvent) => {
-    setCoordinate({
-      ...coordinate,
-      start: e.touches[0].pageX,
-    })
-  }
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (ref.current) {
-      const current = ref.current.clientWidth * currentIndex
-      const result = -current + (e.targetTouches[0].pageX - coordinate.start)
-      setStyle({
-        transform: `translate3d(${result}px, 0px, 0px)`,
-        transition: '0ms',
-      })
-    }
-  }
-
-  const handleTouchEnd = (e: React.TouchEvent) => {
-    const end = e.changedTouches[0].pageX
-    const distance = Math.abs(coordinate.start - end)
-
-    if (coordinate.start > end && distance > 2) {
-      goNextSlide()
-    } else if (coordinate.start < end && distance < 2) {
-      goPrevSlide()
-    }
-    setCoordinate({
-      ...coordinate,
-      end,
-    })
-  }
-
-  useEffect(() => {
-    if (!autoSlide) return
-    const slideInterval = setInterval(goNextSlide, autoSlideInterval)
-    return () => clearInterval(slideInterval)
-  }, [autoSlide, autoSlideInterval, currentIndex, goNextSlide])
-
-  useEffect(() => {
-    if (currentIndex === 0) {
-      setCurrentIndex(imageList.length - 2)
-      setTimeout(function () {
-        setStyle({
-          transform: `translateX(-${imageList.length - 2}00%)`,
-          transition: '0ms',
-        })
-      }, 400)
-    }
-
-    if (currentIndex >= imageList.length - 1) {
-      setCurrentIndex(1)
-      setTimeout(() => {
-        setStyle({
-          transform: `translateX(-100%)`,
-          transition: '0ms',
-        })
-      }, 400)
-    }
-  }, [currentIndex, imageList.length])
-
+/**
+ * @param {ImageData} 이미지 아이디, 이미지 url을 담은 데이터
+ * @param {imageAspectRatio} swiper 크기 지정을 위한 변수
+ */
+const Slider = ({ imageData, imageAspectRatio }: SliderProps) => {
+  SwiperCore.use([Pagination, Autoplay])
   return (
-    <div
-      className="overflow-hidden relative"
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
+    <Swiper
+      loop={true}
+      pagination={{ clickable: true }}
+      allowTouchMove={true}
+      className={`aspect-${imageAspectRatio}`}
+      autoplay={{
+        delay: 5000,
+        disableOnInteraction: false,
+      }}
     >
-      <div ref={ref} className="flex " style={style}>
-        {imageList.map((url, i) => (
+      {imageData.map((v) => (
+        <SwiperSlide key={v._id}>
           <Image
-            src={url as string}
-            alt="itemImage"
-            key={i}
-            priority
             width={0}
             height={0}
-            className={`w-full cursor-pointer aspect-${imageAspectRatio}`}
+            alt="sliderImage"
+            src={v.image}
+            sizes="100vw"
+            style={{ width: '100%' }}
           />
-        ))}
-      </div>
-      <div className="absolute p-2 w-full flex justify-between top-[50%]">
-        <button onClick={goPrevSlide} className="p-1 rounded-full bg-white/20">
-          <Image src={Assets.leftIcon} alt="left" />
-        </button>
-
-        <button onClick={goNextSlide} className="p-1 rounded-full bg-white/20">
-          <Image src={Assets.rightIcon} alt="right" priority />
-        </button>
-      </div>
-      <div className="absolute bottom-4 right-0 left-0">
-        <div className="flex items-center justify-center gap-2" ref={ref}>
-          {slides.map((_, i) => (
-            <button
-              key={i}
-              className={`
-              transition-all w-3 h-3 rounded-full
-              ${
-                currentIndex === i + 1
-                  ? 'w-4 h-4 bg-primary-color'
-                  : 'bg-white bg-opacity-50'
-              }
-            `}
-            ></button>
-          ))}
-        </div>
-      </div>
-    </div>
+        </SwiperSlide>
+      ))}
+    </Swiper>
   )
 }
 

src/components/domain/Slider/index.css

@@ -0,0 +1,23 @@
+.swiper {
+  @apply w-full h-full max-w-[640px];
+}
+
+.swiper-slide {
+  @apply flex justify-center items-center w-full h-full;
+}
+
+.swiper-slide img {
+  @apply w-full h-full
+  /* display: block; */;
+}
+
+.swiper-pagination-bullet {
+  @apply w-2 h-2 bg-bullet-inactive-color opacity-100;
+}
+
+.swiper-pagination {
+  @apply inline-flex justify-center;
+}
+.swiper-pagination-bullet-active {
+  @apply bg-bullet-active-color;
+}

src/config/assets.ts

@@ -1,3 +1,6 @@
+import Banner1 from '/public/images/Banner1.png'
+import Banner2 from '/public/images/Banner2.png'
+import Banner3 from '/public/images/Banner3.png'
 import ArrowLeftIcon from '/public/images/arrow-left.svg'
 import AlarmIcon from '/public/images/bell.svg'
 import FilterIcon from '/public/images/filter.svg'
@@ -38,6 +41,9 @@ const Assets = {
   usersIcon: UsersIcon,
   markerIcon: MarkerIcon,
   moneyIcon: MoneyIcon,
+  banner1: Banner1,
+  banner2: Banner2,
+  banner3: Banner3,
   xCircleIcon: XCircleIcon,
   plusIcon: PlusIcon,
   editIcon: editIcon,

src/lib/msw/mocks/itemHandlers.ts

@@ -41,11 +41,13 @@ export const itemHandlers = [
             images: [
               {
                 _id: 1,
-                image: '이미지 url',
+                image:
+                  'https://cdn.cetizen.com/CDN/market/market_large_crop/202311/20231109/231109182102_1_2797370.jpg',
               },
               {
                 _id: 2,
-                image: '이미지 url',
+                image:
+                  'https://cdn.cetizen.com/CDN/market/market_large_crop/202311/20231109/231109182111_4_2797370.jpg',
               },
             ],
             dibsCount: 11,