SweetAlert는 자바스크립트 라이브러리로, 사용자에게 아름답고 사용하기 쉬운 팝업 창을 제공합니다. 이 라이브러리는 기본적으로 알림, 경고, 확인 등의 다양한 액션을 지원하며 커스텀 디자인도 가능합니다.

알림창 (Alert)

일반적으로 사용자에게 중요한 정보를 전달하거나 작업의 성공 여부를 알리기 위해 알림창을 사용합니다. SweetAlert의 alert() 함수를 사용하면 아래와 같이 간단하게 알림창을 생성할 수 있습니다:

swal("알림", "작업이 완료되었습니다.", "success");

위 예제에서 "알림"은 알림창의 제목이고, "작업이 완료되었습니다."는 알림창의 내용입니다. 마지막으로 "success"는 알림창의 아이콘 스타일을 지정합니다. SweetAlert에서는 "success", "warning", "error" 등 다양한 아이콘 스타일을 제공합니다.

확인창 (Confirm)

사용자의 동의를 요구하거나 작업을 실행하기 전에 사용자의 확인을 받아야 할 때는 SweetAlert의 confirm() 함수를 사용할 수 있습니다. 아래는 간단한 확인창의 예제입니다:

swal({
  title: "확인",
  text: "정말로 삭제하시겠습니까?",
  icon: "warning",
  buttons: ["취소", "삭제"],
}).then((value) => {
  if (value) {
    // 삭제 작업 실행
  } else {
    // 취소 작업 실행
  }
});

위 예제에서 title은 확인창의 제목, text는 확인창의 내용, icon은 아이콘 스타일을 나타냅니다. buttons는 확인창의 버튼을 정의하는 배열로, 배열의 첫 번째 요소는 취소 버튼이고 두 번째 요소는 삭제 버튼입니다. then() 함수는 사용자가 버튼을 클릭할 때 호출되는 콜백 함수입니다.

커스텀 디자인

SweetAlert는 기본 테마 외에도 커스텀 디자인을 적용할 수 있는 기능을 제공합니다. 예를 들어, 배경색이나 폰트 스타일을 변경하고 싶을 때는 customClass 옵션을 사용할 수 있습니다:

swal({
  title: "알림",
  text: "작업이 완료되었습니다.",
  icon: "success",
  customClass: {
    popup: 'my-custom-popup',
    title: 'my-custom-title',
    content: 'my-custom-content',
  }
});

위 예제에서 customClass 객체는 팝업, 제목 및 내용 요소의 클래스를 지정하고 있는데, 이러한 클래스는 CSS에서 사용자가 정의한 스타일을 적용할 수 있습니다.

더 많은 SweetAlert 기능에 대해서는 SweetAlert 공식 문서를 참조하세요.