Feat: 파일 업로드 시 프로젝트 폴더 구조 갱신하도록 변경

frontend/src/components/WorkspaceDropdownMenu/index.tsx

@@ -12,17 +12,34 @@ import React from 'react';
 import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
 import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
 
-export default function WorkspaceDropdownMenu({ projectId, folderId }: { projectId: number; folderId: number }) {
+export default function WorkspaceDropdownMenu({
+  projectId,
+  folderId,
+  refetch,
+}: {
+  projectId: number;
+  folderId: number;
+  refetch: () => void;
+}) {
   const [isOpenUploadFile, setIsOpenUploadFile] = React.useState(false);
   const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState(false);
   const [isOpenUploadZip, setIsOpenUploadZip] = React.useState(false);
 
   const handleOpenUploadFile = () => setIsOpenUploadFile(true);
-  const handleCloseUploadFile = () => setIsOpenUploadFile(false);
+  const handleCloseUploadFile = () => {
+    refetch();
+    setIsOpenUploadFile(false);
+  };
   const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
-  const handleCloseUploadFolder = () => setIsOpenUploadFolder(false);
+  const handleCloseUploadFolder = () => {
+    refetch();
+    setIsOpenUploadFolder(false);
+  };
   const handleOpenUploadZip = () => setIsOpenUploadZip(true);
-  const handleCloseUploadZip = () => setIsOpenUploadZip(false);
+  const handleCloseUploadZip = () => {
+    refetch();
+    setIsOpenUploadZip(false);
+  };
 
   return (
     <>

frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx

@@ -11,7 +11,7 @@ import WorkspaceDropdownMenu from '../WorkspaceDropdownMenu';
 export default function ProjectStructure({ project }: { project: Project }) {
   const setProject = useCanvasStore((state) => state.setProject);
   const image = useCanvasStore((state) => state.image);
-  const { data: folderData } = useFolderQuery(project.id.toString(), 0);
+  const { data: folderData, refetch } = useFolderQuery(project.id.toString(), 0);
 
   useEffect(() => {
     setProject(project);
@@ -27,6 +27,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
           <WorkspaceDropdownMenu
             projectId={project.id}
             folderId={0}
+            refetch={refetch}
           />
         </header>
         {folderData.children.length === 0 && folderData.images.length === 0 ? (

frontend/src/components/WorkspaceSidebar/index.tsx

@@ -5,6 +5,7 @@ import { Project } from '@/types';
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '../ui/select';
 import useCanvasStore from '@/stores/useCanvasStore';
 import { webPath } from '@/router';
+import { Suspense } from 'react';
 
 export default function WorkspaceSidebar({ workspaceName, projects }: { workspaceName: string; projects: Project[] }) {
   const { projectId: selectedProjectId } = useParams<{ projectId: string }>();
@@ -48,7 +49,7 @@ export default function WorkspaceSidebar({ workspaceName, projects }: { workspac
             </SelectContent>
           </Select>
         </div>
-        {selectedProject && <ProjectStructure project={selectedProject} />}
+        <Suspense fallback={<div></div>}>{selectedProject && <ProjectStructure project={selectedProject} />}</Suspense>
       </ResizablePanel>
       <ResizableHandle className="bg-gray-300" />
     </>