iOSWeb
WattSafe Biz · 관제 모니터링 사이트 개발
2025.01 ~ 2025.06 ·6개월
01
개요
법인 차량 운영 데이터 기반 전기차 통합 관리 및 안전 모니터링 플랫폼. WattBox로 수집한 운행·충전·배터리 데이터를 실시간 시각화하고, 차량별 안전지수(SDS)·배터리 잔존수명(SOH)·가동률·전비를 다각도로 분석. 카카오 지도 기반 실시간 위치 추적, 안전 이상 발생 시 알람 발송, 월간 차량 리포트 자동 생성을 통해 법인 관리자가 다수 차량을 효율적으로 관리할 수 있도록 지원. 권한 기반 접근 제어로 조직·사용자·차량을 체계적으로 관리하는 B2B 전용 어드민 서비스를 출시
02
WEB
- RBAC(Role-Based Access Control) 메뉴 기반 라우트 가드로 권한별 페이지 접근 제어 구현
- Kakao Maps + Canvas 커스텀 마커·클러스터링으로 실시간 차량 모니터링 구현
- ApexCharts를 dynamic 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






