feat: 밈 상세 페이지 공유 버튼 애니메이션 및 스타일 개선

- 공유 버튼의 애니메이션을 추가하고, 버튼의 크기 및 텍스트의 투명도 조정
- 아이콘을 SymbolThreeIcon으로 변경하고, 섹션 제목을 '이럴 때 쓰세요'로 수정
- 스타일을 개선하여 레이아웃과 사용자 경험 향상

Author: Cllaude99

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

@@ -11,15 +11,20 @@ const Container = styled.div`
   }
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
+  position: relative;
 `;
 
 const ImageContainer = styled(motion.div)`
   width: 100%;
   position: sticky;
   top: 0;
   z-index: 10;
-  padding: 14px;
   background-color: ${({ theme }) => theme.palette.gray['gray-10']};
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+  overflow: visible;
+  position: relative;
 `;
 
 const Image = styled.img`
@@ -31,29 +36,39 @@ const Image = styled.img`
 
 const ShareButton = styled(motion.button)`
   position: absolute;
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  gap: 8px;
   background-color: rgba(0, 0, 0, 0.5);
   left: 50%;
   transform: translateX(-50%);
   bottom: 26px;
   border: 1px solid ${({ theme }) => theme.palette.common.white};
   border-radius: 10px;
+  height: 44px;
+  min-width: 44px;
+  padding: 0 12px;
   cursor: pointer;
   color: ${({ theme }) => theme.palette.common.white};
+  transition: all 0.2s ease;
+  z-index: 20;
+  white-space: nowrap;
 `;
 
 const ShareButtonText = styled(motion.span)`
   ${({ theme }) => theme.typography.body.body1};
   color: ${({ theme }) => theme.palette.common.white};
-  overflow: hidden;
-  white-space: nowrap;
+  display: block;
 `;
 
 const ContentContainer = styled.div`
-  padding: 20px 14px;
+  padding: 0 14px 20px;
   background-color: ${({ theme }) => theme.palette.gray['gray-10']};
+  margin-top: -20px;
+  position: relative;
+  z-index: 20;
+  border-radius: 20px 20px 0 0;
 `;
 
 const YearBadge = styled.div`

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,31 +28,36 @@ 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, 200], [400, 250]);
   const smoothHeight = useSpring(height, {
-    stiffness: 200,
+    stiffness: 100,
     damping: 20,
-    mass: 0.5,
   });
 
-  const textWidth = useTransform(scrollY, [0, 50], [100, 0]);
+  // 공유하기 버튼 애니메이션
+  const buttonWidth = useTransform(scrollY, [0, 50], [116, 44]);
+  const textOpacity = useTransform(scrollY, [0, 30], [1, 0]);
+  const textWidth = useTransform(scrollY, [0, 30], [68, 0]);
+
+  const smoothButtonWidth = useSpring(buttonWidth, {
+    stiffness: 400,
+    damping: 40,
+  });
+
   const smoothTextWidth = useSpring(textWidth, {
-    stiffness: 300,
-    damping: 30,
+    stiffness: 400,
+    damping: 40,
   });
 
-  const padding = useTransform(scrollY, [0, 50], [16, 10]);
-  const smoothPadding = useSpring(padding, {
-    stiffness: 300,
-    damping: 30,
+  const smoothTextOpacity = useSpring(textOpacity, {
+    stiffness: 400,
+    damping: 40,
   });
 
   return (
     <Layout
       layoutStyle={{
         backgroundColor: theme.palette.gray['gray-10'],
-        height: '100vh',
-        overflow: 'hidden',
       }}
     >
       <S.Container ref={containerRef}>
@@ -62,7 +67,9 @@ const MemeDetailPage = () => {
             alt={DUMMY_DATA.success.title}
           />
           <S.ShareButton
-            style={{ padding: smoothPadding }}
+            style={{
+              width: smoothButtonWidth,
+            }}
             onClick={() => {
               nativeBridge.shareMeme({
                 title: DUMMY_DATA.success.title,
@@ -71,7 +78,13 @@ const MemeDetailPage = () => {
             }}
           >
             <ShareIcon width={24} height={24} />
-            <S.ShareButtonText style={{ maxWidth: smoothTextWidth }}>
+            <S.ShareButtonText
+              style={{
+                opacity: smoothTextOpacity,
+                width: smoothTextWidth,
+                overflow: 'hidden',
+              }}
+            >
               공유하기
             </S.ShareButtonText>
           </S.ShareButton>
@@ -86,12 +99,12 @@ const MemeDetailPage = () => {
           </S.HashTags>
           <S.SectionTitle>
             <SymbolTwoIcon width={18} height={18} />
-            용도
+            이럴 때 쓰세요
           </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>
         </S.ContentContainer>