fix: dnd provider 수준 변경

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