feat: kakao share at setting

Nexters · Aug 23, 2024 · 87ed94e · 87ed94e
1 parent f5f7894
commit 87ed94e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 23 deletions.
diff --git a/src/components/editor/elements/share-element.tsx b/src/components/editor/elements/share-element.tsx
@@ -12,6 +12,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "~/components/ui/popover";
+import { kakaoShareInvi } from "~/lib/kakao-share";
 
 type Props = {
   element: InferEditorElement<"share">;
@@ -43,28 +44,11 @@ export default function ShareElement({ element }: Props) {
   };
 
   const handleKakaoShare = () => {
-    window.Kakao.Share.sendDefault({
-      objectType: "feed",
-      content: {
-        imageUrl: editor.config.invitationThumbnail,
-        imageWidth: 600,
-        imageHeight: 450,
-        title: editor.config.invitationTitle,
-        description: editor.config.invitationDesc,
-        link: {
-          mobileWebUrl: link,
-          webUrl: link,
-        },
-      },
-      buttons: [
-        {
-          title: "초대장 열기",
-          link: {
-            mobileWebUrl: link,
-            webUrl: link,
-          },
-        },
-      ],
+    kakaoShareInvi({
+      link,
+      title: editor.config.invitationTitle,
+      description: editor.config.invitationDesc,
+      imageUrl: editor.config.invitationThumbnail,
     });
   };
 

diff --git a/src/components/editor/sidebar/sidebar-settings-tab.tsx b/src/components/editor/sidebar/sidebar-settings-tab.tsx
@@ -11,6 +11,7 @@ import ImageDropzone from "~/components/editor/ui/image-dropzone";
 import { EditorInput } from "~/components/editor/ui/input";
 import { Accordion } from "~/components/ui/accordion";
 import { Button } from "~/components/ui/button";
+import { KakaoIcon } from "~/components/ui/icons";
 import {
   SheetDescription,
   SheetHeader,
@@ -21,6 +22,7 @@ import {
   updateInvitation,
 } from "~/lib/db/schema/invitations.query";
 import { uploadImage } from "~/lib/image";
+import { kakaoShareInvi } from "~/lib/kakao-share";
 
 type Props = {};
 
@@ -193,6 +195,15 @@ function SEOSection() {
     return uploadImageMutation.isPending || updateThumbnailMutation.isPending;
   }, [uploadImageMutation.isPending, updateThumbnailMutation.isPending]);
 
+  const handleShareKakao = () => {
+    kakaoShareInvi({
+      link: `https://${editor.config.invitationSubdomain}.invi.my`,
+      title: editor.config.invitationTitle,
+      description: editor.config.invitationDesc,
+      imageUrl: editor.config.invitationThumbnail,
+    });
+  };
+
   return (
     <div className="grid w-full grid-cols-9 gap-2 border-y p-6">
       <div className="col-span-9 flex flex-col">
@@ -274,7 +285,10 @@ function SEOSection() {
       </div>
       <div className="col-span-9 flex items-center gap-2">
         <Button size="icon" variant="secondary" onClick={handleCopyLink}>
-          <LinkIcon size={16} />
+          <LinkIcon className="size-4" />
+        </Button>
+        <Button size="icon" variant="secondary" onClick={handleShareKakao}>
+          <KakaoIcon className="size-4" />
         </Button>
         <div className="ml-auto flex gap-2">
           <Button

diff --git a/src/lib/kakao-share.ts b/src/lib/kakao-share.ts
@@ -0,0 +1,30 @@
+export type kakaoShareFeedProps = {
+  link: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+};
+
+export function kakaoShareInvi({ link, ...props }: kakaoShareFeedProps) {
+  window.Kakao.Share.sendDefault({
+    objectType: "feed",
+    content: {
+      ...props,
+      imageWidth: 600,
+      imageHeight: 450,
+      link: {
+        mobileWebUrl: link,
+        webUrl: link,
+      },
+    },
+    buttons: [
+      {
+        title: "초대장 열기",
+        link: {
+          mobileWebUrl: link,
+          webUrl: link,
+        },
+      },
+    ],
+  });
+}