fix: swiper pagination 적용

Ocean-Portfolio · Mar 17, 2024 · a3b8bb7 · a3b8bb7
1 parent 7349403
commit a3b8bb7
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,3 +1,5 @@
+import 'swiper/css';
+import 'swiper/css/pagination';
 import '@/styles/global.css';
 import '@/styles/theme/grayScale.css';
 import '@/styles/theme/colorPalette.css';

diff --git a/src/components/History/History.css.ts b/src/components/History/History.css.ts
@@ -6,12 +6,12 @@ import { commonColorThemeVars } from '@/styles/theme/index.css';
 export const wrapStyle = style({
   display: 'grid',
   gridAutoRows: 'auto',
-  gap: '1rem',
+  columnGap: '1rem',
   width: '100%',
 
   '@media': {
     [ODSBreakpointTokenVariables['breakpoint-xxl']]: {
-      gap: '2.5rem',
+      columnGap: '2.5rem',
     },
     [ODSBreakpointTokenVariables['breakpoint-s']]: {
       display: 'flex',

diff --git a/src/components/History/History.tsx b/src/components/History/History.tsx
@@ -211,7 +211,7 @@ const Menu = () => {
               handleClick(index);
             }}
           >
-            {historySummary.name}
+            {historySummary.name.toUpperCase()}
           </Button>
         );
       })}

diff --git a/src/components/History/Summary/HistorySummary.tsx b/src/components/History/Summary/HistorySummary.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import 'swiper/css';
+import 'swiper/css/pagination';
 
 import classNames from 'classnames';
 import React, { PropsWithChildren, useState } from 'react';
@@ -162,7 +163,9 @@ const Swipe = () => {
           );
         })}
       </OceanSwiper.Main>
-      {breakpointXXL && <Spacer direction="horizontal" spacing="spacer-20" />}
+      {!isDetailView && breakpointXXL && (
+        <Spacer direction="horizontal" spacing="spacer-20" />
+      )}
     </OceanSwiper>
   );
 };

diff --git a/src/components/OceanSwiper/OceanSwiper.tsx b/src/components/OceanSwiper/OceanSwiper.tsx
@@ -2,7 +2,7 @@
 
 import classNames from 'classnames';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import { A11y } from 'swiper/modules';
+import { A11y, Pagination, Navigation } from 'swiper/modules';
 import { Swiper, SwiperRef, SwiperSlide, useSwiper } from 'swiper/react';
 import { SwiperOptions } from 'swiper/types';
 import Tag from '@/composable/Tag/Tag';
@@ -111,9 +111,10 @@ const Main = ({
       <Swiper
         {...rest}
         ref={swiperRef}
-        modules={[A11y]}
+        modules={[A11y, Pagination]}
         slidesPerView={perView || 'auto'}
         spaceBetween={gap}
+        pagination={{ clickable: true }}
         allowSlideNext={isSwipeAble}
         allowSlidePrev={isSwipeAble}
         onRealIndexChange={(e) => {