공유 링크 패턴

공유할 수 있는 경로는 두 가지 — 공유 시트를 통해 메신저로 바로 보내거나, 링크를 클립보드에 복사해 사용자가 직접 붙여넣게 하는 방법이다.

공유 시트로 보내기

import { getTossShareLink, share } from '@apps-in-toss/web-framework';

async function shareProductPage(productId: string, ogImageUrl?: string) {
  const link = await getTossShareLink(`/products/${productId}`, ogImageUrl);
  await share({
    message: `이 상품 어때요?\n${link}`,
  });
}

getTossShareLink는 수신자가 링크를 탭하면 미니앱의 해당 경로로 바로 진입할 수 있는 URL을 반환한다. ogImageUrl을 넘기면 카카오톡·문자 등 메신저에서 링크 미리보기 이미지가 표시된다.

share() 반환값은 void — 사용자가 공유를 취소해도 reject되지 않으므로 추가 처리가 필요 없다.

링크 복사 버튼

공유 시트 없이 링크만 클립보드로 복사하고 싶을 때:

import { getTossShareLink, setClipboardText } from '@apps-in-toss/web-framework';
import { useState } from 'react';

export function CopyLinkButton({ path }: { path: string }) {
  const [feedback, setFeedback] = useState<string | null>(null);

  const onCopy = async () => {
    try {
      const link = await getTossShareLink(path);
      await setClipboardText({ text: link });
      setFeedback('링크를 복사했어요');
    } catch {
      setFeedback('복사하지 못했어요');
    }
    setTimeout(() => setFeedback(null), 1500);
  };

  return (
    <>
      <button type="button" onClick={onCopy}>링크 복사</button>
      {feedback && <span role="status">{feedback}</span>}
    </>
  );
}

두 단계가 순서대로 실행된다: 링크 생성 → 클립보드 쓰기. 어느 쪽에서든 실패하면 catch로 떨어져 "복사하지 못했어요" 피드백을 보여준다.

관련 API

• getTossShareLink — 인앱 공유 링크를 생성합니다.
• share — 시스템 공유 시트를 엽니다.
• setClipboardText — 텍스트를 클립보드에 복사합니다.