GusLift에서 라이드 히스토리 및 프로필 커스터마이징 구축

Source: Dev.to

Ride History: Tracking Every Completed Trip

백엔드에서는 API가 사용자의 Google ID와 연결된 모든 라이드에 대해 Supabase를 조회합니다. 이때 완료된 라이드만 필터링하고 최신 순으로 정렬합니다.
날짜 필터나 행 제한이 없으며, 계정이 지금까지 이용한 모든 완료 라이드를 반환합니다.

모바일에서는 각 라이드가 카드 형태로 표시되며, 날짜, 경로, 픽업 시간, 매칭된 라이더 또는 드라이버의 이름이 나타납니다. 사용자는 개별 항목을 삭제하거나 전체 목록을 비울 수 있으며, 이때 실제 데이터를 삭제하지 않고 driver_hidden 또는 rider_hidden 플래그만 설정합니다.

우리가 겪은 한 가지 어려움은 라이드 라이프사이클을 이해하는 것이었습니다. 라이드는 매칭 워커를 통해 매칭이 확정되면 status: "accepted" 로 생성됩니다. 드라이버가 대시보드에서 Complete ride 버튼을 명시적으로 눌러야 status: "completed" 로 전환됩니다. 따라서 히스토리 화면은 양쪽 모두 실제로 완료한 여행만 표시하도록 의도적으로 제한됩니다—매칭만 된 경우는 포함되지 않습니다.

Profile Image Picker

우리는 또한 PhotoPicker 라는 재사용 가능한 컴포넌트를 만들어, 라이더와 드라이버 모두 설정 단계에서 프로필 사진을 지정할 수 있게 했습니다. 이 컴포넌트는 Expo의 ImagePicker API를 사용해 갤러리 권한을 요청하고, 기기 사진 라이브러리를 열어 1:1 정사각형으로 크롭합니다.

선택된 이미지는 회원가입 시 FormData 페이로드의 일부로 백엔드에 전송되며, Supabase Storage에 업로드된 뒤 공개 URL이 사용자 프로필에 저장됩니다. React Native와 웹이 파일 블롭을 다루는 방식이 달라서 예상보다 복잡했는데, 웹에서는 원시 File 객체를 전달할 수 있지만 네이티브에서는 { uri, name, type } 형태의 디스크립터를 전달해야 fetch가 멀티파트 폼 데이터로 스트리밍할 수 있습니다.

프로필 사진은 이후 앱 전반에 걸쳐 표시됩니다: 라이더 홈 화면 헤더, 드라이버의 라이더 리스트, 그리고 사용자의 신원이 보여지는 모든 곳에서.