iOSWeb

WattProof · 탈거된 배터리 검사 서비스 개발

2023.12 ~ 2024.03·4개월
WattProof · 탈거된 배터리 검사 서비스 개발 스크린샷 1
WattProof · 탈거된 배터리 검사 서비스 개발 스크린샷 2
WattProof · 탈거된 배터리 검사 서비스 개발 스크린샷 3
WattProof · 탈거된 배터리 검사 서비스 개발 스크린샷 4
WattProof · 탈거된 배터리 검사 서비스 개발 스크린샷 5
01

개요

탈거된 전기차 배터리의 안전성을 검사하고 결과를 인증서로 발급하는 검사 센터 운영 웹 서비스 검사 신청부터 결과 등록·인증서 발급·진위 확인까지 전 과정을 웹 한 곳에서 처리 가능 사업자(/business)·고객(/customer)·검사 진행(/safety/inspection) 영역별 라우팅으로 사용자 흐름 분리 검사 신청 → 검사 목록 → 인증서 발급 3단계 워크플로 기반으로 검사 센터의 업무 진행 관리 일반 고객은 인증서 진위 확인, 안전 정보, 공지·FAQ·QnA 게시판으로 검사 결과의 신뢰성을 확인 가능

02

WEB 핵심 작업 내용

  • Next.js 14 App Router 기반으로 영역별 라우팅 구성 (account / business / customer / safety / privacy / terms)
  • 검사 신청(/safety/inspection/register) → 검사 목록(/safety/inspection/list) → 인증서 발급(/safety/inspection/issuance) 3단계 워크플로 구현
  • 인증서 진위 확인(/customer/authenticity-status), 안전 정보 안내, FAQ·공지·QnA 게시판 등 고객용 콘텐츠 페이지 구축
  • 검사 센터 소개(/business/center-introduction), 배터리 안전성 검사 안내(/business/battery-safety-inspection) 페이지 구현
  • React Hook Form 기반 회원가입·검사 신청 다단계 폼 구현
  • React PDF 로 검사 결과 PDF 인증서 미리보기·다운로드 처리
  • Recoil(modal atom)로 글로벌 모달 상태 관리
  • Axios + SWR 조합으로 검사 목록·공통 코드·인증서 데이터 캐싱 및 자동 refetch
  • crypto-js + jwt-decode 로 클라이언트 토큰 처리 및 민감 정보 암호화
  • React Kakao Maps SDK 로 검사 센터 위치 지도 노출
  • Framer Motion + Lottie 로 메인 페이지 텍스트·이미지 인터랙션 구현
  • Swiper 로 메인 배너·슬라이드 구성
  • Tailwind CSS 기반 디자인 시스템 적용
03

TEST

  • Cypress 13 기반 E2E 자동화 테스트 18개 시나리오(BDC-TSC-01 ~ 18) 작성하여 사용자 흐름 회귀 검증
  • mochawesome reporter + mochawesome-merge 로 통합 테스트 결과 리포트 자동 생성
  • cypress/e2e 하위에 단위테스트·통합테스트·인증서 시나리오 분리 관리
04

CI/CD

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

기술 태그

#TypeScript#Next.js#React#Tailwind CSS#Recoil#SWR#Axios#React Hook Form#React PDF#Framer Motion#Lottie#Swiper#Kakao Maps#crypto-js#JWT#Cypress#Docker#Jenkins#Yarn Berry
← 이전 프로젝트GB EVcare · 배터리 케어 서비스 개발다음 프로젝트 →WattEver · 배터리 잔존수명 인증 시스템 개발