Appearance

앱인토스 SDK ​

Granite는 앱인토스 SDK의 공통 런타임 프레임워크로, 앱인토스 SDK의 서비스 런타임을 구성하는 핵심 모듈이에요. 현재는 WebView용 SDK와 ReactNative용 SDK 두 가지 형태로 제공돼요.
아래 문서는 Granite의 AppsInToss와 네이티브가 화면 진입 시 전달하는 InitialProps를 설명해요.

샘플 프로젝트 보러가기 ↗ 예제 모음 확인하기 ↗

시그니처 ​

AppsInToss ​

typescript
AppsInToss: {
    registerApp(
      AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
      { appName, context, router }: BedrockProps
    ): (initialProps: InitialProps) => JSX.Element;
    readonly appName: string;
}

InitialProps ​

typescript
type InitialProps = AndroidInitialProps | IOSInitialProps;

AppsInToss ​

개요 ​

AppsInToss.registerApp은 서비스의 기본 환경을 설정하고, 복잡한 설정 없이 개발을 빠르게 시작할 수 있도록 도와줘요. appName 만 전달해도 파일 기반 라우팅, 쿼리 파라미터 처리, 뒤로 가기 제어 등 핵심 기능을 바로 활용할 수 있어요.

제공 기능 ​

  • 라우팅: 파일 경로에 맞게 URL이 자동으로 매핑돼요. Next.js의 파일 기반 라우팅과 비슷해요.
    • /my-service/pages/index.ts → intoss://my-service
    • /my-service/pages/home.ts → intoss://my-service/home.
  • 쿼리 파라미터: URL 스킴으로 전달된 파라미터를 쉽게 사용할 수 있어요. 예: referrer 값을 받아 로깅.
  • 뒤로 가기 제어: 뒤로 가기 이벤트를 가로채 다이얼로그 표시, 화면 닫기 등의 처리를 할 수 있어요.
  • 화면 가시성: 화면이 보이는지/가려졌는지 감지해 상황에 맞는 동작을 처리할 수 있어요.

프로퍼티 ​

  • registerApp필수 · RegisterService

    서비스 초기화를 수행하고 라우팅/파라미터/뒤로가기/가시성 등의 기본 기능을 활성화해요.

InitialProps ​

개요 ​

React Native 앱에서 사용자가 특정 화면에 진입할 때, 네이티브(Android/iOS)가 앱으로 전달하는 초기 데이터 타입이에요. 화면 초기화에 필요한 중요한 정보가 포함되어 있으며, 플랫폼별로 구조가 달라요.

  • Android: AndroidInitialProps
  • iOS: IOSInitialProps

프로퍼티 ​

  • platform필수 · 'ios' | 'android'

    현재 앱이 실행 중인 플랫폼이에요.

  • initialColorPreference필수 · ColorPreference

    초기 컬러 테마예요. 사용자가 설정한 컬러 테마를 나타내요.

  • networkStatus필수 · NetworkStatus

    현재 기기의 네트워크 연결 상태와 연결된 네트워크예요.

  • schemestring

    현재 화면에 진입하는 데 사용한 URL 스킴이에요.

  • initialFontSize필수 · xSmall | Small | Medium | Large | xLarge | xxLarge | xxxLarge | A11y_Medium | A11y_Large | A11y_xLarge | A11y_xxLarge | A11y_xxxLarge

    (iOS only) iOS 시스템 폰트 크기예요. 기본값은 Large예요.

  • isVisible필수 · boolean

    (iOS only) 현재 화면이 보이는 상태인지 여부예요. 초기값은 true예요.

  • initialFontScale필수 · string

    (Android only) Android 접근성 설정을 반영한 시스템 폰트 스케일이에요.

예제 ​

A. AppsInToss로 앱 등록 (베이직) ​

tsx
import { AppsInToss } from '@apps-in-toss/framework';
import { PropsWithChildren } from 'react';
import { InitialProps } from '@granite-js/react-native';
import { context } from '../require.context';

function AppContainer({ children }: PropsWithChildren<InitialProps>) {
  return <>{children}</>;
}

export default AppsInToss.registerApp(AppContainer, { context });

B. InitialProps 활용 (플랫폼별 초기 데이터 사용) ​

tsx
import { AppsInToss } from '@apps-in-toss/framework';
import { PropsWithChildren } from 'react';
import { InitialProps } from '@granite-js/react-native';
import { context } from '../require.context';

function AppContainer({ children, ...initialProps }: PropsWithChildren<InitialProps>) {
  // 화면 진입 시 네이티브가 내려준 초기값을 활용할 수 있어요
  console.log({ initialProps });
  return <>{children}</>;
}

export default AppsInToss.registerApp(AppContainer, { context });