From f0539654ae2c1166903db47de0b9b95fd560d720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B4=80=EC=8B=9D?=
 <39869096+gwansikk@users.noreply.github.com>
Date: Wed, 3 Apr 2024 15:54:20 +0900
Subject: [PATCH] =?UTF-8?q?feat(member):=20=EA=B3=B5=EC=9C=A0=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20URL=20=EB=B3=B5=EC=82=AC?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(#86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/Share/Share.tsx     | 47 ++++++++++++++++---
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/apps/member/src/components/common/Share/Share.tsx b/apps/member/src/components/common/Share/Share.tsx
index 861f21f9..acbf4ca8 100644
--- a/apps/member/src/components/common/Share/Share.tsx
+++ b/apps/member/src/components/common/Share/Share.tsx
@@ -4,17 +4,50 @@ import { FaXTwitter } from 'react-icons/fa6';
 import { MdEmail } from 'react-icons/md';
 import { FaLink } from 'react-icons/fa6';
 
-interface ShareProps {
-  className?: string;
-}
+interface ShareProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 const Share = ({ className }: ShareProps) => {
+  const currentUrl = window.location.href;
+  /**
+   * 클립보드에 현재 URL 복사하는 이벤트
+   */
+  const handleClipboardClick = async () => {
+    try {
+      await navigator.clipboard.writeText(currentUrl);
+      alert('해당 게시글이 클립보드에 복사됐어요.');
+    } catch (error) {
+      alert('클립보드에 복사하는데 실패했어요.');
+    }
+  };
+
   return (
     <div className={classNames('flex gap-4 text-clab-main-light', className)}>
-      <FaFacebook className="h-5 w-5 cursor-pointer hover:text-clab-main" />
-      <FaXTwitter className="h-5 w-5 cursor-pointer hover:text-clab-main" />
-      <MdEmail className="h-5 w-5 cursor-pointer hover:text-clab-main" />
-      <FaLink className="h-5 w-5 cursor-pointer hover:text-clab-main" />
+      <a
+        href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FaFacebook size={20} className="hover:text-clab-main" />
+      </a>
+      <a
+        href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FaXTwitter size={20} className="hover:text-clab-main" />
+      </a>
+      <a
+        href={`mailto:?body=${currentUrl}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <MdEmail size={20} className="hover:text-clab-main" />
+      </a>
+      <FaLink
+        size={20}
+        className="cursor-pointer hover:text-clab-main"
+        onClick={handleClipboardClick}
+      />
     </div>
   );
 };