Merge pull request #177 from boostcampwm-2024/Feature/#042_블록에_마우스를_호…

…버하면_한_쪽_끝에_옵션_버튼_구현 Feature/#42 블록에 마우스를 호버하면 한 쪽 끝에 옵션 버튼 구현
boostcampwm-2024 · Nov 23, 2024 · dae1b3a · dae1b3a
2 parents 70ea86a + 42cdca5
commit dae1b3a
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({