웹 애플리케이션에서 사용자에게 알림 메시지를 표시할 때 Toastr라는 라이브러리를 사용하면 편리합니다. Toastr는 사용하기 쉽고 맞춤 설정이 가능한 경고 및 알림 메시지를 표시하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 알림 메시지에 버튼을 추가하는 방법에 대해 알아보겠습니다.

Toastr 설치

먼저 Toastr를 웹 애플리케이션에 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 Toastr를 설치합니다.

npm install toastr

또는 CDN을 사용하여 스크립트를 직접 로드할 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

알림 메시지에 버튼 추가

Toastr를 사용하여 알림 메시지에 버튼을 추가하려면 toastr.options 객체를 사용하여 설정해야 합니다. 다음은 알림 메시지에 버튼을 추가하는 예제 코드입니다.

toastr.options = {
  "closeButton": true,
  "positionClass": "toast-top-right",
  "onclick": function() {
      // 버튼을 클릭했을 때 수행할 동작을 작성합니다.
  }
}

toastr.success('알림 메시지', '제목');

위의 코드에서 toastr.options 객체를 사용하여 버튼의 동작 및 모양을 정의할 수 있습니다. onclick 속성에는 버튼을 클릭했을 때 실행할 함수를 정의할 수 있습니다.

결론

Toastr를 사용하여 알림 메시지에 버튼을 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자와 상호 작용하는 기능을 추가하여 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 원하시면 Toastr 공식 웹사이트를 참조하세요.