Promise로 커스텀 모달창 만들기

오늘은 Promise를 활용해서 window 객체에서 지원하는 alert, confirm, prompt와 같이 동기적으로 동작하는 모달창을 만들어보았습니다.

해당 모달창을 만들게 된 계기는 2가지가 있었습니다.

1. 디자인 및 기능이 커스텀 가능하다
2. 사용자가 모달창의 확인버튼을 누르기 전까지는 함수의 다음 동작이 대기 상태가 된다.

2번 조건을 충족하는 모달창을 구현하려다 보니 방안이 많이 떠오르지는 않았지만 Promise와 async/await를 활용하니 문제를 해결할 수 있었습니다.

💻 구현 코드

<button class="process-btn" onclick="process()">프로세스 실행</button>


<!-- 모달창 -->
<div id="modal">
	<div class="modal-conent">
    <!-- 내용 -->
    </div>
    <div class="modal-footer">
    	<button class="confirm">확인</button>
        <button class="cancel">취소</button>
    </div>
</div>

<script>
	async function process(openPopupYn){
    	// 프로세스1
        
        var result = await openModal();
        if(!result) return;
        
        // 프로세스2
    }
    
    
    function openModal(){
    	return Promise((resolve)=>{
        	// 모달창 열기
            
            $('#modal .confirm').one('click', ()=>{
            	// 모달창 닫기
            	resolve(true);
            });
            
            $('#modal .cancel').one('click', ()=>{
            	// 모달창 닫기
            	resolve(false);
            });
        })
    }
  
</script>

먼저 process()를 통해 특정 프로세스가 진행이 되다가 openModal()가 동작함으로서 process()는 await를 통해 대기 상태가 됩니다. 대신 모달창은 띄워졌기 때문에 모달창에서의 로직을 별도로 진행할수가 있게 됩니다.

모달창에서의 처리가 끝나고 확인/취소 버튼을 누르면 resolve()를 통해 다시 process()가 제어권을 얻어서 남은 프로세스를 이어서 처리하게 됩니다.