[Fix/BAR-269] 끄적이는 페이지 아카이빙 제거

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>
         ) : (

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,
+});

src/domain/끄적이는/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)}

src/domain/끄적이는/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;