Feat/유저 토너먼트 전적 페이지 우승자 스와이프 뷰 #1070

components/tournament-record/WinnerSwipeView.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image';
+import { EffectCoverflow } from 'swiper/modules';
+import { Swiper, SwiperSlide, SwiperClass } from 'swiper/react';
+import styles from 'styles/tournament-record/WinnerSwipeView.module.scss';
+
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+
+const dummyImages: string[] = [
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/jincpark.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/hyuim.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/jincpark.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/taehkwon-a0d20e13-7726-4168-9751-8f946bf91388.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/jincpark.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/hyuim.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/taehkwon-a0d20e13-7726-4168-9751-8f946bf91388.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/jincpark.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/taehkwon-a0d20e13-7726-4168-9751-8f946bf91388.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/hyuim.jpeg',
+  'https://42gg-public-image.s3.ap-northeast-2.amazonaws.com/images/jincpark.jpeg',
+];
+
+export default function WinnerSwipeView() {
+  function indexChangeHandler(swiper: SwiperClass) {
+    console.log(swiper);
+  }
+
+  return (
+    <Swiper
+      className={styles.swiper}
+      slidesPerView={5}
+      effect={'coverflow'}
+      centeredSlides={true}
+      coverflowEffect={{
+        rotate: 15,
+        stretch: 0,
+        depth: 300,
+        slideShadows: true,
+      }}
+      modules={[EffectCoverflow]}
+      onActiveIndexChange={indexChangeHandler}
+    >
+      {dummyImages.map((src, index) => {
+        return (
+          <SwiperSlide key={src + index}>
+            <div className={styles.swiperSlide}>
+              <Image
+                src={src}
+                fill={true}
+                style={{ objectFit: 'cover' }}
+                alt='sample image'
+              />
+            </div>
+          </SwiperSlide>
+        );
+      })}
+    </Swiper>
+  );
+}

package.json

@@ -40,6 +40,7 @@
     "react-virtuoso": "^4.5.1",
     "recoil": "^0.7.3",
     "recoil-persist": "^4.2.0",
+    "swiper": "^11.0.4",
     "uuid": "^8.3.2",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0"

pages/tournament-record.tsx

@@ -1,3 +1,4 @@
+import WinnerSwipeView from 'components/tournament-record/WinnerSwipeView';
 import styles from 'styles/tournament-record/TournamentRecord.module.scss';
 
 export default function TournamentRecord() {
@@ -9,7 +10,7 @@ export default function TournamentRecord() {
         <button>Master</button>
         <button>Custom</button>
       </div>
-      <div className={styles.winnerImageContainer}>우승자 이미지들</div>
+      <WinnerSwipeView />
       <div className={styles.winnerInfoContainer}>
         <p className={styles.userId}>cadet2147</p>
         <p className={styles.gameInfo}>

styles/tournament-record/WinnerSwipeView.module.scss

@@ -0,0 +1,19 @@
+.swiper {
+  // position: relative;
+  height: 10rem;
+  margin-top: 1.7rem;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+.swiperSlide {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8rem;
+  height: 100%;
+  overflow: hidden;
+  border: 4px solid #e2be00;
+  border-radius: 1.8rem;
+  transform: translate(-50%, -50%);
+}