06 · Developer Guide · 레시피
공유 버튼Share Button
모바일은 네이티브 공유 시트, 데스크탑은 클릭 즉시 URL 클립보드 복사. 한 버튼이 환경에 따라 다르게 동작합니다.
언제 쓰는가
- 모든 페이지의 PageHeader 우측 공유 아이콘
- 공유 가능한 게시물·콘텐츠 카드 액션
- 네이티브 공유 시트가 있는 환경(모바일)에서는 OS에 맡기고, 그 외엔 바로 클립보드 복사
핵심 로직 — Web Share API + 클립보드 fallback
navigator.share가 있으면 OS 공유 시트를 띄우고, 없으면 곧바로 navigator.clipboard.writeText로 현재 URL을 복사합니다. 별도 드롭다운 메뉴 없이 한 번의 클릭으로 끝나는 단순한 흐름.
components/preview/ShareButton.tsxtsx
"use client";
import { useState } from "react";
import { Check, Share2 } from "lucide-react";
export function ShareButton({ title }: { title: string }) {
const [copied, setCopied] = useState(false);
const handleClick = async () => {
const url = typeof window === "undefined" ? "" : window.location.href;
// 1) navigator.share (모바일) — 네이티브 공유 시트
if (typeof navigator !== "undefined" && navigator.share) {
try {
await navigator.share({ title, url });
return;
} catch {
/* 사용자가 취소했거나 미지원 — clipboard로 fallback */
}
}
// 2) 데스크탑·fallback — 클립보드에 URL 복사
try {
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
} catch {
/* 클립보드 권한 거부 */
}
};
return (
<button type="button" aria-label="이 페이지 주소 복사" onClick={handleClick}>
{copied ? (
<>
<Check size={15} /> 주소가 복사되었습니다
</>
) : (
<Share2 size={15} />
)}
</button>
);
}