JavaScript로 Toastify 알림 색상을 자동으로 변경하는 방법

JavaScript로 Toastify 알림 색상을 자동으로 변경하는 방법

웹 개발을 하다 보면 사용자에게 알림을 표시하는 기능이 필요할 때가 많습니다. 예를 들어, 데이터가 성공적으로 추가되었거나 삭제되었을 때 이를 알려주는 간단한 알림이 있으면 사용자 경험(UX)을 크게 향상시킬 수 있습니다. 이런 상황에서 Toastify 라이브러리는 심플하면서도 스타일리시한 알림을 구현할 수 있는 좋은 도구입니다.

이 글에서는 Toastify 알림의 배경 색상을 알림 내용에 따라 자동으로 변경하는 방법을 살펴보겠습니다. 특히, 알림 문구에 특정 키워드(예: "추가", "삭제", "복사")가 포함된 경우, 이에 맞는 색상을 적용하는 간단한 JavaScript 코드를 작성해보겠습니다.

 

---

Toastify란?

Toastify는 웹 페이지에서 알림 메시지를 띄울 수 있는 경량 JavaScript 라이브러리입니다. 기본적인 사용 방법도 매우 간단하며, 다양한 스타일을 지원해 사용자가 원하는 형태로 알림을 커스터마이징할 수 있습니다.

Toastify의 주요 기능은 다음과 같습니다:

• 알림의 위치, 지속 시간, 닫기 버튼 등을 간단히 설정 가능
• CSS를 활용한 자유로운 디자인 커스터마이징
• 경량 라이브러리로 빠른 로딩 속도 제공

이번 글에서는 Toastify의 background 스타일을 알림 내용에 따라 동적으로 변경하는 기능을 추가해 보겠습니다.

---

배경 색상을 변경하는 상황 설정

아래와 같은 세 가지 경우를 가정해 보겠습니다:

1. 삭제 알림: 배경 색상을 붉은 계열(경고 느낌)로 설정
2. 추가 알림: 배경 색상을 녹색 계열(성공 느낌)로 설정
3. 복사 알림: 배경 색상을 파란색 계열(정보 전달 느낌)로 설정

알림 문구에 특정 키워드가 포함되어 있는지 확인하고, 이에 맞는 배경 색상을 자동으로 적용하도록 구현할 것입니다.

---

JavaScript 코드 작성하기

아래는 조건에 따라 Toastify 배경 색상을 동적으로 변경하는 JavaScript 함수입니다:

function myalert(str) {
    // 기본 스타일: 붉은 계열 (삭제와 관련된 알림)
    let backgroundStyle = "linear-gradient(to right, #ff5f6d, #ffc371)";

    // 특정 키워드에 따라 배경 색상을 변경
    if (str.includes('추가')) {
        backgroundStyle = "linear-gradient(to right, #56ab2f, #a8e063)"; // 녹색 계열
    } else if (str.includes('복사')) {
        backgroundStyle = "linear-gradient(to right, #36d1dc, #5b86e5)"; // 파란색 계열
    }

    // Toastify 알림 생성
    Toastify({
        text: str, // 알림 메시지 내용
        duration: 2000, // 알림 표시 시간 (밀리초)
        close: true, // 닫기 버튼 표시 여부
        gravity: "top", // 알림 위치 (top, bottom)
        position: "center", // 알림 정렬 (left, center, right)
        style: {
            background: backgroundStyle // 동적으로 설정된 배경 색상
        },
    }).showToast(); // 알림 표시
}

코드 설명

1. 기본 배경 색상 설정:
   • backgroundStyle 변수를 생성하고 초기값을 붉은 계열(linear-gradient(to right, #ff5f6d, #ffc371))로 설정합니다. 이는 기본적으로 "삭제"와 같은 경고성 알림에 사용됩니다.
2. 조건문을 통한 색상 변경:
   • str.includes('추가'): 알림 문구에 "추가"라는 단어가 포함된 경우 배경 색상을 녹색 계열로 변경합니다.
   • str.includes('복사'): 알림 문구에 "복사"라는 단어가 포함된 경우 배경 색상을 파란색 계열로 변경합니다.
3. Toastify 구성 및 호출:
   • Toastify 객체의 style.background 속성에 backgroundStyle 값을 설정하여 알림의 배경 색상을 동적으로 적용합니다.

---

코드 사용 예시

위에서 작성한 함수를 사용하면 알림 문구에 따라 색상이 자동으로 변경됩니다. 아래는 몇 가지 사용 예입니다:

myalert('데이터가 추가되었습니다'); // 녹색 계열 알림
myalert('데이터가 삭제되었습니다'); // 붉은 계열 알림
myalert('데이터를 복사하였습니다'); // 파란색 계열 알림

결과 화면:

1. "추가" 알림: 배경이 녹색으로 표시됩니다.
2. "삭제" 알림: 배경이 붉은색으로 표시됩니다.
3. "복사" 알림: 배경이 파란색으로 표시됩니다.

---

이 코드를 활용할 수 있는 상황

이 함수는 간단하지만, 실용적인 기능을 제공합니다. 특히 다음과 같은 경우에 유용하게 활용할 수 있습니다:

1. 관리자 페이지: 데이터 추가, 수정, 삭제와 같은 작업 결과를 사용자에게 명확히 전달할 때.
2. 전자 상거래 사이트: 장바구니에 아이템을 추가하거나 주문 내역을 복사할 때.
3. 개인 프로젝트: 알림 메시지를 사용자 친화적으로 커스터마이징할 때.

알림 메시지의 내용에 따라 배경 색상이 자동으로 변경되면 사용자에게 직관적인 피드백을 제공할 수 있습니다.

---

결론 없이 자연스럽게 마무리

이렇게 간단한 Toastify 코드로도 알림 메시지에 색상을 추가해 더욱 다채롭고 직관적인 UI를 제공할 수 있습니다. 작은 변화지만 사용자 경험을 크게 개선할 수 있는 부분이니, 필요에 따라 확장하여 더 다양한 상황에서도 활용해 보세요.