당근 동네걷기 위에서 동시에 쏟아지는 오버레이들을 우아하게 제어하기

핵심 요약

당근은 웹뷰와 OS 팝업의 중첩 문제를 큐 기반의 비동기 제어로 해결했습니다. Promise.withResolvers와 microtask 큐를 활용해 오버레이 발화를 순차적으로 처리하고, UI와 도메인 로직의 결합도를 낮췄습니다.

구현 방법

• Overlay 엔트리 큐를 priority와 subOrder로 구성하고, fn은 Promise를 반환합니다. active는 현재 실행 중인 엔트리입니다.
• useReserveOverlay 훅과 Zustand 기반 큐 스토어로 상태와 실행 흐름을 분리 관리합니다.
• queueMicrotask를 사용해 같은 태스크에 들어온 예약들을 한 번에 정렬 및 처리하도록 합니다.
• withResolvers로 Promise의 resolve/reject를 외부에서 다룰 수 있게 다리를 놓습니다.

주요 결과

• 비동기 오버레이의 동시 발화 제어로 한 화면에 여럿이 동시에 뜨지 않습니다.
• 네이티브 팝업(권한 요청)과 웹뷰 모달의 충돌이 줄고, 예측 가능한 흐름이 유지됩니다.
• 도메인 로직과 UI가 큐의 책임 영역 밖에 남아 확장성과 유지보수가 개선됩니다.