useCopyToClipboard - 클립보드 복사 + 'copied' 상태 훅

제작 과정

navigator.clipboard.writeText만 호출하면 복사는 끝나지만, "복사됐다"는 시각 피드백은 별개의 일입니다. 매 카드마다 useState로 timer를 관리하면 코드가 금방 너저분해집니다. 이 훅은 copy(text) 함수와 copied 값(마지막으로 복사한 텍스트 또는 null)을 함께 반환합니다. 카드 컴포넌트에선 copied === item.value 비교만으로 자기 차례인지 판단할 수 있어, 여러 카드가 한 hook 인스턴스를 공유해도 정확히 한 개만 체크 표시가 켜집니다. 2초 뒤 자동 해제는 setTimeout으로 처리하되 unmount 시 clear까지 챙겼습니다. 또 비-Secure Context 환경(예: 일부 사내 환경)에서도 동작하도록 document.execCommand('copy') fallback을 같이 넣어 두었습니다.

데모에서는 코드/시크릿(마스킹 처리)/컬러 헥사/연락처 카드 6종을 클릭하면 우상단 "Click to copy" 라벨이 체크 + "Copied"로 바뀌는 모습을 볼 수 있습니다.

import type { Metadata } from "next"; import { UseCopyToClipboardDemo } from "./-components/UseCopyToClipboardDemo"; export const metadata: Metadata = { title: "useCopyToClipboard — 클립보드 복사 훅 (데모)", description: "값을 클립보드에 복사하고 N초 동안 'copied' 상태를 유지하는 훅의 라이브 시연.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="min-h-[100dvh] bg-white flex items-center justify-center"> <UseCopyToClipboardDemo /> </main> ); }

useCopyToClipboard - 클립보드 복사 + 'copied' 상태 훅

제작 과정

소스 코드

댓글