chore: og 정보를 추가합니다 (#48)

hamsurang · Sep 18, 2024 · 6f9462b · 6f9462b
1 parent 5918611
commit 6f9462b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/web/app/_shared/components/EventListener.tsx b/web/app/_shared/components/EventListener.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { type MessageData, isValidEventOrigin } from '@hamsurang/utils'
+import { useEffect } from 'react'
+
+export const EventListener = () => {
+  useEffect(() => {
+    const handleIncomingMessage = ({ origin, data }: MessageEvent<MessageData>) => {
+      if (!isValidEventOrigin(origin)) {
+        return
+      }
+
+      if (data.type === 'routeChange') {
+        history.replaceState({}, '', data.route)
+      }
+    }
+
+    addEventListener('message', handleIncomingMessage)
+
+    return () => {
+      removeEventListener('message', handleIncomingMessage)
+    }
+  }, [])
+
+  return null
+}
diff --git a/web/app/_shared/components/index.ts b/web/app/_shared/components/index.ts
@@ -0,0 +1,2 @@
+export * from './EventListener'
+export * from './Header'
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -1,37 +1,22 @@
-'use client'
-
 import '@hamsurang/ui/globals.css'
-import { type MessageData, isValidEventOrigin } from '@hamsurang/utils'
+import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import type { PropsWithChildren } from 'react'
-import { useEffect } from 'react'
-import { Header } from './_shared/components/Header'
+import { EventListener, Header } from './_shared/components'
 
 const inter = Inter({ subsets: ['latin'] })
 
-export default function RootLayout({ children }: PropsWithChildren): JSX.Element {
-  useEffect(() => {
-    const handleIncomingMessage = ({ origin, data }: MessageEvent<MessageData>) => {
-      if (!isValidEventOrigin(origin)) {
-        return
-      }
-
-      if (data.type === 'routeChange') {
-        history.replaceState({}, '', data.route)
-      }
-    }
-
-    addEventListener('message', handleIncomingMessage)
-
-    return () => {
-      removeEventListener('message', handleIncomingMessage)
-    }
-  }, [])
+export const metadata: Metadata = {
+  title: '함수랑산악회',
+  description: '함수랑산악회의 공식 홈페이지입니다.',
+}
 
+export default function RootLayout({ children }: PropsWithChildren): JSX.Element {
   return (
     <html lang="ko">
       <body className={inter.className}>
         <Header />
+        <EventListener />
         {children}
       </body>
     </html>

diff --git a/web/app/opengraph-image.png b/web/app/opengraph-image.png