WebView 오류 처리 개선

결제 진행 중 발생하는 네트워크 오류를 브라우저와 유사하게 처리하도록 개선:
- 기본 오류 화면 표시 방지
- iOS/macOS에서 -1005 오류(네트워크 연결 끊김) 무시
  - 카드사 앱에서 돌아올 때 폴링 중인 HTTP 요청이 중단되어 발생
- 기타 오류는 사용자에게 알림으로 표시

Author: finalchild

packages/iamport-react-native/src/components/Payment/index.tsx

@@ -1,6 +1,6 @@
 import type { IMPData } from 'iamport-react-native';
 import { createRef, useEffect, useRef, useState } from 'react';
-import { Linking, Platform, View } from 'react-native';
+import { Alert, Linking, Platform, View } from 'react-native';
 import WebView from 'react-native-webview';
 import type { WebViewSource } from 'react-native-webview/lib/WebViewTypes';
 import { IMPConst } from '../../constants';
@@ -129,6 +129,22 @@ function Payment({ userCode, tierCode, data, loading, callback }: Props) {
           ref={webview}
           source={webviewSource}
           mixedContentMode={'always'}
+          onError={(event) => {
+            console.warn('Encountered an error loading page', event.nativeEvent);
+            // 탐색이 실패하면 react-native-webview는 바로 오류 화면을 표시하려 한다
+            // 한편 브라우저는 오류를 무시하여 결제를 계속 진행할 수 있는 경우가 있다
+            // 브라우저의 동작을 따라한다
+            event.preventDefault();
+            // Domain=NSURLErrorDomain Code=-1005 Description="The network connection was lost."
+            // 지속적으로 폴링하는 카드사(현대카드)의 경우 카드사 앱에서 돌아올 때 HTTP 요청이 강제 중단되어 -1005 오류 발생
+            // 브라우저에서 간헐적으로 자동 리다이렉트가 안 되고 버튼을 누르라고 하는 경우 이 경우이다
+            // 무시한다
+            if (Platform.OS === 'ios' || Platform.OS === 'macos' && event.nativeEvent.code === -1005) {
+              return;
+            }
+            // 이외의 경우에는 어떻게 처리해야 할지 확실하지 않지만 우선 알림을 보여 주도록 구현
+            Alert.alert(`탐색 오류가 발생했습니다\n도메인: ${event.nativeEvent.domain}\n오류 코드: ${event.nativeEvent.code}\n설명: ${event.nativeEvent.description}`);
+          }}
           onLoadEnd={() => {
             if (!isWebViewLoaded) {
               if (data.pg.startsWith('eximbay')) {