From 42cdca50590446eec0eac9de1ece1eec6cf86262 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 23 Nov 2024 14:15:20 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=B8=94=EB=A1=9D=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=88=EC=9A=B0=EC=8A=A4=EB=A5=BC=20=ED=98=B8=EB=B2=84?=
 =?UTF-8?q?=ED=96=88=EC=9D=84=EB=95=8C=20menuBlock=EC=9A=94=EC=86=8C?=
 =?UTF-8?q?=EA=B0=80=20=EB=B3=B4=EC=9D=B4=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- OptionModal이 켜진 상태에도 menuBlock요소가 보이도록 수정

#042
---
 .../editor/components/MenuBlock/MenuBlock.style.ts         | 4 +---
 .../src/features/editor/components/MenuBlock/MenuBlock.tsx | 7 ++++++-
 client/src/features/editor/components/block/Block.style.ts | 3 +++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/client/src/features/editor/components/MenuBlock/MenuBlock.style.ts b/client/src/features/editor/components/MenuBlock/MenuBlock.style.ts
index 1dfa9696..4e64099a 100644
--- a/client/src/features/editor/components/MenuBlock/MenuBlock.style.ts
+++ b/client/src/features/editor/components/MenuBlock/MenuBlock.style.ts
@@ -9,11 +9,9 @@ export const menuBlockStyle = css({
   width: "20px",
   height: "20px",
   marginLeft: "-20px",
+  opacity: 0,
   transition: "opacity 0.2s ease-in-out",
   cursor: "grab",
-  _groupHover: {
-    opacity: 1,
-  },
   _active: {
     cursor: "grabbing",
   },
diff --git a/client/src/features/editor/components/MenuBlock/MenuBlock.tsx b/client/src/features/editor/components/MenuBlock/MenuBlock.tsx
index 9ea2ecfe..da273c62 100644
--- a/client/src/features/editor/components/MenuBlock/MenuBlock.tsx
+++ b/client/src/features/editor/components/MenuBlock/MenuBlock.tsx
@@ -71,7 +71,12 @@ export const MenuBlock = ({
   };
 
   return (
-    <div ref={menuBlockRef} className={menuBlockStyle} {...attributes} {...modifiedListeners}>
+    <div
+      ref={menuBlockRef}
+      className={`menu_block ${isOpen ? "option_modal_open" : ""} ${menuBlockStyle}`}
+      {...attributes}
+      {...modifiedListeners}
+    >
       <div className={dragHandleIconStyle}>
         <img src={DraggableIcon} alt="drag handle" width="10" height="10" />
       </div>
diff --git a/client/src/features/editor/components/block/Block.style.ts b/client/src/features/editor/components/block/Block.style.ts
index 7a744530..e91d4efe 100644
--- a/client/src/features/editor/components/block/Block.style.ts
+++ b/client/src/features/editor/components/block/Block.style.ts
@@ -8,6 +8,9 @@ const baseBlockStyle = {
   width: "full",
   minHeight: "16px",
   backgroundColor: "transparent",
+  "&:hover .menu_block, .menu_block.option_modal_open": {
+    opacity: 1,
+  },
 };
 
 export const blockContainerStyle = cva({