refactor: 초대장 SEO 설명 연동 (#90)

* feat: apply subdomain to preview * db: add description to invitation * feat: apply seo description * feat: SEO 설명 수정 * feat: seo description 연동
Nexters · Aug 21, 2024 · 2fc3aec · 2fc3aec
1 parent 68fa981
commit 2fc3aec
Show file tree

Hide file tree

Showing 8 changed files with 429 additions and 4 deletions.
diff --git a/src/app/(main)/i/[subdomain]/page.tsx b/src/app/(main)/i/[subdomain]/page.tsx
@@ -29,6 +29,7 @@ export async function generateMetadata(
       default: invitation.title,
       template: "%s | 인비",
     },
+    description: invitation.description ?? "",
     openGraph: {
       images,
     },

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,7 +5,7 @@ import "./globals.css";
 
 export const metadata: Metadata = {
   title: "초대장 플랫폼, 인비",
-  description: "따뜻한 마음을 담아 당신의 환대를 전해보세요.",
+  description: "따뜻한 마음이 담긴 당신의 환대",
   openGraph: {
     images:
       "http://t1.daumcdn.net/brunch/service/user/d4v5/image/Axc3mTi7LoZC2GpsBWosDpRrNPU.png",

diff --git a/src/components/editor/sidebar/sidebar-settings-tab.tsx b/src/components/editor/sidebar/sidebar-settings-tab.tsx
@@ -175,6 +175,7 @@ function SEOSection() {
     mutationFn: async () => {
       await updateInvitation({
         id: editor.config.invitationId,
+        description: editor.config.invitationDesc,
         thumbnailUrl: editor.config.invitationThumbnail,
       });
     },
@@ -198,7 +199,7 @@ function SEOSection() {
           링크 공유시 보여지는 정보를 설정해보세요.
         </p>
       </div>
-      <div className="col-span-9">
+      <div className="col-span-9 space-y-1">
         <ImageDropzone
           disabled={isPending}
           onLoadImage={async ({ url, file }) => {
@@ -217,7 +218,6 @@ function SEOSection() {
           id="invitationThumbnail"
           disabled={isPending}
           componentPrefix={"이미지 링크"}
-          className="mt-1"
           defaultValue={editor.config.invitationThumbnail}
           onDebounceChange={(e) => {
             dispatch({
@@ -228,6 +228,20 @@ function SEOSection() {
             });
           }}
         />
+        <EditorInput
+          id="invitationDesc"
+          disabled={isPending}
+          componentPrefix={"설명"}
+          defaultValue={editor.config.invitationDesc}
+          onDebounceChange={(e) => {
+            dispatch({
+              type: "UPDATE_CONFIG",
+              payload: {
+                invitationDesc: e.target.value,
+              },
+            });
+          }}
+        />
       </div>
       <div className="col-span-9">
         <div className="select-none bg-[#BACEE0] p-4">
@@ -247,7 +261,9 @@ function SEOSection() {
               <div className="text-xs text-neutral-400">
                 {editor.config.invitationDesc}
               </div>
-              <div className="text-xs text-neutral-300">invi.my</div>
+              <div className="text-xs text-neutral-300">
+                {editor.config.invitationSubdomain}.invi.my
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/lib/db/migrations/0004_tranquil_pandemic.sql b/src/lib/db/migrations/0004_tranquil_pandemic.sql
@@ -0,0 +1 @@
+ALTER TABLE "invitation" ADD COLUMN "description" text;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ALTER TABLE "invitation" ADD COLUMN "description" text;