diff --git a/src/app/components/HeroBanner.tsx b/src/app/components/HeroBanner.tsx
new file mode 100644
index 0000000..9d98c63
--- /dev/null
+++ b/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 (
+ {slide.subtitle}{slide.title}
+