목록으로 돌아가기
AI 기반 철도차량 상태 모니터링 및 관리 시스템
철도차량 부품의 실시간 상태 모니터링과 AI 기반 고장 예측 분석 시스템
센서 데이터 시각화와 이상 징후 조기 감지로 예방 정비를 지원합니다.
1 / 7
담당 역할
기획디자인프론트엔드백엔드
기술 스택
React
TypeScript
Vite
Mantine UI
Zustand
React Router
React Grid Layout
Zod
주요 기능
- 커스터마이징 대시보드: 드래그 앤 드롭으로 위젯 배치, 다중 대시보드 생성 및 기본 대시보드 설정 지원
- 노선/장치별 편성 정보: 경부선, 호남선 등 노선별 열차 편성 현황과 개별 장치(주변압기, 견인전동기 등) 상태 시각화
- 유지보수 관리: 고장 감지된 장치의 진단 코드 및 조치 코드 등록, 유지보수 이력 관리
- AI 학습/모델 설정: 이상진단 및 예측을 위한 AI 모델 하이퍼파라미터 설정, 학습 데이터 선택, 모델 배포 기능
- 통계/이력 조회: 기간별 분석 통계, 유지보수 통계, 시스템 이력 조회 및 장치간 데이터 비교 기능
수행 업무
- 드래그 앤 드롭 대시보드: React Grid Layout 기반으로 6x3 그리드에 8종류 위젯을 자유롭게 배치하고 레이아웃을 저장/복원하는 커스터마이징 시스템 구현
- 열차 편성 시각화 컴포넌트: SVG 기반 4량/6량 편성 열차 그래픽을 React 컴포넌트로 제작, 차량별 상태(정상/경고/위험)를 색상으로 직관적 표현
- 계층적 장치 선택 UI: Tree 컴포넌트로 노선→편성→차량→장치의 4단계 계층 구조 탐색, 최대 5개 장치 다중 선택 후 데이터 비교 기능 구현
- Context와 Zustand 하이브리드 상태 관리: 대시보드 편집 모드는 Context API로 지역 상태 관리, 전역 데이터 조회는 Zustand 스토어로 분리하여 성능 최적화
- 반응형 위젯 페이지네이션: 위젯 높이를 동적으로 계산하여 테이블 행 수를 자동 조절, 전체화면 모드에서도 최적의 데이터 표시량 유지
- Mantine Form + Zod 통합 폼 검증: AI 학습 설정 등 복잡한 폼에서 Zod 스키마 기반 실시간 유효성 검사 및 타입 안전성 확보
- 일관된 컴포넌트 시스템: SectionContainer, PageContainer 등 레이아웃 컴포넌트 패턴으로 20개 이상의 페이지에서 통일된 UI/UX 제공
#철도 모니터링
#React
#대시보드
#실시간
#관리 시스템
#Mantine
#AI