🧐 토스트 팝업이란
짧은시간동안 사용자에게 메시지형식으로 정보를 전달하는 팝업으로 일정 시간이 지나면 자동으로 사라지는 팝업을 의미 합니다

이번 글에서는 Javascript를 이용해서 토스트팝업을 구현해 보겠습니다

1. 구현 방향

우선 간단하게 아래와 같은 시나리오로 작업을 해보겠습니다
1️⃣ 버튼을 누르면 팝업이 노출되고
2️⃣ 1초뒤 팝업이 자동으로 사라진다

이 때, 노출과 사라짐 처리는 css클래스의 유무로 결정되도록 만들 것입니다

2. 구현

📝 html + css

먼저 html과 css로 구조와 스타일을 적용하겠습니다

    <div id="tost_message">토스트 메시지 입니다!</div>
    <button id="tost_btn" type="button">클릭하면 토스트 메시지가 나옵니다!</button>

/*버튼 기본 스타일링*/
#tost_btn {
    display: block;
    margin: 40px auto;
    padding: 10px 20px;
    background-color: royalblue;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
#tost_btn:hover {
    box-shadow: 3px 4px 11px 0px #00000040;
}

/*토스트 메시지*/
#tost_message {
    opacity: 0;
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%,0);
    padding: 10px 50px;
    background: rgba(0, 0, 0, 0.70);
    border-radius: 100px;
    color: #fff;
    box-shadow: 3px 4px 11px 0px #00000040;
    transition: all 0.5s;
}
/*토스트 메시지 활성화 되었을 때*/
#tost_message.active {
    opacity: 100%;
    bottom: 50px;
}

여기 까지 만든 코드로는 아래와 같이 토스트 메시지에 active 클래스가 추가됐을 때, 나타나는것을 확인할 수 있습니다.

⚙️ javascript

이제, javascript를 이용하여 버튼을 클릭했을 때 active 클래스가 토스트 메시지에 추가되고, 일정시간 뒤에 다시 active 클래스가 제거되는 이벤트를 적용해주면 토스트 팝업이 완성됩니다!

//1. 토스트 메시지, 버튼요소를 변수에 대입
let tostMessage = document.getElementById('tost_message');
let tostBtn = document.getElementById('tost_btn');

//2. 토스트 메시지 노출-사라짐 함수 작성
function tostOn(){
    tostMessage.classList.add('active');
    setTimeout(function(){
        tostMessage.classList.remove('active');
    },1000);
}

//3. 토스트 버튼에 이벤트 연결
tostBtn.addEventListener('click',function(){
    console.log('이벤트가 잘 연결 됐는지 확인');
    tostOn()
});

3. 완성

처음 구현하고자 하는 방향과 같이 버튼을 클릭하면 토스트 메시지가 잘 표시되는걸 볼 수 있습니다!

원본코드는 아래 깃허브에서 확인할 수 있습니다!
https://github.com/seungmimi/velog/tree/main/tost_popup