[SP2] 메인 상단 Introduce QA

src/views/MainPage/components/Introduce/index.tsx

@@ -1,23 +1,40 @@
 import { useScroll, useTransform } from 'framer-motion';
-import { useRef } from 'react';
-import MotionTitle from './MotionTitle';
+import { useEffect, useRef, useState } from 'react';
+import { useIsMobile } from '@src/hooks/useDevice';
 import * as S from './style';
 
 export default function Introduce() {
+  const isMobileSize = useIsMobile('768px');
   const contentRef = useRef<HTMLElement>(null);
   const { scrollYProgress } = useScroll({
     target: contentRef,
-    offset: ['end center', 'start start'],
+    offset: ['end center', 'start'],
   });
 
   const scaleValue = useTransform(scrollYProgress, [1, 0.4], [0.9, 1]);
   const content = '전국 최대 규모의 대학생 IT 연합 동아리, SOPT를 소개합니다.';
 
+  const [style, setStyle] = useState<{ opacity?: number; clipPath?: string }>();
+  const scrollValue = useTransform(scrollYProgress, [1, 0.4], ['100%', '0%']);
+
+  useEffect(() => {
+    const unsubscribe = scrollValue.on('change', (value) => {
+      const percentValue = Number(value.split('%')[0]);
+      const newStyle = isMobileSize
+        ? { opacity: (100 - percentValue) / 100 }
+        : { clipPath: `inset(0% ${percentValue}% 0% 0%)`, opacity: 1 };
+      setStyle(newStyle);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [scrollValue, isMobileSize]);
   return (
     <S.Background ref={contentRef}>
       <S.Wrapper>
         <S.TextContainer style={{ scale: scaleValue }}>
-          <MotionTitle contentRef={contentRef} content={content} />
+          <S.MotionTitle style={style} data-text={content} />
           <S.BackgroundTitle>{content}</S.BackgroundTitle>
         </S.TextContainer>
       </S.Wrapper>

src/views/MainPage/components/Introduce/style.ts

@@ -4,7 +4,6 @@ import { motion } from 'framer-motion';
 
 export const Background = styled.section`
   display: flex;
-  max-width: 1920px;
   height: 200vh;
   justify-content: center;
   align-items: flex-start;
@@ -63,6 +62,21 @@ export const TextContainer = styled(motion.span)`
   }
 `;
 
+export const MotionTitle = styled(motion.span)`
+  position: absolute;
+  left: 0;
+  opacity: 0;
+
+  :before {
+    content: attr(data-text);
+    display: inline-block;
+    background: linear-gradient(93deg, #c9d8dd 78.65%, #fff 128.82%, #c9d8dd 137.19%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+`;
+
 export const BackgroundTitle = styled.span`
   background: linear-gradient(93deg, #c9d8dd -34.77%, #fff -14.77%, #636770 6.12%);
   background-clip: text;