feat: 밈 상세 stiffness 수정

Author: Cllaude99

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

@@ -2,10 +2,7 @@ import styled from '@emotion/styled';
 import { motion } from 'motion/react';
 
 const Container = styled.div`
-  width: 100%;
-  height: 100%;
   overflow-y: auto;
-  background-color: ${({ theme }) => theme.palette.gray['gray-10']};
   &::-webkit-scrollbar {
     display: none;
   }
@@ -14,12 +11,10 @@ const Container = styled.div`
 `;
 
 const ImageContainer = styled(motion.div)`
-  width: 100%;
   position: sticky;
   top: 0;
   z-index: 10;
   padding: 14px;
-  background-color: ${({ theme }) => theme.palette.gray['gray-10']};
 `;
 
 const Image = styled.img`

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

@@ -1,5 +1,5 @@
 import Layout from '@/components/Layout';
-import { ShareIcon, SymbolTwoIcon } from '@/assets/icons';
+import { ShareIcon, SymbolThreeIcon, SymbolTwoIcon } from '@/assets/icons';
 import { nativeBridge } from '@/utils/bridge';
 import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
@@ -28,11 +28,10 @@ const MemeDetailPage = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollY } = useScroll({ container: containerRef });
 
-  const height = useTransform(scrollY, [0, 200], [400, 200]);
+  const height = useTransform(scrollY, [0, 500], [400, 100]);
   const smoothHeight = useSpring(height, {
     stiffness: 200,
     damping: 20,
-    mass: 0.5,
   });
 
   const textWidth = useTransform(scrollY, [0, 50], [100, 0]);
@@ -51,8 +50,6 @@ const MemeDetailPage = () => {
     <Layout
       layoutStyle={{
         backgroundColor: theme.palette.gray['gray-10'],
-        height: '100vh',
-        overflow: 'hidden',
       }}
     >
       <S.Container ref={containerRef}>
@@ -90,7 +87,7 @@ const MemeDetailPage = () => {
           </S.SectionTitle>
           <S.SectionText>{DUMMY_DATA.success.usage}</S.SectionText>
           <S.SectionTitle>
-            <SymbolTwoIcon width={18} height={18} />
+            <SymbolThreeIcon width={18} height={18} />
             유래
           </S.SectionTitle>
           <S.SectionText>{DUMMY_DATA.success.origin}</S.SectionText>