@apps-in-toss/framework 0.0.0-dev.1743134070910 → 0.0.0-dev.1744801739343

package/dist/index.cjs

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   Accuracy: () => Accuracy2,
   AppsInToss: () => AppsInToss,
+  Storage: () => Storage,
   TossPay: () => TossPay,
   WebView: () => WebView,
   appLogin: () => appLogin,
@@ -40,7 +41,9 @@ __export(src_exports, {
   fetchContacts: () => fetchContacts,
   getClipboardText: () => getClipboardText,
   getCurrentLocation: () => getCurrentLocation,
+  getDeviceId: () => getDeviceId,
   getOperationalEnvironment: () => getOperationalEnvironment,
+  getTossAppVersion: () => getTossAppVersion,
   openCamera: () => openCamera,
   setClipboardText: () => setClipboardText,
   startUpdateLocation: () => startUpdateLocation,
@@ -282,6 +285,39 @@ function getOperationalEnvironment() {
   return AppsInTossModule.operationalEnvironment;
 }
 
+// src/native-modules/getTossAppVersion.ts
+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 });
+}
+function setItem(key, value) {
+  return AppsInTossModule.setStorageItem({
+    key,
+    value
+  });
+}
+function removeItem(key) {
+  return AppsInTossModule.removeStorageItem({ key });
+}
+function clearItems() {
+  return AppsInTossModule.clearStorage({});
+}
+var Storage = {
+  getItem,
+  setItem,
+  removeItem,
+  clearItems
+};
+
 // src/native-modules/index.ts
 var TossPay = {
   checkoutPayment,
@@ -289,16 +325,19 @@ var TossPay = {
 };
 
 // src/components/WebView.tsx
-var import_react_native11 = require("@toss-design-system/react-native");
-var import_react3 = require("react");
+var import_react_native12 = require("@toss-design-system/react-native");
+var import_private = require("@toss-design-system/react-native/private");
+var import_react4 = require("react");
 var import_react_native_bedrock5 = require("react-native-bedrock");
 var bedrockAsyncBridges = __toESM(require("react-native-bedrock/async-bridges"), 1);
 var bedrockConstantBridges = __toESM(require("react-native-bedrock/constant-bridges"), 1);
 
 // 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
@@ -382,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
             },
@@ -397,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 }) })
   ] });
 });
 
@@ -424,10 +491,138 @@ __export(async_bridges_exports, {
   setClipboardText: () => setClipboardText
 });
 
+// src/bridge-handler/useBridgeHandler.tsx
+var import_react3 = require("react");
+function serializeError(error) {
+  return JSON.stringify(error, (_, value) => {
+    if (value instanceof Error) {
+      return {
+        name: value.name,
+        message: value.message,
+        stack: value.stack,
+        __isError: true
+      };
+    }
+    return value;
+  });
+}
+function methodHandler({
+  args,
+  eventId,
+  functionName,
+  handlerMap,
+  injectJavaScript
+}) {
+  const func = async (...args2) => {
+    const result = await handlerMap[functionName](...args2);
+    return result;
+  };
+  if (!func) {
+    console.error(`${functionName} is not a function`);
+    return;
+  }
+  func(...args).then((result) => {
+    injectJavaScript?.(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/resolve/${eventId}', ${JSON.stringify(result, null, 0)});
+    `);
+  }).catch((error) => {
+    const serializedError = serializeError(error);
+    injectJavaScript?.(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/reject/${eventId}', ${serializedError});
+    `);
+  });
+}
+var globalEventListenerMap = /* @__PURE__ */ new Map();
+function useBridgeHandler({
+  onMessage,
+  constantHandlerMap,
+  asyncHandlerMap,
+  eventListenerMap,
+  injectedJavaScript: originalInjectedJavaScript
+}) {
+  const ref = (0, import_react3.useRef)(null);
+  const injectedJavaScript = (0, import_react3.useMemo)(
+    () => [
+      `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
+        Object.entries(constantHandlerMap).reduce(
+          (acc, [key, value]) => {
+            acc[key] = typeof value === "function" ? value() : value;
+            return acc;
+          },
+          {}
+        )
+      )}`,
+      originalInjectedJavaScript,
+      "true"
+    ].join("\n"),
+    [constantHandlerMap, originalInjectedJavaScript]
+  );
+  const createHandleOnEvent = (functionName, eventId) => (response) => {
+    ref.current?.injectJavaScript(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/onEvent/${eventId}', ${JSON.stringify(response, null, 0)});
+    `);
+  };
+  const createHandleOnError = (functionName, eventId) => (error) => {
+    ref.current?.injectJavaScript(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${JSON.stringify(error, null, 0)});
+    `);
+  };
+  const $onMessage = (0, import_react3.useCallback)(
+    async (e) => {
+      onMessage?.(e);
+      const data = JSON.parse(e.nativeEvent.data);
+      if (typeof data !== "object" || data === null || typeof data.functionName !== "string" || typeof data.eventId !== "string" || typeof data.type !== "string" || !["addEventListener", "removeEventListener", "method"].includes(data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "addEventListener": {
+          const handleOnEvent = createHandleOnEvent(data.functionName, data.eventId);
+          const handleOnError = createHandleOnError(data.functionName, data.eventId);
+          const remove = eventListenerMap[data.functionName]?.({
+            onEvent: handleOnEvent,
+            onError: handleOnError,
+            options: data.args
+          });
+          if (remove) {
+            globalEventListenerMap.set(`${data.functionName}/${data.eventId}`, remove);
+          }
+          break;
+        }
+        case "removeEventListener": {
+          const key = `${data.functionName}/${data.eventId}`;
+          const remove = globalEventListenerMap.get(key);
+          remove?.();
+          globalEventListenerMap.delete(key);
+          break;
+        }
+        case "method": {
+          methodHandler({
+            args: data.args,
+            eventId: data.eventId,
+            functionName: data.functionName,
+            handlerMap: asyncHandlerMap,
+            injectJavaScript: ref.current?.injectJavaScript
+          });
+          break;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onMessage]
+  );
+  return {
+    ref,
+    injectedJavaScript,
+    onMessage: $onMessage
+  };
+}
+
 // src/constant-bridges.ts
 var constant_bridges_exports = {};
 __export(constant_bridges_exports, {
-  getOperationalEnvironment: () => getOperationalEnvironment
+  getDeviceId: () => getDeviceId,
+  getOperationalEnvironment: () => getOperationalEnvironment,
+  getTossAppVersion: () => getTossAppVersion
 });
 
 // src/env.ts
@@ -444,9 +639,10 @@ __export(event_bridges_exports, {
 // src/components/WebView.tsx
 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) {
@@ -472,45 +668,65 @@ function getWebViewUri(local) {
   return url.toString();
 }
 function WebView({ type, local, onMessage, ...props }) {
-  const uri = (0, import_react3.useMemo)(() => getWebViewUri(local), [local]);
-  const handler = (0, import_react_native_bedrock5.useBridgeHandler)({
+  if (!TYPES.includes(type)) {
+    throw new Error(`Invalid WebView type: '${type}'`);
+  }
+  const bedrockEvent = (0, import_react_native_bedrock5.useBedrockEvent)();
+  const uri = (0, import_react4.useMemo)(() => getWebViewUri(local), [local]);
+  const top = (0, import_private.useSafeAreaTop)();
+  const bottom = (0, import_private.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: {
       ...bedrockConstantBridges,
-      ...constant_bridges_exports
+      ...constant_bridges_exports,
+      getSafeAreaTop: () => top,
+      getSafeAreaBottom: () => bottom
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     asyncHandlerMap: {
       ...bedrockAsyncBridges,
-      ...async_bridges_exports
+      ...async_bridges_exports,
+      /** internal */
+      openPermissionDialog: AppsInTossModule.openPermissionDialog,
+      /** Storage */
+      getStorageItem: Storage.getItem,
+      setStorageItem: Storage.setItem,
+      removeStorageItem: Storage.removeItem,
+      clearItems: Storage.clearItems
     }
   });
-  const baseProps = (0, import_react3.useMemo)(() => {
+  const baseProps = (0, import_react4.useMemo)(() => {
     switch (type) {
       case "partner": {
-        return {
+        const headerOnlyProp = {
           header: {
-            ...props.header,
-            icon: toIcon(appsInTossGlobals.brandIcon),
-            title: appsInTossGlobals.brandDisplayName,
+            ..."header" in props ? props.header : {},
+            icon: toIcon(ensureValue(appsInTossGlobals.brandIcon, "icon")),
+            title: ensureValue(appsInTossGlobals.brandDisplayName, "displayName"),
             rightButtons: void 0
             // TODO: onClick 이벤트를 받아야 하기에 런타임에서 설정 받아야 함
           }
         };
+        return headerOnlyProp;
       }
       case "external": {
-        return {
+        const headerOnlyProp = {
           header: {
-            ...props.header,
-            icon: toIcon(appsInTossGlobals.brandIcon),
-            title: appsInTossGlobals.brandDisplayName
+            ..."header" in props ? props.header : {},
+            icon: toIcon(ensureValue(appsInTossGlobals.brandIcon, "icon")),
+            title: ensureValue(appsInTossGlobals.brandDisplayName, "displayName")
           }
         };
+        return headerOnlyProp;
       }
       default: {
         return {};
@@ -518,31 +734,40 @@ function WebView({ type, local, onMessage, ...props }) {
     }
   }, [type, props]);
   const BaseWebView = WEBVIEW_TYPES[type];
+  const webviewDebuggingEnabled = (0, import_react4.useMemo)(
+    () => getOperationalEnvironment() === "sandbox",
+    []
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     BaseWebView,
     {
       ref: handler.ref,
-      ...baseProps,
       ...props,
+      ...baseProps,
       source: { uri },
       sharedCookiesEnabled: true,
+      webviewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
-      cacheEnabled: false,
-      cacheMode: "LOAD_NO_CACHE",
       onMessage: handler.onMessage,
       injectedJavaScript: handler.injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript
     }
   );
 }
+function ensureValue(value, name) {
+  if (value === void 0) {
+    throw new Error(`${name} is required`);
+  }
+  return value;
+}
 
 // src/hooks/useGeolocation.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_native_bedrock6 = require("react-native-bedrock");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = (0, import_react_native_bedrock6.useVisibility)();
-  const [location, setLocation] = (0, import_react4.useState)(null);
-  (0, import_react4.useEffect)(() => {
+  const [location, setLocation] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
     if (!isVisible) {
       return;
     }
@@ -573,6 +798,7 @@ var Accuracy2 = /* @__PURE__ */ ((Accuracy3) => {
 0 && (module.exports = {
   Accuracy,
   AppsInToss,
+  Storage,
   TossPay,
   WebView,
   appLogin,
@@ -581,7 +807,9 @@ var Accuracy2 = /* @__PURE__ */ ((Accuracy3) => {
   fetchContacts,
   getClipboardText,
   getCurrentLocation,
+  getDeviceId,
   getOperationalEnvironment,
+  getTossAppVersion,
   openCamera,
   setClipboardText,
   startUpdateLocation,

package/dist/index.d.cts

@@ -70,7 +70,7 @@ interface Location {
      */
     timestamp: number;
     /**
-     * @description 위치 정보를 나타내는 객체예요. 자세한 내용은 [LocationCoords](/reference/framework/Types/LocationCoords.html)을 참고해주세요.
+     * @description 위치 정보를 나타내는 객체예요. 자세한 내용은 [LocationCoords](/react-native/reference/framework/Types/LocationCoords.html)을 참고해주세요.
      */
     coords: LocationCoords;
 }
@@ -154,7 +154,7 @@ interface UpdateLocationEventEmitter extends EventEmitterSchema<'updateLocation'
  * @param {number} [options.accuracy] 위치 정확도를 설정해요.
  * @param {number} [options.timeInterval] 위치 정보를 업데이트하는 최소 주기로, 단위는 밀리초(ms)예요. 이 값은 위치 업데이트가 발생하는 가장 짧은 간격을 설정하지만, 시스템이나 환경의 영향을 받아 지정한 주기보다 더 긴 간격으로 업데이트될 수 있어요.
  * @param {number} [options.distanceInterval] 위치 변경 거리를 미터(m) 단위로 설정해요.
- * @param {(location: Location) => void} [options.callback] 위치 정보가 변경될 때 호출되는 콜백 함수예요. 자세한 내용은 [Location](/reference/framework/Types/Location.html)을 참고해주세요.
+ * @param {(location: Location) => void} [options.callback] 위치 정보가 변경될 때 호출되는 콜백 함수예요. 자세한 내용은 [Location](/react-native/reference/framework/Types/Location.html)을 참고해주세요.
  *
  * @example
  * ### 위치 정보 변경 감지하기
@@ -569,7 +569,7 @@ interface TossMoneyExecutePaymentResult {
  * @param {ExecutePaymentOptions} options 결제를 실행할 때 필요한 옵션이에요.
  * @param {string} options.orderNo 결제를 생성할 때 사용한 주문번호예요.
  * @param {string} options.payToken 결제 인증 과정에서 전달받은 결제 토큰이에요. 결제를 실행할 때 사용해요.
- * @returns {Promise<CardExecutePaymentResult | TossMoneyExecutePaymentResult>} 결제 결과 객체를 반환해요. 자세한 내용은 [카드 결제 결과](reference/framework/토스페이/CardExecutePaymentResult.html) 또는 [토스머니 결제 결과](reference/framework/토스페이/TossMoneyExecutePaymentResult.html)를 참고하세요.
+ * @returns {Promise<CardExecutePaymentResult | TossMoneyExecutePaymentResult>} 결제 결과 객체를 반환해요. 자세한 내용은 [카드 결제 결과](/react-native/reference/framework/토스페이/CardExecutePaymentResult.html) 또는 [토스머니 결제 결과](/react-native/reference/framework/토스페이/TossMoneyExecutePaymentResult.html)를 참고하세요.
  *
  * @example
  *
@@ -858,7 +858,7 @@ interface GetCurrentLocationOptions {
  *
  * @param {GetCurrentLocationOptions} options 위치 정보를 가져올 때 사용하는 옵션 객체예요.
  * @param {Accuracy} [options.accuracy] 위치 정보의 정확도 수준이에요. 정확도는 `Accuracy` 타입으로 설정돼요.
- * @returns {Promise<Location>} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/reference/framework/Types/Location.html)을 참고해주세요.
+ * @returns {Promise<Location>} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/react-native/reference/framework/Types/Location.html)을 참고해주세요.
  *
  * @example
  * ### 디바이스의 현재 위치 정보 가져오기
@@ -1027,13 +1027,157 @@ declare function appLogin(): Promise<{
  */
 declare function getOperationalEnvironment(): 'toss' | 'sandbox';
 
+/**
+ * @public
+ * @category 환경 확인
+ * @name getTossAppVersion
+ * @description 토스 앱 버전을 가져옵니다. 예를 들어, `5.206.0`과 같은 형태로 반환돼요. 토스 앱 버전을 로그로 남기거나, 특정 기능이 특정 버전 이상에서만 실행될 때 사용돼요.
+ * @signature
+ * ```typescript
+ * function getTossAppVersion(): string
+ * ```
+ *
+ * @returns {string} 토스 앱 버전
+ *
+ * @example
+ *
+ *
+ * ### 토스 앱 버전 확인하기
+ *
+ * ```tsx
+ * import { getTossAppVersion } from '@apps-in-toss/framework';
+ * import { Text } from 'react-native';
+ *
+ * export function TossAppVersionPage() {
+ *  return (
+ *   <Text>{getTossAppVersion()}</Text>
+ *  )
+ * }
+ * ```
+ */
+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 저장소
+ * @name getItem
+ * @description 모바일 앱의 로컬 저장소에서 문자열 데이터를 가져와요. 주로 앱이 종료되었다가 다시 시작해도 데이터가 유지되어야 하는 경우에 사용해요.
+ * @param {string} key - 가져올 아이템의 키를 입력해요.
+ * @returns {Promise<string | null>} 지정한 키에 저장된 문자열 값을 반환해요. 값이 없으면 `null`을 반환해요.
+ * @example
+ *
+ * ### `my-key`에 저장된 아이템 가져오기
+ * ```ts
+ * const value = await Storage.getItem('my-key');
+ * console.log(value); // 'value'
+ * ```
+ */
+declare function getItem(key: string): Promise<string | null>;
+/**
+ * @public
+ * @category 저장소
+ * @name setItem
+ * @description 모바일 앱의 로컬 저장소에 문자열 데이터를 저장해요. 주로 앱이 종료되었다가 다시 시작해도 데이터가 유지되어야 하는 경우에 사용해요.
+ * @param {string} key - 저장할 아이템의 키를 입력해요.
+ * @param {string} value - 저장할 아이템의 값을 입력해요.
+ * @returns {Promise<void>} 아이템을 성공적으로 저장하면 아무 값도 반환하지 않아요.
+ * @example
+ *
+ * ### `my-key`에 아이템 저장하기
+ * ```ts
+ * import { Storage } from '@apps-in-toss/framework';
+ *
+ * await Storage.setItem('my-key', 'value');
+ * ```
+ */
+declare function setItem(key: string, value: string): Promise<void>;
+/**
+ * @public
+ * @category 저장소
+ * @name removeItem
+ * @description 모바일 앱의 로컬 저장소에서 특정 키에 해당하는 아이템을 삭제해요.
+ * @param {string} key - 삭제할 아이템의 키를 입력해요.
+ * @returns {Promise<void>} 아이템을 삭제하면 아무 값도 반환하지 않아요.
+ * @example
+ *
+ * ### `my-key`에 저장된 아이템 삭제하기
+ * ```ts
+ * import { Storage } from '@apps-in-toss/framework';
+ *
+ * await Storage.removeItem('my-key');
+ * ```
+ */
+declare function removeItem(key: string): Promise<void>;
+/**
+ * @public
+ * @category 저장소
+ * @name clearItems
+ * @description 모바일 앱의 로컬 저장소의 모든 아이템을 삭제해요.
+ * @returns {Promise<void>} 아이템을 삭제하면 아무 값도 반환하지 않고 저장소가 초기화돼요.
+ * @example
+ *
+ * ### 저장소 초기화하기
+ * ```ts
+ * import { Storage } from '@apps-in-toss/framework';
+ *
+ * await Storage.clearItems();
+ * ```
+ */
+declare function clearItems(): Promise<void>;
+/**
+ * @public
+ * @category 저장소
+ * @name Storage
+ * @description 네이티브의 저장소를 사용해요.
+ * @property {typeof getItem} [getItem] 모바일 앱의 로컬 저장소에서 아이템을 가져오는 함수예요. 자세한 내용은 [getItem](/react-native/reference/framework/저장소/getItem)을 참고하세요.
+ * @property {typeof setItem} [setItem] 모바일 앱의 로컬 저장소에 아이템을 저장하는 함수예요. 자세한 내용은 [setItem](/react-native/reference/framework/저장소/setItem)을 참고하세요.
+ * @property {typeof removeItem} [removeItem] 모바일 앱의 로컬 저장소에서 아이템을 삭제하는 함수예요. 자세한 내용은 [removeItem](/react-native/reference/framework/저장소/removeItem)을 참고하세요.
+ * @property {typeof clearItems} [clearItems] 모바일 앱의 로컬 저장소를 초기화하는 함수예요. 자세한 내용은 [clearItems](/react-native/reference/framework/저장소/clearItems)을 참고하세요.
+ */
+declare const Storage: {
+    getItem: typeof getItem;
+    setItem: typeof setItem;
+    removeItem: typeof removeItem;
+    clearItems: typeof clearItems;
+};
+
 /**
  * @public
  * @category 토스페이
  * @name TossPay
  * @description 토스페이 결제 관련 함수를 모아둔 객체예요.
- * @property {typeof checkoutPayment} [checkoutPayment] 토스페이 결제를 생성하는 함수예요. 자세한 내용은 [checkoutPayment](reference/framework/토스페이/checkoutPayment)를 참고하세요.
- * @property {typeof executePayment} [executePayment] 토스페이 결제를 실행하는 함수예요. 자세한 내용은 [executePayment](reference/framework/토스페이/executePayment)를 참고하세요.
+ * @property {typeof checkoutPayment} [checkoutPayment] 토스페이 결제를 생성하는 함수예요. 자세한 내용은 [checkoutPayment](/react-native/reference/framework/토스페이/checkoutPayment)를 참고하세요.
+ * @property {typeof executePayment} [executePayment] 토스페이 결제를 실행하는 함수예요. 자세한 내용은 [executePayment](/react-native/reference/framework/토스페이/executePayment)를 참고하세요.
  */
 declare const TossPay: {
     checkoutPayment: typeof checkoutPayment;
@@ -1076,7 +1220,7 @@ type UseGeolocationOptions = Omit<StartUpdateLocationOptions, 'callback'>;
  * @param {Accuracy} [options.accuracy] 위치 정확도를 설정해요. `Accuracy.Lowest`: 오차범위 3KM 이내, `Accuracy.Low`: 오차범위 1KM 이내, `Accuracy.Balanced`: 오차범위 몇 백미터 이내, `Accuracy.High`: 오차범위 10M 이내, `Accuracy.Highest`: 가장 높은 정확도, `Accuracy.BestForNavigation`: 네비게이션을 위한 최고 정확도
  * @param {number} [options.timeInterval] 위치 정보를 업데이트하는 최소 주기로, 단위는 밀리초(ms)예요. 이 값은 위치 업데이트가 발생하는 가장 짧은 간격을 설정하지만, 시스템이나 환경의 영향을 받아 지정한 주기보다 더 긴 간격으로 업데이트될 수 있어요.
  * @param {number} [options.distanceInterval] 위치 변경 거리를 미터(m) 단위로 설정해요.
- * @returns {Location | null} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/reference/framework/Types/Location.html)을 참고해주세요.
+ * @returns {Location | null} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/react-native/reference/framework/Types/Location.html)을 참고해주세요.
  *
  * @example
  * ### 위치 정보 변경 감지하기
@@ -1112,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, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, 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

@@ -70,7 +70,7 @@ interface Location {
      */
     timestamp: number;
     /**
-     * @description 위치 정보를 나타내는 객체예요. 자세한 내용은 [LocationCoords](/reference/framework/Types/LocationCoords.html)을 참고해주세요.
+     * @description 위치 정보를 나타내는 객체예요. 자세한 내용은 [LocationCoords](/react-native/reference/framework/Types/LocationCoords.html)을 참고해주세요.
      */
     coords: LocationCoords;
 }
@@ -154,7 +154,7 @@ interface UpdateLocationEventEmitter extends EventEmitterSchema<'updateLocation'
  * @param {number} [options.accuracy] 위치 정확도를 설정해요.
  * @param {number} [options.timeInterval] 위치 정보를 업데이트하는 최소 주기로, 단위는 밀리초(ms)예요. 이 값은 위치 업데이트가 발생하는 가장 짧은 간격을 설정하지만, 시스템이나 환경의 영향을 받아 지정한 주기보다 더 긴 간격으로 업데이트될 수 있어요.
  * @param {number} [options.distanceInterval] 위치 변경 거리를 미터(m) 단위로 설정해요.
- * @param {(location: Location) => void} [options.callback] 위치 정보가 변경될 때 호출되는 콜백 함수예요. 자세한 내용은 [Location](/reference/framework/Types/Location.html)을 참고해주세요.
+ * @param {(location: Location) => void} [options.callback] 위치 정보가 변경될 때 호출되는 콜백 함수예요. 자세한 내용은 [Location](/react-native/reference/framework/Types/Location.html)을 참고해주세요.
  *
  * @example
  * ### 위치 정보 변경 감지하기
@@ -569,7 +569,7 @@ interface TossMoneyExecutePaymentResult {
  * @param {ExecutePaymentOptions} options 결제를 실행할 때 필요한 옵션이에요.
  * @param {string} options.orderNo 결제를 생성할 때 사용한 주문번호예요.
  * @param {string} options.payToken 결제 인증 과정에서 전달받은 결제 토큰이에요. 결제를 실행할 때 사용해요.
- * @returns {Promise<CardExecutePaymentResult | TossMoneyExecutePaymentResult>} 결제 결과 객체를 반환해요. 자세한 내용은 [카드 결제 결과](reference/framework/토스페이/CardExecutePaymentResult.html) 또는 [토스머니 결제 결과](reference/framework/토스페이/TossMoneyExecutePaymentResult.html)를 참고하세요.
+ * @returns {Promise<CardExecutePaymentResult | TossMoneyExecutePaymentResult>} 결제 결과 객체를 반환해요. 자세한 내용은 [카드 결제 결과](/react-native/reference/framework/토스페이/CardExecutePaymentResult.html) 또는 [토스머니 결제 결과](/react-native/reference/framework/토스페이/TossMoneyExecutePaymentResult.html)를 참고하세요.
  *
  * @example
  *
@@ -858,7 +858,7 @@ interface GetCurrentLocationOptions {
  *
  * @param {GetCurrentLocationOptions} options 위치 정보를 가져올 때 사용하는 옵션 객체예요.
  * @param {Accuracy} [options.accuracy] 위치 정보의 정확도 수준이에요. 정확도는 `Accuracy` 타입으로 설정돼요.
- * @returns {Promise<Location>} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/reference/framework/Types/Location.html)을 참고해주세요.
+ * @returns {Promise<Location>} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/react-native/reference/framework/Types/Location.html)을 참고해주세요.
  *
  * @example
  * ### 디바이스의 현재 위치 정보 가져오기
@@ -1027,13 +1027,157 @@ declare function appLogin(): Promise<{
  */
 declare function getOperationalEnvironment(): 'toss' | 'sandbox';
 
+/**
+ * @public
+ * @category 환경 확인
+ * @name getTossAppVersion
+ * @description 토스 앱 버전을 가져옵니다. 예를 들어, `5.206.0`과 같은 형태로 반환돼요. 토스 앱 버전을 로그로 남기거나, 특정 기능이 특정 버전 이상에서만 실행될 때 사용돼요.
+ * @signature
+ * ```typescript
+ * function getTossAppVersion(): string
+ * ```
+ *
+ * @returns {string} 토스 앱 버전
+ *
+ * @example
+ *
+ *
+ * ### 토스 앱 버전 확인하기
+ *
+ * ```tsx
+ * import { getTossAppVersion } from '@apps-in-toss/framework';
+ * import { Text } from 'react-native';
+ *
+ * export function TossAppVersionPage() {
+ *  return (
+ *   <Text>{getTossAppVersion()}</Text>
+ *  )
+ * }
+ * ```
+ */
+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 저장소
+ * @name getItem
+ * @description 모바일 앱의 로컬 저장소에서 문자열 데이터를 가져와요. 주로 앱이 종료되었다가 다시 시작해도 데이터가 유지되어야 하는 경우에 사용해요.
+ * @param {string} key - 가져올 아이템의 키를 입력해요.
+ * @returns {Promise<string | null>} 지정한 키에 저장된 문자열 값을 반환해요. 값이 없으면 `null`을 반환해요.
+ * @example
+ *
+ * ### `my-key`에 저장된 아이템 가져오기
+ * ```ts
+ * const value = await Storage.getItem('my-key');
+ * console.log(value); // 'value'
+ * ```
+ */
+declare function getItem(key: string): Promise<string | null>;
+/**
+ * @public
+ * @category 저장소
+ * @name setItem
+ * @description 모바일 앱의 로컬 저장소에 문자열 데이터를 저장해요. 주로 앱이 종료되었다가 다시 시작해도 데이터가 유지되어야 하는 경우에 사용해요.
+ * @param {string} key - 저장할 아이템의 키를 입력해요.
+ * @param {string} value - 저장할 아이템의 값을 입력해요.
+ * @returns {Promise<void>} 아이템을 성공적으로 저장하면 아무 값도 반환하지 않아요.
+ * @example
+ *
+ * ### `my-key`에 아이템 저장하기
+ * ```ts
+ * import { Storage } from '@apps-in-toss/framework';
+ *
+ * await Storage.setItem('my-key', 'value');
+ * ```
+ */
+declare function setItem(key: string, value: string): Promise<void>;
+/**
+ * @public
+ * @category 저장소
+ * @name removeItem
+ * @description 모바일 앱의 로컬 저장소에서 특정 키에 해당하는 아이템을 삭제해요.
+ * @param {string} key - 삭제할 아이템의 키를 입력해요.
+ * @returns {Promise<void>} 아이템을 삭제하면 아무 값도 반환하지 않아요.
+ * @example
+ *
+ * ### `my-key`에 저장된 아이템 삭제하기
+ * ```ts
+ * import { Storage } from '@apps-in-toss/framework';
+ *
+ * await Storage.removeItem('my-key');
+ * ```
+ */
+declare function removeItem(key: string): Promise<void>;
+/**
+ * @public
+ * @category 저장소
+ * @name clearItems
+ * @description 모바일 앱의 로컬 저장소의 모든 아이템을 삭제해요.
+ * @returns {Promise<void>} 아이템을 삭제하면 아무 값도 반환하지 않고 저장소가 초기화돼요.
+ * @example
+ *
+ * ### 저장소 초기화하기
+ * ```ts
+ * import { Storage } from '@apps-in-toss/framework';
+ *
+ * await Storage.clearItems();
+ * ```
+ */
+declare function clearItems(): Promise<void>;
+/**
+ * @public
+ * @category 저장소
+ * @name Storage
+ * @description 네이티브의 저장소를 사용해요.
+ * @property {typeof getItem} [getItem] 모바일 앱의 로컬 저장소에서 아이템을 가져오는 함수예요. 자세한 내용은 [getItem](/react-native/reference/framework/저장소/getItem)을 참고하세요.
+ * @property {typeof setItem} [setItem] 모바일 앱의 로컬 저장소에 아이템을 저장하는 함수예요. 자세한 내용은 [setItem](/react-native/reference/framework/저장소/setItem)을 참고하세요.
+ * @property {typeof removeItem} [removeItem] 모바일 앱의 로컬 저장소에서 아이템을 삭제하는 함수예요. 자세한 내용은 [removeItem](/react-native/reference/framework/저장소/removeItem)을 참고하세요.
+ * @property {typeof clearItems} [clearItems] 모바일 앱의 로컬 저장소를 초기화하는 함수예요. 자세한 내용은 [clearItems](/react-native/reference/framework/저장소/clearItems)을 참고하세요.
+ */
+declare const Storage: {
+    getItem: typeof getItem;
+    setItem: typeof setItem;
+    removeItem: typeof removeItem;
+    clearItems: typeof clearItems;
+};
+
 /**
  * @public
  * @category 토스페이
  * @name TossPay
  * @description 토스페이 결제 관련 함수를 모아둔 객체예요.
- * @property {typeof checkoutPayment} [checkoutPayment] 토스페이 결제를 생성하는 함수예요. 자세한 내용은 [checkoutPayment](reference/framework/토스페이/checkoutPayment)를 참고하세요.
- * @property {typeof executePayment} [executePayment] 토스페이 결제를 실행하는 함수예요. 자세한 내용은 [executePayment](reference/framework/토스페이/executePayment)를 참고하세요.
+ * @property {typeof checkoutPayment} [checkoutPayment] 토스페이 결제를 생성하는 함수예요. 자세한 내용은 [checkoutPayment](/react-native/reference/framework/토스페이/checkoutPayment)를 참고하세요.
+ * @property {typeof executePayment} [executePayment] 토스페이 결제를 실행하는 함수예요. 자세한 내용은 [executePayment](/react-native/reference/framework/토스페이/executePayment)를 참고하세요.
  */
 declare const TossPay: {
     checkoutPayment: typeof checkoutPayment;
@@ -1076,7 +1220,7 @@ type UseGeolocationOptions = Omit<StartUpdateLocationOptions, 'callback'>;
  * @param {Accuracy} [options.accuracy] 위치 정확도를 설정해요. `Accuracy.Lowest`: 오차범위 3KM 이내, `Accuracy.Low`: 오차범위 1KM 이내, `Accuracy.Balanced`: 오차범위 몇 백미터 이내, `Accuracy.High`: 오차범위 10M 이내, `Accuracy.Highest`: 가장 높은 정확도, `Accuracy.BestForNavigation`: 네비게이션을 위한 최고 정확도
  * @param {number} [options.timeInterval] 위치 정보를 업데이트하는 최소 주기로, 단위는 밀리초(ms)예요. 이 값은 위치 업데이트가 발생하는 가장 짧은 간격을 설정하지만, 시스템이나 환경의 영향을 받아 지정한 주기보다 더 긴 간격으로 업데이트될 수 있어요.
  * @param {number} [options.distanceInterval] 위치 변경 거리를 미터(m) 단위로 설정해요.
- * @returns {Location | null} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/reference/framework/Types/Location.html)을 참고해주세요.
+ * @returns {Location | null} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/react-native/reference/framework/Types/Location.html)을 참고해주세요.
  *
  * @example
  * ### 위치 정보 변경 감지하기
@@ -1112,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, TossPay, type UpdateLocationEventEmitter, type UseGeolocationOptions, WebView, type WebViewProps, appLogin, env, fetchAlbumPhotos, fetchContacts, getClipboardText, getCurrentLocation, getOperationalEnvironment, 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

@@ -238,6 +238,39 @@ function getOperationalEnvironment() {
   return AppsInTossModule.operationalEnvironment;
 }
 
+// src/native-modules/getTossAppVersion.ts
+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 });
+}
+function setItem(key, value) {
+  return AppsInTossModule.setStorageItem({
+    key,
+    value
+  });
+}
+function removeItem(key) {
+  return AppsInTossModule.removeStorageItem({ key });
+}
+function clearItems() {
+  return AppsInTossModule.clearStorage({});
+}
+var Storage = {
+  getItem,
+  setItem,
+  removeItem,
+  clearItems
+};
+
 // src/native-modules/index.ts
 var TossPay = {
   checkoutPayment,
@@ -249,8 +282,9 @@ import {
   PartnerWebViewScreen,
   ExternalWebViewScreen
 } from "@toss-design-system/react-native";
-import { useMemo } from "react";
-import { getSchemeUri, useBridgeHandler } from "react-native-bedrock";
+import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop2 } from "@toss-design-system/react-native/private";
+import { useMemo as useMemo2 } from "react";
+import { getSchemeUri, useBedrockEvent } from "react-native-bedrock";
 import * as bedrockAsyncBridges from "react-native-bedrock/async-bridges";
 import * as bedrockConstantBridges from "react-native-bedrock/constant-bridges";
 
@@ -258,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";
@@ -343,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
             },
@@ -358,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 }) })
   ] });
 });
@@ -385,10 +449,138 @@ __export(async_bridges_exports, {
   setClipboardText: () => setClipboardText
 });
 
+// src/bridge-handler/useBridgeHandler.tsx
+import { useCallback as useCallback2, useMemo, useRef } from "react";
+function serializeError(error) {
+  return JSON.stringify(error, (_, value) => {
+    if (value instanceof Error) {
+      return {
+        name: value.name,
+        message: value.message,
+        stack: value.stack,
+        __isError: true
+      };
+    }
+    return value;
+  });
+}
+function methodHandler({
+  args,
+  eventId,
+  functionName,
+  handlerMap,
+  injectJavaScript
+}) {
+  const func = async (...args2) => {
+    const result = await handlerMap[functionName](...args2);
+    return result;
+  };
+  if (!func) {
+    console.error(`${functionName} is not a function`);
+    return;
+  }
+  func(...args).then((result) => {
+    injectJavaScript?.(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/resolve/${eventId}', ${JSON.stringify(result, null, 0)});
+    `);
+  }).catch((error) => {
+    const serializedError = serializeError(error);
+    injectJavaScript?.(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/reject/${eventId}', ${serializedError});
+    `);
+  });
+}
+var globalEventListenerMap = /* @__PURE__ */ new Map();
+function useBridgeHandler({
+  onMessage,
+  constantHandlerMap,
+  asyncHandlerMap,
+  eventListenerMap,
+  injectedJavaScript: originalInjectedJavaScript
+}) {
+  const ref = useRef(null);
+  const injectedJavaScript = useMemo(
+    () => [
+      `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
+        Object.entries(constantHandlerMap).reduce(
+          (acc, [key, value]) => {
+            acc[key] = typeof value === "function" ? value() : value;
+            return acc;
+          },
+          {}
+        )
+      )}`,
+      originalInjectedJavaScript,
+      "true"
+    ].join("\n"),
+    [constantHandlerMap, originalInjectedJavaScript]
+  );
+  const createHandleOnEvent = (functionName, eventId) => (response) => {
+    ref.current?.injectJavaScript(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/onEvent/${eventId}', ${JSON.stringify(response, null, 0)});
+    `);
+  };
+  const createHandleOnError = (functionName, eventId) => (error) => {
+    ref.current?.injectJavaScript(`
+      window.__BEDROCK_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${JSON.stringify(error, null, 0)});
+    `);
+  };
+  const $onMessage = useCallback2(
+    async (e) => {
+      onMessage?.(e);
+      const data = JSON.parse(e.nativeEvent.data);
+      if (typeof data !== "object" || data === null || typeof data.functionName !== "string" || typeof data.eventId !== "string" || typeof data.type !== "string" || !["addEventListener", "removeEventListener", "method"].includes(data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "addEventListener": {
+          const handleOnEvent = createHandleOnEvent(data.functionName, data.eventId);
+          const handleOnError = createHandleOnError(data.functionName, data.eventId);
+          const remove = eventListenerMap[data.functionName]?.({
+            onEvent: handleOnEvent,
+            onError: handleOnError,
+            options: data.args
+          });
+          if (remove) {
+            globalEventListenerMap.set(`${data.functionName}/${data.eventId}`, remove);
+          }
+          break;
+        }
+        case "removeEventListener": {
+          const key = `${data.functionName}/${data.eventId}`;
+          const remove = globalEventListenerMap.get(key);
+          remove?.();
+          globalEventListenerMap.delete(key);
+          break;
+        }
+        case "method": {
+          methodHandler({
+            args: data.args,
+            eventId: data.eventId,
+            functionName: data.functionName,
+            handlerMap: asyncHandlerMap,
+            injectJavaScript: ref.current?.injectJavaScript
+          });
+          break;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onMessage]
+  );
+  return {
+    ref,
+    injectedJavaScript,
+    onMessage: $onMessage
+  };
+}
+
 // src/constant-bridges.ts
 var constant_bridges_exports = {};
 __export(constant_bridges_exports, {
-  getOperationalEnvironment: () => getOperationalEnvironment
+  getDeviceId: () => getDeviceId,
+  getOperationalEnvironment: () => getOperationalEnvironment,
+  getTossAppVersion: () => getTossAppVersion
 });
 
 // src/env.ts
@@ -405,6 +597,7 @@ __export(event_bridges_exports, {
 // src/components/WebView.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var appsInTossGlobals = getAppsInTossGlobals();
+var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
   partner: PartnerWebViewScreen,
   external: ExternalWebViewScreen,
@@ -433,45 +626,65 @@ function getWebViewUri(local) {
   return url.toString();
 }
 function WebView({ type, local, onMessage, ...props }) {
-  const uri = useMemo(() => getWebViewUri(local), [local]);
+  if (!TYPES.includes(type)) {
+    throw new Error(`Invalid WebView type: '${type}'`);
+  }
+  const bedrockEvent = useBedrockEvent();
+  const uri = useMemo2(() => 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: {
       ...bedrockConstantBridges,
-      ...constant_bridges_exports
+      ...constant_bridges_exports,
+      getSafeAreaTop: () => top,
+      getSafeAreaBottom: () => bottom
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     asyncHandlerMap: {
       ...bedrockAsyncBridges,
-      ...async_bridges_exports
+      ...async_bridges_exports,
+      /** internal */
+      openPermissionDialog: AppsInTossModule.openPermissionDialog,
+      /** Storage */
+      getStorageItem: Storage.getItem,
+      setStorageItem: Storage.setItem,
+      removeStorageItem: Storage.removeItem,
+      clearItems: Storage.clearItems
     }
   });
-  const baseProps = useMemo(() => {
+  const baseProps = useMemo2(() => {
     switch (type) {
       case "partner": {
-        return {
+        const headerOnlyProp = {
           header: {
-            ...props.header,
-            icon: toIcon(appsInTossGlobals.brandIcon),
-            title: appsInTossGlobals.brandDisplayName,
+            ..."header" in props ? props.header : {},
+            icon: toIcon(ensureValue(appsInTossGlobals.brandIcon, "icon")),
+            title: ensureValue(appsInTossGlobals.brandDisplayName, "displayName"),
             rightButtons: void 0
             // TODO: onClick 이벤트를 받아야 하기에 런타임에서 설정 받아야 함
           }
         };
+        return headerOnlyProp;
       }
       case "external": {
-        return {
+        const headerOnlyProp = {
           header: {
-            ...props.header,
-            icon: toIcon(appsInTossGlobals.brandIcon),
-            title: appsInTossGlobals.brandDisplayName
+            ..."header" in props ? props.header : {},
+            icon: toIcon(ensureValue(appsInTossGlobals.brandIcon, "icon")),
+            title: ensureValue(appsInTossGlobals.brandDisplayName, "displayName")
           }
         };
+        return headerOnlyProp;
       }
       default: {
         return {};
@@ -479,31 +692,40 @@ function WebView({ type, local, onMessage, ...props }) {
     }
   }, [type, props]);
   const BaseWebView = WEBVIEW_TYPES[type];
+  const webviewDebuggingEnabled = useMemo2(
+    () => getOperationalEnvironment() === "sandbox",
+    []
+  );
   return /* @__PURE__ */ jsx5(
     BaseWebView,
     {
       ref: handler.ref,
-      ...baseProps,
       ...props,
+      ...baseProps,
       source: { uri },
       sharedCookiesEnabled: true,
+      webviewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
-      cacheEnabled: false,
-      cacheMode: "LOAD_NO_CACHE",
       onMessage: handler.onMessage,
       injectedJavaScript: handler.injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript
     }
   );
 }
+function ensureValue(value, name) {
+  if (value === void 0) {
+    throw new Error(`${name} is required`);
+  }
+  return value;
+}
 
 // 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;
     }
@@ -533,6 +755,7 @@ var Accuracy2 = /* @__PURE__ */ ((Accuracy3) => {
 export {
   Accuracy2 as Accuracy,
   AppsInToss,
+  Storage,
   TossPay,
   WebView,
   appLogin,
@@ -541,7 +764,9 @@ export {
   fetchContacts,
   getClipboardText,
   getCurrentLocation,
+  getDeviceId,
   getOperationalEnvironment,
+  getTossAppVersion,
   openCamera,
   setClipboardText,
   startUpdateLocation,

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "0.0.0-dev.1743134070910",
+  "version": "0.0.0-dev.1744801739343",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
     "typecheck": "tsc --noEmit",
+    "test:no-parallel": "vitest --no-watch",
     "lint": "eslint .",
     "build": "tsup"
   },
@@ -55,32 +56,40 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/cli": "0.0.0-dev.1743134070910",
-    "@apps-in-toss/plugins": "0.0.0-dev.1743134070910"
+    "@apps-in-toss/cli": "0.0.0-dev.1744801739343",
+    "@apps-in-toss/plugins": "0.0.0-dev.1744801739343",
+    "es-hangul": "^2.3.2"
   },
   "devDependencies": {
-    "@react-native-bedrock/mpack-next": "0.0.14",
-    "@react-native-bedrock/native": "0.0.14",
-    "@toss-design-system/react-native": "^0.4.1",
+    "@react-native-bedrock/mpack-next": "0.0.0-dev.1744801739343",
+    "@react-native-bedrock/native": "workspace:*",
+    "@toss-design-system/react-native": "^0.5.0",
+    "@types/kill-port": "^2.0.1",
     "@types/react": "18.3.3",
+    "@types/yauzl": "^2.10.3",
+    "es-toolkit": "^1.34.1",
     "eslint": "^9.7.0",
+    "execa": "^9.5.2",
+    "kill-port": "^2.0.1",
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "react-native-bedrock": "0.0.14",
+    "react-native-bedrock": "0.0.0-dev.1744801739343",
     "tsup": "^8.3.5",
     "typescript": "4.9.5",
-    "vitest": "^3.0.3"
+    "vitest": "^3.0.3",
+    "workspace-tools": "^0.38.2",
+    "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": "5acf03f70ea94cd53a91b74d34b1a196e45604f3"
+  "gitHead": "aebed4e46de1690956a3b9be49b55811b5ddfa24"
 }

package/src/constant-bridges.ts

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