Merge branch 'fe/develop' of https://lab.ssafy.com/s11-s-project/S11P21S002 into fe/refactor/review-detail

frontend/src/components/ImageCanvas/CommentLabel.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Group, Rect, Text, Image } from 'react-konva';
 import { CommentResponse } from '@/types';
 import useImage from 'use-image';
@@ -7,6 +7,7 @@ import deleteIconSrc from '@/assets/icons/delete.svg';
 import toggleUpIconSrc from '@/assets/icons/chevron-up.svg';
 import toggleDownIconSrc from '@/assets/icons/chevron-down.svg';
 import Konva from 'konva';
+import { TRANSFORM_CHANGE_STR } from '@/constants';
 
 interface CommentLabelProps {
   stage: Konva.Stage;
@@ -48,6 +49,23 @@ export default function CommentLabel({
     toggleComment(comment.id);
   };
 
+  useEffect(() => {
+    const transformEvents = TRANSFORM_CHANGE_STR.join(' ');
+
+    stage?.on(transformEvents, () => {
+      if (!groupRef.current) return;
+
+      groupRef.current?.scale({
+        x: 1 / stage.getAbsoluteScale().x,
+        y: 1 / stage.getAbsoluteScale().y,
+      });
+    });
+
+    return () => {
+      stage?.off(transformEvents);
+    };
+  }, [stage]);
+
   return (
     stage && (
       <Group

frontend/src/components/ImageCanvas/index.tsx

@@ -237,6 +237,7 @@ export default function ImageCanvas() {
       }
       return;
     }
+    if (selectedLabelId === null) return;
     if (e.target === e.target.getStage() || e.target.getClassName() === 'Image') {
       setSelectedLabelId(null);
     }