From 86f14e8d0558590a8ab9b658253642e8b0d9fb8b Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Mon, 30 Sep 2024 15:00:49 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=EA=B0=80=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=9C=A0=EC=A7=80=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ImageCanvas/CommentLabel.tsx   | 20 ++++++++++++++++++-
 frontend/src/components/ImageCanvas/index.tsx |  1 +
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ImageCanvas/CommentLabel.tsx b/frontend/src/components/ImageCanvas/CommentLabel.tsx
index 32b544b..f684b4d 100644
--- a/frontend/src/components/ImageCanvas/CommentLabel.tsx
+++ b/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
diff --git a/frontend/src/components/ImageCanvas/index.tsx b/frontend/src/components/ImageCanvas/index.tsx
index 5f82773..485234d 100644
--- a/frontend/src/components/ImageCanvas/index.tsx
+++ b/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);
     }