6.1 Hero/공지 배너 컴포넌트(자동/수동 슬라이드) o

src/app/components/HeroBanner.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { useEffect, useState } from "react";
+
+const defaultSlides = [
+  { id: 1, title: "공지사항", subtitle: "중요 공지 확인하기" },
+  { id: 2, title: "이벤트", subtitle: "진행중인 이벤트" },
+];
+
+export function HeroBanner() {
+  const [idx, setIdx] = useState(0);
+  useEffect(() => {
+    const t = setInterval(() => setIdx((i) => (i + 1) % defaultSlides.length), 3000);
+    return () => clearInterval(t);
+  }, []);
+  const slide = defaultSlides[idx];
+  return (
+    <section style={{ padding: 24, background: "#f5f5f5", borderRadius: 12, marginBottom: 16 }}>
+      <h1 style={{ margin: 0 }}>{slide.title}</h1>
+      <p style={{ margin: 0, opacity: 0.8 }}>{slide.subtitle}</p>
+    </section>
+  );
+}
+
+