From 15e7f5bf541c1eb1e4ae5e95196db1d06eab7653 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:19:50 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20context=20=EB=A9=94=EB=89=B4=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WorkspaceSidebar/ProjectContextMenu.tsx   |  4 +-
 frontend/src/hooks/useTreeData.ts             | 37 +++++++++++++++++--
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx b/frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx
index 6293c03..403f75f 100644
--- a/frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx
+++ b/frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx
@@ -96,7 +96,6 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
       }
     }
   };
-
   const handleDelete = () => {
     if (node?.type === 'folder') {
       deleteFolderMutation.mutate(
@@ -104,7 +103,7 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
         {
           onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['folder', projectId, folderId] });
-            queryClient.invalidateQueries({ queryKey: ['project', projectId] });
+            queryClient.invalidateQueries({ queryKey: ['folder', projectId, node.id] });
             onRefetch();
           },
         }
@@ -116,7 +115,6 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
           onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['folder', projectId, folderId] });
             queryClient.invalidateQueries({ queryKey: ['image', node.id] });
-            queryClient.invalidateQueries({ queryKey: ['project', projectId] });
             onRefetch();
           },
         }
diff --git a/frontend/src/hooks/useTreeData.ts b/frontend/src/hooks/useTreeData.ts
index 1196b2a..c3a7528 100644
--- a/frontend/src/hooks/useTreeData.ts
+++ b/frontend/src/hooks/useTreeData.ts
@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
 import { getFolder } from '@/api/folderApi';
 import buildTreeNodes from '@/utils/buildTreeNodes';
 
-function useFolder(projectId: string, folderId: number, enabled: boolean = folderId === 0) {
+function useFolder(projectId: string, folderId: number, enabled: boolean) {
   return useQuery({
     queryKey: ['folder', projectId, folderId],
     queryFn: () => getFolder(projectId, folderId),
@@ -16,13 +16,26 @@ function useFolder(projectId: string, folderId: number, enabled: boolean = folde
 export default function useTreeData(projectId: string) {
   const [treeData, setTreeData] = useState<TreeNode | null>(null);
   const [currentFolderId, setCurrentFolderId] = useState<number | null>(null);
+  const [contextFolderId, setContextFolderId] = useState<number | null>(null);
 
-  const { data: rootFolder, isLoading: isRootLoading } = useFolder(projectId, 0);
+  // 루트 폴더 데이터
+  const { data: rootFolder, isLoading: isRootLoading } = useFolder(projectId, 0, true);
+
+  // 현재 선택된 폴더 데이터
   const { data: childFolder, isFetching: isChildLoading } = useFolder(
     projectId,
     currentFolderId || 0,
     currentFolderId !== null
   );
+
+  // 컨텍스트 메뉴에서 선택된 폴더 데이터
+  const { data: contextFolder, isFetching: isContextLoading } = useFolder(
+    projectId,
+    contextFolderId || 0,
+    contextFolderId !== null
+  );
+
+  // 트리 데이터를 업데이트하는 함수
   const updateTreeData = useCallback((folder: FolderResponse, isRoot: boolean = false) => {
     if (!folder) return;
 
@@ -56,16 +69,25 @@ export default function useTreeData(projectId: string) {
     });
   }, []);
 
+  // 루트 폴더 데이터 로드
   useEffect(() => {
     if (!rootFolder) return;
     updateTreeData(rootFolder, true);
   }, [rootFolder, updateTreeData]);
 
+  // 현재 선택된 폴더 데이터 업데이트
   useEffect(() => {
     if (!childFolder || currentFolderId === null) return;
     updateTreeData(childFolder);
   }, [childFolder, currentFolderId, updateTreeData]);
 
+  // 컨텍스트 메뉴에서 선택된 폴더 데이터 업데이트
+  useEffect(() => {
+    if (!contextFolder || contextFolderId === null) return;
+    -updateTreeData(contextFolder);
+  }, [contextFolder, contextFolderId, updateTreeData]);
+
+  // 현재 폴더 선택 시 폴더 ID 설정 함수
   const fetchNodeData = useCallback(
     (node: TreeNode) => {
       if (currentFolderId === Number(node.id)) return;
@@ -73,11 +95,20 @@ export default function useTreeData(projectId: string) {
     },
     [currentFolderId]
   );
+  // 컨텍스트 메뉴 선택 시 폴더 ID 설정 함수
+  const fetchContextFolderData = useCallback(
+    (folderId: number | null) => {
+      if (contextFolderId === folderId) return;
+      setContextFolderId(folderId);
+    },
+    [contextFolderId]
+  );
 
   return {
     treeData,
     fetchNodeData,
+    fetchContextFolderData,
     setTreeData,
-    isLoading: isRootLoading || isChildLoading,
+    isLoading: isRootLoading || isChildLoading || isContextLoading,
   };
 }