Alarm Popup 시스템 연구노트

Alarm Popup 시스템 연구노트

📋 개요

alarm-popup.js는 실시간 알람 팝업 시스템을 구현한 JavaScript 모듈입니다. 화재, 가스, 침입 등의 보안 알람을 실시간으로 모니터링하고 사용자에게 팝업 형태로 알림을 제공합니다.

🏗️ 시스템 아키텍처

주요 클래스 구조

1. PopupDB 클래스

• 목적: IndexedDB를 활용한 알람 데이터 영구 저장
• 특징:
  • 브라우저 재시작 시에도 알람 상태 복원
  • 비동기 처리로 성능 최적화
  • 에러 처리 및 폴백 메커니즘

class PopupDB {
    constructor() {
        this.dbName = 'AlarmPopupDB';
        this.version = 1;
        this.storeName = 'popups';
    }
}

2. AlarmPopupManager 클래스

• 목적: 알람 팝업 시스템의 전체 관리
• 핵심 기능:
  • 실시간 알람 폴링 (4초 간격)
  • 알람 그룹핑 및 분류
  • 팝업 UI 생성 및 관리
  • 알림음 재생
  • 드래그 앤 드롭 기능

🔄 핵심 워크플로우

1. 초기화 과정

시스템 시작 → IndexedDB 초기화 → 저장된 팝업 복원 → 폴링 시작

2. 알람 처리 과정

API 폴링 → 새 알람 수신 → 알람 그룹핑 → 팝업 생성/업데이트 → 알림음 재생

3. 알람 그룹핑 로직

• 화재/가스/침입 알람: alarmType_deviceGroupId 형태로 그룹핑
• 기타 알람: alarmType만으로 그룹핑
• 알람 타입 정규화:
  • 17, 193 → 1 (화재)
  • 18 → 2 (가스)
  • 19 → 3 (침입)

🎵 알림음 시스템

알림음 로드 및 재생

async loadNotificationSound() {
    const soundSetting = localStorage.getItem('clientNotificationSound');
    if (soundSetting) {
        this.notificationSoundPath = soundSetting;
    }
}

playNotificationSound() {
    const audio = new Audio(this.notificationSoundPath);
    audio.volume = 1;
    audio.play().catch(error => {
        console.warn('알림음 재생 실패:', error);
    });
}

💾 데이터 영속성

IndexedDB 활용

• 저장소 이름: AlarmPopupDB
• 스토어 이름: popups
• 키 구조: alarmType_deviceGroupId 또는 alarmType
• 데이터 구조:

  {
      key: string,
      data: {
          alarmType: string,
          alarmTypeName: string,
          deviceGroupId: string,
          deviceGroupName: string,
          alarmList: Array,
          timestamp: number
      }
  }

🎨 UI/UX 기능

팝업 UI 특징

• 동적 위치 조정: 기존 팝업과 겹치지 않도록 자동 배치
• 드래그 앤 드롭: 사용자가 팝업 위치 조정 가능
• 색상 코딩: 알람 타입별 구분 (CSS 클래스: color-{alarmType})
• 반응형 테이블: 알람 정보를 테이블 형태로 표시

드래그 기능 구현

const onMouseDown = (e) => {
    isDragging = true;
    const rect = popup.getBoundingClientRect();
    startX = e.clientX - rect.left;
    startY = e.clientY - rect.top;
    // 이벤트 리스너 등록
};

🔧 주요 기능 분석

1. 실시간 폴링 시스템

• 폴링 간격: 4초
• API 엔드포인트: /api/monitoring/select-alarm-popup-message
• 마지막 수신 알람 ID 추적: 중복 알람 방지

2. 알람 분류 및 처리

function normalizeAlarmType(type) {
    if (type === '17' || type === '193') return '1';
    if (type === '18') return '2';
    if (type === '19') return '3';
    return type;
}

3. 그룹 해제 기능

• 화재 알람: 센서 복구/화재 해제 알림 후 해제 가능
• API 호출: /api/monitoring/group-send-wave-alarm
• 파라미터: deviceGroupIds, alarmSetting

📊 성능 최적화

메모리 관리

• 메모리 캐시: Map 객체로 열린 팝업 관리
• 중복 제거: alarmId 기준으로 중복 알람 필터링
• 비동기 저장: IndexedDB 저장 시 메인 스레드 블로킹 방지

에러 처리

• IndexedDB 실패 시: 메모리 모드로 폴백
• 알림음 재생 실패: 사용자 상호작용 필요 메시지 표시
• API 호출 실패: 콘솔 로그 및 계속 폴링

📜 히스토리 기능

24시간 알람 히스토리

• 기능: 지난 24시간 동안의 모든 알람 조회
• API: /api/monitoring/select-alarm-popup-message-history
• UI: 별도 팝업으로 알람 목록 표시

window.showAlarmPopupHistory = function() {
    const now = new Date();
    const yesterday = new Date(now.getTime() - (24 * 60 * 60 * 1000));
    // API 호출 및 UI 생성
}

🔐 보안 고려사항

알람 타입별 제약

• 화재 알람 (타입 1):
  • 팝업 강제 닫기 방지
  • 센서 복구 알림 후에만 해제 가능
  • 그룹 해제 기능 제한

데이터 검증

• 알람 데이터 유효성 검사
• deviceGroupId 존재 여부 확인
• 사용자 권한 확인 (그룹 해제 시)

🌐 브라우저 호환성

지원 기술

• IndexedDB: 모든 모던 브라우저 지원
• Web Audio API: 알림음 재생
• localStorage: 설정 저장
• Fetch API: 서버 통신

폴백 메커니즘

• IndexedDB 실패 시 메모리 저장소 사용
• 알림음 재생 실패 시 조용히 실패 처리

🎯 사용 시나리오

일반적인 사용 흐름

1. 페이지 로드: 시스템 초기화 및 저장된 팝업 복원
2. 실시간 모니터링: 4초마다 새로운 알람 확인
3. 알람 수신: 팝업 생성 및 알림음 재생
4. 사용자 상호작용: 팝업 이동, 그룹 해제, 닫기
5. 히스토리 조회: 과거 알람 내역 확인

특수 상황 처리

• 브라우저 재시작: IndexedDB에서 팝업 상태 복원
• 다중 탭: localStorage를 통한 동기화
• 네트워크 오류: 폴링 계속 시도

🔧 설정 및 커스터마이징

주요 설정값

this.pollInterval = 4000; // 폴링 간격 (4초)
this.warningMs = 30 * 1000; // 경고 시간 (30초)
this.timeoutSidebarMs = 10 * 60 * 1000; // 사이드바 표시 시간 (10분)

커스터마이징 포인트

• 폴링 간격 조정: 서버 부하와 실시간성 균형
• 알림음 설정: localStorage에서 사용자 정의 사운드
• UI 테마: CSS 클래스를 통한 알람 타입별 스타일링

📈 모니터링 및 로깅

로그 레벨

• INFO: 정상적인 알람 처리 과정
• WARN: 복구 가능한 오류 (IndexedDB 실패 등)
• ERROR: 중요한 오류 (API 호출 실패 등)

성능 메트릭

• 팝업 복원 시간: IndexedDB에서 데이터 로드 시간
• 폴링 응답 시간: API 호출 응답 시간
• 메모리 사용량: 열린 팝업 수와 메모리 캐시 크기

🚀 향후 개선 방안

성능 최적화

• WebSocket 연결: 폴링 대신 실시간 푸시 알림
• 가상화: 대량의 알람 데이터 효율적 렌더링
• Service Worker: 백그라운드에서 알람 처리

기능 확장

• 알람 필터링: 사용자 정의 필터 옵션
• 알람 우선순위: 중요도별 팝업 스타일링
• 모바일 최적화: 터치 인터페이스 지원

사용자 경험 개선

• 키보드 단축키: 팝업 제어를 위한 단축키
• 접근성: 스크린 리더 지원
• 다국어: 국제화 지원