당근, 동네걷기 오버레이 동시성 제어 위해 Promise 큐잉 시스템 도입

당근 동네걷기 서비스는 모달, 바텀시트, OS 권한 팝업 등 여러 오버레이가 동시에 발화되어 화면에 겹치는 문제를 해결하기 위해 Promise 큐잉 시스템을 도입했다. 기존에는 컴포넌트 간 직접 연결(onClose 체이닝)로 인해 도메인 로직과 분기 조건이 혼재되고 QA 사각지대가 발생했으나, 이를 '독립적 오버레이 발화(trigger)의 동시성 제어' 문제로 재정의했다.

Promise.withResolvers 기반 큐잉 구현

핵심 구현에는 Promise.withResolvers 패턴(ES2024 표준화)을 활용해 resolve/reject를 외부에서 제어하는 9줄 헬퍼를 사용했다. queueMicrotask를 통해 같은 동기 태스크 내의 모든 reserve 호출이 모인 뒤 한 번에 정렬 및 처리함으로써, 매크로태스크 사용 시 발생할 수 있는 다른 태스크 개입을 방지했다. Zustand 스토어를 내부 구조로 채택해 Entry에 trigger 함수와 Promise 제어 기능을 포함시켰다.

우선순위 정책과 API 설계

useReserveOverlay 훅을 제공하여 호출처가 카탈로그(OVERLAY_PRIORITY)에서 priority, id, subOrder를 참조하도록 설계했다. 우선순위는 critical(강제 선점), high, normal, low의 4단계로 나뉘며, 같은 priority 내에서는 FIFO 또는 subOrder로 조정된다. 취소(cancelled)는 resolve로 반환하고, trigger throw 시에만 reject 처리하는 방식으로 결과 상태를 명확히 구분했다.

효과 및 검증

오버레이 순서 코드(order, condition 등)가 제거되어 순서 변경 시 카탈로그의 subOrder 값만 수정하면 된다. 예를 들어 기후캠페인 스탬프 흐름을 연속 출석 모달 뒤로 이동할 때 subOrder를 10에서 40으로 변경하는 것으로 충분했다. 큐 운영 4개월 반 동안 15회의 순서 변경 요구사항이 있었으나 복잡한 조건 재작성 없이 대응 가능했다. 또한 수동 QA에서 CI 테스트(4개 파일, 29 케이스)로 검증 방식을 전환해 priority 순 처리, 선점, 언마운트 처리 등을 자동 검증했다.