iOSWeb
WattProof · 탈거된 배터리 검사 서비스 개발
2023.12 ~ 2024.03·4개월
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




