From 126b8ce0ad82656b9338a5d68cb1611b9ff83e33 Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Sat, 23 Dec 2023 13:37:07 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=86=9D=ED=8A=B8=EC=96=B4=EB=95=8C?= =?UTF-8?q?=EC=9A=94=3F=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=B5=9C=EC=B5=9C?= =?UTF-8?q?=EC=B5=9C=EC=A2=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Comment/Card/Desktop/index.tsx | 35 +++++++++++++------ .../components/Comment/Card/Desktop/style.ts | 5 +++ .../components/Comment/Cards/index.tsx | 18 +++++++++- .../MainPage/components/Comment/style.ts | 29 +++++++++++++-- 4 files changed, 73 insertions(+), 14 deletions(-) diff --git a/src/views/MainPage/components/Comment/Card/Desktop/index.tsx b/src/views/MainPage/components/Comment/Card/Desktop/index.tsx index 750cf2e0..9d3b1f57 100644 --- a/src/views/MainPage/components/Comment/Card/Desktop/index.tsx +++ b/src/views/MainPage/components/Comment/Card/Desktop/index.tsx @@ -1,12 +1,12 @@ import { useInView } from 'framer-motion'; -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useMediaQuery } from 'react-responsive'; import { SoptCommentType } from '@src/lib/types/main'; import * as S from './style'; interface CommentCardProps { idx: number; - setIsActive: (idx: number) => void; + setIsActive: (idx: number, isActive: boolean) => void; isActive: boolean; color: SoptCommentType['color']; comment: SoptCommentType['comment']; @@ -24,21 +24,36 @@ export default function CommentCard({ const desktop = useMediaQuery({ query: '(max-width: 1480px)', }); - const longScreen = useMediaQuery({ query: '(min-height: 1100px' }); + const veryShortHeight = useMediaQuery({ query: '(max-height: 700px)' }); + const shortHeight = useMediaQuery({ query: '(max-height: 860px)' }); + const mediumHeight = useMediaQuery({ query: '(max-height: 1000px)' }); + const longHeight = useMediaQuery({ query: '(min-height: 1100px' }); - const margin = desktop - ? longScreen - ? '-324px 0px -648px 0px' - : '-324px 0px -324px 0px' - : '-100px 0px -648px 0px'; + const margin = veryShortHeight + ? '0' + : desktop + ? longHeight + ? '-600px 0px 0px 0px' + : shortHeight + ? '-500px 0px -200px 0px' + : '-600px 0px -200px 0px' + : mediumHeight + ? '-486px 0px -324px 0px' + : '-648px 0px -324px 0px'; const wrapperRef = useRef(null); const isInView = useInView(wrapperRef, { margin }); + const [isInViewState, setIsInViewState] = useState(false); + + useEffect(() => { + setIsInViewState(isInView); + }, [isInView]); + useEffect(() => { - if (isInView) setIsActive(idx); - }, [isInView, idx, setIsActive]); + setIsActive(idx, isInViewState); + }, [isInViewState, idx, setIsActive]); return ( ([]); + const activeIndexSet = useRef>(new Set()); + + const setIsActive = useCallback((idx: number, isActive: boolean) => { + if (isActive) activeIndexSet.current.add(idx); + else activeIndexSet.current.delete(idx); + setActiveIndices(Array.from(activeIndexSet.current)); + }, []); + + useEffect(() => { + if (activeIndices.length > 0 && activeIndices[0] !== activeIdx) { + changeActiveIdx(activeIndices[0]); + } + }, [activeIndices, changeActiveIdx, activeIdx]); + return ( {SOPT_COMMENT_LIST.map((comment, idx) => ( @@ -24,7 +40,7 @@ function CommentCardsDesktop({ activeIdx, changeActiveIdx }: CommentCardsProps) key={idx} idx={idx} isActive={activeIdx === idx} - setIsActive={changeActiveIdx} + setIsActive={setIsActive} color={comment.color} comment={comment.comment} commenter={comment.commenter} diff --git a/src/views/MainPage/components/Comment/style.ts b/src/views/MainPage/components/Comment/style.ts index 9aced89f..0ffc8911 100644 --- a/src/views/MainPage/components/Comment/style.ts +++ b/src/views/MainPage/components/Comment/style.ts @@ -19,6 +19,9 @@ export const TitleShadow = styled(motion.div)` top: 0; left: 0; background: linear-gradient(#0d111f 72%, transparent); + @media (max-width: 768px) { + height: 100%; + } `; export const TitleWrapper = styled.div` @@ -88,6 +91,10 @@ export const SectionTitle = styled.div` line-height: 24.28px; /* 115.617% */ letter-spacing: -0.63px; } + @media (max-height: 860px) and (max-width: 1480px) { + font-size: 32px; + line-height: 32px; + } `; export const SectionSubTitle = styled.p` @@ -131,12 +138,19 @@ export const Summary = styled(motion.div)<{ color: string }>` font-size: 68px; height: 185px; } + @media (max-width: 1480px) { + white-space: unset; + height: auto; + } + + @media (max-width: 1100px) { + white-space: pre-line; + } @media (max-width: 976px) { font-size: 60px; padding-top: 28px; padding-left: 60px; - height: 160px; } @media (max-width: 768px) { @@ -144,7 +158,6 @@ export const Summary = styled(motion.div)<{ color: string }>` font-weight: 600; line-height: 60px; letter-spacing: -1.71px; - height: 156px; padding-left: 48px; } @media (max-width: 520px) { @@ -154,9 +167,14 @@ export const Summary = styled(motion.div)<{ color: string }>` line-height: 32px; letter-spacing: -0.9px; padding-top: 12px; - height: 80px; padding-left: 32px; } + @media (max-height: 860px) and (max-width: 1480px) { + font-size: 46px; + line-height: 48px; + padding-left: 48px; + padding-top: 24px; + } &::before { content: ''; @@ -184,6 +202,11 @@ export const Summary = styled(motion.div)<{ color: string }>` height: 22px; top: 18px; } + @media (max-height: 860px) and (max-width: 1480px) { + width: 38px; + height: 38px; + top: 30px; + } } `;