From 6affad51ee6ac89f4f5ee39cd336428c1c31b87a Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Thu, 11 Jul 2024 17:48:41 +0900
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20Swiper=200.9.1=20=EB=B2=84?=
 =?UTF-8?q?=EC=A0=84=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json | 8 ++++----
 frontend/package.json      | 2 +-
 frontend/webpack.common.js | 4 ----
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 230fea3f1..d7f99edef 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,7 +13,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.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga4": "^2.1.0",
@@ -18522,9 +18522,9 @@
       }
     },
     "node_modules/map-befine-swiper": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.8.3.tgz",
-      "integrity": "sha512-yWUTckvw6hX/Qu+KwLV26UFKVfZyjje8EbMh6aN16DS4KNttO2vTQXUSTWbI8YarOpGyax1rwK0ImNTIaITdgw==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.9.1.tgz",
+      "integrity": "sha512-/bm9zUkSK4cm9bufgECDN0EpD15JpgckjBipZIj/v1Eclor/HeLf2/KOkVHQXbNsvvET58vanXWNsOz/WRhbfw==",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
diff --git a/frontend/package.json b/frontend/package.json
index d9dba4f19..7bffb6b43 100644
--- 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.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
index 2a5777a54..83c60894d 100644
--- 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',

From a86b235f42955664fa211d89535325656d9b535a Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Thu, 11 Jul 2024 17:48:51 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20Swiper=200.9.1=20=EB=B2=84?=
 =?UTF-8?q?=EC=A0=84=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Banner/index.tsx      | 12 +--------
 .../components/PinImageContainer/index.tsx    | 18 +++----------
 .../components/TopicCardContainer/index.tsx   | 27 +++++++------------
 3 files changed, 13 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/Banner/index.tsx b/frontend/src/components/Banner/index.tsx
index 091e0c750..989318427 100644
--- 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
index b07a0e43e..6f8f57af8 100644
--- 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
index 48aa58f56..834bac14d 100644
--- 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(

From e68af3ef9e38f92589547aff3120ec097e8cb84c Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 13 Jul 2024 01:14:25 +0900
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20Swiper=200.9.4=20=EB=B2=84?=
 =?UTF-8?q?=EC=A0=84=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                           | 8 ++++----
 frontend/package.json                                | 2 +-
 frontend/src/components/Banner/index.tsx             | 2 +-
 frontend/src/components/PinImageContainer/index.tsx  | 2 +-
 frontend/src/components/TopicCardContainer/index.tsx | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d7f99edef..62e18b730 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,7 +13,7 @@
         "@tanstack/react-query-devtools": "^5.17.9",
         "axios": "^1.5.1",
         "history": "^5.3.0",
-        "map-befine-swiper": "^0.9.1",
+        "map-befine-swiper": "^0.9.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga4": "^2.1.0",
@@ -18522,9 +18522,9 @@
       }
     },
     "node_modules/map-befine-swiper": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.9.1.tgz",
-      "integrity": "sha512-/bm9zUkSK4cm9bufgECDN0EpD15JpgckjBipZIj/v1Eclor/HeLf2/KOkVHQXbNsvvET58vanXWNsOz/WRhbfw==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.9.4.tgz",
+      "integrity": "sha512-oXG038LTTEzM/aQM7Yg+nOa3yUqDDhI5pz0MJ6nxeaZY00l8JfUvz12gDBwDJXhJCx9iBOnPxn4YHi9bul8mQQ==",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
diff --git a/frontend/package.json b/frontend/package.json
index 7bffb6b43..1de206512 100644
--- 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.9.1",
+    "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
index 989318427..a568a3c0c 100644
--- a/frontend/src/components/Banner/index.tsx
+++ b/frontend/src/components/Banner/index.tsx
@@ -22,7 +22,7 @@ export default function Banner() {
   };
 
   return (
-    <Swiper as="section" width={1140} height={400} $tabBoxPosition="bottom" 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
index 6f8f57af8..1584ff6d6 100644
--- a/frontend/src/components/PinImageContainer/index.tsx
+++ b/frontend/src/components/PinImageContainer/index.tsx
@@ -82,7 +82,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
 
   return (
     <Wrapper>
-      <Swiper as="ul" width={330} height={100} $slidePerTab={3}>
+      <Swiper tag="ul" width={330} height={100} $slidePerTab={3}>
         {images.map((image, index) => (
           <Tab label={`${index}`} key={image.id}>
             <ImageWrapper key={`image-${index}`}>
diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx
index 834bac14d..0099d6815 100644
--- a/frontend/src/components/TopicCardContainer/index.tsx
+++ b/frontend/src/components/TopicCardContainer/index.tsx
@@ -57,9 +57,9 @@ function TopicCardContainer({
       <Space size={4} />
 
       <Swiper
-        as="ul"
+        tag="ul"
         width={1140}
-        height={300}
+        height="auto"
         $slidePerTab={5}
         $breakPoints={{
           1100: 4,