디자인디테일

src/app/components/SelectedBanner.tsx

@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+
+type Props = {
+  height?: number | string; // ex) 224 or '14rem'
+  className?: string;
+};
+
+// Figma 선택 요소(Container_Event)를 그대로 옮긴 플레이스홀더형 배너
+export function SelectedBanner({ height = 122, className }: Props) {
+  return (
+    <section
+      className={`relative w-full overflow-hidden rounded-[12px] bg-[#D9D9D9] ${className ?? ""}`}
+      style={{ height }}
+      aria-label="banner"
+    >
+      <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-[6px]" style={{ bottom: 12 }}>
+        <span className="block h-[4px] w-[18px] rounded-full bg-[#F94B37]" aria-hidden />
+        {Array.from({ length: 12 }).map((_, i) => (
+          <span key={i} className="block h-[6px] w-[6px] rounded-full bg-[#B9B9B9]" aria-hidden />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default SelectedBanner;
+
+