@apps-in-toss/framework 1.1.1 → 1.1.2

package/dist/index.js

@@ -149,16 +149,56 @@ function AppUpdate() {
   return /* @__PURE__ */ jsx(Fragment, {});
 }
 
-// src/core/components/BuiltinNavigationBar/index.tsx
+// src/core/hooks/useAppsInTossBridge.ts
 import { appsInTossEvent } from "@apps-in-toss/native-modules";
+import { useBridge } from "@toss-design-system/react-native";
+import { useEffect as useEffect4 } from "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 = useBridge();
+  const appsInTossGlobals = getAppsInTossGlobals();
+  useEffect4(() => {
+    const commonProps = {
+      serviceName: appsInTossGlobals.brandDisplayName,
+      icon: toIcon(appsInTossGlobals.brandIcon),
+      color: appsInTossGlobals.brandPrimaryColor,
+      colorMode: appsInTossGlobals.brandBridgeColorMode
+    };
+    controller.open({
+      ...commonProps,
+      onExited: () => {
+        appsInTossEvent.emit("entryMessageExited", void 0);
+      }
+    });
+  }, []);
+}
+
+// src/components/NavigationBar/RNNavigationBar.tsx
 import { closeView, useBackEventContext, useNavigation } from "@granite-js/react-native";
 import { useDialog as useDialog2 } from "@toss-design-system/react-native";
 import { NavigationBackButton, NavigationLeft, TopNavigation } from "@toss-design-system/react-native/private";
 import { josa } from "es-hangul";
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7 } from "react";
 import { BackHandler } from "react-native";
 
-// src/core/components/BuiltinNavigationBar/useBuiltinNavigationBarLogging.tsx
+// src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
+
+// src/components/NavigationBar/common/useNavigationBarLogging.tsx
 import { INTERNAL__module as INTERNAL__module3 } from "@apps-in-toss/native-modules";
 import { Granite as Granite3 } from "@granite-js/react-native";
 var NAVI_BAR_IMPRESSION_SCHEMA_ID = 1596837;
@@ -171,7 +211,7 @@ 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,
@@ -242,12 +282,29 @@ function useBuiltinNavigationBarLogging() {
   };
 }
 
+// src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+function NavigationBarImpressionArea({
+  children,
+  withHomeButton
+}) {
+  const hasLogged = useRef2(false);
+  const logging = useNavigationBarLogging();
+  useEffect5(() => {
+    if (hasLogged.current === false) {
+      logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
+      hasLogged.current = true;
+    }
+  }, [logging, withHomeButton]);
+  return /* @__PURE__ */ jsx2(Fragment2, { children });
+}
+
 // src/core/hooks/useMoreButtonBottomSheet/index.tsx
 import { INTERNAL__appBridgeHandler, isMinVersionSupported } from "@apps-in-toss/native-modules";
 import { openURL as openURL3 } from "@granite-js/react-native";
 import { BottomSheet, List, ListHeader, ListRow } from "@toss-design-system/react-native";
 import { useAdaptive, useOverlay } from "@toss-design-system/react-native/private";
-import { useEffect as useEffect4, useState } from "react";
+import { useEffect as useEffect6, useState } from "react";
 
 // src/core/hooks/useMoreButtonBottomSheet/useMoreButtonBottomSheetLogging.tsx
 import { INTERNAL__module as INTERNAL__module4 } from "@apps-in-toss/native-modules";
@@ -420,16 +477,8 @@ 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
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
 var APP_BRIDGE_METHOD_NAME = "getMiniAppsSupportContact";
 function useMoreButtonBottomSheet() {
   const globals = getAppsInTossGlobals();
@@ -443,7 +492,7 @@ function useMoreButtonBottomSheet() {
     android: "5.226.0",
     ios: "5.226.0"
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!isSupported) {
       return;
     }
@@ -470,17 +519,17 @@ function useMoreButtonBottomSheet() {
         logging.close();
         close();
       };
-      return /* @__PURE__ */ jsx2(BottomSheetImpressionArea, { children: /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(BottomSheetImpressionArea, { children: /* @__PURE__ */ jsx3(
         BottomSheet.Root,
         {
-          header: /* @__PURE__ */ jsx2(
+          header: /* @__PURE__ */ jsx3(
             ListHeader,
             {
-              title: /* @__PURE__ */ jsx2(ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
+              title: /* @__PURE__ */ jsx3(ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
             }
           ),
           open: isOpen,
-          cta: /* @__PURE__ */ jsx2(
+          cta: /* @__PURE__ */ jsx3(
             BottomSheet.CTA,
             {
               size: "large",
@@ -494,11 +543,11 @@ function useMoreButtonBottomSheet() {
           ),
           onClose: handleClose,
           onExited: exit,
-          children: /* @__PURE__ */ jsx2(List, { rowSeparator: "none", children: itemList.map((item) => {
-            return /* @__PURE__ */ jsx2(
+          children: /* @__PURE__ */ jsx3(List, { rowSeparator: "none", children: itemList.map((item) => {
+            return /* @__PURE__ */ jsx3(
               ListRow,
               {
-                left: /* @__PURE__ */ jsx2(
+                left: /* @__PURE__ */ jsx3(
                   ListRow.Icon,
                   {
                     color: globals.brandPrimaryColor,
@@ -506,7 +555,7 @@ function useMoreButtonBottomSheet() {
                     type: "background"
                   }
                 ),
-                contents: /* @__PURE__ */ jsx2(
+                contents: /* @__PURE__ */ jsx3(
                   ListRow.Texts,
                   {
                     type: "1RowTypeA",
@@ -531,10 +580,10 @@ function useMoreButtonBottomSheet() {
 }
 function BottomSheetImpressionArea({ children }) {
   const logging = useMoreButtonBottomSheetLogging();
-  useEffect4(() => {
+  useEffect6(() => {
     logging.show();
   }, [logging]);
-  return /* @__PURE__ */ jsx2(Fragment2, { children });
+  return /* @__PURE__ */ jsx3(Fragment3, { children });
 }
 
 // src/core/utils/safeParseNavigationBar.ts
@@ -549,47 +598,25 @@ 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
-import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
-function BuiltinNavigationBar() {
+// src/components/NavigationBar/RNNavigationBar.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function RNNavigationBar() {
   const globals = getAppsInTossGlobals();
   const { captureExitLog } = useCaptureExitLog();
-  const logging = useBuiltinNavigationBarLogging();
+  const logging = useNavigationBarLogging();
   const { openConfirm } = useDialog2();
   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 = useBackEventContext();
   const handleBackOrClose = useBackOrCloseNavigation();
   const navigation = useNavigation();
   const handlePressTitle = useCallback3(() => {
     logging.homeButtonClick();
-    if (globals.webViewType != null) {
-      appsInTossEvent.emit("homeIconButtonClickEvent", void 0);
-      return;
-    }
     navigation.navigate("/");
-  }, [logging, globals.webViewType, navigation]);
-  const handleBack = useCallback3(() => {
-    if (globals.webViewType != null) {
-      appsInTossEvent.emit("backButtonClickEvent", void 0);
-      return;
-    }
-    if (backEventContext.hasBackEvent) {
-      backEventContext.onBack();
-      return;
-    }
-    handleBackOrClose();
-  }, [globals.webViewType, backEventContext, handleBackOrClose]);
+  }, [logging, navigation]);
   const handleClose = useCallback3(async () => {
     logging.closeButtonClick();
     const isConfirmed = await openConfirm({
@@ -605,26 +632,30 @@ function BuiltinNavigationBar() {
       closeView();
     }
   }, [captureExitLog, globals.brandDisplayName, logging, openConfirm]);
-  const handleBackEvent = useCallback3(() => {
-    handleBack();
-    return true;
-  }, [handleBack]);
-  useEffect5(() => {
-    BackHandler.addEventListener("hardwareBackPress", handleBackEvent);
+  const handleBack = useCallback3(() => {
+    if (backEventContext.hasBackEvent) {
+      backEventContext.onBack();
+      return;
+    }
+    handleBackOrClose();
+  }, [backEventContext, handleBackOrClose]);
+  useEffect7(() => {
+    const handleAndroidBackEvent = () => {
+      handleBack();
+      return true;
+    };
+    BackHandler.addEventListener("hardwareBackPress", handleAndroidBackEvent);
     return () => {
-      BackHandler.removeEventListener("hardwareBackPress", handleBackEvent);
+      BackHandler.removeEventListener("hardwareBackPress", handleAndroidBackEvent);
     };
-  }, [handleBackEvent]);
-  if (isExternalWebView) {
-    return /* @__PURE__ */ jsx3(Fragment3, {});
-  }
-  return /* @__PURE__ */ jsx3(BuiltinNavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx3(
+  }, [handleBack]);
+  return /* @__PURE__ */ jsx4(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx4(
     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,
@@ -633,7 +664,7 @@ function BuiltinNavigationBar() {
         icon: initialAccessoryButton.icon,
         id: initialAccessoryButton.id
       } : void 0,
-      children: isGameWebView === false ? /* @__PURE__ */ jsx3(NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ jsx3(NavigationBackButton, { onPress: handleBack, canGoBack: false }) }) : null
+      children: /* @__PURE__ */ jsx4(NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ jsx4(NavigationBackButton, { onPress: handleBack, canGoBack: false }) })
     }
   ) });
 }
@@ -647,69 +678,32 @@ function useBackOrCloseNavigation() {
       captureExitLog(Date.now());
       closeView();
     }
-  }, [navigation]);
-}
-function BuiltinNavigationBarImpressionArea({
-  children,
-  withHomeButton
-}) {
-  const hasLogged = useRef2(false);
-  const logging = useBuiltinNavigationBarLogging();
-  useEffect5(() => {
-    if (hasLogged.current === false) {
-      logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
-      hasLogged.current = true;
-    }
-  }, []);
-  return /* @__PURE__ */ jsx3(Fragment3, { children });
-}
-
-// src/core/hooks/useAppsInTossBridge.ts
-import { appsInTossEvent as appsInTossEvent2 } from "@apps-in-toss/native-modules";
-import { useBridge } from "@toss-design-system/react-native";
-import { useEffect as useEffect6 } from "react";
-function useAppsInTossBridge() {
-  const controller = useBridge();
-  const appsInTossGlobals = getAppsInTossGlobals();
-  useEffect6(() => {
-    const commonProps = {
-      serviceName: appsInTossGlobals.brandDisplayName,
-      icon: toIcon(appsInTossGlobals.brandIcon),
-      color: appsInTossGlobals.brandPrimaryColor,
-      colorMode: appsInTossGlobals.brandBridgeColorMode
-    };
-    controller.open({
-      ...commonProps,
-      onExited: () => {
-        appsInTossEvent2.emit("entryMessageExited", void 0);
-      }
-    });
-  }, []);
+  }, [captureExitLog, navigation]);
 }
 
 // src/core/registerApp.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx5, jsxs } from "react/jsx-runtime";
 function AppsInTossContainer(Container, { children, ...initialProps }) {
   if (!isMinVersionSupported2({
     android: "5.220.0",
     ios: "5.221.0"
   })) {
     return /* @__PURE__ */ jsxs(Fragment4, { children: [
-      /* @__PURE__ */ jsx4(AppEvent.Entry, {}),
-      /* @__PURE__ */ jsx4(AppEvent.System, { ...initialProps }),
-      /* @__PURE__ */ jsx4(AppUpdate, {})
+      /* @__PURE__ */ jsx5(AppEvent.Entry, {}),
+      /* @__PURE__ */ jsx5(AppEvent.System, { ...initialProps }),
+      /* @__PURE__ */ jsx5(AppUpdate, {})
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment4, { children: [
-    /* @__PURE__ */ jsx4(AppEvent.StayTime, {}),
-    /* @__PURE__ */ jsx4(AppEvent.Entry, {}),
-    /* @__PURE__ */ jsx4(AppEvent.System, { ...initialProps }),
-    /* @__PURE__ */ jsx4(Container, { ...initialProps, children: /* @__PURE__ */ jsx4(TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ jsx4(TDSContainer, { ...initialProps, children }) }) })
+    /* @__PURE__ */ jsx5(AppEvent.StayTime, {}),
+    /* @__PURE__ */ jsx5(AppEvent.Entry, {}),
+    /* @__PURE__ */ jsx5(AppEvent.System, { ...initialProps }),
+    /* @__PURE__ */ jsx5(Container, { ...initialProps, children: /* @__PURE__ */ jsx5(TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ jsx5(TDSContainer, { ...initialProps, children }) }) })
   ] });
 }
 function TDSContainer({ children }) {
   useAppsInTossBridge();
-  return /* @__PURE__ */ jsx4(Fragment4, { children });
+  return /* @__PURE__ */ jsx5(Fragment4, { children });
 }
 function registerApp(container, { context, analytics }) {
   const appName = getAppName();
@@ -735,8 +729,9 @@ function registerApp(container, { context, analytics }) {
   return global.Page;
 }
 function AppsInTossScreenContainer({ children }) {
+  const isReactNativeService = getAppsInTossGlobals().webViewType == null;
   return /* @__PURE__ */ jsxs(Analytics.Screen, { children: [
-    /* @__PURE__ */ jsx4(BuiltinNavigationBar, {}),
+    isReactNativeService && /* @__PURE__ */ jsx5(RNNavigationBar, {}),
     children
   ] });
 }
@@ -755,39 +750,34 @@ var AppsInToss = {
 };
 
 // src/components/WebView.tsx
-import { GoogleAdMob, IAP, Storage, AppsInTossModule, appsInTossEvent as appsInTossEvent4 } from "@apps-in-toss/native-modules";
+import { GoogleAdMob, IAP, Storage, AppsInTossModule, appsInTossEvent as appsInTossEvent5 } from "@apps-in-toss/native-modules";
 import * as appsInTossAsyncBridges from "@apps-in-toss/native-modules/async-bridges";
 import * as appsInTossConstantBridges from "@apps-in-toss/native-modules/constant-bridges";
 import * as appsInTossEventBridges from "@apps-in-toss/native-modules/event-bridges";
-import { closeView as closeView3, getSchemeUri as getSchemeUri5, useGraniteEvent } from "@granite-js/react-native";
+import { getSchemeUri as getSchemeUri5, useGraniteEvent } from "@granite-js/react-native";
 import * as graniteAsyncBridges from "@granite-js/react-native/async-bridges";
 import * as graniteConstantBridges from "@granite-js/react-native/constant-bridges";
-import {
-  ExternalWebViewScreen,
-  tdsEvent,
-  useDialog as useDialog4
-} from "@toss-design-system/react-native";
-import { useSafeAreaBottom, useSafeAreaTop, useTopNavigation } from "@toss-design-system/react-native/private";
-import { josa as josa3 } from "es-hangul";
-import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo3, useState as useState5 } from "react";
-import { BackHandler as BackHandler2, Platform as Platform3 } from "react-native";
+import { ExternalWebViewScreen, tdsEvent } from "@toss-design-system/react-native";
+import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop2, useTopNavigation } from "@toss-design-system/react-native/private";
+import { useCallback as useCallback9, useMemo as useMemo3, useState as useState5 } from "react";
+import { Platform as Platform4 } from "react-native";
 
 // src/components/GameWebView.tsx
-import { setIosSwipeGestureEnabled as setIosSwipeGestureEnabled2, appsInTossEvent as appsInTossEvent3, getOperationalEnvironment } from "@apps-in-toss/native-modules";
+import { setIosSwipeGestureEnabled as setIosSwipeGestureEnabled2, appsInTossEvent as appsInTossEvent2, getOperationalEnvironment } from "@apps-in-toss/native-modules";
 import {
   WebView as PlainWebView
 } from "@granite-js/native/react-native-webview";
-import { forwardRef, useEffect as useEffect8, useState as useState3 } from "react";
-import { Platform as Platform2 } from "react-native";
+import { forwardRef, useEffect as useEffect10, useState as useState3 } from "react";
+import { Platform as Platform3 } from "react-native";
 
 // src/components/GameProfile.tsx
 import { getGameCenterGameProfile as getGameCenterGameProfile2, isMinVersionSupported as isMinVersionSupported3 } from "@apps-in-toss/native-modules";
 import { Loader } from "@toss-design-system/react-native";
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { Pressable, View } from "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"
@@ -803,13 +793,13 @@ import { useCallback as useCallback4, useRef as useRef3, useState as useState2 }
 // src/components/GameProfileToast.tsx
 import { Asset, Toast } from "@toss-design-system/react-native";
 import { AdaptiveColorProvider, ColorPreferenceProvider, useOverlay as useOverlay2 } from "@toss-design-system/react-native/private";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var useGameProfileToast = () => {
   const overlay = useOverlay2();
   const openGameProfileToast = (nickname, profileImageUri) => {
     return new Promise((resolve) => {
       overlay.open(({ isOpen, close, exit }) => {
-        return /* @__PURE__ */ jsx5(ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ jsx5(AdaptiveColorProvider, { children: /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx6(ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ jsx6(AdaptiveColorProvider, { children: /* @__PURE__ */ jsx6(
           Toast,
           {
             open: isOpen,
@@ -820,7 +810,7 @@ var useGameProfileToast = () => {
             onExited: exit,
             position: "top",
             text: `${nickname}\uB2D8 \uBC18\uAC00\uC6CC\uC694!`,
-            icon: /* @__PURE__ */ jsx5(
+            icon: /* @__PURE__ */ jsx6(
               Asset.Image,
               {
                 style: { borderRadius: 64, overflow: "hidden" },
@@ -975,7 +965,7 @@ var Z_INDEX = {
 };
 
 // src/components/GameProfile.tsx
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var GameProfile = ({ children, isReadyForProfileUI }) => {
   const {
     profileData,
@@ -991,7 +981,7 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
     openErrorAlert,
     openGameProfileToast
   } = useGameCenterProfile(isReadyForProfileUI);
-  useEffect7(() => {
+  useEffect8(() => {
     try {
       const getProfileData = async () => {
         const data = await getGameCenterGameProfile2();
@@ -1004,7 +994,7 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
       setIsProfileDataLoading(false);
     }
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleGameProfileFlow = async () => {
       if (!canShowBottomSheetOrToast) {
         return;
@@ -1036,8 +1026,8 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
   ]);
   if (!isMinVersionSupported3(GAME_CENTER_MIN_VERSION)) {
     return /* @__PURE__ */ jsxs2(Fragment5, { children: [
-      /* @__PURE__ */ jsx6(View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ jsx7(
         Pressable,
         {
           style: {
@@ -1052,8 +1042,8 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
   }
   if (shouldShowLoadingOverlay || isProfileDataRefetching) {
     return /* @__PURE__ */ jsxs2(Fragment5, { children: [
-      /* @__PURE__ */ jsx6(View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ jsx7(
         View,
         {
           style: {
@@ -1062,15 +1052,15 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
             alignItems: "center",
             backgroundColor: "rgba(0, 0, 0, 0.2)"
           },
-          children: /* @__PURE__ */ jsx6(Loader, { size: "large", type: "light" })
+          children: /* @__PURE__ */ jsx7(Loader, { size: "large", type: "light" })
         }
       )
     ] });
   }
   if (shouldShowProfileNotFoundOverlay) {
     return /* @__PURE__ */ jsxs2(Fragment5, { children: [
-      /* @__PURE__ */ jsx6(View, { style: { flex: 1, position: "relative" }, children }),
-      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(View, { style: { flex: 1, position: "relative" }, children }),
+      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ jsx7(
         Pressable,
         {
           style: {
@@ -1083,7 +1073,7 @@ var GameProfile = ({ children, isReadyForProfileUI }) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsx6(Fragment5, { children: /* @__PURE__ */ jsx6(View, { style: { flex: 1, position: "relative" }, children }) });
+  return /* @__PURE__ */ jsx7(Fragment5, { children: /* @__PURE__ */ jsx7(View, { style: { flex: 1, position: "relative" }, children }) });
 };
 var overlayStyle = {
   position: "absolute",
@@ -1094,12 +1084,86 @@ var overlayStyle = {
   zIndex: Z_INDEX.PROFILE_OVERLAY
 };
 
+// src/components/NavigationBar/GameWebviewNavigationBar.tsx
+import { closeView as closeView3 } from "@granite-js/react-native";
+import { PageNavbar, useDialog as useDialog4 } from "@toss-design-system/react-native";
+import { NavigationRightContent, useSafeAreaTop } from "@toss-design-system/react-native/private";
+import { josa as josa3 } from "es-hangul";
+import { useCallback as useCallback5, useEffect as useEffect9 } from "react";
+import { BackHandler as BackHandler2, Platform as Platform2, View as View2 } from "react-native";
+import { Fragment as Fragment6, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function GameWebviewNavigationBar() {
+  const safeAreaTop = useSafeAreaTop();
+  const { openConfirm } = useDialog4();
+  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 = useCallback5(async () => {
+    const isConfirmed = await openConfirm({
+      title: `${josa3(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());
+      closeView3();
+    }
+  }, [captureExitLog, global2.brandDisplayName, logging, openConfirm]);
+  useEffect9(() => {
+    const handleAndroidBackEvent = () => {
+      handleGameWebviewClose();
+      return true;
+    };
+    BackHandler2.addEventListener("hardwareBackPress", handleAndroidBackEvent);
+    return () => BackHandler2.removeEventListener("hardwareBackPress", handleAndroidBackEvent);
+  }, [handleGameWebviewClose]);
+  return /* @__PURE__ */ jsxs3(Fragment6, { children: [
+    /* @__PURE__ */ jsx8(PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ jsx8(
+      View2,
+      {
+        style: {
+          width: "100%",
+          // TODO: UI관련 스타일 설정은 TDS로 이관
+          height: Platform2.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__ */ jsx8(
+          NavigationRightContent,
+          {
+            fixedRightButton: initialAccessoryButton,
+            onPressDots: openMoreButtonBottomSheet,
+            onPressClose: () => {
+              logging.closeButtonClick();
+              handleGameWebviewClose();
+            },
+            theme: "dark"
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/components/GameWebView.tsx
-import { Fragment as Fragment6, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var GameWebView = forwardRef(function GameWebView2(props, ref) {
   const [isEntryMessageExited, setIsEntryMessageExited] = useState3(false);
-  useEffect8(() => {
-    if (Platform2.OS === "ios") {
+  useEffect10(() => {
+    if (Platform3.OS === "ios") {
       setIosSwipeGestureEnabled2({ isEnabled: false });
       return () => {
         setIosSwipeGestureEnabled2({ isEnabled: true });
@@ -1107,21 +1171,79 @@ var GameWebView = forwardRef(function GameWebView2(props, ref) {
     }
     return;
   }, []);
-  useEffect8(() => {
-    appsInTossEvent3.addEventListener("entryMessageExited", {
+  useEffect10(() => {
+    appsInTossEvent2.addEventListener("entryMessageExited", {
       onEvent: () => {
         setIsEntryMessageExited(true);
       }
     });
   }, []);
-  return /* @__PURE__ */ jsx7(Fragment6, { children: getOperationalEnvironment() === "toss" ? /* @__PURE__ */ jsx7(GameProfile, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ jsx7(PlainWebView, { ref, ...props }) }) : /* @__PURE__ */ jsx7(PlainWebView, { ref, ...props }) });
+  return /* @__PURE__ */ jsxs4(Fragment7, { children: [
+    /* @__PURE__ */ jsx9(GameWebviewNavigationBar, {}),
+    getOperationalEnvironment() === "toss" ? /* @__PURE__ */ jsx9(GameProfile, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ jsx9(PlainWebView, { ref, ...props }) }) : /* @__PURE__ */ jsx9(PlainWebView, { ref, ...props })
+  ] });
 });
 
 // src/components/PartnerWebView.tsx
+import { appsInTossEvent as appsInTossEvent4, closeView as closeView5 } from "@apps-in-toss/native-modules";
 import {
   WebView as PlainWebView2
 } from "@granite-js/native/react-native-webview";
-import { forwardRef as forwardRef2, useRef as useRef4 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback7, useEffect as useEffect11, useRef as useRef4 } from "react";
+import { BackHandler as BackHandler3 } from "react-native";
+
+// src/components/NavigationBar/PartnerWebviewNavigationBar.tsx
+import { appsInTossEvent as appsInTossEvent3 } from "@apps-in-toss/native-modules";
+import { closeView as closeView4 } from "@granite-js/react-native";
+import { useDialog as useDialog5 } from "@toss-design-system/react-native";
+import { NavigationBackButton as NavigationBackButton2, NavigationLeft as NavigationLeft2, TopNavigation as TopNavigation2 } from "@toss-design-system/react-native/private";
+import { josa as josa4 } from "es-hangul";
+import { useCallback as useCallback6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function PartnerWebviewNavigationBar({ handleBackEvent }) {
+  const globals = getAppsInTossGlobals();
+  const { captureExitLog } = useCaptureExitLog();
+  const logging = useNavigationBarLogging();
+  const { openConfirm } = useDialog5();
+  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 = useCallback6(() => {
+    logging.homeButtonClick();
+    appsInTossEvent3.emit("homeIconButtonClickEvent", void 0);
+  }, [logging]);
+  const handleClose = useCallback6(async () => {
+    logging.closeButtonClick();
+    const isConfirmed = await openConfirm({
+      title: `${josa4(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());
+      closeView4();
+    }
+  }, [captureExitLog, globals.brandDisplayName, logging, openConfirm]);
+  return /* @__PURE__ */ jsx10(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx10(
+    TopNavigation2,
+    {
+      title: globals.brandDisplayName,
+      icon: toIcon(globals.brandIcon),
+      onPressDots: openMoreButtonBottomSheet,
+      contentVisible: true,
+      onPressTitle: withHomeButton ? handlePressTitle : void 0,
+      onPressClose: handleClose,
+      withHome: withHomeButton,
+      fixedRightButton: initialAccessoryButton,
+      children: /* @__PURE__ */ jsx10(NavigationLeft2, { visible: withBackButton, children: /* @__PURE__ */ jsx10(NavigationBackButton2, { onPress: handleBackEvent, canGoBack: false }) })
+    }
+  ) });
+}
 
 // src/core/utils/mergeRefs.ts
 function mergeRefs(...refs) {
@@ -1137,17 +1259,52 @@ function mergeRefs(...refs) {
 }
 
 // src/components/PartnerWebView.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var PartnerWebView = forwardRef2(
-  function PartnerWebViewScreen(webViewProps, ref) {
-    const webViewRef = useRef4(null);
-    const refs = mergeRefs(ref, webViewRef);
-    return /* @__PURE__ */ jsx8(PlainWebView2, { ref: refs, ...webViewProps, style: { flex: 1 } });
-  }
-);
+import { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var PartnerWebView = forwardRef2(function PartnerWebViewScreen({ canHistoryGoBack, ...webViewProps }, ref) {
+  const webViewRef = useRef4(null);
+  const refs = mergeRefs(ref, webViewRef);
+  const { captureExitLog } = useCaptureExitLog();
+  const handleBackEvent = useCallback7(() => {
+    if (canHistoryGoBack) {
+      webViewRef.current?.goBack();
+    } else {
+      captureExitLog(Date.now());
+      closeView5();
+    }
+  }, [canHistoryGoBack, captureExitLog]);
+  useEffect11(() => {
+    const handleAndroidBackEvent = () => {
+      if (canHistoryGoBack) {
+        webViewRef.current?.goBack();
+        return true;
+      } else {
+        captureExitLog(Date.now());
+        return false;
+      }
+    };
+    BackHandler3.addEventListener("hardwareBackPress", handleAndroidBackEvent);
+    return () => BackHandler3.removeEventListener("hardwareBackPress", handleAndroidBackEvent);
+  }, [canHistoryGoBack, captureExitLog]);
+  useEffect11(() => {
+    return appsInTossEvent4.addEventListener("homeIconButtonClickEvent", {
+      onEvent: () => {
+        webViewRef.current?.injectJavaScript(`
+          (function() {
+          window.history.replaceState(null, '', '/');
+          true;
+          })();
+        `);
+      }
+    });
+  }, [webViewRef]);
+  return /* @__PURE__ */ jsxs5(Fragment8, { children: [
+    /* @__PURE__ */ jsx11(PartnerWebviewNavigationBar, { handleBackEvent }),
+    /* @__PURE__ */ jsx11(PlainWebView2, { ref: refs, ...webViewProps, style: { flex: 1 } })
+  ] });
+});
 
 // src/bridge-handler/useBridgeHandler.tsx
-import { useCallback as useCallback5, useMemo as useMemo2, useRef as useRef5 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo2, useRef as useRef5 } from "react";
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -1224,7 +1381,7 @@ function useBridgeHandler({
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${serializedError});
     `);
   };
-  const $onMessage = useCallback5(
+  const $onMessage = useCallback8(
     async (e) => {
       onMessage?.(e);
       const data = JSON.parse(e.nativeEvent.data);
@@ -1433,11 +1590,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 import { startUpdateLocation } from "@apps-in-toss/native-modules";
 import { useVisibility as useVisibility3 } from "@granite-js/react-native";
-import { useEffect as useEffect9, useState as useState4 } from "react";
+import { useEffect as useEffect12, useState as useState4 } from "react";
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = useVisibility3();
   const [location, setLocation] = useState4(null);
-  useEffect9(() => {
+  useEffect12(() => {
     if (!isVisible) {
       return;
     }
@@ -1504,7 +1661,7 @@ var trackScreen = (url) => {
 };
 
 // src/components/WebView.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var operationalEnvironment = appsInTossConstantBridges.getOperationalEnvironment();
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
@@ -1538,11 +1695,9 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
-  const { openConfirm } = useDialog4();
-  const { captureExitLog } = useCaptureExitLog();
   const graniteEvent = useGraniteEvent();
   const uri = useMemo3(() => getWebViewUri(local), [local]);
-  const top = useSafeAreaTop();
+  const top = useSafeAreaTop2();
   const bottom = useSafeAreaBottom();
   const global2 = getAppsInTossGlobals();
   const topNavigation = useTopNavigation();
@@ -1564,10 +1719,10 @@ function WebView({ type, local, onMessage, ...props }) {
       ...appsInTossEventBridges,
       navigationAccessoryEvent: ({ onEvent, onError }) => tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
       backEvent: ({ onEvent, onError, options }) => graniteEvent.addEventListener("backEvent", { onEvent, onError, options }),
-      entryMessageExited: ({ onEvent, onError }) => appsInTossEvent4.addEventListener("entryMessageExited", { onEvent, onError }),
-      updateLocationEvent: ({ onEvent, onError, options }) => appsInTossEvent4.addEventListener("updateLocationEvent", { onEvent, onError, options }),
+      entryMessageExited: ({ onEvent, onError }) => appsInTossEvent5.addEventListener("entryMessageExited", { onEvent, onError }),
+      updateLocationEvent: ({ onEvent, onError, options }) => appsInTossEvent5.addEventListener("updateLocationEvent", { onEvent, onError, options }),
       /** @internal */
-      appBridgeCallbackEvent: ({ onEvent, onError, options }) => appsInTossEvent4.addEventListener("appBridgeCallbackEvent", { onEvent, onError, options }),
+      appBridgeCallbackEvent: ({ onEvent, onError, options }) => appsInTossEvent5.addEventListener("appBridgeCallbackEvent", { onEvent, onError, options }),
       /** AdMob */
       loadAdMobInterstitialAd: GoogleAdMob.loadAdMobInterstitialAd,
       showAdMobInterstitialAd: GoogleAdMob.showAdMobInterstitialAd,
@@ -1641,7 +1796,7 @@ function WebView({ type, local, onMessage, ...props }) {
   const BaseWebView = WEBVIEW_TYPES[type];
   const webViewDebuggingEnabled = operationalEnvironment === "sandbox";
   const [canHistoryGoBack, setCanHistoryGoBack] = useState5(false);
-  const handleNavigationStateChange = useCallback6(
+  const handleNavigationStateChange = useCallback9(
     (event) => {
       if (event.url) {
         trackScreen(event.url);
@@ -1653,61 +1808,7 @@ function WebView({ type, local, onMessage, ...props }) {
   const userAgent = useCreateUserAgent({
     colorPreference: "light"
   });
-  const handleGameWebviewClose = useCallback6(async () => {
-    const isConfirmed = await openConfirm({
-      title: `${josa3(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
-      leftButton: "\uCDE8\uC18C",
-      rightButton: "\uC885\uB8CC\uD558\uAE30",
-      closeOnDimmerClick: true
-    });
-    if (isConfirmed) {
-      captureExitLog(Date.now());
-      closeView3();
-    }
-  }, [captureExitLog, openConfirm, global2.brandDisplayName]);
-  const handleBackEvent = useCallback6(() => {
-    if (type === "game") {
-      handleGameWebviewClose();
-      return true;
-    }
-    if (canHistoryGoBack) {
-      handler.ref.current?.goBack();
-      return true;
-    } else {
-      return false;
-    }
-  }, [canHistoryGoBack, handleGameWebviewClose, handler.ref, type]);
-  useEffect10(() => {
-    BackHandler2.addEventListener("hardwareBackPress", handleBackEvent);
-    return () => BackHandler2.removeEventListener("hardwareBackPress", handleBackEvent);
-  }, [handleBackEvent]);
-  useEffect10(() => {
-    return appsInTossEvent4.addEventListener("homeIconButtonClickEvent", {
-      onEvent: () => {
-        handler.ref?.current?.injectJavaScript(`
-          (function() {
-          window.history.replaceState(null, '', '/');
-          true;
-          })();
-        `);
-      }
-    });
-  }, [handler.ref]);
-  useEffect10(() => {
-    return appsInTossEvent4.addEventListener("backButtonClickEvent", {
-      onEvent: () => {
-        if (type === "game") {
-          handleGameWebviewClose();
-        } else if (canHistoryGoBack) {
-          handler.ref.current?.goBack();
-        } else {
-          captureExitLog(Date.now());
-          closeView3();
-        }
-      }
-    });
-  }, [handler.ref, canHistoryGoBack, handleGameWebviewClose, captureExitLog, type]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     BaseWebView,
     {
       ref: handler.ref,
@@ -1720,15 +1821,16 @@ function WebView({ type, local, onMessage, ...props }) {
           "User-Agent": userAgent
         }
       },
-      userAgent: Platform3.OS === "ios" ? userAgent : void 0,
+      userAgent: Platform4.OS === "ios" ? userAgent : void 0,
       sharedCookiesEnabled: true,
       webviewDebuggingEnabled: webViewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
       onMessage: handler.onMessage,
+      canHistoryGoBack,
       onNavigationStateChange: handleNavigationStateChange,
       injectedJavaScript: handler.injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript,
-      decelerationRate: Platform3.OS === "ios" ? 1 : void 0,
+      decelerationRate: Platform4.OS === "ios" ? 1 : void 0,
       allowsBackForwardNavigationGestures
     }
   );