섹션1 : 시작은 프리캠프 final 과제 타이머 부분 JS 문의

프리캠프 final sign up 과제 중 타이머 부분 관련 문의드립니다.

자바스크립트 이용하여 '인증번호 전송' 버튼을 누르면 타이머가 동작하는 부분까지는 구현하였습니다.

이후 타이머 동작 중, 인증 완료 버튼을 누르면 "인증 완료" 팝업이 뜨고

타이머가 종료되며 "인증 완료" 텍스트로 표시되도록 하고싶은데 팝업이 뜨고 텍스트는 변경되나 바로 다시 타이머가 동작합니다.

(consle.log 를 찍어보면 인증완료 버튼 클릭 시 '인증완료' 로그가 찍히나, 타이머는 그대로 동작하고 00초가 되면 '시간 초과' 로그도 찍힙니다.)

else 뒤에 넣는 것이 아니라 아예 따로 빼서 onclick 함수를 새로 만들어야 할까요? 답변 부탁드립니다!

아래는 제가 작성한 코드입니다.

// 타이머 작동 & 인증버튼 활성화 //
let isStarted = false;

let auth = () => {

    if(isStarted === false) {
        //  버튼 클릭 시 인증번호 부여 및 타이머 작동 //
        isStarted = true
        document.getElementById("b2").disabled = false
        document.getElementById("b2").style.color = "white"
        document.getElementById("b2").style.border = "1px solid #0068ff"
        document.getElementById("b2").style.backgroundColor = "#0068ff"
        document.getElementById("b2").style.cursor = "pointer"
        const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0")
    
        document.getElementById("target").innerText = token    
    
        let time = 10
        let timer

        timer = setInterval(function() {
        
            if(time>=0) {
                let min = Math.floor( time / 60 )
                let sec = String(time % 60).padStart(2, "0")
                document.getElementById("timer").innerText = min + ":" + sec
                time = time - 1          
            
            } else {
                document.getElementById("b2").disabled = true
                document.getElementById("b2").style.color = "#d2d2d2"
                document.getElementById("b2").style.border = "1px solid #d2d2d2"
                document.getElementById("b2").style.backgroundColor = "transparent"
                document.getElementById("b2").style.cursor = "default"
                document.getElementById("timer").innerText = "3" + ":" + "00"
                document.getElementById("target").innerText = "000000"
                console.log("시간 초과")
                isStarted = false
                clearInterval(timer)
                
            }
            
        },1000)
        
        
    } else {
        // 타이머가 작동중일 때 인증 확인 클릭하면 //
        alert("인증완료")
        document.getElementById("b2").disabled = true
        document.getElementById("b2").style.cursor = "default"
        document.getElementById("timer").innerText = "인증완료"
        isStarted = true
        clearInterval(timer)
        console.log("인증 완료")
    }
}

let auth = () => {

   let timer; // auth의 중괄호 {  } 안에 만들어 주셔야 그 안의 모든 공간에서 사용 가능해요!

   if(){

      // let timer // 여기서 만들면 안돼요! 
                   // 여기서 만들면, if의 중괄호 {  } 안에서만 사용 가능해져요!

      // ...

   } else {

      // ...

      clearInterval(timer);

      // ...

   }

}