@apps-in-toss/web-framework 0.0.7 → 0.0.8

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@apps-in-toss/web-framework",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Web Framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
-    "build": "tsup"
+    "build": "tsup",
+    "sync-bridge": "bridgepack build"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src-web/index.cjs",
+  "module": "./src-web/index.js",
+  "types": "./src-web/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./src-web/index.d.ts",
+      "import": "./src-web/index.js",
+      "require": "./src-web/index.cjs"
     },
     "./config": {
       "types": "./dist/config/index.d.ts",
@@ -32,6 +33,7 @@
   "files": [
     "dist",
     "bin.js",
+    "src-web",
     "config.d.ts",
     "react-native"
   ],
@@ -48,9 +50,9 @@
     "vitest": "^3.0.5"
   },
   "dependencies": {
-    "@apps-in-toss/babel-plugin-json": "0.0.7",
-    "@apps-in-toss/cli": "0.0.7",
-    "@apps-in-toss/framework": "0.0.7",
+    "@apps-in-toss/babel-plugin-json": "0.0.8",
+    "@apps-in-toss/cli": "0.0.8",
+    "@apps-in-toss/framework": "0.0.8",
     "@babel/core": "7.23.9",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
@@ -76,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "66c7ad26e7180aec19b4c6ab168c638708997aff"
+  "gitHead": "44aaa32dffa95a1fe6eb878337caea7b58736ef0"
 }

package/src-web/closeView.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @public
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @name closeView
+ * @description 현재 화면을 닫는 함수에요. 예를 들어, "닫기" 버튼을 눌러서 서비스를 종료할 때 사용할 수 있어요.
+ * @returns {Promise<void>}
+ *
+ * @example
+ * ### 닫기 버튼을 눌러 화면 닫기
+ *
+ * ```tsx
+ * 
+ * import { closeView } from '@apps-in-toss/web-framework';
+ *
+ * function CloseButton() {
+ *  return <input type="button" value="닫기" onClick={closeView} />;
+ * }
+ * ```
+ */
+export declare function closeView(): Promise<void>;
+
+export {};

package/src-web/generateHapticFeedback.d.ts

@@ -0,0 +1,52 @@
+export type HapticFeedbackType = "tickWeak" | "tap" | "tickMedium" | "softMedium" | "basicWeak" | "basicMedium" | "success" | "error" | "wiggle" | "confetti";
+/**
+* @public
+* @tag HapticFeedbackType
+* @category Types
+* @name HapticFeedbackOptions
+* @description
+* generateHapticFeedback 함수에 전달할 햅틱진동의 타입을 나타내요. 진동타입의 종류는 다음과 같아요.
+* ```typescript
+* type HapticFeedbackType =
+* | "tickWeak"
+* | "tap"
+* | "tickMedium"
+* | "softMedium"
+* | "basicWeak"
+* | "basicMedium"
+* | "success"
+* | "error"
+* | "wiggle"
+* | "confetti";
+* ```
+* @typedef { type: HapticFeedbackType } HapticFeedbackOptions
+* @typedef { "tickWeak" | "tap" | "tickMedium" | "softMedium" | "basicWeak" | "basicMedium" | "success" | "error" | "wiggle" | "confetti" } HapticFeedbackType
+*
+*/
+export interface HapticFeedbackOptions {
+	type: HapticFeedbackType;
+}
+/**
+ * @public
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @name generateHapticFeedback
+ * @description 디바이스에 햅틱 진동을 일으키는 함수예요. 예를 들어, 버튼 터치나 화면전환에 드라마틱한 효과를 주고 싶을 때 사용할 수 있어요. [HapticFeedbackOptions](../Types/HapticFeedbackOptions.html)에서 진동타입을 확인해 보세요.
+ * @returns {void}
+ *
+ * @example
+ * ### 버튼을 눌러 햅틱 일으키기
+ *
+ * ```tsx
+ * 
+ * import { generateHapticFeedback } from '@apps-in-toss/web-framework';
+ *
+ * function GenerateHapticFeedback() {
+ *  return <input type="button" value="햅틱" onClick={() => { generateHapticFeedback( { type: "tickWeak"}) }} />;
+ * }
+ * ```
+ */
+export declare function generateHapticFeedback(options: HapticFeedbackOptions): Promise<void>;
+
+export {};

package/src-web/getDeviceId.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @public
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @name getDeviceId
+ * @description
+ * 사용 중인 기기의 고유 식별자를 문자열로 반환해요.
+ *
+ * 이 함수는 현재 사용 중인 기기의 고유 식별자를 문자열로 반환해요. 기기별로 설정이나 데이터를 저장하거나 사용자의 기기를 식별해서 로그를 기록하고 분석하는 데 사용할 수 있어요. 같은 사용자의 여러 기기를 구분하는 데도 유용해요.
+ *
+ * @returns {string} 기기의 고유 식별자를 나타내는 문자열이에요.
+ *
+ * @example
+ * ### 기기 고유 식별자 가져오기
+ *
+ * ```tsx
+ * import { getDeviceId } from '@apps-in-toss/web-framework';
+ * 
+ *
+ * function MyPage() {
+ *   const id = getDeviceId();
+ *
+ *   return (
+ *     <span>사용자의 기기 고유 식별자: {id}</span>
+ *   );
+ * }
+ * ```
+ */
+export declare function getDeviceId(): string;
+
+export {};

package/src-web/getLocale.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @public
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @name getLocale
+ * @description
+ * 사용자의 로케일(locale) 정보를 반환해요. 네이티브 모듈에서 로케일 정보를 가져올 수 없을 때는 기본값으로 'ko-KR'을 반환합니다. 앱의 현지화 및 언어 설정과 관련된 기능을 구현할 때 사용하세요.
+ *
+ * @returns {string} 사용자의 로케일 정보를 반환해요.
+ *
+ * @example
+ * ### 현재 사용자의 로케일 정보 가져오기
+ *
+ * ```tsx
+ * import { getLocale } from '@apps-in-toss/web-framework';
+ * 
+ *
+ * function MyPage() {
+ *  const locale = getLocale();
+ *
+ *  return (
+ *    <span>사용자의 로케일 정보: {locale}</span>
+ *  )
+ * }
+ *
+ * ```
+ */
+export declare function getLocale(): string;
+
+export {};

package/src-web/getNetworkStatus.d.ts

@@ -0,0 +1,55 @@
+export type NetworkStatus = "OFFLINE" | "WIFI" | "2G" | "3G" | "4G" | "5G" | "WWAN" | "UNKNOWN";
+/**
+ * @public
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @name getNetworkStatus
+ * @description
+ * 디바이스의 현재 네트워크 연결 상태를 가져오는 함수예요.
+ * 반환 값은 `NetworkStatus` 타입으로, 인터넷 연결 여부와 연결 유형(Wi-Fi, 모바일 데이터 등)을 나타내요. 값은 다음 중 하나예요.
+ *
+ * - `OFFLINE`: 인터넷에 연결되지 않은 상태예요.
+ * - `WIFI`: Wi-Fi에 연결된 상태예요.
+ * - `2G`: 2G 네트워크에 연결된 상태예요.
+ * - `3G`: 3G 네트워크에 연결된 상태예요.
+ * - `4G`: 4G 네트워크에 연결된 상태예요.
+ * - `5G`: 5G 네트워크에 연결된 상태예요.
+ * - `WWAN`: 인터넷은 연결되었지만, 연결 유형(Wi-Fi, 2G~5G)을 알 수 없는 상태예요. 이 상태는 iOS에서만 확인할 수 있어요.
+ * - `UNKNOWN`: 인터넷 연결 상태를 알 수 없는 상태예요. 이 상태는 안드로이드에서만 확인할 수 있어요.
+ *
+ * @returns {Promise<NetworkStatus>} 네트워크 상태를 반환해요.
+ *
+ * @example
+ * ### 현재 네트워크 상태 가져오기
+ *
+ * 네트워크 연결 상태를 가져와 화면에 표시하는 예제예요.
+ *
+ * ```tsx
+ * import { useState, useEffect } from 'react';
+ * 
+ * import { getNetworkStatus, NetworkStatus } from '@apps-in-toss/web-framework';
+ *
+ * function GetNetworkStatus() {
+ *   const [status, setStatus] = useState<NetworkStatus | ''>('');
+ *
+ *   useEffect(() => {
+ *     async function fetchStatus() {
+ *       const networkStatus = await getNetworkStatus();
+ *       setStatus(networkStatus);
+ *     }
+ *
+ *     fetchStatus();
+ *   }, []);
+ *
+ *   return (
+ *     <div>
+ *       <span>현재 네트워크 상태: {status}</span>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function getNetworkStatus(): Promise<NetworkStatus>;
+
+export {};

package/src-web/getSchemeUri.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @public
+ * @name getSchemeUri
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @description 처음에 화면에 진입한 스킴 값이에요. 페이지 이동으로 인한 URI 변경은 반영되지 않아요.
+ * @returns {string} 처음에 화면에 진입한 스킴 값을 반환해요.
+ *
+ * @example
+ * ### 처음 진입한 스킴 값 가져오기
+ *
+ * ```tsx
+ * import { getSchemeUri } from '@apps-in-toss/web-framework';
+ * 
+ *
+ * function MyPage() {
+ *  const schemeUri = getSchemeUri();
+ *
+ *  return <span>처음에 화면에 진입한 스킴 값: {schemeUri}</span>
+ * }
+ * ```
+ */
+export declare function getSchemeUri(): string;
+
+export {};

package/src-web/index.js

@@ -0,0 +1 @@
+export const createEvents=()=>({emit(event,args){for(let callbacks=this.events[event]||[],i=0,length=callbacks.length;i<length;i++){callbacks[i](args)}},events:{},on(event,cb){var _this_events,_event;((_this_events=this.events)[_event=event]||(_this_events[_event]=[])).push(cb);return()=>{var _this_events_event;this.events[event]=(_this_events_event=this.events[event])===null||_this_events_event===void 0?void 0:_this_events_event.filter(i=>cb!==i)}}});const createEventId=()=>Math.random().toString(36).substring(2,15);const deserializeError=value=>{if(value&&value.__isError){const err=new Error(value.message);err.name=value.name;err.stack=value.stack;return err}return value};window.__BEDROCK_NATIVE_EMITTER=createEvents();export function closeView(...args){if(!window.ReactNativeWebView){throw new Error("This closeView is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`closeView/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`closeView/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"closeView",eventId,args}))})}export function generateHapticFeedback(...args){if(!window.ReactNativeWebView){throw new Error("This generateHapticFeedback is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`generateHapticFeedback/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`generateHapticFeedback/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"generateHapticFeedback",eventId,args}))})}export function share(...args){if(!window.ReactNativeWebView){throw new Error("This share is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`share/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`share/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"share",eventId,args}))})}export function setSecureScreen(...args){if(!window.ReactNativeWebView){throw new Error("This setSecureScreen is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`setSecureScreen/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`setSecureScreen/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"setSecureScreen",eventId,args}))})}export function setScreenAwakeMode(...args){if(!window.ReactNativeWebView){throw new Error("This setScreenAwakeMode is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`setScreenAwakeMode/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`setScreenAwakeMode/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"setScreenAwakeMode",eventId,args}))})}export function getNetworkStatus(...args){if(!window.ReactNativeWebView){throw new Error("This getNetworkStatus is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`getNetworkStatus/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`getNetworkStatus/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"getNetworkStatus",eventId,args}))})}export function getLocale(){if(!window.ReactNativeWebView){throw new Error("This getLocale is not available in browser environment")}if("getLocale"in window.__CONSTANT_HANDLER_MAP){return window.__CONSTANT_HANDLER_MAP["getLocale"]}throw new Error("getLocale is not a constant handler")}export function getSchemeUri(){if(!window.ReactNativeWebView){throw new Error("This getSchemeUri is not available in browser environment")}if("getSchemeUri"in window.__CONSTANT_HANDLER_MAP){return window.__CONSTANT_HANDLER_MAP["getSchemeUri"]}throw new Error("getSchemeUri is not a constant handler")}export function getDeviceId(){if(!window.ReactNativeWebView){throw new Error("This getDeviceId is not available in browser environment")}if("getDeviceId"in window.__CONSTANT_HANDLER_MAP){return window.__CONSTANT_HANDLER_MAP["getDeviceId"]}throw new Error("getDeviceId is not a constant handler")}export function setClipboardText(...args){if(!window.ReactNativeWebView){throw new Error("This setClipboardText is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`setClipboardText/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`setClipboardText/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"setClipboardText",eventId,args}))})}export function getClipboardText(...args){if(!window.ReactNativeWebView){throw new Error("This getClipboardText is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`getClipboardText/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`getClipboardText/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"getClipboardText",eventId,args}))})}export function fetchContacts(...args){if(!window.ReactNativeWebView){throw new Error("This fetchContacts is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`fetchContacts/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`fetchContacts/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"fetchContacts",eventId,args}))})}export function fetchAlbumPhotos(...args){if(!window.ReactNativeWebView){throw new Error("This fetchAlbumPhotos is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`fetchAlbumPhotos/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`fetchAlbumPhotos/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"fetchAlbumPhotos",eventId,args}))})}export var Accuracy=function(Accuracy){Accuracy[Accuracy["Lowest"]=1]="Lowest";Accuracy[Accuracy["Low"]=2]="Low";Accuracy[Accuracy["Balanced"]=3]="Balanced";Accuracy[Accuracy["High"]=4]="High";Accuracy[Accuracy["Highest"]=5]="Highest";Accuracy[Accuracy["BestForNavigation"]=6]="BestForNavigation";return Accuracy}({});export function getCurrentLocation(...args){if(!window.ReactNativeWebView){throw new Error("This getCurrentLocation is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`getCurrentLocation/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`getCurrentLocation/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"getCurrentLocation",eventId,args}))})}export function openCamera(...args){if(!window.ReactNativeWebView){throw new Error("This openCamera is not available in browser environment")}const eventId=createEventId();const emitters=[];const unsubscribe=()=>{for(const emitter of emitters){emitter()}};return new Promise((resolve,reject)=>{emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`openCamera/resolve/${eventId}`,args=>{unsubscribe();resolve(args)}));emitters.push(window.__BEDROCK_NATIVE_EMITTER.on(`openCamera/reject/${eventId}`,error=>{unsubscribe();reject(deserializeError(error))}));window.ReactNativeWebView.postMessage(JSON.stringify({type:"method",functionName:"openCamera",eventId,args}))})}export function startUpdateLocation({onEvent,onError,options}){if(!window.ReactNativeWebView){onError(new Error("This startUpdateLocation is not available in browser environment"));return()=>{}}const eventId=createEventId();const removes=[window.__BEDROCK_NATIVE_EMITTER.on(`startUpdateLocation/onEvent/${eventId}`,response=>{onEvent(response)}),window.__BEDROCK_NATIVE_EMITTER.on(`startUpdateLocation/onError/${eventId}`,error=>{onError(deserializeError(error))})];window.ReactNativeWebView.postMessage(JSON.stringify({type:"addEventListener",functionName:"startUpdateLocation",eventId,args:options}));return()=>{window.ReactNativeWebView.postMessage(JSON.stringify({type:"removeEventListener",functionName:"startUpdateLocation",eventId}));for(const remove of removes){remove()}}}

package/src-web/setScreenAwakeMode.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @public
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @name setScreenAwakeMode
+ * @description
+ * `setScreenAwakeMode` 함수는 화면이 항상 켜져 있도록 설정하거나 해제하는 기능을 제공해요.
+ * 이 기능은 웹툰, 동영상, 문서 읽기 등 화면을 지속해서 켜두어야 하는 상황에서 유용해요.
+ *
+ * `enabled` 옵션을 `true`로 설정하면 화면이 꺼지지 않게 유지하고,  `false`로 설정하면 기본 화면 보호기 시간에 따라 화면이 꺼져요.  특히, 이 함수는 앱 전체에 영향을 미치므로 특정 화면에서만 사용하려면 화면을 벗어날 때 이전 상태로 복구하는 추가 작업이 필요해요.
+ *
+ * 예를 들어, 미디어 콘텐츠 감상 화면에서는 항상 켜짐 모드를 활성화하고, 화면을 떠날 때 설정을 복구해서 불필요한 배터리 소모를 방지할 수 있어요.
+ *
+ * 다만, 앱에서 벗어나는 상황에서는 항상 켜짐 모드가 비활성화될 수 있으니 주의해야 해요.
+ *
+ * @param {object} options 화면 항상 켜짐 모드의 설정 값이에요.
+ * @param {boolean} options.enabled 화면 항상 켜짐 모드를 켜거나 끄는 옵션이에요.
+ * `true`로 설정하면 화면이 항상 켜지고, `false`로 설정하면 화면 보호기 시간에 따라 꺼져요.
+ *
+ * @returns {object} 현재 화면 항상 켜짐 모드의 설정 상태를 반환해요.
+ * @returns {boolean} enabled 화면 항상 켜짐 모드가 켜져 있는지 여부를 나타내는 값이에요.
+ *
+ * @example
+ * ### 화면 항상 켜짐 모드 설정하기
+ *
+ * ```tsx
+ * 
+ * import { setScreenAwakeMode } from '@apps-in-toss/web-framework';
+ *
+ * function SetScreenAwakeMode() {
+ *   return (
+ *     <input type="button"
+ *       value="화면 항상 켜기"
+ *       onClick={() => {
+ *         setScreenAwakeMode({ enabled: true });
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ### 화면 항상 켜짐 모드 복구하기
+ * 특정 화면을 벗어날 때 이전 상태로 복구하려면 다음과 같이 `useEffect`를 사용하세요.
+ *
+ * ```tsx
+ * import { useEffect } from 'react';
+ * import { setScreenAwakeMode, cleanUp } from '@apps-in-toss/web-framework';
+ *
+ * function MediaScreen() {
+ *   useEffect(() => {
+ *     setScreenAwakeMode({ enabled: true });
+ *
+ *     return () => {
+ *       setScreenAwakeMode({ enabled: false }); // 설정을 이전 상태로 복구해요.
+ *     };
+ *   }, []);
+ *
+ *   return <span>미디어 콘텐츠를 감상하는 화면</span>;
+ * }
+ * ```
+ */
+export declare function setScreenAwakeMode(options: {
+	enabled: boolean;
+}): Promise<{
+	enabled: boolean;
+}>;
+
+export {};

package/src-web/setSecureScreen.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @public
+ * @name setSecureScreen
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @description
+ * 화면 캡쳐를 차단해서 민감한 정보가 유출되지 않도록 보호하거나, 필요할 경우 캡쳐를 허용하도록 설정해요. 예를 들어 보안이 중요한 화면에서 사용할 수 있어요.
+ *
+ * @param {object} options 화면 캡쳐 설정 옵션이에요.
+ * @param {boolean} options.enabled 화면 캡쳐를 차단할지 여부를 설정해요. `true`면 캡쳐를 차단하고, `false`면 허용해요.
+ * @returns {enabled: boolean} 현재 설정된 캡쳐 차단 상태를 반환해요.
+ *
+ * @example
+ * ### 캡쳐 허용 상태 변경하기
+ *
+ * ```tsx
+ * 
+ * import { setSecureScreen } from '@apps-in-toss/web-framework';
+ *
+ * function SetSecureScreen() {
+ *  return <input type="button" value="캡쳐 막기" onClick={async () => {
+ *    await setSecureScreen({ enabled: true });
+ *  }} />;
+ * }
+ * ```
+ */
+export declare function setSecureScreen(options: {
+	enabled: boolean;
+}): Promise<{
+	enabled: boolean;
+}>;
+
+export {};

package/src-web/share.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @public
+ * @tag BedrockModule
+ * @category BedrockModules
+ * @kind function
+ * @name share
+ * @description
+ * 사용자가 콘텐츠를 다른 사람과 공유할 수 있도록 네이티브 공유 시트를 표시해요.
+ * `options.message` 속성에 공유할 메시지를 전달하면, 사용자가 선택할 수 있는 앱 목록이 표시돼요.
+ * 예를 들어, 사용자가 텍스트 메시지를 공유하거나 메모 앱에 저장하려고 할 때 유용해요.
+ * @param {object} options - 공유할 메시지를 담은 객체예요.
+ * @param {string} options.message - 공유할 텍스트 문자열이에요. 예를 들어, "안녕하세요! 이 내용을 공유합니다."
+ *
+ * @example
+ * ### 공유하기 기능 구현하기
+ *
+ * 아래는 버튼을 클릭하면 메시지를 공유하는 간단한 예제예요.
+ *
+ * ```tsx
+ * import { share } from '@apps-in-toss/web-framework';
+ * 
+ *
+ * function MyPage() {
+ *   return (
+ *     <input type="button"
+ *       value="공유"
+ *       onClick={() => share({ message: '공유할 메시지입니다.' })}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function share(message: {
+	message: string;
+}): Promise<void>;
+
+export {};