텔레그램 알림 기능 설정_산불페이지

텔레그램 알림 기능은 측정한 데이터의 값(Gas)가 임곗값 이상일 때 알림이 가도록 설정해야 한다.

그래서 생각한 방법은 대시보드의 지도가 load 될 때마다 값을 비교해서 알림이 가도록 구현했다.

FR_page에 들어오면 처음 화면에 지도가 뜬다.

저 대시보드의 지도가 로드 될 때마다 구현하도록 했다.

markers.forEach((device, i) => {
    console.log("::::::::::::",device.packets[0].F_Pressure)
    if (device.install?.lat && device.install?.lng) {
        const marker = new kakao.maps.Marker({
            title: device.install.installName,
            position: new kakao.maps.LatLng(device.install.lat, device.install.lng),
            image: device.packets[0].F_Pressure > 5000 ? redMarkerImage : greenMarkerImage
        });
        
        marker.setMap(map);
        mapMarkers.push(marker)
    }
    if(device.packets[0].F_Gas > 5000){
        sendTelegramMessage(device)
    }
});

이렇게만 해주었더니

React의 ESLint 규칙 중 하나인 react-hooks/exhaustive-deps에서 발생한 것으로, useCallback(또는 useEffect) 훅의 의존성 배열에 필요한 값이 빠졌다는 의미

이런 오류가 발생해서 의존성 배열에 sendTelegramMessage를 추가해주었다.

이젠 sendTelegramMessage 함수를 생성해준다.

const sendTelegramMessage = useCallback(async (device) => {
        
        const token = "Token값";
        const chatId = chatId;
        const url = `https://api.telegram.org/bot${token}/sendMessage`;

        const payload = {
            chat_id: chatId,
            text: `<b>[🔥산불경고🔥]</b>\n<b>단말기 정보</b>\nIMEI : ${device.IMEI} S/N : ${device.SerialNumber}\n<b>위치 정보</b>\n위치 : ${device.install.customerAddress}\n위도 : ${device.install.lat}\n경도 : ${device.install.lng}\n<b>가스(${device.packets[0].F_Gas})</b>를 감지하였습니다. 빠른 확인 부탁드립니다.`,
            parse_mode: "HTML"
        };


        try {
            const response = await fetch(url, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
            });

            const data = await response.json();
            console.log("Telegram response:", data);
        } catch (error) {
            console.error("Telegram error:", error);
        }
},[]);

처음에는 원래 useCallback으로 감싸주지 않고 그냥 일반 함수로 정의했다.

하지만, 또 ESLint 경고가 발생해서 useCallback으로 감싸주었다.

위에 url에서 전에 받아온 token 값과 chatid가 사용된다.

이렇게 구현을 해주고 나니, chatID를 지정해주면 사용자에 따른 경고 알림을 못 보내주고 chatID를 변경할 때마다 코드를 변경해줘야 한다는 문제점(?)이 생겼다.

그래서, chat id를 작성할 수 있는 입력 칸을 생성해 그 id를 받아오기로 결정했다.

그건 다음 벨로그에서 ...