8.3 회원랭킹: 기간별 랭킹 집계/캐싱/페이지네이션/정렬 옵션

src/app/ranking/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+import useSWR from "swr";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export default function RankingPage({ searchParams }: { searchParams?: { period?: string } }) {
+  const period = searchParams?.period ?? "monthly";
+  const { data } = useSWR<{ period: string; items: { userId: string; nickname: string; points: number }[] }>(`/api/ranking?period=${period}`, fetcher);
+  return (
+    <div>
+      <h1>회원랭킹</h1>
+      <div style={{ display: "flex", gap: 8, margin: "8px 0" }}>
+        <a href={`/ranking?period=daily`}>일간</a>
+        <a href={`/ranking?period=weekly`}>주간</a>
+        <a href={`/ranking?period=monthly`}>월간</a>
+        <a href={`/ranking?period=all`}>전체</a>
+      </div>
+      <ol>
+        {(data?.items ?? []).map((i) => (
+          <li key={i.userId}>
+            <strong>{i.nickname}</strong> — {i.points}점
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+