메시지 공유하기

share

share 함수로 사용자가 콘텐츠를 쉽게 공유할 수 있도록, 네이티브 공유 시트를 표시할 수 있어요.
예를 들어, 초대 메시지나 텍스트 정보를 사용자가 설치된 앱 목록에서 원하는 앱(예: 메신저, 메모 앱)을 선택해서 메시지를 공유할 수 있어요. 각 플랫폼(Android, iOS)에서 기본으로 제공하는 공유 인터페이스를 활용해요.

options.message 속성에 공유할 메시지를 전달하면, 사용자가 선택할 수 있는 앱 목록이 표시돼요. 예를 들어, 사용자가 텍스트 메시지를 공유하거나 메모 앱에 저장하려고 할 때 유용해요.

시그니처

function share(message: {
    message: string;
}): Promise<void>;

파라미터

• options필수 · object
  

  공유할 메시지를 담은 객체예요.

  • options.message필수 · string
    

    공유할 텍스트 문자열이에요. 예를 들어, "안녕하세요! 이 내용을 공유합니다."

예제

공유하기 기능 구현하기

아래는 버튼을 클릭하면 메시지를 공유하는 간단한 예제예요.

React

import { share } from "@apps-in-toss/web-framework";

const ShareButton = () => {
  const handleShare = async () => {
    try {
      await share({ message: "공유할 메시지" });
      console.log("공유 완료");
    } catch (error) {
      console.error("공유 실패:", error);
    }
  };

  return <button onClick={handleShare}>공유하기</button>;
};

React Native

import { share } from 'react-native-bedrock';
import { Button } from 'react-native';

function MyPage() {
  return (
    <Button
      title="공유"
      onPress={() => share({ message: '공유할 메시지입니다.' })}
    />
  );
}

사용자 입력을 받아 메시지 공유하기

사용자가 직접 입력한 메시지를 공유하도록 구현할 수도 있어요. 다음은 초대 메시지 작성 기능 예제예요.

import { useState } from "react";
import { share } from "react-native-bedrock";
import { TextInput, Button, View, Alert } from "react-native";

function ShareWithInput() {
  const [invitationMessage, setInvitationMessage] = useState(""); 

  const handleShare = () => {
    if (!invitationMessage.trim()) {
      Alert.alert("공유할 메시지를 입력하세요.");
      return;
    }
    share({ message: invitationMessage }); 
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        style={{
          height: 40,
          borderColor: "gray",
          borderWidth: 1,
          marginBottom: 10,
          paddingHorizontal: 8,
        }}
        placeholder="초대 메시지를 입력하세요"
        value={invitationMessage}
        onChangeText={setInvitationMessage}
      />
      <Button title="초대 메시지 공유" onPress={handleShare} />
    </View>
  );
}