From 265d5392dea882725a438af80f0ea8ee9cbe2f07 Mon Sep 17 00:00:00 2001
From: choibumsu <bumsu0211@gmail.com>
Date: Sun, 28 Feb 2021 00:38:14 +0900
Subject: [PATCH] =?UTF-8?q?[#20]=20feat=20:=20Bookmark=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Bookmark/index.tsx      | 29 +++++++++++++++++--
 .../common/BookmarkEditor/index.tsx           | 11 ++++++-
 src/store/functions.ts                        |  5 ++--
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/common/Bookmark/index.tsx b/src/components/common/Bookmark/index.tsx
index 3168282..433a9b8 100644
--- 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
index d7db057..43d3d22 100644
--- 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
index 1fa95be..cc8acf9 100644
--- 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 }]
 }