♿ Add metadata

app/detail/[id]/page.js

@@ -1,4 +1,18 @@
-import Content from "./content";
+import Content from "./Content";
+
+export async function generateMetadata({ params }) {
+    const id = params.id;
+    const item = await fetch(`${process.env.URL}/api/detail?id=${id}`).then(
+        (res) => res.json()
+    );
+
+    return {
+        description: `${item.brand}-${item.name} 상세 정보`,
+        openGraph: {
+            description: `${item.brand}-${item.name} 상세 정보`,
+        },
+    };
+}
 
 async function getData(id) {
     const res = await fetch(`${process.env.URL}/api/detail?id=${id}`, {

app/layout.js

@@ -3,8 +3,21 @@ import Header from "./components/common/Header";
 import AuthSession from "./AuthSession";
 
 export const metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
+    title: "ChocoLet",
+    description: {
+        default: "초콜릿 추천 서비스 초코렛",
+        template: "%s | 초코렛",
+    },
+    icons: {
+        icon: "/assets/favicon.ico",
+    },
+    openGraph: {
+        title: "ChocoLet",
+        description: {
+            default: "초콜릿 추천 서비스 초코렛",
+            template: "%s | 초코렛",
+        },
+    },
 };
 
 export default function RootLayout({ children }) {

app/list/[category]/[listId]/page.js

@@ -1,6 +1,40 @@
 import styles from "./list.module.css";
 import NavList from "./NavList";
-import Content from "./content";
+import Content from "./Content";
+
+export function generateMetadata({ params }) {
+    const category = params.category;
+
+    if (category === "price") {
+        return {
+            description: "가격대별 초콜릿 조회",
+            openGraph: {
+                description: "가격대별 초콜릿 조회",
+            },
+        };
+    } else if (category === "country") {
+        return {
+            description: "나라별 초콜릿 조회",
+            openGraph: {
+                description: "나라별 초콜릿 조회",
+            },
+        };
+    } else if (category === "type") {
+        return {
+            description: "종류별 초콜릿 조회",
+            openGraph: {
+                description: "종류별 초콜릿 조회",
+            },
+        };
+    } else if (category === "flavor") {
+        return {
+            description: "맛별 초콜릿 조회",
+            openGraph: {
+                description: "맛별 초콜릿 조회",
+            },
+        };
+    }
+}
 
 async function getData(category, listId) {
     const param1 = category;

app/test/page.js

@@ -1,8 +1,14 @@
-"use client";
 import styles from "./test.module.css";
 import Link from "next/link";
 import { HiArrowNarrowRight } from "react-icons/hi";
 
+export const metadata = {
+    description: "초콜릿 추천 테스트",
+    openGraph: {
+        description: "초콜릿 추천 테스트",
+    },
+};
+
 export default function Test() {
     return (
         <main className={styles.test_main}>