seo : 사이트맵, 메타데이터 동적으로 생성

src/app/(Main)/feed/page.tsx

@@ -8,6 +8,7 @@ import { PageAnimation } from '@/components/PageAnimation';
 
 export const metadata: Metadata = {
   title: '포즈피드',
+  description: '포즈피드에서 조건에 맞는 포즈를 찾고, 친구한테 공유해보세요',
 };
 
 export default function Feed() {

src/app/(Main)/pick/page.tsx

@@ -4,6 +4,7 @@ import PickSection from './components/PickSection';
 
 export const metadata: Metadata = {
   title: '포즈픽',
+  description: '시간 없을 땐 포즈픽으로 빠르게 랜덤 포즈를 추천받아보세요.',
 };
 
 export default function Pick() {

src/app/(Main)/talk/page.tsx

@@ -6,6 +6,7 @@ import { Spacing } from '@/components/Spacing';
 
 export const metadata: Metadata = {
   title: '포즈톡',
+  description: '포즈톡에서 뽑은 랜덤 제시어로 나만의 개성있는 포즈를 완성해보세요.',
 };
 
 export default function Talk() {

src/app/(Sub)/detail/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { QueryAsyncBoundary } from '@suspensive/react-query';
+import { Metadata, ResolvingMetadata } from 'next';
 
 import DetailHeader from './components/DetailHeader';
 import DetailSection from './components/DetailSection';
@@ -8,6 +9,26 @@ import { Loading } from '@/components/Loading';
 import { PageAnimation } from '@/components/PageAnimation';
 import { HydrationProvider } from '@/components/Provider/HydrationProvider';
 
+export async function generateMetadata(
+  { params }: { params: { id: string } },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id = parseInt(params.id);
+  const {
+    poseInfo: { peopleCount, frameCount, tagAttributes },
+  } = await getPoseDetail(id);
+  const description = `${tagAttributes},${frameCount}컷,${peopleCount}인 포즈추천`;
+  const defaultOgTitle = (await parent).openGraph?.title;
+
+  return {
+    description,
+    openGraph: {
+      title: defaultOgTitle,
+      description: '이 포즈는 어때요?',
+    },
+  };
+}
+
 export default function DetailPage({ params }: { params: { id: number } }) {
   const { id } = params;
 

src/app/layout.tsx

@@ -12,32 +12,32 @@ import RecoilContextProvider from '@/provider/RecoilContextProvider';
 
 import type { Metadata } from 'next';
 
-const DEFAULT_OG_TITLE = 'PosePicker';
-const DEFAULT_OG_DESC = '다음 포즈 뭐하지? 포즈피커가 포즈 고민을 해결해 드릴게요!';
-const DEFAULT_OG_IMAGE = '/images/main_star.png';
+const META_TITLE = 'PosePicker';
+const META_DESCRIPTION = '다음 포즈 뭐하지? 포즈피커가 포즈고민을 해결해 드릴게요!';
+const META_OG_IMAGE = '/images/main_star.png';
 
 export const metadata: Metadata = {
   metadataBase: new URL(BASE_SITE_URL),
   title: {
-    default: DEFAULT_OG_TITLE,
-    template: `${DEFAULT_OG_TITLE} | %s`,
+    default: `${META_TITLE} - 포즈피커`,
+    template: `${META_TITLE} | %s`,
   },
-  description: '다음 포즈 뭐하지? 포즈피커의 포즈 추천으로 포즈 고민을 해결해 드릴게요!',
+  description: META_DESCRIPTION,
   verification: {
     google: 'MB7qV_Oa4G4gR0jHgjtnE6S4g4blocE2mjo7z-z2f6Q',
   },
   other: {
     'naver-site-verification': '65f3aba9349cce28018ac7a97d4f87ff00709aa3',
   },
   openGraph: {
-    title: DEFAULT_OG_TITLE,
-    description: DEFAULT_OG_DESC,
-    images: [DEFAULT_OG_IMAGE],
+    title: META_TITLE,
+    description: META_DESCRIPTION,
+    images: [META_OG_IMAGE],
   },
   twitter: {
-    title: DEFAULT_OG_TITLE,
-    description: DEFAULT_OG_DESC,
-    images: [DEFAULT_OG_IMAGE],
+    title: META_TITLE,
+    description: META_DESCRIPTION,
+    images: [META_OG_IMAGE],
   },
   viewport: {
     width: 'device-width',

src/app/sitemap.ts

@@ -0,0 +1,22 @@
+import { getPoseFeed } from '@/apis';
+import { URL } from '@/constants/url';
+
+export default async function sitemap() {
+  const baseUrl = URL.site;
+
+  const {
+    filteredContents: { content },
+  } = await getPoseFeed(0, 0, '', 0);
+  const detailUrls = content.map(({ poseInfo }) => ({
+    url: `${baseUrl}/detail/${poseInfo.poseId}`,
+    lastModified: poseInfo.updatedAt,
+  }));
+
+  return [
+    { url: baseUrl, lastModified: new Date() },
+    { url: `${baseUrl}/pick`, lastModified: new Date() },
+    { url: `${baseUrl}/talk`, lastModified: new Date() },
+    { url: `${baseUrl}/feed`, lastModified: new Date() },
+    ...detailUrls,
+  ];
+}

src/constants/url.ts

@@ -1,4 +1,5 @@
 export const URL = {
+  site: 'https://www.posepicker.site',
   inquiry:
     'https://docs.google.com/forms/d/e/1FAIpQLSeZuPZTXnO4rZ4k39SzXv96PWAW4gLcTYBrsRUrgRHSVV9Ldg/viewform?usp=sf_link',
 };