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 ? ( - ) : ( 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 ( @@ -112,6 +118,7 @@ const WriteTodayCard = ({ isArchived={memo.isArchived} memoFolders={memoFolders} onClickFolder={handleFolderClick} + onClickBookmark={handleBookmark} /> 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;