feat(post): persist new posts and wire like interactions

app/(main)/post/[id]/page.tsx

@@ -1,27 +1,24 @@
-import { ArrowLeft, Heart, MessageCircle, Pin, Star } from "lucide-react"
+import { ArrowLeft, MessageCircle, Pin, Star } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { PostComments } from "@/components/post-comments"
+import { PostLikeButton } from "@/components/post-like-button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
+import { getOrderById, getPlayerById, getPostById, listCommentsByPost } from "@/lib/api"
 import { roleLabels } from "@/lib/constants"
-import { mockComments, mockOrders, mockPlayers, mockPosts } from "@/lib/mock"
 
 export default async function PostDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  const post = mockPosts.find((p) => p.id === id)
+  const post = getPostById(id)
   if (!post) notFound()
 
-  const comments = mockComments.filter((c) => c.postId === id)
-  const linkedOrder = post.linkedOrderId
-    ? mockOrders.find((o) => o.id === post.linkedOrderId)
-    : null
-  const linkedPlayer = linkedOrder
-    ? mockPlayers.find((player) => player.id === linkedOrder.playerId)
-    : null
+  const comments = listCommentsByPost(id)
+  const linkedOrder = post.linkedOrderId ? getOrderById(post.linkedOrderId) : null
+  const linkedPlayer = linkedOrder ? getPlayerById(linkedOrder.playerId) : null
 
   return (
     <div className="container mx-auto py-8 px-4 max-w-2xl">
@@ -94,13 +91,7 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
           )}
 
           <div className="flex items-center gap-4 text-sm text-muted-foreground pt-2">
-            <button
-              type="button"
-              className="flex items-center gap-1 hover:text-foreground transition-colors"
-            >
-              <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
-              {post.likeCount}
-            </button>
+            <PostLikeButton initialLiked={post.liked} initialCount={post.likeCount} />
             <span className="flex items-center gap-1">
               <MessageCircle className="h-4 w-4" />
               {post.commentCount}