@apps-in-toss/framework 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -38,14 +38,14 @@ __export(src_exports, {
   env: () => env,
   useCreateUserAgent: () => useCreateUserAgent,
   useGeolocation: () => useGeolocation,
-  useTopNavigation: () => import_private6.useTopNavigation
+  useTopNavigation: () => import_private8.useTopNavigation
 });
 module.exports = __toCommonJS(src_exports);
 var import_analytics2 = require("@apps-in-toss/analytics");
 
 // src/core/registerApp.tsx
 var import_analytics = require("@apps-in-toss/analytics");
-var import_native_modules9 = require("@apps-in-toss/native-modules");
+var import_native_modules8 = require("@apps-in-toss/native-modules");
 var import_react_native17 = require("@granite-js/react-native");
 var import_react_native18 = require("@toss-design-system/react-native");
 var import_react_native19 = require("react-native");
@@ -191,18 +191,58 @@ function AppUpdate() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
 }
 
-// src/core/components/BuiltinNavigationBar/index.tsx
-var import_native_modules7 = require("@apps-in-toss/native-modules");
-var import_react_native13 = require("@granite-js/react-native");
-var import_react_native14 = require("@toss-design-system/react-native");
+// src/core/hooks/useAppsInTossBridge.ts
+var import_native_modules3 = require("@apps-in-toss/native-modules");
+var import_react_native6 = require("@toss-design-system/react-native");
+var import_react5 = require("react");
+
+// src/core/utils/getAppsInTossGlobals.ts
+function getAppsInTossGlobals() {
+  if (global.__appsInToss == null) {
+    throw new Error("invalid apps-in-toss globals");
+  }
+  return global.__appsInToss;
+}
+
+// src/core/utils/toIcon.ts
+function toIcon(source) {
+  return source.startsWith("http") ? { source: { uri: source } } : { name: source };
+}
+
+// src/core/hooks/useAppsInTossBridge.ts
+function useAppsInTossBridge() {
+  const controller = (0, import_react_native6.useBridge)();
+  const appsInTossGlobals = getAppsInTossGlobals();
+  (0, import_react5.useEffect)(() => {
+    const commonProps = {
+      serviceName: appsInTossGlobals.brandDisplayName,
+      icon: toIcon(appsInTossGlobals.brandIcon),
+      color: appsInTossGlobals.brandPrimaryColor,
+      colorMode: appsInTossGlobals.brandBridgeColorMode
+    };
+    controller.open({
+      ...commonProps,
+      onExited: () => {
+        import_native_modules3.appsInTossEvent.emit("entryMessageExited", void 0);
+      }
+    });
+  }, []);
+}
+
+// src/components/NavigationBar/RNNavigationBar.tsx
+var import_react_native14 = require("@granite-js/react-native");
+var import_react_native15 = require("@toss-design-system/react-native");
 var import_private2 = require("@toss-design-system/react-native/private");
 var import_es_hangul = require("es-hangul");
-var import_react7 = require("react");
-var import_react_native15 = require("react-native");
+var import_react9 = require("react");
+var import_react_native16 = require("react-native");
 
-// src/core/components/BuiltinNavigationBar/useBuiltinNavigationBarLogging.tsx
-var import_native_modules3 = require("@apps-in-toss/native-modules");
-var import_react_native6 = require("@granite-js/react-native");
+// src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
+var import_react6 = require("react");
+
+// src/components/NavigationBar/common/useNavigationBarLogging.tsx
+var import_native_modules4 = require("@apps-in-toss/native-modules");
+var import_react_native7 = require("@granite-js/react-native");
 var NAVI_BAR_IMPRESSION_SCHEMA_ID = 1596837;
 var NAVI_BAR_IMPRESSION_LOG_NAME = "appsintoss_app_visit__common_module::impression__navigation_bar";
 var CLOSE_POPUP_SHOW_SCHEMA_ID = 1644490;
@@ -213,14 +253,14 @@ var CLOSE_POPUP_CTA_CLICK_SCHEMA_ID = 1644492;
 var CLOSE_POPUP_CTA_CLICK_LOG_NAME = "appsintoss_app_visit__common_module::popup__close_app::click__cta";
 var HOME_BUTTON_CLICK_SCHEMA_ID = 1596839;
 var HOME_BUTTON_CLICK_LOG_NAME = "appsintoss_app_visit__common_module::click__icon_home";
-function useBuiltinNavigationBarLogging() {
+function useNavigationBarLogging() {
   const referrer = useReferrer();
   const baseParams = {
     referrer,
-    app_name: import_react_native6.Granite.appName
+    app_name: import_react_native7.Granite.appName
   };
   const logNavBarImpression = (naviBarConfig) => {
-    import_native_modules3.INTERNAL__module.tossCoreEventLog({
+    import_native_modules4.INTERNAL__module.tossCoreEventLog({
       log_name: NAVI_BAR_IMPRESSION_LOG_NAME,
       log_type: "event",
       params: {
@@ -232,7 +272,7 @@ function useBuiltinNavigationBarLogging() {
     });
   };
   const logHomeButtonClick = () => {
-    import_native_modules3.INTERNAL__module.tossCoreEventLog({
+    import_native_modules4.INTERNAL__module.tossCoreEventLog({
       log_name: HOME_BUTTON_CLICK_LOG_NAME,
       log_type: "event",
       params: {
@@ -243,7 +283,7 @@ function useBuiltinNavigationBarLogging() {
     });
   };
   const logCloseButtonClick = () => {
-    import_native_modules3.INTERNAL__module.tossCoreEventLog({
+    import_native_modules4.INTERNAL__module.tossCoreEventLog({
       log_name: CLOSE_BUTTON_CLICK_LOG_NAME,
       log_type: "event",
       params: {
@@ -254,7 +294,7 @@ function useBuiltinNavigationBarLogging() {
     });
   };
   const logClosePopupShow = () => {
-    import_native_modules3.INTERNAL__module.tossCoreEventLog({
+    import_native_modules4.INTERNAL__module.tossCoreEventLog({
       log_name: CLOSE_POPUP_SHOW_LOG_NAME,
       log_type: "popup",
       params: {
@@ -264,7 +304,7 @@ function useBuiltinNavigationBarLogging() {
     });
   };
   const logClosePopupCtaClick = (confirm) => {
-    import_native_modules3.INTERNAL__module.tossCoreEventLog({
+    import_native_modules4.INTERNAL__module.tossCoreEventLog({
       log_name: CLOSE_POPUP_CTA_CLICK_LOG_NAME,
       log_type: "event",
       params: {
@@ -284,16 +324,33 @@ function useBuiltinNavigationBarLogging() {
   };
 }
 
+// src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function NavigationBarImpressionArea({
+  children,
+  withHomeButton
+}) {
+  const hasLogged = (0, import_react6.useRef)(false);
+  const logging = useNavigationBarLogging();
+  (0, import_react6.useEffect)(() => {
+    if (hasLogged.current === false) {
+      logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
+      hasLogged.current = true;
+    }
+  }, [logging, withHomeButton]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+}
+
 // src/core/hooks/useMoreButtonBottomSheet/index.tsx
-var import_native_modules6 = require("@apps-in-toss/native-modules");
-var import_react_native11 = require("@granite-js/react-native");
-var import_react_native12 = require("@toss-design-system/react-native");
+var import_native_modules7 = require("@apps-in-toss/native-modules");
+var import_react_native12 = require("@granite-js/react-native");
+var import_react_native13 = require("@toss-design-system/react-native");
 var import_private = require("@toss-design-system/react-native/private");
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/core/hooks/useMoreButtonBottomSheet/useMoreButtonBottomSheetLogging.tsx
-var import_native_modules4 = require("@apps-in-toss/native-modules");
-var import_react_native7 = require("@granite-js/react-native");
+var import_native_modules5 = require("@apps-in-toss/native-modules");
+var import_react_native8 = require("@granite-js/react-native");
 var BOTTOM_SHEET_SCHEMA_ID = 1596825;
 var BOTTOM_SHEET_LOG_NAME = "appsintoss_app_visit__common_module::bottomsheet__more";
 var BOTTOM_SHEET_OPEN_SCHEMA_ID = 1596829;
@@ -306,10 +363,10 @@ function useMoreButtonBottomSheetLogging() {
   const referrer = useReferrer();
   const baseParams = {
     referrer,
-    app_name: import_react_native7.Granite.appName
+    app_name: import_react_native8.Granite.appName
   };
   const logBottomSheetShow = () => {
-    import_native_modules4.INTERNAL__module.tossCoreEventLog({
+    import_native_modules5.INTERNAL__module.tossCoreEventLog({
       log_name: BOTTOM_SHEET_LOG_NAME,
       log_type: "popup",
       params: {
@@ -319,7 +376,7 @@ function useMoreButtonBottomSheetLogging() {
     });
   };
   const logBottomSheetOpen = () => {
-    import_native_modules4.INTERNAL__module.tossCoreEventLog({
+    import_native_modules5.INTERNAL__module.tossCoreEventLog({
       log_name: BOTTOM_SHEET_OPEN_LOG_NAME,
       log_type: "event",
       params: {
@@ -330,7 +387,7 @@ function useMoreButtonBottomSheetLogging() {
     });
   };
   const logBottomSheetCloseClick = () => {
-    import_native_modules4.INTERNAL__module.tossCoreEventLog({
+    import_native_modules5.INTERNAL__module.tossCoreEventLog({
       log_name: BOTTOM_SHEET_CLOSE_CLICK_LOG_NAME,
       log_type: "event",
       params: {
@@ -341,7 +398,7 @@ function useMoreButtonBottomSheetLogging() {
     });
   };
   const logBottomSheetMenuClick = ({ title }) => {
-    import_native_modules4.INTERNAL__module.tossCoreEventLog({
+    import_native_modules5.INTERNAL__module.tossCoreEventLog({
       log_name: BOTTOM_SHEET_MENU_CLICK_LOG_NAME,
       log_type: "event",
       params: {
@@ -361,24 +418,24 @@ function useMoreButtonBottomSheetLogging() {
 }
 
 // src/hooks/useAppUpdateDialog.tsx
-var import_native_modules5 = require("@apps-in-toss/native-modules");
-var import_react_native9 = require("@granite-js/react-native");
-var import_react_native10 = require("@toss-design-system/react-native");
-var import_react5 = require("react");
+var import_native_modules6 = require("@apps-in-toss/native-modules");
+var import_react_native10 = require("@granite-js/react-native");
+var import_react_native11 = require("@toss-design-system/react-native");
+var import_react7 = require("react");
 
 // src/utils/market.ts
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 var PLAYSTORE_LINK = "https://play.google.com/store/apps/details?id=viva.republica.toss";
 var APPSTORE_LINK = "https://itunes.apple.com/app/id839333328";
 var getMarketLink = () => {
-  return import_react_native8.Platform.OS === "android" ? PLAYSTORE_LINK : APPSTORE_LINK;
+  return import_react_native9.Platform.OS === "android" ? PLAYSTORE_LINK : APPSTORE_LINK;
 };
 
 // src/hooks/useAppUpdateDialog.tsx
 function useAppUpdateDialog() {
-  const { openConfirm } = (0, import_react_native10.useDialog)();
+  const { openConfirm } = (0, import_react_native11.useDialog)();
   const logging = useAppUpdateDialogLogging();
-  const openAppUpdateDialog = (0, import_react5.useCallback)(
+  const openAppUpdateDialog = (0, import_react7.useCallback)(
     async ({
       title,
       description,
@@ -399,7 +456,7 @@ function useAppUpdateDialog() {
       }
       logging.update();
       const STORE_SCHEME = getMarketLink();
-      (0, import_react_native9.openURL)(`supertoss://web?url=${STORE_SCHEME}&external=browser`);
+      (0, import_react_native10.openURL)(`supertoss://web?url=${STORE_SCHEME}&external=browser`);
     },
     [logging, openConfirm]
   );
@@ -415,10 +472,10 @@ function useAppUpdateDialogLogging() {
   const referrer = useReferrer();
   const baseParams = {
     referrer,
-    app_name: import_react_native9.Granite.appName
+    app_name: import_react_native10.Granite.appName
   };
   const logUpdateClick = () => {
-    import_native_modules5.INTERNAL__module.tossCoreEventLog({
+    import_native_modules6.INTERNAL__module.tossCoreEventLog({
       log_name: UPDATE_DIALOG_CTA_CLICK_LOG_NAME,
       log_type: "event",
       params: {
@@ -430,7 +487,7 @@ function useAppUpdateDialogLogging() {
     });
   };
   const logCloseClick = () => {
-    import_native_modules5.INTERNAL__module.tossCoreEventLog({
+    import_native_modules6.INTERNAL__module.tossCoreEventLog({
       log_name: UPDATE_DIALOG_CTA_CLICK_LOG_NAME,
       log_type: "event",
       params: {
@@ -442,7 +499,7 @@ function useAppUpdateDialogLogging() {
     });
   };
   const logDialogShow = () => {
-    import_native_modules5.INTERNAL__module.tossCoreEventLog({
+    import_native_modules6.INTERNAL__module.tossCoreEventLog({
       log_name: UPDATE_DIALOG_LOG_NAME,
       log_type: "popup",
       params: {
@@ -462,34 +519,26 @@ function ensureValue(value, name) {
   return value;
 }
 
-// src/core/utils/getAppsInTossGlobals.ts
-function getAppsInTossGlobals() {
-  if (global.__appsInToss == null) {
-    throw new Error("invalid apps-in-toss globals");
-  }
-  return global.__appsInToss;
-}
-
 // src/core/hooks/useMoreButtonBottomSheet/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var APP_BRIDGE_METHOD_NAME = "getMiniAppsSupportContact";
 function useMoreButtonBottomSheet() {
   const globals = getAppsInTossGlobals();
   const adaptive = (0, import_private.useAdaptive)();
-  const [itemList, setItemList] = (0, import_react6.useState)([]);
+  const [itemList, setItemList] = (0, import_react8.useState)([]);
   const appUpdateDialog = useAppUpdateDialog();
   const logging = useMoreButtonBottomSheetLogging();
   const overlay = (0, import_private.useOverlay)();
   const title = ensureValue(globals.brandDisplayName, "displayName");
-  const isSupported = (0, import_native_modules6.isMinVersionSupported)({
+  const isSupported = (0, import_native_modules7.isMinVersionSupported)({
     android: "5.226.0",
     ios: "5.226.0"
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isSupported) {
       return;
     }
-    import_native_modules6.INTERNAL__appBridgeHandler.invokeAppBridgeMethod(
+    import_native_modules7.INTERNAL__appBridgeHandler.invokeAppBridgeMethod(
       APP_BRIDGE_METHOD_NAME,
       {},
       {
@@ -512,18 +561,18 @@ function useMoreButtonBottomSheet() {
         logging.close();
         close();
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BottomSheetImpressionArea, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native12.BottomSheet.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BottomSheetImpressionArea, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native13.BottomSheet.Root,
         {
-          header: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_react_native12.ListHeader,
+          header: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react_native13.ListHeader,
             {
-              title: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native12.ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
+              title: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native13.ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
             }
           ),
           open: isOpen,
-          cta: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_react_native12.BottomSheet.CTA,
+          cta: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react_native13.BottomSheet.CTA,
             {
               size: "large",
               type: "dark",
@@ -536,20 +585,20 @@ function useMoreButtonBottomSheet() {
           ),
           onClose: handleClose,
           onExited: exit,
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native12.List, { rowSeparator: "none", children: itemList.map((item) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_react_native12.ListRow,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native13.List, { rowSeparator: "none", children: itemList.map((item) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_react_native13.ListRow,
               {
-                left: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  import_react_native12.ListRow.Icon,
+                left: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_react_native13.ListRow.Icon,
                   {
                     color: globals.brandPrimaryColor,
                     source: { uri: item.contactIconUrl },
                     type: "background"
                   }
                 ),
-                contents: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  import_react_native12.ListRow.Texts,
+                contents: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_react_native13.ListRow.Texts,
                   {
                     type: "1RowTypeA",
                     top: item.contactItemName,
@@ -559,7 +608,7 @@ function useMoreButtonBottomSheet() {
                 verticalPadding: "extraSmall",
                 onPress: () => {
                   logging.menuClick({ title: item.contactItemName });
-                  (0, import_react_native11.openURL)(item.contactUri);
+                  (0, import_react_native12.openURL)(item.contactUri);
                 }
               },
               item.contactItemName
@@ -573,10 +622,10 @@ function useMoreButtonBottomSheet() {
 }
 function BottomSheetImpressionArea({ children }) {
   const logging = useMoreButtonBottomSheetLogging();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     logging.show();
   }, [logging]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
 }
 
 // src/core/utils/safeParseNavigationBar.ts
@@ -591,48 +640,26 @@ function safeParseNavigationBar(navigationBar) {
   }
 }
 
-// src/core/utils/toIcon.ts
-function toIcon(source) {
-  return source.startsWith("http") ? { source: { uri: source } } : { name: source };
-}
-
-// src/core/components/BuiltinNavigationBar/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function BuiltinNavigationBar() {
+// src/components/NavigationBar/RNNavigationBar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function RNNavigationBar() {
   const globals = getAppsInTossGlobals();
   const { captureExitLog } = useCaptureExitLog();
-  const logging = useBuiltinNavigationBarLogging();
-  const { openConfirm } = (0, import_react_native14.useDialog)();
+  const logging = useNavigationBarLogging();
+  const { openConfirm } = (0, import_react_native15.useDialog)();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
   const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
-  const isExternalWebView = globals.webViewType === "external";
-  const isGameWebView = globals.webViewType === "game";
-  const backEventContext = (0, import_react_native13.useBackEventContext)();
+  const backEventContext = (0, import_react_native14.useBackEventContext)();
   const handleBackOrClose = useBackOrCloseNavigation();
-  const navigation = (0, import_react_native13.useNavigation)();
-  const handlePressTitle = (0, import_react7.useCallback)(() => {
+  const navigation = (0, import_react_native14.useNavigation)();
+  const handlePressTitle = (0, import_react9.useCallback)(() => {
     logging.homeButtonClick();
-    if (globals.webViewType != null) {
-      import_native_modules7.appsInTossEvent.emit("homeIconButtonClickEvent", void 0);
-      return;
-    }
     navigation.navigate("/");
-  }, [logging, globals.webViewType, navigation]);
-  const handleBack = (0, import_react7.useCallback)(() => {
-    if (globals.webViewType != null) {
-      import_native_modules7.appsInTossEvent.emit("backButtonClickEvent", void 0);
-      return;
-    }
-    if (backEventContext.hasBackEvent) {
-      backEventContext.onBack();
-      return;
-    }
-    handleBackOrClose();
-  }, [globals.webViewType, backEventContext, handleBackOrClose]);
-  const handleClose = (0, import_react7.useCallback)(async () => {
+  }, [logging, navigation]);
+  const handleClose = (0, import_react9.useCallback)(async () => {
     logging.closeButtonClick();
     const isConfirmed = await openConfirm({
       title: `${(0, import_es_hangul.josa)(globals.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
@@ -644,29 +671,33 @@ function BuiltinNavigationBar() {
     logging.closePopupCtaClick(isConfirmed);
     if (isConfirmed) {
       captureExitLog(Date.now());
-      (0, import_react_native13.closeView)();
+      (0, import_react_native14.closeView)();
     }
   }, [captureExitLog, globals.brandDisplayName, logging, openConfirm]);
-  const handleBackEvent = (0, import_react7.useCallback)(() => {
-    handleBack();
-    return true;
-  }, [handleBack]);
-  (0, import_react7.useEffect)(() => {
-    import_react_native15.BackHandler.addEventListener("hardwareBackPress", handleBackEvent);
+  const handleBack = (0, import_react9.useCallback)(() => {
+    if (backEventContext.hasBackEvent) {
+      backEventContext.onBack();
+      return;
+    }
+    handleBackOrClose();
+  }, [backEventContext, handleBackOrClose]);
+  (0, import_react9.useEffect)(() => {
+    const handleAndroidBackEvent = () => {
+      handleBack();
+      return true;
+    };
+    import_react_native16.BackHandler.addEventListener("hardwareBackPress", handleAndroidBackEvent);
     return () => {
-      import_react_native15.BackHandler.removeEventListener("hardwareBackPress", handleBackEvent);
+      import_react_native16.BackHandler.removeEventListener("hardwareBackPress", handleAndroidBackEvent);
     };
-  }, [handleBackEvent]);
-  if (isExternalWebView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BuiltinNavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  }, [handleBack]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_private2.TopNavigation,
     {
       title: globals.brandDisplayName,
       icon: toIcon(globals.brandIcon),
       onPressDots: openMoreButtonBottomSheet,
-      contentVisible: isGameWebView ? false : true,
+      contentVisible: true,
       onPressTitle: withHomeButton ? handlePressTitle : void 0,
       onPressClose: handleClose,
       withHome: withHomeButton,
@@ -675,96 +706,59 @@ function BuiltinNavigationBar() {
         icon: initialAccessoryButton.icon,
         id: initialAccessoryButton.id
       } : void 0,
-      children: isGameWebView === false ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_private2.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_private2.NavigationBackButton, { onPress: handleBack, canGoBack: false }) }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_private2.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_private2.NavigationBackButton, { onPress: handleBack, canGoBack: false }) })
     }
   ) });
 }
 function useBackOrCloseNavigation() {
-  const navigation = (0, import_react_native13.useNavigation)();
+  const navigation = (0, import_react_native14.useNavigation)();
   const { captureExitLog } = useCaptureExitLog();
-  return (0, import_react7.useCallback)(() => {
+  return (0, import_react9.useCallback)(() => {
     if (navigation.canGoBack()) {
       navigation.goBack();
     } else {
       captureExitLog(Date.now());
-      (0, import_react_native13.closeView)();
+      (0, import_react_native14.closeView)();
     }
-  }, [navigation]);
-}
-function BuiltinNavigationBarImpressionArea({
-  children,
-  withHomeButton
-}) {
-  const hasLogged = (0, import_react7.useRef)(false);
-  const logging = useBuiltinNavigationBarLogging();
-  (0, import_react7.useEffect)(() => {
-    if (hasLogged.current === false) {
-      logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
-      hasLogged.current = true;
-    }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
-}
-
-// src/core/hooks/useAppsInTossBridge.ts
-var import_native_modules8 = require("@apps-in-toss/native-modules");
-var import_react_native16 = require("@toss-design-system/react-native");
-var import_react8 = require("react");
-function useAppsInTossBridge() {
-  const controller = (0, import_react_native16.useBridge)();
-  const appsInTossGlobals = getAppsInTossGlobals();
-  (0, import_react8.useEffect)(() => {
-    const commonProps = {
-      serviceName: appsInTossGlobals.brandDisplayName,
-      icon: toIcon(appsInTossGlobals.brandIcon),
-      color: appsInTossGlobals.brandPrimaryColor,
-      colorMode: appsInTossGlobals.brandBridgeColorMode
-    };
-    controller.open({
-      ...commonProps,
-      onExited: () => {
-        import_native_modules8.appsInTossEvent.emit("entryMessageExited", void 0);
-      }
-    });
-  }, []);
+  }, [captureExitLog, navigation]);
 }
 
 // src/core/registerApp.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function AppsInTossContainer(Container, { children, ...initialProps }) {
-  if (!(0, import_native_modules9.isMinVersionSupported)({
+  if (!(0, import_native_modules8.isMinVersionSupported)({
     android: "5.220.0",
     ios: "5.221.0"
   })) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppEvent.Entry, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppEvent.System, { ...initialProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppUpdate, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppEvent.Entry, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppEvent.System, { ...initialProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppUpdate, {})
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppEvent.StayTime, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppEvent.Entry, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppEvent.System, { ...initialProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native18.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TDSContainer, { ...initialProps, children }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppEvent.StayTime, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppEvent.Entry, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppEvent.System, { ...initialProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native18.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TDSContainer, { ...initialProps, children }) }) })
   ] });
 }
 function TDSContainer({ children }) {
   useAppsInTossBridge();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
 }
 function registerApp(container, { context, analytics }) {
   const appName = getAppName();
   const isRegistered = import_react_native19.AppRegistry.getAppKeys().includes(appName);
   if (!isRegistered) {
     import_analytics.Analytics.init({
-      logger: (params) => void (0, import_native_modules9.eventLog)(params),
+      logger: (params) => void (0, import_native_modules8.eventLog)(params),
       debug: analytics?.debug ?? __DEV__
     });
     const App = import_react_native17.Granite.registerApp(AppsInTossContainer.bind(null, container), {
       appName,
       context,
-      setIosSwipeGestureEnabled: import_native_modules9.setIosSwipeGestureEnabled,
+      setIosSwipeGestureEnabled: import_native_modules8.setIosSwipeGestureEnabled,
       router: {
         screenContainer: AppsInTossScreenContainer,
         defaultScreenOption: {
@@ -777,8 +771,9 @@ function registerApp(container, { context, analytics }) {
   return global.Page;
 }
 function AppsInTossScreenContainer({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_analytics.Analytics.Screen, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BuiltinNavigationBar, {}),
+  const isReactNativeService = getAppsInTossGlobals().webViewType == null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_analytics.Analytics.Screen, { children: [
+    isReactNativeService && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RNNavigationBar, {}),
     children
   ] });
 }
@@ -801,51 +796,50 @@ var import_native_modules17 = require("@apps-in-toss/native-modules");
 var appsInTossAsyncBridges = __toESM(require("@apps-in-toss/native-modules/async-bridges"), 1);
 var appsInTossConstantBridges = __toESM(require("@apps-in-toss/native-modules/constant-bridges"), 1);
 var appsInTossEventBridges = __toESM(require("@apps-in-toss/native-modules/event-bridges"), 1);
-var import_react_native30 = require("@granite-js/react-native");
+var import_react_native36 = require("@granite-js/react-native");
 var graniteAsyncBridges = __toESM(require("@granite-js/react-native/async-bridges"), 1);
 var graniteConstantBridges = __toESM(require("@granite-js/react-native/constant-bridges"), 1);
-var import_react_native31 = require("@toss-design-system/react-native");
-var import_private5 = require("@toss-design-system/react-native/private");
-var import_es_hangul3 = require("es-hangul");
-var import_react15 = require("react");
-var import_react_native32 = require("react-native");
+var import_react_native37 = require("@toss-design-system/react-native");
+var import_private7 = require("@toss-design-system/react-native/private");
+var import_react19 = require("react");
+var import_react_native38 = require("react-native");
 
 // src/components/GameWebView.tsx
-var import_native_modules13 = require("@apps-in-toss/native-modules");
+var import_native_modules12 = require("@apps-in-toss/native-modules");
 var import_react_native_webview = require("@granite-js/native/react-native-webview");
-var import_react11 = require("react");
-var import_react_native26 = require("react-native");
+var import_react13 = require("react");
+var import_react_native29 = require("react-native");
 
 // src/components/GameProfile.tsx
-var import_native_modules12 = require("@apps-in-toss/native-modules");
+var import_native_modules11 = require("@apps-in-toss/native-modules");
 var import_react_native24 = require("@toss-design-system/react-native");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_native25 = require("react-native");
 
 // src/constant/game-center.ts
-var GAME_PROFILE_WEBVIEW_URL = "https://service.toss.im/game-center/profile";
+var GAME_PROFILE_WEBVIEW_URL = "servicetoss://game-center/profile";
 var GAME_CENTER_MIN_VERSION = {
   android: "5.221.0",
   ios: "5.221.0"
 };
 
 // src/hooks/useGameCenterProfile.ts
-var import_native_modules11 = require("@apps-in-toss/native-modules");
+var import_native_modules10 = require("@apps-in-toss/native-modules");
 var import_react_native22 = require("@granite-js/react-native");
 var import_react_native23 = require("@toss-design-system/react-native");
 var import_es_hangul2 = require("es-hangul");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/GameProfileToast.tsx
 var import_react_native20 = require("@toss-design-system/react-native");
 var import_private3 = require("@toss-design-system/react-native/private");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var useGameProfileToast = () => {
   const overlay = (0, import_private3.useOverlay)();
   const openGameProfileToast = (nickname, profileImageUri) => {
     return new Promise((resolve) => {
       overlay.open(({ isOpen, close, exit }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_private3.ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_private3.AdaptiveColorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_private3.ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_private3.AdaptiveColorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_react_native20.Toast,
           {
             open: isOpen,
@@ -856,7 +850,7 @@ var useGameProfileToast = () => {
             onExited: exit,
             position: "top",
             text: `${nickname}\uB2D8 \uBC18\uAC00\uC6CC\uC694!`,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               import_react_native20.Asset.Image,
               {
                 style: { borderRadius: 64, overflow: "hidden" },
@@ -882,8 +876,8 @@ var DEFAULT_ERROR = {
 var import_react_native21 = require("@granite-js/react-native");
 
 // src/private.ts
-var import_native_modules10 = require("@apps-in-toss/native-modules");
-var INTERNAL__onVisibilityChangedByTransparentServiceWeb = import_native_modules10.onVisibilityChangedByTransparentServiceWeb;
+var import_native_modules9 = require("@apps-in-toss/native-modules");
+var INTERNAL__onVisibilityChangedByTransparentServiceWeb = import_native_modules9.onVisibilityChangedByTransparentServiceWeb;
 
 // src/utils/openTransparentWebView.ts
 var openTransparentWebView = ({
@@ -918,24 +912,24 @@ var openTransparentWebView = ({
 
 // src/hooks/useGameCenterProfile.ts
 var useGameCenterProfile = (isReadyForProfileUI) => {
-  const [profileData, setProfileData] = (0, import_react9.useState)(void 0);
-  const [isProfileDataLoading, setIsProfileDataLoading] = (0, import_react9.useState)(true);
-  const [isProfileDataRefetching, setIsProfileDataRefetching] = (0, import_react9.useState)(false);
+  const [profileData, setProfileData] = (0, import_react10.useState)(void 0);
+  const [isProfileDataLoading, setIsProfileDataLoading] = (0, import_react10.useState)(true);
+  const [isProfileDataRefetching, setIsProfileDataRefetching] = (0, import_react10.useState)(false);
   const shouldShowLoadingOverlay = isProfileDataLoading && isReadyForProfileUI;
   const shouldShowProfileNotFoundOverlay = profileData?.statusCode === "PROFILE_NOT_FOUND" && isReadyForProfileUI && !isProfileDataRefetching;
   const canShowBottomSheetOrToast = !isProfileDataLoading && isReadyForProfileUI;
-  const [isWebviewLoading, setIsWebviewLoading] = (0, import_react9.useState)(false);
-  const isCompletedProfileFlow = (0, import_react9.useRef)(false);
+  const [isWebviewLoading, setIsWebviewLoading] = (0, import_react10.useState)(false);
+  const isCompletedProfileFlow = (0, import_react10.useRef)(false);
   const { openAlert, openConfirm } = (0, import_react_native23.useDialog)();
   const { openGameProfileToast } = useGameProfileToast();
-  const openErrorAlert = (0, import_react9.useCallback)(async () => {
+  const openErrorAlert = (0, import_react10.useCallback)(async () => {
     await openAlert({
       title: DEFAULT_ERROR.title,
       description: DEFAULT_ERROR.description
     });
     (0, import_react_native22.closeView)();
   }, [openAlert]);
-  const openProfileWebview = (0, import_react9.useCallback)(() => {
+  const openProfileWebview = (0, import_react10.useCallback)(() => {
     if (isWebviewLoading) {
       return;
     }
@@ -947,7 +941,7 @@ var useGameCenterProfile = (isReadyForProfileUI) => {
           try {
             setIsWebviewLoading(false);
             setIsProfileDataRefetching(true);
-            const data = await (0, import_native_modules11.getGameCenterGameProfile)();
+            const data = await (0, import_native_modules10.getGameCenterGameProfile)();
             setProfileData(data);
             setIsProfileDataRefetching(false);
             if (data?.statusCode === "SUCCESS") {
@@ -964,7 +958,7 @@ var useGameCenterProfile = (isReadyForProfileUI) => {
       }
     });
   }, [isWebviewLoading, openGameProfileToast, openErrorAlert]);
-  const updateAppToSupportedMinVersion = (0, import_react9.useCallback)(async () => {
+  const updateAppToSupportedMinVersion = (0, import_react10.useCallback)(async () => {
     const upddateConfirmDialogLabel = {
       title: `${(0, import_es_hangul2.josa)(getAppsInTossGlobals().brandDisplayName, "\uC744/\uB97C")} \uD558\uB824\uBA74 
 \uC571\uC744 \uC5C5\uB370\uC774\uD2B8\uD574\uC8FC\uC138\uC694`,
@@ -1011,7 +1005,7 @@ var Z_INDEX = {
 };
 
 // src/components/GameProfile.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var GameProfile = ({ children, isReadyForProfileUI }) => {
   const {
     profileData,
@@ -1027,10 +1021,10 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
     openErrorAlert,
     openGameProfileToast
   } = useGameCenterProfile(isReadyForProfileUI);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     try {
       const getProfileData = async () => {
-        const data = await (0, import_native_modules12.getGameCenterGameProfile)();
+        const data = await (0, import_native_modules11.getGameCenterGameProfile)();
         setProfileData(data);
         setIsProfileDataLoading(false);
       };
@@ -1040,7 +1034,7 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
       setIsProfileDataLoading(false);
     }
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleGameProfileFlow = async () => {
       if (!canShowBottomSheetOrToast) {
         return;
@@ -1049,7 +1043,7 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
         return;
       }
       isCompletedProfileFlow.current = true;
-      if (!(0, import_native_modules12.isMinVersionSupported)(GAME_CENTER_MIN_VERSION)) {
+      if (!(0, import_native_modules11.isMinVersionSupported)(GAME_CENTER_MIN_VERSION)) {
         updateAppToSupportedMinVersion();
         return;
       }
@@ -1070,10 +1064,10 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
     profileData,
     updateAppToSupportedMinVersion
   ]);
-  if (!(0, import_native_modules12.isMinVersionSupported)(GAME_CENTER_MIN_VERSION)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  if (!(0, import_native_modules11.isMinVersionSupported)(GAME_CENTER_MIN_VERSION)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         import_react_native25.Pressable,
         {
           style: {
@@ -1087,9 +1081,9 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
     ] });
   }
   if (shouldShowLoadingOverlay || isProfileDataRefetching) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         import_react_native25.View,
         {
           style: {
@@ -1098,15 +1092,15 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
             alignItems: "center",
             backgroundColor: "rgba(0, 0, 0, 0.2)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native24.Loader, { size: "large", type: "light" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native24.Loader, { size: "large", type: "light" })
         }
       )
     ] });
   }
   if (shouldShowProfileNotFoundOverlay) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }),
-      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }),
+      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         import_react_native25.Pressable,
         {
           style: {
@@ -1119,7 +1113,7 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native25.View, { style: { flex: 1, position: "relative" }, children }) });
 };
 var overlayStyle = {
   position: "absolute",
@@ -1130,32 +1124,163 @@ var overlayStyle = {
   zIndex: Z_INDEX.PROFILE_OVERLAY
 };
 
+// src/components/NavigationBar/GameWebviewNavigationBar.tsx
+var import_react_native26 = require("@granite-js/react-native");
+var import_react_native27 = require("@toss-design-system/react-native");
+var import_private5 = require("@toss-design-system/react-native/private");
+var import_es_hangul3 = require("es-hangul");
+var import_react12 = require("react");
+var import_react_native28 = require("react-native");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function GameWebviewNavigationBar() {
+  const safeAreaTop = (0, import_private5.useSafeAreaTop)();
+  const { openConfirm } = (0, import_react_native27.useDialog)();
+  const { captureExitLog } = useCaptureExitLog();
+  const global2 = getAppsInTossGlobals();
+  const logging = useNavigationBarLogging();
+  const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
+  const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
+  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
+  const handleGameWebviewClose = (0, import_react12.useCallback)(async () => {
+    const isConfirmed = await openConfirm({
+      title: `${(0, import_es_hangul3.josa)(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+      leftButton: "\uCDE8\uC18C",
+      rightButton: "\uC885\uB8CC\uD558\uAE30",
+      closeOnDimmerClick: true,
+      onEntered: logging.closePopupShow
+    });
+    logging.closePopupCtaClick(isConfirmed);
+    if (isConfirmed) {
+      captureExitLog(Date.now());
+      (0, import_react_native26.closeView)();
+    }
+  }, [captureExitLog, global2.brandDisplayName, logging, openConfirm]);
+  (0, import_react12.useEffect)(() => {
+    const handleAndroidBackEvent = () => {
+      handleGameWebviewClose();
+      return true;
+    };
+    import_react_native28.BackHandler.addEventListener("hardwareBackPress", handleAndroidBackEvent);
+    return () => import_react_native28.BackHandler.removeEventListener("hardwareBackPress", handleAndroidBackEvent);
+  }, [handleGameWebviewClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native27.PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_native28.View,
+      {
+        style: {
+          width: "100%",
+          // TODO: UI관련 스타일 설정은 TDS로 이관
+          height: import_react_native28.Platform.OS === "ios" ? 44 : 54,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          position: "absolute",
+          zIndex: Z_INDEX.CLOSE_BUTTON,
+          marginTop: safeAreaTop,
+          paddingRight: 10
+        },
+        pointerEvents: "box-none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_private5.NavigationRightContent,
+          {
+            fixedRightButton: initialAccessoryButton,
+            onPressDots: openMoreButtonBottomSheet,
+            onPressClose: () => {
+              logging.closeButtonClick();
+              handleGameWebviewClose();
+            },
+            theme: "dark"
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/components/GameWebView.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var GameWebView = (0, import_react11.forwardRef)(function GameWebView2(props, ref) {
-  const [isEntryMessageExited, setIsEntryMessageExited] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => {
-    if (import_react_native26.Platform.OS === "ios") {
-      (0, import_native_modules13.setIosSwipeGestureEnabled)({ isEnabled: false });
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var GameWebView = (0, import_react13.forwardRef)(function GameWebView2(props, ref) {
+  const [isEntryMessageExited, setIsEntryMessageExited] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
+    if (import_react_native29.Platform.OS === "ios") {
+      (0, import_native_modules12.setIosSwipeGestureEnabled)({ isEnabled: false });
       return () => {
-        (0, import_native_modules13.setIosSwipeGestureEnabled)({ isEnabled: true });
+        (0, import_native_modules12.setIosSwipeGestureEnabled)({ isEnabled: true });
       };
     }
     return;
   }, []);
-  (0, import_react11.useEffect)(() => {
-    import_native_modules13.appsInTossEvent.addEventListener("entryMessageExited", {
+  (0, import_react13.useEffect)(() => {
+    import_native_modules12.appsInTossEvent.addEventListener("entryMessageExited", {
       onEvent: () => {
         setIsEntryMessageExited(true);
       }
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: (0, import_native_modules13.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GameProfile, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_webview.WebView, { ref, ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_webview.WebView, { ref, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GameWebviewNavigationBar, {}),
+    (0, import_native_modules12.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GameProfile, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_webview.WebView, { ref, ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_webview.WebView, { ref, ...props })
+  ] });
 });
 
 // src/components/PartnerWebView.tsx
+var import_native_modules14 = require("@apps-in-toss/native-modules");
 var import_react_native_webview2 = require("@granite-js/native/react-native-webview");
-var import_react12 = require("react");
+var import_react16 = require("react");
+var import_react_native33 = require("react-native");
+
+// src/components/NavigationBar/PartnerWebviewNavigationBar.tsx
+var import_react_native30 = require("@granite-js/react-native");
+var import_react_native31 = require("@toss-design-system/react-native");
+var import_private6 = require("@toss-design-system/react-native/private");
+var import_es_hangul4 = require("es-hangul");
+var import_react14 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function PartnerWebviewNavigationBar({ handleBackEvent, handleHomeIconButtonClick }) {
+  const globals = getAppsInTossGlobals();
+  const { captureExitLog } = useCaptureExitLog();
+  const logging = useNavigationBarLogging();
+  const { openConfirm } = (0, import_react_native31.useDialog)();
+  const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
+  const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
+  const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
+  const withBackButton = parsedNavigationBar?.withBackButton ?? true;
+  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
+  const handlePressTitle = (0, import_react14.useCallback)(() => {
+    logging.homeButtonClick();
+    handleHomeIconButtonClick();
+  }, [handleHomeIconButtonClick, logging]);
+  const handleClose = (0, import_react14.useCallback)(async () => {
+    logging.closeButtonClick();
+    const isConfirmed = await openConfirm({
+      title: `${(0, import_es_hangul4.josa)(globals.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+      leftButton: "\uCDE8\uC18C",
+      rightButton: "\uC885\uB8CC\uD558\uAE30",
+      closeOnDimmerClick: true,
+      onEntered: logging.closePopupShow
+    });
+    logging.closePopupCtaClick(isConfirmed);
+    if (isConfirmed) {
+      captureExitLog(Date.now());
+      (0, import_react_native30.closeView)();
+    }
+  }, [captureExitLog, globals.brandDisplayName, logging, openConfirm]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_private6.TopNavigation,
+    {
+      title: globals.brandDisplayName,
+      icon: toIcon(globals.brandIcon),
+      onPressDots: openMoreButtonBottomSheet,
+      contentVisible: true,
+      onPressTitle: withHomeButton ? handlePressTitle : void 0,
+      onPressClose: handleClose,
+      withHome: withHomeButton,
+      fixedRightButton: initialAccessoryButton,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_private6.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_private6.NavigationBackButton, { onPress: handleBackEvent, canGoBack: false }) })
+    }
+  ) });
+}
 
 // src/core/utils/mergeRefs.ts
 function mergeRefs(...refs) {
@@ -1170,22 +1295,186 @@ function mergeRefs(...refs) {
   };
 }
 
+// src/hooks/useWebviewHistoryStack.tsx
+var import_react15 = require("react");
+var INITIAL_STATE = { stack: [], index: -1 };
+function reducer(state, action) {
+  switch (action.type) {
+    case "NAVIGATION_CHANGE": {
+      const { url, canGoForward } = action;
+      if (state.stack.length === 0) {
+        return { stack: [url], index: 0 };
+      }
+      const { stack, index } = state;
+      const cur = stack[index];
+      if (url === cur) {
+        return state;
+      }
+      const prev = index > 0 ? stack[index - 1] : void 0;
+      const next = index < stack.length - 1 ? stack[index + 1] : void 0;
+      if (prev && url === prev && canGoForward) {
+        return { ...state, index: index - 1 };
+      }
+      if (next && url === next) {
+        return { ...state, index: index + 1 };
+      }
+      const base = stack.slice(0, index + 1);
+      const nextStack = [...base, url];
+      return { stack: nextStack, index: nextStack.length - 1 };
+    }
+    default:
+      return state;
+  }
+}
+function useWebViewHistory() {
+  const [state, dispatch] = (0, import_react15.useReducer)(reducer, INITIAL_STATE);
+  const onNavigationStateChange = (0, import_react15.useCallback)(({ url, canGoForward: canGoForward2 }) => {
+    dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
+  }, []);
+  const { canGoBack, canGoForward } = (0, import_react15.useMemo)(() => {
+    const canBack = state.index > 0;
+    const canFwd = state.index >= 0 && state.index < state.stack.length - 1;
+    return { canGoBack: canBack, canGoForward: canFwd };
+  }, [state.index, state.stack.length]);
+  return { onNavigationStateChange, canGoBack, canGoForward };
+}
+
+// src/utils/log.ts
+var import_native_modules13 = require("@apps-in-toss/native-modules");
+var import_react_native32 = require("@granite-js/react-native");
+
+// src/utils/extractDateFromUUIDv7.ts
+var extractDateFromUUIDv7 = (uuid) => {
+  const timestampHex = uuid.split("-").join("").slice(0, 12);
+  const timestamp = Number.parseInt(timestampHex, 16);
+  return new Date(timestamp);
+};
+
+// src/utils/log.ts
+var getGroupId = (url) => {
+  try {
+    const urlObject = new URL(url);
+    return {
+      groupId: urlObject.pathname,
+      search: urlObject.search.startsWith("?") ? urlObject.search.substring(1) : urlObject.search
+    };
+  } catch {
+    return {
+      groupId: "unknown",
+      search: "unknown"
+    };
+  }
+};
+var getReferrer = () => {
+  try {
+    const referrer = new URL((0, import_react_native32.getSchemeUri)());
+    return referrer.searchParams.get("referrer");
+  } catch {
+    return "";
+  }
+};
+var trackScreen = (url) => {
+  const { groupId, search } = getGroupId(url);
+  const log = {
+    log_type: "screen",
+    log_name: `${groupId}::screen`,
+    params: {
+      search,
+      referrer: getReferrer(),
+      deployment_id: env.getDeploymentId(),
+      deployment_timestamp: extractDateFromUUIDv7(env.getDeploymentId()).getTime()
+    }
+  };
+  return (0, import_native_modules13.eventLog)(log);
+};
+
 // src/components/PartnerWebView.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var PartnerWebView = (0, import_react12.forwardRef)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var PartnerWebView = (0, import_react16.forwardRef)(
   function PartnerWebViewScreen(webViewProps, ref) {
-    const webViewRef = (0, import_react12.useRef)(null);
+    const webViewRef = (0, import_react16.useRef)(null);
     const refs = mergeRefs(ref, webViewRef);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_webview2.WebView, { ref: refs, ...webViewProps, style: { flex: 1 } });
+    const { captureExitLog } = useCaptureExitLog();
+    const { canGoBack, onNavigationStateChange } = useWebViewHistory();
+    const historyBackScript = `
+      (function() {
+        window.history.back();
+        true;
+      })();
+    `;
+    const historyHomeScript = `
+      (function() {
+        window.location.href = '/';
+        true;
+      })();
+    `;
+    const handleBackEvent = (0, import_react16.useCallback)(() => {
+      if (canGoBack) {
+        webViewRef.current?.injectJavaScript(historyBackScript);
+      } else {
+        captureExitLog(Date.now());
+        (0, import_native_modules14.closeView)();
+      }
+    }, [canGoBack, captureExitLog, historyBackScript]);
+    (0, import_react16.useEffect)(() => {
+      const handleAndroidBackEvent = () => {
+        if (canGoBack) {
+          webViewRef.current?.injectJavaScript(historyBackScript);
+          return true;
+        } else {
+          captureExitLog(Date.now());
+          return false;
+        }
+      };
+      import_react_native33.BackHandler.addEventListener("hardwareBackPress", handleAndroidBackEvent);
+      return () => import_react_native33.BackHandler.removeEventListener("hardwareBackPress", handleAndroidBackEvent);
+    }, [canGoBack, captureExitLog, historyBackScript]);
+    const handleHomeIconButtonClick = (0, import_react16.useCallback)(() => {
+      webViewRef.current?.injectJavaScript(historyHomeScript);
+    }, [historyHomeScript]);
+    const handleNavigationStateChange = (0, import_react16.useCallback)(
+      (event) => {
+        if (event.url) {
+          trackScreen(event.url);
+        }
+        onNavigationStateChange(event);
+      },
+      [onNavigationStateChange]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        PartnerWebviewNavigationBar,
+        {
+          handleBackEvent,
+          handleHomeIconButtonClick
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react_native_webview2.WebView,
+        {
+          ref: refs,
+          ...webViewProps,
+          style: { flex: 1 },
+          onNavigationStateChange: (event) => {
+            webViewProps?.onNavigationStateChange?.(event);
+            handleNavigationStateChange(event);
+          }
+        }
+      )
+    ] });
   }
 );
 
 // src/bridge-handler/useBridgeHandler.tsx
-var import_react13 = require("react");
+var import_react17 = require("react");
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
       return {
+        ...Object.entries(value).reduce((acc, [key, value2]) => {
+          acc[key] = value2;
+          return acc;
+        }, {}),
         name: value.name,
         message: value.message,
         stack: value.stack,
@@ -1230,8 +1519,8 @@ function useBridgeHandler({
   eventListenerMap,
   injectedJavaScript: originalInjectedJavaScript
 }) {
-  const ref = (0, import_react13.useRef)(null);
-  const injectedJavaScript = (0, import_react13.useMemo)(
+  const ref = (0, import_react17.useRef)(null);
+  const injectedJavaScript = (0, import_react17.useMemo)(
     () => [
       `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
         Object.entries(constantHandlerMap).reduce(
@@ -1258,7 +1547,7 @@ function useBridgeHandler({
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${serializedError});
     `);
   };
-  const $onMessage = (0, import_react13.useCallback)(
+  const $onMessage = (0, import_react17.useCallback)(
     async (e) => {
       onMessage?.(e);
       const data = JSON.parse(e.nativeEvent.data);
@@ -1309,8 +1598,8 @@ function useBridgeHandler({
 }
 
 // src/hooks/useCreateUserAgent.ts
-var import_native_modules14 = require("@apps-in-toss/native-modules");
-var import_react_native27 = require("react-native");
+var import_native_modules15 = require("@apps-in-toss/native-modules");
+var import_react_native34 = require("react-native");
 var FontA11yCategory = {
   Large: "Large",
   xLarge: "xLarge",
@@ -1443,9 +1732,9 @@ function useCreateUserAgent({
   safeArea,
   safeAreaBottomTransparency
 }) {
-  const platform = (0, import_native_modules14.getPlatformOS)();
-  const appVersion = (0, import_native_modules14.getTossAppVersion)();
-  const { fontScale } = (0, import_react_native27.useWindowDimensions)();
+  const platform = (0, import_native_modules15.getPlatformOS)();
+  const appVersion = (0, import_native_modules15.getTossAppVersion)();
+  const { fontScale } = (0, import_react_native34.useWindowDimensions)();
   const platformString = platform === "ios" ? "iPhone" : "Android";
   const fontA11y = mapFontScaleToCategory(fontScale, platform);
   const normalizedFontScale = convertToAndroidStyleScale(fontScale, platform);
@@ -1465,17 +1754,17 @@ function useCreateUserAgent({
 }
 
 // src/hooks/useGeolocation.ts
-var import_native_modules15 = require("@apps-in-toss/native-modules");
-var import_react_native28 = require("@granite-js/react-native");
-var import_react14 = require("react");
+var import_native_modules16 = require("@apps-in-toss/native-modules");
+var import_react_native35 = require("@granite-js/react-native");
+var import_react18 = require("react");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
-  const isVisible = (0, import_react_native28.useVisibility)();
-  const [location, setLocation] = (0, import_react14.useState)(null);
-  (0, import_react14.useEffect)(() => {
+  const isVisible = (0, import_react_native35.useVisibility)();
+  const [location, setLocation] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     if (!isVisible) {
       return;
     }
-    return (0, import_native_modules15.startUpdateLocation)({
+    return (0, import_native_modules16.startUpdateLocation)({
       options: {
         accuracy,
         distanceInterval,
@@ -1488,67 +1777,18 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   return location;
 }
 
-// src/utils/log.ts
-var import_native_modules16 = require("@apps-in-toss/native-modules");
-var import_react_native29 = require("@granite-js/react-native");
-
-// src/utils/extractDateFromUUIDv7.ts
-var extractDateFromUUIDv7 = (uuid) => {
-  const timestampHex = uuid.split("-").join("").slice(0, 12);
-  const timestamp = Number.parseInt(timestampHex, 16);
-  return new Date(timestamp);
-};
-
-// src/utils/log.ts
-var getGroupId = (url) => {
-  try {
-    const urlObject = new URL(url);
-    return {
-      groupId: urlObject.pathname,
-      search: urlObject.search.startsWith("?") ? urlObject.search.substring(1) : urlObject.search
-    };
-  } catch {
-    return {
-      groupId: "unknown",
-      search: "unknown"
-    };
-  }
-};
-var getReferrer = () => {
-  try {
-    const referrer = new URL((0, import_react_native29.getSchemeUri)());
-    return referrer.searchParams.get("referrer");
-  } catch {
-    return "";
-  }
-};
-var trackScreen = (url) => {
-  const { groupId, search } = getGroupId(url);
-  const log = {
-    log_type: "screen",
-    log_name: `${groupId}::screen`,
-    params: {
-      search,
-      referrer: getReferrer(),
-      deployment_id: env.getDeploymentId(),
-      deployment_timestamp: extractDateFromUUIDv7(env.getDeploymentId()).getTime()
-    }
-  };
-  return (0, import_native_modules16.eventLog)(log);
-};
-
 // src/components/WebView.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var operationalEnvironment = appsInTossConstantBridges.getOperationalEnvironment();
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
   partner: PartnerWebView,
-  external: import_react_native31.ExternalWebViewScreen,
+  external: import_react_native37.ExternalWebViewScreen,
   game: GameWebView
 };
 function mergeSchemeQueryParamsInto(url) {
   const baseUrl = new URL(url);
-  const schemeUrl = new URL((0, import_react_native30.getSchemeUri)());
+  const schemeUrl = new URL((0, import_react_native36.getSchemeUri)());
   baseUrl.pathname = schemeUrl.pathname;
   for (const [key, value] of schemeUrl.searchParams.entries()) {
     baseUrl.searchParams.set(key, value);
@@ -1572,14 +1812,12 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
-  const { openConfirm } = (0, import_react_native31.useDialog)();
-  const { captureExitLog } = useCaptureExitLog();
-  const graniteEvent = (0, import_react_native30.useGraniteEvent)();
-  const uri = (0, import_react15.useMemo)(() => getWebViewUri(local), [local]);
-  const top = (0, import_private5.useSafeAreaTop)();
-  const bottom = (0, import_private5.useSafeAreaBottom)();
+  const graniteEvent = (0, import_react_native36.useGraniteEvent)();
+  const uri = (0, import_react19.useMemo)(() => getWebViewUri(local), [local]);
+  const top = (0, import_private7.useSafeAreaTop)();
+  const bottom = (0, import_private7.useSafeAreaBottom)();
   const global2 = getAppsInTossGlobals();
-  const topNavigation = (0, import_private5.useTopNavigation)();
+  const topNavigation = (0, import_private7.useTopNavigation)();
   const disableTextSelectionCSS = `
     (function() {
       const style = document.createElement('style');
@@ -1587,7 +1825,7 @@ function WebView({ type, local, onMessage, ...props }) {
       document.head.appendChild(style);
     })();
   `;
-  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react15.useState)(
+  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react19.useState)(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
@@ -1596,7 +1834,7 @@ function WebView({ type, local, onMessage, ...props }) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     eventListenerMap: {
       ...appsInTossEventBridges,
-      navigationAccessoryEvent: ({ onEvent, onError }) => import_react_native31.tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
+      navigationAccessoryEvent: ({ onEvent, onError }) => import_react_native37.tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
       backEvent: ({ onEvent, onError, options }) => graniteEvent.addEventListener("backEvent", { onEvent, onError, options }),
       entryMessageExited: ({ onEvent, onError }) => import_native_modules17.appsInTossEvent.addEventListener("entryMessageExited", { onEvent, onError }),
       updateLocationEvent: ({ onEvent, onError, options }) => import_native_modules17.appsInTossEvent.addEventListener("updateLocationEvent", { onEvent, onError, options }),
@@ -1609,7 +1847,10 @@ function WebView({ type, local, onMessage, ...props }) {
       showAdMobRewardedAd: import_native_modules17.GoogleAdMob.showAdMobRewardedAd,
       /** AdMobV2 */
       loadAppsInTossAdMob: import_native_modules17.GoogleAdMob.loadAppsInTossAdMob,
-      showAppsInTossAdMob: import_native_modules17.GoogleAdMob.showAppsInTossAdMob
+      showAppsInTossAdMob: import_native_modules17.GoogleAdMob.showAppsInTossAdMob,
+      /** IAP */
+      iapCreateOneTimePurchaseOrder: import_native_modules17.IAP.createOneTimePurchaseOrder,
+      requestOneTimePurchase: import_native_modules17.requestOneTimePurchase
     },
     constantHandlerMap: {
       ...graniteConstantBridges,
@@ -1653,11 +1894,12 @@ function WebView({ type, local, onMessage, ...props }) {
       removeStorageItem: import_native_modules17.Storage.removeItem,
       clearItems: import_native_modules17.Storage.clearItems,
       /** IAP */
-      iapCreateOneTimePurchaseOrder: import_native_modules17.IAP.createOneTimePurchaseOrder,
-      iapGetProductItemList: import_native_modules17.IAP.getProductItemList
+      iapGetProductItemList: import_native_modules17.IAP.getProductItemList,
+      iapCreateOneTimePurchaseOrder: import_native_modules17.iapCreateOneTimePurchaseOrder,
+      processProductGrant: import_native_modules17.processProductGrant
     }
   });
-  const headerPropForExternalWebView = (0, import_react15.useMemo)(() => {
+  const headerPropForExternalWebView = (0, import_react19.useMemo)(() => {
     const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
     const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
     const withBackButton = parsedNavigationBar?.withBackButton ?? true;
@@ -1674,74 +1916,10 @@ function WebView({ type, local, onMessage, ...props }) {
   }, [global2.navigationBar, type]);
   const BaseWebView = WEBVIEW_TYPES[type];
   const webViewDebuggingEnabled = operationalEnvironment === "sandbox";
-  const [canHistoryGoBack, setCanHistoryGoBack] = (0, import_react15.useState)(false);
-  const handleNavigationStateChange = (0, import_react15.useCallback)(
-    (event) => {
-      if (event.url) {
-        trackScreen(event.url);
-      }
-      setCanHistoryGoBack(event.canGoBack);
-    },
-    [setCanHistoryGoBack]
-  );
   const userAgent = useCreateUserAgent({
     colorPreference: "light"
   });
-  const handleGameWebviewClose = (0, import_react15.useCallback)(async () => {
-    const isConfirmed = await openConfirm({
-      title: `${(0, import_es_hangul3.josa)(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
-      leftButton: "\uCDE8\uC18C",
-      rightButton: "\uC885\uB8CC\uD558\uAE30",
-      closeOnDimmerClick: true
-    });
-    if (isConfirmed) {
-      captureExitLog(Date.now());
-      (0, import_react_native30.closeView)();
-    }
-  }, [captureExitLog, openConfirm, global2.brandDisplayName]);
-  const handleBackEvent = (0, import_react15.useCallback)(() => {
-    if (type === "game") {
-      handleGameWebviewClose();
-      return true;
-    }
-    if (canHistoryGoBack) {
-      handler.ref.current?.goBack();
-      return true;
-    } else {
-      return false;
-    }
-  }, [canHistoryGoBack, handleGameWebviewClose, handler.ref, type]);
-  (0, import_react15.useEffect)(() => {
-    import_react_native32.BackHandler.addEventListener("hardwareBackPress", handleBackEvent);
-    return () => import_react_native32.BackHandler.removeEventListener("hardwareBackPress", handleBackEvent);
-  }, [handleBackEvent]);
-  (0, import_react15.useEffect)(() => {
-    return import_native_modules17.appsInTossEvent.addEventListener("homeIconButtonClickEvent", {
-      onEvent: () => {
-        handler.ref?.current?.injectJavaScript(`
-          (function() {
-          window.history.replaceState(null, '', '/');
-          true;
-          })();
-        `);
-      }
-    });
-  }, [handler.ref]);
-  (0, import_react15.useEffect)(() => {
-    return import_native_modules17.appsInTossEvent.addEventListener("backButtonClickEvent", {
-      onEvent: () => {
-        if (type === "game") {
-          handleGameWebviewClose();
-        } else if (canHistoryGoBack) {
-          handler.ref.current?.goBack();
-        } else {
-          captureExitLog(Date.now());
-          (0, import_react_native30.closeView)();
-        }
-      }
-    });
-  }, [handler.ref, canHistoryGoBack, handleGameWebviewClose, captureExitLog, type]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     BaseWebView,
     {
       ref: handler.ref,
@@ -1754,15 +1932,14 @@ function WebView({ type, local, onMessage, ...props }) {
           "User-Agent": userAgent
         }
       },
-      userAgent: import_react_native32.Platform.OS === "ios" ? userAgent : void 0,
+      userAgent: import_react_native38.Platform.OS === "ios" ? userAgent : void 0,
       sharedCookiesEnabled: true,
       webviewDebuggingEnabled: webViewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
       onMessage: handler.onMessage,
-      onNavigationStateChange: handleNavigationStateChange,
       injectedJavaScript: handler.injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript,
-      decelerationRate: import_react_native32.Platform.OS === "ios" ? 1 : void 0,
+      decelerationRate: import_react_native38.Platform.OS === "ios" ? 1 : void 0,
       allowsBackForwardNavigationGestures
     }
   );
@@ -1770,7 +1947,7 @@ function WebView({ type, local, onMessage, ...props }) {
 
 // src/index.ts
 __reExport(src_exports, require("@apps-in-toss/analytics"), module.exports);
-var import_private6 = require("@toss-design-system/react-native/private");
+var import_private8 = require("@toss-design-system/react-native/private");
 __reExport(src_exports, require("@apps-in-toss/native-modules"), module.exports);
 __reExport(src_exports, require("@apps-in-toss/types"), module.exports);
 var Analytics2 = {