From feaedb19f56534ae6b0afad8e1cf395b1567afa8 Mon Sep 17 00:00:00 2001
From: seung365 <bdh3659@naver.com>
Date: Tue, 20 Aug 2024 20:16:55 +0900
Subject: [PATCH] =?UTF-8?q?design:=20swiper=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=20=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           | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/HomePage/LookAround/MobileSwiper.tsx b/src/components/HomePage/LookAround/MobileSwiper.tsx
index 0aa8252..d67b862 100644
--- a/src/components/HomePage/LookAround/MobileSwiper.tsx
+++ b/src/components/HomePage/LookAround/MobileSwiper.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import styled from '@emotion/styled';
 import { Pagination, Autoplay, Navigation } from 'swiper/modules';
+import { useMediaQuery } from 'react-responsive';
+import { breakpoints } from '@/styles/variants';
 
 import 'swiper/css';
 import 'swiper/css/pagination';
@@ -9,13 +11,15 @@ import 'swiper/css/autoplay';
 import 'swiper/css/navigation';
 
 export const MobileSwiper = () => {
+  const isXs = useMediaQuery({ query: `(max-width : ${breakpoints.xs})` });
+
   return (
     <>
       <SwiperWrapper
         modules={[Pagination, Autoplay, Navigation]}
         pagination={{ clickable: true }}
         autoplay={{ delay: 3000 }}
-        navigation
+        navigation={!isXs}
       >
         <SwiperSlide>
           <SlideContent>
@@ -38,8 +42,9 @@ export const MobileSwiper = () => {
 };
 
 const SwiperWrapper = styled(Swiper)`
-  width: 100%;
-  height: 100%;
+  max-width: 100vw;
+  max-height: 100vw;
+  margin: 0;
 `;
 
 const SlideContent = styled.div`
@@ -48,6 +53,9 @@ const SlideContent = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 0;
+  max-width: 100vw; /* 이미지의 최대 너비를 슬라이드 너비의 80%로 설정 */
+  max-height: 100vw;
 `;
 
 const StyledImage = styled.img`