220622_TIL

보기 좋은 Alert창을 꾸미기 위해서 구글링을 했다.
'SweetAlert2' 이라는 라이브러리를 알게되었고, 간단하게 사용법을 기록해보겠다.
alert, confirm, prompt 입력창 역시 지원하며, 여러 주제에 따라 다양한 이쁜 알람창을 따로 css작업없이 고퀄리티의 애니메이션 창을 구성할수 있다는 특징이 있다.

• 설치

// 간편하게 CDN 방식으로
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

💻 Confirm

- Confirm을 구현할때 각 버튼의 색과 내용을 구성할 수 있고, 결과가 뭐냐에 따라 후처리 이벤트(then)를 이용해 다음 동작을 설정할 수 있다.

Swal.fire({
   title: '정말로 그렇게 하시겠습니까?',
   text: '다시 되돌릴 수 없습니다. 신중하세요.',
   icon: 'warning',
   
   showCancelButton: true, // cancel버튼 보이기. 기본은 원래 없음
   confirmButtonColor: '#3085d6', // confrim 버튼 색깔 지정
   cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
   confirmButtonText: '승인', // confirm 버튼 텍스트 지정
   cancelButtonText: '취소', // cancel 버튼 텍스트 지정
   
   reverseButtons: true, // 버튼 순서 거꾸로
   
}).then(result => {
   // 만약 Promise리턴을 받으면,
   if (result.isConfirmed) { // 만약 모달창에서 confirm 버튼을 눌렀다면
   
      Swal.fire('승인이 완료되었습니다.', '화끈하시네요~!', 'success');
   }
});

💻 Prompt

- Prompt는 텍스트를 입력받는 알림창이다.
보여드리는 예시는 이름을 입력받는 text 예시지만, 이밖에 체크박스, 라디오 버튼, 셀렉트 박스, 파일 등 'input' 태그로 만들 수 있는 모든 것들을 prompt로 구현할 수 있다.

(async () => {
    const { value: getName } = await Swal.fire({
        title: '당신의 이름을 입력하세요.',
        text: '그냥 예시일 뿐입니다.',
        input: 'text',
        inputPlaceholder: '이름을 입력..'
    })
 
    // 이후 처리되는 내용.
    if (getName) {
        Swal.fire(`: ${getName}`)
    }
})()

참고 코드 출처

⌚ 타이머

- 작업을 마쳤을 때, 타이머가 멈추는 코드를 구글링을 통해 찾아냈지만 적용하지는 못한 아쉬움에 기록을 해본다.

let downtime = 60;
    let isPause = false;
    let timer;

    function startTimer() {
        isPuase = false;
        timer = setInterval(function () {
            downtime--;
            if (downtime <= 0) {
                document.querySelector('.quiz-modal').style.display = 'flex';
                downtime = 0;
            }
            if (downtime < 10) {
                document.querySelector('.timer').innerHTML = `00:0${downtime}`
            } else {
                document.querySelector('.timer').innerHTML = `00:${downtime}`
            }
        }, 1000);
    }
    function stopTimer() {
        clearInterval(timer);
        isPause = true;
    }
    startTimer()

최종으로 배포시킬 코드를 클론으로 받았지만, 이상하게 나의 로컬에서만 실행이 안되는 부분이 있다. 2명의 기술매니저님이 방문하였지만, 쉽게 해결되지 못한 채로 3일차를 마무리하게 됐다.
배포 사이트에서는 문제없이 돌아가서 크게 걱정은 안되지만, 나만 안되는 이유를 알고싶다...