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

package/dist/startUpdateLocation.d.ts

@@ -0,0 +1,151 @@
+
+
+export interface EventEmitterSchema<K extends string, P extends unknown[]> {
+	name: K;
+	params: P;
+}
+declare enum Accuracy {
+	/**
+	 * 오차범위 3KM 이내
+	 */
+	Lowest = 1,
+	/**
+	 * 오차범위 1KM 이내
+	 */
+	Low,
+	/**
+	 * 오차범위 몇 백미터 이내
+	 */
+	Balanced,
+	/**
+	 * 오차범위 10M 이내
+	 */
+	High,
+	/**
+	 * 가장 높은 정확도
+	 */
+	Highest,
+	/**
+	 * 네비게이션을 위한 최고 정확도
+	 */
+	BestForNavigation
+}
+export interface Location {
+	/**
+	 * Android에서만 지원하는 옵션이에요.
+	 *
+	 * - `FINE`: 정확한 위치
+	 * - `COARSE`: 대략적인 위치
+	 *
+	 * @see https://developer.android.com/codelabs/approximate-location
+	 */
+	accessLocation?: "FINE" | "COARSE";
+	/**
+	 * 위치가 업데이트된 시점의 유닉스 타임스탬프예요.
+	 */
+	timestamp: number;
+	coords: {
+		latitude: number; // 위도
+		longitude: number; // 경도
+		altitude: number; // 높이
+		accuracy: number; // 위치 정확도 (미터)
+		altitudeAccuracy: number; // 고도 정확도 (미터)
+		heading: number; // 방향 (북: 0°, 동: 90°, 남: 180°, 서: 270°)
+	};
+}
+export interface StartUpdateLocationOptions {
+	/**
+	 * 위치 정확도를 설정해요.
+	 */
+	accuracy: Accuracy;
+	/**
+	 * 위치 업데이트 주기를 밀리초(ms) 단위로 설정해요.
+	 */
+	timeInterval: number;
+	/**
+	 * 위치 변경 거리를 미터(m) 단위로 설정해요.
+	 */
+	distanceInterval: number;
+}
+export interface StartUpdateLocationSubscription extends EmitterSubscription {
+	remove: () => Promise<void>;
+}
+/**
+ * @name UpdateLocationEventEmitter
+ * @kind typedef
+ * @description
+ * 디바이스의 위치 정보 변경을 감지해요
+ * @extends {EventEmitterSchema<'updateLocation', [Location]>}
+ */
+export interface UpdateLocationEventEmitter extends EventEmitterSchema<"updateLocation", [
+	Location
+]> {
+}
+/**
+ * @public
+ * @tag AppsInTossModule
+ * @category AppsInTossModules
+ * @kind function
+ * @name startUpdateLocation
+ * @description  디바이스의 위치 정보를 지속적으로 감지하고, 위치가 변경되면 콜백을 실행하는 함수예요. 콜백 함수를 등록하면 위치가 변경될 때마다 자동으로 호출돼요.
+ * 실시간 위치 추적이 필요한 기능을 구현할 때 사용할 수 있어요. 예를 들어 지도 앱에서 사용자의 현재 위치를 실시간으로 업데이트할 때, 운동 앱에서 사용자의 이동 거리를 기록할 때 등이에요.
+ * 위치 업데이트 주기와 정확도를 조정해 배터리 소모를 최소화하면서도 필요한 정보를 얻을 수 있어요.
+ *
+ * @param {StartUpdateLocationOptions} options - 위치 정보 감지에 필요한 설정 객체에요.
+ * @param {number} [options.accuracy] 위치 정확도를 설정해요.
+ * @param {number} [options.timeInterval] 위치 정보를 업데이트하는 최소 주기로, 단위는 밀리초(ms)예요. 이 값은 위치 업데이트가 발생하는 가장 짧은 간격을 설정하지만, 시스템이나 환경의 영향을 받아 지정한 주기보다 더 긴 간격으로 업데이트될 수 있어요.
+ * @param {number} [options.distanceInterval] 위치 변경 거리를 미터(m) 단위로 설정해요.
+ * @param {(location: Location) => void} [options.callback] 위치 정보가 변경될 때 호출되는 콜백 함수예요.
+ *
+ * @example
+ * ### 위치 정보 변경 감지하기
+ *
+ * ```tsx
+ * import React, { useState, useEffect } from 'react';
+ * 
+ * import { startUpdateLocation } from '@apps-in-toss/web-framework';
+ *
+ * // 위치 정보 변경 감지하기
+ * function LocationWatcher() {
+ *   const [location, setLocation] = useState(null);
+ *
+ *   useEffect(() => {
+ *     return startUpdateLocation({
+ *       options: {
+ *         accuracy: Accuracy.Default,
+ *         timeInterval: 3000,
+ *         distanceInterval: 10,
+ *       },
+ *       onEvent: (location) => {
+ *         setLocation(location);
+ *       },
+ *       onError: (error) => {
+ *         console.error('위치 정보를 가져오는데 실패했어요:', error);
+ *       },
+ *     });
+ *   }, []);
+ *
+ *   if (location == null) {
+ *     return <span>위치 정보를 가져오는 중이에요...</span>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <span>위도: {location.coords.latitude}</span>
+ *       <span>경도: {location.coords.longitude}</span>
+ *       <span>위치 정확도: {location.coords.accuracy}m</span>
+ *       <span>높이: {location.coords.altitude}m</span>
+ *       <span>고도 정확도: {location.coords.altitudeAccuracy}m</span>
+ *       <span>방향: {location.coords.heading}°</span>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function startUpdateLocation(eventParams: {
+	onEvent: (response: Location) => void;
+	onError: (error: unknown) => void;
+	options: StartUpdateLocationOptions;
+}): () => void;
+
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/web-framework",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Web Framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
@@ -10,19 +10,31 @@
     "build": "tsup",
     "sync-bridge": "bridgepack build"
   },
-  "main": "./src-web/index.cjs",
-  "module": "./src-web/index.js",
+  "main": "./src-web/index.js",
   "types": "./src-web/index.d.ts",
   "exports": {
     ".": {
       "types": "./src-web/index.d.ts",
-      "import": "./src-web/index.js",
-      "require": "./src-web/index.cjs"
+      "default": "./src-web/index.js"
     },
     "./config": {
       "types": "./dist/config/index.d.ts",
-      "import": "./dist/config/index.js",
-      "require": "./dist/config/index.cjs"
+      "default": "./dist/config/index.js"
+    },
+    "./prebuilt/dev/ios": {
+      "default": "./dist/prebuilt/dev.ios.js"
+    },
+    "./prebuilt/dev/android": {
+      "default": "./dist/prebuilt/dev.android.js"
+    },
+    "./prebuilt/prod/ios": {
+      "default": "./dist/prebuilt/prod.ios.js"
+    },
+    "./prebuilt/prod/android": {
+      "default": "./dist/prebuilt/prod.android.js"
+    },
+    "./prebuilt/prod.json": {
+      "default": "./dist/prebuilt/prod.json"
     },
     "./package.json": "./package.json"
   },
@@ -32,28 +44,13 @@
   },
   "files": [
     "dist",
+    "hermesc",
     "bin.js",
     "src-web",
-    "config.d.ts",
-    "react-native"
+    "config.d.ts"
   ],
   "devDependencies": {
-    "@react-native-bedrock/bridgepack": "0.0.11",
-    "@types/babel__core": "^7.20.5",
-    "@types/debug": "^4",
-    "@types/node": "^22.10.2",
-    "eslint": "^9.7.0",
-    "execa": "^9.5.2",
-    "find-up": "^7.0.0",
-    "tsup": "^8.3.5",
-    "typescript": "4.9.5",
-    "vitest": "^3.0.5"
-  },
-  "dependencies": {
-    "@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",
+    "@apps-in-toss/framework": "0.0.10",
     "@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",
@@ -65,18 +62,44 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "7.18.9",
-    "@react-native-bedrock/mpack-next": "0.0.11",
-    "@react-native-bedrock/native": "0.0.11",
+    "@babel/traverse": "^7.26.9",
+    "@babel/types": "^7.26.9",
+    "@clack/prompts": "^0.10.0",
+    "@hono/node-server": "^1.13.8",
+    "@react-native-bedrock/bridgepack": "0.0.12",
+    "@react-native-bedrock/cli": "0.0.12",
+    "@react-native-bedrock/mpack-next": "0.0.12",
+    "@react-native-bedrock/native": "0.0.12",
+    "@toss-design-system/react-native": "^0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7",
+    "@types/debug": "^4",
+    "@types/node": "^22.10.2",
     "@types/react": "18.3.3",
+    "clipanion": "^4.0.0-rc.4",
+    "cosmiconfig": "^9.0.0",
+    "cosmiconfig-typescript-loader": "^5.1.0",
     "es-toolkit": "^1.32.0",
+    "eslint": "^9.7.0",
+    "execa": "^9.5.2",
+    "find-up-simple": "^1.0.1",
+    "hono": "^4.7.4",
     "picocolors": "^1.1.1",
     "react": "18.2.0",
     "react-native": "0.72.6",
-    "react-native-bedrock": "0.0.11",
+    "react-native-bedrock": "0.0.12",
+    "tsup": "^8.3.5",
+    "typescript": "4.9.5",
+    "uuidv7": "^1.0.2",
+    "vitest": "^3.0.5",
     "zod": "^3.24.1"
   },
+  "dependencies": {
+    "@apps-in-toss/cli": "0.0.10",
+    "@babel/core": "7.23.9"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44aaa32dffa95a1fe6eb878337caea7b58736ef0"
+  "gitHead": "b5d671eb92caf922f31f73836dbb4b409a563e8a"
 }

package/src-web/appLogin.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @public
+ * @category 로그인
+ * @name appLogin
+ * @description 토스 인증으로 로그인해요. 로그인이 완료되면 다시 토스 앱으로 이동해요.
+ * @example
+ *
+ * ### 토스 인증을 통해 로그인을 하는 예제
+ *
+ * ```tsx
+ * 
+ * import { appLogin } from '@apps-in-toss/web-framework';
+ *
+ * function Page() {
+ *   const handleLogin = async () => {
+ *     const { authorizationCode, referrer } = await appLogin();
+ *
+ *     // 획득한 인가 코드(`authorizationCode`)와 `referrer`를 서버로 전달해요.
+ *   }
+ *
+ *   return <input type="button" value="로그인" onClick={handleLogin} />;
+ * }
+ * ```
+ */
+export declare function appLogin(): Promise<{
+	authorizationCode: string;
+	referrer: "DEFAULT" | "SANDBOX";
+}>;
+
+export {};

package/src-web/closeView.d.ts

@@ -1,7 +1,6 @@
 /**
  * @public
- * @tag BedrockModule
- * @category BedrockModules
+ * @category 화면 제어
  * @kind function
  * @name closeView
  * @description 현재 화면을 닫는 함수에요. 예를 들어, "닫기" 버튼을 눌러서 서비스를 종료할 때 사용할 수 있어요.

package/src-web/fetchAlbumPhotos.d.ts

@@ -20,9 +20,7 @@ export interface FetchAlbumPhotosOptions {
 }
 /**
  * @public
- * @tag AppsInTossModule
- * @category AppsInTossModules
- * @kind function
+ * @category 사진
  * @name fetchAlbumPhotos
  * @description
  * 사용자의 앨범에서 사진 목록을 불러오는 함수예요.
@@ -32,7 +30,7 @@ export interface FetchAlbumPhotosOptions {
  * @param {number} [options.maxCount=10] 가져올 사진의 최대 개수를 설정해요. 숫자로 입력하며 기본값은 10이에요.
  * @param {number} [options.maxWidth=1024] 사진의 최대 폭을 제한해요. 단위는 픽셀이며 기본값은 `1024`이에요.
  * @param {boolean} [options.base64=false] 이미지를 base64 형식으로 반환할지 설정해요. 기본값은 `false`예요.
- * @returns {Promise<AlbumResponse[]>}
+ * @returns {Promise<ImageResponse[]>}
  * 앨범 사진의 고유 ID와 데이터 URI를 포함한 배열을 반환해요.
  *
  * @example

package/src-web/fetchContacts.d.ts

@@ -9,9 +9,7 @@ export interface ContactEntity {
 }
 /**
  * @public
- * @tag AppsInTossModule
- * @category AppsInTossModules
- * @kind function
+ * @category 연락처
  * @name fetchContacts
  * @description 사용자의 연락처 목록을 페이지 단위로 가져오는 함수예요.
  * @param size - 한 번에 가져올 연락처 개수예요. 예를 들어, 10을 전달하면 최대 10개의 연락처를 가져와요.

package/src-web/generateHapticFeedback.d.ts

@@ -1,38 +1,35 @@
 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
-*
-*/
+ * @public
+ * @category 인터렉션
+ * @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
+ * @category 인터렉션
  * @name generateHapticFeedback
- * @description 디바이스에 햅틱 진동을 일으키는 함수예요. 예를 들어, 버튼 터치나 화면전환에 드라마틱한 효과를 주고 싶을 때 사용할 수 있어요. [HapticFeedbackOptions](../Types/HapticFeedbackOptions.html)에서 진동타입을 확인해 보세요.
+ * @description 디바이스에 햅틱 진동을 일으키는 함수예요. 예를 들어, 버튼 터치나 화면전환에 드라마틱한 효과를 주고 싶을 때 사용할 수 있어요. [HapticFeedbackOptions](/reference/@apps-in-toss/web-framework/인터렉션/HapticFeedbackOptions.html)에서 진동타입을 확인해 보세요.
  * @returns {void}
  *
  * @example

package/src-web/getClipboardText.d.ts

@@ -1,8 +1,6 @@
 /**
  * @public
- * @tag AppsInTossModule
- * @category AppsInTossModules
- * @kind function
+ * @category 클립보드
  * @name getClipboardText
  * @description 클립보드에 저장된 텍스트를 가져오는 함수예요. 복사된 텍스트를 읽어서 다른 작업에 활용할 수 있어요.
  * @returns {Promise<string>} - 클립보드에 저장된 텍스트를 반환해요. 클립보드에 텍스트가 없으면 빈 문자열을 반환해요.

package/src-web/getCurrentLocation.d.ts

@@ -1,5 +1,8 @@
 /**
- * 위치 정확도 옵션이에요.
+ * @public
+ * @category 위치 정보
+ * @name Accuracy
+ * @description 위치 정확도 옵션이에요.
  */
 export enum Accuracy {
 	/**
@@ -27,6 +30,12 @@ export enum Accuracy {
 	 */
 	BestForNavigation
 }
+/**
+ * @public
+ * @category 위치 정보
+ * @name Location
+ * @description 위치 정보를 나타내는 객체예요.
+ */
 export interface Location {
 	/**
 	 * Android에서만 지원하는 옵션이에요.
@@ -41,14 +50,42 @@ export interface Location {
 	 * 위치가 업데이트된 시점의 유닉스 타임스탬프예요.
 	 */
 	timestamp: number;
-	coords: {
-		latitude: number; // 위도
-		longitude: number; // 경도
-		altitude: number; // 높이
-		accuracy: number; // 위치 정확도 (미터)
-		altitudeAccuracy: number; // 고도 정확도 (미터)
-		heading: number; // 방향 (북: 0°, 동: 90°, 남: 180°, 서: 270°)
-	};
+	/**
+	 * @description 위치 정보를 나타내는 객체예요. 자세한 내용은 [LocationCoords](/reference/framework/Types/LocationCoords.html)을 참고해주세요.
+	 */
+	coords: LocationCoords;
+}
+/**
+ * @public
+ * @category 위치 정보
+ * @name LocationCoords
+ * @description 세부 위치 정보를 나타내는 객체예요.
+ */
+export interface LocationCoords {
+	/**
+	 * 위도
+	 */
+	latitude: number;
+	/**
+	 * 경도
+	 */
+	longitude: number;
+	/**
+	 * 높이
+	 */
+	altitude: number;
+	/**
+	 * 위치 정확도
+	 */
+	accuracy: number;
+	/**
+	 * 고도 정확도
+	 */
+	altitudeAccuracy: number;
+	/**
+	 * 방향
+	 */
+	heading: number;
 }
 export interface GetCurrentLocationOptions {
 	/**
@@ -58,9 +95,7 @@ export interface GetCurrentLocationOptions {
 }
 /**
  * @public
- * @tag AppsInTossModule
- * @category AppsInTossModules
- * @kind function
+ * @category 위치 정보
  * @name getCurrentLocation
  * @description 디바이스의 현재 위치 정보를 가져오는 함수예요.
  * 위치 기반 서비스를 구현할 때 사용되고, 한 번만 호출되어 현재 위치를 즉시 반환해요.
@@ -68,7 +103,7 @@ export interface GetCurrentLocationOptions {
  *
  * @param {GetCurrentLocationOptions} options 위치 정보를 가져올 때 사용하는 옵션 객체예요.
  * @param {Accuracy} [options.accuracy] 위치 정보의 정확도 수준이에요. 정확도는 `Accuracy` 타입으로 설정돼요.
- * @returns {Promise<Location>} 디바이스의 위치 정보가 담긴 객체를 반환해요.
+ * @returns {Promise<Location>} 디바이스의 위치 정보가 담긴 객체를 반환해요. 자세한 내용은 [Location](/reference/framework/Types/Location.html)을 참고해주세요.
  *
  * @example
  * ### 디바이스의 현재 위치 정보 가져오기

package/src-web/getDeviceId.d.ts

@@ -1,7 +1,6 @@
 /**
  * @public
- * @tag BedrockModule
- * @category BedrockModules
+ * @category 환경 확인
  * @kind function
  * @name getDeviceId
  * @description

package/src-web/getLocale.d.ts

@@ -1,7 +1,6 @@
 /**
  * @public
- * @tag BedrockModule
- * @category BedrockModules
+ * @category 언어
  * @kind function
  * @name getLocale
  * @description

package/src-web/getNetworkStatus.d.ts

@@ -1,8 +1,7 @@
 export type NetworkStatus = "OFFLINE" | "WIFI" | "2G" | "3G" | "4G" | "5G" | "WWAN" | "UNKNOWN";
 /**
  * @public
- * @tag BedrockModule
- * @category BedrockModules
+ * @category 네트워크
  * @kind function
  * @name getNetworkStatus
  * @description

package/src-web/getOperationalEnvironment.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @public
+ * @category 환경 확인
+ * @kind function
+ * @name getOperationalEnvironment
+ * @description
+ * 현재 실행 중인 앱의 운영 환경을 확인해요.
+ * 토스 앱에서 실행 중이라면 `'toss'`, 샌드박스 환경에서 실행 중이라면 `'sandbox'`를 반환해요.
+ *
+ * 운영 환경은 앱이 실행되는 컨텍스트를 의미하며, 특정 기능의 사용 가능 여부를 판단하는 데 활용할 수 있어요.
+ *
+ * @returns {'toss' | 'sandbox'}
+ * 현재 운영 환경을 나타내는 문자열이에요.
+ * - `'toss'`: 토스 앱에서 실행 중이에요.
+ * - `'sandbox'`: 샌드박스 환경에서 실행 중이에요.
+ *
+ * @example
+ * ### 현재 운영 환경 확인하기
+ *
+ * ```tsx
+ * import { getOperationalEnvironment } from '@apps-in-toss/web-framework';
+ * 
+ *
+ * function EnvironmentInfo() {
+ *   const environment = getOperationalEnvironment();
+ *
+ *   return (
+ *     <span>현재 운영 환경: {environment}</span>
+ *   );
+ * }
+ * ```
+ */
+export declare function getOperationalEnvironment(): "toss" | "sandbox";
+
+export {};

package/src-web/getPlatformOS.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @public
+ * @kind function
+ * @category 환경 확인
+ *
+ * @name getPlatformOS
+ * @signature
+ * ```typescript
+ * function getPlatformOS(): 'ios' | 'android';
+ * ```
+ *
+ * @description
+ * 현재 실행 중인 플랫폼을 확인하는 함수예요.
+ * 이 함수는 `react-native`의 `Platform.OS` 값을 기반으로 동작하며, `ios` 또는 `android` 중 하나의 문자열을 반환해요.
+ *
+ * @returns 현재 플랫폼을 나타내는 문자열로, `'ios'` 또는 `'android'` 중 하나예요.
+ *
+ * @example
+ * ```typescript
+ * import { getPlatformOS } from '@apps-in-toss/web-framework';
+ *
+ * const platform = getPlatformOS();
+ * console.log(`현재 플랫폼: ${platform}`);
+ * ```
+ */
+export declare function getPlatformOS(): "ios" | "android";
+
+export {};

package/src-web/getSchemeUri.d.ts

@@ -1,8 +1,7 @@
 /**
  * @public
  * @name getSchemeUri
- * @tag BedrockModule
- * @category BedrockModules
+ * @category 환경 확인
  * @kind function
  * @description 처음에 화면에 진입한 스킴 값이에요. 페이지 이동으로 인한 URI 변경은 반영되지 않아요.
  * @returns {string} 처음에 화면에 진입한 스킴 값을 반환해요.