FireScout 3.0 실내 화재 감지 시스템 프론트엔드
실시간 화재 감지 알림과 카메라 관리를 제공하는 온프레미스 화재 안전 모니터링 웹 애플리케이션
개요
FireScout 3.0은 실내 화재를 실시간으로 감지하고 관리하는 Front Office 프론트엔드입니다. SSE와 Firebase를 통해 실시간 화재 이벤트 알림을 받고, 카메라 목록 및 상세 정보를 관리하며, 이벤트 로그를 조회할 수 있습니다. 시스템 상태를 시각화하여 모니터링하고, 온프레미스 환경에서 Docker로 배포됩니다. React 19와 TypeScript 기반으로 구축되었으며, Nginx 컨테이너로 서빙됩니다.
담당 역할
React 기반 SPA 프론트엔드 개발. SSE와 Firebase를 이용한 실시간 알림 구현, 카메라 및 이벤트 로그 관리 UI 설계, Docker 멀티 스테이지 빌드 및 Nginx 배포 구성을 담당했습니다.
아키텍처 다이어그램
레포지토리 분석 결과를 바탕으로 자동 생성된 구조도입니다.
FireScout 3.0 프론트엔드 아키텍처
사용자 브라우저에서 Nginx 정적 서빙, API 서버 통신, SSE 실시간 이벤트 구독, Firebase FCM 알림 흐름을 보여줍니다.
실시간 화재 알림 흐름
화재 감지 이벤트가 발생했을 때 SSE와 FCM을 통해 프론트엔드로 전달되고 알림이 표시되는 시퀀스입니다.
Docker 배포 플로우
멀티 스테이지 빌드로 Node 빌드 후 Nginx 이미지로 정적 파일을 서빙하는 배포 구조입니다.
기술스택
각 기술을 이 프로젝트에서 어떤 용도로 썼는지 정리했습니다.
언어
- TypeScript전체 애플리케이션 타입 안전성 확보 및 주요 로직 구현
프론트엔드
- ReactUI 컴포넌트 구성 및 상태 관리 (v19)
- Vite개발 서버 및 프로덕션 빌드 도구
- React Query서버 상태 관리 및 API 캐싱
- Zustand클라이언트 전역 상태 관리 (토큰, Firebase 상태 등)
- AxiosHTTP 클라이언트 및 API 인터셉터 구성
- React Hook Form로그인 및 폼 입력 유효성 검사
- SCSS컴포넌트 스타일링 및 테마 관리
백엔드
- Firebase실시간 푸시 알림 및 메시징 (FCM)
DevOps
- Docker멀티 스테이지 빌드 및 컨테이너 이미지 생성
인프라
- Nginx정적 파일 서빙 및 프록시 설정
테스트
- MSW개발 환경 API 모킹 및 테스트
핵심 포인트
- SSE(Server-Sent Events)와 Firebase Cloud Messaging을 결합하여 실시간 화재 이벤트 알림 구현
- React 19와 TypeScript 5.7로 타입 안전성을 확보하고 최신 React 훅 패턴 적용
- Docker 멀티 스테이지 빌드로 dev/qa/prod 환경별 빌드 자동화 및 이미지 경량화
- 카메라 상세, 이벤트 로그, 시스템 상태를 사이드바와 테이블로 직관적으로 시각화
- Lottie 애니메이션을 활용한 화재 알림 UI와 사운드 알림 통합
문제와 해결
문제실시간 화재 알림을 놓치지 않고 사용자에게 즉시 전달해야 하는 요구사항
해결SSE로 서버 이벤트를 구독하고, Firebase FCM으로 백그라운드 푸시를 병행하여 이중화된 알림 체계 구축
문제온프레미스 환경에서 dev/qa/prod 별로 다른 API 엔드포인트와 설정 관리 필요
해결Vite 환경 변수(.env.dev, .env.qa, .env.prod)와 Dockerfile ARG/ENV를 조합해 빌드 시점에 환경별 설정 주입
레포지토리 정보
- 생성
- 2026년 7월 27일
- 최근 커밋
- 2026년 7월 27일
- 크기
- 7,219 KB
- 라이선스
- 없음
언어 구성
- TypeScript81.5%
- SCSS13.1%
- JavaScript4.7%
- Dockerfile0.3%
- HTML0.3%
- Shell0.1%
이 문서는 2026년 7월 28일 에 자동 분석으로 생성되었습니다.