chore: 🤖 openGraphの設定 画像の追加

package.json

@@ -10,7 +10,8 @@
     "lint": "next lint --fix",
     "format": "prettier --write .",
     "prepare": "husky",
-    "check:deps": "depcruise src"
+    "check:deps": "depcruise src",
+    "check:types": "tsx --noEmit"
   },
   "dependencies": {
     "@date-fns/tz": "^1.2.0",

src/app/layout.tsx

@@ -14,6 +14,19 @@ export const metadata: Metadata = {
     default: '閻魔帳',
   },
   description: 'チェイスチェイスジョーカーズのプレイ履歴を分析します。',
+  openGraph: {
+    title: '閻魔帳',
+    description: 'チェイスチェイスジョーカーズのプレイ履歴を分析します。',
+    url: 'https://放課後天地創造.club',
+    images: '/image/banner.png',
+  },
+  twitter: {
+    title: '閻魔帳',
+    description: 'チェイスチェイスジョーカーズのプレイ履歴を分析します。',
+    site: '@sweshelo',
+    images: '/image/banner.png',
+  },
+  icons: '/image/icon.png',
 }
 
 export default async function RootLayout({

src/components/header/index.tsx

@@ -3,11 +3,9 @@ import Link from 'next/link'
 export const Header = () => {
   return (
     <Link href={'/'}>
-      <div className="w-full bg-blue-900">
+      <div className="w-full bg-red-900">
         <div className="max-w-[800px] mx-auto p-4 flex items-center space-x-4">
-          <div className="w-12 h-12 bg-gray-800 rounded-lg flex items-center justify-center">
-            <div className="text-white">閻</div>
-          </div>
+          <div className="w-12 h-12 bg-gray-800 rounded-lg flex items-center justify-center bg-[url('/image/icon.png')] bg-contain" />
           <div className="flex-grow">
             <h1 className="text-white text-2xl font-bold">閻魔帳</h1>
             <p className="text-gray-300 text-xs">v2 &quot;medusa&quot; - @sweshelo</p>