목록으로 돌아가기

배송 로봇 화면 제어 시스템

자율주행 배송 로봇의 터치스크린 UI를 담당하는 데스크탑 애플리케이션
배송 전 과정의 사용자 인터랙션과 로봇 상태 시각화를 제공합니다.

1 / 6

담당 역할

기획디자인프론트엔드백엔드

기술 스택

Electron
React
TypeScript
NestJS
Socket.io
TailwindCSS
TanStack Query

주요 기능

  • 배송지 설정: 숫자 패드로 호실 번호 입력 및 목적지 유효성 검증
  • 문 제어: 상단/하단 컨테이너 문 개폐 및 실시간 상태 확인
  • 배송 워크플로우: 물품 적재부터 도착 후 비밀번호 인증까지 전체 배송 과정 안내
  • 예외 상황 처리: 경로 차단, 충돌, 비상정지 등 다양한 이상 상황 대응 화면
  • 충전 및 대기 모드: 배터리 상태 시각화 및 Lottie 애니메이션 기반 대기 화면

수행 업무

  • WebSocket 기반 실시간 양방향 통신: 로봇 제어 시스템과 화면 간 이벤트를 Socket.io로 즉시 전달하여 상태 동기화
  • 이벤트 기반 화면 전환 시스템: 로봇 상태 변화(충전, 도착, 충돌 등)에 따라 자동으로 적절한 화면으로 전환
  • React Context 기반 WebSocket 상태 관리: 커스텀 훅으로 WebSocket 연결과 이벤트 소비를 전역에서 일관되게 관리
  • TanStack Query를 활용한 자동 폴링: 대시보드와 문 상태를 설정 가능한 간격으로 자동 갱신
  • 다단계 배송 워크플로우 구현: 상태 기반 step 관리로 인사 → 비밀번호 → 문열림 → 하역 → 문닫힘 순차 처리
  • Electron Store를 활용한 설정 영구 저장: 대시보드/문 상태 폴링 간격을 로컬에 저장하여 재시작 후에도 유지
  • Lottie 애니메이션 연속 재생: 커스텀 훅으로 여러 애니메이션을 순차 재생하고 마지막 애니메이션 루프 처리
#Electron
#React
#로봇공학
#WebSocket
#실시간 통신
#터치스크린 UI