�feat: OG 이미지 설정 (#79)

* feat: update thumbnail * feat: apply og image * feat: add layout thumbnail * feat: 템플릿의 썸네일이 초기 적용되도록
Nexters · Aug 20, 2024 · 63e52eb · 63e52eb
1 parent f331954
commit 63e52eb
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -21,6 +21,7 @@ type UpdateInvitationParams = {
   title?: Invitation["title"];
   customFields?: Invitation["customFields"];
   eventUrl?: Invitation["eventUrl"];
+  thumbnailUrl?: Invitation["thumbnailUrl"];
 };
 
 export async function getAllInvitations() {