[#20] feat : Bookmark 컴포넌트 메뉴 추가

payw-org · Feb 28, 2021 · b6aca3b · b6aca3b
1 parent 8b51f13
commit b6aca3b
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/src/components/common/Bookmark/index.tsx b/src/components/common/Bookmark/index.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useCallback, useRef, useState } from 'react'
+import { setElementAtCursor } from '@/utils/events'
 import './style.scss'
 
 export type BookmarkProps = {
@@ -9,12 +10,33 @@ export type BookmarkProps = {
 }
 
 export const Bookmark: React.FC<BookmarkProps> = ({ name, url, image }) => {
+  const menuContianer = useRef<HTMLDivElement>(null)
+  const [isShowMenu, setIsShowMenu] = useState(false)
+
+  const toggleMenu = (e) => {
+    e.preventDefault()
+    if (!menuContianer.current) return
+
+    setIsShowMenu(true)
+    setElementAtCursor(menuContianer.current, e)
+  }
+
   return (
-    <div className="bookmark">
+    <div className="bookmark" data-component={id}>
       <a href={url} target="_blank">
-        <img loading="lazy" src={image} alt={name} />
+        <img loading="lazy" src={image} alt={name} onContextMenu={toggleMenu} />
         <div className="name">{name}</div>
       </a>
+      <div
+        className={'menu-container ' + (isShowMenu ? 'show' : 'hide')}
+        ref={menuContianer}
+        onContextMenu={(e) => {
+          e.preventDefault()
+        }}
+      >
+        <div className="menu">수정</div>
+        <div className="menu">삭제</div>
+      </div>
     </div>
   )
 }
diff --git a/src/components/common/Bookmark/style.scss b/src/components/common/Bookmark/style.scss
@@ -1,6 +1,8 @@
 @use '@/style/package' as *;
 
-.bookmark {
+.bookmark[data-component] {
+  position: relative;
+
   a {
     transition: 0.1s;
 
@@ -31,4 +33,36 @@
       overflow-y: hidden;
     }
   }
+
+  .menu-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: opacity 0.3s;
+    width: fit-content;
+    padding: 0.8rem 1.2rem;
+    border-radius: 0.4rem;
+    background-color: $color-white;
+    box-shadow: 0 0.2rem 0.8rem rgba($color-black, 50%);
+    z-index: 10;
+
+    &.hide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &.show {
+      opacity: 1;
+    }
+    .menu {
+      font-size: 1.5rem;
+      color: $color-gray-600;
+      margin-bottom: 0.6rem;
+      cursor: pointer;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }