토스 앱 안에서 동작하는 위치 기반 커피 주문 웹뷰입니다. 현재 위치 주변 매장을 지도와 리스트로 탐색하고, 메뉴를 주문한 뒤 준비 완료까지 실시간으로 받는 흐름을 제공합니다.

React 18 + TanStack 생태계(Router / Query / Virtual)와 @apps-in-toss/web-framework 위에서 메인으로 개발하고 있습니다. 지도·리스트 탐색, 실시간 주문 추적, 장바구니·주문·결제·마이페이지 등 사용자가 거치는 대부분의 화면을 맡았습니다.

맡은 부분

위치 기반 매장 탐색

위치 권한 획득부터 좌표 기반 반경 검색, 지도와 리스트의 양방향 바인딩까지의 탐색 흐름을 설계했습니다. 지도에서 매장을 선택하면 리스트가 해당 아이템으로 스크롤되고, 리스트에서 탭하면 지도 중심이 이동합니다. 브랜드 아이콘 마커, 마커 클러스터링, 폴백 이미지, 세션 스토리지 기반 위치 복원까지 함께 처리했습니다.

SSE 기반 실시간 주문 추적

주문 직후 SSE 연결을 맺고 "접수 → 준비 중 → 완료" 단계 푸시를 UI에 바로 반영합니다. 토큰 갱신 중 끊김 복구, 멀티탭 동기화, 타임아웃 폴백까지 같이 처리해서 웹뷰에서도 네이티브 푸시에 가까운 체감이 나오도록 다듬었습니다.

TanStack Virtual 대량 리스트 최적화

메뉴가 수백 개 단위인 매장에서 초기 렌더 지연과 스크롤 프레임 드롭이 심했습니다. TanStack Virtual로 가상화하면서 이미지 lazy 로딩에 따른 높이 변동은 measureElement로 동적 측정했고, 카테고리 헤더와 아이템이 섞인 리스트는 가변 높이 virtualizer로 묶었습니다. 결과적으로 아이템 수와 무관하게 렌더 시간이 일정해졌고, 저사양 안드로이드 웹뷰에서도 스크롤이 끊기지 않습니다. 자세한 내용은 블로그 글에 정리했습니다.

에러 핸들링 체계 (skipGlobalErrorHandler)

전역 에러 핸들러를 기본으로 두되, 특정 쿼리에서는 의도적으로 우회해야 하는 케이스가 있었습니다. React Query의 meta에 skipGlobalErrorHandler 플래그를 심어서, 핸들러가 해당 플래그를 보면 skip하도록 정리했습니다. 네트워크 계층 안정성과 쿼리 캐싱 최적화를 같이 가져갈 수 있었습니다.

장바구니·주문 스키마 정리

주문 / 장바구니 / 재주문 쪽 스키마·타입·유틸을 전반적으로 리팩토링했습니다. PID 기반 식별자 체계로 이전하면서 주문 옵션 포맷팅에 안정 정렬을 추가했고, 장바구니에서 주문 생성 시 옵션·추가상품 변환이 깔끔하게 이어지도록 구조를 다듬었습니다.

스택

React 18, TypeScript, Vite, TanStack Router / Query / Virtual, @apps-in-toss/web-framework, 네이버 지도 API, SSE, Tailwind CSS v4.