Car Guard Frontend
Car Guard는 차량 손상 분석 결과를 시각적으로 제공하는 렌터카 관리 서비스의 프론트엔드입니다. 사용자가 차량 이미지를 업로드하면, 백엔드에서 분석된 손상 결과를 받아 바운딩 박스와 손상 확률 정보를 화면에 표시합니다.
단일 이미지 검사에서는 히트맵 시각화를 지원하며, 렌트 시작·종료 시에는 여러 장의 이미지를 기반으로 차량 상태를 비교할 수 있습니다.
⸻
주요 기능
-
단일 이미지 손상 탐지 • 차량 이미지 1장 업로드 • 손상 영역 바운딩 박스 표시 • 손상 타입별 확률 툴팁 제공 • 단일 탐지에 한해 히트맵 오버레이 지원
-
렌트 시작 • 차량 번호 + 4방향(FRONT / REAR / LEFT / RIGHT) 이미지 업로드 • 렌트 시작 시점의 차량 손상 상태 기록 • 손상 요약 정보(타입별 개수) 제공
-
렌트 종료 • 반납 시 동일한 방식으로 4장 이미지 업로드 • 렌트 시작 대비 추가 손상 여부 계산 • 추가 손상이 없는 경우 / 있는 경우에 따른 안내 메시지 제공
-
최근 렌탈 목록 및 비교 • 최근 렌탈 세션 목록 조회 • 렌트 시작 이미지와 종료 이미지 비교 가능 • 시작/종료 시점별 손상 요약 및 증감 정보 확인 • 각 이미지에서 손상 위치를 바운딩 박스로 시각화
⸻
프론트엔드 역할 • 이미지 업로드 및 배치 업로드 UI 제공 • 손상 결과를 바운딩 박스 + 확률 정보로 시각화 • 렌트 시작/종료 시점의 손상 상태 비교 화면 구성 • 백엔드 비동기 예측 결과 폴링 및 상태 처리
⸻
기술 스택 • React 18 • TypeScript • Vite • Tailwind CSS • shadcn-ui • lucide-react • 상태 관리: React Hooks
⸻
프로젝트 특징 요약 • 단일 이미지 분석과 배치 분석(렌트 시작/종료)을 분리해 UX 구성 • 렌트 세션 단위로 손상 상태를 비교할 수 있는 화면 제공