feat: 새 로고 적용 및 라우트별 동적 OG 이미지 생성

- CrossPoint 새 로고 (Option 9) 적용: logo.svg, 부팅 화면 SVG, BootScreen 컴포넌트
- 각 라우트별 동적 OG 이미지 생성 (next/og ImageResponse)
- Noto Sans KR 폰트를 사용한 한글 OG 이미지 렌더링
- layout.tsx에서 정적 OG 이미지 참조를 동적 생성으로 전환

Author: eunchurn

public/logo.svg

@@ -0,0 +1,14 @@
+import { generateOGImage, ogSize, ogContentType } from "@/lib/og";
+
+export const dynamic = "force-static"
+
+export const alt = "웹 플래셔 | CrossPoint Reader";
+export const size = ogSize;
+export const contentType = ogContentType;
+
+export default async function Image() {
+  return generateOGImage(
+    "웹 플래셔",
+    "웹 브라우저에서 바로 CrossPoint Reader 펌웨어를 설치하세요",
+  );
+}

public/x4-crosspoint-boot-xteink.svg

@@ -0,0 +1,14 @@
+import { generateOGImage, ogSize, ogContentType } from "@/lib/og";
+
+export const dynamic = "force-static"
+
+export const alt = "폰트 변환기 | CrossPoint Reader";
+export const size = ogSize;
+export const contentType = ogContentType;
+
+export default async function Image() {
+  return generateOGImage(
+    "폰트 변환기",
+    "TTF/OTF 폰트를 CrossPoint Reader 전용 EPD 폰트로 변환",
+  );
+}

public/x4-crosspoint-boot.svg

@@ -0,0 +1,14 @@
+import { generateOGImage, ogSize, ogContentType } from "@/lib/og";
+
+export const dynamic = "force-static"
+
+export const alt = "사용자 가이드 | CrossPoint Reader";
+export const size = ogSize;
+export const contentType = ogContentType;
+
+export default async function Image() {
+  return generateOGImage(
+    "사용자 가이드",
+    "CrossPoint Reader 한국어 펌웨어의 모든 기능과 사용법",
+  );
+}

src/app/flasher/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import { generateOGImage, ogSize, ogContentType } from "@/lib/og";
+
+export const dynamic = "force-static"
+
+export const alt = "설치 가이드 | CrossPoint Reader";
+export const size = ogSize;
+export const contentType = ogContentType;
+
+export default async function Image() {
+  return generateOGImage(
+    "설치 가이드",
+    "Xteink X4에 CrossPoint Reader 한국어 펌웨어를 설치하는 방법",
+  );
+}

src/app/font-converter/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import { generateOGImage, ogSize, ogContentType } from "@/lib/og";
+
+export const dynamic = "force-static"
+
+export const alt = "한글 폰트 정보 | CrossPoint Reader";
+export const size = ogSize;
+export const contentType = ogContentType;
+
+export default async function Image() {
+  return generateOGImage(
+    "한글 폰트 정보",
+    "KoPub 바탕, Pretendard 등 내장 한글 폰트 정보와 라이선스",
+  );
+}

src/app/guide/opengraph-image.tsx

@@ -52,20 +52,13 @@ export const metadata: Metadata = {
     siteName: siteName,
     locale: "ko_KR",
     type: "website",
-    images: [
-      {
-        url: "/opengraph.png",
-        width: 1200,
-        height: 630,
-        alt: "CrossPoint Reader - Xteink X4 한국어 펌웨어",
-      },
-    ],
+    images: ["/opengraph-image"],
   },
   twitter: {
     card: "summary_large_image",
     title: siteName,
     description: siteDescription,
-    images: ["/opengraph.png"],
+    images: ["/opengraph-image"],
     creator: "@eunchurn",
   },
   icons: {

src/app/install/opengraph-image.tsx

@@ -0,0 +1,14 @@
+import { generateOGImage, ogSize, ogContentType } from "@/lib/og";
+
+export const dynamic = "force-static"
+
+export const alt = "CrossPoint Reader - 한국어 펌웨어 가이드";
+export const size = ogSize;
+export const contentType = ogContentType;
+
+export default async function Image() {
+  return generateOGImage(
+    "CrossPoint Reader",
+    "Xteink X4 전자잉크 리더를 위한 한국어 오픈소스 펌웨어",
+  );
+}