From 50e227aa5aea8a51c12f2c9ad6bbf08ea238e3ff Mon Sep 17 00:00:00 2001
From: seung365 <bdh3659@naver.com>
Date: Tue, 3 Sep 2024 01:31:33 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20mailpage=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20swiper=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Mail/index.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/pages/Mail/index.tsx b/src/pages/Mail/index.tsx
index e1256b6..4f6266f 100644
--- a/src/pages/Mail/index.tsx
+++ b/src/pages/Mail/index.tsx
@@ -19,12 +19,15 @@ import { useMail } from '@/Provider/MailContext';
 import { MailModal } from '@/components/Mail/MailModal';
 import { breakpoints } from '@/styles/variants';
 import { useLocation } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
+import { MobileSwiper } from '@/components/Mail/MobileSwiper';
 
 export const MailPage = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [isAlertOpen, setAlertOpen] = useState(true);
   const mailContext = useMail();
   const { isActive } = useMail();
+  const isMobile = useMediaQuery({ query: `(max-width : ${breakpoints.md})` });
 
   const location = useLocation();
 
@@ -90,21 +93,17 @@ export const MailPage = () => {
                 maxWidth="1200px"
                 margin="0 auto"
               >
-                <GridItem
-                  colSpan={{ base: 1, md: 2 }}
-                  width="100%"
-                  display="flex"
-                  justifyContent="center"
-                >
+                <GridItem colSpan={{ base: 1, md: 2 }} display="flex" justifyContent="center">
                   <AskList randomInput={mailInput}></AskList>
                 </GridItem>
                 <GridItem
-                  colSpan={{ base: 1, md: 1 }}
+                  colSpan={1}
                   display="flex"
                   justifyContent="center"
                   alignItems="center"
+                  minWidth={{ base: 'auto', md: '400px' }} // md일 때만 400px로 설정
                 >
-                  <ImageWrapper src="/images/exampleImage.svg" />
+                  {isMobile ? <MobileSwiper /> : <ImageWrapper src="/images/exampleImage.svg" />}
                 </GridItem>
               </Grid>
             </GridItem>
@@ -186,4 +185,13 @@ const MedeaItems = styled(Grid)`
   }
 `;
 
-const ImageWrapper = styled.img``;
+const ImageWrapper = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  overflow: hidden;
+  @media (max-width: ${breakpoints.md}) {
+    width: 90%;
+  }
+`;

From dba3d650c93eb91f2eec030ac1342cb3d04d946b Mon Sep 17 00:00:00 2001
From: seung365 <bdh3659@naver.com>
Date: Tue, 3 Sep 2024 01:32:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20mainpage=20testers=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomePage/LookAround/MobileSwiper.tsx | 6 +++---
 src/components/HomePage/TestersBox/AskList.tsx      | 1 +
 src/components/HomePage/TestersBox/index.tsx        | 2 ++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/HomePage/LookAround/MobileSwiper.tsx b/src/components/HomePage/LookAround/MobileSwiper.tsx
index d67b862..c4648f8 100644
--- a/src/components/HomePage/LookAround/MobileSwiper.tsx
+++ b/src/components/HomePage/LookAround/MobileSwiper.tsx
@@ -54,14 +54,14 @@ const SlideContent = styled.div`
   justify-content: center;
   align-items: center;
   margin: 0;
-  max-width: 100vw; /* 이미지의 최대 너비를 슬라이드 너비의 80%로 설정 */
+  max-width: 100vw;
   max-height: 100vw;
 `;
 
 const StyledImage = styled.img`
   width: auto;
   height: auto;
-  max-width: 80%; /* 이미지의 최대 너비를 슬라이드 너비의 80%로 설정 */
-  max-height: 80%; /* 이미지의 최대 높이를 슬라이드 높이의 80%로 설정 */
+  max-width: 80%;
+  max-height: 80%;
   object-fit: contain;
 `;
diff --git a/src/components/HomePage/TestersBox/AskList.tsx b/src/components/HomePage/TestersBox/AskList.tsx
index 7e074bc..f5df768 100644
--- a/src/components/HomePage/TestersBox/AskList.tsx
+++ b/src/components/HomePage/TestersBox/AskList.tsx
@@ -77,6 +77,7 @@ const AskListWrapper = styled.div`
   padding-top: 46px;
   padding-bottom: 86px;
   gap: 10px;
+  flex-wrap: wrap;
 
   @media (max-width: ${breakpoints.md}) {
     width: 100%;
diff --git a/src/components/HomePage/TestersBox/index.tsx b/src/components/HomePage/TestersBox/index.tsx
index c78a1f2..2fb1813 100644
--- a/src/components/HomePage/TestersBox/index.tsx
+++ b/src/components/HomePage/TestersBox/index.tsx
@@ -120,7 +120,9 @@ const Wrapper = styled.div`
     width: 500px;
     margin: 0px;
     padding: 0px;
+    font-size: 8px;
   }
+  max-width: 90vw;
 `;
 
 const LogoWrapper = styled.div`