apps/cs/package.json

@@ -13,7 +13,7 @@
     "@common/components": "workspace:*",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
-    "@minoru/react-dnd-treeview": "^3.5.0",
+    "@minoru/react-dnd-treeview": "3.5.1-alpha.1",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@tanstack/react-query": "^5.67.1",

apps/cs/src/app/providers/app-provider.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { DndProvider } from "react-dnd";
+import { MultiBackend, getBackendOptions } from "@minoru/react-dnd-treeview";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
 import { AuthWrapper } from "@/entities/auth";
@@ -15,7 +17,11 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
       <StoreProvider>
         <ConfirmProvider>
           <AuthWrapper>
-            <MenuWrapper>{children}</MenuWrapper>
+            <MenuWrapper>
+              <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+                {children}
+              </DndProvider>
+            </MenuWrapper>
             <AlertDialog />
             <ConfirmDialog />
           </AuthWrapper>

apps/cs/src/pages/file/model/table-columns.tsx

@@ -66,7 +66,6 @@ export const createColumns = (
 ];
 
 const formatFileSize = (bytes: number): string => {
-  console.log("bytes: ", bytes);
   if (bytes === 0) return "0 Bytes";
 
   const k = 1024;

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

@@ -1,13 +1,10 @@
 "use client";
 
 import { useRef } from "react";
-import { DndProvider } from "react-dnd";
 import type { UseFormReturn } from "react-hook-form";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   Tree,
-  MultiBackend,
-  getBackendOptions,
   type NodeModel,
   type TreeMethods,
 } from "@minoru/react-dnd-treeview";
@@ -61,66 +58,61 @@ function MenuTree({
   return (
     <>
       <div className="max-h-[calc(100vh-33.5rem)] overflow-auto">
-        <DndProvider backend={MultiBackend} options={getBackendOptions()}>
-          <Tree
-            tree={tree}
-            rootId={0}
-            ref={treeMethods}
-            render={(
-              node: NodeModel<TreeMenu>,
-              { depth, isOpen, onToggle },
-            ) => {
-              if (node.id === -1) {
-                return (
-                  <EditableNode
-                    value={additionalNodeForm.watch("menuKornNm") ?? ""}
-                    onChange={(e) =>
-                      additionalNodeForm.setValue("menuKornNm", e.target.value)
-                    }
-                    depth={depth}
-                    onSave={onAdditionalNodeSave}
-                    onCancel={onAdditionalNodeCancel}
-                  />
-                );
-              }
+        <Tree
+          tree={tree}
+          rootId={0}
+          ref={treeMethods}
+          render={(node: NodeModel<TreeMenu>, { depth, isOpen, onToggle }) => {
+            if (node.id === -1) {
               return (
-                <MenuNode
-                  node={node}
+                <EditableNode
+                  value={additionalNodeForm.watch("menuKornNm") ?? ""}
+                  onChange={(e) =>
+                    additionalNodeForm.setValue("menuKornNm", e.target.value)
+                  }
                   depth={depth}
-                  treeMethods={treeMethods.current}
-                  isOpen={isOpen}
-                  isSelected={selectedMenu?.menuCd === node.id}
-                  isAdditionalParent={isAdditionalParent(node)}
-                  onToggle={onToggle}
-                  onSelect={handleSelectNode(onSelectNode)}
+                  onSave={onAdditionalNodeSave}
+                  onCancel={onAdditionalNodeCancel}
                 />
               );
-            }}
-            onDrop={handleDropNode(updateTreeMenu)}
-            classes={{
-              root: "p-4",
-              container: "flex flex-col",
-              dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm",
-              placeholder: "relative",
-            }}
-            sort={false}
-            dropTargetOffset={5}
-            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>
+            }
+            return (
+              <MenuNode
+                node={node}
+                depth={depth}
+                treeMethods={treeMethods.current}
+                isOpen={isOpen}
+                isSelected={selectedMenu?.menuCd === node.id}
+                isAdditionalParent={isAdditionalParent(node)}
+                onToggle={onToggle}
+                onSelect={handleSelectNode(onSelectNode)}
+              />
+            );
+          }}
+          onDrop={handleDropNode(updateTreeMenu)}
+          classes={{
+            root: "p-4",
+            container: "flex flex-col",
+            dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm",
+            placeholder: "relative",
+          }}
+          sort={false}
+          dropTargetOffset={5}
+          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 }}
+              />
+            );
+          }}
+        />
       </div>
       <div className="flex gap-2">
         <Button

pnpm-lock.yaml

@@ -161,8 +161,8 @@ importers:
         specifier: ^4.1.3
         version: 4.1.3(react-hook-form@7.54.2)
       '@minoru/react-dnd-treeview':
-        specifier: ^3.5.0
-        version: 3.5.0(dnd-core@16.0.1)(react-dnd@16.0.1)(react-dom@18.3.1)(react@18.3.1)
+        specifier: 3.5.1-alpha.1
+        version: 3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1)(react-dom@18.3.1)(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.1.2
         version: 2.1.2(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
@@ -2007,6 +2007,27 @@ packages:
       - dnd-core
     dev: false
 
+  /@minoru/react-dnd-treeview@3.5.1-alpha.1(dnd-core@16.0.1)(react-dnd@16.0.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-XEKBjhyltG0gzn+ioZRwhlV7+Q/uVZqTMS/tAO3On/rPNuNgqWHROFsyGdHQS/DYoENGOG8JX03chCxExOgEpA==}
+    peerDependencies:
+      react: ^18.3.1
+      react-dnd: 15.x || 16.x
+      react-dom: ^18.3.1
+    dependencies:
+      '@juggle/resize-observer': 3.4.0
+      dnd-multi-backend: 8.1.2(dnd-core@16.0.1)
+      framer-motion: 11.18.2(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dnd: 16.0.1(@types/node@22.13.5)(@types/react@18.3.18)(react@18.3.1)
+      react-dnd-html5-backend: 16.0.1
+      react-dnd-touch-backend: 16.0.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-use-measure: 2.1.7(react-dom@18.3.1)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - dnd-core
+    dev: false
+
   /@next/env@15.1.7:
     resolution: {integrity: sha512-d9jnRrkuOH7Mhi+LHav2XW91HOgTAWHxjMPkXMGBc9B2b7614P7kjt8tAplRvJpbSt4nbO1lugcT/kAaWzjlLQ==}
     dev: false