feat(member): 공유 컴포넌트에 URL 복사 기능 추가 (#86)

kgu-clab · Apr 3, 2024 · f053965 · f053965
1 parent d86f07c
commit f053965
Showing 1 changed file with 40 additions and 7 deletions.
diff --git 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>
   );
 };