Feat: 레이블 저장 시 상태 자동 fefetch

frontend/src/components/ImageCanvas/index.tsx

@@ -9,14 +9,15 @@ import LabelPolygon from './LabelPolygon';
 import CanvasControlBar from '../CanvasControlBar';
 import { Label } from '@/types';
 import useLabelJson from '@/hooks/useLabelJson';
-import { saveImageLabels } from '@/api/lablingApi';
 import useProjectStore from '@/stores/useProjectStore';
 import { LABEL_CATEGORY } from '@/constants';
+import { useQueryClient } from '@tanstack/react-query';
+import useSaveImageLabelsQuery from '@/queries/projects/useSaveImageLabelsQuery';
 
 export default function ImageCanvas() {
-  const project = useProjectStore((state) => state.project)!;
+  const { project, folderId } = useProjectStore();
   const { id: imageId, imagePath, dataPath } = useCanvasStore((state) => state.image)!;
-  const { data: labelData } = useLabelJson(dataPath, project);
+  const { data: labelData } = useLabelJson(dataPath, project!);
   const { labels, drawState, setDrawState, addLabel, setLabels, selectedLabelId, setSelectedLabelId, sidebarSize } =
     useCanvasStore();
   const { shapes } = labelData || [];
@@ -28,6 +29,8 @@ export default function ImageCanvas() {
   const [image] = useImage(imagePath);
   const [rectPoints, setRectPoints] = useState<[number, number][]>([]);
   const [polygonPoints, setPolygonPoints] = useState<[number, number][]>([]);
+  const saveImageLabelsMutation = useSaveImageLabelsQuery();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     setLabels(
@@ -65,9 +68,17 @@ export default function ImageCanvas() {
       imageHeight: image!.height,
     });
 
-    saveImageLabels(project.id, imageId, { data: json }).catch(() => {
+    saveImageLabelsMutation.mutate(
+      { projectId: project!.id, imageId: imageId, data: { data: json } },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: ['folder', project!.id.toString(), folderId] });
+        },
+        onError: () => {
           alert('레이블 데이터 저장 실패');
-    });
+        },
+      }
+    );
   };
   const startDrawRect = () => {
     const { x, y } = stageRef.current!.getRelativePointerPosition()!;
@@ -342,7 +353,7 @@ export default function ImageCanvas() {
       </Stage>
       <CanvasControlBar
         saveJson={saveJson}
-        projectType={project.type}
+        projectType={project!.type}
       />
     </div>
   ) : (

frontend/src/components/WorkspaceSidebar/ProjectDirectoryItem.tsx

@@ -56,6 +56,7 @@ export default function ProjectDirectoryItem({
               key={`${projectId}-${item.imageTitle}`}
               item={item}
               depth={depth + 1}
+              folderId={folderData.id}
               selected={image?.id === item.id}
             />
           ))}

frontend/src/components/WorkspaceSidebar/ProjectFileItem.tsx

@@ -2,24 +2,28 @@ import { cn } from '@/lib/utils';
 import { ImageResponse } from '@/types';
 import { ArrowDownToLine, Check, Image, Loader, Minus, Send } from 'lucide-react';
 import useCanvasStore from '@/stores/useCanvasStore';
+import useProjectStore from '@/stores/useProjectStore';
 
 export default function ProjectFileItem({
   className = '',
   item,
+  folderId = 0,
   depth = 0,
   selected,
 }: {
   className?: string;
   item: ImageResponse;
+  folderId?: number;
   depth?: number;
   selected: boolean;
 }) {
   const paddingLeft = depth * 12;
-  // const changeImage = useCanvasStore((state) => state.changeImage);
   const setImage = useCanvasStore((state) => state.setImage);
+  const setFolderId = useProjectStore((state) => state.setFolderId);
 
   const handleClick = () => {
     setImage(item);
+    setFolderId(folderId);
   };
 
   return (

frontend/src/queries/projects/useSaveImageLabelsQuery.ts

@@ -0,0 +1,9 @@
+import { saveImageLabels } from '@/api/lablingApi';
+import { useMutation } from '@tanstack/react-query';
+
+export default function useSaveImageLabelsQuery() {
+  return useMutation({
+    mutationFn: ({ projectId, imageId, data }: { projectId: number; imageId: number; data: { data: string } }) =>
+      saveImageLabels(projectId, imageId, data),
+  });
+}

frontend/src/stores/useProjectStore.ts

@@ -4,11 +4,15 @@ import { Project } from '@/types';
 interface ProjectState {
   project: Project | null;
   setProject: (project: Project | null) => void;
+  folderId: number;
+  setFolderId: (folderId: number) => void;
 }
 
 const useProjectStore = create<ProjectState>((set) => ({
   project: null,
   setProject: (project) => set({ project }),
+  folderId: 0,
+  setFolderId: (folderId) => set({ folderId }),
 }));
 
 export default useProjectStore;