[#20] feat : Bookmark 삭제 기능 추가

payw-org · Feb 27, 2021 · 265d539 · 265d539
1 parent b1cdfcb
commit 265d539
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git a/src/components/common/Bookmark/index.tsx b/src/components/common/Bookmark/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useStore } from '@/store'
 import { setElementAtCursor } from '@/utils/events'
 import './style.scss'
@@ -12,10 +12,19 @@ export type BookmarkProps = {
 }
 
 export const Bookmark: React.FC<BookmarkProps> = (props) => {
-  const { dispatchStore } = useStore()
+  const {
+    store: { bookmarkList },
+    dispatchStore,
+  } = useStore()
   const menuContianer = useRef<HTMLDivElement>(null)
   const [isShowMenu, setIsShowMenu] = useState(false)
 
+  useEffect(() => {
+    return () => {
+      setIsShowMenu(false)
+    }
+  }, [])
+
   const closeMenu = useCallback((e) => {
     const bookmarkComponent = e.target.closest('.bookmark')
     if (
@@ -44,6 +53,13 @@ export const Bookmark: React.FC<BookmarkProps> = (props) => {
     dispatchStore('editedBookmark', { ...props })
   }
 
+  const deleteBookmark = (id: number) => {
+    dispatchStore(
+      'bookmarkList',
+      bookmarkList.filter((bookmark) => bookmark.id !== id)
+    )
+  }
+
   return (
     <div className="bookmark" data-component={props.id}>
       <a href={props.url} target="_blank" onContextMenu={toggleMenu}>
@@ -64,7 +80,14 @@ export const Bookmark: React.FC<BookmarkProps> = (props) => {
         <div className="menu" onClick={setEditBookmark}>
           수정
         </div>
-        <div className="menu">삭제</div>
+        <div
+          className="menu"
+          onClick={() => {
+            deleteBookmark(props.id)
+          }}
+        >
+          삭제
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/common/BookmarkEditor/index.tsx b/src/components/common/BookmarkEditor/index.tsx
@@ -36,9 +36,18 @@ export const BookmarkEditor: React.FC = () => {
 
   const saveEdited = () => {
     if (!editedBookmark) return
+
+    if (url !== editedBookmark.url) {
+      editedBookmark.image = ''
+    }
+
     dispatchStore(
       'bookmarkList',
-      getEditedBookmarkList(bookmarkList, { ...editedBookmark, name, url })
+      getEditedBookmarkList(bookmarkList, {
+        ...editedBookmark,
+        name,
+        url,
+      })
     )
     dispatchStore('editedBookmark', undefined)
   }

diff --git a/src/store/functions.ts b/src/store/functions.ts
@@ -52,9 +52,10 @@ export const getEditedBookmarkList = (
     (bookmark) => bookmark.id === editedBookmark.id
   )
 
-  if (editedIndex) {
+  if (editedIndex !== -1) {
     bookmarkList[editedIndex] = { ...editedBookmark }
     return [...bookmarkList]
   }
-  return [...bookmarkList, editedBookmark]
+
+  return [...bookmarkList, { ...editedBookmark, id: bookmarkList.length + 1 }]
 }