From 0910c3fb0d0c432b258d37312a70357b23e9322b Mon Sep 17 00:00:00 2001
From: Edward Kim <65283190+bepyan@users.noreply.github.com>
Date: Wed, 21 Aug 2024 02:58:22 +0900
Subject: [PATCH] =?UTF-8?q?=08feat:=20OG=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20(#79)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: update thumbnail

* feat: apply og image

* feat: add layout thumbnail

* feat: 템플릿의 썸네일이 초기 적용되도록
---
 src/app/(main)/dashboard/template-item.tsx    |  1 +
 src/app/(main)/i/[subdomain]/page.tsx         |  9 +++-
 src/app/layout.tsx                            |  4 ++
 .../editor/sidebar/sidebar-settings-tab.tsx   | 53 +++++++++++--------
 src/lib/db/schema/invitations.query.ts        |  1 +
 5 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/app/(main)/dashboard/template-item.tsx b/src/app/(main)/dashboard/template-item.tsx
index 62c77b3..39b12d0 100644
--- a/src/app/(main)/dashboard/template-item.tsx
+++ b/src/app/(main)/dashboard/template-item.tsx
@@ -15,6 +15,7 @@ export default function TemplateItem({ template }: { template: Template }) {
       // TODO: global loading
       return await createInvitation({
         title: template.title,
+        thumbnailUrl: template.thumbnailUrl,
         customFields: template.customFields,
       });
     },
diff --git a/src/app/(main)/i/[subdomain]/page.tsx b/src/app/(main)/i/[subdomain]/page.tsx
index e52aed3..76dbccf 100644
--- a/src/app/(main)/i/[subdomain]/page.tsx
+++ b/src/app/(main)/i/[subdomain]/page.tsx
@@ -18,13 +18,20 @@ export async function generateMetadata(
   if (!invitation) {
     return {};
   }
-  const previousImages = (await parent).openGraph?.images || [];
+
+  const images = (await parent).openGraph?.images || [];
+  if (invitation.thumbnailUrl) {
+    images.unshift(invitation.thumbnailUrl);
+  }
 
   return {
     title: {
       default: invitation.title,
       template: "%s | 인비",
     },
+    openGraph: {
+      images,
+    },
   };
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 513a8df..65e997d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,10 @@ import "./globals.css";
 export const metadata: Metadata = {
   title: "초대장 플랫폼, 인비",
   description: "따뜻한 마음을 담아 당신의 환대를 전해보세요.",
+  openGraph: {
+    images:
+      "http://t1.daumcdn.net/brunch/service/user/d4v5/image/Axc3mTi7LoZC2GpsBWosDpRrNPU.png",
+  },
 };
 
 export default function RootLayout({
diff --git a/src/components/editor/sidebar/sidebar-settings-tab.tsx b/src/components/editor/sidebar/sidebar-settings-tab.tsx
index 61a55c8..f64fcba 100644
--- a/src/components/editor/sidebar/sidebar-settings-tab.tsx
+++ b/src/components/editor/sidebar/sidebar-settings-tab.tsx
@@ -3,6 +3,7 @@
 import { useForm } from "@tanstack/react-form";
 import { useMutation } from "@tanstack/react-query";
 import { LinkIcon } from "lucide-react";
+import { useMemo } from "react";
 import { toast } from "sonner";
 import { useEditor } from "~/components/editor/provider";
 import ImageDropzone from "~/components/editor/ui/image-dropzone";
@@ -145,7 +146,7 @@ function CustomDomainSection() {
 function SEOSection() {
   const { editor, dispatch } = useEditor();
 
-  const onCopyLink = async () => {
+  const handleCopyLink = async () => {
     const link = `https://${editor.config.invitationSubdomain}.invi.my`;
 
     try {
@@ -173,6 +174,25 @@ function SEOSection() {
     },
   });
 
+  const updateThumbnailMutation = useMutation({
+    mutationFn: async () => {
+      await updateInvitation({
+        id: editor.config.invitationId,
+        thumbnailUrl: editor.config.invitationThumbnail,
+      });
+    },
+    onSuccess: () => {
+      toast.success("SEO 설정이 저장되었습니다.");
+    },
+    onError: () => {
+      toast.error("SEO 설정에 실패했습니다.");
+    },
+  });
+
+  const isPending = useMemo(() => {
+    return uploadImageMutation.isPending || updateThumbnailMutation.isPending;
+  }, [uploadImageMutation.isPending, updateThumbnailMutation.isPending]);
+
   return (
     <div className="grid w-full grid-cols-9 gap-2 border-y p-6">
       <div className="col-span-9 flex flex-col">
@@ -181,25 +201,9 @@ function SEOSection() {
           링크 공유시 보여지는 정보를 설정해보세요.
         </p>
       </div>
-      <div className="col-span-9">
-        <EditorInput
-          id="invitationDesc"
-          componentPrefix={"설명:"}
-          className="mt-1"
-          defaultValue={editor.config.invitationDesc}
-          onDebounceChange={(e) => {
-            dispatch({
-              type: "UPDATE_CONFIG",
-              payload: {
-                invitationDesc: e.target.value,
-              },
-            });
-          }}
-        />
-      </div>
       <div className="col-span-9">
         <ImageDropzone
-          disabled={uploadImageMutation.isPending}
+          disabled={isPending}
           onLoadImage={async ({ url, file }) => {
             dispatch({
               type: "UPDATE_CONFIG",
@@ -214,8 +218,8 @@ function SEOSection() {
         </ImageDropzone>
         <EditorInput
           id="invitationThumbnail"
-          disabled={uploadImageMutation.isPending}
-          componentPrefix={"src"}
+          disabled={isPending}
+          componentPrefix={"이미지 링크"}
           className="mt-1"
           defaultValue={editor.config.invitationThumbnail}
           onDebounceChange={(e) => {
@@ -252,11 +256,16 @@ function SEOSection() {
         </div>
       </div>
       <div className="col-span-9 flex items-center gap-2">
-        <Button size="icon" variant="secondary" onClick={onCopyLink}>
+        <Button size="icon" variant="secondary" onClick={handleCopyLink}>
           <LinkIcon size={16} />
         </Button>
         <div className="ml-auto flex gap-2">
-          <Button>저장</Button>
+          <Button
+            disabled={isPending}
+            onClick={() => updateThumbnailMutation.mutate()}
+          >
+            저장
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/lib/db/schema/invitations.query.ts b/src/lib/db/schema/invitations.query.ts
index 5a89775..87b57d1 100644
--- a/src/lib/db/schema/invitations.query.ts
+++ b/src/lib/db/schema/invitations.query.ts
@@ -21,6 +21,7 @@ type UpdateInvitationParams = {
   title?: Invitation["title"];
   customFields?: Invitation["customFields"];
   eventUrl?: Invitation["eventUrl"];
+  thumbnailUrl?: Invitation["thumbnailUrl"];
 };
 
 export async function getAllInvitations() {