feat: MemeDetailPage에서 공유 및 밈 꾸미기 버튼 추가

- MemeDetailPage에 공유하기 및 밈 꾸미기 버튼을 추가하여 사용자 인터랙션을 향상시킴
- 기존의 스크롤 관련 상태 관리 로직을 제거하고, 버튼을 하단에 고정하여 접근성을 개선함
- 스타일을 수정하여 버튼 컨테이너와 액션 버튼을 새롭게 정의함

Author: Cllaude99

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

@@ -8,6 +8,7 @@ const Container = styled.div`
   }
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
+  padding-bottom: 100px;
 `;
 
 const ImageContainer = styled(motion.div)`
@@ -23,24 +24,33 @@ const Image = styled.img`
   border-radius: 12px;
 `;
 
-const ShareButton = styled(motion.button)`
-  position: absolute;
+const ButtonContainer = styled.div`
+  position: fixed;
+  max-width: 425px;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  width: 100%;
+  padding: 24px 14px;
+  background-color: ${({ theme }) => theme.palette.gray['gray-10']};
+  border-top: 1px solid ${({ theme }) => theme.palette.gray['gray-9']};
+  display: flex;
+  gap: 10px;
+  z-index: 10;
+`;
+
+const ActionButton = styled.button`
+  flex: 1;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
-  background-color: rgba(0, 0, 0, 0.5);
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 26px;
-  border: 1px solid ${({ theme }) => theme.palette.common.white};
+  background-color: ${({ theme }) => theme.palette.gray['gray-9']};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-8']};
   border-radius: 10px;
   cursor: pointer;
-  color: ${({ theme }) => theme.palette.common.white};
-  padding: 10px 12px;
-`;
-
-const ShareButtonText = styled(motion.span)`
-  ${({ theme }) => theme.typography.body.body1};
+  padding: 14px;
+  ${({ theme }) => theme.typography.title.subhead2};
   color: ${({ theme }) => theme.palette.common.white};
 `;
 
@@ -99,12 +109,12 @@ export {
   ImageContainer,
   Image,
   ContentContainer,
-  ShareButton,
-  ShareButtonText,
+  ButtonContainer,
+  ActionButton,
   YearBadge,
   YearText,
   Title,
   HashTags,
   SectionTitle,
   SectionText,
-};
+};

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

@@ -1,10 +1,14 @@
 import Layout from '@/components/Layout';
-import { ShareIcon, SymbolThreeIcon, SymbolTwoIcon } from '@/assets/icons';
+import {
+  MemeDesignPenIcon,
+  ShareIcon,
+  SymbolThreeIcon,
+  SymbolTwoIcon,
+} from '@/assets/icons';
 import { nativeBridge } from '@/utils/bridge';
 import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
-import { useRef, useState, useEffect } from 'react';
-import { useScroll, useTransform, useSpring } from 'motion/react';
+import { useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useMemeDetailQuery } from '@meme_wiki/apis';
 
@@ -14,22 +18,6 @@ const MemeDetailPage = () => {
 
   const theme = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
-  const { scrollY } = useScroll({ container: containerRef });
-
-  const height = useTransform(scrollY, [0, 60], [400, 175]);
-  const smoothHeight = useSpring(height, {
-    stiffness: 300,
-    damping: 50,
-  });
-
-  const [isTextVisible, setIsTextVisible] = useState(true);
-
-  useEffect(() => {
-    const unsubscribe = scrollY.on('change', (latest) => {
-      setIsTextVisible(latest < 1);
-    });
-    return () => unsubscribe();
-  }, [scrollY]);
 
   return (
     <Layout
@@ -38,22 +26,11 @@ const MemeDetailPage = () => {
       }}
     >
       <S.Container ref={containerRef}>
-        <S.ImageContainer style={{ height: smoothHeight }}>
+        <S.ImageContainer>
           <S.Image
             src={memeDetail?.success.imgUrl}
             alt={memeDetail?.success.title}
           />
-          <S.ShareButton
-            onClick={() => {
-              nativeBridge.shareMeme({
-                title: memeDetail?.success.title ?? '',
-                image: memeDetail?.success.imgUrl ?? '',
-              });
-            }}
-          >
-            <ShareIcon width={24} height={24} />
-            {isTextVisible && <S.ShareButtonText>공유하기</S.ShareButtonText>}
-          </S.ShareButton>
         </S.ImageContainer>
         <S.ContentContainer>
           <S.YearBadge>
@@ -75,6 +52,22 @@ const MemeDetailPage = () => {
           <S.SectionText>{memeDetail?.success.origin}</S.SectionText>
         </S.ContentContainer>
       </S.Container>
+      <S.ButtonContainer>
+        <S.ActionButton
+          onClick={() => {
+            nativeBridge.shareMeme({
+              title: memeDetail?.success.title ?? '',
+              image: memeDetail?.success.imgUrl ?? '',
+            });
+          }}
+        >
+          <ShareIcon width={24} height={24} />
+          공유하기
+        </S.ActionButton>
+        <S.ActionButton>
+          <MemeDesignPenIcon width={24} height={24} />밈 꾸미기
+        </S.ActionButton>
+      </S.ButtonContainer>
     </Layout>
   );
 };