반응형 그룹웨어의 sweetalert 라이브러리 교체 건

2021년도 1분기 2021-03-31

이정현 0 댓글 379

아래의 업무진행은 박정욱 본부장님과 공유하였으며 소장님께 보고 후 실서버에 배포됨

개요

IOS, Safari 브라우저에서 반응형 그룹웨어의 confirm alert창에서 간헐적으로 확인 버튼 클릭 시 동작하지 않는 현상이 발생

원인

sweetalert 라이브러리 자체 버그로 파악됨

대책

1. sweetalert의 마지막 업데이트가 4년전으로 사실상 단종

2. sweetalert의 이 후 버전인 sweetalert2으로 라이브러리 교체

3. sweetalert2는 기존 라이브러리의 UI와 유사하여 사용자가 사용시 이질감이 없을 것으로 예상

조치

1. 반응형 그룹웨어에서 sweetalert이 약 2400번 사용됨

2. sweetalert 와 sweetalert2의 문법이 달라 기존 코드 사용 불가

sweetalert 문법

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
});

sweetalert2 문법

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href>Why do I have this issue?</a>'
})

3. 기존 코드를 재 사용하기 위하여 swal 함수를 재 정의하여 sweetalert2의 문법으로 재구성

window.swal = function (a, b, c) { 
    ....
};

4. 일부 아래와 같이 alert이 종료 된 이 후 코드 실행이 필요한 경우 아래와 같이 사용됨

sweetalert2로 변경되면서 클래스 .sweet-alert를 사용할 수 없음

swal({title:"알림",text:"<%=LV(bLnBd,13)%>",type:"error"},function(){
            $(document).on("click", ".sweet-alert .confirm",function(e){
                $("#memo").focus();
                $(document).off("click", ".sweet-alert .confirm");
                e.stopPropagation();
                // #20201012 return false;
		return rtnVal;
            });
});

5. onDestroy 속성을 추가하여 alert이 종료된 이 후 onDestroy를 콜백하도록 함

swal({
            title:"알림",
            text:"<%=LV(bLnBd,13)%>",
            type:"error",  
            onDestroy : function(){
                $("#memo").focus();
            }
});

질문이 있으십니까?

반응형 그룹웨어의 sweetalert 라이브러리 교체 건

개요

원인

대책

조치

sweetalert 문법

sweetalert2 문법

댓글을 작성하세요

문서 이력