From 17f2cc808b6664228bc95e6a13b00c01c5a54025 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 3 Mar 2024 01:44:43 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B5=9C=ED=95=98=EB=8B=A8=20=EB=A9=94=EC=8B=9C?= =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/components/RecruitMessage/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/views/MainPage/components/RecruitMessage/index.tsx b/src/views/MainPage/components/RecruitMessage/index.tsx index b21ce99d..2966b812 100644 --- a/src/views/MainPage/components/RecruitMessage/index.tsx +++ b/src/views/MainPage/components/RecruitMessage/index.tsx @@ -1,5 +1,6 @@ import { useIsMobile } from '@src/hooks/useDevice'; import * as S from './style'; +import RecruitButton from '../Banner/RecruitButton'; export default function RecruitMessage() { const isMobileSize = useIsMobile('768px'); @@ -7,10 +8,7 @@ export default function RecruitMessage() { return ( SOPT의 34번째 {isMobileSize &&
} 열정이 되어주세요! - - 아직 모집기간이 아니에요. {isMobileSize &&
} 알림 신청을 하시면, 봄에 찾아갈게요! - - 모집시 알림 받기 + 34기 YB 지원하기 > ); } From 35b943567a4cfd86dbc7dffa9cee9063afe65070 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 3 Mar 2024 02:20:16 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=EC=86=8C=EA=B0=9C=ED=83=AD=20?= =?UTF-8?q?=ED=95=B5=EC=8B=AC=EA=B0=80=EC=B9=98=20=EC=9C=A0=EB=8C=80=20?= =?UTF-8?q?=EC=A4=84=EB=B0=94=EA=BF=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CoreValue/Item/style.ts | 23 ++++++------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/src/views/AboutPage/components/CoreValue/Item/style.ts b/src/views/AboutPage/components/CoreValue/Item/style.ts index b5a59870..8e4b60ed 100644 --- a/src/views/AboutPage/components/CoreValue/Item/style.ts +++ b/src/views/AboutPage/components/CoreValue/Item/style.ts @@ -7,15 +7,13 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order: color: white; position: relative; - max-width: 380px; - width: calc(230px + 7.8vw); - max-height: 323px; - height: calc(196px + 6.6vw); + width: 380px; + height: 323px; padding: min(35.98px, 5vw) 0 min(80.5px, 4.19vw) 0; border-radius: 10px; background: center bottom 0px no-repeat #181818 url(${({ src }) => src}); - background-size: min(170px + 7vw) min(170px + 7vw); + background-size: calc(170px + 7vw); opacity: 0; @@ -30,16 +28,14 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order: /* 태블릿 뷰 */ @media (max-width: 768px) { - width: 380px; - height: 323px; background-size: 90%; background-position: center bottom -20px; } /* 모바일 뷰 */ @media (max-width: 428px) { - width: 268.769px; - height: 228.454px; + width: 269px; + height: 228px; background-position: center bottom -20px; } `; @@ -142,7 +138,7 @@ export const ValueDescription = styled.div<{ isHovered: boolean }>` white-space: pre-line; word-break: keep-all; - width: 237.081px; + width: 237px; height: 117px; display: flex; @@ -153,7 +149,7 @@ export const ValueDescription = styled.div<{ isHovered: boolean }>` color: #fff; text-align: center; font-family: SUIT; - font-size: min(23px, calc(17px + 0.26vw)); + font-size: 23px; font-style: normal; font-weight: 500; @@ -163,11 +159,6 @@ export const ValueDescription = styled.div<{ isHovered: boolean }>` opacity: 0; ${({ isHovered }) => isHovered && 'opacity: 1'}; - /* 태블릿 뷰 */ - @media (max-width: 768px) { - font-size: 23px; - line-height: 39px; - } /* 모바일 뷰 */ @media (max-width: 428px) { From 2e95bc6d8246759113c9f9980702e4a367486467 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 3 Mar 2024 02:33:34 +0900 Subject: [PATCH 3/6] =?UTF-8?q?design:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A7=80=EC=9B=90=ED=95=98=EA=B8=B0=20CTA?= =?UTF-8?q?=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=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 --- .../components/Banner/RecruitButton/style.ts | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/src/views/MainPage/components/Banner/RecruitButton/style.ts b/src/views/MainPage/components/Banner/RecruitButton/style.ts index 22ef1498..90acefce 100644 --- a/src/views/MainPage/components/Banner/RecruitButton/style.ts +++ b/src/views/MainPage/components/Banner/RecruitButton/style.ts @@ -9,14 +9,7 @@ export const RecruitButtonWrapper = styled(Link)` justify-content: center; align-items: center; border-radius: 99px; - background: radial-gradient( - 9.16% 35.18% at 50% 50%, - rgba(112, 149, 185, 0) 0%, - rgba(184, 200, 216, 0) 100% - ), - linear-gradient(274deg, #BDEC00 10.57%, #F0FFB6 100%); - - background-size: 200% 200%; + background: linear-gradient(274deg, #BDEC00 10%, #F0FFB6 100%); animation: ${BackgroundMove} 3s linear 0s infinite alternate; color: ${colors.gray800}; text-align: center; @@ -33,6 +26,10 @@ export const RecruitButtonWrapper = styled(Link)` line-height: 28px; /* 155.556% */ letter-spacing: -0.36px; } + + &:hover { + background: #F0FFAA; + } `; export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>` @@ -48,7 +45,7 @@ export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>` justify-content: center; /* 모바일 뷰 */ - @media (max-width: 375px) { + @media (max-width: 428px) { padding: 15px 18px; height: 44px; } @@ -61,18 +58,13 @@ export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>` right: 0; bottom: 0; background-image: radial-gradient( - circle 36px at ${(props) => props.x}px ${(props) => props.y}px, - #3e5e7d90, - transparent - ), - radial-gradient( - circle 80px at ${(props) => props.x}px ${(props) => props.y}px, - #3e5e7d50, + circle 110px at ${(props) => props.x}px ${(props) => props.y}px, + #BDEC00, transparent ), radial-gradient( - circle 108px at ${(props) => props.x}px ${(props) => props.y}px, - #3e5e7d50, + circle 180px at ${(props) => props.x}px ${(props) => props.y}px, + #FDFFAA, transparent ); opacity: 0; From 370dd09b346ce061a026130dc38123f6733a79ea Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 3 Mar 2024 02:51:51 +0900 Subject: [PATCH 4/6] =?UTF-8?q?design:=20=EB=A6=AC=ED=81=AC=EB=A3=A8?= =?UTF-8?q?=ED=8C=85=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EC=A7=91?= =?UTF-8?q?=EC=9D=BC=EC=A0=95=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecruitPage/components/Schedule/index.tsx | 130 ++---------------- .../RecruitPage/components/Schedule/style.ts | 105 ++++++++++++++ 2 files changed, 120 insertions(+), 115 deletions(-) create mode 100644 src/views/RecruitPage/components/Schedule/style.ts diff --git a/src/views/RecruitPage/components/Schedule/index.tsx b/src/views/RecruitPage/components/Schedule/index.tsx index f69e5232..3c22cfcc 100644 --- a/src/views/RecruitPage/components/Schedule/index.tsx +++ b/src/views/RecruitPage/components/Schedule/index.tsx @@ -1,127 +1,27 @@ -import styled from '@emotion/styled'; import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles'; +import * as S from './style'; const Schedule = () => { return ( - + Schedule 모집 일정 - - YB 서류 접수 - - 3월 3일 10시 - 3월 8일 18시 - - YB 면접 - 3월 16일 - 3월 17일 - YB 최종 결과 발표 - 3월 20일 - 오리엔테이션 - 3월 23일 - - + + YB 서류 접수 + + 3월 3일 10시 - 3월 8일 18시 + + YB 면접 + 3월 16일 - 3월 17일 + YB 최종 결과 발표 + 3월 20일 + 오리엔테이션 + 3월 23일 + + ); }; -const Wrapper = styled.div` - display: flex; - flex-direction: column; - gap: 28px; - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - gap: 40px; - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - gap: 8px; - } -`; - -const GridWrapper = styled.div` - display: grid; - justify-content: center; - grid-template-columns: 240px 300px; - row-gap: 25px; - column-gap: 220px; - border-radius: 30px; - background-color: #181818; - padding: 85px 88px; - - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - grid-template-columns: 300px auto; - padding: 38px 54px; - gap: 15px; - border-radius: 20px; - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - grid-template-columns: 92px auto; - padding: 18px 26px; - row-gap: 7px; - column-gap: 40px; - border-radius: 12px; - } -`; - -const OddText = styled.div` - color: #fff; - font-size: 24px; - font-weight: 700; - line-height: 150%; /* 42px */ - &::before { - content: '🗓 '; - } - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - color: #fff; - font-size: 18px; - font-weight: 700; - line-height: 30px; /* 166.667% */ - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - color: #fff; - font-size: 8.957px; - font-weight: 700; - line-height: 14.929px; /* 166.667% */ - } -`; - -const Highlight = styled.span` - color: #BDEC00; - font-size: 24px; - font-weight: 400; - letter-spacing: -0.48px; - text-decoration-line: underline; - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - font-size: 18px; - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - font-size: 8.957px; - } -`; - -const EvenText = styled.div` - color: #fff; - font-size: 24px; - font-weight: 400; - line-height: 150%; /* 42px */ - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - font-size: 18px; - font-weight: 300; - line-height: 30px; /* 166.667% */ - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - font-size: 8.957px; - font-weight: 300; - line-height: 14.929px; /* 166.667% */ - } -`; - export default Schedule; diff --git a/src/views/RecruitPage/components/Schedule/style.ts b/src/views/RecruitPage/components/Schedule/style.ts new file mode 100644 index 00000000..4abe14b0 --- /dev/null +++ b/src/views/RecruitPage/components/Schedule/style.ts @@ -0,0 +1,105 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 28px; + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + gap: 40px; + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + gap: 8px; + } +`; + +export const GridWrapper = styled.div` + display: grid; + justify-content: center; + grid-template-columns: 240px 300px; + row-gap: 25px; + column-gap: 220px; + border-radius: 30px; + background-color: #181818; + padding: 85px 88px; + + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + grid-template-columns: 300px auto; + padding: 38px 54px; + gap: 15px; + border-radius: 20px; + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + grid-template-columns: 1fr; + row-gap: 0px; + padding: 38px 0 6px 0; + border-radius: 12px; + text-align: center; + } +`; + +export const OddText = styled.div` + color: #fff; + font-size: 24px; + font-weight: 700; + line-height: 150%; /* 42px */ + &::before { + content: '🗓 '; + } + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + color: #fff; + font-size: 18px; + font-weight: 700; + line-height: 30px; /* 166.667% */ + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + color: #fff; + font-size: 16px; + font-weight: 700; + line-height: 32px; + } +`; + +export const Highlight = styled.span` + color: #BDEC00; + font-size: 24px; + font-weight: 400; + letter-spacing: -0.48px; + text-decoration-line: underline; + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + font-size: 18px; + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + font-size: 16px; + line-height: 32px; + } +`; + +export const EvenText = styled.div` + color: #fff; + font-size: 24px; + font-weight: 400; + line-height: 150%; /* 42px */ + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + font-size: 18px; + font-weight: 300; + line-height: 30px; /* 166.667% */ + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + font-size: 16px; + font-style: normal; + font-weight: 300; + line-height: 32px; + + margin-bottom: 32px + } +`; From 0b2aab0aca3be4ef67f02804542a45c048dbf0c5 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 3 Mar 2024 03:39:12 +0900 Subject: [PATCH 5/6] =?UTF-8?q?design:=20=EB=A6=AC=ED=81=AC=EB=A3=A8?= =?UTF-8?q?=ED=8C=85=ED=8E=98=EC=9D=B4=EC=A7=80=20ChapterInfo=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ChapterInfo/index.tsx | 134 ++-------------- .../components/ChapterInfo/style.ts | 147 ++++++++++++++++++ .../components/common/Tabs/style.ts | 20 ++- 3 files changed, 173 insertions(+), 128 deletions(-) create mode 100644 src/views/RecruitPage/components/ChapterInfo/style.ts diff --git a/src/views/RecruitPage/components/ChapterInfo/index.tsx b/src/views/RecruitPage/components/ChapterInfo/index.tsx index 31ae39c8..adad5e7a 100644 --- a/src/views/RecruitPage/components/ChapterInfo/index.tsx +++ b/src/views/RecruitPage/components/ChapterInfo/index.tsx @@ -1,4 +1,3 @@ -import styled from '@emotion/styled'; import { useState } from 'react'; import Flex from '@src/components/common/Flex'; import { Part } from '@src/lib/types/universal'; @@ -6,15 +5,19 @@ import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean'; import TabBar from '../common/Tabs'; import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles'; import { infoMap } from './constants'; +import * as S from './style'; const ChapterInfo = () => { const [selectedTab, setSelectedTab] = useState(Part.PLAN); return ( - + Positions - {'SOPT 34기는 총 6개의 파트로 이루어져 있어요.'} + + SOPT 34기는 + 총 6개의 파트로 이루어져 있어요. + { amplitudeTrackingName={'click_recruit_description_part'} /> - {parsePartToKorean(selectedTab)} 파트는 이런 걸 배워요 - {infoMap[selectedTab].info} + {parsePartToKorean(selectedTab)} 파트는 이런 걸 배워요 + {infoMap[selectedTab].info} - 이런 분이면 좋아요! - + 이런 분이면 좋아요! + {infoMap[selectedTab].fit.map((fit, idx) => (
{fit}
))} - + - + ); }; -const BaseChip = styled.div` - line-height: 42px; - font-size: 22px; - - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - font-size: 18px; - } - - @media (max-width: 765.9px) { - line-height: 18px; - font-size: 12px; - } -`; - -const BlueChip = styled(BaseChip)` - color: #fff; - &:before { - content: '✏️'; - padding: 0px 10px; - } -`; - -const GreenChip = styled(BaseChip)` - color: #BDEC00; - &:before { - content: '👍'; - padding: 0px 10px; - } -`; - -const Wrapper = styled.div` - display: flex; - flex-direction: column; - gap: 70px; - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - gap: 40px; - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - gap: 24px; - } -`; - -const BaseText = styled.div` - color: #fff; - font-size: 24px; - font-style: normal; - font-weight: 400; - line-height: 40px; /* 142.857% */ - letter-spacing: -0.28px; - white-space: pre-line; - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 150%; /* 27px */ - letter-spacing: -0.18px; - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 150%; /* 27px */ - letter-spacing: -0.18px; - } -`; - -const InfoWrapper = styled(BaseText)` - border-radius: 30px; - background: #222220; - padding: 48px 80px; - - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - padding: 24px 40px; - border-radius: 24px; - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - padding: 18px 30px; - border-radius: 20px; - } -`; - -const FitWrapper = styled(BaseText)` - border-radius: 30px; - background: #21270F; - padding: 60px 80px; - display: flex; - flex-direction: column; - line-height: 40px; - gap: 12px; - & div::before { - content: '-'; - padding-right: 10px; - } - /* 태블릿 뷰 */ - @media (max-width: 1299px) and (min-width: 766px) { - padding: 30px 40px; - border-radius: 24px; - } - /* 모바일 뷰 */ - @media (max-width: 765.9px) { - padding: 21px 28px; - gap: 8px; - border-radius: 20px; - } -`; - export default ChapterInfo; diff --git a/src/views/RecruitPage/components/ChapterInfo/style.ts b/src/views/RecruitPage/components/ChapterInfo/style.ts new file mode 100644 index 00000000..4ae7fc46 --- /dev/null +++ b/src/views/RecruitPage/components/ChapterInfo/style.ts @@ -0,0 +1,147 @@ +import styled from '@emotion/styled'; + +const BaseChip = styled.div` + line-height: 42px; + font-size: 22px; + + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + font-size: 18px; + } + + @media (max-width: 765.9px) { + line-height: 18px; + font-size: 16px; + } +`; + +const BlueChip = styled(BaseChip)` + color: #fff; + padding-left: 20px; + &:before { + content: '✏️'; + padding-right: 10px; + } +`; + +const GreenChip = styled(BaseChip)` + color: #BDEC00; + padding-left: 20px; + &:before { + content: '👍'; + padding-right: 10px; + } +`; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 70px; + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + gap: 40px; + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + gap: 24px; + } +`; + +const BaseText = styled.div` + color: #fff; + font-size: 24px; + font-style: normal; + letter-spacing: -0.48px; + white-space: pre-line; + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + font-size: 16px; + font-style: normal; + letter-spacing: -0.32px; + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + font-size: 16px; + font-style: normal; + letter-spacing: -0.32px; + } +`; + +const InfoWrapper = styled(BaseText)` + border-radius: 30px; + background: #222220; + padding: 45px 80px; + font-weight: 600; + line-height: 42px; + + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + width: 640px; + padding: 32px 56px; + border-radius: 20px; + line-height: 180%; + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + width: 323px; + padding: 22px 28px; + border-radius: 20px; + line-height: 170%; + } +`; + +const FitWrapper = styled(BaseText)` + border-radius: 30px; + background: #21270F; + padding: 60px 80px; + display: flex; + flex-direction: column; + line-height: 40px; + gap: 12px; + width: 100%; + + font-weight: 400; + line-height: 50px; + + & div { + padding-left: 14px; + text-indent: -14px; + } + + & div::before { + content: '-'; + padding-right: 5px; + } + /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + width: 640px; + padding: 32px 56px; + border-radius: 24px; + line-height: 180%; + } + /* 모바일 뷰 */ + @media (max-width: 765.9px) { + width: 323px; + padding: 22px 28px; + gap: 8px; + border-radius: 20px; + line-height: 170%; + } +`; + +const Container = styled.div` + display: flex; + justify-content: center; + width: 100%; +`; + +const SectionWrapper = styled.div` + display: flex; + justify-content: center; + + @media (max-width: 765.9px) { + flex-direction: column; + } +`; + +export { BaseChip, BaseText, BlueChip, GreenChip, FitWrapper, InfoWrapper, Wrapper, Container, SectionWrapper }; diff --git a/src/views/RecruitPage/components/common/Tabs/style.ts b/src/views/RecruitPage/components/common/Tabs/style.ts index a6d24656..44da9f81 100644 --- a/src/views/RecruitPage/components/common/Tabs/style.ts +++ b/src/views/RecruitPage/components/common/Tabs/style.ts @@ -4,7 +4,11 @@ export const TabBar = styled.div` display: flex; flex-wrap: wrap; justify-content: center; - gap: 12px; + gap: 25px; + + @media (max-width: 765.9px) { + gap: 10px; + } `; export const Tab = styled.div<{ selected: boolean }>` @@ -14,17 +18,21 @@ export const Tab = styled.div<{ selected: boolean }>` border-radius: 10px; color: ${({ selected }) => (selected ? '#FFFFFF' : '#cccccc')}; background-color: ${({ selected }) => (selected ? '#222220' : 'inherit')}; - font-size: 18px; + font-size: 23px; - min-width: 160px; + min-width: 121px; &:hover { background-color: rgba(255, 255, 255, 0.1); } - /* 태블릿 뷰 */ + @media (max-width: 1299px) and (min-width: 766px) { + padding: 12px 0; + font-size: 14px; + } + @media (max-width: 765.9px) { - min-width: 72px; + min-width: 101px; padding: 12px 0; - font-size: 12px; + font-size: 16px; } `; From f224e384d5ea65c697da95c94ab54ab1b0d2cc10 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 3 Mar 2024 03:49:20 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=EC=B9=B4=EC=9A=B4=ED=8A=B8=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=B0=B0=EB=84=88=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EA=B9=A8=EC=A7=90=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/components/TopBanner/style.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/views/MainPage/components/TopBanner/style.ts b/src/views/MainPage/components/TopBanner/style.ts index c6b37286..ae9d6964 100644 --- a/src/views/MainPage/components/TopBanner/style.ts +++ b/src/views/MainPage/components/TopBanner/style.ts @@ -54,7 +54,7 @@ export const Wrapper = styled.section` width: 100%; /* 모바일 뷰 */ - @media (max-width: 428px) { + @media (max-width: 570px) { flex-direction: column; justify-content: start; align-items: baseline; @@ -82,9 +82,13 @@ export const Description = styled.div` font-weight: 500; /* 모바일 뷰 */ - @media (max-width: 428px) { + @media (max-width: 570px) { justify-content: space-between; width: 100%; + } + + /* 모바일 뷰 */ + @media (max-width: 428px) { font-size: 11px; } `;