design: 블록에 마우스를 호버했을때 menuBlock요소가 보이게 수정

- OptionModal이 켜진 상태에도 menuBlock요소가 보이도록 수정 #42
boostcampwm-2024 · Nov 23, 2024 · 42cdca5 · 42cdca5
1 parent 70ea86a
commit 42cdca5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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({