@apps-in-toss/web-framework 0.0.22 → 0.0.23

package/dist-web/index.js

@@ -83,14 +83,397 @@ function getSafeAreaInsets() {
   return { top: getSafeAreaTop(), bottom: getSafeAreaBottom() };
 }
 
+// src-web/googleAdMob.ts
+import { createEventBridge, createConstantBridge as createConstantBridge2 } from "@apps-in-toss/bridge-core";
+var GoogleAdMob = {
+  /**
+   * @public
+   * @category 광고
+   * @name loadAdMobInterstitialAd
+   * @description 앱 화면 전체를 덮는 전면 광고를 미리 불러와서, 광고가 필요한 시점에 바로 보여줄 수 있도록 준비하는 함수예요.
+   * @param {LoadAdMobInterstitialAdParams} params 광고를 불러올 때 사용할 설정 값이에요. 광고 ID와 광고의 동작에 대한 콜백을 설정할 수 있어요.
+   * @param {LoadAdMobInterstitialAdOptions} params.options 광고를 불러올 때 전달할 옵션 객체예요.
+   * @param {string} params.options.adUnitId 광고 단위 ID예요. 발급받은 전면 광고용 ID를 입력해요.
+   * @param {(event: LoadAdMobInterstitialAdEvent) => void} [params.onEvent] 광고 관련 이벤트가 발생했을 때 호출돼요. (예시: 광고가 닫히거나 클릭됐을 때). 자세한 이벤트 타입은 [LoadAdMobInterstitialAdEvent](/react-native/reference/framework/광고/LoadAdMobInterstitialAdEvent.html)를 참고하세요.
+   * @param {(reason: unknown) => void} [params.onError] 광고를 불러오지 못했을 때 호출돼요. (예시: 네트워크 오류나 지원하지 않는 환경일 때)
+   * @property {() => boolean} [isSupported] 현재 실행 중인 앱(예: 토스 앱, 개발용 샌드박스 앱 등)에서 Google AdMob 광고 기능을 지원하는지 확인하는 함수예요. 기능을 사용하기 전에 지원 여부를 확인해야 해요.
+   *
+   * @example
+   * ### 뷰 진입 시 전면광고 불러오기
+   * ```tsx
+   * import { GoogleAdMob } from '@apps-in-toss/framework';
+   * import { useEffect } from 'react';
+   * import { View, Text } from 'react-native';
+   *
+   * const AD_UNIT_ID = '<YOUR_AD_UNIT_ID>';
+   *
+   * function Page() {
+   *   useEffect(() => {
+   *     if (GoogleAdMob.loadAdMobInterstitialAd.isSupported() !== true) {
+   *       return;
+   *     }
+   *
+   *     const cleanup = GoogleAdMob.loadAdMobInterstitialAd({
+   *       options: {
+   *         adUnitId: AD_UNIT_ID,
+   *       },
+   *       onEvent: (event) => {
+   *         switch (event.type) {
+   *           case 'loaded':
+   *             console.log('광고 로드 성공', event.data);
+   *             break;
+   *
+   *           case 'clicked':
+   *             console.log('광고 클릭');
+   *             break;
+   *
+   *           case 'dismissed':
+   *             console.log('광고 닫힘');
+   *             break;
+   *
+   *           case 'failedToShow':
+   *             console.log('광고 보여주기 실패');
+   *             break;
+   *
+   *           case 'impression':
+   *             console.log('광고 노출');
+   *             break;
+   *
+   *           case 'show':
+   *             console.log('광고 컨텐츠 보여졌음');
+   *             break;
+   *         }
+   *       },
+   *       onError: (error) => {
+   *         console.error('광고 불러오기 실패', error);
+   *       },
+   *     });
+   *
+   *     return cleanup;
+   *   }, []);
+   *
+   *   return (
+   *     <View>
+   *       <Text>Page</Text>
+   *     </View>
+   *   );
+   * }
+   * ```
+   */
+  loadAdMobInterstitialAd: Object.assign(
+    createEventBridge("loadAdMobInterstitialAd"),
+    {
+      isSupported: createConstantBridge2("loadAdMobInterstitialAd_isSupported")
+    }
+  ),
+  /**
+   * @public
+   * @category 광고
+   * @name showAdMobInterstitialAd
+   * @description 앱 화면 전체를 덮는 전면 광고를 사용자에게 노출해요. 이 함수는 `loadAdMobInterstitialAd` 로 미리 불러온 광고를 실제로 사용자에게 노출해요.
+   * @param {ShowAdMobInterstitialAdParams} params 광고를 보여주기 위해 사용할 설정 값이에요. 광고 ID와과 광고의 동작에 대한 콜백을 설정할 수 있어요.
+   * @param {ShowAdMobInterstitialAdOptions} params.options 광고를 보여줄 때 전달할 옵션 객체예요.
+   * @param {string} params.options.adUnitId 광고 단위 ID예요. `loadAdMobInterstitialAd` 로 불러온 전면 광고용 ID를 입력해요.
+   * @param {(event: ShowAdMobInterstitialAdEvent) => void} [params.onEvent] 광고 관련 이벤트가 발생했을 때 호출돼요. (예시: 광고 노출을 요청했을 때). 자세한 이벤트 타입은 [ShowAdMobInterstitialAdEvent](/react-native/reference/framework/광고/ShowAdMobInterstitialAdEvent.html)를 참고하세요.
+   * @param {(reason: unknown) => void} [params.onError] 광고를 노출하지 못했을 때 호출돼요. (예시: 네트워크 오류나 지원하지 않는 환경일 때)
+   * @property {() => boolean} [isSupported] 현재 실행 중인 앱(예: 토스 앱, 개발용 샌드박스 앱 등)에서 Google AdMob 광고 기능을 지원하는지 확인하는 함수예요. 기능을 사용하기 전에 지원 여부를 확인해야 해요.
+   *
+   * @example
+   * ### 버튼 눌러 불러온 전면 광고 보여주기
+   * ```tsx
+   * import { GoogleAdMob } from '@apps-in-toss/framework';
+   * import { View, Text, Button } from 'react-native';
+   *
+   * const AD_UNIT_ID = '<YOUR_AD_UNIT_ID>';
+   *
+   * function Page() {
+   *   const handlePress = () => {
+   *     if (GoogleAdMob.showAdMobInterstitialAd.isSupported() !== true) {
+   *       return;
+   *     }
+   *
+   *     GoogleAdMob.showAdMobInterstitialAd({
+   *       options: {
+   *         adUnitId: AD_UNIT_ID,
+   *       },
+   *       onEvent: (event) => {
+   *         switch (event.type) {
+   *           case 'requested':
+   *             console.log('광고 보여주기 요청 완료');
+   *             break;
+   *         }
+   *       },
+   *       onError: (error) => {
+   *         console.error('광고 보여주기 실패', error);
+   *       },
+   *     });
+   *   }
+   *
+   *   return (
+   *     <Button onPress={handlePress}>
+   *       <Text>광고 보기</Text>
+   *     </Button>
+   *   );
+   * }
+   * ```
+   */
+  showAdMobInterstitialAd: Object.assign(
+    createEventBridge("showAdMobInterstitialAd"),
+    {
+      isSupported: createConstantBridge2("showAdMobInterstitialAd_isSupported")
+    }
+  ),
+  /**
+   * @public
+   * @category 광고
+   * @name loadAdMobRewardedAd
+   * @description 사용자가 광고를 끝까지 시청하면 리워드를 제공할 수 있는 보상형 광고를 미리 불러와서, 광고가 필요한 시점에 바로 보여줄 수 있도록 준비하는 함수예요.
+   * @param {LoadAdMobRewardedAdParams} params 광고를 불러올 때 사용할 설정 값이에요. 광고 ID와 광고의 동작에 대한 콜백을 설정할 수 있어요.
+   * @param {LoadAdMobRewardedAdOptions} params.options 광고를 불러올 때 전달할 옵션 객체예요.
+   * @param {string} params.options.adUnitId 광고 단위 ID예요. 발급받은 보상형 광고용 ID를 입력해요.
+   * @param {(event: LoadAdMobRewardedAdEvent) => void} [params.onEvent] 광고 관련 이벤트가 발생했을 때 호출돼요. (예시: 광고가 닫히거나 클릭됐을 때). 자세한 이벤트 타입은 [LoadAdMobRewardedAdEvent](/react-native/reference/framework/광고/LoadAdMobRewardedAdEvent.html)를 참고하세요.
+   * @param {(reason: unknown) => void} [params.onError] 광고를 불러오지 못했을 때 호출돼요. (예시: 네트워크 오류나 지원하지 않는 환경일 때)
+   * @property {() => boolean} [isSupported] 현재 실행 중인 앱(예: 토스 앱, 개발용 샌드박스 앱 등)에서 Google AdMob 광고 기능을 지원하는지 확인하는 함수예요. 기능을 사용하기 전에 지원 여부를 확인해야 해요.
+   *
+   * @example
+   * ### 뷰 진입 시 보상형 광고 불러오기
+   * ```tsx
+   * import { GoogleAdMob } from '@apps-in-toss/framework';
+   * import { useEffect } from 'react';
+   * import { View, Text } from 'react-native';
+   *
+   * const AD_UNIT_ID = '<YOUR_AD_UNIT_ID>';
+   *
+   * function Page() {
+   *   useEffect(() => {
+   *     if (GoogleAdMob.loadAdMobRewardedAd.isSupported() !== true) {
+   *       return;
+   *     }
+   *
+   *     const cleanup = GoogleAdMob.loadAdMobRewardedAd({
+   *       options: {
+   *         adUnitId: AD_UNIT_ID,
+   *       },
+   *       onEvent: (event) => {
+   *         switch (event.type) {
+   *           case 'loaded':
+   *             console.log('광고 로드 성공', event.data);
+   *             break;
+   *
+   *           case 'clicked':
+   *             console.log('광고 클릭');
+   *             break;
+   *
+   *           case 'dismissed':
+   *             console.log('광고 닫힘');
+   *             break;
+   *
+   *           case 'failedToShow':
+   *             console.log('광고 보여주기 실패');
+   *             break;
+   *
+   *           case 'impression':
+   *             console.log('광고 노출');
+   *             break;
+   *
+   *           case 'show':
+   *             console.log('광고 컨텐츠 보여졌음');
+   *             break;
+   *
+   *           case 'userEarnedReward':
+   *             console.log('사용자가 광고 시청을 완료했음');
+   *             break;
+   *         }
+   *       },
+   *       onError: (error) => {
+   *         console.error('광고 불러오기 실패', error);
+   *       },
+   *     });
+   *
+   *     return cleanup;
+   *   }, []);
+   *
+   *   return (
+   *     <View>
+   *       <Text>Page</Text>
+   *     </View>
+   *   );
+   * }
+   * ```
+   */
+  loadAdMobRewardedAd: Object.assign(createEventBridge("loadAdMobRewardedAd"), {
+    isSupported: createConstantBridge2("loadAdMobRewardedAd_isSupported")
+  }),
+  /**
+   * @public
+   * @category 광고
+   * @name showAdMobRewardedAd
+   * @description 사용자가 광고를 끝까지 보면 리워드를 받을 수 있도록, 보상형 광고를 화면에 보여줘요. 이 함수는 `loadAdMobRewardedAd` 로 미리 불러온 광고를 실제로 사용자에게 노출해요.
+   * @param {ShowAdMobRewardedAdParams} params 광고를 보여주기 위해 사용할 설정 값이에요. 광고 ID와 광고의 동작에 대한 콜백을 설정할 수 있어요.
+   * @param {ShowAdMobRewardedAdOptions} params.options 광고를 보여줄 때 전달할 옵션 객체예요.
+   * @param {string} params.options.adUnitId 광고 단위 ID예요. `loadAdMobRewardedAd` 로 불러온 보상형 광고용 ID를 입력해요.
+   * @param {(event: ShowAdMobRewardedAdEvent) => void} [params.onEvent] 광고 관련 이벤트가 발생했을 때 호출돼요. (예시: 광고 노출을 요청했을 때). 자세한 이벤트 타입은 [ShowAdMobRewardedAdEvent](/react-native/reference/framework/광고/ShowAdMobRewardedAdEvent.html)를 참고하세요.
+   * @param {(reason: unknown) => void} [params.onError] 광고를 불러오지 못했을 때 호출돼요. (예시: 네트워크 오류나 지원하지 않는 환경일 때)
+   * @property {() => boolean} [isSupported] 현재 실행 중인 앱(예: 토스 앱, 개발용 샌드박스 앱 등)에서 Google AdMob 광고 기능을 지원하는지 확인하는 함수예요. 기능을 사용하기 전에 지원 여부를 확인해야 해요.
+   *
+   * @example
+   * ### 버튼 눌러 불러온 보상형 광고 보여주기
+   * ```tsx
+   * import { GoogleAdMob } from '@apps-in-toss/framework';
+   * import { View, Text, Button } from 'react-native';
+   *
+   * const AD_UNIT_ID = '<YOUR_AD_UNIT_ID>';
+   *
+   * function Page() {
+   *   const handlePress = () => {
+   *     if (GoogleAdMob.showAdMobRewardedAd.isSupported() !== true) {
+   *       return;
+   *     }
+   *
+   *     GoogleAdMob.showAdMobRewardedAd({
+   *       options: {
+   *         adUnitId: AD_UNIT_ID,
+   *       },
+   *       onEvent: (event) => {
+   *         switch (event.type) {
+   *           case 'requested':
+   *             console.log('광고 보여주기 요청 완료');
+   *             break;
+   *         }
+   *       },
+   *       onError: (error) => {
+   *         console.error('광고 보여주기 실패', error);
+   *       },
+   *     });
+   *   }
+   *
+   *   return (
+   *     <Button onPress={handlePress}>
+   *       <Text>광고 보기</Text>
+   *     </Button>
+   *   );
+   * }
+   * ```
+   */
+  showAdMobRewardedAd: Object.assign(createEventBridge("showAdMobRewardedAd"), {
+    isSupported: createConstantBridge2("showAdMobRewardedAd_isSupported")
+  })
+};
+
 // src-web/bedrockEvent.ts
-import { createEventBridge } from "@apps-in-toss/bridge-core";
+import { createEventBridge as createEventBridge2 } from "@apps-in-toss/bridge-core";
 var bedrockEvent = {
   addEventListener: (event, {
     onEvent,
     onError,
     options
-  }) => createEventBridge(event)({
+  }) => createEventBridge2(event)({
+    onEvent,
+    onError: onError ?? (() => {
+    }),
+    options
+  })
+};
+
+// src-web/isMinVersionSupported.ts
+import { createConstantBridge as createConstantBridge3 } from "@apps-in-toss/bridge-core";
+
+// src-web/utils/compareVersion.ts
+var SEMVER_REGEX = /^[v^~<>=]*?(\d+)(?:\.([x*]|\d+)(?:\.([x*]|\d+)(?:\.([x*]|\d+))?(?:-([\da-z\\-]+(?:\.[\da-z\\-]+)*))?(?:\+[\da-z\\-]+(?:\.[\da-z\\-]+)*)?)?)?$/i;
+var isWildcard = (val) => ["*", "x", "X"].includes(val);
+var tryParse = (val) => {
+  const num = parseInt(val, 10);
+  return isNaN(num) ? val : num;
+};
+var coerceTypes = (a, b) => {
+  return typeof a === typeof b ? [a, b] : [String(a), String(b)];
+};
+var compareValues = (a, b) => {
+  if (isWildcard(a) || isWildcard(b)) {
+    return 0;
+  }
+  const [aVal, bVal] = coerceTypes(tryParse(a), tryParse(b));
+  if (aVal > bVal) {
+    return 1;
+  }
+  if (aVal < bVal) {
+    return -1;
+  }
+  return 0;
+};
+var parseVersion = (version) => {
+  if (typeof version !== "string") {
+    throw new TypeError("Invalid argument: expected a string");
+  }
+  const match = version.match(SEMVER_REGEX);
+  if (!match) {
+    throw new Error(`Invalid semver: '${version}'`);
+  }
+  const [, major, minor, patch, build, preRelease] = match;
+  return [major, minor, patch, build, preRelease];
+};
+var compareSegments = (a, b) => {
+  const maxLength = Math.max(a.length, b.length);
+  for (let i = 0; i < maxLength; i++) {
+    const segA = a[i] ?? "0";
+    const segB = b[i] ?? "0";
+    const result = compareValues(segA, segB);
+    if (result !== 0) {
+      return result;
+    }
+  }
+  return 0;
+};
+var compareVersions = (v1, v2) => {
+  const seg1 = parseVersion(v1);
+  const seg2 = parseVersion(v2);
+  const preRelease1 = seg1.pop();
+  const preRelease2 = seg2.pop();
+  const mainCompare = compareSegments(seg1, seg2);
+  if (mainCompare !== 0) {
+    return mainCompare;
+  }
+  if (preRelease1 && preRelease2) {
+    return compareSegments(preRelease1.split("."), preRelease2.split("."));
+  }
+  if (preRelease1) {
+    return -1;
+  }
+  if (preRelease2) {
+    return 1;
+  }
+  return 0;
+};
+
+// src-web/isMinVersionSupported.ts
+function isMinVersionSupported(minVersions) {
+  const operationalEnvironment = createConstantBridge3("getOperationalEnvironment")();
+  if (operationalEnvironment === "sandbox") {
+    return true;
+  }
+  const currentVersion = createConstantBridge3("getTossAppVersion")();
+  const isIOS = createConstantBridge3("getPlatformOS")() === "ios";
+  const minVersion = isIOS ? minVersions.ios : minVersions.android;
+  if (minVersion === void 0) {
+    return false;
+  }
+  if (minVersion === "always") {
+    return true;
+  }
+  if (minVersion === "never") {
+    return false;
+  }
+  return compareVersions(currentVersion, minVersion) >= 0;
+}
+
+// src-web/appsInTossEvent.ts
+import { createEventBridge as createEventBridge3 } from "@apps-in-toss/bridge-core";
+var appsInTossEvent = {
+  addEventListener: (event, {
+    onEvent,
+    onError,
+    options
+  }) => createEventBridge3(event)({
     onEvent,
     onError: onError ?? (() => {
     }),
@@ -98,7 +481,10 @@ var bedrockEvent = {
   })
 };
 export {
+  GoogleAdMob,
   Storage,
+  appsInTossEvent,
   bedrockEvent,
-  getSafeAreaInsets
+  getSafeAreaInsets,
+  isMinVersionSupported
 };

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@apps-in-toss/web-framework",
   "type": "module",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Web Framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "build": "tsup",
-    "test:no-parallel": "vitest --no-watch",
+    "test": "vitest --no-watch",
+    "test:no-parallel": "vitest --no-watch --config=vitest.no-parallel.config.mts",
     "sync-bridge": "bridgepack build"
   },
   "main": "./dist-web/index.js",
@@ -51,9 +52,9 @@
     "config.d.ts"
   ],
   "devDependencies": {
-    "@apps-in-toss-internal/bridgepack": "^0.0.22",
+    "@apps-in-toss-internal/bridgepack": "^0.0.23",
     "@apps-in-toss/bridge-core": "workspace:*",
-    "@apps-in-toss/framework": "0.0.22",
+    "@apps-in-toss/framework": "0.0.23",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-proposal-numeric-separator": "^7.16.7",
@@ -69,9 +70,9 @@
     "@babel/types": "^7.26.9",
     "@clack/prompts": "^0.10.0",
     "@hono/node-server": "^1.13.8",
-    "@react-native-bedrock/cli": "0.0.21",
-    "@react-native-bedrock/mpack-next": "0.0.21",
-    "@react-native-bedrock/native": "0.0.21",
+    "@react-native-bedrock/cli": "0.0.22",
+    "@react-native-bedrock/mpack-next": "0.0.22",
+    "@react-native-bedrock/native": "0.0.22",
     "@toss-design-system/react-native": "^0.5.1",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7",
@@ -92,7 +93,7 @@
     "picocolors": "^1.1.1",
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "react-native-bedrock": "0.0.21",
+    "react-native-bedrock": "0.0.22",
     "tsup": "^8.3.5",
     "typescript": "4.9.5",
     "uuidv7": "^1.0.2",
@@ -103,13 +104,13 @@
     "zod": "^3.24.1"
   },
   "dependencies": {
-    "@apps-in-toss/bridge-core": "0.0.22",
-    "@apps-in-toss/cli": "0.0.22",
-    "@apps-in-toss/plugins": "0.0.22",
+    "@apps-in-toss/bridge-core": "0.0.23",
+    "@apps-in-toss/cli": "0.0.23",
+    "@apps-in-toss/plugins": "0.0.23",
     "@babel/core": "7.23.9"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2a6cea952ba0db69fc2f0c9a94a190b9dfabe8ef"
+  "gitHead": "92c6637381f3fc20dfa1870075f22ef108c62873"
 }