feat: 카테고리 기반 네비게이션 시스템 구현

- NavLink 컴포넌트 추가로 재사용 가능한 네비게이션 링크 구현
- Header 컴포넌트를 카테고리 기반 네비게이션으로 업데이트
- 동적 카테고리 메뉴 생성으로 확장 가능한 구조 제공
- 카테고리별 포스트 개수 표시 지원

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

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

Author: kickbelldev

src/app/_components/Header.tsx

@@ -1,6 +1,14 @@
 import Link from 'next/link'
 
-export default function Header() {
+import { getCategoriesWithCount } from '@/entities/categories'
+import { getAllPosts } from '@/entities/posts'
+
+import NavLink from './NavLink'
+
+export default async function Header() {
+  const posts = await getAllPosts()
+  const categories = await getCategoriesWithCount(posts)
+
   return (
     <header className="sticky top-0 z-50 border-b border-stone-200 bg-white">
       <nav className="container mx-auto px-5 h-14 flex items-center gap-x-6">
@@ -12,18 +20,16 @@ export default function Header() {
         </Link>
 
         <div className="flex items-center space-x-6">
-          <Link
-            href="/tags"
-            className="text-stone-500 hover:text-stone-900 transition-colors"
-          >
-            Tags
-          </Link>
-          <Link
-            href="/about"
-            className="text-stone-500 hover:text-stone-900 transition-colors"
-          >
-            About
-          </Link>
+          {categories.map((category) => (
+            <NavLink
+              key={category.id}
+              href={`/categories/${category.id}`}
+            >
+              {category.name}
+            </NavLink>
+          ))}
+          <NavLink href="/tags">Tags</NavLink>
+          <NavLink href="/about">About</NavLink>
         </div>
       </nav>
     </header>

src/app/_components/NavLink.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import type { ComponentProps } from 'react'
+
+interface NavLinkProps extends ComponentProps<typeof Link> {}
+
+export default function NavLink({ href, children, ...props }: NavLinkProps) {
+  return (
+    <Link
+      href={href}
+      className="text-stone-500 hover:text-stone-900 transition-colors"
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}