feat: dynamic meta 및 og 적용

src/apis/vote.ts

@@ -24,7 +24,7 @@ export interface VoteContent {
   count: number;
 }
 
-const getVoteDetail = (postId: string) => {
+export const getVoteDetail = (postId: string) => {
   return api.get<VoteResultResponse>({
     url: `/votes/${postId}`,
   });

src/app/(post)/result/[postId]/_components/CommentInput/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ChangeEvent, useState } from 'react';
 
 import { useParams } from 'next/navigation';

src/app/(post)/result/[postId]/layout.tsx

@@ -1,12 +1,13 @@
-'use client';
-
 import { PropsWithChildren, Suspense } from 'react';
 
 import Spinner from '@/src/components/Spinner';
+import TopBar from '@/src/components/Topbar';
+import { getGenerateMetadata } from '@/src/utils/getGenerateMetadata';
 
-import TopBar from '../../../../components/Topbar';
 import CommentInput from './_components/CommentInput';
 
+export const generateMetadata = getGenerateMetadata();
+
 const PostDetailLayout = ({ children }: PropsWithChildren) => {
   return (
     <>

src/app/layout.tsx

@@ -1,30 +1,24 @@
-import type { Metadata, Viewport } from 'next';
+import type { Viewport } from 'next';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 import GoogleAnalytics from '@/src/components/GoogleAnalystics';
 
 import Introduction from '../components/Introduction';
 import { MSWComponent } from '../mocks/MSWComponent';
+import { getMetadata } from '../utils/getMetadata';
 import Providers from './Providers';
 import './globals.css';
 
+export const metadata = getMetadata();
+
 export const viewport: Viewport = {
   themeColor: '#ffffff',
   initialScale: 1,
   minimumScale: 1,
   viewportFit: 'cover',
 };
 
-export const metadata: Metadata = {
-  title: '픽키',
-  description: '투표 플랫폼 픽키 - COPYRIGHT ©picky',
-  manifest: '/manifest.json',
-  icons: {
-    icon: '/app-Icon/icon-512x512.png',
-  },
-};
-
 const RootLayout = ({
   children,
 }: Readonly<{

src/constants/meta.ts

@@ -0,0 +1,9 @@
+export const META = {
+  title: 'picky',
+  siteName: 'picky',
+  description: '까다로운 고민에 대한 해답을 pick!',
+  url: 'https://picky-fe.vercel.app/',
+  keyword: ['고민', 'picky', 'pick', '투표', '추천', '결정'],
+  image: '/picky/thumbnail.png',
+  icon: '/app-Icon/icon-512x512.png',
+};

src/utils/getGenerateMetadata.ts

@@ -0,0 +1,42 @@
+import { getVoteDetail } from '@/src/apis/vote';
+import { getMetadata } from '@/src/utils/getMetadata';
+
+const RESULT_MESSAGE = '투표 결과를 확인하세요.';
+const VOTE_MESSAGE = 'picky에서 투표해보세요!';
+
+export const getGenerateMetadata =
+  () =>
+  async ({ params }: { params: { postId: string } }) => {
+    try {
+      const postId = params.postId;
+      const response = await getVoteDetail(postId);
+      if (!response || !response.body) {
+        return;
+      }
+      const {
+        voteTitle,
+        hasVoted,
+        voteOptions,
+        terminated: isTerminated,
+      } = response.body;
+
+      const thumbnailImageUrl =
+        voteOptions &&
+        voteOptions
+          .map(({ voteOptionImageUrl }) => voteOptionImageUrl)
+          .filter(url => url)[0];
+
+      const title = `${voteTitle}`;
+      const description =
+        hasVoted || isTerminated ? RESULT_MESSAGE : VOTE_MESSAGE;
+
+      return getMetadata({
+        title,
+        description,
+        asPath: `/Result/${postId}`,
+        image: thumbnailImageUrl,
+      });
+    } catch (error) {
+      return;
+    }
+  };

src/utils/getMetadata.ts

@@ -0,0 +1,54 @@
+import type { Metadata } from 'next';
+
+import { META } from '@/src/constants/meta';
+
+interface GetMetadataProps {
+  title?: string;
+  description?: string;
+  asPath?: string;
+  image?: string;
+  icon?: string;
+}
+
+export const getMetadata = (metadataProps?: GetMetadataProps) => {
+  const { title, description, asPath, image, icon } = metadataProps || {};
+
+  const TITLE = title ? `${title} | picky` : META.title;
+  const DESCRIPTION = description || META.description;
+  const PAGE_URL = asPath ? META.url + asPath : META.url;
+  const IMAGE = image || META.image;
+  const ICON = icon || META.icon;
+  const metadata: Metadata = {
+    metadataBase: new URL(META.url),
+    alternates: {
+      canonical: PAGE_URL,
+    },
+    manifest: '/manifest.json',
+    title: TITLE,
+    description: DESCRIPTION,
+    keywords: [...META.keyword],
+    icons: {
+      icon: ICON,
+    },
+    openGraph: {
+      title: TITLE,
+      description: DESCRIPTION,
+      siteName: TITLE,
+      locale: 'ko_KR',
+      type: 'website',
+      url: PAGE_URL,
+      images: {
+        url: IMAGE,
+      },
+    },
+    twitter: {
+      title: TITLE,
+      description: DESCRIPTION,
+      images: {
+        url: IMAGE,
+      },
+    },
+  };
+
+  return metadata;
+};