Merge pull request #114 from Beside-Potenday/seungbeom

mainpage 디자인 수정 + mailpage swiper 추가
Beside-Potenday · Sep 2, 2024 · 726b6bf · 726b6bf
2 parents 0764982 + dba3d65
commit 726b6bf
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git 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
@@ -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
@@ -120,7 +120,9 @@ const Wrapper = styled.div`
     width: 500px;
     margin: 0px;
     padding: 0px;
+    font-size: 8px;
   }
+  max-width: 90vw;
 `;
 
 const LogoWrapper = styled.div`

diff --git 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%;
+  }
+`;