From a68901b812d33d710bb9cce795236e0ac23fc11e Mon Sep 17 00:00:00 2001
From: seung365 <bdh3659@naver.com>
Date: Tue, 20 Aug 2024 19:54:05 +0900
Subject: [PATCH] =?UTF-8?q?design:=20swiper=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HomePage/LookAround/MobileSwiper.tsx      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/HomePage/LookAround/MobileSwiper.tsx b/src/components/HomePage/LookAround/MobileSwiper.tsx
index 26a1b26..0aa8252 100644
--- a/src/components/HomePage/LookAround/MobileSwiper.tsx
+++ b/src/components/HomePage/LookAround/MobileSwiper.tsx
@@ -19,17 +19,17 @@ export const MobileSwiper = () => {
       >
         <SwiperSlide>
           <SlideContent>
-            <img src="/images/composition1.svg" alt="살펴보기 이미지 1" />
+            <StyledImage src="/images/composition1.svg" alt="살펴보기 이미지 1" />
           </SlideContent>
         </SwiperSlide>
         <SwiperSlide>
           <SlideContent>
-            <img src="/images/composition2.svg" alt="살펴보기 이미지 2" />
+            <StyledImage src="/images/composition2.svg" alt="살펴보기 이미지 2" />
           </SlideContent>
         </SwiperSlide>
         <SwiperSlide>
           <SlideContent>
-            <img src="/images/composition3.svg" alt="살펴보기 이미지 3" />
+            <StyledImage src="/images/composition3.svg" alt="살펴보기 이미지 3" />
           </SlideContent>
         </SwiperSlide>
       </SwiperWrapper>
@@ -43,11 +43,17 @@ const SwiperWrapper = styled(Swiper)`
 `;
 
 const SlideContent = styled.div`
-  text-align: center;
-  font-size: 18px;
-
-  /* Center slide text vertically */
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 `;
+
+const StyledImage = styled.img`
+  width: auto;
+  height: auto;
+  max-width: 80%; /* 이미지의 최대 너비를 슬라이드 너비의 80%로 설정 */
+  max-height: 80%; /* 이미지의 최대 높이를 슬라이드 높이의 80%로 설정 */
+  object-fit: contain;
+`;