[React] 예약 실패 → PDP 새로고침, 브라우저 간 메시지 통신으로 해결하기

📍 예약 실패 → PDP 새로고침, 브라우저 간 메시지 통신으로 해결하기

문제 상황

놀앱으로 예약생성 실패 알럿 클릭시 현재 페이지(예약결제페이지)가 닫히고 PDP페이지로 돌아오게 된다. 이때 PDP는 상품의 최신 정보(상품/옵션/아이템 판매 가능, 가격 등)를 다시 불러와야한다. 그렇지않으면 유저는 예약이 불가능했던 기존 스냅샷 정보를 계속 사용하게되어 좋지못한 UX를 경험하게 된다.

대안 분석

1. visibilityChange 이벤트 활용

• 장점: 간단한 구현 (페이지가 다시 활성화 될 때 상품 정보 API 호출)
• 단점: 예약 실패 상황과 무관하게 단순히 탭 전화만해도 API를 호출하게 된다. 이는 실시간으로 조회하는 API 특성상 불필요한 네트워크 비용이 발생하게 되어 서버/클라이언트 모두 부담이 크다.

useEffect(() => {
  const handleVisibliityChange = () => {
     // 상품정보 재호출
    queryClient.invalidateQueries({ queryKey: [FETCH_PRODUCT_KEY] })
    queryClient.invalidateQueries({ queryKey: [FETCH_ITEMS_KEY] })
  }
  addEventListener('visibilitychange', handleVisibliityChange)
  return () => {
    removeEventListener('visibilitychange', handleVisibliityChange)
  }
}, [id, queryClient])

2. Observer 패턴의 eventBus + postMessage로 페이지 통신

• 장점: 발행/구독 기반 구조라 특정 이벤트에만 반응이 가능하다.
• 단점: (1번대비) 복잡한 코드 및 리소스 소요 (발행/구독 로직 추가), 코드 파편화(하나의 비즈니스 로직이 구독/발행 코드로인해 여러 곳에 흩어져있어 전체 플로우를 한번에 이해하는데 어려움), 결정적으로 이 방법은 현재 클라이언트에서 미지원하기때문에 사용불가

// eventBus.ts
type EventCallback = (...args: any[]) => void;
export class EventBus {
  private events: Record<string, EventCallback[]> = {};
  subscribe(event: string, callback: EventCallback): () => void {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
    // Return unsubscribe function
    return () => {
      if (!this.events[event]) return;
      this.events[event] = this.events[event].filter(cb => cb !== callback);
      if (this.events[event].length === 0) {
        delete this.events[event];
      }
    };
  }
  publish(event: string, ...args: any[]): void {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => {
      callback(...args);
    });
  }
}
export const EVENTS = {
  SERVICE_UPDATED: 'SERVICE_UPDATED',
  // Add more event constants as needed
};

// 예약결제 페이지 (발행)
const handleConfirm = () => {
  eventBus.publish(EVENTS.BOOKING_ERROR, { reason: "예약 생성 실패" });

  window.postMessage(
    { type: EVENTS.BOOKING_ERROR, reason: "예약 생성 실패" },
    window.location.origin
  );
};

// PDP (구독)
useEffect(() => {
  const unsubscribe = eventBus.subscribe(EVENTS.BOOKING_ERROR, (data) => {
    queryClient.invalidateQueries({ queryKey: [FETCH_PRODUCT_KEY] });
    queryClient.invalidateQueries({ queryKey: [FETCH_ITEMS_KEY] });
  });

  const handleMessage = (event: MessageEvent) => {
    if (event.origin !== window.location.origin) return;
    if (event.data?.type !== EVENTS.BOOKING_ERROR) return;

    queryClient.invalidateQueries({ queryKey: [FETCH_PRODUCT_KEY] });
    queryClient.invalidateQueries({ queryKey: [FETCH_ITEMS_KEY] });
  };

  window.addEventListener("message", handleMessage);

  return () => {
    unsubscribe();
    window.removeEventListener("message", handleMessage);
  };
}, [queryClient]);

3. ✅ storage 이벤트

• 장점: 동일 출처(sameOrigin)내에서 localStorage 변경을 실시간 감지 가능. 간단한 메시지를 주고 받기에 적절하다.
• 단점: 일회성 통신에 적합하므로, 이벤트 처리 후 반드시 해당 key를 제거해야 한다.

// 예약결제페이지
const handleConfirm = () => {
  const destination = `/products/${productId}?startDate=${startDate}&endDate=${endDate}`

  if (yaNative?.isEnabled) {
    localStorage.setItem(BOOKING_ERROR_STORAGE_KEY, 'true')
    yaNative.dismiss()
  } else {
    // 기존 처리
  }
}

// PDP
useEffect(() => {
  const handleStorageChange = (event: StorageEvent) => {
    const isBookingErrorEvent = event.key === BOOKING_ERROR_STORAGE_KEY

    if (!isBookingErrorEvent) {
      return
    }

    // 상품정보 재호출
    queryClient.invalidateQueries({ queryKey: [FETCH_PRODUCT_KEY] })
    queryClient.invalidateQueries({ queryKey: [FETCH_ITEMS_KEY] })

    localStorage.removeItem(BOOKING_ERROR_STORAGE_KEY)
  }

  window.addEventListener('storage', handleStorageChange)

  return () => {
    window.removeEventListener('storage', handleStorageChange)
  }
}, [queryClient])

4. BroadCastChannel API

• 장점: 구현이 간단하고, 이벤트 전송 후 별도의 cleanup(storage key 제거 등)이 필요 없다.
• 단점: iOS safari 브라우저 fallback 처리필요(2022년부터 사용이 가능하다.)

// 예약결제페이지
const handleConfirm = () => {
  const destination = `/products/${productId}?startDate=${startDate}&endDate=${endDate}`

  if (yaNative?.isEnabled) {
    const channel = new BroadcastChannel('booking_channel')
    channel.postMessage({ type: 'BOOKING_ERROR' })
    channel.close() // cleanup

    yaNative.dismiss()
  } else {
    // 기존 처리
  }
}

// PDP
useEffect(() => {
  const channel = new BroadcastChannel('booking_channel')

  const handleMessage = (event: MessageEvent) => {
    if (event.data?.type !== 'BOOKING_ERROR') return

    // 상품정보 재호출
    queryClient.invalidateQueries({ queryKey: [FETCH_PRODUCT_KEY] })
    queryClient.invalidateQueries({ queryKey: [FETCH_ITEMS_KEY] })
  }

  channel.addEventListener('message', handleMessage)

  return () => {
    channel.removeEventListener('message', handleMessage)
    channel.close()
  }
}, [queryClient])

결론

• 이번 스프린트의 할당받은 리소스, 호환성, 목적성을 고려했을때 storage 이벤트를 사용한 3번대안이 적절했다. 물론, BroadCastChannel은 더 직관적이고 유지보수가 쉬운 방식이지만, iOS Safari의 호환성 이슈가 있어 곧바로 도입하기는 어려웠다.

향후 개선 방향은 다음과 같다.

1. BroadCastChannel을 우선 적용한다.
2. BroadCastChannel을 지원하지 않는 브라우저에서는 storage 이벤트로 fallback 한다.
3. 추후 별도의 이벤트 통신 패키지를 도입한다면 EventBus로 일원화 할 수 있다.