Refactor/#657: Swiper 0.9.4 버전 적용 (#658)

* chore: Swiper 0.9.1 버전 적용 * refactor: Swiper 0.9.1 버전 반영 * chore: Swiper 0.9.4 버전 적용
woowacourse-teams · Jul 12, 2024 · be6a23c · be6a23c
1 parent 34c985b
commit be6a23c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 55 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,7 +20,7 @@
     "@tanstack/react-query-devtools": "^5.17.9",
     "axios": "^1.5.1",
     "history": "^5.3.0",
-    "map-befine-swiper": "^0.8.3",
+    "map-befine-swiper": "^0.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",

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 tag="section" width={1140} height="auto" $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 tag="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>
@@ -68,14 +57,16 @@ function TopicCardContainer({
       <Space size={4} />
 
       <Swiper
-        as="ul"
+        tag="ul"
         width={1140}
-        height={300}
-        $elementsOneTab={5}
-        $elementsMediaQueries={[1180, 900, 660, 320]}
-        swiper
-        swipeable
-        $isNotTabBoxShow
+        height="auto"
+        $slidePerTab={5}
+        $breakPoints={{
+          1100: 4,
+          900: 3,
+          660: 2,
+          320: 1,
+        }}
       >
         {topics &&
           topics.map(

diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
@@ -2,7 +2,6 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ProvidePlugin, DefinePlugin } = require('webpack');
 const DotenvWebpackPlugin = require('dotenv-webpack');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
@@ -29,9 +28,6 @@ module.exports = {
     new DotenvWebpackPlugin({
       systemvars: true,
     }),
-    new BundleAnalyzerPlugin({
-      openAnalyzer: false,
-    }),
     new CompressionPlugin({
       filename: '[path][base].gz',
       algorithm: 'gzip',