feat: 밈 상세 페이지 데이터 상세 데이터 반영

- 더미 데이터를 제거하고 useParams 및 useMemeDetailQuery를 사용하여 동적으로 밈 상세 정보를 로드하도록 수정
- 이미지, 제목, 해시태그, 사용 맥락 및 기원 정보를 API 응답에서 가져오도록 변경

Author: Cllaude99

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

@@ -5,25 +5,13 @@ import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
 import { useRef, useState, useEffect } from 'react';
 import { useScroll, useTransform, useSpring } from 'motion/react';
-
-const DUMMY_DATA = {
-  resultType: 'SUCCESS',
-  success: {
-    id: 1,
-    title: '죽겠어요',
-    summary: '힘든 상황에서 사용되는 대표적인 밈',
-    usage:
-      '주로 매우 당황스럽거나 난처한 상황, 또는 감당하기 힘든 일이 생겼을 때, 또는 웃음이 터져 나올 것 같은 상황에서 짓는 김혜수 배우의 표정을 묘사한 움짤을 의미합니다. 주로 온라인 커뮤니티나 SNS에서 유행하며, 해당 상황에 공감하거나 재미를 표현하는 용도로 사용됩니다.',
-    origin:
-      "김혜수의 몇 안 되는 개그짤. 영화 《모던 보이》의 댄스신을 촬영하기 위해서 연습하던 도중, 지쳐 주저앉은 장면인데 '죽겠어요'란 대사와 묘한 눈빛의 싱크로율 때문에 패러디감이 되었다. 몇 안되는 다른 개그짤로 기를 죽이고 그래요도 있다.",
-    image: 'https://picsum.photos/800/600',
-    hashtags: ['직장인', '해탈짤'],
-    year: 2022,
-  },
-  error: null,
-} as const;
+import { useParams } from 'react-router-dom';
+import { useMemeDetailQuery } from '@meme_wiki/apis';
 
 const MemeDetailPage = () => {
+  const { memeId } = useParams();
+  const { data: memeDetail } = useMemeDetailQuery(memeId!);
+
   const theme = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollY } = useScroll({ container: containerRef });
@@ -52,14 +40,14 @@ const MemeDetailPage = () => {
       <S.Container ref={containerRef}>
         <S.ImageContainer style={{ height: smoothHeight }}>
           <S.Image
-            src={DUMMY_DATA.success.image}
-            alt={DUMMY_DATA.success.title}
+            src={memeDetail?.success.imgUrl}
+            alt={memeDetail?.success.title}
           />
           <S.ShareButton
             onClick={() => {
               nativeBridge.shareMeme({
-                title: DUMMY_DATA.success.title,
-                image: DUMMY_DATA.success.image,
+                title: memeDetail?.success.title ?? '',
+                image: memeDetail?.success.imgUrl ?? '',
               });
             }}
           >
@@ -69,26 +57,26 @@ const MemeDetailPage = () => {
         </S.ImageContainer>
         <S.ContentContainer>
           <S.YearBadge>
-            <S.YearText>{DUMMY_DATA.success.year}</S.YearText>
+            <S.YearText>{memeDetail?.success.trendPeriod}</S.YearText>
           </S.YearBadge>
-          <S.Title>{DUMMY_DATA.success.title}</S.Title>
+          <S.Title>{memeDetail?.success.title}</S.Title>
           <S.HashTags>
-            {DUMMY_DATA.success.hashtags.map((tag) => `#${tag} `)}
+            {memeDetail?.success.hashtags.map((tag) => `${tag} `)}
           </S.HashTags>
           <S.SectionTitle>
             <SymbolTwoIcon width={18} height={18} />
             이럴 때 쓰세요
           </S.SectionTitle>
-          <S.SectionText>{DUMMY_DATA.success.usage}</S.SectionText>
+          <S.SectionText>{memeDetail?.success.usageContext}</S.SectionText>
           <S.SectionTitle>
             <SymbolThreeIcon width={18} height={18} />
             이렇게 시작됐어요
           </S.SectionTitle>
-          <S.SectionText>{DUMMY_DATA.success.origin}</S.SectionText>
+          <S.SectionText>{memeDetail?.success.origin}</S.SectionText>
         </S.ContentContainer>
       </S.Container>
     </Layout>
   );
 };
 
-export default MemeDetailPage;
+export default MemeDetailPage;