Merge pull request #38 from happbob/feat/OODD-52

Feat: swiper에 className 추가

Author: xxinzzi

src/pages/Upload/ImageReviewModal/ImageSwiper/index.tsx

@@ -42,6 +42,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images, onRemove, onAddImages
 	return (
 		<SwiperContainer>
 			<Swiper
+				className="review-swiper"
 				spaceBetween={1}
 				slidesPerView="auto"
 				centeredSlides={true}

src/pages/Upload/ImageReviewModal/ImageSwiper/styles.tsx

@@ -7,13 +7,13 @@ export const SwiperContainer = styled.div`
 	align-items: center;
 	justify-content: center;
 
-	.swiper-wrapper {
+	.review-swiper .swiper-wrapper {
 		height: 29.1875rem;
 		width: 100%;
 		max-height: 70%;
 	}
 
-	.swiper-slide {
+	.review-swiper .swiper-slide {
 		width: 21.875rem;
 		max-width: calc(100% - 2.5rem);
 		aspect-ratio: 3 / 4;
@@ -23,16 +23,16 @@ export const SwiperContainer = styled.div`
 		transform: scale(0.95);
 	}
 
-	.swiper-slide.swiper-slide-active {
+	.review-swiper .swiper-slide-active {
 		transform: scale(1);
 	}
 
-	.swiper-slide.swiper-slide-next,
-	.parentSwiper.swiper-slide-prev {
+	.review-swiper .swiper-slide-next,
+	.review-swiper .swiper-slide-prev {
 		transform: scale(0.95);
 	}
 
-	.add-btn-box {
+	.review-swiper .add-btn-box {
 		display: flex;
 		width: 21.875rem;
 		max-width: calc(100% - 2.5rem);

src/pages/Upload/PostUploadModal/ImageSwiper/index.tsx

@@ -14,6 +14,7 @@ const ImageSwiper: React.FC<ImageSwiperProps> = ({ images }) => {
 	return (
 		<SwiperContainer>
 			<Swiper
+				className="upload-swiper"
 				ref={swiperRef}
 				spaceBetween={5}
 				slidesPerView="auto"

src/pages/Upload/PostUploadModal/ImageSwiper/styles.tsx

@@ -6,31 +6,31 @@ export const SwiperContainer = styled.div`
 	//justify-content: center;
 	min-height: 23.75rem;
 
-	.swiper {
+	.upload-swiper {
 		height: 23.75rem;
 		width: 100%;
 		position: relative;
 	}
 
-	.swiper-wrapper {
+	.upload-swiper .swiper-wrapper {
 		display: flex;
 		align-items: center;
 	}
 
-	.swiper-slide {
+	.upload-swiper .swiper-slide {
 		width: 15.4375rem;
 		height: 20.5625rem;
 		object-fit: cover;
 		transition: transform 0.3s;
 		transform: scale(0.95);
 	}
 
-	.swiper-slide.swiper-slide-active {
+	.upload-swiper .swiper-slide-active {
 		transform: scale(1);
 	}
 
-	.swiper-slide.swiper-slide-next,
-	.parentSwiper.swiper-slide-prev {
+	.upload-swiper .swiper-slide-next,
+	.upload-swiper .swiper-slide-prev {
 		transform: scale(0.95);
 	}
 `;