[JS] Toast Notification

토스트 노티피케이션은 어떤 동작에 대한 피드백을 나타내는 것을 뜻합니다

이번 포스트에서는 버튼을 눌렀을 때 그 동작에 대한 반응을 확인 하라 수 있는 toast notification을 만들어 보려고 합니다. 

 

 

저기 위에 버튼들을 누르면 해당 토스트들이 생성이 됩니다. 

그리고 timeout을 걸어서 시간이 되면 사라지게 만들었습니다. 

함께 코드 보면서 진행해봅시다. 

 

---

ToastBox와 메시지 변수 선언 

let toastBox = document.getElementById("toastBox");
let successMsg = '<i class="fa-solid fa-circle-check"></i>successfully submitted';
let errorMsg = '<i class="fa-solid fa-circle-xmark"></i>Please fix the error';
let invalidMsg = '<i class="fa-solid fa-circle-exclamation"></i>Invalid input, check again';

- 먼저 toastBox라는 ID를 가진 변수를 가져옵니다. toastBox는 동적으로 생성될 알람(toast)메시지를 담는 역할을 합니다. 

successMsg, errorMsg, invalidMsg는 각각 성공, 에러, 그리고 잘못된 입력에 대한 알림 메시지를 Html코드와 함께 문자열로 저장합니다. 

 

showToast함수 정의 

function showToast(msg) {
  let toast = document.createElement("div");
  toast.classList.add("toast");
  toast.innerHTML = msg;
  toastBox.appendChild(toast);
  if (msg.includes("error")) {
    toast.classList.add("error");
  }
  if (msg.includes("invalid")) {
    toast.classList.add("invalid");
  }
  setTimeout(() => {
    toast.remove();
  }, 6000);
}

- 버튼을 누르면 발생하게 되는 showToast( )함수입니다. 

- document.createElement('div')를 사용해 새로운 div요소를 생성합니다. 이 요소는 동적으로 생성되는 알림의 컨테이너 역할을 수행합니다 .

- toast.classList.add('toast')는 이 div요소에 toast라는 css클래스를 추가해, 알림에 대한 스타일을 지정할 수 있게 합니다. 

- toast.innerHTML=msg는 함수에 전달된 메시지(msg)를 div안에 넣는 역할을 합니다. 

- 마지막으로 toastBox.appendChild(toast)는 생성된 toast를 toastBox안에 추가해 화면에 표시되게 합니다. 

 

메시지에 따른 추가 클래스 지정 

- error라는 단어가 포함되어 있으면 toast요소에 error라는 클래스를 추가합니다. 

- Invalid라는 요소가 포함되어 있으면 invalid클래스를 추가해 입력이 잘못된 경우 별도로 스타일링 할 수 있도록 합니다. 

 

알림 자동 제거 

setTimeout(() => {
  toast.remove();
}, 6000);

- setTimeout함수를 이용해 6초(6000ms)후에 toast요소를 자동으로 제거하는 역할을 합니다. 알림 메시지가 일정 시간 후에 자동을 ㅗ사라지게 하기 위한 설정된 일부입니다. 

 

이러한 방식으로 사용자가 알림을 확인한 뒤 일정 시간이 지나면 자동으로 사라져 화면이 깔끔하게 유지될 수 있습니다.