Add share button to preview page (#26)

* preview 페이지에 share 기능 추가

* 복사 성공시 뜨는 alert 문구 변경

components/ShareButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+type Props = {
+  title: string;
+  url: string;
+};
+
+function ShareButton({ title, url }: Props) {
+  const handleClick = async () => {
+    if (navigator.share) {
+      await navigator.share({
+        title,
+        url,
+      });
+    } else {
+      // share api 지원하지 않을시 clipboard 복사로 대체
+      await navigator.clipboard.writeText(url);
+      alert('Copied link to clipboard.\nShare the link!');
+    }
+  };
+
+  return (
+    <button className="btn btn-wide" onClick={handleClick}>
+      Share
+    </button>
+  );
+}
+
+export default ShareButton;

pages/index.tsx

@@ -1,14 +1,11 @@
 import { useState } from 'react';
 
-import Layout from 'components/Layout';
+import { objectToQueryString } from 'utils/string';
+
 import CopyModal from 'components/CopyModal';
 import Hits from 'components/Hits';
-
-import Adfit from 'components/Adfit';
 import OgTags from 'components/OgTags';
-
 import MoonForm from 'components/MoonForm';
-import { objectToQueryString } from 'utils/string';
 
 import FormProvider from 'components/FormProvider';
 

pages/preview.tsx

@@ -3,11 +3,11 @@ import { GetServerSideProps } from 'next';
 
 import { objectToQueryString } from 'utils/string';
 
-import Layout from 'components/Layout';
 import OgTags from 'components/OgTags';
 import MoonForm from 'components/MoonForm';
 import LinkPreviewCard from 'components/LinkPreviewCard';
 import FormProvider from 'components/FormProvider';
+import ShareButton from 'components/ShareButton';
 
 const PREVIEW_FORM_KEYS: FormKeys[] = ['theme', 'title', 'description'];
 
@@ -61,21 +61,25 @@ function Preview({ query }: Props) {
     );
   }, [svgUrl]);
 
+  const pageUrl = `https://moon-svg.minung.dev/preview${queryString}`;
+  const imageUrl = `https://moon-svg.minung.dev/moon.png${queryString}`;
+
   return (
     <FormProvider defaultValues={defaultValues}>
       <OgTags
-        url={`https://moon-svg.minung.dev/preview${queryString}`}
-        image={`https://moon-svg.minung.dev/moon.png${queryString}`}
+        url={pageUrl}
+        image={imageUrl}
         title={data.title}
         description={data.description}
       />
       <p>Share Moon&apos;s Phases with your friends!</p>
       <LinkPreviewCard
-        image={`https://moon-svg.minung.dev/moon.png${queryString}`}
+        image={imageUrl}
         title={data.title!}
         description={data.description!}
       />
       <MoonForm keys={PREVIEW_FORM_KEYS} onChange={handleFormChange} />
+      <ShareButton title={data.title!} url={pageUrl} />
     </FormProvider>
   );
 }