From 07e473271227e7946f481fc779f4180d84bf9b6d Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Sat, 23 Dec 2023 10:00:33 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9E=90=EC=B9=98=EA=B8=B0=EA=B5=AC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95,=20=ED=99=9C=EB=8F=99=ED=9B=84?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=80=EC=9E=90=20=EB=B6=80=ED=99=9C,=20?= =?UTF-8?q?=EC=86=9D=ED=8A=B8=EC=96=B4=EB=95=8C=EC=9A=94=EC=99=80=20?= =?UTF-8?q?=EC=B5=9C=EC=8B=A0=EC=86=8C=EC=8B=9D=20=EC=82=AC=EC=9D=B4=20?= =?UTF-8?q?=EA=B0=84=EA=B2=A9=20=EB=8A=98=EB=A6=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Comment/Card/Desktop/index.tsx | 8 +++++- .../MainPage/components/Comment/index.tsx | 1 + .../MainPage/components/Comment/style.ts | 26 ++++++++++++++++++- .../components/OwnOrganization/Card/style.ts | 24 +++++++++++++++-- .../components/OwnOrganization/style.ts | 4 ++- 5 files changed, 58 insertions(+), 5 deletions(-) diff --git a/src/views/MainPage/components/Comment/Card/Desktop/index.tsx b/src/views/MainPage/components/Comment/Card/Desktop/index.tsx index 4d805310..750cf2e0 100644 --- a/src/views/MainPage/components/Comment/Card/Desktop/index.tsx +++ b/src/views/MainPage/components/Comment/Card/Desktop/index.tsx @@ -24,7 +24,13 @@ export default function CommentCard({ const desktop = useMediaQuery({ query: '(max-width: 1480px)', }); - const margin = desktop ? '-324px 0px -300px 0px' : '-100px 0px -648px 0px'; + const longScreen = useMediaQuery({ query: '(min-height: 1100px' }); + + const margin = desktop + ? longScreen + ? '-324px 0px -648px 0px' + : '-324px 0px -324px 0px' + : '-100px 0px -648px 0px'; const wrapperRef = useRef(null); diff --git a/src/views/MainPage/components/Comment/index.tsx b/src/views/MainPage/components/Comment/index.tsx index a871b029..005e29b8 100644 --- a/src/views/MainPage/components/Comment/index.tsx +++ b/src/views/MainPage/components/Comment/index.tsx @@ -28,6 +28,7 @@ export default function CommentSection() { {!isWideScreen && !isMobile && } + 활동 후기 Q. 솝트 어때요? {SOPT_COMMENT_LIST[activeIdx]?.summary} diff --git a/src/views/MainPage/components/Comment/style.ts b/src/views/MainPage/components/Comment/style.ts index e3e14a7b..9aced89f 100644 --- a/src/views/MainPage/components/Comment/style.ts +++ b/src/views/MainPage/components/Comment/style.ts @@ -15,7 +15,7 @@ export const Wrapper = styled.div` export const TitleShadow = styled(motion.div)` position: absolute; width: 100%; - height: calc(100% + 80px); + height: calc(100% + 120px); top: 0; left: 0; background: linear-gradient(#0d111f 72%, transparent); @@ -90,6 +90,30 @@ export const SectionTitle = styled.div` } `; +export const SectionSubTitle = styled.p` + color: #5b88f8; + font-family: SUIT; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 46.311px; /* 257.282% */ + letter-spacing: -0.36px; + margin-bottom: 8px; + position: relative; + z-index: 1; + + @media (max-width: 768px) and (min-width: 429px) { + font-size: 18px; + line-height: 46.311px; /* 257.282% */ + letter-spacing: -0.36px; + } + @media (max-width: 428px) { + font-size: 11px; + line-height: 26.615px; /* 241.956% */ + letter-spacing: -0.22px; + } +`; + export const Summary = styled(motion.div)<{ color: string }>` color: ${({ color }) => color}; diff --git a/src/views/MainPage/components/OwnOrganization/Card/style.ts b/src/views/MainPage/components/OwnOrganization/Card/style.ts index 420ae6f8..1fd3553d 100644 --- a/src/views/MainPage/components/OwnOrganization/Card/style.ts +++ b/src/views/MainPage/components/OwnOrganization/Card/style.ts @@ -21,8 +21,8 @@ export const CardWrapper = styled.div<{ background: string }>` } @media (max-width: 768px) { - width: max(416px, min(100vw - 200px, 512px)); - height: calc(max(432px, min(100vw - 200px, 512px)) * 0.84); + width: max(392px, min(100vw - 200px, 512px)); + height: calc(max(416px, min(100vw - 200px, 512px)) * 0.84); } @media (max-width: 428px) { @@ -55,6 +55,17 @@ export const FooterKorName = styled.div` line-height: 24.425px; } + @media (max-width: 512px) { + border-radius: 12px; + width: 96px; + padding: 10px 0; + font-size: 18px; + line-height: 24.425px; + font-size: 18px; + line-height: 20px; + letter-spacing: -0.904px; + } + @media (max-width: 428px) { border-radius: 6px; width: 74px; @@ -85,6 +96,10 @@ export const FooterEngName = styled.div` line-height: 13.9px; } + @media (max-width: 512px) { + font-size: 17px; + } + @media (max-width: 428px) { font-size: 11px; line-height: 14.9px; @@ -132,6 +147,11 @@ export const TextWrapper = styled.span<{ weight: 'normal' | 'bold' }>` letter-spacing: -0.72px; } + @media (max-width: 512px) { + font-size: 16px; + line-height: 26px; + } + @media (max-width: 428px) { font-size: 11px; line-height: 18.103px; /* 164.575% */ diff --git a/src/views/MainPage/components/OwnOrganization/style.ts b/src/views/MainPage/components/OwnOrganization/style.ts index 626833e5..855a4c43 100644 --- a/src/views/MainPage/components/OwnOrganization/style.ts +++ b/src/views/MainPage/components/OwnOrganization/style.ts @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import { colors } from '@sopt-makers/colors'; export const Wrapper = styled.div` display: flex; @@ -10,6 +9,9 @@ export const Wrapper = styled.div` gap: 24px; overflow-x: scroll; } + @media (max-width: 512px) { + gap: 16px; + } @media (max-width: 428px) { gap: 14px;