화면 속성 설정하기

---

1. 화면 방향 설정하기 (setDeviceOrientation)

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3

실행환경: Toss AppSandbox App

기기의 화면 방향을 가로 또는 세로로 설정해요.
특정 화면에서만 방향을 바꿔야 한다면, 화면을 벗어날 때 반드시 원래 방향으로 복구해 주세요.

시그니처

function setDeviceOrientation(options: { type: 'portrait' | 'landscape' }): Promise<void>;

파라미터

• options.type필수 · 'portrait' | 'landscape'
  

  화면 방향을 지정해요. portrait은 세로 모드, landscape는 가로 모드예요.

예제

Web (JS)

import { setDeviceOrientation } from '@apps-in-toss/web-framework';

setDeviceOrientation({ type: 'landscape' });

Web (React)

import { setDeviceOrientation } from '@apps-in-toss/web-framework';
import { useEffect } from 'react';

function VideoScreen() {
  useEffect(() => {
    setDeviceOrientation({ type: 'landscape' });

    return () => {
      setDeviceOrientation({ type: 'portrait' }); // 화면을 벗어날 때 복구해요.
    };
  }, []);
}

React Native

import { setDeviceOrientation } from '@apps-in-toss/framework';
import { useEffect } from 'react';

function VideoScreen() {
  useEffect(() => {
    setDeviceOrientation({ type: 'landscape' });

    return () => {
      setDeviceOrientation({ type: 'portrait' }); // 화면을 벗어날 때 복구해요.
    };
  }, []);
}

---

2. 화면 항상 켜짐 설정하기 (setScreenAwakeMode)

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3

실행환경: Toss AppSandbox App

화면이 자동으로 꺼지지 않도록 설정해요.
웹툰, 동영상, 문서 읽기처럼 화면을 계속 켜둬야 하는 상황에서 유용해요.
특정 화면에서만 사용할 경우, 화면을 벗어날 때 반드시 비활성화해 주세요.

시그니처

function setScreenAwakeMode(options: { enabled: boolean }): Promise<{ enabled: boolean }>;

파라미터

• options.enabled필수 · boolean
  

  true로 설정하면 화면이 꺼지지 않고, false로 설정하면 기본 화면 보호기 시간에 따라 꺼져요.

예제

Web (React)

import { setScreenAwakeMode } from '@apps-in-toss/web-framework';
import { useEffect } from 'react';

function MediaScreen() {
  useEffect(() => {
    setScreenAwakeMode({ enabled: true });

    return () => {
      setScreenAwakeMode({ enabled: false }); // 화면을 벗어날 때 복구해요.
    };
  }, []);
}

React Native

import { setScreenAwakeMode } from '@apps-in-toss/framework';
import { useEffect } from 'react';

function MediaScreen() {
  useEffect(() => {
    setScreenAwakeMode({ enabled: true });

    return () => {
      setScreenAwakeMode({ enabled: false }); // 화면을 벗어날 때 복구해요.
    };
  }, []);
}

---

3. 화면 캡처 차단하기 (setSecureScreen)

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3

실행환경: Toss AppSandbox App

네이티브 수준에서 화면 캡처를 차단해요.
계좌 잔고, 거래 내역 등 민감한 정보를 표시하는 화면에서 활용할 수 있어요.

시그니처

function setSecureScreen(options: { enabled: boolean }): Promise<{ enabled: boolean }>;

파라미터

• options.enabled필수 · boolean
  

  true면 화면 캡처를 차단하고, false면 허용해요.

예제

import { setSecureScreen } from '@apps-in-toss/framework';
import { useEffect } from 'react';

function SecureScreen() {
  useEffect(() => {
    setSecureScreen({ enabled: true });

    return () => {
      setSecureScreen({ enabled: false }); // 화면을 벗어날 때 차단을 해제해요.
    };
  }, []);
}