WattSafe · 안전 알림 서비스 개발

전기차 안전 알림 서비스 — 차량 배터리의 화재 위험을 미리 진단하고, 위험이 감지되면 사용자에게 알림을 보내는 모바일·웹 서비스 일상적인 운행·충전 기록을 분석해 배터리가 얼마나 안전한 상태인지 점수로 보여주는 진단 기능 제공 화재 가능성이 높은 상태가 감지되면 알림을 보내 사용자가 사고를 사전에 인지하고 대응할 수 있도록 지원 진단 결과는 문서 형태로 발급되어 차량 상태를 정비소나 거래처에 공유할 때 증빙 자료로 활용 가능 구독 가입을 통해 정기적인 진단과 알림을 받아볼 수 있는 유료 플랜 운영 iOS·Android 앱, 모바일 웹, 공식 사이트 어느 환경에서도 동일한 차량 상태·알림을 확인할 수 있는 통합 서비스

• 사용자용 모바일 웹(safe-notify-frontend, 9983 포트)과 공식 사이트(wattsafe-web, 9985 포트) 두 개의 Next.js 12 프로젝트를 운영하며 같은 디자인·인증 흐름 공유
• Recoil 기반 글로벌 상태를 common·modal·user 세 개 도메인으로 나눠 관리하여 화면이 늘어나도 상태가 꼬이지 않게 구조화
• Axios + SWR 조합으로 API 응답을 캐싱하고, 동일 데이터를 다시 불러오지 않도록 자동 refetch 처리
• NextAuth + JOSE 로 로그인 세션 관리, 토큰을 서버에서 검증해 위·변조 차단 (safe-notify-frontend)
• jwt-decode + crypto-js 로 클라이언트 측 토큰 검증 및 민감 정보 암호화
• ApexCharts 를 클라이언트 측에서만 로딩하도록(dynamic import, ssr: false) 분리하여 차트 라이브러리가 첫 페이지 응답을 막지 않도록 처리
• React Hook Form 비제어(uncontrolled) 입력 방식으로 다단계 폼에서 입력할 때마다 화면이 다시 그려지지 않게 최적화
• @grapecity/activereports 로 진단 결과를 PDF 문서 형태로 발급하는 리포트 생성 기능 구현 (wattsafe-web)
• Lottie + Swiper 로 온보딩·랜딩 인터랙션 구현
• Tailwind CSS 디자인 토큰 기반으로 UI 컴포넌트화 및 일관성 유지

• 단일 Bridge.kt 클래스에 @JavascriptInterface 메서드 15개를 모아 웹뷰와 네이티브 사이 모든 통신을 한 곳에서 관리 (권한 요청·디바이스 토큰·파일 다운로드·외부 URL·OAuth·AppsFlyer 콜백 등)
• Firebase Cloud Messaging(FCM) 으로 화재 위험 알림을 실시간 전송
• AppsFlyer SDK 로 광고 유입 경로 추적 및 postBackAppsFlyer로 사용자 행동 이벤트 서버 전송
• Kakao + Naver + Google 3종 소셜 로그인을 OauthManager 로 통합 관리
• CheckPermission 유틸리티로 위치·알림·저장소 권한을 런타임 단계에서 일괄 체크 및 분기 처리
• KeyboardHeightProvider 로 키보드가 올라올 때 웹뷰 영역이 가려지지 않도록 높이 동기화
• WebViewClientClass 로 외부 URL·딥링크·에러 페이지 라우팅 분기 처리
• DataBinding + Jetpack Compose (BOM 2023.03) 로 UI 점진적 마이그레이션
• minSdk 23 / targetSdk 35 로 Android 6.0 ~ 15 폭넓은 단말 호환성 유지

• WKUserContentController messageHandlers 에 16개 통신 채널을 등록해 웹뷰와 네이티브 사이 양방향 호출 표준화 (권한·다운로드·결제·로그인·외부 URL·웹뷰 닫기·Car365 제3자 동의 등)
• StoreKit 기반 인앱 결제(StoreManager) + 결제 내역 조회(purchaseHistories) 구현
• ExternalPurchaseViewController 로 외부 결제 화면 분기 처리 (Apple 결제 정책 대응)
• AppTrackingTransparency(IDFA) 권한 요청 + AppsFlyer SDK 로 광고 효과 추적
• Kakao + Naver + Google + Apple SSO 4종 로그인을 AuthManager 단일 진입점으로 통합
• NotificationService Extension 에서 FCM 푸시 페이로드 가공 및 시간 초과 시 fallback 처리(serviceExtensionTimeWillExpire)
• Universal Links(applinks:app.wattsafe.co.kr) + 커스텀 스킴(wattsafeapp://) 기반 딥링크 라우팅
• CocoaPods 로 Firebase·AppsFlyer·OAuth SDK 의존성 관리

• Jenkins 파이프라인에서 환경 선택(development/production)을 받아 deploy.sh 스크립트로 환경 변수(.env.development / .env.production) 자동 주입
• Docker 이미지 빌드 후 사내 레지스트리(dev-ciprv.evmon.io:5000)로 푸시 자동화
• Yarn Berry 4(PnP) 기반으로 의존성을 잠금하여 빌드 환경 일관성 확보
• Android 에서 release.keystore 로 서명, DEBUG/RELEASE 빌드 타입을 분리하여 dev/prod 에서 서로 다른 웹뷰 URL 자동 적용
• iOS 에서 CocoaPods + Podfile.lock 으로 외부 SDK 버전 잠금