앱인토스 개발자센터

Appearance

콘솔 바로가기
이 내용이 도움이 되었나요?

클립보드 ​

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3
실행환경: Toss AppSandbox App

1. 클립보드 텍스트 가져오기 (getClipboardText) ​

클립보드에 저장된 텍스트를 읽어오는 함수예요.

시그니처

typescript
function getClipboardText(): Promise<string>;

반환값

  • Promise<string>

    클립보드에 저장된 텍스트를 반환해요. 클립보드에 텍스트가 없으면 빈 문자열을 반환해요.

권한 메서드

  • getClipboardText.getPermission

    클립보드 읽기 권한의 현재 상태를 반환해요. allowed · denied · notDetermined · osPermissionDenied 중 하나를 반환해요.

  • getClipboardText.openPermissionDialog

    클립보드 읽기 권한을 다시 요청하는 다이얼로그를 표시해요. 허용하면 allowed, 거부하면 denied를 반환해요.

에러

권한이 거부된 경우 GetClipboardTextPermissionError가 발생해요.
error instanceof GetClipboardTextPermissionError로 확인할 수 있어요.

typescript
class GetClipboardTextPermissionError extends PermissionError {
  constructor();
}

예제

js
import { getClipboardText, GetClipboardTextPermissionError } from '@apps-in-toss/web-framework';

async function handleGetClipboardText() {
  try {
    const clipboardText = await getClipboardText();
    console.log('클립보드 텍스트:', clipboardText || '클립보드에 텍스트가 없어요.');
  } catch (error) {
    if (error instanceof GetClipboardTextPermissionError) {
      console.log('클립보드 읽기 권한 없음');
    }
  }
}
tsx
import { getClipboardText, GetClipboardTextPermissionError } from '@apps-in-toss/web-framework';
import { useState } from 'react';

function PasteButton() {
  const [text, setText] = useState('');

  const handlePress = async () => {
    try {
      const clipboardText = await getClipboardText();
      setText(clipboardText || '클립보드에 텍스트가 없어요.');
    } catch (error) {
      if (error instanceof GetClipboardTextPermissionError) {
        // 클립보드 읽기 권한 없음
      }
    }
  };

  return (
    <div>
      <span>{text}</span>
      <input type="button" value="붙여넣기" onClick={handlePress} />
      <input
        type="button"
        value="권한 확인하기"
        onClick={async () => {
          const permission = await getClipboardText.getPermission();
          alert(permission);
        }}
      />
      <input
        type="button"
        value="권한 요청하기"
        onClick={async () => {
          const permission = await getClipboardText.openPermissionDialog();
          alert(permission);
        }}
      />
    </div>
  );
}
tsx
import { getClipboardText, GetClipboardTextPermissionError } from '@apps-in-toss/framework';
import { useState } from 'react';
import { Alert, Button, Text, View } from 'react-native';

function PasteButton() {
  const [text, setText] = useState('');

  const handlePress = async () => {
    try {
      const clipboardText = await getClipboardText();
      setText(clipboardText || '클립보드에 텍스트가 없어요.');
    } catch (error) {
      if (error instanceof GetClipboardTextPermissionError) {
        // 클립보드 읽기 권한 없음
      }
    }
  };

  return (
    <View>
      <Text>{text}</Text>
      <Button title="붙여넣기" onPress={handlePress} />
      <Button
        title="권한 확인하기"
        onPress={async () => {
          const permission = await getClipboardText.getPermission();
          Alert.alert(permission);
        }}
      />
      <Button
        title="권한 요청하기"
        onPress={async () => {
          const permission = await getClipboardText.openPermissionDialog();
          Alert.alert(permission);
        }}
      />
    </View>
  );
}

2. 클립보드 텍스트 복사하기 (setClipboardText) ​

텍스트를 클립보드에 복사하는 함수예요. 사용자가 다른 곳에 붙여넣기할 수 있어요.

시그니처

typescript
function setClipboardText(text: string): Promise<void>;

파라미터

  • text필수 · string

    클립보드에 복사할 텍스트예요.

권한 메서드

  • setClipboardText.getPermission

    클립보드 쓰기 권한의 현재 상태를 반환해요. allowed · denied · notDetermined · osPermissionDenied 중 하나를 반환해요.

  • setClipboardText.openPermissionDialog

    클립보드 쓰기 권한을 다시 요청하는 다이얼로그를 표시해요. 허용하면 allowed, 거부하면 denied를 반환해요.

에러

권한이 거부된 경우 SetClipboardTextPermissionError가 발생해요.
error instanceof SetClipboardTextPermissionError로 확인할 수 있어요.

typescript
class SetClipboardTextPermissionError extends PermissionError {
  constructor();
}

예제

js
import { setClipboardText, SetClipboardTextPermissionError } from '@apps-in-toss/web-framework';

async function handleSetClipboardText() {
  try {
    await setClipboardText('복사할 텍스트');
    console.log('텍스트가 복사됐어요!');
  } catch (error) {
    if (error instanceof SetClipboardTextPermissionError) {
      console.log('클립보드 쓰기 권한 없음');
    }
  }
}
tsx
import { setClipboardText, SetClipboardTextPermissionError } from '@apps-in-toss/web-framework';

function CopyButton() {
  const handleCopy = async () => {
    try {
      await setClipboardText('복사할 텍스트');
      console.log('텍스트가 복사됐어요!');
    } catch (error) {
      if (error instanceof SetClipboardTextPermissionError) {
        // 클립보드 쓰기 권한 없음
      }
    }
  };

  return (
    <>
      <input type="button" value="복사" onClick={handleCopy} />
      <input
        type="button"
        value="권한 확인하기"
        onClick={async () => {
          const permission = await setClipboardText.getPermission();
          alert(permission);
        }}
      />
      <input
        type="button"
        value="권한 요청하기"
        onClick={async () => {
          const permission = await setClipboardText.openPermissionDialog();
          alert(permission);
        }}
      />
    </>
  );
}
tsx
import { setClipboardText, SetClipboardTextPermissionError } from '@apps-in-toss/framework';
import { Alert, Button } from 'react-native';

function CopyButton() {
  const handleCopy = async () => {
    try {
      await setClipboardText('복사할 텍스트');
      console.log('텍스트가 복사됐어요!');
    } catch (error) {
      if (error instanceof SetClipboardTextPermissionError) {
        // 클립보드 쓰기 권한 없음
      }
    }
  };

  return (
    <>
      <Button title="복사" onPress={handleCopy} />
      <Button
        title="권한 확인하기"
        onPress={async () => {
          const permission = await setClipboardText.getPermission();
          Alert.alert(permission);
        }}
      />
      <Button
        title="권한 요청하기"
        onPress={async () => {
          const permission = await setClipboardText.openPermissionDialog();
          Alert.alert(permission);
        }}
      />
    </>
  );
}

예제 앱 체험하기 ​

apps-in-toss-examples 저장소에서 with-clipboard-text 코드를 내려받거나, 아래 QR 코드를 스캔해 직접 체험해 보세요.