텔레그램 알림 기능_사용자 별 chat id 설정

알림 기능을 구현하기 위해서는 chat id가 고정된 값이 아닌, 사용자 별 chat id가 필요했다. 그래서 user 페이지에 설정 탭에서 텔레그램 chat id를 받아 올 입력칸을 구현해주었다.

알림과 텔레그램의 체크박스를 체크하면 텔레그램 ID를 적을 수 있는 칸이 활성화 된다.

chat id를 넣은 후 설정 저장을 누르면 saveSystemSetting을 불러와 userservice를 통해 user table에 저장이 된다.

일단, telegram chat id를 작성할 수 있는 코드이다.

<Checks label={'텔레그램'} checked={settings.telegram} onChange={() => {
    setSettings({ ...settings, telegram: !settings.telegram })
}} />

체크박스를 클릭하면 만약 true 이면 false로 false면 true로 변경이 된다.

<div className='col-sm-10' style={{ marginTop: 20 }}>
    <FormGroup label={t('텔레그램 ID')}>
        <Input
            disabled={!settings['telegram']}
            type={'text'}
            value={settings.receiveTelegram || ''}
            placeholder={t('chat id를 입력해주세요.')}
            onChange={(e) => setSettings({ ...settings, receiveTelegram: e.target.value })}
        />
    </FormGroup>
</div>

telegram이 false면 이 입력칸은 비활성화가 된다.
텔레그램 체크 박스를 클릭해서 true로 만들어 활성화 시킨 후 사용자가 입력한 Chat ID는 settings.receiveTelegram에 저장한다.

그런 다음 설정 저장 버튼을 눌러서,

const saveSystemSetting = (e) => {
    ({
        e: e,
        id: user.me?.id || 0,
        alarm: settings,
    })
    let data = {
        id: user.me?.id || 0,
        alarm: settings,
    }

    UserService.saveAlarm(data).then((r2) => {
        console.log(data)
        showNotification(t('시스템 설정'), t('시스템 설정 저장 하였습니다.'), 'success');
    })
}

user.me.alarm에 settings값을 저장한다.

이렇게 alarm이 저장이 되면 user.me가 변경되기 때문에

useEffect(() => {
    console.log("user.me.alarm:::::::::::::::::::", user.me.alarm)
    setSettings(user.me?.alarm ? JSON.parse(user.me?.alarm) : {})
    forceUpdate()
}, [user.me, forceUpdate])


console.log(settings)

이 코드가 실행된다. 그러면 setSettiings에 현재 settings의 값이 객체 형태로 저장된다.

이렇게만 진행했는데, DB에 따로 지정해준 recevie_telegram 컬럼에 저장이 되지 않아서 backend에서 아래 코드를 추가해주었다.

  if (_.alarm) {
  const alarm = _.alarm;

  user.receivePush = alarm.isReceivePush;
  user.receivePhone = alarm.receiveSms;
  user.receiveTelegram = alarm.receiveTelegram;
  user.receiveEmail = alarm.receiveEmail;
}

이렇게 했더니 정확하게 전달이 되었고,

const sendTelegramMessage = useCallback(async (device) => {
        
        const token = "";
        const chatId = settings.receiveTelegram;
        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);
        }
},[settings]);

settings를 의존성 배열에 넣어준 뒤 settings에 저장된 chat id를 가져오도록 설정 완료했다.

이렇게 사용자별 chat id를 받아와 알림 기능이 가도록 설정 완료했다.