feat: 상세부분 스크롤에 대한 이미지처리

- 아래의 상세 부분을 아래로 스크롤할때, 이미지는 작아지고 공유버튼의 아이콘만 보이도록 반영

Author: Cllaude99

apps/web/src/pages/MemeDetailPage/MemeDetailPage.styles.ts

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { motion } from 'motion/react';
 
 const Container = styled.div`
   width: 100%;
@@ -8,16 +9,16 @@ const Container = styled.div`
   &::-webkit-scrollbar {
     display: none;
   }
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
 `;
 
-const ImageContainer = styled.div<{ scrollProgress: number }>`
+const ImageContainer = styled(motion.div)`
   width: 100%;
   position: sticky;
   top: 0;
   z-index: 10;
-  height: ${({ scrollProgress }) => Math.max(200, 400 - scrollProgress)}px;
   padding: 14px;
-  transition: height 0.1s linear;
   background-color: ${({ theme }) => theme.palette.gray['gray-10']};
 `;
 
@@ -28,7 +29,7 @@ const Image = styled.img`
   border-radius: 12px;
 `;
 
-const ShareButton = styled.button<{ scrollProgress: number }>`
+const ShareButton = styled(motion.button)`
   position: absolute;
   display: flex;
   align-items: center;
@@ -38,22 +39,16 @@ const ShareButton = styled.button<{ scrollProgress: number }>`
   transform: translateX(-50%);
   bottom: 26px;
   border: 1px solid ${({ theme }) => theme.palette.common.white};
-  padding: ${({ scrollProgress }) =>
-    scrollProgress > 50 ? '10px' : '10px 16px'};
   border-radius: 10px;
   cursor: pointer;
   color: ${({ theme }) => theme.palette.common.white};
-  transition: all 0.1s linear;
 `;
 
-const ShareButtonText = styled.span<{ scrollProgress: number }>`
+const ShareButtonText = styled(motion.span)`
   ${({ theme }) => theme.typography.body.body1};
   color: ${({ theme }) => theme.palette.common.white};
-  opacity: ${({ scrollProgress }) => Math.max(0, 1 - scrollProgress / 50)};
-  max-width: ${({ scrollProgress }) => (scrollProgress > 50 ? '0' : '100px')};
   overflow: hidden;
   white-space: nowrap;
-  transition: all 0.1s linear;
 `;
 
 const ContentContainer = styled.div`

apps/web/src/pages/MemeDetailPage/index.tsx

@@ -4,7 +4,7 @@ import { nativeBridge } from '@/utils/bridge';
 import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
 import { useRef } from 'react';
-import { useEffect, useState } from 'react';
+import { useScroll, useTransform, useSpring } from 'motion/react';
 
 const DUMMY_DATA = {
   resultType: 'SUCCESS',
@@ -25,21 +25,27 @@ const DUMMY_DATA = {
 
 const MemeDetailPage = () => {
   const theme = useTheme();
-  const [scrollProgress, setScrollProgress] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollY } = useScroll({ container: containerRef });
 
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
+  const height = useTransform(scrollY, [0, 200], [400, 200]);
+  const smoothHeight = useSpring(height, {
+    stiffness: 200,
+    damping: 20,
+    mass: 0.5,
+  });
 
-    const handleScroll = () => {
-      const scrollPosition = container.scrollTop;
-      setScrollProgress(Math.min(200, scrollPosition));
-    };
+  const textWidth = useTransform(scrollY, [0, 50], [100, 0]);
+  const smoothTextWidth = useSpring(textWidth, {
+    stiffness: 300,
+    damping: 30,
+  });
 
-    container.addEventListener('scroll', handleScroll);
-    return () => container.removeEventListener('scroll', handleScroll);
-  }, []);
+  const padding = useTransform(scrollY, [0, 50], [16, 10]);
+  const smoothPadding = useSpring(padding, {
+    stiffness: 300,
+    damping: 30,
+  });
 
   return (
     <Layout
@@ -50,13 +56,13 @@ const MemeDetailPage = () => {
       }}
     >
       <S.Container ref={containerRef}>
-        <S.ImageContainer scrollProgress={scrollProgress}>
+        <S.ImageContainer style={{ height: smoothHeight }}>
           <S.Image
             src={DUMMY_DATA.success.image}
             alt={DUMMY_DATA.success.title}
           />
           <S.ShareButton
-            scrollProgress={scrollProgress}
+            style={{ padding: smoothPadding }}
             onClick={() => {
               nativeBridge.shareMeme({
                 title: DUMMY_DATA.success.title,
@@ -65,7 +71,7 @@ const MemeDetailPage = () => {
             }}
           >
             <ShareIcon width={24} height={24} />
-            <S.ShareButtonText scrollProgress={scrollProgress}>
+            <S.ShareButtonText style={{ maxWidth: smoothTextWidth }}>
               공유하기
             </S.ShareButtonText>
           </S.ShareButton>