getSafeAreaInsets

Deprecated

이 함수는 더 이상 사용되지 않습니다. SDK JSDoc에서 명시적으로 deprecated 처리되었습니다. 대신 SafeAreaInsets.get()을 사용하세요.

// 이전 (deprecated)
import { getSafeAreaInsets } from '@apps-in-toss/web-framework';
const inset = getSafeAreaInsets(); // number

// 권장 방법
import { SafeAreaInsets } from '@apps-in-toss/web-framework';
const insets = SafeAreaInsets.get(); // { top, bottom, left, right }

Safe Area 인셋 값을 숫자로 반환합니다. SafeAreaInsets.get()은 { top, bottom, left, right } 객체를 반환하므로 더 세밀한 제어가 가능합니다.

시그니처

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

/** @deprecated 대신 SafeAreaInsets.get()을 사용하세요. */
declare function getSafeAreaInsets(): number;

파라미터

없음.

반환값

• number — Safe Area 인셋 값 (단위: 픽셀). 방향별 세부 값은 반환하지 않습니다.

권한

권한이 필요하지 않습니다 — getSafeAreaInsets는 별도의 PermissionName에 바인딩되지 않습니다. 권한이 필요한 다른 네임스페이스의 일반적인 처리 흐름은 Guides — 권한 처리 패턴을 참고하세요.

마이그레이션 가이드

getSafeAreaInsets에서 SafeAreaInsets.get()으로 마이그레이션하는 방법은 다음과 같습니다.

// 이전 코드
import { getSafeAreaInsets } from '@apps-in-toss/web-framework';

function Page() {
  const inset = getSafeAreaInsets();
  return <div style={{ paddingBottom: inset }}>...</div>;
}

// 마이그레이션 후
import { SafeAreaInsets } from '@apps-in-toss/web-framework';
import { useState, useEffect } from 'react';

function Page() {
  const [insets, setInsets] = useState(() => SafeAreaInsets.get());

  useEffect(() => {
    // 화면 모드 변경 시 safe area 업데이트를 구독합니다.
    const cleanup = SafeAreaInsets.subscribe({
      onEvent: (newInsets) => setInsets(newInsets),
    });
    return cleanup;
  }, []);

  return (
    <div style={{
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
      paddingLeft: insets.left,
      paddingRight: insets.right,
    }}>
      ...
    </div>
  );
}

직접 실행해 보기

→sdk-example에서 실행해 보기

관련 API

• getPlatformOS — 현재 플랫폼 OS를 반환합니다.
• getOperationalEnvironment — 현재 실행 환경을 반환합니다.

관련 가이드

• Guides — 권한 처리 패턴 — 다른 네임스페이스의 권한 흐름 (참고용; getSafeAreaInsets는 권한이 필요하지 않습니다).
• Recipes — Safe Area 대응 레이아웃 패턴

외부 참조

• @apps-in-toss/web-framework — 상위 SDK 패키지. 실제 export는 내부적으로 @apps-in-toss/web-bridge에서 가져옵니다.
• CSS 환경 변수 대응: env(safe-area-inset-*) — CSS에서 Safe Area를 처리하는 표준 방식이지만, 미니앱 환경에서는 SDK API가 더 정확한 값을 제공합니다.