From 0c567b17c2e2cce9a8a86d68f0f03b840dfdae26 Mon Sep 17 00:00:00 2001
From: Jungu Lee <100949102+jobkaeHenry@users.noreply.github.com>
Date: Fri, 5 Jan 2024 01:42:22 +0900
Subject: [PATCH] =?UTF-8?q?NEW=20:=20=ED=81=B4=EB=A6=BD=EB=B3=B4=EB=93=9C?=
 =?UTF-8?q?=20=EB=B3=B5=EC=82=AC=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20(#92)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/post/PostCard.tsx | 29 +++++++++++++++++++++----
 client/src/utils/copyToClipboard.ts     | 29 +++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 client/src/utils/copyToClipboard.ts

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 (
-    <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
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;