From 47fd6e4445288bccbbf96c98f90273cd23753ae2 Mon Sep 17 00:00:00 2001 From: seung365 Date: Mon, 2 Sep 2024 20:41:28 +0900 Subject: [PATCH 1/3] =?UTF-8?q?design:=20mail=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/LeftImage.svg | 31 +++++++++++++++++++++++++++++++ public/images/RightImage.svg | 27 +++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 public/images/LeftImage.svg create mode 100644 public/images/RightImage.svg diff --git a/public/images/LeftImage.svg b/public/images/LeftImage.svg new file mode 100644 index 0000000..110a51b --- /dev/null +++ b/public/images/LeftImage.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/RightImage.svg b/public/images/RightImage.svg new file mode 100644 index 0000000..6fc62a2 --- /dev/null +++ b/public/images/RightImage.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + From c3cf89e691453d6a9a640f2545ef99ae3c452f37 Mon Sep 17 00:00:00 2001 From: seung365 Date: Mon, 2 Sep 2024 20:41:50 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20mail=20page=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20swiper=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Mail/MobileSwiper.tsx | 62 ++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/components/Mail/MobileSwiper.tsx diff --git a/src/components/Mail/MobileSwiper.tsx b/src/components/Mail/MobileSwiper.tsx new file mode 100644 index 0000000..2d7874a --- /dev/null +++ b/src/components/Mail/MobileSwiper.tsx @@ -0,0 +1,62 @@ +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 ( +
+ + + + + + + + + + + + +
+ ); +}; + +const SwiperWrapper = styled(Swiper)` + max-width: 90vw; + max-height: 100vw; + margin: 20px; +`; + +const SlideContent = styled.div` + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + max-width: 100vw; + max-height: 100vw; +`; + +const StyledImage = styled.img` + width: auto; + height: auto; + max-width: 80%; + max-height: 80%; + object-fit: contain; +`; From dee318417381a6547c0d16f10bd804809423cfd6 Mon Sep 17 00:00:00 2001 From: seung365 Date: Mon, 2 Sep 2024 20:43:34 +0900 Subject: [PATCH 3/3] =?UTF-8?q?design:=20mail=20page=20=EB=B9=84=EC=9C=A8?= =?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 --- src/components/Mail/AskList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Mail/AskList.tsx b/src/components/Mail/AskList.tsx index 91bad10..b619f35 100644 --- a/src/components/Mail/AskList.tsx +++ b/src/components/Mail/AskList.tsx @@ -43,7 +43,7 @@ export const AskList = ({ randomInput }: AskListProps) => { }; const AskListWrapper = styled.div` - width: 768px; + width: 90%; height: 750px; flex-shrink: 0; border-radius: 10px; @@ -57,7 +57,7 @@ const AskListWrapper = styled.div` gap: 10px; @media (max-width: ${breakpoints.md}) { - width: 400px; + width: 90%; } `;