From 3ea719c6162d2cf2b066e1a813ec1562e2362ff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=A5=EB=8F=99=EA=B7=A0?=
 <57230590+dongkyun-dev@users.noreply.github.com>
Date: Sat, 24 Feb 2024 13:10:28 +0900
Subject: [PATCH] =?UTF-8?q?[Fix/BAR-269]=20=EB=81=84=EC=A0=81=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=95=84=EC=B9=B4?=
 =?UTF-8?q?=EC=9D=B4=EB=B9=99=20=EC=A0=9C=EA=B1=B0=20(#89)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: 끄적이는 페이지 아카이빙 제거
---
 .../Dropdown/FolderDropdown/index.tsx         |  2 +-
 .../Dropdown/FolderDropdown/style.css.ts      |  5 +++++
 .../components/Card/Today/index.tsx"          |  7 ++++++
 .../mutations/useDeleteArchive.ts"            | 22 +++++++++++++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 "src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/mutations/useDeleteArchive.ts"

diff --git a/src/components/Dropdown/FolderDropdown/index.tsx b/src/components/Dropdown/FolderDropdown/index.tsx
index b8d299b..6955eaa 100644
--- a/src/components/Dropdown/FolderDropdown/index.tsx
+++ b/src/components/Dropdown/FolderDropdown/index.tsx
@@ -30,7 +30,7 @@ const FolderDropdown = ({
     return (
       <>
         {onClickBookmark ? (
-          <Button onClick={onClickBookmark}>
+          <Button onClick={onClickBookmark} className={styles.deleteBookmark}>
             <Icon icon="bookmark" color={COLORS['Blue/Default']} />
           </Button>
         ) : (
diff --git a/src/components/Dropdown/FolderDropdown/style.css.ts b/src/components/Dropdown/FolderDropdown/style.css.ts
index 900459f..88f6aeb 100644
--- a/src/components/Dropdown/FolderDropdown/style.css.ts
+++ b/src/components/Dropdown/FolderDropdown/style.css.ts
@@ -35,3 +35,8 @@ export const icon = style({
   position: 'absolute',
   marginTop: '2px',
 });
+
+export const deleteBookmark = style({
+  position: 'relative',
+  zIndex: 1,
+});
diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx"
index ba6c82d..05eb85a 100644
--- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx"
+++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/Card/Today/index.tsx"
@@ -10,6 +10,7 @@ import FolderDropdown from '@components/Dropdown/FolderDropdown';
 import MenuDropdown from '@components/Dropdown/MenuDropdown';
 import SkeletonContent from '@components/Loading/Skeleton/SkeletonContent';
 import { TOAST_MESSAGE } from '@constants/toast';
+import useDeleteArchive from '@domain/끄적이는/mutations/useDeleteArchive';
 import useDeleteTemporalMemo from '@domain/끄적이는/mutations/useDeleteTemporalMemo';
 import useEditTemporalMemo from '@domain/끄적이는/mutations/useEditTemporalMemo';
 import useSaveTemporalMemo from '@domain/끄적이는/mutations/useSaveTemporalMemo';
@@ -41,6 +42,7 @@ const WriteTodayCard = ({
   const { mutate: updateTemporalMemo } = useEditTemporalMemo();
   const { mutate: deleteTemporalMemo } = useDeleteTemporalMemo();
   const { mutate: saveTemporalMemo } = useSaveTemporalMemo();
+  const { mutate: deleteArchive } = useDeleteArchive();
 
   const editInputProps = useInput({
     id: 'edit-today-input',
@@ -76,6 +78,10 @@ const WriteTodayCard = ({
     saveTemporalMemo({ temporalMemoId: memo.id, memoFolderId });
   };
 
+  const handleBookmark = () => {
+    deleteArchive(memo.id);
+  };
+
   if (isEditMode) {
     return (
       <Card color="blue" defaultIsVisibleMenu>
@@ -112,6 +118,7 @@ const WriteTodayCard = ({
             isArchived={memo.isArchived}
             memoFolders={memoFolders}
             onClickFolder={handleFolderClick}
+            onClickBookmark={handleBookmark}
           />
           <MenuDropdown
             onEdit={() => onEditClick(memo.id)}
diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/mutations/useDeleteArchive.ts" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/mutations/useDeleteArchive.ts"
new file mode 100644
index 0000000..efcb155
--- /dev/null
+++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/mutations/useDeleteArchive.ts"
@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { http } from '@api/http';
+
+import { TemporalMemoQueryKeys } from '../constants/queryKeys';
+
+const deleteArchive = async (id: number) => {
+  await http.delete(`/temporal-memos/${id}/archive`);
+};
+
+const useDeleteArchive = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteArchive,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: TemporalMemoQueryKeys.all });
+    },
+  });
+};
+
+export default useDeleteArchive;