refactor: Swiper 0.9.1 버전 반영

woowacourse-teams · Jul 11, 2024 · a86b235 · a86b235
1 parent 6affad5
commit a86b235
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 44 deletions.
diff --git a/frontend/src/components/Banner/index.tsx b/frontend/src/components/Banner/index.tsx
@@ -22,17 +22,7 @@ export default function Banner() {
   };
 
   return (
-    <Swiper
-      as="section"
-      width={1140}
-      height={400}
-      $simpleTab
-      $tabBoxPosition="bottom"
-      $isNotTabBoxShow
-      swipeable
-      swiper
-      autoplay
-    >
+    <Swiper as="section" width={1140} height={400} $tabBoxPosition="bottom" autoplay>
       <Tab label="붕어빵 지도">
         <Box cursor="pointer" onClick={goToBoongABbangTopic}>
           <BannerImage

diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
@@ -59,9 +59,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
                   $errorDefaultSrc={NOT_FOUND_IMAGE}
                 />
               </div>
-              <RemoveImageIconWrapper
-                onClick={() => onRemovePinImage(image.id)}
-              >
+              <RemoveImageIconWrapper onClick={() => onRemovePinImage(image.id)}>
                 <RemoveImageButton />
               </RemoveImageIconWrapper>
             </ImageWrapper>
@@ -84,15 +82,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
 
   return (
     <Wrapper>
-      <Swiper
-        as="ul"
-        width={330}
-        height={100}
-        $elementsOneTab={3}
-        swiper
-        swipeable
-        $isNotTabBoxShow
-      >
+      <Swiper as="ul" width={330} height={100} $slidePerTab={3}>
         {images.map((image, index) => (
           <Tab label={`${index}`} key={image.id}>
             <ImageWrapper key={`image-${index}`}>
@@ -105,9 +95,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
                   $errorDefaultSrc={NOT_FOUND_IMAGE}
                 />
               </div>
-              <RemoveImageIconWrapper
-                onClick={() => onRemovePinImage(image.id)}
-              >
+              <RemoveImageIconWrapper onClick={() => onRemovePinImage(image.id)}>
                 <RemoveImageButton />
               </RemoveImageIconWrapper>
             </ImageWrapper>

diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx
@@ -30,22 +30,11 @@ function TopicCardContainer({
     <section>
       <Flex $justifyContent="space-between" $alignItems="flex-end">
         <Box>
-          <MediaText
-            as="h2"
-            color="black"
-            $fontSize="extraLarge"
-            $fontWeight="bold"
-            tabIndex={0}
-          >
+          <MediaText as="h2" color="black" $fontSize="extraLarge" $fontWeight="bold" tabIndex={0}>
             {containerTitle}
           </MediaText>
           <Space size={0} />
-          <MediaText
-            color="gray"
-            $fontSize="default"
-            $fontWeight="normal"
-            tabIndex={0}
-          >
+          <MediaText color="gray" $fontSize="default" $fontWeight="normal" tabIndex={0}>
             {containerDescription}
           </MediaText>
         </Box>
@@ -71,11 +60,13 @@ function TopicCardContainer({
         as="ul"
         width={1140}
         height={300}
-        $elementsOneTab={5}
-        $elementsMediaQueries={[1180, 900, 660, 320]}
-        swiper
-        swipeable
-        $isNotTabBoxShow
+        $slidePerTab={5}
+        $breakPoints={{
+          1100: 4,
+          900: 3,
+          660: 2,
+          320: 1,
+        }}
       >
         {topics &&
           topics.map(