inv-126 : 타이틀, 내용 업데이트 쿼리

src/app/(main)/dashboard/page.tsx

@@ -25,7 +25,7 @@ export default async function Page() {
   if (!auth.user) {
     return redirect("/sign-in");
   }
-  const invitations = await getInvitationsByUserId(auth.user.id);
+  const invitations = await getInvitationsByUserId();
 
   return (
     <div className="flex h-dvh flex-col overflow-hidden">
@@ -55,7 +55,7 @@ export default async function Page() {
                 {invitations.map((invitation) => (
                   <li key={invitation.id} className="h-full w-full">
                     <Link
-                      href={`/i/${invitation.id}/edit`}
+                      href={`/i/${invitation.eventUrl}/edit`}
                       className="flex h-full flex-col bg-muted p-0.5"
                     >
                       <div className="flex-1 overflow-hidden rounded-xl border border-border bg-background p-3">

src/app/(main)/i/[subdomain]/edit/page.tsx

@@ -1,49 +1,23 @@
 import Editor from "~/components/editor";
+import { getInvitationByEventUrl } from "~/lib/db/schema/invitations.query";
+
+export default async function Page({
+  params,
+}: {
+  params: { subdomain: string };
+}) {
+  const subDomain = params.subdomain;
+  const invitation = await getInvitationByEventUrl(subDomain as string);
 
-export default async function Page() {
   return (
     <Editor
-      editorConfig={{ backLink: "/pg" }}
-      editorData={[
-        {
-          id: "__body",
-          type: "__body",
-          name: "Body",
-          styles: {},
-          content: [
-            {
-              id: "container",
-              name: "Container",
-              type: "container",
-              styles: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: 10,
-                paddingTop: 10,
-                paddingRight: 10,
-                paddingBottom: 10,
-                paddingLeft: 10,
-                width: "100%",
-                height: "auto",
-              },
-              content: [
-                {
-                  id: "text",
-                  name: "Text",
-                  type: "text",
-                  styles: {
-                    textAlign: "left",
-                  },
-                  content: {
-                    innerText: "Hello World",
-                  },
-                },
-              ],
-            },
-          ],
-        },
-      ]}
+      editorConfig={{
+        backLink: "/pg",
+        invitationId: invitation.id,
+        invitationTitle: invitation.title,
+        invitationSubdomain: invitation.eventUrl,
+      }}
+      editorData={invitation.customFields}
     />
   );
 }

src/app/(main)/i/layout.tsx

@@ -0,0 +1,24 @@
+import Script from "next/script";
+import { env } from "~/lib/env";
+
+export default function KakaoMapScriptLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Script
+        strategy="beforeInteractive"
+        type="text/javascript"
+        src={`${env.DAUMCDN_POSTOCDE_URL}`}
+      />
+      <Script
+        strategy="beforeInteractive"
+        type="text/javascript"
+        src={`${env.KAKAO_MAP_BASE_URL}?appkey=${env.KAKAO_MAP_API_KEY}&libraries=services&autoload=false`}
+      />
+      {children}
+    </>
+  );
+}

src/components/editor/navigation.tsx

@@ -13,6 +13,7 @@ import {
   Undo2,
 } from "lucide-react";
 import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { useEditor } from "~/components/editor/provider";
 import TitleInput from "~/components/editor/title-input";
@@ -27,11 +28,18 @@ import {
 } from "~/components/ui/dropdown-menu";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import TooltipSimple from "~/components/ui/tooltip-simple";
+import {
+  deleteInvitation,
+  updateInvitation,
+} from "~/lib/db/schema/invitations.query";
 import { cn } from "~/lib/utils";
 
 export default function EditorNavigation() {
   const { editor, dispatch } = useEditor();
+  const router = useRouter();
   const { openDialog } = useAlertDialogStore();
+  const params = useParams();
+  const subDomain = params.subdomain;
 
   const handlePreviewClick = () => {
     dispatch({ type: "TOGGLE_PREVIEW_MODE" });
@@ -48,9 +56,11 @@ export default function EditorNavigation() {
   const handleOnSave = async () => {
     try {
       const content = JSON.stringify(editor.data);
-      console.log(":content", content);
-      // TODO: API insert page
-      // TODO: API log notification
+      await updateInvitation({
+        id: editor.config.invitationId,
+        title: editor.config.invitationTitle,
+        customFields: content as Record<string, any>,
+      });
       toast.success("Saved Editor");
     } catch (error) {
       console.error(error);
@@ -64,7 +74,10 @@ export default function EditorNavigation() {
       description: "이 작업을 되돌릴 수 없습니다.",
       confirmText: "확인",
       cancelText: "취소",
-      onConfirm: () => {},
+      onConfirm: async () => {
+        await deleteInvitation(editor.config.invitationId);
+        router.replace("/dashboard");
+      },
     });
   };
 

src/components/editor/title-input.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { useMutation } from "@tanstack/react-query";
-import { debounce, delay, random } from "es-toolkit";
+import { debounce, delay } from "es-toolkit";
 import { CheckIcon, LoaderIcon, XIcon } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
 import { useEditor } from "~/components/editor/provider";
+import { updateInvitation } from "~/lib/db/schema/invitations.query";
 import { cn } from "~/lib/utils";
 
 export default function TitleInput() {
@@ -45,11 +46,11 @@ export default function TitleInput() {
       if (signal.aborted) {
         return;
       }
-
-      if (random(0, 1) > 0.5) {
-        throw new Error("Failed to update title");
-      }
-
+      editor.config.invitationTitle = value;
+      await updateInvitation({
+        id: editor.config.invitationSubdomain,
+        title: value,
+      });
       delayMutation.mutate();
     },
     onError: () => {

src/lib/db/schema/invitations.query.ts

@@ -2,6 +2,7 @@
 
 import { count, eq } from "drizzle-orm";
 import { nanoid } from "nanoid";
+import { getAuth } from "~/lib/auth/utils";
 import { db } from "~/lib/db";
 import {
   invitations,
@@ -11,7 +12,7 @@ import {
 
 type CreateInvitationParams = Omit<
   InvitationInsert,
-  "id" | "eventUrl" | "createdAt" | "updatedAt"
+  "id" | "userId" | "eventUrl" | "createdAt" | "updatedAt"
 >;
 
 type UpdateInvitationParams = {
@@ -41,27 +42,31 @@ export async function getInvitationByEventUrl(eventUrl: string) {
   return responses[0];
 }
 
-export async function getInvitationsByUserId(
-  userId: Invitation["userId"],
-): Promise<Invitation[]> {
+export async function getInvitationsByUserId(): Promise<Invitation[]> {
+  const sessionId = await getAuth();
+  const sessionUserId = sessionId.session.userId;
+
   return await db
     .select()
     .from(invitations)
-    .where(eq(invitations.userId, userId));
+    .where(eq(invitations.userId, sessionUserId));
 }
 
 export async function createInvitation(
   params: CreateInvitationParams,
 ): Promise<InvitationInsert> {
   const id = nanoid();
   const currentTimestamp = new Date();
+  const sessionId = await getAuth();
+  const sessionUserId = sessionId.session.userId;
 
   try {
     const res = await db
       .insert(invitations)
       .values({
         ...params,
         id,
+        userId: sessionUserId,
         eventUrl: id,
         createdAt: currentTimestamp,
         updatedAt: currentTimestamp,