feat: 엘리먼트 복제 기능 & 추가 생성된 엘리먼트가 선택되도록

package.json

@@ -67,6 +67,7 @@
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.1",
     "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },

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

@@ -1,6 +1,7 @@
 import type { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import Recursive from "~/components/editor/elements/recursive";
+import FloatingActionButton from "~/components/editor/fab";
 import EditorProvider from "~/components/editor/provider";
 import { getInvitationByEventUrl } from "~/lib/db/schema/invitations.query";
 
@@ -45,10 +46,13 @@ export default async function Page({ params }: Props) {
       editorData={invitation.customFields}
       editorState={{ isPreviewMode: true }}
     >
-      <main className="mx-auto max-w-md">
+      <main className="relative mx-auto max-w-lg">
         {invitation.customFields.elements.map((childElement) => (
           <Recursive key={childElement.id} element={childElement} />
         ))}
+        {invitation.customFields?.fab?.type === "invitation_response" && (
+          <FloatingActionButton />
+        )}
       </main>
     </EditorProvider>
   );

src/components/editor/action.ts

@@ -1,3 +1,4 @@
+import { nanoid } from "nanoid";
 import { emptyElement } from "~/components/editor/constant";
 import type {
   DeviceType,
@@ -35,6 +36,9 @@ type EditorActionMap = {
   DELETE_ELEMENT: {
     elementDetails: EditorElement;
   };
+  DUPLICATE_ELEMENT: {
+    elementDetails: EditorElement;
+  };
   CHANGE_CLICKED_ELEMENT: {
     elementDetails?: EditorElement;
   };
@@ -136,6 +140,34 @@ const findElementAndParent = (
   return [null, null, -1];
 };
 
+const findParentId = (
+  elements: EditorElement[],
+  targetId: string,
+): string | null => {
+  for (const el of elements) {
+    if (Array.isArray(el.content)) {
+      if (el.content.some((child) => child.id === targetId)) {
+        return el.id;
+      }
+      const foundInChild = findParentId(el.content, targetId);
+      if (foundInChild) return foundInChild;
+    }
+  }
+  return null;
+};
+
+const deepCloneElement = (element: EditorElement): EditorElement => {
+  const newElement = { ...element, id: nanoid() };
+
+  if (Array.isArray(element.content)) {
+    newElement.content = element.content.map((child) =>
+      deepCloneElement(child),
+    );
+  }
+
+  return newElement;
+};
+
 const removeElementFromParent = (
   elements: EditorElement[],
   elementId: string,
@@ -179,20 +211,22 @@ const actionHandlers: {
   ) => Editor;
 } = {
   ADD_ELEMENT: (editor, payload) => {
+    const newElement = payload.elementDetails;
+
     const elements = traverseElements(editor.data.elements, (element) => {
       if (
         element.id === payload.containerId &&
         Array.isArray(element.content)
       ) {
         return {
           ...element,
-          content: [...element.content, payload.elementDetails],
+          content: [...element.content, newElement],
         } as EditorElement;
       }
       return element;
     });
 
-    return updateEditorHistory(editor, { elements });
+    return updateEditorHistory(editor, { elements }, newElement);
   },
 
   MOVE_ELEMENT: (editor, payload) => {
@@ -309,6 +343,24 @@ const actionHandlers: {
     return updateEditorHistory(editor, { elements });
   },
 
+  DUPLICATE_ELEMENT: (editor, payload) => {
+    const containerId = findParentId(
+      editor.data.elements,
+      payload.elementDetails.id,
+    );
+
+    if (!containerId) {
+      return editor;
+    }
+
+    const newElement = deepCloneElement(payload.elementDetails);
+
+    return actionHandlers.ADD_ELEMENT(editor, {
+      containerId,
+      elementDetails: newElement,
+    });
+  },
+
   CHANGE_CLICKED_ELEMENT: (editor, payload) => {
     const isValidSelect = isValidSelectEditorElement(payload.elementDetails);
 

src/components/editor/constant.ts

@@ -37,6 +37,7 @@ export const kakaoMapDefaultStyles: React.CSSProperties = {
 export const editorTabValue = {
   ELEMENTS: "Elements",
   SETTINGS: "Settings",
+  INVITATION_RESPONSE: "Invitation Response",
   ELEMENT_SETTINGS: "Element Settings",
 } as const;
 
@@ -61,6 +62,9 @@ export const bodyElement = {
 
 export const initialEditorData: EditorData = {
   elements: [bodyElement],
+  fab: {
+    type: "invitation_response",
+  },
 };
 
 export const initialEditorState: EditorState = {

src/components/editor/elements/element-helper.tsx

@@ -92,6 +92,16 @@ export default function ElementHelper() {
     });
   };
 
+  const handleDuplicateElement = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    dispatch({
+      type: "DUPLICATE_ELEMENT",
+      payload: {
+        elementDetails: element,
+      },
+    });
+  };
+
   return (
     typeof window !== "undefined" &&
     createPortal(
@@ -144,7 +154,7 @@ export default function ElementHelper() {
                 <IconButton onClick={handleDeleteElement}>
                   <Trash2Icon className="h-4 w-4" />
                 </IconButton>
-                <IconButton>
+                <IconButton onClick={handleDuplicateElement}>
                   <CopyPlusIcon className="h-4 w-4" />
                 </IconButton>
               </div>

src/components/editor/fab/index.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import BottomSheet from "~/app/(playground)/pg/bottom-sheet/_components/bottom-sheet";
+import { useEditor } from "~/components/editor/provider";
+
+export default function FloatingActionButton() {
+  const { editor } = useEditor();
+
+  switch (editor.data.fab.type) {
+    case "invitation_response":
+      return <BottomSheet />;
+    default:
+      return null;
+  }
+}

src/components/editor/fab/invitation-response-fab.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useForm } from "@tanstack/react-form";
+import { toast } from "sonner";
+import { Drawer } from "vaul";
+import { SheetHeader, SheetTitle } from "~/components/ui/sheet";
+
+export default function InvitationResponseFab() {
+  return (
+    <Drawer.Root>
+      <div className="absolute inset-x-0 bottom-0 mx-auto max-w-lg text-center">
+        <Drawer.Trigger className="mb-[5%] h-[63px] w-[80%] text-primary-foreground">
+          세션 참여 조사하기
+        </Drawer.Trigger>
+      </div>
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 z-50 bg-black/80" />
+        <Drawer.Content className="fixed inset-x-0 bottom-0 z-50 mx-auto mt-24 flex h-auto max-w-lg flex-col rounded-t-[10px] border bg-background">
+          <Drawer.Handle className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+          <InvitationResponseForm />
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+function InvitationResponseForm() {
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      attendance: "",
+    },
+    onSubmit: async ({ value }) => {
+      const { name, attendance } = value;
+      console.log(name, attendance);
+      // await createInvitationResponses(name, attendance as unknown as boolean);
+      toast("참여가 완료되었습니다.", { duration: 2000 });
+    },
+  });
+
+  return (
+    <div className="h-[400px]">
+      <SheetHeader>
+        <SheetTitle className="text-left text-2xl">세션 참여 조사</SheetTitle>
+      </SheetHeader>
+    </div>
+  );
+}

src/components/editor/main.tsx

@@ -3,6 +3,7 @@
 import { EyeOff } from "lucide-react";
 import ElementHelper from "~/components/editor/elements/element-helper";
 import Recursive from "~/components/editor/elements/recursive";
+import FloatingActionButton from "~/components/editor/fab";
 import { useEditor } from "~/components/editor/provider";
 import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
@@ -24,7 +25,7 @@ export default function EditorMain() {
 
   return (
     <div
-      className="flex flex-1 items-center justify-center"
+      className="relative flex flex-1 items-center justify-center"
       onClick={handleClick}
     >
       <ScrollArea
@@ -50,6 +51,7 @@ export default function EditorMain() {
         {editor.data.elements.map((childElement) => (
           <Recursive key={childElement.id} element={childElement} />
         ))}
+        <FloatingActionButton />
       </ScrollArea>
       <ElementHelper />
     </div>

src/components/editor/provider.tsx

@@ -21,7 +21,7 @@ export const EditorContext = createContext<{
 });
 
 export type EditorProps = {
-  editorData?: EditorData;
+  editorData?: Partial<EditorData>;
   editorConfig?: Partial<EditorConfig>;
   editorState?: Partial<Editor["state"]>;
 };
@@ -38,7 +38,10 @@ export default function EditorProvider({
 }: EditorProviderProps) {
   const [editor, dispatch] = useReducer(editorReducer, {
     ...initialEditor,
-    data: editorData ?? initialEditor.data,
+    data: {
+      ...initialEditor.data,
+      ...editorData,
+    },
     config: {
       ...initialEditorConfig,
       ...editorConfig,

src/components/editor/sidebar/index.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
-import { PlusIcon, SettingsIcon, WrenchIcon } from "lucide-react";
+import { MailIcon, PlusIcon, SettingsIcon, WrenchIcon } from "lucide-react";
 import { editorTabValue } from "~/components/editor/constant";
 import { useEditor } from "~/components/editor/provider";
 import SidebarElementSettingsTab from "~/components/editor/sidebar/sidebar-element-settings-tab";
 import SidebarElementsTab from "~/components/editor/sidebar/sidebar-elements-tab";
+import SidebarInvitationResponseTab from "~/components/editor/sidebar/sidebar-invitation-response-tab";
 import SidebarSettingsTab from "~/components/editor/sidebar/sidebar-settings-tab";
 import type { EditorTabTypeValue } from "~/components/editor/type";
 import { isValidSelectEditorElement } from "~/components/editor/util";
@@ -29,6 +30,11 @@ export default function EditorSidebar() {
       icon: <SettingsIcon />,
       content: <SidebarSettingsTab />,
     },
+    {
+      value: editorTabValue.INVITATION_RESPONSE,
+      icon: <MailIcon />,
+      content: <SidebarInvitationResponseTab />,
+    },
     {
       value: editorTabValue.ELEMENT_SETTINGS,
       icon: <WrenchIcon />,

src/components/editor/sidebar/sidebar-invitation-response-tab.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEditor } from "~/components/editor/provider";
+import {
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "~/components/ui/sheet";
+import { Switch } from "~/components/ui/switch";
+
+export default function SidebarInvitationResponseTab() {
+  const { editor, dispatch } = useEditor();
+
+  return (
+    <div className="w-full border-b">
+      <SheetHeader className="p-6">
+        <div className="flex items-center justify-between">
+          <SheetTitle>초대 응답 설정</SheetTitle>
+          <Switch />
+        </div>
+        <SheetDescription>
+          이벤트에 대한 초대 응답 설정을 관리합니다.
+        </SheetDescription>
+      </SheetHeader>
+      {editor.config && <InvitationResponseContent />}
+    </div>
+  );
+}
+
+function InvitationResponseContent() {
+  return (
+    <div className="grid w-full grid-cols-9 gap-1 border-t p-6">
+      <div className="col-span-9"></div>
+    </div>
+  );
+}

src/components/editor/type.ts

@@ -52,6 +52,9 @@ export type EditorState = {
 
 export type EditorData = {
   elements: EditorElement[];
+  fab: {
+    type: "" | "invitation_response";
+  };
 };
 
 export type EditorHistory = {