Action

SectionMessage

섹션 단위의 안내·알림 메시지 컴포넌트입니다. Normal, Info, Cautionary, Negative 4가지 변형으로 맥락에 맞는 피드백을 제공합니다.

import { SectionMessage } from "@/shared/ui/common/action"

인터랙티브 데모

헤딩을 작성해요.

제목에 대한 설명을 작성해요.

Variant

caption

onClose

hideIcon

tsx

<SectionMessage
  heading="헤딩을 작성해요."
  caption="제목에 대한 설명을 작성해요."
  onClose={() => {}}
/>

4가지 유형별 기본 표시입니다. 각 variant는 맥락에 맞는 배경색과 아이콘을 제공합니다.

Info — 헤딩을 작성해요.

제목에 대한 설명을 작성해요.

Negative — 헤딩을 작성해요.

제목에 대한 설명을 작성해요.

Normal — 헤딩을 작성해요.

제목에 대한 설명을 작성해요.

Info — 헤딩을 작성해요.

제목에 대한 설명을 작성해요.

Cautionary — 헤딩을 작성해요.

제목에 대한 설명을 작성해요.

Negative — 헤딩을 작성해요.

제목에 대한 설명을 작성해요.

caption을 생략하면 헤딩만 표시되는 간결한 형태입니다.

캡션 없이 헤딩만 표시합니다.

onClose 콜백을 전달하면 닫기 버튼이 자동으로 노출됩니다.

닫을 수 있는 메시지입니다.

닫기 버튼을 클릭하면 onClose 콜백이 실행됩니다.

hideIcon으로 아이콘을 숨기고 텍스트만 표시합니다.

아이콘 없이 텍스트만 표시합니다.

Prop	Type	Required	Default	설명
`variant`	`"normal" \| "info" \| "cautionary" \| "negative"`	—	"normal"	메시지 유형
`heading`	`string`	✓	—	제목 텍스트
`caption`	`string`	—	—	설명 텍스트
`onClose`	`() => void`	—	—	닫기 버튼 클릭 시 콜백. 전달 시 닫기 버튼 노출
`hideIcon`	`boolean`	—	false	아이콘 숨기기
`icon`	`React.ComponentType<{ className?: string; size?: number }>`	—	—	커스텀 아이콘. variant="normal"일 때 기본 아이콘 대신 사용됩니다.
`className`	`string`	—	—	추가 CSS 클래스