NEW : 클립보드 복사 기능 추가 (#92)

potenday-project · Jan 4, 2024 · 0c567b1 · 0c567b1
1 parent 7d10e31
commit 0c567b1
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git 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 (
-    <Card sx={{ display: "flex", gap: 2, py:2 }} elevation={0}>
+    <Card sx={{ display: "flex", gap: 2, py: 2 }} elevation={0}>
       <Link href={USER_PAGE(createdBy)}>
         <UserAvatar
           src={profileImgUrls[0]?.attachUrl}
@@ -169,7 +186,11 @@ const PostCard = ({
             </Box>
             <Typography variant="label">{likeCount ?? 0}</Typography>
           </ButtonBase>
-          <ButtonBase data-testid="shareBtn" aria-label="share">
+          <ButtonBase
+            data-testid="shareBtn"
+            aria-label="share"
+            onClick={copyToClipboardHander}
+          >
             <ShareIcon />
             <Typography variant="label">공유</Typography>
           </ButtonBase>

diff --git a/client/src/utils/copyToClipboard.ts 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;