From 6faed26f9211b68d999ab1246e2f943c98346f3b Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 24 Sep 2024 11:13:18 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=8B=9C=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EA=B0=B1=EC=8B=A0?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WorkspaceDropdownMenu/index.tsx           | 25 ++++++++++++++++---
 .../WorkspaceSidebar/ProjectStructure.tsx     |  3 ++-
 .../src/components/WorkspaceSidebar/index.tsx |  3 ++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/WorkspaceDropdownMenu/index.tsx b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
index a51be43..472a159 100644
--- a/frontend/src/components/WorkspaceDropdownMenu/index.tsx
+++ b/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 (
     <>
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
index 3bbee52..c51c465 100644
--- a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
+++ b/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 ? (
diff --git a/frontend/src/components/WorkspaceSidebar/index.tsx b/frontend/src/components/WorkspaceSidebar/index.tsx
index 87e5597..c2cd817 100644
--- a/frontend/src/components/WorkspaceSidebar/index.tsx
+++ b/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" />
     </>