[feature] WebView 메시지 핸들러 구현 - 알림 구독 및 네비게이션 처리

[oesnuj]

개요

웹(React)에서 React Native 앱으로 메시지를 전송하는 기능이 구현되었습니다.
앱에서 WebView의 onMessage 핸들러를 구현하여 웹의 요청을 처리해야 합니다.

관련 웹 코드

• frontend/src/utils/webviewBridge.ts - 웹 → 앱 메시지 전송 유틸리티
• frontend/src/components/common/AppWebViewHeader/ - 모바일 헤더 컴포넌트

메시지 타입

Type	용도	Payload
NAVIGATE_BACK	앱 메인 화면으로 이동	없음
NOTIFICATION_SUBSCRIBE	클럽 알림 구독 요청	{ clubId, clubName }
NOTIFICATION_UNSUBSCRIBE	클럽 알림 해제 요청	{ clubId }

구현 필요 사항

1. WebView 설정

<WebView
  source={{ uri: 'https://moadong.com/club/{clubId}' }}
  onMessage={handleMessage}
  // 필수: 웹에서 앱 환경 감지용
  userAgent="Mozilla/5.0 MoadongApp/1.0"
/>
2. 메시지 핸들러 구현

const handleMessage = (event: WebViewMessageEvent) => {
  const data = JSON.parse(event.nativeEvent.data);

  switch (data.type) {
    case 'NAVIGATE_BACK':
      // 앱 메인 화면으로 이동
      navigation.navigate('Main');
      break;

    case 'NOTIFICATION_SUBSCRIBE':
      // 푸시 알림 구독 처리 (Firebase 등)
      const { clubId, clubName } = data.payload;
      subscribeToClubNotification(clubId, clubName);
      break;

    case 'NOTIFICATION_UNSUBSCRIBE':
      // 푸시 알림 해제 처리
      unsubscribeFromClubNotification(data.payload.clubId);
      break;
  }
};

체크리스트

• WebView userAgent에 MoadongApp 포함 설정
• onMessage 핸들러 구현
• NAVIGATE_BACK 처리 - 메인 화면 이동
• NOTIFICATION_SUBSCRIBE 처리 - 푸시 알림 구독
• NOTIFICATION_UNSUBSCRIBE 처리 - 푸시 알림 해제

참고

웹에서 window.ReactNativeWebView.postMessage()로 메시지 전송
userAgent에 MoadongApp이 포함되어야 웹에서 앱 환경으로 인식