Fix: json 없을 때 에러 해결

frontend/src/api/labelJsonApi.ts

@@ -8,5 +8,6 @@ export async function getLabelJson(jsonPath: string) {
         'Cache-Control': 'no-cache',
       },
     })
-    .then(({ data }) => data);
+    .then(({ data }) => data)
+    .catch(() => ({}) as LabelJson);
 }

frontend/src/components/ImageCanvas/index.tsx

@@ -15,7 +15,7 @@ import useProjectStore from '@/stores/useProjectStore';
 export default function ImageCanvas() {
   const project = useProjectStore((state) => state.project)!;
   const { id: imageId, imagePath, dataPath } = useCanvasStore((state) => state.image)!;
-  const { data: labelData, refetch } = useLabelJson(dataPath, project);
+  const { data: labelData } = useLabelJson(dataPath, project);
   const { shapes } = labelData || [];
   const selectedLabelId = useCanvasStore((state) => state.selectedLabelId);
   const setSelectedLabelId = useCanvasStore((state) => state.setSelectedLabelId);
@@ -64,15 +64,16 @@ export default function ImageCanvas() {
         shape_type: type === 'polygon' ? 'polygon' : 'rectangle',
         points: coordinates,
       })),
+      imageWidth: image!.width,
+      imageHeight: image!.height,
     });
 
-    saveImageLabels(project.id, imageId, { data: json })
-      .catch(() => {
-        alert('레이블 데이터 저장 실패');
-      })
-      .then(() => {
-        refetch();
-      });
+    saveImageLabels(project.id, imageId, { data: json }).catch(() => {
+      alert('레이블 데이터 저장 실패');
+    });
+    // .then(() => {
+    //   refetch();
+    // });
   };
   const startDrawRect = () => {
     const { x, y } = stageRef.current!.getRelativePointerPosition()!;

frontend/src/hooks/useLabelJson.ts

@@ -4,16 +4,12 @@ import createLabelJson from '@/utils/json/createLabelJson';
 import { useMemo } from 'react';
 
 export default function useLabelJson(dataPath: string, project: Project) {
-  const response = useLabelJsonQuery(dataPath);
-  const { data: labelJsonData } = response;
-  const createdJson = useMemo(
-    () => createLabelJson(project.type, labelJsonData.imageHeight, labelJsonData.imageWidth),
-    [project, labelJsonData]
-  );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const createdJson = useMemo(() => createLabelJson(project.type), [dataPath]);
 
-  if (Object.keys(labelJsonData).includes('version')) {
+  const response = useLabelJsonQuery(dataPath);
+  if (Object.keys(response.data).includes('version')) {
     return response;
   }
-
   return { ...response, data: createdJson };
 }

frontend/src/utils/json/createLabelJson.ts

@@ -1,17 +1,17 @@
 import { LabelJson } from '@/types';
 
 export default function createLabelJson(
-  type: 'classification' | 'detection' | 'segmentation',
-  imageHeight: number,
-  imageWidth: number
+  type: 'classification' | 'detection' | 'segmentation'
+  // imageHeight: number,
+  // imageWidth: number
 ): LabelJson {
   return {
     version: '0.1.0',
     task_type: type === 'classification' ? 'cls' : type === 'detection' ? 'det' : 'seg',
     shapes: [],
     split: 'none',
-    imageHeight,
-    imageWidth,
+    imageHeight: 0,
+    imageWidth: 0,
     imageDepth: 3,
   };
 }