[javascript] SweetAlert의 디바이스 반응형 기능

24 Nov 2023

javascript

SweetAlert은 사용자에게 예쁜 대화상자를 제공하기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 경고, 확인, 입력을 포함한 다양한 형태의 다이얼로그를 쉽게 구현할 수 있습니다.

사용자의 디바이스 화면 크기에 따라 SweetAlert의 디자인이 자동으로 조정되는 반응형 기능을 구현하고 싶다면 어떻게 해야 할까요? 이 글에서는 SweetAlert의 디바이스 반응형 기능을 구현하는 방법에 대해 알아보겠습니다.

스크린 크기 감지

SweetAlert의 디바이스 반응형 기능을 구현하기 위해서는 사용자의 스크린 크기를 감지해야 합니다. 이를 위해 window.innerWidth와 window.innerHeight를 사용하여 현재 스크린의 너비와 높이를 가져올 수 있습니다.

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

반응형 디자인 적용

스크린 크기를 감지한 후, SweetAlert의 디자인을 적용할 수 있습니다. 예를 들어, 스크린 너비가 800px 이하일 때는 모바일 화면에 최적화된 디자인을 사용하고, 그 이상일 때는 데스크톱 화면에 최적화된 디자인을 사용할 수 있습니다.

if (screenWidth <= 800) {
  // 모바일 화면에 최적화된 디자인 적용
  swal.mixin({
    buttonsStyling: false,
    confirmButtonClass: 'swal2-styled swal2-confirm-mobile',
    cancelButtonClass: 'swal2-styled swal2-cancel-mobile',
    // ...
  });
} else {
  // 데스크톱 화면에 최적화된 디자인 적용
  swal.mixin({
    // ...
  });
}

위의 예제에서는 SweetAlert의 mixin을 사용하여 최적화된 디자인을 적용하고 있습니다. confirmButtonClass와 cancelButtonClass를 통해 버튼 스타일을 지정할 수 있습니다.

결론

이렇게 단순한 방법으로 SweetAlert의 디바이스 반응형 기능을 구현할 수 있습니다. 사용자의 스크린 크기를 감지하고, 스크린 크기에 따라 다른 디자인을 적용하면 모바일과 데스크톱 화면에서 더 좋은 사용자 경험을 제공할 수 있습니다. SweetAlert를 사용하여 예쁜 대화상자를 만들 때에는 디바이스 반응형 기능을 고려해보세요!

참고문서: