[#20] refact : SideMenuBar MouseEnter, Leave 이벤트로 트랜지션 변경

payw-org · Feb 22, 2021 · 30f30ab · 30f30ab
1 parent 0eca3df
commit 30f30ab
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/SideMenuBar/index.tsx b/src/components/SideMenuBar/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useStore } from '@/store'
 import { Bookmark } from '@/components/common/Bookmark'
 import './style.scss'
@@ -7,9 +7,20 @@ export const SideMenuBar: React.FC = () => {
   const {
     store: { sideBookmarkList },
   } = useStore()
+  const [isShow, setIsShow] = useState(false)
 
   return (
-    <div className="side-menu-bar">
+    <div
+      className={'side-menu-bar ' + (isShow ? 'show' : '')}
+      data-component=""
+      onMouseEnter={() => {
+        setIsShow(true)
+      }}
+      onMouseLeave={() => {
+        setIsShow(false)
+        document.body.click()
+      }}
+    >
       <div className="bookmark-container">
         {sideBookmarkList.map((bookmark) => (
           <Bookmark {...bookmark} key={bookmark.id}></Bookmark>

diff --git a/src/components/SideMenuBar/style.scss b/src/components/SideMenuBar/style.scss
@@ -1,6 +1,6 @@
 @use '@/style/package' as *;
 
-.side-menu-bar {
+.side-menu-bar[data-component] {
   position: absolute;
   top: 50%;
   transition: 0.6s;
@@ -9,7 +9,7 @@
   border-radius: 0 0.8rem 0.8rem 0;
   background-color: $color-close;
 
-  &:hover {
+  &.show {
     transform: translateX(0) translateY(-50%);
     background-color: $color-open;
   }

diff --git a/src/components/TodoContainer/TodoSection/Todo/index.tsx b/src/components/TodoContainer/TodoSection/Todo/index.tsx
@@ -45,7 +45,7 @@ export const Todo: React.FC<TodoProps> = ({
     window.removeEventListener('click', closeMenu)
   }, [])
 
-  const toggleMenu = (e) => {
+  const toggleMenu = () => {
     if (!isShowMenu) {
       window.addEventListener('click', closeMenu)
     } else {