@apps-in-toss/framework 0.0.36 → 0.0.38

package/dist/index.cjs

@@ -1549,7 +1549,7 @@ function useBridgeHandler({
           },
           {}
         )
-      )}`,
+      )};`,
       originalInjectedJavaScript,
       "true"
     ].join("\n"),
@@ -1899,8 +1899,16 @@ function WebView({ type, local, onMessage, ...props }) {
   const bottom = (0, import_private3.useSafeAreaBottom)();
   const global2 = getAppsInTossGlobals();
   const partner = (0, import_react_native20.usePartnerNavigation)();
+  const disableTextSelectionCSS = `
+    (function() {
+      const style = document.createElement('style');
+      style.textContent = '*:not(input):not(textarea) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }';
+      document.head.appendChild(style);
+    })();
+  `;
   const handler = useBridgeHandler({
     onMessage,
+    injectedJavaScript: [disableTextSelectionCSS].join("\n"),
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     eventListenerMap: {
       ...event_bridges_exports,
@@ -1979,14 +1987,31 @@ function WebView({ type, local, onMessage, ...props }) {
   }, [type, props]);
   const BaseWebView = WEBVIEW_TYPES[type];
   const webViewDebuggingEnabled = operationalEnvironment === "sandbox";
-  const handleNavigationStateChange = (0, import_react10.useCallback)((event) => {
-    if (event.url) {
-      trackScreen(event.url);
-    }
-  }, []);
+  const [canHistoryGoBack, setCanHistoryGoBack] = (0, import_react10.useState)(false);
+  const handleNavigationStateChange = (0, import_react10.useCallback)(
+    (event) => {
+      if (event.url) {
+        trackScreen(event.url);
+      }
+      setCanHistoryGoBack(event.canGoBack);
+    },
+    [setCanHistoryGoBack]
+  );
   const userAgent = useCreateUserAgent({
     colorPreference: "light"
   });
+  const backEvent = (0, import_react_native_bedrock18.useBackEvent)();
+  const handleBackEvent = (0, import_react10.useCallback)(() => {
+    if (canHistoryGoBack) {
+      handler.ref.current?.goBack();
+    } else {
+      (0, import_react_native_bedrock18.closeView)();
+    }
+  }, [canHistoryGoBack, handler]);
+  (0, import_react10.useEffect)(() => {
+    backEvent.addEventListener(handleBackEvent);
+    return () => backEvent.removeEventListener(handleBackEvent);
+  }, [backEvent, handleBackEvent]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     BaseWebView,
     {

package/dist/index.d.cts

@@ -1441,20 +1441,22 @@ interface IapCreateOneTimePurchaseOrderOptions {
  * @category 인앱결제
  * @name IapCreateOneTimePurchaseOrderResult
  * @description 인앱결제 1건이 완료되면 결제 세부 정보와 상품 정보를 담아 반환해요. 반환된 정보로 결제한 상품의 정보를 화면에 표시할 수 있어요.
- * @property {string | null} miniAppIconUrl - 미니앱 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요. 콘솔에서 아이콘을 등록하지 않았다면 `null`로 반환돼요.
+ * @property {string} orderId - 결제 주문 ID이에요. 결제 완료 후 [결제 상태를 조회](https://developers-apps-in-toss.toss.im/api/getIapOrderStatus.html)할 때 사용해요.
  * @property {string} displayName - 화면에 표시할 상품 이름이에요.
  * @property {string} displayAmount - 통화 단위가 포함된 가격 정보예요. 예를 들어 `1,000원`으로 가격과 통화가 함께 표시돼요.
  * @property {number} amount - 상품 가격 숫자 값이에요. 화폐 단위와 쉼표를 제외한 순수 숫자예요. 예를 들어 `1000`으로 표시돼요.
  * @property {string} currency - [ISO 4217 표준](https://ko.wikipedia.org/wiki/ISO_4217)에 따른 상품 가격 통화 단위예요. 예를 들어 원화는 `KRW`, 달러는 `USD`로 표시돼요.
  * @property {number} fraction - 가격을 표시할 때 소수점 아래 몇 자리까지 보여줄지 정하는 값이에요. 예를 들어 달러는 소수점 둘째 자리까지 보여줘서 `2`, 원화는 소수점이 필요 없어서 `0`이에요
+ * @property {string | null} miniAppIconUrl - 미니앱 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요. 콘솔에서 아이콘을 등록하지 않았다면 `null`로 반환돼요.
  */
 interface IapCreateOneTimePurchaseOrderResult {
-    miniAppIconUrl: string | null;
+    orderId: string;
     displayName: string;
     displayAmount: string;
     amount: number;
     currency: string;
     fraction: number;
+    miniAppIconUrl: string | null;
 }
 /**
  * @public
@@ -1481,25 +1483,26 @@ interface IapCreateOneTimePurchaseOrderResult {
  * ### 특정 인앱결제 주문서 페이지로 이동하기
  *
  * ```tsx
- * import { Button } from 'react-native';
- * import { IAP } from '@apps-in-toss/framework';
+ * import { IAP } from "@apps-in-toss/web-framework";
+ * import { Button } from "@toss-design-system/react-native";
  *
  * interface Props {
  *   productId: string;
  * }
  *
  * function IapCreateOneTimePurchaseOrderButton({ productId }: Props) {
- *   const handleClick = async () => {
+ *   async function handleClick() {
  *     try {
  *       await IAP.createOneTimePurchaseOrder({
  *         productId,
  *       });
+ *       console.error("인앱결제에 성공했어요");
  *     } catch (error) {
  *       console.error('인앱결제에 실패했어요:', error);
  *     }
- *   };
+ *   }
  *
- *   return <Button title="구매하기" onPress={handleClick} />;
+ *   return <Button onClick={handleClick}>구매하기</Button>;
  * }
  * ```
  */
@@ -1509,7 +1512,7 @@ declare function createOneTimePurchaseOrder(params: IapCreateOneTimePurchaseOrde
  * @category 인앱결제
  * @name IapProductListItem
  * @description 인앱결제로 구매할 수 있는 상품 하나의 정보를 담은 객체예요. 상품 목록을 화면에 표시할 때 사용해요.
- * @property {string} sku - 상품의 고유 ID예요. [인앱결제 주문서 페이지로 이동할때](/bedrock/reference/framework/인앱결제/createOneTimePurchaseOrder.html) 사용하는 `productId`와 동일한 값이에요.
+ * @property {string} sku - 상품의 고유 ID예요. [IAP.createOneTimePurchaseOrder](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/createOneTimePurchaseOrder.html)를 호출할때 사용하는 `productId`와 동일한 값이에요.
  * @property {string} displayName - 화면에 표시할 상품 이름이에요. 상품 이름은 앱인토스 콘솔에서 설정한 값이에요.
  * @property {string} displayAmount - 통화 단위가 포함된 가격 정보예요. 예를 들어 `1,000원`으로 가격과 통화가 함께 표시돼요.
  * @property {string} iconUrl - 상품 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요.
@@ -1533,20 +1536,32 @@ interface IapProductListItem {
  * ### 구매 가능한 인앱결제 상품목록 가져오기
  *
  * ```tsx
- * import { useEffect, useState } from 'react';
- * import { List, ListRow, Txt } from '@toss-design-system/react-native';
- * import { IAP } from '@apps-in-toss/framework';
+ * import { IAP, IapProductListItem } from "@apps-in-toss/framework";
+ * import { Button, List, ListRow } from "@toss-design-system/react-native";
+ * import { useEffect, useState } from "react";
  *
- * function IapGetProductItemList() {
+ * function IapProductList() {
  *   const [products, setProducts] = useState<IapProductListItem[]>([]);
  *
+ *   async function buyIapProduct(productId: string) {
+ *     try {
+ *       await IAP.createOneTimePurchaseOrder({
+ *         productId,
+ *       });
+ *
+ *       console.error("인앱결제에 성공했어요");
+ *     } catch (error) {
+ *       console.error("인앱결제에 실패했어요:", error);
+ *     }
+ *   }
+ *
  *   useEffect(() => {
  *     async function fetchProducts() {
  *       try {
  *         const response = await IAP.getProductItemList();
  *         setProducts(response?.products ?? []);
  *       } catch (error) {
- *         console.error('상품 목록을 가져오는 데 실패했어요:', error);
+ *         console.error("상품 목록을 가져오는 데 실패했어요:", error);
  *       }
  *     }
  *
@@ -1558,7 +1573,22 @@ interface IapProductListItem {
  *       {products.map((product) => (
  *         <ListRow
  *           key={product.sku}
- *           contents={<Txt>{product.displayName}</Txt>}
+ *           left={
+ *             <ListRow.Image type="square" source={{ uri: product.iconUrl }} />
+ *           }
+ *           right={
+ *             <Button size="medium" onPress={() => buyIapProduct(product.sku)}>
+ *               구매하기
+ *             </Button>
+ *           }
+ *           contents={
+ *             <ListRow.Texts
+ *               type="3RowTypeA"
+ *               top={product.displayName}
+ *               middle={product.description}
+ *               bottom={product.displayAmount}
+ *             />
+ *           }
  *         />
  *       ))}
  *     </List>
@@ -1574,8 +1604,8 @@ declare function getProductItemList(): Promise<{
  * @category 인앱결제
  * @name IAP
  * @description 인앱결제 관련 기능을 모은 객체예요. 단건 인앱결제 주문서 이동과 상품 목록 조회 기능을 제공해요.
- * @property {typeof createOneTimePurchaseOrder} [createOneTimePurchaseOrder] 특정 인앱결제 주문서 페이지로 이동해요. 자세한 내용은 [createOneTimePurchaseOrder](/bedrock/reference/framework/인앱결제/createOneTimePurchaseOrder.html) 문서를 참고하세요.
- * @property {typeof getProductItemList} [getProductItemList] 인앱결제로 구매할 수 있는 상품 목록을 가져와요. 자세한 내용은 [getProductItemList](/bedrock/reference/framework/인앱결제/getProductItemList.html) 문서를 참고하세요.
+ * @property {typeof createOneTimePurchaseOrder} [createOneTimePurchaseOrder] 특정 인앱결제 주문서 페이지로 이동해요. 자세한 내용은 [createOneTimePurchaseOrder](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/getProductItemList.html) 문서를 참고하세요.
+ * @property {typeof getProductItemList} [getProductItemList] 인앱결제로 구매할 수 있는 상품 목록을 가져와요. 자세한 내용은 [getProductItemList](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/createOneTimePurchaseOrder.html) 문서를 참고하세요.
  */
 declare const IAP: {
     createOneTimePurchaseOrder: typeof createOneTimePurchaseOrder;

package/dist/index.d.ts

@@ -1441,20 +1441,22 @@ interface IapCreateOneTimePurchaseOrderOptions {
  * @category 인앱결제
  * @name IapCreateOneTimePurchaseOrderResult
  * @description 인앱결제 1건이 완료되면 결제 세부 정보와 상품 정보를 담아 반환해요. 반환된 정보로 결제한 상품의 정보를 화면에 표시할 수 있어요.
- * @property {string | null} miniAppIconUrl - 미니앱 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요. 콘솔에서 아이콘을 등록하지 않았다면 `null`로 반환돼요.
+ * @property {string} orderId - 결제 주문 ID이에요. 결제 완료 후 [결제 상태를 조회](https://developers-apps-in-toss.toss.im/api/getIapOrderStatus.html)할 때 사용해요.
  * @property {string} displayName - 화면에 표시할 상품 이름이에요.
  * @property {string} displayAmount - 통화 단위가 포함된 가격 정보예요. 예를 들어 `1,000원`으로 가격과 통화가 함께 표시돼요.
  * @property {number} amount - 상품 가격 숫자 값이에요. 화폐 단위와 쉼표를 제외한 순수 숫자예요. 예를 들어 `1000`으로 표시돼요.
  * @property {string} currency - [ISO 4217 표준](https://ko.wikipedia.org/wiki/ISO_4217)에 따른 상품 가격 통화 단위예요. 예를 들어 원화는 `KRW`, 달러는 `USD`로 표시돼요.
  * @property {number} fraction - 가격을 표시할 때 소수점 아래 몇 자리까지 보여줄지 정하는 값이에요. 예를 들어 달러는 소수점 둘째 자리까지 보여줘서 `2`, 원화는 소수점이 필요 없어서 `0`이에요
+ * @property {string | null} miniAppIconUrl - 미니앱 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요. 콘솔에서 아이콘을 등록하지 않았다면 `null`로 반환돼요.
  */
 interface IapCreateOneTimePurchaseOrderResult {
-    miniAppIconUrl: string | null;
+    orderId: string;
     displayName: string;
     displayAmount: string;
     amount: number;
     currency: string;
     fraction: number;
+    miniAppIconUrl: string | null;
 }
 /**
  * @public
@@ -1481,25 +1483,26 @@ interface IapCreateOneTimePurchaseOrderResult {
  * ### 특정 인앱결제 주문서 페이지로 이동하기
  *
  * ```tsx
- * import { Button } from 'react-native';
- * import { IAP } from '@apps-in-toss/framework';
+ * import { IAP } from "@apps-in-toss/web-framework";
+ * import { Button } from "@toss-design-system/react-native";
  *
  * interface Props {
  *   productId: string;
  * }
  *
  * function IapCreateOneTimePurchaseOrderButton({ productId }: Props) {
- *   const handleClick = async () => {
+ *   async function handleClick() {
  *     try {
  *       await IAP.createOneTimePurchaseOrder({
  *         productId,
  *       });
+ *       console.error("인앱결제에 성공했어요");
  *     } catch (error) {
  *       console.error('인앱결제에 실패했어요:', error);
  *     }
- *   };
+ *   }
  *
- *   return <Button title="구매하기" onPress={handleClick} />;
+ *   return <Button onClick={handleClick}>구매하기</Button>;
  * }
  * ```
  */
@@ -1509,7 +1512,7 @@ declare function createOneTimePurchaseOrder(params: IapCreateOneTimePurchaseOrde
  * @category 인앱결제
  * @name IapProductListItem
  * @description 인앱결제로 구매할 수 있는 상품 하나의 정보를 담은 객체예요. 상품 목록을 화면에 표시할 때 사용해요.
- * @property {string} sku - 상품의 고유 ID예요. [인앱결제 주문서 페이지로 이동할때](/bedrock/reference/framework/인앱결제/createOneTimePurchaseOrder.html) 사용하는 `productId`와 동일한 값이에요.
+ * @property {string} sku - 상품의 고유 ID예요. [IAP.createOneTimePurchaseOrder](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/createOneTimePurchaseOrder.html)를 호출할때 사용하는 `productId`와 동일한 값이에요.
  * @property {string} displayName - 화면에 표시할 상품 이름이에요. 상품 이름은 앱인토스 콘솔에서 설정한 값이에요.
  * @property {string} displayAmount - 통화 단위가 포함된 가격 정보예요. 예를 들어 `1,000원`으로 가격과 통화가 함께 표시돼요.
  * @property {string} iconUrl - 상품 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요.
@@ -1533,20 +1536,32 @@ interface IapProductListItem {
  * ### 구매 가능한 인앱결제 상품목록 가져오기
  *
  * ```tsx
- * import { useEffect, useState } from 'react';
- * import { List, ListRow, Txt } from '@toss-design-system/react-native';
- * import { IAP } from '@apps-in-toss/framework';
+ * import { IAP, IapProductListItem } from "@apps-in-toss/framework";
+ * import { Button, List, ListRow } from "@toss-design-system/react-native";
+ * import { useEffect, useState } from "react";
  *
- * function IapGetProductItemList() {
+ * function IapProductList() {
  *   const [products, setProducts] = useState<IapProductListItem[]>([]);
  *
+ *   async function buyIapProduct(productId: string) {
+ *     try {
+ *       await IAP.createOneTimePurchaseOrder({
+ *         productId,
+ *       });
+ *
+ *       console.error("인앱결제에 성공했어요");
+ *     } catch (error) {
+ *       console.error("인앱결제에 실패했어요:", error);
+ *     }
+ *   }
+ *
  *   useEffect(() => {
  *     async function fetchProducts() {
  *       try {
  *         const response = await IAP.getProductItemList();
  *         setProducts(response?.products ?? []);
  *       } catch (error) {
- *         console.error('상품 목록을 가져오는 데 실패했어요:', error);
+ *         console.error("상품 목록을 가져오는 데 실패했어요:", error);
  *       }
  *     }
  *
@@ -1558,7 +1573,22 @@ interface IapProductListItem {
  *       {products.map((product) => (
  *         <ListRow
  *           key={product.sku}
- *           contents={<Txt>{product.displayName}</Txt>}
+ *           left={
+ *             <ListRow.Image type="square" source={{ uri: product.iconUrl }} />
+ *           }
+ *           right={
+ *             <Button size="medium" onPress={() => buyIapProduct(product.sku)}>
+ *               구매하기
+ *             </Button>
+ *           }
+ *           contents={
+ *             <ListRow.Texts
+ *               type="3RowTypeA"
+ *               top={product.displayName}
+ *               middle={product.description}
+ *               bottom={product.displayAmount}
+ *             />
+ *           }
  *         />
  *       ))}
  *     </List>
@@ -1574,8 +1604,8 @@ declare function getProductItemList(): Promise<{
  * @category 인앱결제
  * @name IAP
  * @description 인앱결제 관련 기능을 모은 객체예요. 단건 인앱결제 주문서 이동과 상품 목록 조회 기능을 제공해요.
- * @property {typeof createOneTimePurchaseOrder} [createOneTimePurchaseOrder] 특정 인앱결제 주문서 페이지로 이동해요. 자세한 내용은 [createOneTimePurchaseOrder](/bedrock/reference/framework/인앱결제/createOneTimePurchaseOrder.html) 문서를 참고하세요.
- * @property {typeof getProductItemList} [getProductItemList] 인앱결제로 구매할 수 있는 상품 목록을 가져와요. 자세한 내용은 [getProductItemList](/bedrock/reference/framework/인앱결제/getProductItemList.html) 문서를 참고하세요.
+ * @property {typeof createOneTimePurchaseOrder} [createOneTimePurchaseOrder] 특정 인앱결제 주문서 페이지로 이동해요. 자세한 내용은 [createOneTimePurchaseOrder](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/getProductItemList.html) 문서를 참고하세요.
+ * @property {typeof getProductItemList} [getProductItemList] 인앱결제로 구매할 수 있는 상품 목록을 가져와요. 자세한 내용은 [getProductItemList](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/createOneTimePurchaseOrder.html) 문서를 참고하세요.
  */
 declare const IAP: {
     createOneTimePurchaseOrder: typeof createOneTimePurchaseOrder;

package/dist/index.js

@@ -954,9 +954,9 @@ import {
   usePartnerNavigation
 } from "@toss-design-system/react-native";
 import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop2 } from "@toss-design-system/react-native/private";
-import { useCallback as useCallback5, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo3, useState as useState4 } from "react";
 import { Platform as Platform7 } from "react-native";
-import { getSchemeUri as getSchemeUri5, useBedrockEvent } from "react-native-bedrock";
+import { getSchemeUri as getSchemeUri5, useBackEvent, useBedrockEvent, closeView as closeView3 } from "react-native-bedrock";
 import * as bedrockAsyncBridges from "react-native-bedrock/async-bridges";
 import * as bedrockConstantBridges from "react-native-bedrock/constant-bridges";
 
@@ -1495,7 +1495,7 @@ function useBridgeHandler({
           },
           {}
         )
-      )}`,
+      )};`,
       originalInjectedJavaScript,
       "true"
     ].join("\n"),
@@ -1845,8 +1845,16 @@ function WebView({ type, local, onMessage, ...props }) {
   const bottom = useSafeAreaBottom();
   const global2 = getAppsInTossGlobals();
   const partner = usePartnerNavigation();
+  const disableTextSelectionCSS = `
+    (function() {
+      const style = document.createElement('style');
+      style.textContent = '*:not(input):not(textarea) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }';
+      document.head.appendChild(style);
+    })();
+  `;
   const handler = useBridgeHandler({
     onMessage,
+    injectedJavaScript: [disableTextSelectionCSS].join("\n"),
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     eventListenerMap: {
       ...event_bridges_exports,
@@ -1925,14 +1933,31 @@ function WebView({ type, local, onMessage, ...props }) {
   }, [type, props]);
   const BaseWebView = WEBVIEW_TYPES[type];
   const webViewDebuggingEnabled = operationalEnvironment === "sandbox";
-  const handleNavigationStateChange = useCallback5((event) => {
-    if (event.url) {
-      trackScreen(event.url);
-    }
-  }, []);
+  const [canHistoryGoBack, setCanHistoryGoBack] = useState4(false);
+  const handleNavigationStateChange = useCallback5(
+    (event) => {
+      if (event.url) {
+        trackScreen(event.url);
+      }
+      setCanHistoryGoBack(event.canGoBack);
+    },
+    [setCanHistoryGoBack]
+  );
   const userAgent = useCreateUserAgent({
     colorPreference: "light"
   });
+  const backEvent = useBackEvent();
+  const handleBackEvent = useCallback5(() => {
+    if (canHistoryGoBack) {
+      handler.ref.current?.goBack();
+    } else {
+      closeView3();
+    }
+  }, [canHistoryGoBack, handler]);
+  useEffect7(() => {
+    backEvent.addEventListener(handleBackEvent);
+    return () => backEvent.removeEventListener(handleBackEvent);
+  }, [backEvent, handleBackEvent]);
   return /* @__PURE__ */ jsx7(
     BaseWebView,
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
@@ -57,9 +57,9 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/analytics": "0.0.36",
-    "@apps-in-toss/cli": "0.0.36",
-    "@apps-in-toss/plugins": "0.0.36",
+    "@apps-in-toss/analytics": "0.0.38",
+    "@apps-in-toss/cli": "0.0.38",
+    "@apps-in-toss/plugins": "0.0.38",
     "es-hangul": "^2.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b3b65b35bf9532480fcbd14f7d22b796644e2f2f"
+  "gitHead": "ce9e4e922e27220978e7975e350539e863088b38"
 }