From aa2619e93d9bf5b02f79e4449a1351b2afa4345c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Mon, 7 Oct 2024 16:18:35 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EC=B6=A9=EB=8F=8C=20=EB=AC=B8=EC=A0=9C?=
 =?UTF-8?q?=20=ED=95=B4=EA=B2=B0=EC=9D=84=20=EC=9C=84=ED=95=B4=20=EC=83=81?=
 =?UTF-8?q?=EC=9C=84=EB=A1=9C=20=EB=93=9C=EB=9E=8D=20=EC=98=AE=EA=B2=A8?=
 =?UTF-8?q?=EB=B2=84=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          |  8 +-
 .../WorkspaceSidebar/ProjectStructure.tsx     | 85 +++++++++----------
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bfd6abc..8b2c620 100644
--- a/frontend/src/App.tsx
+++ b/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}>
-      <RouterProvider router={router} />
-      <Toaster />
+      <DndProvider backend={HTML5Backend}>
+        <RouterProvider router={router} />
+        <Toaster />
+      </DndProvider>
     </QueryClientProvider>
   );
 }
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
index a494fd4..c3c2a4c 100644
--- a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
+++ b/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,46 +210,44 @@ 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}
-      >
-        <div className="flex h-full flex-col gap-2 overflow-hidden px-1 pb-2">
-          <header className="flex w-full items-center gap-2 rounded-md bg-white p-2 shadow-sm">
-            <div className="flex w-full min-w-0 items-center gap-1 pr-1">
-              <h2 className="caption overflow-hidden text-ellipsis whitespace-nowrap text-gray-600">{project.type}</h2>
-            </div>
-            <WorkspaceDropdownMenu
-              projectId={project.id}
-              folderId={0}
-              onRefetch={refetch}
+    <div
+      className="box-border flex h-full min-h-0 flex-col overflow-x-hidden bg-gray-50"
+      ref={containerRef}
+    >
+      <div className="flex h-full flex-col gap-2 overflow-hidden px-1 pb-2">
+        <header className="flex w-full items-center gap-2 rounded-md bg-white p-2 shadow-sm">
+          <div className="flex w-full min-w-0 items-center gap-1 pr-1">
+            <h2 className="caption overflow-hidden text-ellipsis whitespace-nowrap text-gray-600">{project.type}</h2>
+          </div>
+          <WorkspaceDropdownMenu
+            projectId={project.id}
+            folderId={0}
+            onRefetch={refetch}
+          />
+        </header>
+        {isLoading || !treeData ? (
+          <div className="flex h-full items-center justify-center">
+            <Spinner
+              show={true}
+              size={'large'}
             />
-          </header>
-          {isLoading || !treeData ? (
-            <div className="flex h-full items-center justify-center">
-              <Spinner
-                show={true}
-                size={'large'}
-              />
-            </div>
-          ) : (
-            <List
-              height={Math.min(flatData.length * 20, containerHeight)}
-              itemCount={flatData.length}
-              itemSize={20}
-              width={'100%'}
-              itemData={flatData}
-              itemKey={getItemKey}
-              className="flex-1 overflow-x-hidden"
-            >
-              {Row}
-            </List>
-          )}
-        </div>
-        <div className="flex">
-          <AutoLabelButton projectId={project.id} />
-        </div>
+          </div>
+        ) : (
+          <List
+            height={Math.min(flatData.length * 20, containerHeight)}
+            itemCount={flatData.length}
+            itemSize={20}
+            width={'100%'}
+            itemData={flatData}
+            itemKey={getItemKey}
+            className="flex-1 overflow-x-hidden"
+          >
+            {Row}
+          </List>
+        )}
+      </div>
+      <div className="flex">
+        <AutoLabelButton projectId={project.id} />
       </div>
 
       <ProjectContextMenu
@@ -263,6 +262,6 @@ export default function ProjectStructure({ project }: { project: Project }) {
         }
         onRefetch={refetch}
       />
-    </DndProvider>
+    </div>
   );
 }