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