iOSWeb

WattSafe Biz · 관제 모니터링 사이트 개발

2025.01 ~ 2025.06 ·6개월
WattSafe Biz · 관제 모니터링 사이트 개발  스크린샷 1
WattSafe Biz · 관제 모니터링 사이트 개발  스크린샷 2
WattSafe Biz · 관제 모니터링 사이트 개발  스크린샷 3
WattSafe Biz · 관제 모니터링 사이트 개발  스크린샷 4
WattSafe Biz · 관제 모니터링 사이트 개발  스크린샷 5
WattSafe Biz · 관제 모니터링 사이트 개발  스크린샷 6
WattSafe Biz · 관제 모니터링 사이트 개발  스크린샷 7
01

개요

법인 차량 운영 데이터 기반 전기차 통합 관리 및 안전 모니터링 플랫폼. WattBox로 수집한 운행·충전·배터리 데이터를 실시간 시각화하고, 차량별 안전지수(SDS)·배터리 잔존수명(SOH)·가동률·전비를 다각도로 분석. 카카오 지도 기반 실시간 위치 추적, 안전 이상 발생 시 알람 발송, 월간 차량 리포트 자동 생성을 통해 법인 관리자가 다수 차량을 효율적으로 관리할 수 있도록 지원. 권한 기반 접근 제어로 조직·사용자·차량을 체계적으로 관리하는 B2B 전용 어드민 서비스를 출시

02

WEB

  • RBAC(Role-Based Access Control) 메뉴 기반 라우트 가드로 권한별 페이지 접근 제어 구현
  • Kakao Maps + Canvas 커스텀 마커·클러스터링으로 실시간 차량 모니터링 구현
  • ApexChartsdynamic import(SSR off)로 분리하여 분석 대시보드 차트 구축
  • SWR 도입으로 캐싱·백그라운드 재검증·상태 동기화 구축
  • Zustand 기반 도메인 단위 스토어 분리로 전역 상태 구조 설계
  • React Hook Form + URL searchParams 양방향 동기화로 필터 상태 보존
  • Ant Design + Tailwind 디자인 토큰화로 UI 일관성 및 유지보수성 확보
03

CI/CD

  • Docker + Jenkins 다중 서버 배포 파이프라인 구축
  • Yarn Berry(PnP) 기반 빌드로 의존성 관리 표준화 및 설치 시간 단축
  • Next.js rewrites로 외부 API 프록시 구성하여 CORS 우회 및 환경 분리
  • ESLint + TypeScript strict로 코드 품질 관리 체계 구축
04

기술 태그

#Next.js#React#TypeScript#Tailwind#Ant Design#Zustand#SWR#React Hook Form#Axios#NextAuth#JWT#crypto-js#ApexCharts#Kakao Maps#Swiper#Docker#Jenkins#Yarn Berry
← 이전 프로젝트Watt+ · EV 통합 플랫폼 서비스 개발다음 프로젝트 →WattSafe · 안전 알림 서비스 개발