diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx index 2b064b6..c9c3123 100644 --- a/client/src/components/post/PostCard.tsx +++ b/client/src/components/post/PostCard.tsx @@ -25,12 +25,13 @@ import "../newpost/quill.mention.css"; import { sanitize } from "isomorphic-dompurify"; import UserAvatar from "../user/info/UserAvatar"; import Link from "next/link"; -import { USER_PAGE } from "@/const/clientPath"; +import { POST_DETAIL, USER_PAGE } from "@/const/clientPath"; import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery"; import PostCardOptionDropdown from "./PostCardOptionDropdown"; import { postcardContext } from "@/store/post/PostCardContext"; -import { useRouter } from "next/navigation"; import formatTime from "@/utils/formatTime"; +import copyToClipboard from "@/utils/copyToClipboard"; +import { useGlobalSnackbarStore } from "@/store/useGlobalSnackbarStore"; const PostCard = ({ postAttachUrls, @@ -65,8 +66,24 @@ const PostCard = ({ [currentUser] ); + const CLIENT_BASE_URL = process.env.NEXT_PUBLIC_CLIENT_BASE_URL; + const fireToast = useGlobalSnackbarStore(({ fireToast }) => fireToast); + const copyToClipboardHander = async () => { + await copyToClipboard( + `${CLIENT_BASE_URL}${POST_DETAIL(id, String(postNo))}`, + { + onSuccess: () => { + fireToast("게시물 주소가 복사되었습니다"); + }, + onError: () => { + fireToast("게시물 주소 복사에 실패했습니다"); + }, + } + ); + }; + return ( - + {likeCount ?? 0} - + 공유 diff --git a/client/src/utils/copyToClipboard.ts b/client/src/utils/copyToClipboard.ts new file mode 100644 index 0000000..d52bcb5 --- /dev/null +++ b/client/src/utils/copyToClipboard.ts @@ -0,0 +1,29 @@ +/** + * 브라우저 클립보드에 Text 를 복사시키는 핸들러, HTTPS || Localhost 에서만 동작 + * @param content 복사시킬 내용 + * @param onError 에러시 사용할 함수 + * @param onSuccess 성공시 사용할 함수 + * @param onSettle 성공/실패 여부에 관계없이 완료후 사용할 함수 + */ + +interface CopyToClipboardOptions { + onError?: (err: unknown) => void; + onSuccess?: () => void; + onSettle?: () => void; +} + +const copyToClipboard = async ( + content: string, + { onError, onSettle, onSuccess }: CopyToClipboardOptions +) => { + try { + await navigator.clipboard.writeText(content); + onSuccess && onSuccess(); + } catch (err) { + onError && onError(err); + } finally { + onSettle && onSettle(); + } +}; + +export default copyToClipboard;