CAMO는 토스 앱 안에서 동작하는 위치 기반 커피 주문 웹뷰입니다. 현재 위치 주변 매장을 지도와 목록으로 찾고, 메뉴를 장바구니에 담아 주문한 뒤 준비 상태까지 확인하는 흐름을 구현했습니다.
지도와 매장 목록
위치 권한과 좌표 기반 검색부터 지도·목록의 양방향 선택까지 연결했습니다. 지도에서 매장을 고르면 목록이 해당 항목으로 이동하고, 목록을 누르면 지도 중심과 선택 마커가 함께 바뀝니다. 위치 정보를 쓸 수 없을 때의 폴백과 세션 복원도 같은 탐색 흐름에 넣었습니다.
메뉴·장바구니·주문
매장 상세에서 메뉴와 옵션을 고르고 장바구니를 거쳐 주문하는 화면을 맡았습니다. 옵션과 추가 상품의 변환 규칙을 한 곳에 모아 재주문에서도 같은 표시 순서를 유지하도록 정리했습니다.
SSE 주문 상태
주문 직후 SSE 연결을 열고 접수, 준비 중, 완료 상태를 UI에 반영했습니다. 연결이 끊기거나 인증 갱신이 필요한 경우에는 재연결과 타임아웃 경로를 분리해 사용자가 현재 상태를 놓치지 않게 했습니다.
TanStack Virtual 대량 목록
메뉴가 많은 매장에서 초기 렌더와 스크롤 부담이 커졌습니다. TanStack Virtual로 보이는 항목을 중심으로 렌더링하고, 이미지가 로드된 뒤 달라지는 높이는 measureElement로 다시 측정했습니다. 카테고리 헤더와 메뉴가 섞인 목록도 가변 높이 virtualizer 안에서 다뤘습니다.