feat(games): fetch games from backend

app/(main)/community/page.tsx

@@ -6,12 +6,13 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { listGames, listOrders, listPlayers, listPosts } from "@/lib/api"
 import { roleLabels } from "@/lib/constants"
+import type { Game } from "@/lib/types"
 import { ClipboardList, Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
 import Link from "next/link"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 export default function CommunityPage() {
-  const games = listGames()
+  const [games, setGames] = useState<Game[]>([])
   const posts = listPosts()
   const orders = listOrders()
   const players = listPlayers()
@@ -19,6 +20,24 @@ export default function CommunityPage() {
   const [sortMode, setSortMode] = useState<"latest" | "hot">("latest")
   const [selectedGame, setSelectedGame] = useState<string | null>(null)
 
+  useEffect(() => {
+    let cancelled = false
+
+    listGames()
+      .then((items) => {
+        if (cancelled) return
+        setGames(items)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setGames([])
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
   const filteredPosts = posts
     .filter((post) => {
       if (!selectedGame) return true