Nudge EAP

주요 작업사항

• Next.js 웹뷰 기반 상품관·마이페이지를 신규 구축
• 담당 도메인의 레거시 API 교체와 QA 대응으로 중복 참여·화면 간 상태 동기화 등 안정성 이슈를 해결
• 고객사 상담 신청 페이지 구현
• CMS의 주요 기능(멤버십·소식·커뮤니티·챌린지·고객사 관리 등) 개발

트러블 슈팅

구매 후 다른 화면의 포인트가 갱신되지 않음

문제

• 상품 상세에서 구매해도 상품관 메인의 보유 포인트가 갱신이 안되었다.
• 앱이 화면을 이동할 때 네이티브 스킴으로 새 웹뷰를 띄우는 구조라, 두 화면은 같은 SPA가 아니라 별개 인스턴스이기 때문에 React Query 캐시와 전역 상태가 공유되지 않았고, 자동으로 반영되지 않았다.

해결

• 같은 origin의 localStorage는 웹뷰 간에 공유되고, 값이 바뀌면 다른 컨텍스트에 storage 이벤트가 발생한다는 점을 이용했다.
• 구매 성공 시 localStorage에 my-point 키를 기록하여, 메인 화면은 storage 이벤트로 이를 감지해 포인트 쿼리를 invalidateQueries 처리했다.

깨달은 점

• 웹뷰 앱은 SPA가 아니다. 전역 상태의 경계가 화면 하나라는 걸 먼저 파악해야 했다.
• 이벤트로 데이터를 나르지 않고 무효화 신호만 보내면 캐시 일관성 문제가 사라진다.