CoreSectionMessage

레거시 섹션 메시지 컴포넌트. SectionMessage로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 SectionMessage를 사용하세요.

CoreSectionMessage는 인라인 피드백 메시지를 표시하는 배너형 컴포넌트입니다.

4가지 status — error, info, success, warning. 아이콘과 색상이 자동 결정됨
title / description — 제목은 필수, 본문은 선택 사항
actionButtonProps — 텍스트·아이콘 조합의 내장 버튼, 또는 임의 ReactElement 전달 가능
onDelete — 닫기 버튼을 활성화하는 이벤트 핸들러

Usage

기본 사용법

<VStack $css={{ gap: '8px' }}>
<CoreSectionMessage status="error"   title="오류가 발생했습니다." />
<CoreSectionMessage status="info"    title="참고할 정보입니다." />
<CoreSectionMessage status="success" title="작업이 완료됐습니다." />
<CoreSectionMessage status="warning" title="주의가 필요합니다." />
</VStack>

Description 포함

<VStack $css={{ gap: '8px' }}>
<CoreSectionMessage
  status="error"
  title="파일 업로드 실패"
  description="지원하지 않는 형식이거나 파일 크기가 초과됐습니다."
/>
<CoreSectionMessage
  status="success"
  title="저장 완료"
  description="변경 사항이 성공적으로 저장됐습니다."
/>
</VStack>

닫기 버튼

() => {
const [visible, setVisible] = React.useState(true);
return visible ? (
  <CoreSectionMessage
    status="warning"
    title="베타 기능입니다"
    description="일부 기능이 예상과 다르게 동작할 수 있습니다."
    onDelete={() => setVisible(false)}
  />
) : (
  <CoreButton text="다시 표시" size="sm" onClick={() => setVisible(true)} />
);
}

액션 버튼 (props 방식)

<CoreSectionMessage
status="info"
title="새 버전이 출시됐습니다."
description="지금 업데이트하면 새 기능을 사용할 수 있습니다."
actionButtonProps={{
  text: '업데이트',
  prefix: <IconAddOutline />,
  onClick: () => alert('업데이트 시작'),
}}
/>

액션 버튼 (ReactElement 방식)

<CoreSectionMessage
status="success"
title="보고서가 생성됐습니다."
actionButtonProps={
  <CoreButton text="다운로드" buttonType="secondary" size="sm" prefix={<IconCaretDownFilled />} />
}
/>

모든 기능 조합

() => {
const [visible, setVisible] = React.useState(true);
return visible ? (
  <CoreSectionMessage
    status="error"
    title="결제 처리 중 문제가 발생했습니다."
    description="카드 정보를 확인하거나 다른 결제 수단을 시도해 주세요."
    actionButtonProps={{ text: '다시 시도', onClick: () => alert('재시도') }}
    onDelete={() => setVisible(false)}
  />
) : (
  <CoreButton text="메시지 복원" size="sm" onClick={() => setVisible(true)} />
);
}

Props

ComponentPropsWithoutRef<'div'>를 확장한 컴포넌트입니다.

Prop

Type

CoreSectionMessageStatus

Prop

Type

CoreActionButtonProps

actionButtonProps를 객체로 전달할 때 사용하는 타입입니다.

Prop

Type

스타일

섹션 루트:

display: flex, justify-content: space-between, align-items: stretch
gap: 8px, padding: 8px 12px
border-radius: radius-100
border: 1px solid
width: 100% (기본값)

좌측 영역:

display: flex, align-items: flex-start, gap: 8px

텍스트 영역:

display: grid, flex: 1, gap: 4px
제목: body[2], 설명: body[1], white-space: pre-wrap

아이콘 영역:

상태 아이콘 컨테이너: width: 16px, height: 24px
닫기 버튼 아이콘: width: 16px, height: 16px

액션 버튼:

typography: heading[1], height: 24px
margin-x: 10px

Status 색상 토큰

status	background	border	color
`error`	`support-error[1]`	`support-error[2]`	`support-error[4]`
`info`	`support-info[1]`	`support-info[2]`	`support-info[4]`
`success`	`support-success[1]`	`support-success[2]`	`support-success[4]`
`warning`	`support-warning[1]`	`support-warning[2]`	`support-warning[4]`

마이그레이션 가이드

신규 SectionMessage 컴포넌트는 $css prop과 합성 패턴을 지원합니다.

Before / After

// Before — CoreSectionMessage
<CoreSectionMessage
  status="error"
  title="오류가 발생했습니다."
  description="카드 정보를 확인해 주세요."
  actionButtonProps={{ text: '다시 시도', onClick: handleRetry }}
  onDelete={() => setVisible(false)}
/>

// After — SectionMessage
<SectionMessage.Root status="error">
  <SectionMessage.Icon />
  <SectionMessage.Content>
    <SectionMessage.Title>오류가 발생했습니다.</SectionMessage.Title>
    <SectionMessage.Description>카드 정보를 확인해 주세요.</SectionMessage.Description>
  </SectionMessage.Content>
  <SectionMessage.Action>
    <Button.Root size="sm" onClick={handleRetry}>
      <Button.Text>다시 시도</Button.Text>
    </Button.Root>
  </SectionMessage.Action>
  <SectionMessage.CloseButton onClick={() => setVisible(false)} />
</SectionMessage.Root>

변경 사항

CoreSectionMessage	SectionMessage
`status`, `title`, `description` props	합성 컴포넌트 패턴으로 분리
`actionButtonProps` 객체 또는 ReactElement	`SectionMessage.Action` 슬롯에 직접 배치
`onDelete`	`SectionMessage.CloseButton`의 `onClick`
내부 아이콘 자동 결정	`SectionMessage.Icon`이 status에 따라 자동 렌더링
`width` prop	`$css={{ width: '...' }}`

On this page