From 561453cf9c846381d0ffe331e2f7480934442b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=8F=99=EC=98=81=20=EA=B9=80?= <kimarang0@naver.com>
Date: Wed, 21 Aug 2024 00:24:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20og=20image=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/[...slug]/page.tsx            | 12 +++-
 src/app/opengraph/[...slug]/route.tsx | 90 +++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 src/app/opengraph/[...slug]/route.tsx

diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index fd459b6..bbc2f17 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -7,6 +7,7 @@ import { Container } from "@/components/layout/container";
 import ScrollEvent from "@/components/ScrollEvent";
 import HeaderWords from "@/components/layout/header-words";
 import { blogdata } from "@/lib/constants";
+import { Metadata } from "next";
 
 export default async function ({ params }: { params: { slug: string[] } }) {
 	const { slug } = params;
@@ -73,7 +74,11 @@ export async function generateStaticParams() {
 	});
 }
 
-export function generateMetadata({ params }: { params: { slug: string[] } }) {
+export function generateMetadata({
+	params,
+}: {
+	params: { slug: string[] };
+}): Metadata {
 	const { slug } = params;
 	const target = allDocuments.find((docs) => {
 		return slug.join("/") === docs._raw.sourceFileDir;
@@ -85,8 +90,11 @@ export function generateMetadata({ params }: { params: { slug: string[] } }) {
 		};
 	} else {
 		return {
-			title: target.title + " - " + blogdata.blogName,
+			title: target.title + " | " + blogdata.blogName,
 			description: target.description,
+			openGraph: {
+				images: [`/opengraph/${slug.join("/")}`],
+			},
 		};
 	}
 }
diff --git a/src/app/opengraph/[...slug]/route.tsx b/src/app/opengraph/[...slug]/route.tsx
new file mode 100644
index 0000000..1adff3f
--- /dev/null
+++ b/src/app/opengraph/[...slug]/route.tsx
@@ -0,0 +1,90 @@
+import { allDocuments } from "@/contentlayer/generated";
+import { ImageResponse } from "next/og";
+
+export const size = {
+	width: 1200,
+	height: 630,
+};
+
+export async function GET(
+	request: Request,
+	{ params }: { params: { slug: string[] } }
+) {
+	const { slug } = params;
+	const target = allDocuments.find((docs) => {
+		return slug.join("/") === docs._raw.sourceFileDir;
+	});
+
+	const font = fetch(
+		new URL(
+			"https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff"
+		)
+	).then((res) => res.arrayBuffer());
+
+	return new ImageResponse(
+		(
+			<>
+				{
+					// ImageResponse JSX element
+				}
+				<div
+					style={{
+						height: "640px",
+						width: "1200px",
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						justifyContent: "center",
+						backgroundColor: "#fff",
+						fontSize: 32,
+					}}
+				>
+					<svg
+						width="75"
+						viewBox="0 0 75 65"
+						fill="#000"
+						style={{ margin: "0 75px" }}
+					>
+						<path d="M37.59.25l36.95 64H.64l36.95-64z"></path>
+					</svg>
+					<div
+						style={{
+							fontSize: 48,
+							marginTop: 40,
+						}}
+					>
+						{target?.title}
+					</div>
+					<div
+						style={{
+							marginTop: 40,
+						}}
+					>
+						{target?.description}
+					</div>
+				</div>
+			</>
+		),
+		{
+			...size,
+			fonts: [
+				{
+					name: "Pretendard",
+					data: await font,
+					style: "normal",
+				},
+			],
+		}
+	);
+}
+
+export async function generateStaticParams() {
+	const docs = allDocuments;
+
+	return docs.map((doc) => {
+		const path = doc._raw.sourceFileDir;
+		return {
+			slug: path.split("/"),
+		};
+	});
+}