Merge branch 'fe/feat/208-segmentation-label-edit' into 'fe/develop'

세그멘테이션 레이블 로컬에서 수정할 수 있도록 변경 - S22P21S002-208

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

frontend/src/components/ImageCanvas/LabelPolygon.tsx

@@ -1,6 +1,5 @@
 import { Label } from '@/types';
 import Konva from 'konva';
-import { useState } from 'react';
 import { Line } from 'react-konva';
 import PolygonTransformer from './PolygonTransformer';
 
@@ -8,21 +7,25 @@ export default function LabelPolygon({
   isSelected,
   onSelect,
   info,
+  setLabel,
   stage,
   dragLayer,
 }: {
   isSelected: boolean;
   onSelect: () => void;
   info: Label;
+  setLabel: (coordinate: [number, number][]) => void;
   stage: Konva.Stage;
   dragLayer: Konva.Layer;
 }) {
-  const [coordinates, setCoordinates] = useState<Array<[number, number]>>(info.coordinates);
+  const handleChange = (coordinates: [number, number][]) => {
+    setLabel(coordinates);
+  };
 
   return (
     <>
       <Line
-        points={coordinates.flat()}
+        points={info.coordinates.flat()}
         stroke={info.color}
         strokeWidth={1}
         onMouseDown={onSelect}
@@ -33,8 +36,8 @@ export default function LabelPolygon({
       />
       {isSelected && (
         <PolygonTransformer
-          coordinates={coordinates}
+          coordinates={info.coordinates}
-          setCoordinates={setCoordinates}
+          setCoordinates={handleChange}
           stage={stage}
           dragLayer={dragLayer}
         />

frontend/src/components/ImageCanvas/index.tsx

@@ -119,7 +119,7 @@ export default function ImageCanvas() {
     setPolygonPoints([]);
     if (polygonPoints.length < 4) return;
 
-    const color = Math.floor(Math.random() * 65535)
+    const color = Math.floor(Math.random() * 0xffffff)
       .toString(16)
       .padStart(6, '0');
     const id = labels.length + 1;
@@ -146,7 +146,7 @@ export default function ImageCanvas() {
       return;
     }
     setRectPoints([]);
-    const color = Math.floor(Math.random() * 65535)
+    const color = Math.floor(Math.random() * 0xffffff)
       .toString(16)
       .padStart(6, '0');
     const id = labels.length;
@@ -289,6 +289,7 @@ export default function ImageCanvas() {
                 isSelected={label.id === selectedLabelId}
                 onSelect={() => setSelectedLabelId(label.id)}
                 info={label}
+                setLabel={setLabel(label.id)}
                 stage={stageRef.current as Konva.Stage}
                 dragLayer={dragLayerRef.current as Konva.Layer}
               />

frontend/src/components/WorkspaceSidebar/ProjectDirectoryItem.tsx

@@ -36,20 +36,19 @@ export default function ProjectDirectoryItem({
         <button className="flex items-center">
           <ChevronRight
             size={16}
-            className={`stroke-gray-500 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+            className={cn('stroke-gray-500 transition-transform', isExpanded ? 'rotate-90' : '')}
           />
         </button>
         <span className="overflow-hidden text-ellipsis whitespace-nowrap">{item.title}</span>
       </div>
-      {isExpanded && (
+      {
-        <div className="caption flex flex-col">
+        <div className={cn('caption flex flex-col', isExpanded ? '' : 'hidden')}>
           {folderData.children.map((item) => (
             <ProjectDirectoryItem
               key={`${projectId}-${item.title}`}
               projectId={projectId}
               item={item}
               depth={depth + 1}
-              initialExpanded={true}
             />
           ))}
           {folderData.images.map((item) => (
@@ -61,7 +60,7 @@ export default function ProjectDirectoryItem({
             />
           ))}
         </div>
-      )}
+      }
     </>
   );
 }