[SP3] 솝트어때요? 반응형 최최최종 수정

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 (
     <S.Wrapper

src/views/MainPage/components/Comment/Card/Desktop/style.ts

@@ -28,6 +28,11 @@ export const Wrapper = styled(motion.div)`
     font-size: 18px;
     line-height: 30px;
   }
+
+  @media (max-height: 860px) and (max-width: 1480px) {
+    height: 280px;
+    padding: 20px 28px;
+  }
 `;
 
 export const Footer = styled.div`

src/views/MainPage/components/Comment/Cards/index.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIsMobile } from '@src/hooks/useDevice';
 import { SOPT_COMMENT_LIST } from '@src/lib/constants/main';
 import CommentCardDesktop from '../Card/Desktop';
@@ -17,14 +18,29 @@ export default function CommentCards({ activeIdx, changeActiveIdx }: CommentCard
 }
 
 function CommentCardsDesktop({ activeIdx, changeActiveIdx }: CommentCardsProps) {
+  const [activeIndices, setActiveIndices] = useState<number[]>([]);
+  const activeIndexSet = useRef<Set<number>>(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 (
     <S.CardWrapper>
       {SOPT_COMMENT_LIST.map((comment, idx) => (
         <CommentCardDesktop
           key={idx}
           idx={idx}
           isActive={activeIdx === idx}
-          setIsActive={changeActiveIdx}
+          setIsActive={setIsActive}
           color={comment.color}
           comment={comment.comment}
           commenter={comment.commenter}

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,20 +138,26 @@ 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) {
     font-size: 57px;
     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;
+    }
   }
 `;