From 36c3bcb0b4c1f217f18485b614e3b9bf06bb1818 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 25 Mar 2025 19:00:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8A=B8=EB=A6=AC=20=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=20dnd=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/menu/lib/utils.ts     | 10 +++++++++-
 apps/cs/src/pages/menu/ui/menu-tree.tsx | 19 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/cs/src/pages/menu/lib/utils.ts b/apps/cs/src/pages/menu/lib/utils.ts
index a7bc514a3..53e79918d 100644
--- a/apps/cs/src/pages/menu/lib/utils.ts
+++ b/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,
   };
 
diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx
index d169d2149..b399747f4 100644
--- a/apps/cs/src/pages/menu/ui/menu-tree.tsx
+++ b/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>
   );