10.4 공지/배너 등록 및 노출 설정 o

src/app/admin/banners/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+import useSWR from "swr";
+import { useState } from "react";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export default function AdminBannersPage() {
+  const { data, mutate } = useSWR<{ banners: any[] }>("/api/admin/banners", fetcher);
+  const banners = data?.banners ?? [];
+  const [form, setForm] = useState({ title: "", imageUrl: "", linkUrl: "", active: true, sortOrder: 0 });
+  async function create() {
+    const r = await fetch("/api/admin/banners", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(form) });
+    if (r.ok) { setForm({ title: "", imageUrl: "", linkUrl: "", active: true, sortOrder: 0 }); mutate(); }
+  }
+  return (
+    <div>
+      <h1>배너 관리</h1>
+      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
+        <input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
+        <input placeholder="이미지 URL" value={form.imageUrl} onChange={(e) => setForm({ ...form, imageUrl: e.target.value })} />
+        <input placeholder="링크 URL(선택)" value={form.linkUrl} onChange={(e) => setForm({ ...form, linkUrl: e.target.value })} />
+        <label><input type="checkbox" checked={form.active} onChange={(e) => setForm({ ...form, active: e.target.checked })} /> 활성</label>
+        <input type="number" placeholder="정렬" value={form.sortOrder} onChange={(e) => setForm({ ...form, sortOrder: Number(e.target.value) })} style={{ width: 80 }} />
+        <button onClick={create}>추가</button>
+      </div>
+      <ul style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        {banners.map((b) => (
+          <li key={b.id} style={{ border: "1px solid #eee", borderRadius: 8, padding: 12, display: "flex", gap: 12, alignItems: "center" }}>
+            <img src={b.imageUrl} alt={b.title} style={{ width: 80, height: 48, objectFit: "cover", borderRadius: 6 }} />
+            <div style={{ flex: 1 }}>
+              <div><strong>{b.title}</strong> {b.linkUrl && <a style={{ marginLeft: 8 }} href={b.linkUrl}>링크</a>}</div>
+              <div style={{ fontSize: 12, opacity: 0.7 }}>정렬 {b.sortOrder} · {b.active ? "활성" : "비활성"}</div>
+            </div>
+            <button onClick={async () => { await fetch(`/api/admin/banners/${b.id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ active: !b.active }) }); mutate(); }}>{b.active ? "비활성" : "활성"}</button>
+            <button onClick={async () => { await fetch(`/api/admin/banners/${b.id}`, { method: "DELETE" }); mutate(); }}>삭제</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+

src/app/api/admin/banners/[id]/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function PATCH(req: Request, context: { params: Promise<{ id: string }> }) {
+  const { id } = await context.params;
+  const body = await req.json().catch(() => ({}));
+  const data: any = {};
+  for (const k of ["title", "imageUrl", "linkUrl", "active", "sortOrder", "startAt", "endAt"]) {
+    if (k in body) data[k] = body[k];
+  }
+  if (data.startAt) data.startAt = new Date(data.startAt);
+  if (data.endAt) data.endAt = new Date(data.endAt);
+  const banner = await prisma.banner.update({ where: { id }, data });
+  return NextResponse.json({ banner });
+}
+
+export async function DELETE(_: Request, context: { params: Promise<{ id: string }> }) {
+  const { id } = await context.params;
+  await prisma.banner.delete({ where: { id } });
+  return NextResponse.json({ ok: true });
+}
+
+

src/app/api/admin/banners/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+import { z } from "zod";
+
+export async function GET() {
+  const banners = await prisma.banner.findMany({ orderBy: [{ active: "desc" }, { sortOrder: "asc" }, { createdAt: "desc" }] });
+  return NextResponse.json({ banners });
+}
+
+const createSchema = z.object({
+  title: z.string().min(1),
+  imageUrl: z.string().url(),
+  linkUrl: z.string().url().optional(),
+  active: z.boolean().optional(),
+  sortOrder: z.coerce.number().int().optional(),
+  startAt: z.coerce.date().optional(),
+  endAt: z.coerce.date().optional(),
+});
+
+export async function POST(req: Request) {
+  const body = await req.json().catch(() => ({}));
+  const parsed = createSchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+  const banner = await prisma.banner.create({ data: parsed.data });
+  return NextResponse.json({ banner }, { status: 201 });
+}
+
+

src/app/api/banners/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET() {
+  const now = new Date();
+  const banners = await prisma.banner.findMany({
+    where: {
+      active: true,
+      AND: [
+        { OR: [{ startAt: null }, { startAt: { lte: now } }] },
+        { OR: [{ endAt: null }, { endAt: { gte: now } }] },
+      ],
+    },
+    orderBy: [{ sortOrder: "asc" }, { createdAt: "desc" }],
+  });
+  return NextResponse.json({ banners });
+}
+
+

src/app/components/HeroBanner.tsx

@@ -1,22 +1,30 @@
 "use client";
 import { useEffect, useState } from "react";
 
-const defaultSlides = [
-  { id: 1, title: "공지사항", subtitle: "중요 공지 확인하기" },
-  { id: 2, title: "이벤트", subtitle: "진행중인 이벤트" },
-];
+type Banner = { id: string; title: string; imageUrl: string; linkUrl?: string | null };
 
 export function HeroBanner() {
+  const [banners, setBanners] = useState<Banner[]>([]);
   const [idx, setIdx] = useState(0);
   useEffect(() => {
-    const t = setInterval(() => setIdx((i) => (i + 1) % defaultSlides.length), 3000);
-    return () => clearInterval(t);
+    fetch("/api/banners").then((r) => r.json()).then((d) => setBanners(d.banners ?? []));
   }, []);
-  const slide = defaultSlides[idx];
-  return (
-    <section style={{ padding: 24, background: "#f5f5f5", borderRadius: 12, marginBottom: 16 }}>
+  useEffect(() => {
+    if ((banners?.length ?? 0) < 2) return;
+    const t = setInterval(() => setIdx((i) => (i + 1) % banners.length), 3000);
+    return () => clearInterval(t);
+  }, [banners]);
+  const slide = banners[idx];
+  if (!slide) return null;
+  const content = (
+    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+      <img src={slide.imageUrl} alt={slide.title} style={{ width: 72, height: 48, objectFit: "cover", borderRadius: 6 }} />
       <h1 style={{ margin: 0 }}>{slide.title}</h1>
-      <p style={{ margin: 0, opacity: 0.8 }}>{slide.subtitle}</p>
+    </div>
+  );
+  return (
+    <section style={{ padding: 16, background: "#f5f5f5", borderRadius: 12, marginBottom: 16 }}>
+      {slide.linkUrl ? <a href={slide.linkUrl}>{content}</a> : content}
     </section>
   );
 }