본문으로 건너뛰기

Notification

Notification은 사용자에게 중요한 정보나 상태 변경을 알려주는 컴포넌트입니다. 알림은 두 가지 유형으로 제공됩니다: 측면에 떠있는 형태의 'Floating' 타입과 전체 너비를 차지하는 'Full-width' 타입.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 알림 컴포넌트의 모습을 확인해보세요.

titlestring
알림 제목을 입력합니다.
supportingTextstring
알림 설명을 입력합니다.
colorselect
알림의 색상을 선택합니다.
typeselect
알림의 표시 방식을 선택합니다.
onCloseboolean
닫기 버튼 표시 여부를 선택합니다.
classNamestring
추가 CSS 클래스를 입력합니다.
actionCountselect
액션 버튼 개수를 선택합니다.

기본 사용법​

import { Notification } from '@ncds/ui-admin';

function App() {
  return (
    <Notification
      title="알림 제목"
      supportingText="알림 내용을 작성합니다."
      onClose={() => console.log('닫기 버튼 클릭')}
    />
  );
}

유형​

Notification 컴포넌트는 floating과 full-width 두 가지 유형을 지원합니다. floating 유형은 측면에 떠 있는 형태의 알림이며, full-width 유형은 페이지 상단을 가로지르는 전체 너비의 알림입니다.

Floating 유형​

Full-width 유형​

색상 변형​

Notification 컴포넌트는 네 가지 색상 변형을 지원합니다: neutral, error, warning, success. 각 변형은 다른 상황이나 메시지의 중요도를 시각적으로 구분하는 데 도움이 됩니다.

Floating 유형 색상 변형​

Full-width 유형 색상 변형​

액션 버튼​

알림에 추가 액션을 위한 버튼을 추가할 수 있습니다. actions prop을 사용하여 버튼 등의 액션 요소를 전달할 수 있습니다.

액션 버튼 사용 예제​

import { Notification } from '@ncds/ui-admin';

function App() {
  return (
    <Notification
      title="액션 버튼이 있는 알림"
      supportingText="사용자가 추가 조치를 취할 수 있는 버튼이 있는 알림입니다."
      onClose={() => console.log('닫기 버튼 클릭')}
      actions={[
        { label: '확인', onClick: () => console.log('확인') },
        { label: '취소', onClick: () => console.log('취소') },
      ]}
    />
  );
}

닫기 버튼​

닫기 버튼을 표시하려면 onClose prop을 제공하세요. 함수를 제공하지 않으면 닫기 버튼이 표시되지 않습니다.

Props​

Notification​

PropTypeDefaultDescription
type'floating' | 'full-width''floating'알림의 표시 유형 (floating: 측면에 표시, full-width: 전체 너비)
titleReactNode-알림 제목 텍스트
supportingTextReactNode-알림 본문 텍스트 (선택사항)
color'neutral' | 'error' | 'warning' | 'success''neutral'알림 색상 스타일
size'desktop' | 'mobile''desktop'화면 크기에 따른 스타일
onClose() => void-닫기 버튼 클릭 이벤트 핸들러
classNamestring-추가 CSS 클래스
actionsNotificationAction[]-버튼 영역 (선택사항)

NotificationAction​

알림에 액션 버튼을 추가할 때 다음과 같은 구조의 객체를 사용할 수 있습니다:

interface NotificationAction {
  /**
   * 액션 버튼 텍스트
   */
  label: string;
  /**
   * 액션 버튼 클릭 이벤트 핸들러
   */
  onClick?: () => void;
  /**
   * 액션 버튼 색상 (2가지만 지원)
   */
  hierarchy?: 'link-gray' | 'link';
}

액션 버튼 배열 사용 예제​

import { Notification } from '@ncds/ui-admin';

function App() {
  // NotificationAction 배열 정의
  const actions = [
    {
      label: '확인',
      onClick: () => console.log('확인 버튼 클릭'),
    },
    {
      label: '취소',
      onClick: () => console.log('취소 버튼 클릭'),
    },
  ];

  return (
    <Notification
      title="액션 버튼이 있는 알림"
      supportingText="액션 버튼 배열을 사용한 알림입니다."
      color="success"
      actions={actions}
    />
  );
}