Fix: 이미지 업로드 완료 후 x 버튼 클릭 시 refetch 안되는 현상 수정, refetch 시점 변경 - S11P21S002-243

frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx

@@ -7,11 +7,13 @@ import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery'
 
 export default function ImageUploadFileForm({
   onClose,
+  onRefetch,
   onFileCount,
   projectId,
   folderId,
 }: {
   onClose: () => void;
+  onRefetch: () => void;
   onFileCount: (fileCount: number) => void;
   projectId: number;
   folderId: number;
@@ -80,6 +82,7 @@ export default function ImageUploadFileForm({
       },
       {
         onSuccess: () => {
+          onRefetch();
           setIsUploaded(true);
         },
         onError: () => {

frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx

@@ -7,10 +7,12 @@ import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQu
 
 export default function ImageUploadFolderForm({
   onClose,
+  onRefetch,
   projectId,
   folderId,
 }: {
   onClose: () => void;
+  onRefetch: () => void;
   projectId: number;
   folderId: number;
 }) {
@@ -73,6 +75,7 @@ export default function ImageUploadFolderForm({
       },
       {
         onSuccess: () => {
+          onRefetch;
           setIsUploaded(true);
         },
         onError: () => {

frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx

@@ -7,10 +7,12 @@ import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
 
 export default function ImageUploadZipForm({
   onClose,
+  onRefetch,
   projectId,
   folderId,
 }: {
   onClose: () => void;
+  onRefetch: () => void;
   projectId: number;
   folderId: number;
 }) {
@@ -74,6 +76,7 @@ export default function ImageUploadZipForm({
         },
         {
           onSuccess: () => {
+            onRefetch();
             setIsUploaded(true);
           },
           onError: () => {

frontend/src/components/WorkspaceDropdownMenu/index.tsx

@@ -15,11 +15,11 @@ import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
 export default function WorkspaceDropdownMenu({
   projectId,
   folderId,
-  refetch,
+  onRefetch,
 }: {
   projectId: number;
   folderId: number;
-  refetch: () => void;
+  onRefetch: () => void;
 }) {
   const [isOpenUploadFile, setIsOpenUploadFile] = React.useState<boolean>(false);
   const [fileCount, setFileCount] = React.useState<number>(0);
@@ -27,20 +27,23 @@ export default function WorkspaceDropdownMenu({
   const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
 
   const handleOpenUploadFile = () => setIsOpenUploadFile(true);
+
   const handleCloseUploadFile = () => {
-    refetch();
     setIsOpenUploadFile(false);
   };
+
   const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
+
   const handleCloseUploadFolder = () => {
-    refetch();
     setIsOpenUploadFolder(false);
   };
+
   const handleOpenUploadZip = () => setIsOpenUploadZip(true);
+
   const handleCloseUploadZip = () => {
-    refetch();
     setIsOpenUploadZip(false);
   };
+
   const handleFileCount = (fileCount: number) => {
     console.log(fileCount);
     setFileCount(fileCount);
@@ -79,6 +82,7 @@ export default function WorkspaceDropdownMenu({
           <DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
           <ImageUploadFileForm
             onClose={handleCloseUploadFile}
+            onRefetch={onRefetch}
             onFileCount={handleFileCount}
             projectId={projectId}
             folderId={folderId}
@@ -95,6 +99,7 @@ export default function WorkspaceDropdownMenu({
           <DialogHeader title="폴더 업로드 (임시)" />
           <ImageUploadFolderForm
             onClose={handleCloseUploadFolder}
+            onRefetch={onRefetch}
             projectId={projectId}
             folderId={folderId}
           />
@@ -110,6 +115,7 @@ export default function WorkspaceDropdownMenu({
           <DialogHeader title="폴더 압축파일 업로드" />
           <ImageUploadZipForm
             onClose={handleCloseUploadZip}
+            onRefetch={onRefetch}
             projectId={projectId}
             folderId={folderId}
           />

frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx

@@ -40,7 +40,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
           <WorkspaceDropdownMenu
             projectId={project.id}
             folderId={0}
-            refetch={refetch}
+            onRefetch={refetch}
           />
         </header>
         {folderData.children.length === 0 && folderData.images.length === 0 ? (