[feat] swiper 기초 세팅

softeerbootcamp4th · Aug 6, 2024 · 30e8315 · 30e8315
1 parent 12e32e8
commit 30e8315
Showing 1 changed file with 26 additions and 5 deletions.
diff --git a/src/interactions/index.jsx b/src/interactions/index.jsx
@@ -3,7 +3,11 @@ import useSectionInitialize from "../scroll/useSectionInitialize";
 import IntroductionDetail from "./IntroductionDetail";
 import GiftDetail from "./GiftDetail";
 import JSONData from "./content.json";
-import TarBar from "./TabBar";
+import TabBar from "./TabBar";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Pagination } from "swiper/modules";
 
 export default function InteractionPage() {
   const SECTION_IDX = 1;
@@ -18,15 +22,32 @@ export default function InteractionPage() {
       ref={sectionRef}
       className="bg-black py-60 flex flex-col items-center"
     >
-      <TarBar
+      <TabBar
         currentInteraction={currentInteraction}
         setCurrentInteraction={setCurrentInteraction}
         isJoinedList={isJoinedList}
       />
 
-      <div className="h-[456px] w-[500px] border border-white flex justify-center items-center text-white">
-        인터랙션
-      </div>
+      <Swiper
+        slidesPerView={"auto"}
+        centeredSlides={true}
+        spaceBetween={15}
+        pagination={{
+          clickable: true,
+        }}
+        modules={[Pagination]}
+        className="w-full bg-white h-full"
+      >
+        <SwiperSlide className="w-1/3 h-[500px]">
+          <div className="bg-red-400">1</div>
+        </SwiperSlide>
+        <SwiperSlide className="w-1/3 h-[500px]">
+          <div className="bg-red-500">2</div>
+        </SwiperSlide>
+        <SwiperSlide className="w-1/3 h-[500px]">
+          <div className="bg-red-400">3</div>
+        </SwiperSlide>
+      </Swiper>
 
       <div className="pt-32 flex flex-col xl:flex-row gap-[140px]">
         <IntroductionDetail contentList={JSONData.howto} />