토스트 창을 만들어보자

토스트 창이 뭐냐… 가끔 뭐 하다보면 뿅 하고 나오는 그거 맞다. 예를 들자면 메일을 보냈을 때, 화면 한 켠에서 보냈습니다! 하고 뿅 나왔다가 사라지는 그거 말이다.

---

일단 들어가기 전에 생각해보자. 토스트창을 왜 쓰나요? 모달창도 있고 alert()로 알림을 띄울 수도 있는데 굳이 토스트 창을 만드는 이유가 뭘까? 모달창과 alert()로 띄우는 알림은 사용자가 상호작용을 해야 없어진다. 뭐 예를 들어서 오류가 났다, 그거는 내가 확인하고 상호작용 해야 하는거니까 모달이나 alert()를 쓰는 게 맞다. 오류가 났으면 오류메시지를 통해서 뭔 오류가 어떻게 터졌는지 보고 확인하고 문의를 하든 대처를 해야 하니까. 근데 그게 상대적으로 사소한거라 굳이 모달이나 alert()로 안 해도 되는 알림이라면?
 
예를 들어서 쿠팡에서 냉동 볶음밥 1+1 패키지를 장바구니에 담았다고 해 보자. 그럼 장바구니에 담겼다고 알림이 나한테 가면서 장바구니 아이콘에 있는 숫자가 +1 될것이다. 이건 어떻게 보면 상대적으로 사소한 알림이기도 하고, 사용자 입장에서는 장바구니 아이콘 숫자로 확인할수도 있는데 이걸 굳이 모달이나 alert()로 띄워야 할 필요가 있을까? 물론 모달창으로 만들고 장바구니 보기 버튼을 눌러서 장바구니로 가갈지말지 선택하게 할 수도 있다.
 
반대로 생각해보자. 냉동 볶음밥 1+1 패키지를 담고 결제를 하는 과정에서 뭔가 문제가 생겼다면 내가 문제가 생겼다는 걸 인지하고 다시 결제를 하던가 잔액부족이면 잔액을 채워넣던가 해야 한다. 그럴 때는 토스트 창으로 에러 메시지를 뿅 나왔다가 뿅 사라지게 하면 내 입장에서는 이게 구매가 된건지 어쩐건지 모를 것이다. 이렇게 꼭 한 가지만 고집할 필요도 없고, 꼭 한가지를 배제할 필요 없이 적재적소에 잘 쓰면 된다. 그래서 왜 비교적 사소한 알림에 토스트 창을 쓰냐고? 그런것까지 일일이 버튼 누르기 귀찮자낭.

---

.toast {
  width: 250px;
  height: 50px;
  font-size: 16pt;
  text-align: center;
  position: fixed;
  top: 30px;
  right: 30px;
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#toast1 {
  background-color: #fefefe;
}

#toast2 {
  background-color: #dd7788;
}

#toast3 {
  background-color: #77dd88;
}

토스트창 세 개가 있는데 공통적인 CSS를 주기 위해 일단 클래스를 줬고, 각기 다른 세 개에 아이디도 부여한 상태이다. 이 상태에서는 아직까지 화면 구석에 토스트창이 '보이는'게 맞다. 왜? opacity 안 바꿨잖아.
 

const toast1 = document.querySelector("#toast1");
const toast2 = document.querySelector('#toast2');
const toast3 = document.querySelector('#toast3');
const toastBtn = document.querySelectorAll('button');

이제 고난의 자바스크립트 시간이다. 코드펜으로 하는거라 캡처는 별도로 안 올렸는데, 토스트창이 세 개 있고 버튼도 세 개다. 각 버튼당 토스트창이 하나씩 할당되는 구조이다. 즉, 버튼이 세개 주르륵 있으니까 쿼리셀렉터올로 가져온 것이다. 
 

const toast1 = document.querySelector("#toast1");
const toast2 = document.querySelector('#toast2');
const toast3 = document.querySelector('#toast3');
const toastBtn = document.querySelectorAll('button');

function toastOn(item) {
  item.style.opacity = 1;
}

toastBtn[0].addEventListener('click',()=>{
  toastOn(toast1);
});

toastBtn[1].addEventListener('click',()=>{
  toastOn(toast2);
});

toastBtn[2].addEventListener('click',()=>{
  toastOn(toast3);
});

버튼은 라디오버튼이나 체크박스처럼 if문으로 못 주나… 아무튼, 이렇게 하면 버튼을 눌렀을 때 토스트 창이 나타난다. 근데 문제가 하나 있다. 토스트창은 나타난 다음에 일정 시간이 지나면 사라져야 하는데, 이 창이 사라지질 않아요. 왜? JS로 투명도 1로 만드는 것만 했잖음. 일정 시간이 지나면 다시 투명도가 0이 되게 해야 토스트창이 사라지지.
 

function toastOn(item) {
  item.style.opacity = 1;
  setTimeout(()=>{
    item.style.opacity = 0;
  }, 1000)
}

setTimeout()함수를 써서 일정 시간 후에 다시 투명도 0으로 바꿔주십쇼~ 하면 된다.
 
See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.

눌러보면 뭔가 뿅 나올 것이다. 

---

그럼 여기서 이 글을 본 여러분들은 이런 궁금증을 가질 수도 있다. '이런거 말고 밑에서 올라오는(혹은 위에서 내려오는) 토스트 창은 어떻게 만들어요?'
 
그건 간단하다. CSS 속성을 위치에 주고 스타일을 위치로 바꾸면 된다. 뭔 소리냐고?

.toast {
  width: 300px;
  height: 50px;
  font-size: 16pt;
  text-align: center;
  position: fixed;
  top: -130px;
  right: 30px;
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  background-color: #eeeeee;
  transition: .5s;
}

기존 코드에서 opacity를 빼고 transition을 반값때린 코드이다. 위에서 튀어나오는 토스트 창을 만들고 싶으면 여기서 top을 음수로 바꿔주면 된다. 일단 -130px로 바꿨다.
 
 

function toastOn(item) {
  item.style.top = '30px';
  setTimeout(()=>{
    item.style.top = '-130px';
  }, 1000)
}

기존의 opacity를 바꿔주는 코드도 갖고와서 top을 바꿔주면 된다.
 
See the Pen Toast window 2 by koreanraichu (@koreanraichu) on CodePen.

참 쉽죠?