Plug Atlas
Cesium 실외 지도 기반 IoT 관제 — 이벤트 · 알람 시스템
Role: Frontend 개발 (이벤트·알람 시스템 · 공원 관리 · 지도 인터랙션)
Overview
Cesium 기반 실외 지도 위에서 공원 시설과 IoT 센서를 관제하는 시스템입니다. 실내 3D 도면을 다루던 이전 관제 프로젝트와 달리 지구 좌표계 위에서 마커·폴리곤을 다뤄야 했습니다. 저는 이벤트 도메인 전체를 맡았습니다 — 센서 종류별로 '무엇을 이벤트로 볼지' 정하는 조건 관리, 발생한 이벤트의 조회·필터·시계열 통계, 실시간 알람 수신과 조치 이력, 알람에서 이벤트 상세·발생 위치로 이어지는 흐름까지입니다. 공원 관리(영역 폴리곤 그리기·썸네일)와 지도 마커 인터랙션 개선도 함께 담당했습니다.
이 프로젝트의 핵심
머지된 PR 11건 · +8,239 / −2,227줄 · 188개 파일 (2025.10
2025.11)
센서 종류별 이벤트 조건 관리
어떤 값이 어떤 범위일 때 이벤트로 볼지 정의하는 규칙 편집기와 검증 로직
이벤트 조회·통계 페이지
필터, 목록, Recharts 시계열 차트, 통계 섹션
이벤트 상세 모달
조치 이력, 발생 위치 지도, 임계값 대비 실측값을 보여주는 ValueRangeIndicator
나머지 3개 더 보기접기
실시간 알람
알림 팝업과 스토어를 붙여 수신·조치까지 연결, 알림 클릭 시 해당 이벤트 상세로 데이터 연동
공원(Site) 관리
Cesium 폴리곤으로 공원 영역을 직접 그려 저장, 목록 썸네일 업로드 지원
Cesium 마커 인터랙션 개선 및 대시보드 지도뷰 UX 정리
Screens
실제 운영 화면입니다. 손님·직원의 이름과 CCTV에 잡힌 이용객은 알아볼 수 없게 처리했고, 내부 접속 주소는 잘라냈습니다.
자세히
이벤트 조건 관리 — 관제의 입력단3
센서 종류마다 이벤트 판단 기준이 달라, 종류별로 조건을 정의하고 편집하는 관리 화면을 구성
조건 편집 상태와 검증을 useEventConditionManager 훅으로 분리해 화면은 표시에만 집중하게 함
조건 검증 규칙을 별도 유틸로 빼서, 잘못된 범위·중복 조건이 저장되기 전에 걸러지도록 처리
이벤트 조회 · 통계3
필터(기간·레벨·상태)와 목록을 분리해 조합이 늘어도 화면이 복잡해지지 않게 구성
Recharts 기반 시계열 차트로 기간별 이벤트 발생 추이를 표시하고, 통계 섹션과 함께 배치
레벨·상태·시간 포맷을 levelUtils · statusUtils · timeUtils로 분리해 목록·모달·차트가 같은 규칙을 공유
실시간 알람과 조치4
알림 팝업 컴포넌트와 zustand 알림 스토어를 붙여 실시간으로 들어오는 알람을 화면에 반영
알람 목록에서 바로 조치할 수 있게 하고, 조치 이력을 이벤트 상세 모달에서 확인하도록 연결
알림 클릭 시 해당 이벤트의 상세 데이터가 정확히 열리도록 데이터 연동 경로를 정리
이벤트 상세에서 발생 위치를 지도로 보여주고, 측정값이 임계 범위의 어디에 있는지 시각적으로 표시
공원 관리 · 지도 인터랙션4
Cesium 위에서 공원 영역 폴리곤을 직접 그려 저장하는 편집기(CesiumPolygonDrawer) 구현
공원 목록 썸네일 지원 및 업로드 기능 추가, 업로드 시 content-type 고정으로 실패하던 문제 수정
지도 마커 인터랙션(선택·호버·클릭 반응) 개선 및 대시보드 지도뷰 스타일·UX 정리
센서·CCTV 장비 관리 화면 구성