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(null); const [currentFolderId, setCurrentFolderId] = useState(null); + const [contextFolderId, setContextFolderId] = useState(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, }; }