feat: share button

.gitignore

@@ -19,3 +19,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+Ø

src/components/Head.astro

@@ -187,6 +187,28 @@ const { title, description, image = "/nano.png" } = Astro.props;
     const backToPrev = document.getElementById("back-to-prev");
     backToPrev?.addEventListener("click", () => window.history.back());
 
+    const shareButton = document.getElementById("share-button");
+    shareButton?.addEventListener("click", () => {
+      const url = window.location.href;
+      if (navigator.share) {
+        navigator.share({
+          title: document.title,
+          text: document.querySelector('meta[name="description"]').content,
+          url: url,
+        });
+      } else {
+        navigator.clipboard
+          .writeText(url)
+          .then(() => {
+            alert("링크가 복사되었어요!");
+          })
+          .catch((error) => {
+            console.error("클립보드에 복사 실패:", error);
+            prompt("아래 링크를 복사하세요!", url);
+          });
+      }
+    });
+
     const lightThemeButton = document.getElementById("light-theme-button");
     lightThemeButton?.addEventListener("click", () => {
       localStorage.setItem("theme", "light");

src/components/Share.astro

@@ -0,0 +1,18 @@
+<button
+  id="share-button"
+  class="relative group w-fit flex pl-8 pr-3 py-1.5 flex-nowrap rounded border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out
+    mx-auto my-4"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class="absolute top-1/2 left-2 -translate-y-1/2 size-4 stroke-2 fill-none stroke-current
+    group-hover:rotate-180 transition-transform duration-300 ease-in-out"
+  >
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+    ></path>
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+    ></path>
+  </svg>
+  <div class="text-sm">공유 하기</div>
+</button>

src/pages/blog/[...slug].astro

@@ -6,6 +6,7 @@ import FormattedDate from "@components/FormattedDate.astro";
 import { readingTime } from "@lib/utils";
 import BackToPrev from "@components/BackToPrev.astro";
 import Comments from "@components/Comments.astro";
+import Share from "@components/Share.astro";
 
 export async function getStaticPaths() {
   const posts = (await getCollection("blog"))
@@ -101,7 +102,8 @@ const { Content } = await post.render();
         </div>
       )
     }
-    <Comments />
+    <Share />
+    <Comments client:idle />
   </Container>
 </PageLayout>
 <!--- Starts script --->