목록으로 돌아가기
사이트 방문
역사 네트워크 장비 모니터링 및 관리 시스템
철도역 서버, 네트워크 장비, 센서 등 IT 인프라를 실시간으로 모니터링하고 장애를 관리하는 네트워크 관리 시스템
드래그 앤 드롭 대시보드, 네트워크 토폴로지 편집기, 실시간 장애 알림 등 다양한 기능을 제공합니다.
1 / 3
담당 역할
기획디자인프론트엔드백엔드
기술 스택
React 18
TypeScript
Redux Toolkit
React Flow
ECharts
Ant Design
Styled Components
Vite
WebSocket
주요 기능
- 커스터마이징 가능한 대시보드: 드래그 앤 드롭으로 12종의 위젯을 자유롭게 배치하고 개인화할 수 있는 대시보드
- 네트워크 토폴로지 편집기: 네트워크 장비 연결 구조를 시각화하고 편집할 수 있는 노드 기반 다이어그램
- 실시간 장애 알림: WebSocket을 통한 실시간 장애 감지 및 음성 알림 시스템
- 랙실장도 관리: 서버 랙 내 장비 배치를 시각적으로 관리하는 다이어그램 편집기
- 보고서 생성: 시설물 현황 및 상세 보고서를 PDF, Excel, HTML 형식으로 생성 및 다운로드
수행 업무
- React Flow 기반 다이어그램 편집기: 토폴로지, 랙실장도, 노선도 3종의 노드 기반 편집기를 구현하여 복잡한 인프라 구조를 시각화
- Redux Toolkit을 활용한 상태 관리: 10개 이상의 페이지별 독립적인 slice와 비동기 thunk로 복잡한 상태를 체계적으로 관리
- React Grid Layout 기반 위젯 시스템: 드래그 앤 드롭, 리사이징, 자동 정렬이 가능한 대시보드 위젯 시스템 구현
- WebSocket 실시간 알림: 장애 발생 시 즉각적인 팝업 알림과 음성 알림을 제공하는 실시간 모니터링 시스템
- 라이트/다크 테마 지원: Styled Components와 테마 시스템을 활용한 동적 테마 전환 기능 구현
- ECharts 기반 데이터 시각화: 파이차트, 라인차트, 바차트 등 10종 이상의 차트 컴포넌트로 성능 및 장애 데이터 시각화
- 트리 기반 계층적 내비게이션: 지역본부-역사-장비 계층 구조를 검색 가능한 트리 컴포넌트로 구현
#EMS
#모니터링
#React Flow
#대시보드
#실시간
#철도