feat: MemeDetailPage에서 버튼 스타일 및 기능 개선

- 공유하기 및 밈 꾸미기 버튼의 스타일을 수정하고, 텍스트를 추가하여 사용자 경험을 향상시킴
- 불필요한 useRef 훅을 제거하고, ImageContainer의 스타일을 주석 처리하여 코드 간소화

Author: Cllaude99

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

@@ -12,8 +12,8 @@ const Container = styled.div`
 `;
 
 const ImageContainer = styled(motion.div)`
-  position: sticky;
-  top: 0;
+  /* position: sticky;
+  top: 0; */
   padding: 14px;
 `;
 

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

@@ -8,7 +8,6 @@ import {
 import { nativeBridge } from '@/utils/bridge';
 import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
-import { useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useMemeDetailQuery } from '@meme_wiki/apis';
 
@@ -17,15 +16,14 @@ const MemeDetailPage = () => {
   const { data: memeDetail } = useMemeDetailQuery(memeId!);
 
   const theme = useTheme();
-  const containerRef = useRef<HTMLDivElement>(null);
 
   return (
     <Layout
       layoutStyle={{
         backgroundColor: theme.palette.gray['gray-10'],
       }}
     >
-      <S.Container ref={containerRef}>
+      <S.Container>
         <S.ImageContainer>
           <S.Image
             src={memeDetail?.success.imgUrl}
@@ -61,11 +59,16 @@ const MemeDetailPage = () => {
             });
           }}
         >
-          <ShareIcon width={24} height={24} />
-          공유하기
+          <ShareIcon />
+          <span>공유하기</span>
         </S.ActionButton>
-        <S.ActionButton>
-          <MemeDesignPenIcon width={24} height={24} />밈 꾸미기
+        <S.ActionButton
+          onClick={() => {
+            alert('밈 꾸미기');
+          }}
+        >
+          <MemeDesignPenIcon />
+          <span>밈 꾸미기</span>
         </S.ActionButton>
       </S.ButtonContainer>
     </Layout>