refactor: Create PostDetailPage common component to eliminate code du…

…plication

frontend/apps/service-site/src/app/[lang]/posts/[slug]/page.tsx

@@ -1,9 +1,7 @@
 import type { PageProps } from '@/app/types'
 import { langSchema, langs } from '@/features/i18n'
-import { findPostByLangAndSlug } from '@/features/posts'
-import { MDXContent } from '@/libs/contentlayer'
+import { PostDetailPage, findPostByLangAndSlug } from '@/features/posts'
 import { allPosts } from 'contentlayer/generated'
-import { format, parseISO } from 'date-fns'
 import { notFound } from 'next/navigation'
 import { object, parse, string } from 'valibot'
 
@@ -30,18 +28,5 @@ const paramsSchema = object({
 export default function Page({ params }: PageProps) {
   const { lang, slug } = parse(paramsSchema, params)
 
-  const post = findPostByLangAndSlug({ lang, slug })
-  if (!post) notFound()
-
-  return (
-    <article>
-      <div>
-        <time dateTime={post.date}>
-          {format(parseISO(post.date), 'LLLL d, yyyy')}
-        </time>
-        <h1>{post.title}</h1>
-      </div>
-      <MDXContent code={post.body.code} />
-    </article>
-  )
+  return <PostDetailPage lang={lang} slug={slug} />
 }

frontend/apps/service-site/src/app/posts/[slug]/page.tsx

@@ -1,9 +1,7 @@
 import type { PageProps } from '@/app/types'
 import { fallbackLang } from '@/features/i18n'
-import { findPostByLangAndSlug } from '@/features/posts'
-import { MDXContent } from '@/libs/contentlayer'
+import { PostDetailPage, findPostByLangAndSlug } from '@/features/posts'
 import { allPosts } from 'contentlayer/generated'
-import { format, parseISO } from 'date-fns'
 import { notFound } from 'next/navigation'
 import { object, parse, string } from 'valibot'
 
@@ -26,18 +24,5 @@ const paramsSchema = object({
 export default function Page({ params }: PageProps) {
   const { slug } = parse(paramsSchema, params)
 
-  const post = findPostByLangAndSlug({ lang: fallbackLang, slug })
-  if (!post) notFound()
-
-  return (
-    <article>
-      <div>
-        <time dateTime={post.date}>
-          {format(parseISO(post.date), 'LLLL d, yyyy')}
-        </time>
-        <h1>{post.title}</h1>
-      </div>
-      <MDXContent code={post.body.code} />
-    </article>
-  )
+  return <PostDetailPage lang={fallbackLang} slug={slug} />
 }

frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx

@@ -0,0 +1,28 @@
+import type { Lang } from '@/features/i18n'
+import { MDXContent } from '@packages/mdx-components'
+import { format, parseISO } from 'date-fns'
+import { notFound } from 'next/navigation'
+import type { FC } from 'react'
+import { findPostByLangAndSlug } from '../../utils'
+
+type Props = {
+  lang: Lang
+  slug: string
+}
+
+export const PostDetailPage: FC<Props> = ({ lang, slug }) => {
+  const post = findPostByLangAndSlug({ lang, slug })
+  if (!post) notFound()
+
+  return (
+    <article>
+      <div>
+        <time dateTime={post.date}>
+          {format(parseISO(post.date), 'LLLL d, yyyy')}
+        </time>
+        <h1>{post.title}</h1>
+      </div>
+      <MDXContent code={post.body.code} />
+    </article>
+  )
+}

frontend/apps/service-site/src/features/posts/components/PostDetailPage/index.ts

@@ -0,0 +1 @@
+export * from './PostDetailPage'

frontend/apps/service-site/src/features/posts/components/index.ts

@@ -1 +1,2 @@
+export * from './PostDetailPage'
 export * from './PostListPage'