Feat(Menu): Add tool menu via drag and drop

Drag and drop a tool card to add tool menu

src/components/dnd/Sortable.tsx

@@ -0,0 +1,54 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
+
+interface SortableProps extends PropsWithChildren {
+    id: string
+    data: ToolMenuItem
+    isDelete?: boolean
+}
+
+const Sortable = ({ id, data, isDelete, children }: SortableProps) => {
+    const {
+        attributes,
+        isDragging,
+        listeners,
+        setNodeRef: draggableRef,
+        setActivatorNodeRef,
+        transform,
+        transition
+    } = useSortable({
+        id,
+        data
+    })
+    const context = useMemo<HandleContext>(
+        () => ({
+            attributes,
+            listeners,
+            ref: setActivatorNodeRef
+        }),
+        [attributes, listeners, setActivatorNodeRef]
+    )
+    const style: CSSProperties | undefined = transform
+        ? {
+              opacity: isDragging ? 0.4 : undefined,
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+              zIndex: 10000,
+              transition
+          }
+        : undefined
+
+    return (
+        <HandleContextInst.Provider value={context}>
+            <div
+                ref={draggableRef}
+                style={style}
+                className={isDragging && isDelete ? 'delete' : undefined}
+            >
+                {children}
+            </div>
+        </HandleContextInst.Provider>
+    )
+}
+
+export default Sortable