diff --git a/.stylelintrc b/.stylelintrc index 40558537..b8915bc5 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -3,6 +3,7 @@ "plugins": ["stylelint-order"], "customSyntax": "postcss-styled-syntax", "rules": { + "media-query-no-invalid": null, "declaration-empty-line-before": [ "never", { diff --git a/package.json b/package.json index 81754705..ff501204 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-query": "^5.17.10", "@tanstack/react-query-devtools": "^5.37.1", "@tiptap/extension-blockquote": "^2.2.3", diff --git a/src/App.tsx b/src/App.tsx index 01ed04c2..36c0f76c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,12 @@ import styled from '@emotion/styled'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import router from './routers/Router'; -import { RouterProvider } from 'react-router-dom'; import { Suspense } from 'react'; +import { RouterProvider } from 'react-router-dom'; +import ResponsiveProvider from './components/commons/Responsive/ResponsiveProvider'; import Loading from './pages/loading/Loading'; - +import router from './routers/Router'; +import { MOBILE_MEDIA_QUERY } from './styles/mediaQuery'; const App = () => { const queryClient = new QueryClient({ defaultOptions: { @@ -16,16 +17,18 @@ const App = () => { }); return ( <> -
- + {/*
*/} + + }> - - -
+ + + + {/*
*/} ); }; @@ -38,4 +41,10 @@ const DesktopWrapper = styled.div` align-items: center; width: 100%; scroll-behavior: smooth; + + @media ${MOBILE_MEDIA_QUERY} { + /* width: 100%; */ + width: 100%; + max-width: 83rem; + } `; diff --git a/src/components/commons/Footer.tsx b/src/components/commons/Footer.tsx index 0f80891c..08a03652 100644 --- a/src/components/commons/Footer.tsx +++ b/src/components/commons/Footer.tsx @@ -1,8 +1,9 @@ import styled from '@emotion/styled'; -import Spacing from './Spacing'; import { FOOTER_LINK } from '../../constants/footerLink'; +import Spacing from './Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; import { FooterInstaIc, FooterLogoIc, @@ -53,11 +54,19 @@ const FooterWrapper = styled.div` display: flex; justify-content: space-between; width: 100%; - min-width: 136.7rem; + + /* min-width: 136.7rem; */ height: 24.6rem; padding: 8rem 16.5rem; background-color: ${({ theme }) => theme.colors.grayViolet}; + + @media ${MOBILE_MEDIA_QUERY} { + flex-direction: column; + gap: 4rem; + align-items: center; + padding: 5rem; + } `; const FooterLayout = styled.div` diff --git a/src/components/commons/Responsive/Responsive.tsx b/src/components/commons/Responsive/Responsive.tsx new file mode 100644 index 00000000..debcab98 --- /dev/null +++ b/src/components/commons/Responsive/Responsive.tsx @@ -0,0 +1,48 @@ +import { Slot } from '@radix-ui/react-slot'; +import { ReactNode, useContext, useEffect, useState } from 'react'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; +import { ResponsiveContext } from './context'; +interface ResponsivePropTypes { + children: ReactNode; + only: AvailableSize; + asChild?: boolean; +} + +type AvailableSize = 'mobile' | 'desktop'; + +const Responsive = ({ children, only, asChild }: ResponsivePropTypes) => { + const [current, setCurrent] = useState(null); + + const Comp = asChild ? Slot : 'div'; + + const { mobileOnlyClassName, desktopOnlyClassName } = useContext(ResponsiveContext); + + const selectedClassName = () => { + if (only === 'desktop') { + return desktopOnlyClassName; + } else if (only === 'mobile') { + return mobileOnlyClassName; + } else { + throw new Error(`잘못된 타입의 only값 : ${only}`); + } + }; + + useEffect(() => { + const mobileMedia = window.matchMedia(MOBILE_MEDIA_QUERY); + const handleCurrentChange = (e: MediaQueryListEvent) => { + setCurrent(e.matches ? 'mobile' : 'desktop'); + }; + mobileMedia.addEventListener('change', handleCurrentChange); + + return () => { + mobileMedia.removeEventListener('change', handleCurrentChange); + }; + }, []); + return current === null || only === current ? ( + {children} + ) : ( + <> + ); +}; + +export default Responsive; diff --git a/src/components/commons/Responsive/ResponsiveProvider.tsx b/src/components/commons/Responsive/ResponsiveProvider.tsx new file mode 100644 index 00000000..12729638 --- /dev/null +++ b/src/components/commons/Responsive/ResponsiveProvider.tsx @@ -0,0 +1,38 @@ +import { Global, css } from '@emotion/react'; +import { ReactNode } from 'react'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; +import { ResponsiveContext } from './context'; +interface ResponsiveProviderProps { + children: ReactNode; +} + +const ResponsiveProvider = ({ children }: ResponsiveProviderProps) => { + const mobileOnlyClassName = `responsive-mobile-only`; + const desktopOnlyClassName = `responsive-desktop-only`; + + const ResponsiveClassName = css` + .${mobileOnlyClassName} { + display: none !important; + } + .${desktopOnlyClassName} { + display: block !important; + } + + @media ${MOBILE_MEDIA_QUERY} { + .${mobileOnlyClassName} { + display: block !important; + } + .${desktopOnlyClassName} { + display: none !important; + } + } + `; + return ( + + + {children} + + ); +}; + +export default ResponsiveProvider; diff --git a/src/components/commons/Responsive/context.ts b/src/components/commons/Responsive/context.ts new file mode 100644 index 00000000..029abdff --- /dev/null +++ b/src/components/commons/Responsive/context.ts @@ -0,0 +1,15 @@ +import { createContext } from 'react'; + +interface ResponsiveContextValue { + mobileOnlyClassName: string; + desktopOnlyClassName: string; +} + +export const ResponsiveContext = createContext( + //ResponsiveProvider로 감싸져있지 않은 컴포넌트에서 값을 접근했을 때 또는 Context가 제대로 초기화되지 않았을 때 에러를 발생시켜 디버깅을 쉽게하기 위함 + new Proxy({} as ResponsiveContextValue, { + get() { + throw new Error('ResponsiveProvider가 필요합니다.'); + }, + }), +); diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx index 9c665513..94614480 100644 --- a/src/pages/main/Main.tsx +++ b/src/pages/main/Main.tsx @@ -1,8 +1,12 @@ import styled from '@emotion/styled'; import { useParams } from 'react-router-dom'; - +import Responsive from '../../components/commons/Responsive/Responsive'; +import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery'; +import { AuthorizationHeader, UnAuthorizationHeader } from './../../components/commons/Header'; +import Spacing from './../../components/commons/Spacing'; import DailyKeyword from './components/DailyKeyword'; import FaqDropdown from './components/FaqDropdown'; +import GroupCarousel from './components/GroupCarousel'; import Introduction from './components/Introduction'; import Manual from './components/Manual'; import OnBoarding from './components/OnBoarding'; @@ -10,10 +14,7 @@ import { SkeletonComponent } from './components/skeletons/SkeletonComponent'; import { FAQ_DATA } from './constants/faqData'; import { useGetGroupContent, useGetRecommendTopic } from './hooks/queries'; -import Footer from './../../components/commons/Footer'; -import { AuthorizationHeader, UnAuthorizationHeader } from './../../components/commons/Header'; -import Spacing from './../../components/commons/Spacing'; -import GroupCarousel from './components/GroupCarousel'; +import Footer from '../../components/commons/Footer'; const Main = () => { const { content, moimId } = useParams(); const topic = useGetRecommendTopic(content || ''); @@ -28,7 +29,9 @@ const Main = () => { - 마일과 함께하고 있는 글 모임이에요 + + 마일과 함께하고 있는 글 모임이에요 + {isLoading || isFetching ? ( ) : ( @@ -44,6 +47,7 @@ const Main = () => { + @@ -70,6 +74,10 @@ const MainPageWrapper = styled.div` width: 100%; background-color: ${({ theme }) => theme.colors.backGroundGray}; + + /* @media ${MOBILE_MEDIA_QUERY} { + max-width: 76rem; + } */ `; const GroupCarouselLayout = styled.section` @@ -82,6 +90,11 @@ const GroupCarouselLayout = styled.section` const CarouselContainer = styled.div` width: 93rem; height: 100%; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + max-width: 420px; + } `; const CarouselBox = styled.div` @@ -102,6 +115,8 @@ const FaqLayout = styled.section` `; const FaqContainer = styled.div` + padding: 0 2rem; + cursor: default; `; diff --git a/src/pages/main/components/CarouselContent.tsx b/src/pages/main/components/CarouselContent.tsx index addf9b34..ba9edad8 100644 --- a/src/pages/main/components/CarouselContent.tsx +++ b/src/pages/main/components/CarouselContent.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; - import { MainGroupRoutingBtn as MainGroupRoutingBtnIcon } from '../../../assets/svgs'; +import Responsive from '../../../components/commons/Responsive/Responsive'; import Spacing from '../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; import { replaceDefaultImg } from '../../../utils/replaceDefaultImg'; - export interface groupContentPropTypes { topicName: string; imageUrl: string | null; @@ -42,20 +42,36 @@ const CarouselContent = ({ {topicName} {postTitle} + {/* + + */} {postContent} + + {isContainPhoto && ( + {`썸네일 + )} + - {isContainPhoto && ( - {`썸네일 - )} + + {isContainPhoto && ( + {`썸네일 + )} + {isLast && ( @@ -83,30 +99,53 @@ const CarouselWrapper = styled.section` const CarouselContentLayout = styled.div` display: flex; - padding: 3.6rem; gap: 3.6rem; height: 24rem; + padding: 3.6rem; background-color: ${({ theme }) => theme.colors.white}; border-radius: 8px; + + @media ${MOBILE_MEDIA_QUERY} { + height: 29rem; + padding: 1.8rem; + } `; const Topic = styled.h1` color: ${({ theme }) => theme.colors.gray70}; ${({ theme }) => theme.fonts.body6}; + + @media ${MOBILE_MEDIA_QUERY} { + /* mSubtitle 1 */ + font-weight: 400; + font-size: 12px; + font-style: normal; + line-height: 120%; /* 14.4px */ + } `; const Title = styled.h2` ${({ theme }) => theme.fonts.title10}; line-height: 120%; + + @media ${MOBILE_MEDIA_QUERY} { + /* mTitle 1 */ + font-weight: 700; + font-size: 17px; + font-style: normal; + line-height: 130%; + } `; const ContentContainer = styled.div` display: flex; flex-direction: column; + height: 29rem; `; const SubText = styled.span<{ isContainPhoto: boolean; isLast: boolean }>` + display: -webkit-box; width: ${({ isContainPhoto, isLast }) => isContainPhoto && isLast ? '47.8rem' @@ -116,15 +155,25 @@ const SubText = styled.span<{ isContainPhoto: boolean; isLast: boolean }>` ? '68.2rem' : '85.8rem'}; height: 8.5rem; + margin-top: 3.1rem; overflow: hidden; color: ${({ theme }) => theme.colors.gray80}; + text-align: left; text-overflow: ellipsis; + word-wrap: break-word; -webkit-line-clamp: 4; -webkit-box-orient: vertical; ${({ theme }) => theme.fonts.body3}; + @media ${MOBILE_MEDIA_QUERY} { + width: 40rem; + height: ${({ isContainPhoto }) => (isContainPhoto ? 6.4 : 19.8)}rem; + margin-top: 1rem; + -webkit-line-clamp: ${({ isContainPhoto }) => (isContainPhoto ? 3 : 9)}; + margin-bottom: 1.4rem; + } `; const Image = styled.img<{ isLast: boolean }>` @@ -133,6 +182,11 @@ const Image = styled.img<{ isLast: boolean }>` object-fit: cover; border-radius: 8px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 22.4rem; + height: 11.2rem; + } `; const LastSlideBtnLayout = styled.div` diff --git a/src/pages/main/components/DailyKeyword.tsx b/src/pages/main/components/DailyKeyword.tsx index f560ca24..56786692 100644 --- a/src/pages/main/components/DailyKeyword.tsx +++ b/src/pages/main/components/DailyKeyword.tsx @@ -1,39 +1,77 @@ import styled from '@emotion/styled'; - +import Responsive from '../../../components/commons/Responsive/Responsive'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; interface recommendPropsTypes { content: string | undefined; } const DailyKeyword = ({ content }: recommendPropsTypes) => { return ( - - - - - 오늘의 글감 - - {content} - - - - + <> + + + + + + 오늘의 글감 + + {content} + + + + + + 오늘의 글감 + {content} + + + + + ); }; export default DailyKeyword; +const MobileKeyWordText = styled.p` + color: ${({ theme }) => theme.colors.black}; + font-weight: 600; + font-size: 18px; + + /* mTitle 2 */ + font-family: Pretendard, sans-serif; + font-style: normal; + line-height: 160%; /* 28.8px */ +`; + +const MobileKeyWordHeader = styled.header` + color: ${({ theme }) => theme.colors.mainViolet}; + font-weight: 500; + font-size: 14px; + + /* mSubtitle 2 */ + font-family: Pretendard, sans-serif; + font-style: normal; + line-height: 140%; /* 19.6px */ +`; const KeyWordWrapper = styled.div` display: flex; align-items: center; justify-content: center; width: 100%; + padding: 0 2rem; `; const KeyWordLayout = styled.div` display: flex; flex-direction: column; justify-content: center; - width: 93rem; + width: 100%; + max-width: 93rem; height: 8.4rem; + + @media ${MOBILE_MEDIA_QUERY} { + max-width: 81rem; + } `; const KeywordHeaderContainer = styled.section` @@ -43,7 +81,12 @@ const KeywordHeaderContainer = styled.section` background-color: ${({ theme }) => theme.colors.mileViolet}; border-radius: 1rem; + ${({ theme }) => theme.fonts.title11}; + @media ${MOBILE_MEDIA_QUERY} { + gap: 0.8rem; + padding: 1.6rem 3.3rem; + } `; const KeywordContentBox = styled.div` diff --git a/src/pages/main/components/FaqDropdown.tsx b/src/pages/main/components/FaqDropdown.tsx index 9960b6b4..1611bfe7 100644 --- a/src/pages/main/components/FaqDropdown.tsx +++ b/src/pages/main/components/FaqDropdown.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import React, { useState } from 'react'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; import { MainToggleArrowOpenedIc, MainTogglearrowClosedIc } from './../../../assets/svgs'; import { faqDataPropTypes } from './../constants/faqData'; @@ -15,16 +16,18 @@ const FaqDropdown = ({ id, question, answer }: faqDataPropTypes) => { return ( - - - + + + Q. {question} + + {dropDownOpened ? : } - - {dropDownOpened && {answer}} - - + + + {dropDownOpened && {answer}} + ); @@ -32,6 +35,19 @@ const FaqDropdown = ({ id, question, answer }: faqDataPropTypes) => { export default FaqDropdown; +const ToggleWrapper = styled.div` + display: flex; + align-items: center; + justify-content: cneter; + width: 1.4rem; + height: 1.4rem; +`; + +const TextWrapper = styled.div` + display: flex; + gap: 0.8rem; + align-items: center; +`; const FaqWrapper = styled.section` display: flex; flex-direction: column; @@ -42,39 +58,70 @@ const FaqWrapper = styled.section` const DropdownLayout = styled.section` width: fit-content; + width: 87.4rem; padding: 2.4rem 2.8rem; background-color: ${({ theme }) => theme.colors.white}; cursor: pointer; border-radius: 8px; -`; -const FaqContainer = styled.div` - width: 87.4rem; + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + min-width: 33.5rem; + max-width: 81rem; + } `; +// const FaqContainer = styled.div` + +// `; + const QuestionAnswerBox = styled.div` display: flex; flex-direction: column; `; const Question = styled.div` + /* position: relative; */ display: flex; gap: 0.8rem; align-items: center; + justify-content: space-between; & > svg { - margin-left: auto; + /* position: absolute; + right: 0; */ } `; const QuestionMarkText = styled.p` color: ${({ theme }) => theme.colors.mainViolet}; ${({ theme }) => theme.fonts.title5}; + + @media ${MOBILE_MEDIA_QUERY} { + font-weight: 400; + font-size: 14px; + + /* mBody 2 */ + + font-style: normal; + line-height: 140%; /* 19.6px */ + } `; const QuestionText = styled.p` ${({ theme }) => theme.fonts.title5}; + + @media ${MOBILE_MEDIA_QUERY} { + width: 85%; + + font-weight: 600; + font-size: 16px; + + /* mTitle 6 */ + + font-style: normal; + } `; const AnswerTextBox = styled.div` diff --git a/src/pages/main/components/GroupCarousel.tsx b/src/pages/main/components/GroupCarousel.tsx index 679fd43c..d10506db 100644 --- a/src/pages/main/components/GroupCarousel.tsx +++ b/src/pages/main/components/GroupCarousel.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import Slider from 'react-slick'; - +import Responsive from '../../../components/commons/Responsive/Responsive'; import '../styles/slick-theme.css'; import '../styles/slick.css'; @@ -15,6 +15,7 @@ import { MainIcnArrowPurple as MainIcnArrowPurpleIcon, } from '../../../assets/svgs'; import Spacing from '../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; export interface carouselItemPropTypes { moimId?: string; @@ -55,21 +56,41 @@ const GroupCarousel = ({ data }: carouselItemPropTypes) => { - - {moim.moimPosts.map((post, index) => ( - - ))} - + + + {moim.moimPosts.map((post, index) => ( + + ))} + + + + + + {moim.moimPosts.map((post, index) => ( + + ))} + + ))} @@ -82,6 +103,10 @@ export default GroupCarousel; const CarouselWrapper = styled.div` flex-direction: column; height: 29.4rem; + + @media ${MOBILE_MEDIA_QUERY} { + height: 34.4rem; + } `; const GroupButton = styled.button` @@ -118,4 +143,15 @@ const CarouselContainer = styled(Slider)` .slick-slide.slick-active:last-child { width: 75.4rem !important; } + + @media ${MOBILE_MEDIA_QUERY} { + /* width: 45rem; */ + + width: 100%; + max-width: 65rem; + + .slick-slide.slick-active:last-child { + width: 42rem !important; + } + } `; diff --git a/src/pages/main/components/Introduction.tsx b/src/pages/main/components/Introduction.tsx index c5355aec..b52f0098 100644 --- a/src/pages/main/components/Introduction.tsx +++ b/src/pages/main/components/Introduction.tsx @@ -1,15 +1,15 @@ import styled from '@emotion/styled'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; - -import { INTRODUCTION_DATA } from '../constants/introductionData'; - import { MainIcnArrowWhite as MainArrowWhiteIc, MainGraphicLogo as MainGraphicLogoIc, MainIcnArrowPurple as MainIcnArrowPurpleIcon, } from '../../../assets/svgs'; +import Responsive from '../../../components/commons/Responsive/Responsive'; import Spacing from '../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; +import { INTRODUCTION_DATA } from '../constants/introductionData'; const Introduction = () => { const navigate = useNavigate(); @@ -29,16 +29,19 @@ const Introduction = () => { {INTRODUCTION_DATA[0].subText} - - setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - > - 마일 글 모임 바로가기 - {IsHovered ? : } - + + + + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + 마일 글 모임 바로가기 + {IsHovered ? : } + + {INTRODUCTION_DATA[0].hookText} @@ -47,12 +50,32 @@ const Introduction = () => { {INTRODUCTION_DATA[0].discriptionText} + + + + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + 마일 글 모임 바로가기 + {IsHovered ? : } + + + ); }; export default Introduction; +const ButtonWrapper = styled.div` + display: flex; + justify-content: center; + width: 100%; + max-width: 40rem; +`; const IntroductionWrapper = styled.section` display: flex; gap: 10.2rem; @@ -62,6 +85,12 @@ const IntroductionWrapper = styled.section` padding: 10rem 21.8rem 10rem 28.4rem; background-color: ${({ theme }) => theme.colors.backGroundViolet}; + + @media ${MOBILE_MEDIA_QUERY} { + flex-direction: column; + gap: 3rem; + padding: 4.6rem 2rem; + } `; const MileMakersTextLayout = styled.div` diff --git a/src/pages/main/components/Manual.tsx b/src/pages/main/components/Manual.tsx index eb7f9ec2..16ce930d 100644 --- a/src/pages/main/components/Manual.tsx +++ b/src/pages/main/components/Manual.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import Spacing from '../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; import { MAIN_MANUAL_IMG_URL, MAIN_MANUAL_WEBP_URL } from '../constants/mainManualImgURL'; const Manual = () => { @@ -42,9 +43,19 @@ const ManualLayout = styled.section` grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 92.8rem; + + @media ${MOBILE_MEDIA_QUERY} { + grid-template-columns: repeat(2, 1fr); + width: 100%; + } `; const ManualImg = styled.img` width: 29.6rem; height: 37.2rem; + + @media ${MOBILE_MEDIA_QUERY} { + width: 16.2rem; + height: 20rem; + } `; diff --git a/src/pages/main/components/OnBoarding.tsx b/src/pages/main/components/OnBoarding.tsx index 21e63f82..ecfe2839 100644 --- a/src/pages/main/components/OnBoarding.tsx +++ b/src/pages/main/components/OnBoarding.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import Spacing from '../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery'; import mainOnBoardingImg from '/src/assets/images/mainOnBoarding.png'; import mainOnBoardingWebp from '/src/assets/webps/mainonboarding.webp'; const OnBoarding = () => { @@ -37,6 +38,11 @@ const OnBoardingWrapper = styled.section` padding: 6.8rem 21.8rem 4.8rem; background-color: ${({ theme }) => theme.colors.white}; + + @media ${MOBILE_MEDIA_QUERY} { + max-width: 82rem; + padding: 3.5rem 2rem 2.7rem; + } `; const OnBoardingIcWithTextLayout = styled.div` @@ -55,14 +61,32 @@ const MainText = styled.p` justify-content: flex-start; width: fit-content; ${({ theme }) => theme.fonts.title12}; + + @media ${MOBILE_MEDIA_QUERY} { + ${({ theme }) => theme.fonts.title13}; + } `; const SubText = styled.p` color: ${({ theme }) => theme.colors.gray70}; ${({ theme }) => theme.fonts.subtitle7}; + + @media ${MOBILE_MEDIA_QUERY} { + font-weight: 500; + font-size: 13px; + font-style: normal; + line-height: 120%; /* 15.6px */ + } `; const MainOnboardingImg = styled.img` width: 93rem; height: 35.7rem; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + max-width: 80rem; + height: 3%; + object-fit: cover; + } `; diff --git a/src/pages/main/components/skeletons/CarouselSkeleton.tsx b/src/pages/main/components/skeletons/CarouselSkeleton.tsx index 39decadb..c2d68848 100644 --- a/src/pages/main/components/skeletons/CarouselSkeleton.tsx +++ b/src/pages/main/components/skeletons/CarouselSkeleton.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import Skeleton from './Skeleton'; import Spacing from '../../../../components/commons/Spacing'; +import { MOBILE_MEDIA_QUERY } from '../../../../styles/mediaQuery'; const CarouselSkeleton = () => { return ( @@ -43,6 +44,11 @@ const CarouselBox = styled.section` background-color: ${({ theme }) => theme.colors.grayViolet}; border-radius: 8px; + + @media ${MOBILE_MEDIA_QUERY} { + width: 100%; + max-width: 83rem; + } `; const TextContainer = styled.div` diff --git a/src/pages/main/styles/slick-theme.css b/src/pages/main/styles/slick-theme.css index 0ffb5cfe..38d2f1ec 100644 --- a/src/pages/main/styles/slick-theme.css +++ b/src/pages/main/styles/slick-theme.css @@ -21,6 +21,10 @@ border: none; outline: none; background: transparent; + + @media screen and (max-width: 850px) { + display: none !important; + } } .slick-prev:hover, .slick-prev:focus, diff --git a/src/pages/main/styles/slick.css b/src/pages/main/styles/slick.css index 9f8ed6f6..dc941e2c 100644 --- a/src/pages/main/styles/slick.css +++ b/src/pages/main/styles/slick.css @@ -25,6 +25,10 @@ margin: 0; padding: 0; + @media screen and (max-width: 850px) { + width: 100%; + max-width: 45rem; + } } .slick-list:focus { outline: none; @@ -75,6 +79,10 @@ .slick-slide { width: 45.4rem; height: 24rem; + + @media screen and (max-width: 850px) { + height: 29rem; + } } [dir='rtl'] .slick-slide { float: right; diff --git a/src/styles/mediaQuery.ts b/src/styles/mediaQuery.ts new file mode 100644 index 00000000..14a35116 --- /dev/null +++ b/src/styles/mediaQuery.ts @@ -0,0 +1,4 @@ +export const MOBILE_MAX_WIDTH = 850; + +export const MOBILE_MEDIA_QUERY = `screen and (max-width: ${MOBILE_MAX_WIDTH}px)`; +export const MOBILE_CONTENTS_MAX_WIDTH = 335; diff --git a/yarn.lock b/yarn.lock index 03a1deb4..df5697f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -682,6 +682,18 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== +"@radix-ui/react-compose-refs@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74" + integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== + +"@radix-ui/react-slot@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" + integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@remirror/core-constants@^2.0.2": version "2.0.2" resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.2.tgz#f05eccdc69e3a65e7d524b52548f567904a11a1a" @@ -1511,6 +1523,11 @@ astral-regex@^2.0.0: resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== +async@^3.2.3: + version "3.2.6" + resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce" + integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA== + asynciterator.prototype@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62" @@ -1600,6 +1617,11 @@ browserslist@^4.22.2: node-releases "^2.0.14" update-browserslist-db "^1.0.13" +btoa@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73" + integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g== + call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.4, call-bind@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513" @@ -1638,7 +1660,7 @@ chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chalk@^4.0.0, chalk@^4.1.2: +chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -1661,6 +1683,15 @@ cli-width@^4.1.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5" integrity sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ== +cliui@^7.0.2: + version "7.0.4" + resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f" + integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ== + dependencies: + string-width "^4.2.0" + strip-ansi "^6.0.0" + wrap-ansi "^7.0.0" + cliui@^8.0.1: version "8.0.1" resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa" @@ -1716,7 +1747,7 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== -convert-source-map@^1.5.0: +convert-source-map@^1.5.0, convert-source-map@^1.7.0: version "1.9.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== @@ -1907,11 +1938,23 @@ dot-case@^3.0.4: no-case "^3.0.4" tslib "^2.0.3" +duplexer@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" + integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== + eastasianwidth@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb" integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== +ejs@^3.1.5: + version "3.1.10" + resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b" + integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA== + dependencies: + jake "^10.8.5" + electron-to-chromium@^1.4.601: version "1.4.630" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.630.tgz#1d9f4169653784997bec98975e11a2c05214ce39" @@ -2078,6 +2121,11 @@ escalade@^3.1.1: resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== +escape-html@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" + integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow== + escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -2368,6 +2416,13 @@ file-entry-cache@^8.0.0: dependencies: flat-cache "^4.0.0" +filelist@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5" + integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q== + dependencies: + minimatch "^5.0.1" + fill-range@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" @@ -2523,7 +2578,7 @@ glob@^10.3.7: minipass "^5.0.0 || ^6.0.2 || ^7.0.0" path-scurry "^1.10.1" -glob@^7.1.3: +glob@^7.1.3, glob@^7.1.6: version "7.2.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -2604,6 +2659,13 @@ graphql@^16.8.1: resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07" integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw== +gzip-size@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462" + integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q== + dependencies: + duplexer "^0.1.2" + has-bigints@^1.0.1, has-bigints@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa" @@ -2930,7 +2992,7 @@ is-weakset@^2.0.1: call-bind "^1.0.2" get-intrinsic "^1.1.1" -is-wsl@^2.2.0: +is-wsl@^2.1.1, is-wsl@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271" integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww== @@ -2972,6 +3034,16 @@ jackspeak@^2.3.5: optionalDependencies: "@pkgjs/parseargs" "^0.11.0" +jake@^10.8.5: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jake/-/jake-10.9.2.tgz#6ae487e6a69afec3a5e167628996b59f35ae2b7f" + integrity sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA== + dependencies: + async "^3.2.3" + chalk "^4.0.2" + filelist "^1.0.4" + minimatch "^3.1.2" + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -3114,7 +3186,7 @@ lodash.truncate@^4.4.2: resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw== -lodash@^4.17.4: +lodash@^4.17.20, lodash@^4.17.4: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -3126,14 +3198,7 @@ loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" -lottie-react@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd" - integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w== - dependencies: - lottie-web "^5.10.2" - -lottie-web@^5.10.2: +lottie-web@^5.12.2: version "5.12.2" resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5" integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg== @@ -3240,6 +3305,13 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2: dependencies: brace-expansion "^1.1.7" +minimatch@^5.0.1: + version "5.1.6" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96" + integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g== + dependencies: + brace-expansion "^2.0.1" + minimist@^1.2.0, minimist@^1.2.6: version "1.2.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c" @@ -3250,6 +3322,13 @@ minimist@^1.2.0, minimist@^1.2.6: resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c" integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ== +mkdirp@^0.5.1: + version "0.5.6" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6" + integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw== + dependencies: + minimist "^1.2.6" + ms@2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" @@ -3415,6 +3494,14 @@ once@^1.3.0: dependencies: wrappy "1" +open@^7.3.1: + version "7.4.2" + resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321" + integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q== + dependencies: + is-docker "^2.0.0" + is-wsl "^2.1.1" + open@^8.4.0: version "8.4.2" resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9" @@ -3948,6 +4035,13 @@ rimraf@^5.0.5: dependencies: glob "^10.3.7" +rimraf@~2.6.2: + version "2.6.3" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab" + integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== + dependencies: + glob "^7.1.3" + rollup-plugin-visualizer@^5.12.0: version "5.12.0" resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz#661542191ce78ee4f378995297260d0c1efb1302" @@ -4107,6 +4201,24 @@ snake-case@^3.0.4: dot-case "^3.0.4" tslib "^2.0.3" +source-map-explorer@^2.5.3: + version "2.5.3" + resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-2.5.3.tgz#33551b51e33b70f56d15e79083cdd4c43e583b69" + integrity sha512-qfUGs7UHsOBE5p/lGfQdaAj/5U/GWYBw2imEpD6UQNkqElYonkow8t+HBL1qqIl3CuGZx7n8/CQo4x1HwSHhsg== + dependencies: + btoa "^1.2.1" + chalk "^4.1.0" + convert-source-map "^1.7.0" + ejs "^3.1.5" + escape-html "^1.0.3" + glob "^7.1.6" + gzip-size "^6.0.0" + lodash "^4.17.20" + open "^7.3.1" + source-map "^0.7.4" + temp "^0.9.4" + yargs "^16.2.0" + source-map-js@^1.0.1, source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" @@ -4346,6 +4458,14 @@ table@^6.8.1: string-width "^4.2.3" strip-ansi "^6.0.1" +temp@^0.9.4: + version "0.9.4" + resolved "https://registry.yarnpkg.com/temp/-/temp-0.9.4.tgz#cd20a8580cb63635d0e4e9d4bd989d44286e7620" + integrity sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA== + dependencies: + mkdirp "^0.5.1" + rimraf "~2.6.2" + text-table@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" @@ -4655,11 +4775,29 @@ yaml@^1.10.0: resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== +yargs-parser@^20.2.2: + version "20.2.9" + resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" + integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== + yargs-parser@^21.1.1: version "21.1.1" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35" integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw== +yargs@^16.2.0: + version "16.2.0" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66" + integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw== + dependencies: + cliui "^7.0.2" + escalade "^3.1.1" + get-caller-file "^2.0.5" + require-directory "^2.1.1" + string-width "^4.2.0" + y18n "^5.0.5" + yargs-parser "^20.2.2" + yargs@^17.5.1, yargs@^17.7.2: version "17.7.2" resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"