SweetAlert는 사용자에게 예쁜 경고창을 표시해주는 JavaScript 라이브러리입니다. 이번에는 SweetAlert를 사용하여 태그를 추가하는 기능을 구현해보겠습니다.

1. SweetAlert 라이브러리 추가

먼저 SweetAlert 라이브러리를 프로젝트에 추가해야 합니다. 이를 위해 HTML 파일에서 다음과 같이 스크립트를 추가해주세요.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

이렇게 하면 SweetAlert 라이브러리가 프로젝트에 포함되고 사용할 수 있게 됩니다.

2. 태그 추가 기능 구현

이제 SweetAlert를 사용하여 태그를 추가하는 기능을 구현해보겠습니다. 다음은 예제 코드입니다.

const addTag = () => {
  Swal.fire({
    title: '태그 추가',
    input: 'text',
    showCancelButton: true,
    confirmButtonText: '추가',
    showLoaderOnConfirm: true,
    preConfirm: (tag) => {
      // 태그 추가 로직을 작성합니다.
      // 추가한 태그를 서버에 전송하거나 다른 로직을 수행할 수 있습니다.
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 2000);
      });
    },
    allowOutsideClick: () => !Swal.isLoading()
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        title: '태그 추가 완료',
        text: '태그가 성공적으로 추가되었습니다.',
        icon: 'success'
      });
    }
  });
};

// 태그 추가 버튼에 이벤트 리스너를 등록합니다.
document.getElementById('add-tag-btn').addEventListener('click', addTag);

위 코드에서 Swal.fire를 사용하여 SweetAlert 경고창을 생성합니다. 사용자가 태그를 입력하기 위한 입력 창과 확인 및 취소 버튼도 함께 표시됩니다.

preConfirm 콜백 함수에서는 태그 추가 로직을 작성할 수 있습니다. 이 예제에서는 입력한 태그를 서버에 전송하기 위해 setTimeout 함수를 사용하여 2초 동안 대기한 후 Promise를 해결해줍니다.

태그가 추가되고 나면 then 콜백 함수에서 SweetAlert를 사용하여 성공적으로 태그가 추가되었다는 메시지를 표시합니다.

마무리

이제 SweetAlert와 태그 추가 기능을 구현하는 방법을 알게 되었습니다. SweetAlert를 사용하면 사용자에게 예쁘고 직관적인 경고창을 제공할 수 있으며, 다양한 기능을 추가하여 UX를 개선할 수 있습니다.

더 자세한 내용은 SweetAlert 공식문서를 참고하시기 바랍니다.