Merge branch 'iipbs_cs' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs_cs

apps/cs/src/pages/menu/lib/utils.ts

@@ -26,8 +26,16 @@ export const generateNewTreeData = (
   options: DropOptions<Menu>,
 ): TreeMenu | null => {
   const { dragSourceId, dragSource, dropTargetId, dropTarget } = options;
+
   if (!dragSource?.data) return null;
 
+  const siblings = treeData.filter(
+    (node) => node.parent === dragSource?.parent,
+  );
+
+  const newSortSeq =
+    siblings.findIndex((sibling) => sibling.id === dragSourceId) + 1;
+
   const childNodes = treeData.filter(
     (node) => node.parent === dragSourceId && node.data,
   );
@@ -44,7 +52,7 @@ export const generateNewTreeData = (
   const treeMenu: TreeMenu = {
     ...baseNode(dragSource),
     parentId: dropTargetId === 0 ? null : (dropTargetId as number),
-    sortSeq: (dropTarget?.data?.children?.length ?? 0) + 1,
+    sortSeq: newSortSeq,
     levelNo: (dropTarget?.data?.levelNo ?? 0) + 1,
   };
 

apps/cs/src/pages/menu/ui/menu-tree.tsx

@@ -56,12 +56,25 @@ function MenuTree({ treeData, siteId }: MenuTreeProps) {
         classes={{
           root: "p-4",
           container: "flex flex-col",
-          listItem: "",
           dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm",
-          draggingSource: "",
-          placeholder: "",
+          placeholder: "relative",
         }}
         sort={false}
+        dropTargetOffset={10}
+        insertDroppableFirst={false}
+        canDrop={(_, { dragSource, dropTargetId }) => {
+          if (dragSource?.parent === dropTargetId) {
+            return true;
+          }
+        }}
+        placeholderRender={(_, { depth }) => {
+          return (
+            <div
+              className="absolute right-0 top-0 h-[0.2rem] bg-primary"
+              style={{ left: depth * 10 + 5 }}
+            />
+          );
+        }}
       />
     </DndProvider>
   );