feat: 미들웨어에서 메타 태그 동적 수정 기능 추가

- '/meme/:path*' 경로에 대한 처리 로직을 추가하여 기본 HTML을 가져오고, 특정 조건에 따라 OG 및 Twitter 메타 태그를 동적으로 수정
- '/meme/{id}' 형식이 아닌 경우 기본 OG 태그 설정을 통해 사용자 경험 향상

Author: Cllaude99

apps/web/middleware.ts

@@ -1,11 +1,60 @@
 export const config = {
-  matcher: ['/meme/:memeId((?!quiz)[^/]+)'],
+  matcher: ['/meme/:path*'],
 };
 
 export default async function middleware(request: Request) {
   const url = new URL(request.url);
-  const memeId = url.pathname.split('/').pop();
+  const pathSegments = url.pathname.split('/');
+  const memeId = pathSegments[pathSegments.length - 1];
 
+  // 기본 HTML을 가져옵니다
+  const res = await fetch(new URL('/', request.url));
+  const html = await res.text();
+
+  // /meme/{id} 형식이 아닌 경우 기본 OG 태그 설정
+  if (
+    pathSegments[1] === 'meme' &&
+    (pathSegments[2] === 'quiz' || !pathSegments[2])
+  ) {
+    const modifiedHtml = html
+      .replace(
+        /<meta\s+property="og:title"\s+content="[^"]*"[^>]*>/,
+        `<meta property="og:title" content="Meme Wiki - 밈 문화의 모든 것" />`,
+      )
+      .replace(
+        /<meta\s+property="og:description"\s+content="[^"]*"[^>]*>/,
+        `<meta property="og:description" content="나만의 밈을 만들고 공유하세요." />`,
+      )
+      .replace(
+        /<meta\s+property="og:image"\s+content="[^"]*"[^>]*>/,
+        `<meta property="og:image" content="https://meme-wiki.net/thumbnail.svg" />`,
+      )
+      .replace(
+        /<meta\s+property="og:url"\s+content="[^"]*"[^>]*>/,
+        `<meta property="og:url" content="${url.href}" />`,
+      )
+      .replace(
+        /<meta\s+property="twitter:title"\s+content="[^"]*"[^>]*>/,
+        `<meta property="twitter:title" content="Meme Wiki - 밈 문화의 모든 것" />`,
+      )
+      .replace(
+        /<meta\s+property="twitter:description"\s+content="[^"]*"[^>]*>/,
+        `<meta property="twitter:description" content="나만의 밈을 만들고 공유하세요." />`,
+      )
+      .replace(
+        /<meta\s+property="twitter:image"\s+content="[^"]*"[^>]*>/,
+        `<meta property="twitter:image" content="https://meme-wiki.net/thumbnail.svg" />`,
+      );
+
+    return new Response(modifiedHtml, {
+      status: 200,
+      headers: {
+        'content-type': 'text/html;charset=UTF-8',
+      },
+    });
+  }
+
+  // /meme/{id} 경로에 대한 처리
   try {
     const response = await fetch(
       `https://api.meme-wiki.net/api/memes/${memeId}`,