사용법
NoticeBar는 상단 공지·프로모션 띠예요. 네이버·당근 앱의 이벤트 배너처럼 쓸 수 있어요.
스타일 커스터마이징
NoticeBar 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<NoticeBar
className="shadow-md"
style={{
--gtd-ui-primary-soft: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<NoticeBar
classNames={{
message: "my-notice-bar-message",
action: "my-notice-bar-action",
close: "my-notice-bar-close"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-ui-primary-soft | info 배경 |
인터페이스
NoticeBarProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "info" | "promo" | "warning" | info | 톤 |
| action | ReactNode | — | 우측 액션 (TextButton 등) |
| onClose | () => void | — | 닫기 버튼 표시 및 콜백 |
| children* | ReactNode | — | 공지 문구 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
NoticeBar 컴포넌트 Props 표
가져오기
import { NoticeBar } from "@/components/ui/NoticeBar";