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

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>
   );
 }