Fix: 충돌 문제 해결을 위해 상위로 드랍 옮겨버림

frontend/src/App.tsx

@@ -2,14 +2,18 @@ import { RouterProvider } from 'react-router-dom';
 import router from './router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from './components/ui/toaster';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
+      <DndProvider backend={HTML5Backend}>
         <RouterProvider router={router} />
         <Toaster />
+      </DndProvider>
     </QueryClientProvider>
   );
 }

frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx

@@ -11,8 +11,7 @@ import AutoLabelButton from './AutoLabelButton';
 import { Folder, Image as ImageIcon } from 'lucide-react';
 import { Spinner } from '../ui/spinner';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useDrag, useDrop } from 'react-dnd';
 import useFolderQuery from '@/queries/folders/useFolderQuery';
 import MemoFileStatusIcon from './FileStatusIcon';
 import moveNodeInTree from '@/utils/moveNodeInTree';
@@ -36,7 +35,7 @@ const MENU_ID = 'project-menu';
 export default function ProjectStructure({ project }: { project: Project }) {
   const { setProject, setCategories, setFolderId } = useProjectStore();
   const { image: selectedImage, setImage } = useCanvasStore();
-  const { treeData, fetchNodeData, setTreeData } = useTreeData(project.id.toString());
+  const { treeData, fetchNodeData, fetchContextFolderData, setTreeData } = useTreeData(project.id.toString());
   const { data: categories } = useProjectCategoriesQuery(project.id);
   const { isLoading, refetch } = useFolderQuery(project.id.toString(), 0);
 
@@ -142,6 +141,8 @@ export default function ProjectStructure({ project }: { project: Project }) {
   const handleContextMenu = (event: React.MouseEvent, node: FlatNode) => {
     event.preventDefault();
     setContextNode(node);
+    const parentId = node.parent ? Number(node.parent.id) : null;
+    fetchContextFolderData(parentId);
     show({ event });
   };
 
@@ -209,7 +210,6 @@ export default function ProjectStructure({ project }: { project: Project }) {
   };
 
   return (
-    <DndProvider backend={HTML5Backend}>
     <div
       className="box-border flex h-full min-h-0 flex-col overflow-x-hidden bg-gray-50"
       ref={containerRef}
@@ -249,7 +249,6 @@ export default function ProjectStructure({ project }: { project: Project }) {
       <div className="flex">
         <AutoLabelButton projectId={project.id} />
       </div>
-      </div>
 
       <ProjectContextMenu
         projectId={project.id}
@@ -263,6 +262,6 @@ export default function ProjectStructure({ project }: { project: Project }) {
         }
         onRefetch={refetch}
       />
-    </DndProvider>
+    </div>
   );
 }