FuelBuddy의 UAE B2B 시장 진출에는 전용 웹 포털이 필요했다. 기업 고객들은 일반 소비자용 흐름이 아니라 차량 관리, 대량 주문, 다중 지점 배송 일정 관리가 필요했다. 나는 이 포털을 초기 저장소 생성부터 프로덕션까지 구축했으며, 프론트엔드 아키텍처와 백엔드 데이터 API를 모두 담당했다.
내가 만든 것
- 프론트엔드 아키텍처: 컴포넌트 아키텍처, 클라이언트 사이드 라우팅, 기업용 워크플로우를 위한 일관된 디자인 시스템을 포함해 애플리케이션을 처음부터 구축했다.
- B2B 워크플로우: 다단계 주문 양식, 대량 연료 일정 관리 흐름, 주문 및 지갑 내역을 위한 차트와 테이블 뷰가 있는 데이터 집약적 차량 대시보드를 구축했다.
- 결제 및 온보딩: 지갑 충전과 주문 결제를 위한 Stripe, 기업 계정 등록을 위한 전화번호 기반 OTP를 통합했다.
- 엔드투엔드 기능: Hasura GraphQL 엔진 위에 CRUD API를 구축하고 이를 UI 상태에 연결했으며, 앱을 설치 가능한 PWA로 배포하고 프로덕션까지 비즈니스 검증 규칙을 처리했다.
왜 중요했는가
이 포털을 출시함으로써 FuelBuddy는 두바이 기업 고객을 위한 전용 웹 플랫폼을 갖추게 되었고, 대량 연료 주문을 간소화하며 회사의 지역 사업 확장을 지원했다.
실제로 출시된 것
대량 주문과 대량 교대 일정 관리는 자리만 차지하는 양식이 아니라 Hasura를 상대로 한 실제 작동하는 뮤테이션이며, 이전 레거시 버전을 대체한 대시보드와 함께 제공된다(둘 다 코드베이스에 여전히 존재하고, 새 버전이 라이브 상태다). 인증은 토큰에서 직접 읽어온 Hasura 자체 JWT 클레임(x-hasura-default-role)을 통해 이루어지며, 나중에 덧붙인 별도의 권한 계층이 아니다.
CRUD를 넘어선 결제와 온보딩
지갑 충전과 직접 주문 결제는 모두 Stripe(@stripe/stripe-js, vue-stripe-js)를 통해 처리되며, 단독 주문과 지갑 거래를 위한 전용 결제 경로가 있다. 등록은 일반 이메일/비밀번호 양식이 아니라 전화번호 기반 OTP 검증(vue3-otp-input, 국제 전화번호 형식을 처리하는 vue-tel-input)을 거치는데, 이는 가벼운 가입이 아니라 기업 차량 계정을 위해 만들어진 포털에 걸맞다.
반응형을 넘어선 설치 가능성
이 포털은 vite-plugin-pwa와 Workbox를 통해 설치 가능한 프로그레시브 웹 앱으로 배포되며, autoUpdate 서비스 워커 등록이 있어서 차량 관리자가 이를 홈 화면에 추가하고 수동 재설치 없이 새 배포를 받을 수 있다.
데이터 모델과 규모
- 생성된 GraphQL SDK(스키마 코드젠으로부터)는 31,000줄이 넘으며, 몇 개의 임시 쿼리가 아니라 진짜로 방대한 타입이 지정된 API 표면이다.
- 데이터 페칭은 Apollo나 urql 클라이언트를 거치지 않고
graphql-request를 통해 직접 Hasura로 간다. - 차량 대시보드는
vue3-easy-data-table과vue-chart-3(Chart.js)를 통해 렌더링되며, 몇 개의 요약 카드가 아니라 실제 행 수를 가진 테이블과 차트를 위해 만들어졌다.
Stack
Vue 3, Vite, 상태 관리를 위한 Pinia, GraphQL Code Generator와 함께 Hasura를 상대하는 graphql-request, 결제를 위한 Stripe, 인증을 위한 Firebase, 대시보드를 위한 Chart.js, 오프라인/설치 지원을 위한 Workbox와 함께하는 vite-plugin-pwa, 테스트를 위한 Playwright.