FireScout 3.0 HITL - AI 화재감지 인간검증 웹 인터페이스
AI가 감지한 화재 의심 상황을 인간 운영자가 실시간으로 검토·판단할 수 있는 React 기반 모니터링 대시보드
개요
FireScout 3.0 HITL Frontend는 AI 기반 화재 감지 시스템에서 Human-in-the-Loop 워크플로우를 구현한 웹 애플리케이션입니다. AI가 화재로 의심되는 상황을 감지하면 Pending 상태로 등록되고, 운영자는 감지 이미지와 카메라 정보를 검토하여 실제 화재(Confirmed) 또는 오경보(False Alarms)로 분류합니다. 10초 간격 자동 새로고침, 3단계 알람 분류 시스템, JWT 기반 인증을 지원하며, React 19와 TypeScript로 작성되었습니다. Docker 멀티스테이지 빌드를 통해 Nginx 환경에 배포되고, GitHub Actions로 자동화된 이미지 빌드 파이프라인을 갖추고 있습니다.
담당 역할
React 19와 TypeScript를 활용한 실시간 모니터링 대시보드 개발, JWT 인증 시스템 구현, Docker 기반 배포 환경 구성 및 GitHub Actions CI/CD 파이프라인 구축
아키텍처 다이어그램
레포지토리 분석 결과를 바탕으로 자동 생성된 구조도입니다.
HITL 시스템 아키텍처
AI 화재감지부터 인간 검증, 최종 분류까지 전체 워크플로우와 프론트엔드 구성요소를 보여줍니다.
알람 처리 플로우
AI 감지부터 운영자의 최종 판단까지 알람 상태 전환 흐름을 나타냅니다.
프론트엔드 데이터 플로우
사용자 인증부터 알람 데이터 조회 및 상태 업데이트까지 클라이언트 내 데이터 흐름을 보여줍니다.
기술스택
각 기술을 이 프로젝트에서 어떤 용도로 썼는지 정리했습니다.
언어
- TypeScript타입 안전성을 보장하며 API 모델과 상태 관리 로직 구현
프론트엔드
- ReactUI 컴포넌트와 알람 모니터링 화면 구성 (v19 사용)
- React Router로그인, 모니터링 등 페이지 라우팅 관리
- ZustandJWT 토큰 등 클라이언트 상태 관리
- React QueryHITL 알람 목록 조회 및 자동 새로고침 등 서버 상태 관리
- AxiosREST API 호출 및 인터셉터를 통한 에러 처리
- SASS반응형 레이아웃과 컴포넌트 스타일 작성
- React Hook Form로그인 폼 유효성 검사 및 입력 관리
도구
- Vite개발 서버 및 프로덕션 빌드 도구
DevOps
- GitHub ActionsDocker 이미지 자동 빌드 및 레지스트리 푸시
핵심 포인트
- React 19와 TypeScript 5.9를 활용하여 타입 안전한 실시간 알람 모니터링 시스템 구현
- 10초 간격 자동 새로고침 중 데이터 변경 감지를 통해 불필요한 UI 깜박임 방지 로직 적용
- Pending, False Alarms, Confirmed 3단계 알람 분류 및 각각 다른 정렬·필터링 규칙 적용
- Docker 멀티스테이지 빌드로 Node.js 빌드와 Nginx 서빙 분리하여 이미지 크기 최적화
- GitHub Actions 수동 워크플로우로 환경별(production, development, staging) 빌드 자동화
문제와 해결
문제10초마다 자동 새로고침 시 데이터가 바뀌지 않았는데도 UI가 깜박이는 문제
해결데이터 변경 감지 로직을 추가하여 실제 변화가 있을 때만 UI 업데이트하도록 스마트 새로고침 구현
문제알람 상태별로 정렬 기준과 필터링 기간이 달라 코드 복잡도 증가
해결HitlService에서 status별 sortBy, sortDirection, fromDate, toDate 파라미터를 동적으로 조합하여 단일 API로 통합
레포지토리 정보
- 생성
- 2026년 7월 27일
- 최근 커밋
- 2026년 7월 27일
- 크기
- 7,064 KB
- 라이선스
- 없음
언어 구성
- TypeScript65.5%
- SCSS31.3%
- JavaScript1.8%
- CSS0.9%
- Dockerfile0.5%
- HTML0.2%
이 문서는 2026년 7월 28일 에 자동 분석으로 생성되었습니다.