CAMO

토스 앱에서 주변 카페를 찾고 주문한 뒤 준비 상태까지 확인하는 위치 기반 커피 주문 서비스입니다.

Mon Dec 01 2025

React 18
TypeScript
Vite
TanStack Router
TanStack Query
TanStack Virtual
@apps-in-toss/web-framework
Naver Map API
SSE
Tailwind CSS v4
CAMO의 지도와 매장 목록을 함께 보여 주는 화면
CAMO의 매장 탐색 모바일 화면
CAMO의 메뉴 선택 모바일 화면
CAMO의 주문 상태 모바일 화면

1 / 4

프로젝트 요약

기간
2025.12–2026.04
소속과 역할
CirclePlatform · Frontend developer
담당 범위
지도 탐색과 메뉴·장바구니·주문 흐름, SSE 주문 상태 UI와 대량 메뉴 가상화를 구현했습니다.

관련 링크

지도와 매장 목록

위치 권한과 좌표 기반 검색부터 지도·목록의 양방향 선택까지 연결했습니다. 지도에서 매장을 고르면 목록이 해당 항목으로 이동하고, 목록을 누르면 지도 중심과 선택 마커가 함께 바뀝니다. 위치 정보를 쓸 수 없을 때의 폴백과 세션 복원도 같은 탐색 흐름에 넣었습니다.

메뉴·장바구니·주문

매장 상세에서 메뉴와 옵션을 고르고 장바구니를 거쳐 주문하는 화면을 맡았습니다. 옵션과 추가 상품의 변환 규칙을 한 곳에 모아 재주문에서도 같은 표시 순서를 유지하도록 정리했습니다.

SSE 주문 상태

주문 직후 SSE 연결을 열고 접수, 준비 중, 완료 상태를 UI에 반영했습니다. 연결이 끊기거나 인증 갱신이 필요한 경우에는 재연결과 타임아웃 경로를 분리해 사용자가 현재 상태를 놓치지 않게 했습니다.

TanStack Virtual 대량 목록

메뉴가 많은 매장에서 초기 렌더와 스크롤 부담이 커졌습니다. TanStack Virtual로 보이는 항목을 중심으로 렌더링하고 이미지가 로드된 뒤 달라지는 높이는 measureElement로 다시 측정했습니다. 높이가 다른 카테고리 헤더와 메뉴를 하나의 가상화 목록에서 다뤘습니다.