design: swiper 디자인 수정

src/components/HomePage/LookAround/MobileSwiper.tsx

@@ -2,20 +2,24 @@ 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';
 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`