Firescout 3.0 실내화재 감지 시스템 관리자 콘솔
실내 화재 감지 AI 시스템의 고객사, 카메라, AI Box, 사용자를 통합 관리하는 온프레미스 백오피스 웹 애플리케이션
개요
Firescout 3.0 실내 화재 감지 시스템을 운영하기 위한 관리자 대시보드 프론트엔드입니다. 고객사(Client) 등록 및 관리, 각 고객사별 AI Box와 카메라 디바이스 인벤토리 관리, 사용자 권한 관리 기능을 제공합니다. 온프레미스 환경을 전제로 nginx 리버스 프록시를 통해 백엔드와 통신하며, JWT 기반 인증과 React Query를 활용한 서버 상태 관리로 안정적인 관리 경험을 제공합니다. CSV 파일 업로드를 통한 카메라 일괄 등록, Firebase Cloud Messaging 연동 등 운영 효율성을 높이는 기능들이 포함되어 있습니다.
담당 역할
Firescout 3.0 백오피스 프론트엔드 전체 설계 및 구현. React 19 + TypeScript 기반 아키텍처 설계, useBeauty 디자인 시스템 통합, JWT 인증 플로우 구축, React Query 기반 API 레이어 설계 및 MSW 목업 환경 구축을 담당했습니다.
아키텍처 다이어그램
레포지토리 분석 결과를 바탕으로 자동 생성된 구조도입니다.
시스템 아키텍처 및 데이터 흐름
온프레미스 환경에서 nginx 리버스 프록시를 통한 백엔드 통신, JWT 인증 플로우, React Query 기반 API 레이어 구조를 보여줍니다.
고객사 관리 도메인 구조
Client, AI Box, Camera, User 엔티티 간 관계와 각 도메인별 CRUD 흐름을 보여주는 데이터 모델 다이어그램입니다.
인증 및 라우트 보호 흐름
JWT 토큰 기반 인증 플로우와 Authenticator 컴포넌트를 통한 라우트 가드 처리 과정을 나타냅니다.
기술스택
각 기술을 이 프로젝트에서 어떤 용도로 썼는지 정리했습니다.
언어
- TypeScript타입 안전성을 보장하는 주 개발 언어로 strict mode 활성화
프론트엔드
- Reactv19 기반 컴포넌트 아키텍처 및 UI 렌더링
- Vite빠른 개발 서버 및 프로덕션 빌드 도구
- React Routerv7 기반 클라이언트 사이드 라우팅 및 중첩 라우트 관리
- ZustandJWT 토큰 전역 상태 관리 및 localStorage 동기화
- TanStack React Query서버 상태 관리 및 API 캐싱 레이어
- React Hook Form폼 유효성 검증 및 상태 관리
- AxiosHTTP 클라이언트 및 인터셉터 기반 에러 핸들링
- SCSS컴포넌트별 스타일링 및 전역 테마 변수 관리
테스트
- MSW개발 환경 API 모킹 및 독립적인 프론트엔드 개발 환경 구축
백엔드
- FirebaseCloud Messaging을 통한 푸시 알림 수신
DevOps
- Sentry프로덕션 환경 에러 모니터링 및 추적
핵심 포인트
- JWT 토큰 만료 자동 감지 및 로그인 페이지 리다이렉트 처리로 보안 강화
- MSW를 활용한 독립적인 프론트엔드 개발 환경 구축으로 백엔드 의존성 최소화
- useReducer + Immer 조합으로 복잡한 컴포넌트 상태를 불변성 유지하며 관리
- 경로 별칭(@/*) 기반 import 패턴으로 코드 가독성 및 유지보수성 향상
- 온프레미스 환경을 고려한 nginx 프록시 기반 API URL 설정 및 Docker 배포 자동화
문제와 해결
문제온프레미스 환경마다 백엔드 URL이 달라 배포 시마다 재빌드가 필요한 상황
해결nginx 템플릿 환경변수(default.conf.template)와 docker-compose 환경변수를 조합해 빌드 없이 런타임 API URL 변경 가능하도록 구성
문제React Query 기본 설정으로 실패 시 자동 재시도가 발생해 불필요한 백엔드 부하 증가
해결retry: false, refetchOnWindowFocus: false 전역 설정으로 명시적 데이터 갱신 패턴 적용
문제백엔드 에러 코드가 다양하고 프론트엔드에서 사용자 친화적 한국어 메시지 제공 필요
해결Interceptor 컴포넌트에서 에러 코드별 한국어 메시지 매핑 테이블 구축 및 Toast UI로 일관된 에러 안내
레포지토리 정보
- 생성
- 2026년 7월 27일
- 최근 커밋
- 2026년 7월 27일
- 크기
- 7,339 KB
- 라이선스
- 없음
언어 구성
- TypeScript80.7%
- SCSS15.0%
- JavaScript3.2%
- HTML0.8%
- Dockerfile0.2%
- Shell0.1%
이 문서는 2026년 7월 28일 에 자동 분석으로 생성되었습니다.