@apps-in-toss/framework 2.9.0 → 2.9.2

package/dist/index.cjs

@@ -56,7 +56,7 @@ var import_analytics2 = require("@apps-in-toss/analytics");
 var import_analytics = require("@apps-in-toss/analytics");
 var import_native_modules10 = require("@apps-in-toss/native-modules");
 var import_react_native27 = require("@granite-js/react-native");
-var import_tds_react_native11 = require("@toss/tds-react-native");
+var import_tds_react_native12 = require("@toss/tds-react-native");
 var import_react_native28 = require("react-native");
 
 // src/core/components/AppEvent.tsx
@@ -185,7 +185,7 @@ function useNavigationBarContext() {
 
 // src/components/RNAppContainer.tsx
 var import_native_modules9 = require("@apps-in-toss/native-modules");
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_native26 = require("react-native");
 
 // src/components/GameInitializer.tsx
@@ -657,7 +657,28 @@ function useHardwareBackPress(handler) {
 
 // src/components/NavigationBar/RNNavigationBar/hooks/useNavigationEvent.ts
 var import_react_native13 = require("@granite-js/react-native");
+var import_react13 = require("react");
+
+// src/components/NavigationBar/RNNavigationBar/hooks/useCloseConfirm.ts
+var import_tds_react_native5 = require("@toss/tds-react-native");
+var import_es_hangul2 = require("es-hangul");
 var import_react12 = require("react");
+function useCloseConfirm() {
+  const { brandDisplayName } = getAppsInTossGlobals();
+  const { openConfirm } = (0, import_tds_react_native5.useDialog)();
+  return (0, import_react12.useCallback)(
+    async ({ onEntered }) => {
+      return await openConfirm({
+        title: `${(0, import_es_hangul2.josa)(brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+        leftButton: "\uB2EB\uAE30",
+        rightButton: "\uC885\uB8CC\uD558\uAE30",
+        closeOnDimmerClick: true,
+        onEntered
+      });
+    },
+    [brandDisplayName, openConfirm]
+  );
+}
 
 // src/utils/eventEmitter.ts
 var EventEmitter = class {
@@ -703,8 +724,12 @@ var safeAreaInsetsChange = createEvent("safeAreaInsetsChange");
 var import_react_native12 = require("@granite-js/react-native");
 var NAVI_BAR_IMPRESSION_SCHEMA_ID = 1596837;
 var NAVI_BAR_IMPRESSION_LOG_NAME = "appsintoss_app_visit__common_module::impression__navigation_bar";
+var CLOSE_POPUP_SHOW_SCHEMA_ID = 1644490;
+var CLOSE_POPUP_SHOW_LOG_NAME = "appsintoss_app_visit__common_module::popup__close_app";
 var CLOSE_BUTTON_CLICK_SCHEMA_ID = 1596831;
 var CLOSE_BUTTON_CLICK_LOG_NAME = "appsintoss_app_visit__common_module::click__icon_close";
+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 useNavigationBarLogging() {
@@ -747,8 +772,32 @@ function useNavigationBarLogging() {
       }
     });
   };
+  const logClosePopupShow = () => {
+    sendLog({
+      log_name: CLOSE_POPUP_SHOW_LOG_NAME,
+      log_type: "popup",
+      params: {
+        ...baseParams,
+        schema_id: CLOSE_POPUP_SHOW_SCHEMA_ID
+      }
+    });
+  };
+  const logClosePopupCtaClick = (confirm) => {
+    sendLog({
+      log_name: CLOSE_POPUP_CTA_CLICK_LOG_NAME,
+      log_type: "event",
+      params: {
+        ...baseParams,
+        close_yn: confirm ? "Y" : "N",
+        schema_id: CLOSE_POPUP_CTA_CLICK_SCHEMA_ID,
+        event_type: "click"
+      }
+    });
+  };
   return {
     navBarImpression: logNavBarImpression,
+    closePopupShow: logClosePopupShow,
+    closePopupCtaClick: logClosePopupCtaClick,
     closeButtonClick: logCloseButtonClick,
     homeButtonClick: logHomeButtonClick
   };
@@ -759,15 +808,30 @@ function useNavigationEvent() {
   const backEventContext = (0, import_react_native13.useBackEventContext)();
   const logging = useNavigationBarLogging();
   const navigation = (0, import_react_native13.useNavigation)();
-  return (0, import_react12.useMemo)(
-    () => ({
+  const closeConfirm = useCloseConfirm();
+  const global2 = getAppsInTossGlobals();
+  return (0, import_react13.useMemo)(() => {
+    const close = async () => {
+      if (global2.appType !== "game") {
+        (0, import_react_native13.closeView)();
+        return;
+      }
+      const hasConfirmed = await closeConfirm({
+        onEntered: logging.closePopupShow
+      });
+      logging.closePopupCtaClick(hasConfirmed);
+      if (hasConfirmed) {
+        (0, import_react_native13.closeView)();
+      }
+    };
+    return {
       handleBack: () => {
         if (backEventContext.hasBackEvent) {
           backEventContext.onBack();
         } else if (navigation.canGoBack()) {
           navigation.goBack();
         } else {
-          (0, import_react_native13.closeView)();
+          close();
         }
       },
       handleHomeButtonClick: () => {
@@ -780,27 +844,26 @@ function useNavigationEvent() {
       },
       handleCloseButtonClick: () => {
         logging.closeButtonClick();
-        (0, import_react_native13.closeView)();
+        close();
       }
-    }),
-    [backEventContext, navigation, logging]
-  );
+    };
+  }, [global2.appType, backEventContext, navigation, closeConfirm, logging]);
 }
 
 // src/core/hooks/useMoreButtonBottomSheet/index.tsx
 var import_native_modules8 = require("@apps-in-toss/native-modules");
 var import_react_native18 = require("@granite-js/react-native");
-var import_tds_react_native7 = require("@toss/tds-react-native");
+var import_tds_react_native8 = require("@toss/tds-react-native");
 var import_private4 = require("@toss/tds-react-native/private");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/core/hooks/useMoreButtonBottomSheet/AppShareListMenu.tsx
 var import_native_modules5 = require("@apps-in-toss/native-modules");
 var import_react_native16 = require("@granite-js/react-native");
-var import_tds_react_native6 = require("@toss/tds-react-native");
+var import_tds_react_native7 = require("@toss/tds-react-native");
 
 // src/core/hooks/useMoreButtonBottomSheet/Menu.tsx
-var import_tds_react_native5 = require("@toss/tds-react-native");
+var import_tds_react_native6 = require("@toss/tds-react-native");
 var import_private3 = require("@toss/tds-react-native/private");
 var import_react_native15 = require("react-native");
 
@@ -882,7 +945,7 @@ function Menu({ title, iconURL, onPress }) {
   const brandPrimaryColorRGB = hexToRGB(globals.brandPrimaryColor);
   const iconBackgroundColor = brandPrimaryColorRGB ? `rgba(${brandPrimaryColorRGB.join(",")},0.1)` : adaptive.grey100;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_tds_react_native5.ListRow,
+    import_tds_react_native6.ListRow,
     {
       left: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native15.View,
@@ -897,10 +960,10 @@ function Menu({ title, iconURL, onPress }) {
             marginRight: 16,
             backgroundColor: iconBackgroundColor
           },
-          children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tds_react_native5.Asset.Icon, { frameShape: { width: 20, height: 20 }, color: globals.brandPrimaryColor, name: iconName }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tds_react_native5.Asset.Image, { frameShape: { width: 20, height: 20 }, source: { uri: iconURL } })
+          children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tds_react_native6.Asset.Icon, { frameShape: { width: 20, height: 20 }, color: globals.brandPrimaryColor, name: iconName }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tds_react_native6.Asset.Image, { frameShape: { width: 20, height: 20 }, source: { uri: iconURL } })
         }
       ),
-      contents: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tds_react_native5.ListRow.Texts, { type: "1RowTypeA", top: title, topProps: { color: adaptive.grey700 } }),
+      contents: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tds_react_native6.ListRow.Texts, { type: "1RowTypeA", top: title, topProps: { color: adaptive.grey700 } }),
       verticalPadding: "extraSmall",
       onPress: () => {
         logging.menuClick({ title });
@@ -947,7 +1010,7 @@ var APP_SHARE_MENU_INFO = {
 function AppShareListMenu() {
   const initialScheme = (0, import_react_native16.getSchemeUri)();
   const isSandbox = (0, import_native_modules5.getOperationalEnvironment)() === "sandbox";
-  const { openConfirm } = (0, import_tds_react_native6.useDialog)();
+  const { openConfirm } = (0, import_tds_react_native7.useDialog)();
   const schemeForShare = addParamsToUrl(initialScheme, {
     referrer: SHARE_SCHEME_REFERRER
   });
@@ -1057,7 +1120,7 @@ var MIN_VERSION = {
 function useMoreButtonBottomSheet() {
   const globals = getAppsInTossGlobals();
   const adaptive = (0, import_private4.useAdaptive)();
-  const [itemList, setItemList] = (0, import_react13.useState)([]);
+  const [itemList, setItemList] = (0, import_react14.useState)([]);
   const appUpdateDialog = useAppUpdateDialog();
   const logging = useMoreButtonBottomSheetLogging();
   const overlay = (0, import_private4.useOverlay)();
@@ -1066,7 +1129,7 @@ function useMoreButtonBottomSheet() {
   const isBottomSheetSupported = (0, import_native_modules8.isMinVersionSupported)(MIN_VERSION.BOTTOM_SHEET);
   const isShareListMenuSupported = (0, import_native_modules8.isMinVersionSupported)(MIN_VERSION.SHARE_LIST_MENU);
   const isSettingsMenuSupported = (0, import_native_modules8.isMinVersionSupported)(MIN_VERSION.SETTINGS_MENU);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!isBottomSheetSupported) {
       return;
     }
@@ -1094,17 +1157,17 @@ function useMoreButtonBottomSheet() {
         close();
       };
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BottomSheetImpressionArea, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_tds_react_native7.BottomSheet.Root,
+        import_tds_react_native8.BottomSheet.Root,
         {
           header: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_tds_react_native7.ListHeader,
+            import_tds_react_native8.ListHeader,
             {
-              title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tds_react_native7.ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
+              title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_tds_react_native8.ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
             }
           ),
           open: isOpen,
           cta: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_tds_react_native7.BottomSheet.CTA,
+            import_tds_react_native8.BottomSheet.CTA,
             {
               size: "large",
               type: "dark",
@@ -1117,7 +1180,7 @@ function useMoreButtonBottomSheet() {
           ),
           onClose: handleClose,
           onExited: exit,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tds_react_native7.List, { rowSeparator: "none", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_tds_react_native8.List, { rowSeparator: "none", children: [
             itemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Menu,
               {
@@ -1139,7 +1202,7 @@ function useMoreButtonBottomSheet() {
 }
 function BottomSheetImpressionArea({ children }) {
   const logging = useMoreButtonBottomSheetLogging();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     logging.show();
   }, [logging]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
@@ -1148,14 +1211,14 @@ function BottomSheetImpressionArea({ children }) {
 // src/components/NavigationBar/TopNavigation/TopNavigation.tsx
 var import_react_native_safe_area_context = require("@granite-js/native/react-native-safe-area-context");
 var import_react_native19 = require("@granite-js/react-native");
-var import_tds_react_native8 = require("@toss/tds-react-native");
-var import_react14 = require("react");
+var import_tds_react_native9 = require("@toss/tds-react-native");
+var import_react15 = require("react");
 var import_react_native20 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function TopNavigation({ left, center, right }) {
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const navigation = (0, import_react_native19.useNavigation)();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const { navigationBar } = getAppsInTossGlobals();
     const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
     const transparent = parsedNavigationBar?.transparentBackground ?? false;
@@ -1167,7 +1230,7 @@ function TopNavigation({ left, center, right }) {
         {
           style: {
             width: "100%",
-            backgroundColor: transparent ? void 0 : theme === "light" ? import_tds_react_native8.colors.lightThemeBackground : import_tds_react_native8.colors.darkThemeBackground
+            backgroundColor: transparent ? void 0 : theme === "light" ? import_tds_react_native9.colors.lightThemeBackground : import_tds_react_native9.colors.darkThemeBackground
           },
           pointerEvents: "box-none",
           children: [
@@ -1251,7 +1314,7 @@ function BackButton({ theme = "light", onPress, ...restProps }) {
 var BACK_BUTTON_XML = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="m20.8 20.7c-.3 0-.6-.1-.8-.4l-7.5-7.5c-.5-.5-.5-1.2 0-1.7l7.5-7.5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-6.8 6.7 6.7 6.7c.5.5.5 1.2 0 1.7-.2.2-.5.3-.8.3z" fill="__COLOR__"/></svg>`;
 
 // src/components/NavigationBar/TopNavigation/HomeButton.tsx
-var import_tds_react_native9 = require("@toss/tds-react-native");
+var import_tds_react_native10 = require("@toss/tds-react-native");
 var import_react_native22 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function HomeButton({ theme = "light", onPress, children }) {
@@ -1266,12 +1329,12 @@ function HomeButton({ theme = "light", onPress, children }) {
         height: 34,
         paddingLeft: 10,
         paddingRight: 10,
-        backgroundColor: theme === "light" ? import_tds_react_native9.colors.greyOpacity50 : "rgba(0, 0, 1, 0.58)",
+        backgroundColor: theme === "light" ? import_tds_react_native10.colors.greyOpacity50 : "rgba(0, 0, 1, 0.58)",
         borderRadius: 99
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tds_react_native9.Icon, { name: "icon-home-mono", size: 18 })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tds_react_native10.Icon, { name: "icon-home-mono", size: 18 })
       ]
     }
   );
@@ -1322,12 +1385,12 @@ function AppTitle({ title, iconUrl, theme = "light" }) {
 }
 
 // src/components/NavigationBar/TopNavigation/Menu.tsx
-var import_tds_react_native10 = require("@toss/tds-react-native");
+var import_tds_react_native11 = require("@toss/tds-react-native");
 var import_react_native25 = require("react-native");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function Menu2({ theme = "light", accessoryButton, onPressDots, onLongPressDots, onPressClose }) {
-  const backgroundColor = theme === "light" ? import_tds_react_native10.colors.greyOpacity50 : "rgba(0, 0, 1, 0.58)";
-  const iconColor = theme === "light" ? import_tds_react_native10.colors.greyOpacity600 : "rgba(253, 253, 255, 0.75)";
+  const backgroundColor = theme === "light" ? import_tds_react_native11.colors.greyOpacity50 : "rgba(0, 0, 1, 0.58)";
+  const iconColor = theme === "light" ? import_tds_react_native11.colors.greyOpacity600 : "rgba(253, 253, 255, 0.75)";
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native25.View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
     accessoryButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react_native25.View,
@@ -1345,12 +1408,12 @@ function Menu2({ theme = "light", accessoryButton, onPressDots, onLongPressDots,
               backgroundColor
             },
             onPress: () => {
-              import_tds_react_native10.tdsEvent.emit("navigationAccessoryEvent", { id: accessoryButton.id });
+              import_tds_react_native11.tdsEvent.emit("navigationAccessoryEvent", { id: accessoryButton.id });
               accessoryButton.onPress?.();
             },
             disabled: accessoryButton.disabled,
             children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_tds_react_native10.Icon,
+              import_tds_react_native11.Icon,
               {
                 name: accessoryButton.icon.name ?? "",
                 accessibilityLabel: accessoryButton.title,
@@ -1375,18 +1438,18 @@ function Menu2({ theme = "light", accessoryButton, onPressDots, onLongPressDots,
           backgroundColor
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native25.TouchableOpacity, { onPress: onPressDots, onLongPress: onLongPressDots, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tds_react_native10.Icon, { name: "icon-dots-mono", accessibilityLabel: "\uB354\uBCF4\uAE30", color: iconColor, size: 20 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native25.TouchableOpacity, { onPress: onPressDots, onLongPress: onLongPressDots, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tds_react_native11.Icon, { name: "icon-dots-mono", accessibilityLabel: "\uB354\uBCF4\uAE30", color: iconColor, size: 20 }) }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             import_react_native25.View,
             {
               style: {
                 width: 1,
                 height: 16,
-                backgroundColor: theme === "light" ? import_tds_react_native10.colors.greyOpacity200 : "rgba(222, 222, 255, 0.19)"
+                backgroundColor: theme === "light" ? import_tds_react_native11.colors.greyOpacity200 : "rgba(222, 222, 255, 0.19)"
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native25.TouchableOpacity, { onPress: onPressClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tds_react_native10.Icon, { name: "icon-appsintoss-close-mono", accessibilityLabel: "\uB2EB\uAE30", color: iconColor, size: 20 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native25.TouchableOpacity, { onPress: onPressClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tds_react_native11.Icon, { name: "icon-appsintoss-close-mono", accessibilityLabel: "\uB2EB\uAE30", color: iconColor, size: 20 }) })
         ]
       }
     ) })
@@ -1394,15 +1457,15 @@ function Menu2({ theme = "light", accessoryButton, onPressDots, onLongPressDots,
 }
 
 // src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function NavigationBarImpressionArea({
   children,
   withHomeButton
 }) {
-  const hasLogged = (0, import_react15.useRef)(false);
+  const hasLogged = (0, import_react16.useRef)(false);
   const logging = useNavigationBarLogging();
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (hasLogged.current === false) {
       logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
       hasLogged.current = true;
@@ -1491,7 +1554,7 @@ function RNAppContainer({ children }) {
   }
 }
 function GameAppContainer({ children }) {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (import_react_native26.Platform.OS === "ios") {
       (0, import_native_modules9.setIosSwipeGestureEnabled)({ isEnabled: false });
       return () => {
@@ -1526,7 +1589,7 @@ function AppsInTossContainer(Container, { children, ...initialProps }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppEvent.System, { ...initialProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tds_react_native11.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tds_react_native12.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children }) })
   ] });
 }
 function registerApp(container, { context, analytics }) {
@@ -1598,32 +1661,44 @@ var appsInTossEventBridges = __toESM(require("@apps-in-toss/native-modules/event
 var import_user_scripts = require("@apps-in-toss/user-scripts");
 var import_react_native_safe_area_context3 = require("@granite-js/native/react-native-safe-area-context");
 var import_react_native41 = require("@granite-js/react-native");
-var import_tds_react_native14 = require("@toss/tds-react-native");
-var import_react27 = require("react");
+var import_tds_react_native16 = require("@toss/tds-react-native");
+var import_react28 = require("react");
 var import_react_native42 = require("react-native");
 
 // src/components/GameWebView.tsx
 var import_native_modules11 = require("@apps-in-toss/native-modules");
 var import_react_native_webview = require("@granite-js/native/react-native-webview");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_native30 = require("react-native");
 
 // src/components/NavigationBar/GameWebviewNavigationBar.tsx
 var import_react_native29 = require("@granite-js/react-native");
-var import_tds_react_native12 = require("@toss/tds-react-native");
-var import_react17 = require("react");
+var import_tds_react_native13 = require("@toss/tds-react-native");
+var import_es_hangul3 = require("es-hangul");
+var import_react18 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function GameWebviewNavigationBar() {
-  const { openConfirm } = (0, import_tds_react_native12.useDialog)();
+  const { openConfirm } = (0, import_tds_react_native13.useDialog)();
+  const global2 = getAppsInTossGlobals();
   const logging = useNavigationBarLogging();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const { navigationRightButton } = useNavigationBarContext();
   const { navigationBar } = getAppsInTossGlobals();
   const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
-  const handleGameWebviewClose = (0, import_react17.useCallback)(async () => {
+  const handleGameWebviewClose = (0, import_react18.useCallback)(async () => {
     logging.closeButtonClick();
-    (0, import_react_native29.closeView)();
-  }, [logging, openConfirm]);
+    const isConfirmed = await openConfirm({
+      title: `${(0, import_es_hangul3.josa)(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+      leftButton: "\uB2EB\uAE30",
+      rightButton: "\uC885\uB8CC\uD558\uAE30",
+      closeOnDimmerClick: true,
+      onEntered: logging.closePopupShow
+    });
+    logging.closePopupCtaClick(isConfirmed);
+    if (isConfirmed) {
+      (0, import_react_native29.closeView)();
+    }
+  }, [global2.brandDisplayName, logging, openConfirm]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     TopNavigation,
     {
@@ -1642,8 +1717,8 @@ function GameWebviewNavigationBar() {
 
 // src/components/GameWebView.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var GameWebView = (0, import_react18.forwardRef)(function GameWebView2(props, ref) {
-  (0, import_react18.useEffect)(() => {
+var GameWebView = (0, import_react19.forwardRef)(function GameWebView2(props, ref) {
+  (0, import_react19.useEffect)(() => {
     if (import_react_native30.Platform.OS === "ios") {
       (0, import_native_modules11.setIosSwipeGestureEnabled)({ isEnabled: false });
       return () => {
@@ -1660,11 +1735,11 @@ var GameWebView = (0, import_react18.forwardRef)(function GameWebView2(props, re
 
 // src/components/PartnerWebView.tsx
 var import_react_native_webview2 = require("@granite-js/native/react-native-webview");
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/NavigationBar/PartnerWebviewNavigationBar.tsx
 var import_react_native31 = require("@granite-js/react-native");
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const globals = getAppsInTossGlobals();
@@ -1675,7 +1750,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
   const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
-  const handleClose = (0, import_react19.useCallback)(async () => {
+  const handleClose = (0, import_react20.useCallback)(async () => {
     logging.closeButtonClick();
     (0, import_react_native31.closeView)();
   }, [logging]);
@@ -1699,7 +1774,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
 
 // src/components/PartnerWebView.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var PartnerWebView = (0, import_react20.forwardRef)(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
+var PartnerWebView = (0, import_react21.forwardRef)(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_webview2.WebView, { ref, ...webViewProps, style: { flex: 1 } })
@@ -2124,7 +2199,7 @@ async function tossAdEventLog(params) {
 }
 
 // src/bridge-handler/useBridgeHandler.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -2176,8 +2251,8 @@ function useBridgeHandler({
   asyncHandlerMap,
   eventListenerMap
 }) {
-  const ref = (0, import_react21.useRef)(null);
-  const injectedJavaScript = (0, import_react21.useMemo)(
+  const ref = (0, import_react22.useRef)(null);
+  const injectedJavaScript = (0, import_react22.useMemo)(
     () => `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
       Object.entries(constantHandlerMap).reduce(
         (acc, [key, value]) => {
@@ -2189,7 +2264,7 @@ function useBridgeHandler({
     )};`,
     [constantHandlerMap]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     ref.current?.injectJavaScript(injectedJavaScript);
   }, [injectedJavaScript]);
   const createHandleOnEvent = (functionName, eventId) => (response) => {
@@ -2203,7 +2278,7 @@ function useBridgeHandler({
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${serializedError});
     `);
   };
-  const $onMessage = (0, import_react21.useCallback)(
+  const $onMessage = (0, import_react22.useCallback)(
     async (e) => {
       onMessage?.(e);
       const data = parseNativeEventData(e.nativeEvent.data);
@@ -2263,13 +2338,13 @@ function parseNativeEventData(data) {
 
 // src/core/hooks/useSafeAreaInsetsEvent.tsx
 var import_react_native_safe_area_context2 = require("@granite-js/native/react-native-safe-area-context");
-var import_react22 = require("react");
+var import_react23 = require("react");
 function useSafeAreaInsetsEvent() {
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     safeAreaInsetsChange.emit(insets);
   }, [insets]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     return () => safeAreaInsetsChange.clearSubscriptions();
   }, []);
   return safeAreaInsetsChange;
@@ -2277,10 +2352,12 @@ function useSafeAreaInsetsEvent() {
 
 // src/core/hooks/useWebBackHandler.tsx
 var import_react_native35 = require("@granite-js/react-native");
-var import_react24 = require("react");
+var import_tds_react_native14 = require("@toss/tds-react-native");
+var import_es_hangul4 = require("es-hangul");
+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) {
@@ -2311,11 +2388,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 };
@@ -2333,19 +2410,21 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     removeEventListener: removeWebBackEventListener
   } = (0, import_react_native35.useBackEventState)();
   const logging = useNavigationBarLogging();
-  const addEventListener = (0, import_react24.useCallback)(
+  const { openConfirm } = (0, import_tds_react_native14.useDialog)();
+  const global2 = getAppsInTossGlobals();
+  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();
@@ -2355,10 +2434,33 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     if (hasHistory) {
       webViewRef.current?.injectJavaScript("window.history.back();");
     } else {
-      (0, import_react_native35.closeView)();
+      if (global2.webViewType !== "game") {
+        (0, import_react_native35.closeView)();
+        return;
+      }
+      const isConfirmed = await openConfirm({
+        title: `${(0, import_es_hangul4.josa)(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+        leftButton: "\uB2EB\uAE30",
+        rightButton: "\uC885\uB8CC\uD558\uAE30",
+        closeOnDimmerClick: true,
+        onEntered: logging.closePopupShow
+      });
+      logging.closePopupCtaClick(isConfirmed);
+      if (isConfirmed) {
+        (0, import_react_native35.closeView)();
+      }
     }
-  }, [hasHistory, hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  const handleWebHome = (0, import_react24.useCallback)(() => {
+  }, [
+    global2.webViewType,
+    global2.brandDisplayName,
+    hasHistory,
+    hasWebBackEvent,
+    webBackHandlersRef,
+    logging,
+    openConfirm,
+    webViewRef
+  ]);
+  const handleWebHome = (0, import_react25.useCallback)(() => {
     logging.homeButtonClick();
     if (homeEvent.hasSubscriptions()) {
       homeEvent.emit({});
@@ -2371,7 +2473,7 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     })();
     `);
   }, [hasWebBackEvent, webBackHandlersRef, logging, webViewInitialURL, webViewRef]);
-  return (0, import_react24.useMemo)(
+  return (0, import_react25.useMemo)(
     () => ({ addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange }),
     [addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange]
   );
@@ -2550,11 +2652,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 var import_native_modules16 = require("@apps-in-toss/native-modules");
 var import_react_native37 = 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_native37.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;
     }
@@ -2573,11 +2675,11 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
 
 // src/hooks/useWaitForReturnNavigator.tsx
 var import_react_native38 = 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_native38.useNavigation)();
-  const startNavigating = (0, import_react26.useCallback)(
+  const startNavigating = (0, import_react27.useCallback)(
     (route, params) => {
       return new Promise((resolve) => {
         callbacks.push(resolve);
@@ -2586,7 +2688,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) {
@@ -2613,9 +2715,9 @@ function useTopNavigation() {
 // src/hooks/useWebViewMemoryDebug.tsx
 var import_native_modules17 = require("@apps-in-toss/native-modules");
 var import_react_native39 = require("@granite-js/react-native");
-var import_tds_react_native13 = require("@toss/tds-react-native");
+var import_tds_react_native15 = require("@toss/tds-react-native");
 function useHandleWebViewProcessDidTerminate(webViewRef) {
-  const toast = (0, import_tds_react_native13.useToast)();
+  const toast = (0, import_tds_react_native15.useToast)();
   return () => {
     webViewDebugLog("AppsInTossWebViewProcessDidTerminate", {});
     toast.open("\uBB38\uC81C\uAC00 \uC0DD\uACA8\uC11C \uBBF8\uB2C8\uC571\uC744 \uB2E4\uC2DC \uC2DC\uC791\uD588\uC5B4\uC694.", {
@@ -2719,7 +2821,7 @@ var operationalEnvironment = appsInTossConstantBridges.getOperationalEnvironment
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
   partner: PartnerWebView,
-  external: import_tds_react_native14.ExternalWebViewScreen,
+  external: import_tds_react_native16.ExternalWebViewScreen,
   game: GameWebView
 };
 function mergeSchemeQueryParamsInto(url) {
@@ -2751,21 +2853,21 @@ 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 url = (0, import_react27.useMemo)(() => getWebViewURL(local), [local]);
+  const webViewRef = (0, import_react28.useRef)(null);
+  const url = (0, import_react28.useMemo)(() => getWebViewURL(local), [local]);
   const webBackHandler = useWebBackHandler(url, webViewRef);
   const global2 = getAppsInTossGlobals();
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const navigationBarContext = useNavigationBarContext();
   const safeAreaInsetsEvent = useSafeAreaInsetsEvent();
-  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react27.useState)(
+  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react28.useState)(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
     onMessage,
     eventListenerMap: {
       ...appsInTossEventBridges,
-      navigationAccessoryEvent: ({ onEvent, onError }) => import_tds_react_native14.tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
+      navigationAccessoryEvent: ({ onEvent, onError }) => import_tds_react_native16.tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
       backEvent: ({ onEvent }) => {
         webBackHandler.addEventListener(onEvent);
         return () => {
@@ -2854,7 +2956,7 @@ function WebView({ type, local, onMessage, ...props }) {
       }
     }
   });
-  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;
@@ -2875,7 +2977,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;
@@ -2954,7 +3056,7 @@ var import_types = require("@apps-in-toss/types");
 
 // src/ads/inlineAd/InlineAd.tsx
 var import_react_native46 = require("@granite-js/react-native");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_native47 = require("react-native");
 
 // src/ads/inlineAd/constants.ts
@@ -3336,7 +3438,7 @@ var EventTracker = class {
 
 // src/ads/inlineAd/ui/FeedBannerAdView.tsx
 var import_react_native_svg2 = require("@granite-js/native/react-native-svg");
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_native44 = require("react-native");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var ARROW_PATH = "m7.5 20.4c-.5-.5-.5-1.2 0-1.7l6.7-6.7-6.8-6.7c-.5-.5-.5-1.2 0-1.7s1.2-.5 1.7 0l7.5 7.5c.5.5.5 1.2 0 1.7l-7.5 7.5c-.2.3-.5.4-.8.4s-.6-.1-.8-.3z";
@@ -3355,7 +3457,7 @@ function FeedBannerAdView({
   paddingStyle,
   onPress
 }) {
-  const scale = (0, import_react28.useRef)(new import_react_native44.Animated.Value(1)).current;
+  const scale = (0, import_react29.useRef)(new import_react_native44.Animated.Value(1)).current;
   const animateScale = (toValue) => {
     import_react_native44.Animated.timing(scale, {
       toValue,
@@ -3591,7 +3693,7 @@ var styles = import_react_native44.StyleSheet.create({
 
 // src/ads/inlineAd/ui/ListBannerAdView.tsx
 var import_react_native_svg3 = require("@granite-js/native/react-native-svg");
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_native45 = require("react-native");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var SQUIRCLE_PATH = "M0 17.352C0 3.564 3.564 0 17.352 0H18.648C32.436 0 36 3.564 36 17.352V18.648C36 32.436 32.436 36 18.648 36H17.352C3.564 36 0 32.436 0 18.648V17.352Z";
@@ -3605,8 +3707,8 @@ function ListBannerAdView({
   colors: colors4,
   onPress
 }) {
-  const scale = (0, import_react29.useRef)(new import_react_native45.Animated.Value(1)).current;
-  const clipIdRef = (0, import_react29.useRef)(`clip-${Math.random().toString(36).slice(2)}`);
+  const scale = (0, import_react30.useRef)(new import_react_native45.Animated.Value(1)).current;
+  const clipIdRef = (0, import_react30.useRef)(`clip-${Math.random().toString(36).slice(2)}`);
   const animateScale = (toValue) => {
     import_react_native45.Animated.timing(scale, {
       toValue,
@@ -3914,21 +4016,21 @@ function InlineAd(props) {
     onAdFailedToRender,
     onNoFill
   } = props;
-  const slotIdRef = (0, import_react30.useRef)(createSlotId());
-  const [ad, setAd] = (0, import_react30.useState)(null);
-  const [isAdBadgeEnabled, setIsAdBadgeEnabled] = (0, import_react30.useState)(true);
-  const eventTrackerRef = (0, import_react30.useRef)(null);
-  const eventPayloadRef = (0, import_react30.useRef)(null);
-  const hasRenderedRef = (0, import_react30.useRef)(false);
-  const hasLoggedImp1pxRef = (0, import_react30.useRef)(false);
-  const hasLoggedImp100pRef = (0, import_react30.useRef)(false);
-  const hasNotifiedViewableRef = (0, import_react30.useRef)(false);
-  const viewableTimerRef = (0, import_react30.useRef)(null);
-  const refetchIntervalMsRef = (0, import_react30.useRef)(null);
-  const lastImp1pxAtRef = (0, import_react30.useRef)(null);
-  const loadingRef = (0, import_react30.useRef)(false);
-  const loadRef = (0, import_react30.useRef)(null);
-  const callbacksRef = (0, import_react30.useRef)({
+  const slotIdRef = (0, import_react31.useRef)(createSlotId());
+  const [ad, setAd] = (0, import_react31.useState)(null);
+  const [isAdBadgeEnabled, setIsAdBadgeEnabled] = (0, import_react31.useState)(true);
+  const eventTrackerRef = (0, import_react31.useRef)(null);
+  const eventPayloadRef = (0, import_react31.useRef)(null);
+  const hasRenderedRef = (0, import_react31.useRef)(false);
+  const hasLoggedImp1pxRef = (0, import_react31.useRef)(false);
+  const hasLoggedImp100pRef = (0, import_react31.useRef)(false);
+  const hasNotifiedViewableRef = (0, import_react31.useRef)(false);
+  const viewableTimerRef = (0, import_react31.useRef)(null);
+  const refetchIntervalMsRef = (0, import_react31.useRef)(null);
+  const lastImp1pxAtRef = (0, import_react31.useRef)(null);
+  const loadingRef = (0, import_react31.useRef)(false);
+  const loadRef = (0, import_react31.useRef)(null);
+  const callbacksRef = (0, import_react31.useRef)({
     onAdRendered,
     onAdViewable,
     onAdClicked,
@@ -3936,7 +4038,7 @@ function InlineAd(props) {
     onAdFailedToRender,
     onNoFill
   });
-  const isMountedRef = (0, import_react30.useRef)(false);
+  const isMountedRef = (0, import_react31.useRef)(false);
   const colorScheme = (0, import_react_native47.useColorScheme)();
   const selectedTheme = theme ?? DEFAULT_INLINE_AD_THEME;
   const resolvedTheme = selectedTheme === "auto" ? colorScheme === "dark" ? "dark" : "light" : selectedTheme;
@@ -3953,7 +4055,7 @@ function InlineAd(props) {
     onAdFailedToRender,
     onNoFill
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
@@ -3963,7 +4065,7 @@ function InlineAd(props) {
       }
     };
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const normalizedAdGroupId = normalizeAdGroupId(adGroupId);
     const loadAdRequest = () => {
       if (loadingRef.current) {
@@ -4048,7 +4150,7 @@ function InlineAd(props) {
       loadRef.current?.();
     }
   });
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!ad || hasRenderedRef.current) {
       return;
     }

package/dist/index.js

@@ -622,6 +622,27 @@ function useHardwareBackPress(handler) {
 import { closeView as closeView3, useBackEventContext, useNavigation } from "@granite-js/react-native";
 import { useMemo as useMemo2 } from "react";
 
+// src/components/NavigationBar/RNNavigationBar/hooks/useCloseConfirm.ts
+import { useDialog as useDialog3 } from "@toss/tds-react-native";
+import { josa as josa2 } from "es-hangul";
+import { useCallback as useCallback6 } from "react";
+function useCloseConfirm() {
+  const { brandDisplayName } = getAppsInTossGlobals();
+  const { openConfirm } = useDialog3();
+  return useCallback6(
+    async ({ onEntered }) => {
+      return await openConfirm({
+        title: `${josa2(brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+        leftButton: "\uB2EB\uAE30",
+        rightButton: "\uC885\uB8CC\uD558\uAE30",
+        closeOnDimmerClick: true,
+        onEntered
+      });
+    },
+    [brandDisplayName, openConfirm]
+  );
+}
+
 // src/utils/eventEmitter.ts
 var EventEmitter = class {
   listeners = {};
@@ -666,8 +687,12 @@ var safeAreaInsetsChange = createEvent("safeAreaInsetsChange");
 import { Granite as Granite3 } from "@granite-js/react-native";
 var NAVI_BAR_IMPRESSION_SCHEMA_ID = 1596837;
 var NAVI_BAR_IMPRESSION_LOG_NAME = "appsintoss_app_visit__common_module::impression__navigation_bar";
+var CLOSE_POPUP_SHOW_SCHEMA_ID = 1644490;
+var CLOSE_POPUP_SHOW_LOG_NAME = "appsintoss_app_visit__common_module::popup__close_app";
 var CLOSE_BUTTON_CLICK_SCHEMA_ID = 1596831;
 var CLOSE_BUTTON_CLICK_LOG_NAME = "appsintoss_app_visit__common_module::click__icon_close";
+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 useNavigationBarLogging() {
@@ -710,8 +735,32 @@ function useNavigationBarLogging() {
       }
     });
   };
+  const logClosePopupShow = () => {
+    sendLog({
+      log_name: CLOSE_POPUP_SHOW_LOG_NAME,
+      log_type: "popup",
+      params: {
+        ...baseParams,
+        schema_id: CLOSE_POPUP_SHOW_SCHEMA_ID
+      }
+    });
+  };
+  const logClosePopupCtaClick = (confirm) => {
+    sendLog({
+      log_name: CLOSE_POPUP_CTA_CLICK_LOG_NAME,
+      log_type: "event",
+      params: {
+        ...baseParams,
+        close_yn: confirm ? "Y" : "N",
+        schema_id: CLOSE_POPUP_CTA_CLICK_SCHEMA_ID,
+        event_type: "click"
+      }
+    });
+  };
   return {
     navBarImpression: logNavBarImpression,
+    closePopupShow: logClosePopupShow,
+    closePopupCtaClick: logClosePopupCtaClick,
     closeButtonClick: logCloseButtonClick,
     homeButtonClick: logHomeButtonClick
   };
@@ -722,15 +771,30 @@ function useNavigationEvent() {
   const backEventContext = useBackEventContext();
   const logging = useNavigationBarLogging();
   const navigation = useNavigation();
-  return useMemo2(
-    () => ({
+  const closeConfirm = useCloseConfirm();
+  const global2 = getAppsInTossGlobals();
+  return useMemo2(() => {
+    const close = async () => {
+      if (global2.appType !== "game") {
+        closeView3();
+        return;
+      }
+      const hasConfirmed = await closeConfirm({
+        onEntered: logging.closePopupShow
+      });
+      logging.closePopupCtaClick(hasConfirmed);
+      if (hasConfirmed) {
+        closeView3();
+      }
+    };
+    return {
       handleBack: () => {
         if (backEventContext.hasBackEvent) {
           backEventContext.onBack();
         } else if (navigation.canGoBack()) {
           navigation.goBack();
         } else {
-          closeView3();
+          close();
         }
       },
       handleHomeButtonClick: () => {
@@ -743,11 +807,10 @@ function useNavigationEvent() {
       },
       handleCloseButtonClick: () => {
         logging.closeButtonClick();
-        closeView3();
+        close();
       }
-    }),
-    [backEventContext, navigation, logging]
-  );
+    };
+  }, [global2.appType, backEventContext, navigation, closeConfirm, logging]);
 }
 
 // src/core/hooks/useMoreButtonBottomSheet/index.tsx
@@ -760,7 +823,7 @@ import { useEffect as useEffect5, useState as useState4 } from "react";
 // src/core/hooks/useMoreButtonBottomSheet/AppShareListMenu.tsx
 import { getOperationalEnvironment, shareWithScheme } from "@apps-in-toss/native-modules";
 import { getSchemeUri as getSchemeUri4 } from "@granite-js/react-native";
-import { useDialog as useDialog3 } from "@toss/tds-react-native";
+import { useDialog as useDialog4 } from "@toss/tds-react-native";
 
 // src/core/hooks/useMoreButtonBottomSheet/Menu.tsx
 import { ListRow, Asset as Asset2 } from "@toss/tds-react-native";
@@ -910,7 +973,7 @@ var APP_SHARE_MENU_INFO = {
 function AppShareListMenu() {
   const initialScheme = getSchemeUri4();
   const isSandbox = getOperationalEnvironment() === "sandbox";
-  const { openConfirm } = useDialog3();
+  const { openConfirm } = useDialog4();
   const schemeForShare = addParamsToUrl(initialScheme, {
     referrer: SHARE_SCHEME_REFERRER
   });
@@ -1591,20 +1654,32 @@ import { Platform as Platform3 } from "react-native";
 
 // src/components/NavigationBar/GameWebviewNavigationBar.tsx
 import { closeView as closeView4 } from "@granite-js/react-native";
-import { useDialog as useDialog4 } from "@toss/tds-react-native";
-import { useCallback as useCallback6 } from "react";
+import { useDialog as useDialog5 } from "@toss/tds-react-native";
+import { josa as josa3 } from "es-hangul";
+import { useCallback as useCallback7 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 function GameWebviewNavigationBar() {
-  const { openConfirm } = useDialog4();
+  const { openConfirm } = useDialog5();
+  const global2 = getAppsInTossGlobals();
   const logging = useNavigationBarLogging();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const { navigationRightButton } = useNavigationBarContext();
   const { navigationBar } = getAppsInTossGlobals();
   const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
-  const handleGameWebviewClose = useCallback6(async () => {
+  const handleGameWebviewClose = useCallback7(async () => {
     logging.closeButtonClick();
-    closeView4();
-  }, [logging, openConfirm]);
+    const isConfirmed = await openConfirm({
+      title: `${josa3(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+      leftButton: "\uB2EB\uAE30",
+      rightButton: "\uC885\uB8CC\uD558\uAE30",
+      closeOnDimmerClick: true,
+      onEntered: logging.closePopupShow
+    });
+    logging.closePopupCtaClick(isConfirmed);
+    if (isConfirmed) {
+      closeView4();
+    }
+  }, [global2.brandDisplayName, logging, openConfirm]);
   return /* @__PURE__ */ jsx20(
     TopNavigation,
     {
@@ -1647,7 +1722,7 @@ import { forwardRef as forwardRef2 } from "react";
 
 // src/components/NavigationBar/PartnerWebviewNavigationBar.tsx
 import { closeView as closeView5 } from "@granite-js/react-native";
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const globals = getAppsInTossGlobals();
@@ -1658,7 +1733,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
   const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
-  const handleClose = useCallback7(async () => {
+  const handleClose = useCallback8(async () => {
     logging.closeButtonClick();
     closeView5();
   }, [logging]);
@@ -2111,7 +2186,7 @@ async function tossAdEventLog(params) {
 }
 
 // src/bridge-handler/useBridgeHandler.tsx
-import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useMemo as useMemo3, useRef as useRef3 } from "react";
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -2190,7 +2265,7 @@ function useBridgeHandler({
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${serializedError});
     `);
   };
-  const $onMessage = useCallback8(
+  const $onMessage = useCallback9(
     async (e) => {
       onMessage?.(e);
       const data = parseNativeEventData(e.nativeEvent.data);
@@ -2264,10 +2339,12 @@ function useSafeAreaInsetsEvent() {
 
 // src/core/hooks/useWebBackHandler.tsx
 import { closeView as closeView6, useBackEventState } from "@granite-js/react-native";
-import { useCallback as useCallback10, useMemo as useMemo5 } from "react";
+import { useDialog as useDialog6 } from "@toss/tds-react-native";
+import { josa as josa4 } from "es-hangul";
+import { useCallback as useCallback11, useMemo as useMemo5 } from "react";
 
 // src/hooks/useWebviewHistoryStack.tsx
-import { useCallback as useCallback9, useMemo as useMemo4, useReducer } from "react";
+import { useCallback as useCallback10, useMemo as useMemo4, useReducer } from "react";
 var INITIAL_STATE = { stack: [], index: -1 };
 function reducer(state, action) {
   switch (action.type) {
@@ -2299,7 +2376,7 @@ function reducer(state, action) {
 }
 function useWebViewHistory() {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
-  const onNavigationStateChange = useCallback9(({ url, canGoForward: canGoForward2 }) => {
+  const onNavigationStateChange = useCallback10(({ url, canGoForward: canGoForward2 }) => {
     dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
   }, []);
   const { canGoBack, canGoForward } = useMemo4(() => {
@@ -2320,19 +2397,21 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     removeEventListener: removeWebBackEventListener
   } = useBackEventState();
   const logging = useNavigationBarLogging();
-  const addEventListener = useCallback10(
+  const { openConfirm } = useDialog6();
+  const global2 = getAppsInTossGlobals();
+  const addEventListener = useCallback11(
     (handler) => {
       addWebBackEventListener(handler);
     },
     [addWebBackEventListener]
   );
-  const removeEventListener = useCallback10(
+  const removeEventListener = useCallback11(
     (handler) => {
       removeWebBackEventListener(handler);
     },
     [removeWebBackEventListener]
   );
-  const handleWebBack = useCallback10(async () => {
+  const handleWebBack = useCallback11(async () => {
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
         handler();
@@ -2342,10 +2421,33 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     if (hasHistory) {
       webViewRef.current?.injectJavaScript("window.history.back();");
     } else {
-      closeView6();
+      if (global2.webViewType !== "game") {
+        closeView6();
+        return;
+      }
+      const isConfirmed = await openConfirm({
+        title: `${josa4(global2.brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+        leftButton: "\uB2EB\uAE30",
+        rightButton: "\uC885\uB8CC\uD558\uAE30",
+        closeOnDimmerClick: true,
+        onEntered: logging.closePopupShow
+      });
+      logging.closePopupCtaClick(isConfirmed);
+      if (isConfirmed) {
+        closeView6();
+      }
     }
-  }, [hasHistory, hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  const handleWebHome = useCallback10(() => {
+  }, [
+    global2.webViewType,
+    global2.brandDisplayName,
+    hasHistory,
+    hasWebBackEvent,
+    webBackHandlersRef,
+    logging,
+    openConfirm,
+    webViewRef
+  ]);
+  const handleWebHome = useCallback11(() => {
     logging.homeButtonClick();
     if (homeEvent.hasSubscriptions()) {
       homeEvent.emit({});
@@ -2560,11 +2662,11 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
 
 // src/hooks/useWaitForReturnNavigator.tsx
 import { useNavigation as useNavigation3, useVisibilityChange } from "@granite-js/react-native";
-import { useCallback as useCallback11, useRef as useRef4 } from "react";
+import { useCallback as useCallback12, useRef as useRef4 } from "react";
 function useWaitForReturnNavigator() {
   const callbacks = useRef4([]).current;
   const navigation = useNavigation3();
-  const startNavigating = useCallback11(
+  const startNavigating = useCallback12(
     (route, params) => {
       return new Promise((resolve) => {
         callbacks.push(resolve);
@@ -2573,7 +2675,7 @@ function useWaitForReturnNavigator() {
     },
     [callbacks, navigation]
   );
-  const handleVisibilityChange = useCallback11(
+  const handleVisibilityChange = useCallback12(
     (state) => {
       if (state === "visible" && callbacks.length > 0) {
         for (const callback of callbacks) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -55,12 +55,12 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/analytics": "2.9.0",
-    "@apps-in-toss/cli": "2.9.0",
-    "@apps-in-toss/native-modules": "2.9.0",
-    "@apps-in-toss/plugins": "2.9.0",
-    "@apps-in-toss/types": "2.9.0",
-    "@apps-in-toss/user-scripts": "^2.9.0",
+    "@apps-in-toss/analytics": "2.9.2",
+    "@apps-in-toss/cli": "2.9.2",
+    "@apps-in-toss/native-modules": "2.9.2",
+    "@apps-in-toss/plugins": "2.9.2",
+    "@apps-in-toss/types": "2.9.2",
+    "@apps-in-toss/user-scripts": "^2.9.2",
     "es-hangul": "^2.3.2"
   },
   "devDependencies": {