feat: 카테고리 기반 페이지 및 컴포넌트 시스템 구현

- [category]/[slug] 동적 라우팅으로 카테고리별 포스트 상세 페이지 구현
- [category] 페이지로 카테고리별 포스트 목록 제공
- 기존 posts 컴포넌트들을 카테고리 기반으로 마이그레이션
- PostContent, PostHeader, PostNavigation 등 재사용 가능한 컴포넌트
- CategoryBadge, CategoryList 등 카테고리 전용 컴포넌트 추가

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: kickbelldev

contents/dev/category.json

@@ -6,16 +6,20 @@ import {
   PostHeader,
   PostNavigation,
   RelatedPosts,
-} from '@/app/posts/_components'
+} from '@/app/[category]/_components'
+import { type CategoryId, isValidCategoryId } from '@/entities/categories'
 import { getAllPosts, getPostNavigation } from '@/entities/posts'
 import { getRelatedPostsByTags } from '@/entities/tags'
 
 export async function generateStaticParams() {
   const posts = await getAllPosts()
 
-  const params = posts.map((post) => ({
-    slug: encodeURIComponent(post.slug),
-  }))
+  const params = posts
+    .filter((post) => post.data.category) // 카테고리가 있는 포스트만
+    .map((post) => ({
+      category: post.data.category as CategoryId,
+      slug: encodeURIComponent(post.slug),
+    }))
 
   return params
 }
@@ -24,17 +28,29 @@ export default async function PostPage({
   params,
 }: {
   params: Promise<{
+    category: string
     slug: string
   }>
 }) {
-  const { slug } = await params
+  const { category, slug } = await params
   const decodedSlug = decodeURIComponent(slug)
 
+  // 카테고리 유효성 검증
+  if (!isValidCategoryId(category)) {
+    notFound()
+  }
+
   try {
+    // 카테고리 기반 경로로 MDX 파일 import
     const { default: Post, frontmatter } = await import(
-      `@/contents/${decodedSlug}.mdx`
+      `@/contents/${category}/${decodedSlug}`
     )
 
+    // 포스트의 실제 카테고리와 URL 카테고리가 일치하는지 확인
+    if (frontmatter.category && frontmatter.category !== category) {
+      notFound()
+    }
+
     const { previousPost, nextPost } = await getPostNavigation(decodedSlug)
     const relatedPosts = await getRelatedPostsByTags(decodedSlug)
 
@@ -44,11 +60,7 @@ export default async function PostPage({
         <PostContent>
           <Post />
         </PostContent>
-        <PostFooter
-          previousPost={previousPost}
-          nextPost={nextPost}
-          relatedPosts={relatedPosts}
-        />
+        <PostFooter />
         <PostNavigation
           previousPost={previousPost}
           nextPost={nextPost}

contents/life/category.json

@@ -0,0 +1,53 @@
+import { cn } from '@/app/_lib/cn'
+import { type CategoryId, getCategoryById } from '@/entities/categories'
+
+interface CategoryBadgeProps {
+  categoryId: CategoryId
+  className?: string
+  showIcon?: boolean
+}
+
+export async function CategoryBadge({
+  categoryId,
+  className,
+  showIcon = true,
+}: CategoryBadgeProps) {
+  const category = await getCategoryById(categoryId)
+
+  if (!category) {
+    return null
+  }
+
+  const colorClasses = {
+    blue: 'bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-200',
+    green: 'bg-green-100 text-green-800 border-green-200 hover:bg-green-200',
+    red: 'bg-red-100 text-red-800 border-red-200 hover:bg-red-200',
+    yellow:
+      'bg-yellow-100 text-yellow-800 border-yellow-200 hover:bg-yellow-200',
+    purple:
+      'bg-purple-100 text-purple-800 border-purple-200 hover:bg-purple-200',
+    gray: 'bg-gray-100 text-gray-800 border-gray-200 hover:bg-gray-200',
+  }
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1 px-2 py-1 text-sm font-medium rounded-md border transition-colors',
+        colorClasses[category.color as keyof typeof colorClasses] ||
+          colorClasses.gray,
+        className
+      )}
+      title={category.description}
+    >
+      {showIcon && category.icon && (
+        <span
+          className="text-xs"
+          aria-hidden="true"
+        >
+          {category.icon}
+        </span>
+      )}
+      {category.name}
+    </span>
+  )
+}

src/app/posts/[slug]/page.tsx src/app/[category]/[slug]/page.tsxsrc/app/posts/[slug]/page.tsx renamed to src/app/[category]/[slug]/page.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/app/_lib/cn'
+import {
+  type CategoryWithCount,
+  getAllCategories,
+  getCategoriesWithCount,
+} from '@/entities/categories'
+
+import { CategoryBadge } from './CategoryBadge'
+
+interface CategoryListProps {
+  categories?: CategoryWithCount[]
+  showCount?: boolean
+  className?: string
+}
+
+export function CategoryList({
+  categories,
+  showCount = false,
+  className,
+}: CategoryListProps) {
+  const displayCategories =
+    categories ||
+    getAllCategories().map((cat) => ({
+      ...cat,
+      count: 0,
+    }))
+
+  if (displayCategories.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={cn('flex flex-wrap gap-2', className)}>
+      {displayCategories.map((category) => (
+        <div
+          key={category.id}
+          className="flex items-center gap-1"
+        >
+          <CategoryBadge categoryId={category.id} />
+          {showCount && (
+            <span className="text-sm text-stone-500">({category.count})</span>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

src/app/[category]/_components/CategoryBadge.tsx

@@ -1,24 +1,11 @@
 import { cn } from '@/app/_lib/cn'
-import type { Post } from '@/entities/posts/types'
-
-import { PostNavigation } from './PostNavigation'
-import { RelatedPosts } from './RelatedPosts'
 
 interface PostFooterProps {
-  previousPost?: Pick<Post, 'slug' | 'data'>
-  nextPost?: Pick<Post, 'slug' | 'data'>
-  relatedPosts?: Array<Pick<Post, 'slug' | 'data'>>
   author?: string
   className?: string
 }
 
-export function PostFooter({
-  previousPost,
-  nextPost,
-  relatedPosts,
-  author,
-  className,
-}: PostFooterProps) {
+export function PostFooter({ author, className }: PostFooterProps) {
   return (
     <footer className={cn('pt-8', className)}>
       {/* TODO: Implement AuthorInfo */}

src/app/[category]/_components/CategoryList.tsx

@@ -1,12 +1,15 @@
 import { cn } from '@/app/_lib/cn'
 import { formatDate } from '@/app/_lib/formatDate'
+import type { CategoryId } from '@/entities/categories/types'
 
+import { CategoryBadge } from './CategoryBadge'
 import { TagList } from './TagList'
 
 interface PostHeaderProps {
   title: string
   date: string
   tags: string[]
+  category?: CategoryId
   readingTime?: number
   author?: string
   className?: string
@@ -16,15 +19,19 @@ export function PostHeader({
   title,
   date,
   tags,
+  category,
   readingTime,
   author,
   className,
 }: PostHeaderProps) {
   return (
     <header className={cn('mb-8 pb-8 ', className)}>
-      <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-stone-900 dark:text-stone-100 mb-4 leading-tight">
-        {title}
-      </h1>
+      <div className="flex items-center gap-3 mb-4">
+        {category && <CategoryBadge categoryId={category} />}
+        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-stone-900 dark:text-stone-100 leading-tight">
+          {title}
+        </h1>
+      </div>
       <div className="flex flex-col sm:flex-row sm:flex-wrap sm:items-center gap-2 sm:gap-4 text-stone-600 dark:text-stone-400">
         <time
           dateTime={date}

src/app/posts/_components/PostContent.tsx …p/[category]/_components/PostContent.tsxsrc/app/posts/_components/PostContent.tsx renamed to src/app/[category]/_components/PostContent.tsx src/app/posts/_components/PostContent.tsx renamed to src/app/[category]/_components/PostContent.tsx

@@ -28,7 +28,7 @@ export function PostNavigation({
       <div className="flex-1 max-w-[calc(50%-0.5rem)]">
         {previousPost && (
           <Link
-            href={`/posts/${previousPost.slug}`}
+            href={`/${previousPost.data.category || 'uncategorized'}/${previousPost.slug}`}
             className={cn(
               'flex items-center gap-2 p-3 rounded-lg w-full',
               'transition-colors duration-200',
@@ -61,7 +61,7 @@ export function PostNavigation({
       <div className="flex-1 flex justify-end max-w-[calc(50%-0.5rem)]">
         {nextPost && (
           <Link
-            href={`/posts/${nextPost.slug}`}
+            href={`/${nextPost.data.category || 'uncategorized'}/${nextPost.slug}`}
             className={cn(
               'flex items-center gap-2 p-3 rounded-lg text-right w-full',
               'transition-colors duration-200',

src/app/posts/_components/PostFooter.tsx …pp/[category]/_components/PostFooter.tsxsrc/app/posts/_components/PostFooter.tsx renamed to src/app/[category]/_components/PostFooter.tsx src/app/posts/_components/PostFooter.tsx renamed to src/app/[category]/_components/PostFooter.tsx

@@ -13,7 +13,7 @@ export function RelatedPostItem({
   return (
     <Link
       key={post.slug}
-      href={`/posts/${post.slug}`}
+      href={`/${post.data.category || 'uncategorized'}/${post.slug}`}
       className="block w-full max-w-sm"
     >
       <div className="border rounded-lg p-4 h-full duration-200">