[#20] feat : Bookmark Menu 사라지게 하는 함수 작성

payw-org · Feb 22, 2021 · 0eca3df · 0eca3df
1 parent 7054d4b
commit 0eca3df
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/components/common/Bookmark/index.tsx b/src/components/common/Bookmark/index.tsx
@@ -9,16 +9,29 @@ export type BookmarkProps = {
   image: string
 }
 
-export const Bookmark: React.FC<BookmarkProps> = ({ name, url, image }) => {
+export const Bookmark: React.FC<BookmarkProps> = ({ id, name, url, image }) => {
   const menuContianer = useRef<HTMLDivElement>(null)
   const [isShowMenu, setIsShowMenu] = useState(false)
 
+  const closeMenu = useCallback((e) => {
+    const bookmarkComponent = e.target.closest('.bookmark')
+    if (bookmarkComponent && +bookmarkComponent.dataset.component === id) {
+      return
+    }
+
+    setIsShowMenu(false)
+    window.removeEventListener('click', closeMenu)
+    window.removeEventListener('contextmenu', closeMenu)
+  }, [])
+
   const toggleMenu = (e) => {
     e.preventDefault()
     if (!menuContianer.current) return
 
     setIsShowMenu(true)
     setElementAtCursor(menuContianer.current, e)
+    window.addEventListener('click', closeMenu)
+    window.addEventListener('contextmenu', closeMenu)
   }
 
   return (