Merge branch 'fe/fix/266-canvas-rect-sort' into 'fe/develop'

Fix: 사각형 저장 시 점 서순 맞도록 수정 - S11P21S002-266

See merge request s11-s-project/S11P21S002!290

frontend/src/api/lablingApi.ts

@@ -11,5 +11,5 @@ export async function saveImageLabels(
 }
 
 export async function runAutoLabel(projectId: number, modelId = 1) {
-  return api.post(`/projects/${projectId}/auto`, { modelId }).then(({ data }) => data);
+  return api.post(`/projects/${projectId}/auto`, { modelId }, { timeout: 0 }).then(({ data }) => data);
 }

frontend/src/components/ImageCanvas/LabelRect.tsx

@@ -1,4 +1,5 @@
 import { Label } from '@/types';
+import rectSort from '@/utils/rectSort';
 import Konva from 'konva';
 import { useEffect, useRef } from 'react';
 import { Line, Transformer } from 'react-konva';
@@ -39,8 +40,9 @@ export default function LabelRect({
       [info.coordinates[0][0] * scale.x + rect.x, info.coordinates[0][1] * scale.y + rect.y],
       [info.coordinates[1][0] * scale.x + rect.x, info.coordinates[1][1] * scale.y + rect.y],
     ];
+    const sortedPoints = rectSort(points as [[number, number], [number, number]]);
 
-    setLabel(points);
+    setLabel(sortedPoints);
     rectRef.current?.setPosition({ x: 0, y: 0 });
     rectRef.current?.scale({ x: 1, y: 1 });
   };

frontend/src/components/ImageCanvas/index.tsx

@@ -19,6 +19,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import useSaveImageLabelsQuery from '@/queries/projects/useSaveImageLabelsQuery';
 import { useToast } from '@/hooks/use-toast';
 import CommentLabel from './CommentLabel';
+import rectSort from '@/utils/rectSort';
 
 export default function ImageCanvas() {
   const { project, folderId, categories } = useProjectStore();
@@ -188,11 +189,11 @@ export default function ImageCanvas() {
 
   const endDrawRect = () => {
     if (drawState !== 'rect' || rectPoints.length === 0) return;
+    setRectPoints([]);
     if (rectPoints[0][0] === rectPoints[1][0] && rectPoints[0][1] === rectPoints[1][1]) {
-      setRectPoints([]);
       return;
     }
-    setRectPoints([]);
+    const sortedPoints = rectSort(rectPoints as [[number, number], [number, number]]);
 
     const color = Math.floor(Math.random() * 0xffffff)
       .toString(16)
@@ -203,7 +204,7 @@ export default function ImageCanvas() {
       categoryId: categories[0]!.id,
       type: 'rectangle',
       color: `#${color}`,
-      coordinates: rectPoints,
+      coordinates: sortedPoints,
     });
     setDrawState('pointer');
     setSelectedLabelId(id);

frontend/src/utils/rectSort.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import rectSort from './rectSort';
+
+describe('rectSort', () => {
+  it('should sort coordinates when first point is top-left and second point is bottom-right', () => {
+    const result = rectSort([
+      [1, 2],
+      [3, 4],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
+  it('should sort coordinates when first point is bottom-right and second point is top-left', () => {
+    const result = rectSort([
+      [3, 4],
+      [1, 2],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
+  it('should sort coordinates when first point is bottom-left and second point is top-right', () => {
+    const result = rectSort([
+      [1, 4],
+      [3, 2],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
+  it('should sort coordinates when first point is top-right and second point is bottom-left', () => {
+    const result = rectSort([
+      [3, 2],
+      [1, 4],
+    ]);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+});

frontend/src/utils/rectSort.ts

@@ -0,0 +1,9 @@
+export default function rectSort([[x1, y1], [x2, y2]]: [[number, number], [number, number]]): [
+  [number, number],
+  [number, number],
+] {
+  return [
+    [Math.min(x1, x2), Math.min(y1, y2)],
+    [Math.max(x1, x2), Math.max(y1, y2)],
+  ];
+}