8.4 무료쿠폰: 쿠폰 등록/재고/사용 처리/만료/1인 제한/로그 o

src/app/coupons/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+import useSWR from "swr";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export default function CouponsPage() {
+  const { data, mutate } = useSWR<{ coupons: { id: string; code: string; title: string; description?: string; stock: number; maxPerUser: number; expiresAt?: string; used: number }[] }>("/api/coupons", fetcher);
+  async function redeem(code: string) {
+    await fetch("/api/coupons/redeem", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ code }) });
+    mutate();
+  }
+  return (
+    <div>
+      <h1>무료쿠폰</h1>
+      <ul style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        {(data?.coupons ?? []).map((c) => (
+          <li key={c.id} style={{ border: "1px solid #eee", borderRadius: 8, padding: 12 }}>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <div>
+                <strong>{c.title}</strong>
+                <div style={{ opacity: 0.8 }}>{c.description}</div>
+                <div style={{ fontSize: 12, opacity: 0.7 }}>코드: {c.code} · 소진: {c.used}/{c.stock || "∞"}</div>
+              </div>
+              <button onClick={() => redeem(c.code)}>사용하기</button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+