@apps-in-toss/framework 0.0.0-dev.1761276327591 → 0.0.0-dev.1762248930136

package/dist/index.cjs

@@ -40,7 +40,7 @@ __export(src_exports, {
   useCreateUserAgent: () => useCreateUserAgent,
   useGeolocation: () => useGeolocation,
   useOverlay: () => import_private10.useOverlay,
-  useTopNavigation: () => import_private10.useTopNavigation,
+  useTopNavigation: () => useTopNavigation,
   useWaitForReturnNavigator: () => useWaitForReturnNavigator
 });
 module.exports = __toCommonJS(src_exports);
@@ -194,9 +194,7 @@ function AppUpdate() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
 }
 
-// src/core/hooks/useAppsInTossBridge.ts
-var import_native_modules3 = require("@apps-in-toss/native-modules");
-var import_tds_react_native = require("@toss/tds-react-native");
+// src/core/context/NavigationBarContext.tsx
 var import_react5 = require("react");
 
 // src/core/utils/getAppsInTossGlobals.ts
@@ -207,6 +205,54 @@ function getAppsInTossGlobals() {
   return global.__appsInToss;
 }
 
+// src/core/utils/safeParseNavigationBar.ts
+function safeParseNavigationBar(navigationBar) {
+  if (typeof navigationBar === "object") {
+    return navigationBar;
+  }
+  try {
+    return JSON.parse(navigationBar);
+  } catch {
+    return null;
+  }
+}
+
+// src/core/context/NavigationBarContext.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NavigationBarContext = (0, import_react5.createContext)(null);
+function NavigationBarContextProvider({ children }) {
+  const globals = getAppsInTossGlobals();
+  const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
+  const [navigationRightButton, setNavigationRightButton] = (0, import_react5.useState)(
+    parsedNavigationBar?.initialAccessoryButton
+  );
+  const addNavigationRightButton = (button) => {
+    setNavigationRightButton(button);
+  };
+  const removeNavigationRightButton = () => {
+    setNavigationRightButton(void 0);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    NavigationBarContext.Provider,
+    {
+      value: { navigationRightButton, addNavigationRightButton, removeNavigationRightButton },
+      children
+    }
+  );
+}
+function useNavigationBarContext() {
+  const context = (0, import_react5.useContext)(NavigationBarContext);
+  if (context == null) {
+    throw Error("useNavigationBarContext must be used within NavigationBarContextProvider");
+  }
+  return context;
+}
+
+// src/core/hooks/useAppsInTossBridge.ts
+var import_native_modules3 = require("@apps-in-toss/native-modules");
+var import_tds_react_native = require("@toss/tds-react-native");
+var import_react6 = require("react");
+
 // src/core/utils/toIcon.ts
 function toIcon(source) {
   return source.startsWith("http") ? { source: { uri: source } } : { name: source };
@@ -216,7 +262,7 @@ function toIcon(source) {
 function useAppsInTossBridge() {
   const controller = (0, import_tds_react_native.useBridge)();
   const appsInTossGlobals = getAppsInTossGlobals();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const isGameApp = appsInTossGlobals.webViewType === "game" || appsInTossGlobals.appType === "game";
     controller.open({
       serviceName: appsInTossGlobals.brandDisplayName,
@@ -232,7 +278,7 @@ function useAppsInTossBridge() {
 
 // src/components/RNAppContainer.tsx
 var import_native_modules12 = require("@apps-in-toss/native-modules");
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_native20 = require("react-native");
 
 // src/components/GameInitializer.tsx
@@ -240,7 +286,7 @@ var import_native_modules7 = require("@apps-in-toss/native-modules");
 var import_react_native10 = require("@granite-js/react-native");
 var import_tds_react_native5 = require("@toss/tds-react-native");
 var import_es_hangul = require("es-hangul");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_native11 = require("react-native");
 
 // src/constant/game-center.ts
@@ -254,7 +300,7 @@ var GAME_MIN_VERSION = {
 var import_native_modules4 = require("@apps-in-toss/native-modules");
 var import_react_native7 = require("@granite-js/react-native");
 var import_tds_react_native2 = require("@toss/tds-react-native");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/utils/market.ts
 var import_react_native6 = require("react-native");
@@ -268,7 +314,7 @@ var getMarketLink = () => {
 function useAppUpdateDialog() {
   const { openConfirm } = (0, import_tds_react_native2.useDialog)();
   const logging = useAppUpdateDialogLogging();
-  const openAppUpdateDialog = (0, import_react6.useCallback)(
+  const openAppUpdateDialog = (0, import_react7.useCallback)(
     async ({
       title,
       description,
@@ -348,12 +394,12 @@ function useAppUpdateDialogLogging() {
 
 // src/hooks/useGameCenterProfile.ts
 var import_native_modules6 = require("@apps-in-toss/native-modules");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/hooks/useErrorAlert.ts
 var import_react_native8 = require("@granite-js/react-native");
 var import_tds_react_native3 = require("@toss/tds-react-native");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/utils/error.ts
 var DEFAULT_ERROR = {
@@ -364,7 +410,7 @@ var DEFAULT_ERROR = {
 // src/hooks/useErrorAlert.ts
 var useErrorAlert = () => {
   const { openAlert } = (0, import_tds_react_native3.useDialog)();
-  const openErrorAlert = (0, import_react7.useCallback)(async () => {
+  const openErrorAlert = (0, import_react8.useCallback)(async () => {
     await openAlert({
       title: DEFAULT_ERROR.title,
       description: DEFAULT_ERROR.description
@@ -375,7 +421,7 @@ var useErrorAlert = () => {
 };
 
 // src/hooks/useTransparentWebview.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/utils/openTransparentWebView.ts
 var import_react_native9 = require("@granite-js/react-native");
@@ -417,9 +463,9 @@ var openTransparentWebView = ({
 
 // src/hooks/useTransparentWebview.tsx
 var useTransparentWebview = () => {
-  const [isWebviewLoading, setIsWebviewLoading] = (0, import_react8.useState)(false);
+  const [isWebviewLoading, setIsWebviewLoading] = (0, import_react9.useState)(false);
   const { open: openErrorAlert } = useErrorAlert();
-  const _openTransparentWebview = (0, import_react8.useCallback)(
+  const _openTransparentWebview = (0, import_react9.useCallback)(
     ({ webUrl, onClose, onError }) => {
       if (isWebviewLoading) {
         return;
@@ -453,15 +499,15 @@ var useTransparentWebview = () => {
 // src/components/GameProfileToast.tsx
 var import_tds_react_native4 = require("@toss/tds-react-native");
 var import_private2 = require("@toss/tds-react-native/private");
-var import_react9 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var useGameProfileToast = () => {
   const overlay = (0, import_private2.useOverlay)();
-  const openGameProfileToast = (0, import_react9.useCallback)(
+  const openGameProfileToast = (0, import_react10.useCallback)(
     (nickname, profileImageUri) => {
       return new Promise((resolve) => {
         overlay.open(({ isOpen, close, exit }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_private2.ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_private2.AdaptiveColorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_private2.ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_private2.AdaptiveColorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_tds_react_native4.Toast,
             {
               open: isOpen,
@@ -472,7 +518,7 @@ var useGameProfileToast = () => {
               onExited: exit,
               position: "top",
               text: `${nickname}\uB2D8 \uBC18\uAC00\uC6CC\uC694!`,
-              icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 import_tds_react_native4.Asset.Image,
                 {
                   style: { borderRadius: 64, overflow: "hidden" },
@@ -492,16 +538,16 @@ var useGameProfileToast = () => {
 
 // src/hooks/useGameCenterProfile.ts
 var useGameCenterProfile = (isReadyForProfileUI) => {
-  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 [profileData, setProfileData] = (0, import_react11.useState)(void 0);
+  const [isProfileDataLoading, setIsProfileDataLoading] = (0, import_react11.useState)(true);
+  const [isProfileDataRefetching, setIsProfileDataRefetching] = (0, import_react11.useState)(false);
   const shouldShowProfileLoadingOverlay = isProfileDataLoading && isReadyForProfileUI || isProfileDataRefetching;
   const shouldShowProfileNotFoundOverlay = profileData?.statusCode === "PROFILE_NOT_FOUND" && isReadyForProfileUI && !isProfileDataRefetching;
   const canShowBottomSheetOrToast = !isProfileDataLoading && isReadyForProfileUI;
   const { openGameProfileToast } = useGameProfileToast();
   const { open: openErrorAlert } = useErrorAlert();
   const { open: openTransparentWebView2 } = useTransparentWebview();
-  const fetchProfileData = (0, import_react10.useCallback)(async () => {
+  const fetchProfileData = (0, import_react11.useCallback)(async () => {
     try {
       const data = await (0, import_native_modules6.getGameCenterGameProfile)();
       setProfileData(data);
@@ -511,7 +557,7 @@ var useGameCenterProfile = (isReadyForProfileUI) => {
       setIsProfileDataLoading(false);
     }
   }, [openErrorAlert]);
-  const refetchProfileData = (0, import_react10.useCallback)(async () => {
+  const refetchProfileData = (0, import_react11.useCallback)(async () => {
     try {
       setIsProfileDataRefetching(true);
       const data = await (0, import_native_modules6.getGameCenterGameProfile)();
@@ -525,7 +571,7 @@ var useGameCenterProfile = (isReadyForProfileUI) => {
       openErrorAlert();
     }
   }, [openErrorAlert, openGameProfileToast]);
-  const openProfileWebview = (0, import_react10.useCallback)(() => {
+  const openProfileWebview = (0, import_react11.useCallback)(() => {
     openTransparentWebView2({
       webUrl: `${GAME_PROFILE_WEBVIEW_URL}?appName=${getAppName()}&referrer=appsintoss.${getAppName()}`,
       onClose: async () => {
@@ -558,7 +604,7 @@ var Z_INDEX = {
 };
 
 // src/components/GameInitializer.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var GameInitializer = ({ children, isReadyForProfileUI }) => {
   const {
     profileData,
@@ -569,12 +615,12 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
     openGameProfileToast,
     fetchProfileData
   } = useGameCenterProfile(isReadyForProfileUI);
-  const isCompletedFlow = (0, import_react11.useRef)(false);
+  const isCompletedFlow = (0, import_react12.useRef)(false);
   const { open: openAppUpdateDialog } = useAppUpdateDialog();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     fetchProfileData();
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handleGameProfileFlow = async () => {
       if (!canShowBottomSheetOrToast) {
         return;
@@ -611,9 +657,9 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
     profileData
   ]);
   if (!(0, import_native_modules7.isMinVersionSupported)(GAME_MIN_VERSION)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_react_native11.Pressable,
         {
           style: {
@@ -633,9 +679,9 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
     ] });
   }
   if (shouldShowProfileLoadingOverlay) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_react_native11.View,
         {
           style: {
@@ -644,15 +690,15 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
             alignItems: "center",
             backgroundColor: "rgba(0, 0, 0, 0.2)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tds_react_native5.Loader, { size: "large", type: "light" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tds_react_native5.Loader, { size: "large", type: "light" })
         }
       )
     ] });
   }
   if (shouldShowProfileNotFoundOverlay) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }),
-      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }),
+      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_react_native11.Pressable,
         {
           style: {
@@ -665,7 +711,7 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native11.View, { style: { flex: 1, position: "relative" }, children }) });
 };
 var overlayStyle = {
   position: "absolute",
@@ -680,10 +726,10 @@ var overlayStyle = {
 var import_private5 = require("@toss/tds-react-native/private");
 
 // src/components/NavigationBar/RNNavigationBar/hooks/useHardwareBackPress.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_native12 = require("react-native");
 function useHardwareBackPress(handler) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const handleBackPress = () => {
       handler();
       return true;
@@ -695,16 +741,16 @@ function useHardwareBackPress(handler) {
 
 // src/components/NavigationBar/RNNavigationBar/hooks/useNavigationEvent.ts
 var import_react_native14 = require("@granite-js/react-native");
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/NavigationBar/RNNavigationBar/hooks/useCloseConfirm.ts
 var import_tds_react_native6 = require("@toss/tds-react-native");
 var import_es_hangul2 = require("es-hangul");
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useCloseConfirm() {
   const { brandDisplayName } = getAppsInTossGlobals();
   const { openConfirm } = (0, import_tds_react_native6.useDialog)();
-  return (0, import_react13.useCallback)(async ({ onEntered }) => {
+  return (0, import_react14.useCallback)(async ({ onEntered }) => {
     return await openConfirm({
       title: `${(0, import_es_hangul2.josa)(brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
       leftButton: "\uCDE8\uC18C",
@@ -806,7 +852,7 @@ function useNavigationEvent() {
   const navigation = (0, import_react_native14.useNavigation)();
   const closeConfirm = useCloseConfirm();
   const { captureExitLog } = useCaptureExitLog();
-  return (0, import_react14.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     const close = async () => {
       const hasConfirmed = await closeConfirm({
         onEntered: logging.closePopupShow
@@ -844,7 +890,7 @@ var import_native_modules11 = require("@apps-in-toss/native-modules");
 var import_react_native18 = require("@granite-js/react-native");
 var import_tds_react_native8 = require("@toss/tds-react-native");
 var import_private4 = require("@toss/tds-react-native/private");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/core/hooks/useMoreButtonBottomSheet/AppShareListMenu.tsx
 var import_native_modules10 = require("@apps-in-toss/native-modules");
@@ -932,7 +978,7 @@ function addParamsToUrl(url, params) {
 }
 
 // src/core/hooks/useMoreButtonBottomSheet/AppShareListMenu.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var SHARE_SCHEME_REFERRER = "appsintoss.common_module_share";
 var APP_SHARE_MENU_INFO = {
   contactItemName: "\uACF5\uC720\uD558\uAE30",
@@ -948,10 +994,10 @@ function AppShareListMenu() {
   const schemeForShare = addParamsToUrl(initialScheme, {
     referrer: SHARE_SCHEME_REFERRER
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_tds_react_native7.ListRow,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      left: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_tds_react_native7.ListRow.Icon,
         {
           color: globals.brandPrimaryColor,
@@ -959,7 +1005,7 @@ function AppShareListMenu() {
           type: "background"
         }
       ),
-      contents: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      contents: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_tds_react_native7.ListRow.Texts,
         {
           type: "1RowTypeA",
@@ -998,7 +1044,7 @@ function ensureValue(value, name) {
 }
 
 // src/core/hooks/useMoreButtonBottomSheet/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var APP_BRIDGE_METHOD_NAME = "getMiniAppsSupportContact";
 var MIN_VERSION = {
   BOTTOM_SHEET: {
@@ -1013,14 +1059,14 @@ var MIN_VERSION = {
 function useMoreButtonBottomSheet() {
   const globals = getAppsInTossGlobals();
   const adaptive = (0, import_private4.useAdaptive)();
-  const [itemList, setItemList] = (0, import_react15.useState)([]);
+  const [itemList, setItemList] = (0, import_react16.useState)([]);
   const appUpdateDialog = useAppUpdateDialog();
   const logging = useMoreButtonBottomSheetLogging();
   const overlay = (0, import_private4.useOverlay)();
   const title = ensureValue(globals.brandDisplayName, "displayName");
   const isBottomSheetSupported = (0, import_native_modules11.isMinVersionSupported)(MIN_VERSION.BOTTOM_SHEET);
   const isShareListMenuSupported = (0, import_native_modules11.isMinVersionSupported)(MIN_VERSION.SHARE_LIST_MENU);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!isBottomSheetSupported) {
       return;
     }
@@ -1047,17 +1093,17 @@ function useMoreButtonBottomSheet() {
         logging.close();
         close();
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BottomSheetImpressionArea, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BottomSheetImpressionArea, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_tds_react_native8.BottomSheet.Root,
         {
-          header: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          header: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_tds_react_native8.ListHeader,
             {
-              title: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tds_react_native8.ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
+              title: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_tds_react_native8.ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
             }
           ),
           open: isOpen,
-          cta: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          cta: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_tds_react_native8.BottomSheet.CTA,
             {
               size: "large",
@@ -1071,12 +1117,12 @@ function useMoreButtonBottomSheet() {
           ),
           onClose: handleClose,
           onExited: exit,
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_tds_react_native8.List, { rowSeparator: "none", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_tds_react_native8.List, { rowSeparator: "none", children: [
             itemList.map((item) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 import_tds_react_native8.ListRow,
                 {
-                  left: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  left: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     import_tds_react_native8.ListRow.Icon,
                     {
                       color: globals.brandPrimaryColor,
@@ -1084,7 +1130,7 @@ function useMoreButtonBottomSheet() {
                       type: "background"
                     }
                   ),
-                  contents: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  contents: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     import_tds_react_native8.ListRow.Texts,
                     {
                       type: "1RowTypeA",
@@ -1101,7 +1147,7 @@ function useMoreButtonBottomSheet() {
                 item.contactItemName
               );
             }),
-            isShareListMenuSupported && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppShareListMenu, {})
+            isShareListMenuSupported && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AppShareListMenu, {})
           ] })
         }
       ) });
@@ -1111,54 +1157,42 @@ function useMoreButtonBottomSheet() {
 }
 function BottomSheetImpressionArea({ children }) {
   const logging = useMoreButtonBottomSheetLogging();
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     logging.show();
   }, [logging]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
-}
-
-// src/core/utils/safeParseNavigationBar.ts
-function safeParseNavigationBar(navigationBar) {
-  if (typeof navigationBar === "object") {
-    return navigationBar;
-  }
-  try {
-    return JSON.parse(navigationBar);
-  } catch {
-    return null;
-  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
 }
 
 // src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
-var import_react16 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function NavigationBarImpressionArea({
   children,
   withHomeButton
 }) {
-  const hasLogged = (0, import_react16.useRef)(false);
+  const hasLogged = (0, import_react17.useRef)(false);
   const logging = useNavigationBarLogging();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (hasLogged.current === false) {
       logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
       hasLogged.current = true;
     }
   }, [logging, withHomeButton]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Default.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function DefaultNavigationBar() {
   const globals = getAppsInTossGlobals();
   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 { navigationRightButton } = useNavigationBarContext();
   const navigationEvent = useNavigationEvent();
   useHardwareBackPress(navigationEvent.handleBack);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_private5.TopNavigation,
     {
       title: globals.brandDisplayName,
@@ -1168,28 +1202,28 @@ function DefaultNavigationBar() {
       onPressTitle: withHomeButton ? navigationEvent.handleHomeButtonClick : void 0,
       onPressClose: navigationEvent.handleCloseButtonClick,
       withHome: withHomeButton,
-      fixedRightButton: initialAccessoryButton,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_private5.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_private5.NavigationBackButton, { onPress: navigationEvent.handleBack, canGoBack: false }) })
+      fixedRightButton: navigationRightButton,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_private5.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_private5.NavigationBackButton, { onPress: navigationEvent.handleBack, canGoBack: false }) })
     }
   ) });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Game.tsx
+var import_react_native_safe_area_context = require("@granite-js/native/react-native-safe-area-context");
 var import_tds_react_native9 = require("@toss/tds-react-native");
 var import_private6 = require("@toss/tds-react-native/private");
 var import_react_native19 = require("react-native");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function GameNavigationBar() {
   const safeAreaTop = (0, import_private6.useSafeAreaTop)();
-  const global2 = getAppsInTossGlobals();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const navigationEvent = useNavigationEvent();
+  const { navigationRightButton } = useNavigationBarContext();
+  const { right: safeAreaRight } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   useHardwareBackPress(navigationEvent.handleBack);
-  const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
-  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_tds_react_native9.PageNavbar, { preference: { type: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tds_react_native9.PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_react_native19.View,
       {
         style: {
@@ -1202,13 +1236,13 @@ function GameNavigationBar() {
           position: "absolute",
           zIndex: Z_INDEX.CLOSE_BUTTON,
           marginTop: safeAreaTop,
-          paddingRight: 10
+          paddingRight: safeAreaRight + 10
         },
         pointerEvents: "box-none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_private6.NavigationRightContent,
           {
-            fixedRightButton: initialAccessoryButton,
+            fixedRightButton: navigationRightButton,
             onPressDots: openMoreButtonBottomSheet,
             onPressClose: navigationEvent.handleCloseButtonClick,
             theme: "dark"
@@ -1232,20 +1266,20 @@ __reExport(bridge_entry_exports, require("@apps-in-toss/native-modules/constant-
 __reExport(bridge_entry_exports, require("@apps-in-toss/native-modules/event-bridges"));
 
 // src/components/RNAppContainer.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function RNAppContainer({ children }) {
   const global2 = getAppsInTossGlobals();
   switch (global2.appType) {
     case "game":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GameAppContainer, { children });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(GameAppContainer, { children });
     case "general":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GeneralAppContainer, { children });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(GeneralAppContainer, { children });
   }
 }
 function GameAppContainer({ children }) {
-  const [isEntryMessageExited, setIsEntryMessageExited] = (0, import_react17.useState)(false);
-  (0, import_react17.useEffect)(() => {
+  const [isEntryMessageExited, setIsEntryMessageExited] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     if (import_react_native20.Platform.OS === "ios") {
       (0, import_native_modules12.setIosSwipeGestureEnabled)({ isEnabled: false });
       return () => {
@@ -1254,48 +1288,48 @@ function GameAppContainer({ children }) {
     }
     return;
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     import_native_modules12.appsInTossEvent.addEventListener("entryMessageExited", {
       onEvent: () => {
         setIsEntryMessageExited(true);
       }
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RNNavigationBar.Game, {}),
-    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children }) : children
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RNNavigationBar.Game, {}),
+    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children }) : children
   ] });
 }
 function GeneralAppContainer({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RNNavigationBar.Default, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RNNavigationBar.Default, {}),
     children
   ] });
 }
 
 // src/core/registerApp.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function AppsInTossContainer(Container, { children, ...initialProps }) {
   if (!(0, import_native_modules13.isMinVersionSupported)({
     android: "5.220.0",
     ios: "5.221.0"
   })) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AppEvent.Entry, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AppEvent.System, { ...initialProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AppUpdate, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppEvent.Entry, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppEvent.System, { ...initialProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppUpdate, {})
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AppEvent.StayTime, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AppEvent.Entry, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AppEvent.System, { ...initialProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_tds_react_native10.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TDSContainer, { ...initialProps, children }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppEvent.StayTime, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppEvent.Entry, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppEvent.System, { ...initialProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_tds_react_native10.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TDSContainer, { ...initialProps, children }) }) })
   ] });
 }
 function TDSContainer({ children }) {
   useAppsInTossBridge();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
 }
 function registerApp(container, { context, analytics }) {
   const appName = getAppName();
@@ -1322,7 +1356,7 @@ function registerApp(container, { context, analytics }) {
 }
 function AppsInTossScreenContainer({ children }) {
   const isRNApp = getAppsInTossGlobals().webViewType == null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_analytics.Analytics.Screen, { children: isRNApp ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RNAppContainer, { children }) : children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NavigationBarContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_analytics.Analytics.Screen, { children: isRNApp ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RNAppContainer, { children }) : children }) });
 }
 function getAppName() {
   try {
@@ -1346,23 +1380,24 @@ var appsInTossEventBridges = __toESM(require("@apps-in-toss/native-modules/event
 var import_react_native32 = require("@granite-js/react-native");
 var import_tds_react_native14 = require("@toss/tds-react-native");
 var import_private9 = require("@toss/tds-react-native/private");
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_native33 = require("react-native");
 
 // src/components/GameWebView.tsx
 var import_native_modules14 = require("@apps-in-toss/native-modules");
 var import_react_native_webview = require("@granite-js/native/react-native-webview");
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_native25 = require("react-native");
 
 // src/components/NavigationBar/GameWebviewNavigationBar.tsx
+var import_react_native_safe_area_context2 = require("@granite-js/native/react-native-safe-area-context");
 var import_react_native23 = require("@granite-js/react-native");
 var import_tds_react_native11 = require("@toss/tds-react-native");
 var import_private7 = require("@toss/tds-react-native/private");
 var import_es_hangul3 = require("es-hangul");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_native24 = require("react-native");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function GameWebviewNavigationBar() {
   const safeAreaTop = (0, import_private7.useSafeAreaTop)();
   const { openConfirm } = (0, import_tds_react_native11.useDialog)();
@@ -1370,9 +1405,9 @@ function GameWebviewNavigationBar() {
   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_react18.useCallback)(async () => {
+  const { navigationRightButton } = useNavigationBarContext();
+  const { right: safeAreaRight } = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+  const handleGameWebviewClose = (0, import_react19.useCallback)(async () => {
     logging.closeButtonClick();
     const isConfirmed = await openConfirm({
       title: `${(0, import_es_hangul3.josa)(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
@@ -1387,9 +1422,9 @@ function GameWebviewNavigationBar() {
       (0, import_react_native23.closeView)();
     }
   }, [captureExitLog, global2.brandDisplayName, logging, openConfirm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_tds_react_native11.PageNavbar, { preference: { type: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tds_react_native11.PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_react_native24.View,
       {
         style: {
@@ -1402,13 +1437,13 @@ function GameWebviewNavigationBar() {
           position: "absolute",
           zIndex: Z_INDEX.CLOSE_BUTTON,
           marginTop: safeAreaTop,
-          paddingRight: 10
+          paddingRight: safeAreaRight + 10
         },
         pointerEvents: "box-none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_private7.NavigationRightContent,
           {
-            fixedRightButton: initialAccessoryButton,
+            fixedRightButton: navigationRightButton,
             onPressDots: openMoreButtonBottomSheet,
             onPressClose: () => {
               handleGameWebviewClose();
@@ -1422,10 +1457,10 @@ function GameWebviewNavigationBar() {
 }
 
 // src/components/GameWebView.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var GameWebView = (0, import_react19.forwardRef)(function GameWebView2(props, ref) {
-  const [isEntryMessageExited, setIsEntryMessageExited] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var GameWebView = (0, import_react20.forwardRef)(function GameWebView2(props, ref) {
+  const [isEntryMessageExited, setIsEntryMessageExited] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     if (import_react_native25.Platform.OS === "ios") {
       (0, import_native_modules14.setIosSwipeGestureEnabled)({ isEnabled: false });
       return () => {
@@ -1434,30 +1469,30 @@ var GameWebView = (0, import_react19.forwardRef)(function GameWebView2(props, re
     }
     return;
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     import_native_modules14.appsInTossEvent.addEventListener("entryMessageExited", {
       onEvent: () => {
         setIsEntryMessageExited(true);
       }
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GameWebviewNavigationBar, {}),
-    (0, import_native_modules14.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_webview.WebView, { ref, ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_webview.WebView, { ref, ...props })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GameWebviewNavigationBar, {}),
+    (0, import_native_modules14.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_webview.WebView, { ref, ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_webview.WebView, { ref, ...props })
   ] });
 });
 
 // src/components/PartnerWebView.tsx
 var import_react_native_webview2 = require("@granite-js/native/react-native-webview");
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/NavigationBar/PartnerWebviewNavigationBar.tsx
 var import_react_native26 = require("@granite-js/react-native");
 var import_tds_react_native12 = require("@toss/tds-react-native");
 var import_private8 = require("@toss/tds-react-native/private");
 var import_es_hangul4 = require("es-hangul");
-var import_react20 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const globals = getAppsInTossGlobals();
   const { captureExitLog } = useCaptureExitLog();
@@ -1467,8 +1502,8 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
-  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
-  const handleClose = (0, import_react20.useCallback)(async () => {
+  const { navigationRightButton } = useNavigationBarContext();
+  const handleClose = (0, import_react21.useCallback)(async () => {
     logging.closeButtonClick();
     const isConfirmed = await openConfirm({
       title: `${(0, import_es_hangul4.josa)(globals.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
@@ -1483,7 +1518,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
       (0, import_react_native26.closeView)();
     }
   }, [captureExitLog, globals.brandDisplayName, logging, openConfirm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_private8.TopNavigation,
     {
       title: globals.brandDisplayName,
@@ -1493,23 +1528,23 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
       onPressTitle: withHomeButton ? onHomeButtonClick : void 0,
       onPressClose: handleClose,
       withHome: withHomeButton,
-      fixedRightButton: initialAccessoryButton,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_private8.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_private8.NavigationBackButton, { onPress: onBackButtonClick, canGoBack: false }) })
+      fixedRightButton: navigationRightButton,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_private8.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_private8.NavigationBackButton, { onPress: onBackButtonClick, canGoBack: false }) })
     }
   ) });
 }
 
 // src/components/PartnerWebView.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var PartnerWebView = (0, import_react21.forwardRef)(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_webview2.WebView, { ref, ...webViewProps, style: { flex: 1 } })
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var PartnerWebView = (0, import_react22.forwardRef)(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_webview2.WebView, { ref, ...webViewProps, style: { flex: 1 } })
   ] });
 });
 
 // src/bridge-handler/useBridgeHandler.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -1562,8 +1597,8 @@ function useBridgeHandler({
   eventListenerMap,
   injectedJavaScript: originalInjectedJavaScript
 }) {
-  const ref = (0, import_react22.useRef)(null);
-  const injectedJavaScript = (0, import_react22.useMemo)(
+  const ref = (0, import_react23.useRef)(null);
+  const injectedJavaScript = (0, import_react23.useMemo)(
     () => [
       `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
         Object.entries(constantHandlerMap).reduce(
@@ -1590,7 +1625,7 @@ function useBridgeHandler({
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${serializedError});
     `);
   };
-  const $onMessage = (0, import_react22.useCallback)(
+  const $onMessage = (0, import_react23.useCallback)(
     async (e) => {
       onMessage?.(e);
       const data = JSON.parse(e.nativeEvent.data);
@@ -1644,10 +1679,10 @@ function useBridgeHandler({
 var import_react_native27 = require("@granite-js/react-native");
 var import_tds_react_native13 = require("@toss/tds-react-native");
 var import_es_hangul5 = require("es-hangul");
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/hooks/useWebviewHistoryStack.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var INITIAL_STATE = { stack: [], index: -1 };
 function reducer(state, action) {
   switch (action.type) {
@@ -1678,11 +1713,11 @@ function reducer(state, action) {
   }
 }
 function useWebViewHistory() {
-  const [state, dispatch] = (0, import_react23.useReducer)(reducer, INITIAL_STATE);
-  const onNavigationStateChange = (0, import_react23.useCallback)(({ url, canGoForward: canGoForward2 }) => {
+  const [state, dispatch] = (0, import_react24.useReducer)(reducer, INITIAL_STATE);
+  const onNavigationStateChange = (0, import_react24.useCallback)(({ url, canGoForward: canGoForward2 }) => {
     dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
   }, []);
-  const { canGoBack, canGoForward } = (0, import_react23.useMemo)(() => {
+  const { canGoBack, canGoForward } = (0, import_react24.useMemo)(() => {
     const canBack = state.index > 0;
     const canFwd = state.index >= 0 && state.index < state.stack.length - 1;
     return { canGoBack: canBack, canGoForward: canFwd };
@@ -1715,19 +1750,19 @@ function useWebBackHandler(webViewRef) {
   const logging = useNavigationBarLogging();
   const { openConfirm } = (0, import_tds_react_native13.useDialog)();
   const global2 = getAppsInTossGlobals();
-  const addEventListener = (0, import_react24.useCallback)(
+  const addEventListener = (0, import_react25.useCallback)(
     (handler) => {
       addWebBackEventListener(handler);
     },
     [addWebBackEventListener]
   );
-  const removeEventListener = (0, import_react24.useCallback)(
+  const removeEventListener = (0, import_react25.useCallback)(
     (handler) => {
       removeWebBackEventListener(handler);
     },
     [removeWebBackEventListener]
   );
-  const handleWebBack = (0, import_react24.useCallback)(async () => {
+  const handleWebBack = (0, import_react25.useCallback)(async () => {
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
         handler();
@@ -1760,7 +1795,7 @@ function useWebBackHandler(webViewRef) {
     openConfirm,
     webViewRef
   ]);
-  const handleWebHome = (0, import_react24.useCallback)(() => {
+  const handleWebHome = (0, import_react25.useCallback)(() => {
     logging.homeButtonClick();
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
@@ -1770,7 +1805,7 @@ function useWebBackHandler(webViewRef) {
     }
     webViewRef.current?.injectJavaScript(HISTORY_HOME_SCRIPT);
   }, [hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  return (0, import_react24.useMemo)(
+  return (0, import_react25.useMemo)(
     () => ({ addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange }),
     [addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange]
   );
@@ -1927,7 +1962,7 @@ function useCreateUserAgent({
   const platform = (0, import_native_modules15.getPlatformOS)();
   const appVersion = (0, import_native_modules15.getTossAppVersion)();
   const { fontScale } = (0, import_react_native28.useWindowDimensions)();
-  const platformString = platform === "ios" ? "iPhone" : "Android";
+  const platformString = platform === "ios" ? "iPhone" : "Android phone";
   const fontA11y = mapFontScaleToCategory(fontScale, platform);
   const normalizedFontScale = convertToAndroidStyleScale(fontScale, platform);
   return [
@@ -1948,11 +1983,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 var import_native_modules16 = require("@apps-in-toss/native-modules");
 var import_react_native29 = require("@granite-js/react-native");
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = (0, import_react_native29.useVisibility)();
-  const [location, setLocation] = (0, import_react25.useState)(null);
-  (0, import_react25.useEffect)(() => {
+  const [location, setLocation] = (0, import_react26.useState)(null);
+  (0, import_react26.useEffect)(() => {
     if (!isVisible) {
       return;
     }
@@ -1971,11 +2006,11 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
 
 // src/hooks/useWaitForReturnNavigator.tsx
 var import_react_native30 = require("@granite-js/react-native");
-var import_react26 = require("react");
+var import_react27 = require("react");
 function useWaitForReturnNavigator() {
-  const callbacks = (0, import_react26.useRef)([]).current;
+  const callbacks = (0, import_react27.useRef)([]).current;
   const navigation = (0, import_react_native30.useNavigation)();
-  const startNavigating = (0, import_react26.useCallback)(
+  const startNavigating = (0, import_react27.useCallback)(
     (route, params) => {
       return new Promise((resolve) => {
         callbacks.push(resolve);
@@ -1984,7 +2019,7 @@ function useWaitForReturnNavigator() {
     },
     [callbacks, navigation]
   );
-  const handleVisibilityChange = (0, import_react26.useCallback)(
+  const handleVisibilityChange = (0, import_react27.useCallback)(
     (state) => {
       if (state === "visible" && callbacks.length > 0) {
         for (const callback of callbacks) {
@@ -1999,6 +2034,15 @@ function useWaitForReturnNavigator() {
   return startNavigating;
 }
 
+// src/hooks/useTopNavigation.tsx
+function useTopNavigation() {
+  const { addNavigationRightButton, removeNavigationRightButton } = useNavigationBarContext();
+  return {
+    addAccessoryButton: addNavigationRightButton,
+    removeAccessoryButton: removeNavigationRightButton
+  };
+}
+
 // src/utils/log.ts
 var import_native_modules17 = require("@apps-in-toss/native-modules");
 var import_react_native31 = require("@granite-js/react-native");
@@ -2049,7 +2093,7 @@ var trackScreen = (url) => {
 };
 
 // src/components/WebView.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var operationalEnvironment = appsInTossConstantBridges.getOperationalEnvironment();
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
@@ -2083,13 +2127,13 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
-  const webViewRef = (0, import_react27.useRef)(null);
+  const webViewRef = (0, import_react28.useRef)(null);
   const webBackHandler = useWebBackHandler(webViewRef);
-  const uri = (0, import_react27.useMemo)(() => getWebViewUri(local), [local]);
+  const uri = (0, import_react28.useMemo)(() => getWebViewUri(local), [local]);
   const top = (0, import_private9.useSafeAreaTop)();
   const bottom = (0, import_private9.useSafeAreaBottom)();
   const global2 = getAppsInTossGlobals();
-  const topNavigation = (0, import_private9.useTopNavigation)();
+  const navigationBarContext = useNavigationBarContext();
   const disableTextSelectionCSS = `
     (function() {
       const style = document.createElement('style');
@@ -2097,7 +2141,7 @@ function WebView({ type, local, onMessage, ...props }) {
       document.head.appendChild(style);
     })();
   `;
-  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react27.useState)(
+  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react28.useState)(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
@@ -2151,8 +2195,8 @@ function WebView({ type, local, onMessage, ...props }) {
         setAllowsBackForwardNavigationGestures(options.isEnabled);
         return appsInTossAsyncBridges.setIosSwipeGestureEnabled(options);
       },
-      addAccessoryButton: async (params) => topNavigation.addAccessoryButton(params),
-      removeAccessoryButton: async () => topNavigation.removeAccessoryButton(),
+      addAccessoryButton: async (params) => navigationBarContext.addNavigationRightButton(params),
+      removeAccessoryButton: async () => navigationBarContext.removeNavigationRightButton(),
       /** permissions */
       requestPermission: appsInTossAsyncBridges.requestPermission,
       openPermissionDialog: appsInTossAsyncBridges.openPermissionDialog,
@@ -2177,7 +2221,7 @@ function WebView({ type, local, onMessage, ...props }) {
       completeProductGrant: import_native_modules18.IAP.completeProductGrant
     }
   });
-  const headerPropForExternalWebView = (0, import_react27.useMemo)(() => {
+  const headerPropForExternalWebView = (0, import_react28.useMemo)(() => {
     const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
     const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
     const withBackButton = parsedNavigationBar?.withBackButton ?? true;
@@ -2198,7 +2242,7 @@ function WebView({ type, local, onMessage, ...props }) {
     colorPreference: "light"
   });
   const refs = mergeRefs(handler.ref, webViewRef);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const callback = () => {
       webBackHandler.handleWebBack();
       return true;
@@ -2206,7 +2250,7 @@ function WebView({ type, local, onMessage, ...props }) {
     import_react_native33.BackHandler.addEventListener("hardwareBackPress", callback);
     return () => import_react_native33.BackHandler.removeEventListener("hardwareBackPress", callback);
   }, [webBackHandler]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     BaseWebView,
     {
       ref: refs,