Bakery Pickup — 픽업 주문 흐름

Next.js(App Router) + TypeScript로, 메뉴 조회 → 장바구니 → 픽업 시간 선택 → 주문으로 이어지는 흐름을 구현했습니다.

서버에서 내려오는 데이터(메뉴·픽업 슬롯·주문)는 TanStack Query로, 장바구니는 React Context로 관리하고 localStorage에 저장해 새로고침 후에도 유지되도록 했습니다.

픽업 슬롯은 슬롯마다 정원이 있어, 사용자가 슬롯을 고른 뒤에도 다른 주문이 먼저 그 슬롯을 채울 수 있습니다. 그래서 주문을 확정하는 시점에 서버가 슬롯 정원을 다시 확인하고, 이미 마감됐으면 HTTP 409로 거절합니다. 클라이언트는 409를 받으면 선택했던 슬롯을 해제하고 슬롯 목록을 다시 불러와 다른 시간을 고르도록 합니다.

결제와 쿠폰 스캔은 WebView(네이티브 앱) 환경을 가정해 브리지 인터페이스로 추상화했고, 네이티브가 없는 웹 단독 실행에서는 mock 결과로 대체됩니다. 주문 결과는 서버가 확정한 뒤에만 화면에 반영합니다.