Feat: 인기 시설 슬라이더 좌우 버튼 추가

HELLO-FIT · Dec 11, 2024 · c9434f7 · c9434f7
1 parent 4071ed8
commit c9434f7
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 3 deletions.
diff --git a/public/icon/l/icon-left2.svg b/public/icon/l/icon-left2.svg
diff --git a/src/components/Lesson/Popular/Popular.module.scss b/src/components/Lesson/Popular/Popular.module.scss
@@ -13,6 +13,7 @@
   padding: 20px 20px 32px;
   display: flex;
   flex-direction: column;
+  position: relative;
   gap: 11px;
 
   .titleContainer {
@@ -71,6 +72,28 @@
   }
 }
 
+.navButtonLeft {
+  position: absolute;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  z-index: 10;
+  top: 40%;
+  left: 0;
+}
+
+.navButtonRight {
+  position: absolute;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  z-index: 10;
+  top: 40%;
+  right: 0;
+}
+
 .midContainer {
   height: 10px;
   background-color: $gray10;

diff --git a/src/components/Lesson/Popular/index.tsx b/src/components/Lesson/Popular/index.tsx
@@ -23,7 +23,9 @@ import SportsImageComponent from '@/components/Asset/SportsImage';
 import { SPORTSIMAGES } from '@/constants/asset';
 import { formatCurrency } from '@/utils/formatCurrency';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
 import 'swiper/css';
+import 'swiper/css/navigation';
 import useOutsideClick from '@/hooks/useOutsideClick';
 import { toggleState } from '@/states/toggleState';
 import PopularSchedule from '@/components/Schedule/PopularSchedule';
@@ -235,22 +237,32 @@ export default function Popular() {
               {`인기 시설 TOP ${topFacilities.length}`}
             </div>
             <div className={styles.bestContainer}>
+              <div className={styles.navigationButtons}>
+                <button className={`${styles.navButtonLeft} custom-prev`}>
+                  <IconComponent name="left2" size="l" />
+                </button>
+              </div>
               <Swiper
                 spaceBetween={12}
                 loop={true}
                 pagination={{ clickable: true }}
+                navigation={{
+                  nextEl: '.custom-next',
+                  prevEl: '.custom-prev',
+                }}
+                modules={[Navigation]}
                 breakpoints={{
                   0: {
                     slidesPerView: 2,
                   },
-                  390: {
+                  430: {
                     slidesPerView: 2.2,
                   },
-                  430: {
+                  600: {
                     slidesPerView: 3,
                   },
                   1024: {
-                    slidesPerView: 3.5,
+                    slidesPerView: 3.2,
                   },
                 }}
               >
@@ -287,6 +299,11 @@ export default function Popular() {
                   </SwiperSlide>
                 ))}
               </Swiper>
+              <div className={styles.navigationButtons}>
+                <button className={`${styles.navButtonRight} custom-next`}>
+                  <IconComponent name="right" size="l" />
+                </button>
+              </div>
             </div>
           </div>
           <div className={styles.midContainer} />

diff --git a/src/constants/asset.tsx b/src/constants/asset.tsx
@@ -60,6 +60,9 @@ export const ICONS = {
     m: '/icon/m/icon-left.svg',
     s: '/icon/s/icon-left.svg',
   },
+  left2: {
+    l: '/icon/l/icon-left2.svg',
+  },
   menu: {
     l: '/icon/l/icon-menu.svg',
     m: '/icon/m/icon-menu.svg',