@apps-in-toss/framework 0.0.18 → 0.0.20

package/dist/index.cjs

@@ -41,6 +41,7 @@ __export(src_exports, {
   fetchContacts: () => fetchContacts,
   getClipboardText: () => getClipboardText,
   getCurrentLocation: () => getCurrentLocation,
+  getDeviceId: () => getDeviceId,
   getOperationalEnvironment: () => getOperationalEnvironment,
   getTossAppVersion: () => getTossAppVersion,
   openCamera: () => openCamera,
@@ -289,6 +290,11 @@ function getTossAppVersion() {
   return AppsInTossModule.tossAppVersion;
 }
 
+// src/native-modules/getDeviceId.ts
+function getDeviceId() {
+  return AppsInTossModule.deviceId;
+}
+
 // src/native-modules/storage.ts
 function getItem(key) {
   return AppsInTossModule.getStorageItem({ key });
@@ -319,7 +325,7 @@ var TossPay = {
 };
 
 // src/components/WebView.tsx
-var import_react_native11 = require("@toss-design-system/react-native");
+var import_react_native12 = require("@toss-design-system/react-native");
 var import_private = require("@toss-design-system/react-native/private");
 var import_react3 = require("react");
 var import_react_native_bedrock5 = require("react-native-bedrock");
@@ -328,8 +334,10 @@ var bedrockConstantBridges = __toESM(require("react-native-bedrock/constant-brid
 
 // src/components/GameWebView.tsx
 var import_react_native_webview = require("@react-native-bedrock/native/react-native-webview");
+var import_react_native10 = require("@toss-design-system/react-native");
+var import_es_hangul = require("es-hangul");
 var import_react2 = require("react");
-var import_react_native10 = require("react-native");
+var import_react_native11 = require("react-native");
 var import_react_native_bedrock4 = require("react-native-bedrock");
 
 // src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
@@ -413,6 +421,9 @@ function GameNavigationBar({ onClose }) {
           import_react_native9.TouchableOpacity,
           {
             hitSlop: { left: 8, right: 8 },
+            accessibilityRole: "button",
+            accessible: true,
+            accessibilityLabel: "\uAC8C\uC784\uC885\uB8CC",
             style: {
               padding: import_react_native9.Platform.OS === "ios" ? 7 : 9
             },
@@ -428,16 +439,41 @@ function GameNavigationBar({ onClose }) {
 // src/components/GameWebView.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var GameWebView = (0, import_react2.forwardRef)(function GameWebView2(props, ref) {
+  const { openConfirm } = (0, import_react_native10.useDialog)();
+  const { brandDisplayName } = getAppsInTossGlobals();
+  const handleClose = (0, import_react2.useCallback)(async () => {
+    const isConfirmed = await openConfirm({
+      title: `${(0, import_es_hangul.josa)(brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+      leftButton: "\uCDE8\uC18C",
+      rightButton: "\uC885\uB8CC\uD558\uAE30",
+      closeOnDimmerClick: true
+    });
+    if (isConfirmed) {
+      (0, import_react_native_bedrock4.closeView)();
+    }
+  }, [brandDisplayName, openConfirm]);
+  (0, import_react2.useEffect)(() => {
+    if (import_react_native11.Platform.OS === "ios") {
+      (0, import_react_native_bedrock4.setIosSwipeGestureEnabled)({ isEnabled: false });
+      return () => {
+        (0, import_react_native_bedrock4.setIosSwipeGestureEnabled)({ isEnabled: true });
+      };
+    }
+    return;
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const backHandler = () => {
+      handleClose();
+      return true;
+    };
+    import_react_native11.BackHandler.addEventListener("hardwareBackPress", backHandler);
+    return () => {
+      import_react_native11.BackHandler.removeEventListener("hardwareBackPress", backHandler);
+    };
+  }, [handleClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      GameNavigationBar,
-      {
-        onClose: () => {
-          (0, import_react_native_bedrock4.closeView)();
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native10.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_webview.WebView, { ref, ...props }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GameNavigationBar, { onClose: handleClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native11.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_webview.WebView, { ref, ...props }) })
   ] });
 });
 
@@ -458,6 +494,7 @@ __export(async_bridges_exports, {
 // src/constant-bridges.ts
 var constant_bridges_exports = {};
 __export(constant_bridges_exports, {
+  getDeviceId: () => getDeviceId,
   getOperationalEnvironment: () => getOperationalEnvironment,
   getTossAppVersion: () => getTossAppVersion
 });
@@ -478,8 +515,8 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var appsInTossGlobals = getAppsInTossGlobals();
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
-  partner: import_react_native11.PartnerWebViewScreen,
-  external: import_react_native11.ExternalWebViewScreen,
+  partner: import_react_native12.PartnerWebViewScreen,
+  external: import_react_native12.ExternalWebViewScreen,
   game: GameWebView
 };
 function mergeSchemeQueryParamsInto(url) {
@@ -508,13 +545,17 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
+  const bedrockEvent = (0, import_react_native_bedrock5.useBedrockEvent)();
   const uri = (0, import_react3.useMemo)(() => getWebViewUri(local), [local]);
   const top = (0, import_private.useSafeAreaTop)();
   const bottom = (0, import_private.useSafeAreaBottom)();
   const handler = (0, import_react_native_bedrock5.useBridgeHandler)({
     onMessage,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    eventListenerMap: event_bridges_exports,
+    eventListenerMap: {
+      ...event_bridges_exports,
+      backEvent: ({ onEvent, onError, options }) => bedrockEvent.addEventListener("backEvent", { onEvent, onError, options })
+    },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     constantHandlerMap: {
@@ -528,7 +569,7 @@ function WebView({ type, local, onMessage, ...props }) {
     asyncHandlerMap: {
       ...bedrockAsyncBridges,
       ...async_bridges_exports,
-      // internal
+      /** internal */
       openPermissionDialog: AppsInTossModule.openPermissionDialog,
       /** Storage */
       getStorageItem: Storage.getItem,
@@ -640,6 +681,7 @@ var Accuracy2 = /* @__PURE__ */ ((Accuracy3) => {
   fetchContacts,
   getClipboardText,
   getCurrentLocation,
+  getDeviceId,
   getOperationalEnvironment,
   getTossAppVersion,
   openCamera,

package/dist/index.d.cts

@@ -1057,6 +1057,36 @@ declare function getOperationalEnvironment(): 'toss' | 'sandbox';
  */
 declare function getTossAppVersion(): string;
 
+/**
+ * @public
+ * @category 환경 확인
+ * @kind function
+ * @name getDeviceId
+ * @description
+ * 사용 중인 기기의 고유 식별자를 문자열로 반환해요.
+ *
+ * 이 함수는 현재 사용 중인 기기의 고유 식별자를 문자열로 반환해요. 기기별로 설정이나 데이터를 저장하거나 사용자의 기기를 식별해서 로그를 기록하고 분석하는 데 사용할 수 있어요. 같은 사용자의 여러 기기를 구분하는 데도 유용해요.
+ *
+ * @returns {string} 기기의 고유 식별자를 나타내는 문자열이에요.
+ *
+ * @example
+ * ### 기기 고유 식별자 가져오기
+ *
+ * ```tsx
+ * import { getDeviceId } from '@apps-in-toss/framework';
+ * import { Text } from 'react-native';
+ *
+ * function MyPage() {
+ *   const id = getDeviceId();
+ *
+ *   return (
+ *     <Text>사용자의 기기 고유 식별자: {id}</Text>
+ *   );
+ * }
+ * ```
+ */
+declare function getDeviceId(): string;
+
 /**
  * @public
  * @category 저장소
@@ -1226,4 +1256,4 @@ declare const env: {
     getDeploymentId: () => string | undefined;
 };
 
-export { Accuracy, AppsInToss, type ContactEntity, type ExternalWebViewProps, type FetchAlbumPhotosOptions, type GameWebViewProps, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type PartnerWebViewProps, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, Storage, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, getTossAppVersion, openCamera, setClipboardText, startUpdateLocation, useGeolocation };
+export { Accuracy, AppsInToss, type ContactEntity, type ExternalWebViewProps, type FetchAlbumPhotosOptions, type GameWebViewProps, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type PartnerWebViewProps, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, Storage, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getDeviceId, getOperationalEnvironment, getTossAppVersion, openCamera, setClipboardText, startUpdateLocation, useGeolocation };

package/dist/index.d.ts

@@ -1057,6 +1057,36 @@ declare function getOperationalEnvironment(): 'toss' | 'sandbox';
  */
 declare function getTossAppVersion(): string;
 
+/**
+ * @public
+ * @category 환경 확인
+ * @kind function
+ * @name getDeviceId
+ * @description
+ * 사용 중인 기기의 고유 식별자를 문자열로 반환해요.
+ *
+ * 이 함수는 현재 사용 중인 기기의 고유 식별자를 문자열로 반환해요. 기기별로 설정이나 데이터를 저장하거나 사용자의 기기를 식별해서 로그를 기록하고 분석하는 데 사용할 수 있어요. 같은 사용자의 여러 기기를 구분하는 데도 유용해요.
+ *
+ * @returns {string} 기기의 고유 식별자를 나타내는 문자열이에요.
+ *
+ * @example
+ * ### 기기 고유 식별자 가져오기
+ *
+ * ```tsx
+ * import { getDeviceId } from '@apps-in-toss/framework';
+ * import { Text } from 'react-native';
+ *
+ * function MyPage() {
+ *   const id = getDeviceId();
+ *
+ *   return (
+ *     <Text>사용자의 기기 고유 식별자: {id}</Text>
+ *   );
+ * }
+ * ```
+ */
+declare function getDeviceId(): string;
+
 /**
  * @public
  * @category 저장소
@@ -1226,4 +1256,4 @@ declare const env: {
     getDeploymentId: () => string | undefined;
 };
 
-export { Accuracy, AppsInToss, type ContactEntity, type ExternalWebViewProps, type FetchAlbumPhotosOptions, type GameWebViewProps, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type PartnerWebViewProps, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, Storage, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, getTossAppVersion, openCamera, setClipboardText, startUpdateLocation, useGeolocation };
+export { Accuracy, AppsInToss, type ContactEntity, type ExternalWebViewProps, type FetchAlbumPhotosOptions, type GameWebViewProps, type GetCurrentLocationOptions, type ImageResponse, type Location, type LocationCoords, type OpenCameraOptions, type PartnerWebViewProps, type StartUpdateLocationOptions, type StartUpdateLocationSubscription, Storage, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getDeviceId, getOperationalEnvironment, getTossAppVersion, openCamera, setClipboardText, startUpdateLocation, useGeolocation };

package/dist/index.js

@@ -243,6 +243,11 @@ function getTossAppVersion() {
   return AppsInTossModule.tossAppVersion;
 }
 
+// src/native-modules/getDeviceId.ts
+function getDeviceId() {
+  return AppsInTossModule.deviceId;
+}
+
 // src/native-modules/storage.ts
 function getItem(key) {
   return AppsInTossModule.getStorageItem({ key });
@@ -279,7 +284,7 @@ import {
 } from "@toss-design-system/react-native";
 import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop2 } from "@toss-design-system/react-native/private";
 import { useMemo } from "react";
-import { getSchemeUri, useBridgeHandler } from "react-native-bedrock";
+import { getSchemeUri, useBridgeHandler, useBedrockEvent } from "react-native-bedrock";
 import * as bedrockAsyncBridges from "react-native-bedrock/async-bridges";
 import * as bedrockConstantBridges from "react-native-bedrock/constant-bridges";
 
@@ -287,9 +292,11 @@ import * as bedrockConstantBridges from "react-native-bedrock/constant-bridges";
 import {
   WebView as PlainWebView
 } from "@react-native-bedrock/native/react-native-webview";
-import { forwardRef } from "react";
-import { View as View3 } from "react-native";
-import { closeView } from "react-native-bedrock";
+import { useDialog } from "@toss-design-system/react-native";
+import { josa } from "es-hangul";
+import { forwardRef, useCallback, useEffect as useEffect2 } from "react";
+import { BackHandler, Platform as Platform4, View as View3 } from "react-native";
+import { closeView, setIosSwipeGestureEnabled } from "react-native-bedrock";
 
 // src/components/GameWebViewNavigationBar/GameNavigationBar.tsx
 import { SvgXml } from "@react-native-bedrock/native/react-native-svg";
@@ -372,6 +379,9 @@ function GameNavigationBar({ onClose }) {
           TouchableOpacity,
           {
             hitSlop: { left: 8, right: 8 },
+            accessibilityRole: "button",
+            accessible: true,
+            accessibilityLabel: "\uAC8C\uC784\uC885\uB8CC",
             style: {
               padding: Platform3.OS === "ios" ? 7 : 9
             },
@@ -387,15 +397,40 @@ function GameNavigationBar({ onClose }) {
 // src/components/GameWebView.tsx
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var GameWebView = forwardRef(function GameWebView2(props, ref) {
+  const { openConfirm } = useDialog();
+  const { brandDisplayName } = getAppsInTossGlobals();
+  const handleClose = useCallback(async () => {
+    const isConfirmed = await openConfirm({
+      title: `${josa(brandDisplayName, "\uC744/\uB97C")} \uC885\uB8CC\uD560\uAE4C\uC694?`,
+      leftButton: "\uCDE8\uC18C",
+      rightButton: "\uC885\uB8CC\uD558\uAE30",
+      closeOnDimmerClick: true
+    });
+    if (isConfirmed) {
+      closeView();
+    }
+  }, [brandDisplayName, openConfirm]);
+  useEffect2(() => {
+    if (Platform4.OS === "ios") {
+      setIosSwipeGestureEnabled({ isEnabled: false });
+      return () => {
+        setIosSwipeGestureEnabled({ isEnabled: true });
+      };
+    }
+    return;
+  }, []);
+  useEffect2(() => {
+    const backHandler = () => {
+      handleClose();
+      return true;
+    };
+    BackHandler.addEventListener("hardwareBackPress", backHandler);
+    return () => {
+      BackHandler.removeEventListener("hardwareBackPress", backHandler);
+    };
+  }, [handleClose]);
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(
-      GameNavigationBar,
-      {
-        onClose: () => {
-          closeView();
-        }
-      }
-    ),
+    /* @__PURE__ */ jsx4(GameNavigationBar, { onClose: handleClose }),
     /* @__PURE__ */ jsx4(View3, { style: { flex: 1 }, children: /* @__PURE__ */ jsx4(PlainWebView, { ref, ...props }) })
   ] });
 });
@@ -417,6 +452,7 @@ __export(async_bridges_exports, {
 // src/constant-bridges.ts
 var constant_bridges_exports = {};
 __export(constant_bridges_exports, {
+  getDeviceId: () => getDeviceId,
   getOperationalEnvironment: () => getOperationalEnvironment,
   getTossAppVersion: () => getTossAppVersion
 });
@@ -467,13 +503,17 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
+  const bedrockEvent = useBedrockEvent();
   const uri = useMemo(() => getWebViewUri(local), [local]);
   const top = useSafeAreaTop2();
   const bottom = useSafeAreaBottom();
   const handler = useBridgeHandler({
     onMessage,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    eventListenerMap: event_bridges_exports,
+    eventListenerMap: {
+      ...event_bridges_exports,
+      backEvent: ({ onEvent, onError, options }) => bedrockEvent.addEventListener("backEvent", { onEvent, onError, options })
+    },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     constantHandlerMap: {
@@ -487,7 +527,7 @@ function WebView({ type, local, onMessage, ...props }) {
     asyncHandlerMap: {
       ...bedrockAsyncBridges,
       ...async_bridges_exports,
-      // internal
+      /** internal */
       openPermissionDialog: AppsInTossModule.openPermissionDialog,
       /** Storage */
       getStorageItem: Storage.getItem,
@@ -554,12 +594,12 @@ function ensureValue(value, name) {
 }
 
 // src/hooks/useGeolocation.ts
-import { useState, useEffect as useEffect2 } from "react";
+import { useState, useEffect as useEffect3 } from "react";
 import { useVisibility } from "react-native-bedrock";
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = useVisibility();
   const [location, setLocation] = useState(null);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isVisible) {
       return;
     }
@@ -598,6 +638,7 @@ export {
   fetchContacts,
   getClipboardText,
   getCurrentLocation,
+  getDeviceId,
   getOperationalEnvironment,
   getTossAppVersion,
   openCamera,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
@@ -56,13 +56,14 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/cli": "0.0.18",
-    "@apps-in-toss/plugins": "0.0.18"
+    "@apps-in-toss/cli": "0.0.20",
+    "@apps-in-toss/plugins": "0.0.20",
+    "es-hangul": "^2.3.2"
   },
   "devDependencies": {
-    "@react-native-bedrock/mpack-next": "^0.0.18",
-    "@react-native-bedrock/native": "0.0.16",
-    "@toss-design-system/react-native": "^0.4.1",
+    "@react-native-bedrock/mpack-next": "0.0.19",
+    "@react-native-bedrock/native": "0.0.19",
+    "@toss-design-system/react-native": "^0.5.0",
     "@types/kill-port": "^2.0.1",
     "@types/react": "18.3.3",
     "@types/yauzl": "^2.10.3",
@@ -72,7 +73,7 @@
     "kill-port": "^2.0.1",
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "react-native-bedrock": "^0.0.18",
+    "react-native-bedrock": "0.0.19",
     "tsup": "^8.3.5",
     "typescript": "4.9.5",
     "vitest": "^3.0.3",
@@ -80,15 +81,15 @@
     "yauzl": "^3.2.0"
   },
   "peerDependencies": {
-    "@react-native-bedrock/native": "*",
-    "@toss-design-system/react-native": "^0.4.1",
+    "@react-native-bedrock/native": ">= 0.0.18",
+    "@toss-design-system/react-native": ">= 0.5.0",
     "@types/react": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-bedrock": "*"
+    "react-native-bedrock": ">= 0.0.18"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2563312f28a4702050104bebd4c1289183c705d2"
+  "gitHead": "5c967237d66e19465d53f6ed842fe9c4f39b768f"
 }

package/src/constant-bridges.ts

@@ -1,2 +1,3 @@
 export * from './native-modules/getOperationalEnvironment.js';
 export * from './native-modules/getTossAppVersion.js';
+export * from './native-modules/getDeviceId.js';