feat: 공유 컴포넌트 추가

src/components/share.tsx

@@ -0,0 +1,37 @@
+import { ShareIcon } from '@heroicons/react/24/solid';
+
+interface ShareProps {
+  title: string;
+  description: string;
+}
+
+function Share({ title, description }: ShareProps) {
+  const handleShareClick = () => {
+    const shareData = {
+      title: title,
+      text: description,
+      url: decodeURI(window.location.href),
+    };
+
+    if (navigator.canShare && navigator.canShare(shareData)) {
+      window.navigator.share();
+    } else {
+      navigator.clipboard.writeText(decodeURI(window.location.href));
+    }
+  };
+
+  return (
+    <div className="flex justify-center rounded-lg bg-background-light py-8 dark:bg-background-dark">
+      <button
+        className="flex gap-2 hover:text-link-light dark:hover:text-link-dark"
+        onClick={handleShareClick}
+        aria-label="share_button"
+      >
+        공유하기
+        <ShareIcon className="h-6 w-6" />
+      </button>
+    </div>
+  );
+}
+
+export default Share;

src/templates/post.tsx

@@ -3,11 +3,12 @@ import { graphql, type HeadProps, type PageProps } from 'gatsby';
 
 import Comment from '@/components/comment';
 import SEO from '@/components/seo';
+import Share from '@/components/share';
 import TOC from '@/components/toc';
 import typography from '@/components/typography';
 
 function PostTemplate({ data: { mdx }, children }: PageProps<Queries.PostQuery>) {
-  const { title, date } = mdx.frontmatter;
+  const { title, description, date } = mdx.frontmatter;
 
   return (
     <>
@@ -21,6 +22,9 @@ function PostTemplate({ data: { mdx }, children }: PageProps<Queries.PostQuery>)
           {children}
         </MDXProvider>
       </article>
+      <div className="my-16">
+        <Share title={title} description={description} />
+      </div>
       <div className="my-16">
         <Comment />
       </div>