Baddery · 배터리 구독 서비스 개발

Baddery — 전기차 배터리를 차량과 분리해 월 구독으로 이용하는 BaaS(Battery as a Service) 모델의 운영 웹 사업자(운영사·검사센터)가 차량·배터리 구독 현황과 운행·충전 이력, 정산을 관리하는 백오피스 + 모니터링 시스템 실시간 모니터링 화면으로 배터리 상태·운행 데이터·이벤트를 통합 모니터링 배터리 진단·검사 결과를 ActiveReports 기반 PDF 리포트로 발급 (관리자/일반 뷰 분리) 한국어/영어 다국어 지원과 화면 코드 기반 페이지 명명(BadXxxNNN)으로 정부·공공 백오피스 표준 컨벤션 적용

• Next.js 12 (Pages Router) + React 18 + JavaScript(JSX) + Tailwind CSS 기반 운영 백오피스 구축
• 화면 코드 기반 정부 표준 명명 규칙(Bad + 모듈코드 + 번호) 적용 (BadCom 공통 · BadCus 검사센터 · BadMor 모니터링 · BadMyp 마이페이지 · BadBad 구독 · BadUtl 유틸리티)
• 실시간 모니터링 영역 8개 화면(BadMor001 ~ 051) 구현으로 차량·배터리 상태·이벤트 통합 모니터링
• 검사센터 관리(BadCus001 / 011 / 012), 마이페이지(BadMyp001 / 011), 구독 관리(BadBad001), 유틸리티(BadUtl001 / 003) 페이지 구현
• @grapecity/activereports 기반 PDF 리포트 발급 시스템 구현 (관리자용 pdfAdminViewer · 일반용 pdfViewer · pdfDownload 3개 뷰)
• ReportViewer 컴포넌트로 ActiveReports Viewer 래핑 + FontStore.registerFonts 로 한글 폰트 등록 + 자동 스크롤바 스타일 보정
• crypto-js 기반 PDF 뷰어 쿼리스트링 암·복호화 처리로 외부 노출 토큰 보호
• next-i18next 기반 한국어/영어 다국어 지원 (locale JSON 각 10개 분리 관리)
• Jotai 1.8 + optics-ts 기반 app · modal 도메인 atom 글로벌 상태 관리
• SWR 기반 API 캐싱 및 자동 refetch
• React Hook Form 으로 로그인·검색·입력 폼 처리
• ApexCharts(BarGraph · LineGraph · pieChart) 기반 모니터링 차트 시각화
• html2canvas 로 모니터링 화면(BadMor044) 캡처 기능 구현
• device-uuid 로 로그인 시 디바이스 식별 및 다중 로그인 제어
• sessionStorage 토큰 + 401/403 권한 분기 처리하는 자체 httpRequest 헬퍼 구현
• 10개 API 모듈 분리 (admin · car · center · charge · main · monitoring · my · report · system 등)

• Jenkins 파이프라인에서 환경 선택(development/production) 받아 deploy.sh 스크립트로 환경 변수 자동 주입
• Docker 빌드 후 사내 레지스트리(dev-ciprv.evmon.io:5000)로 푸시 자동화
• dev-app-server · prd-app 2개 서버 클러스터(clusterSize=2)로 배포
• Yarn Berry 3.2.3(PnP) 기반으로 의존성을 잠금하여 빌드 환경 일관성 확보