매머드커피 점주앱

매출·수발주·배달·마케팅 등 매장 운영 업무를 한곳에서 처리하는 매머드커피 점주용 앱입니다.

Tue Jul 01 2025

Next.js
React
React Native
TypeScript
React Native WebView
Turborepo
pnpm
AWS S3
CloudFront
CodePush
매머드커피 점주앱의 홈과 매장 운영 요약 화면
매머드커피 점주앱의 주문별 결제 내역 화면
매머드커피 점주앱의 시간대별 매출 통계 화면
매머드커피 점주앱의 메뉴별 판매량 화면

1 / 4

프로젝트 요약

기간
2025.07–현재
소속과 역할
CirclePlatform → WALDLUST · Frontend developer, Release engineer
담당 범위
Next.js 점주 웹과 React Native 셸을 운영하며 기능 개발, 인증·브리지 보안, S3·CloudFront OTA와 스토어 배포를 맡고 있습니다.

기술 기여

기능 개발과 운영
점주 업무 웹홈·매출·수발주·배달·마케팅
웹 모노레포
2개 앱브랜드 앱 2개 · 공통 패키지 8개
OTA 지원 경로
4개iOS·Android × 개발·운영

관련 링크

매머드커피 점주앱은 React Native 셸에서 Next.js 웹을 여는 하이브리드 서비스입니다. 2025년 7월부터 웹과 네이티브 양쪽의 기능 개발과 배포를 맡고 있습니다.

웹과 네이티브를 함께 운영

홈·매출·수발주·배달·마케팅처럼 자주 바뀌는 점주 업무는 웹으로 제공합니다. 푸시·딥링크·권한·보안 저장소는 네이티브 셸이 맡습니다. 웹은 Turborepo와 pnpm으로 매머드커피와 더리터 앱, 공통 패키지 8개를 관리합니다.

기존 모노레포 구조를 이어받아 POS 매출 채널과 전체 매장 조회를 보강했습니다. 최근에는 할인 상품을 고르는 캠페인 생성 기능과 실제 API 연동을 맡았습니다. 여러 화면의 safe area와 운영 중 발견한 조회 오류도 수정했습니다.

네이티브가 관리하는 인증 세션

access token만 쓰던 인증에 refresh session을 도입하고 세션 저장과 갱신을 네이티브가 맡도록 바꿨습니다. 세션은 EncryptedStorage에서 관리합니다. 기존 access-token-only 사용자는 한 차례 다시 로그인한 뒤 새 세션을 사용합니다. 허용된 origin과 nonce를 확인한 메시지만 권한이 필요한 WebView 브리지를 호출하게 했습니다.

여러 WebView에서 동시에 401을 받아도 한 번의 token refresh를 공유합니다. 세션 저장은 pending과 committed 단계로 나누고 저장이 끝나기 전에는 웹 화면을 열지 않습니다. 로그아웃 뒤에 도착한 갱신 응답이 세션을 되살리지 않도록 로그인·갱신·로그아웃의 경합도 처리했습니다.

앱 시작 구간의 OTA와 출시

S3·CloudFront OTA의 업데이트 확인과 적용을 앱 시작 구간에 연결했습니다. 번들과 릴리스 JSON은 플랫폼, 개발·운영 환경과 바이너리 버전별로 나뉩니다. 앱은 스플래시에서 다운로드 진행률을 보여주고 설치 후 재시작합니다. 확인이나 다운로드가 실패하면 기존 번들로 앱을 열고 재시작 뒤에는 스플래시가 중복 적용되지 않도록 처리했습니다.

OTA로 처리할 수 없는 변경은 스토어 빌드로 배포했습니다. Android 16KB 페이지와 사진 권한 정책, React Native 0.77의 iOS 실행 문제, Xcode 26 빌드와 safe area 회귀까지 출시 과정에서 함께 대응했습니다.