chore: resolve merge conflicts

src/components/features/BookmarkList/BookmarkList.tsx

@@ -9,16 +9,22 @@ import { Modal } from '@/components/common/Modal';
 import { Body1, Body2, Body3 } from '@/components/common/Typography';
 import { findyIconNames } from '@/constants/findyIcons';
 import { useBookMarkList } from '@/hooks/api/bookmarks/useBookMarkList';
+import { useDeleteBookmark } from '@/hooks/api/bookmarks/useDeleteBookmark';
 import { useNewBookMark } from '@/hooks/api/bookmarks/useNewBookMark';
 import { useAuth } from '@/hooks/auth/useAuth';
 
+import { Delete } from '../DeleteModal';
+
 type Props = { onNext: (bookmarkId: number) => void };
 export const BookmarkList = ({ onNext }: Props) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [selectedId, setSelectedId] = useState<number>(0);
   const [bookmarkName, setBookmarkName] = useState<string>('');
 
   const { token } = useAuth();
   const { data } = useBookMarkList(token);
+  const deleteBookmarkMutation = useDeleteBookmark();
   const newBookmarkMutation = useNewBookMark(token);
 
   const handleAddBookmark = () => {
@@ -35,8 +41,29 @@ export const BookmarkList = ({ onNext }: Props) => {
   };
 
   const handleBookmarkClick = (bookmarkId: number) => {
+    if (isEditing) {
+      return setSelectedId((prev) => (prev === bookmarkId ? 0 : bookmarkId));
+    }
     onNext(bookmarkId);
   };
+
+  const handleDelete = () => {
+    if (selectedId !== 0) {
+      deleteBookmarkMutation.mutate({ token, bookmarkId: selectedId });
+      setSelectedId(0);
+      setIsOpen(false);
+      setIsEditing(false);
+    }
+  };
+
+  const handleCancelEditing = () => {
+    setIsEditing(false);
+    setSelectedId(0);
+  };
+
+  const selectedItemName =
+    data?.data.find((item) => item.bookmarkId === selectedId)?.name || '북마크';
+
   return (
     <>
       <Body1 className="my-4 mx-3" weight="semibold">
@@ -80,11 +107,46 @@ export const BookmarkList = ({ onNext }: Props) => {
                   </div>
                 </div>
               </div>
+              {isEditing && (
+                <Icon
+                  name="check"
+                  className="cursor-pointer h-7 w-7 flex-shrink-0"
+                  color={selectedId === item.bookmarkId ? 'primary' : 'gray'}
+                />
+              )}
             </div>
             {index < data.data.length - 1 && <hr className="border-dashed pt-2" />}
           </div>
         ))}
       </ListCard>
+      <div className="flex gap-4 mt-5">
+        {isEditing ? (
+          <>
+            <Button variant="gray" size="large" onClick={handleCancelEditing}>
+              돌아가기
+            </Button>
+            <Button
+              variant="primary"
+              size="large"
+              disabled={selectedId === 0}
+              onClick={() => setIsOpen(true)}
+            >
+              삭제하기
+            </Button>
+          </>
+        ) : (
+          <Button variant="primary" size="large" onClick={() => setIsEditing(true)}>
+            수정하기
+          </Button>
+        )}
+      </div>
+      <Delete
+        item={selectedItemName}
+        onClickDelete={handleDelete}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+      />
+
       <Modal isOpen={isOpen}>
         <div className="p-1 max-w-80">
           <Body2 className="pb-3" weight="semibold">

src/components/features/DeleteModal/Delete.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/common/Button';
+import { Modal } from '@/components/common/Modal';
+import { Body1 } from '@/components/common/Typography';
+
+import { Props } from './Delete.types';
+
+export const Delete = ({ item, onClickDelete, isOpen, setIsOpen }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onClickOutside={() => setIsOpen(false)}>
+      <div className="flex flex-col gap-6 items-center max-w-[450px]">
+        <Body1 className="text-center mt-4">{`${item}를 삭제하시겠습니까?`}</Body1>
+        <div className="flex flex-row gap-6 items-center mb-1.5 max-w-80">
+          <Button variant="primary" size="medium" onClick={() => setIsOpen(false)}>
+            취소
+          </Button>
+          <Button variant="gray" size="medium" onClick={onClickDelete}>
+            삭제
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};

src/components/features/DeleteModal/Delete.types.ts

@@ -0,0 +1,23 @@
+export type Props = {
+  /**
+   * The name or label of the item to be deleted.
+   * @type {string}
+   */
+  item: string;
+  /**
+   * A callback function triggered when the delete action is confirmed.
+   * @type {() => void}
+   */
+  onClickDelete: () => void;
+  /**
+   * Indicates whether the component is open or visible.
+   * @type {boolean}
+   */
+  isOpen: boolean;
+
+  /**
+   * update the open/close state of the component.
+   * @param {boolean}
+   */
+  setIsOpen: (value: boolean) => void;
+};

src/components/features/DeleteModal/index.tsx

@@ -0,0 +1 @@
+export { Delete } from './Delete';

src/hooks/api/bookmarks/useDeleteBookmark.ts

@@ -0,0 +1,30 @@
+import { UseMutationResult, useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { del } from '@/lib/axios';
+
+type DeleteBookmarkParams = {
+  token: string;
+  bookmarkId: number;
+};
+
+export const useDeleteBookmark = (): UseMutationResult<
+  unknown,
+  AxiosError,
+  DeleteBookmarkParams
+> => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ token, bookmarkId }: DeleteBookmarkParams) => {
+      return await del(`api/bookmarks/${bookmarkId}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['bookmarklist'] });
+    },
+  });
+};

src/hooks/api/bookmarks/useYoutubeBookmark.ts

@@ -7,7 +7,7 @@ import { YoutubeResponse } from '../link/useYoutubePlace';
 export const useYoutubeBookmark = (token: string) => {
   return useMutation({
     mutationFn: (youtubeData: YoutubeResponse) =>
-      post(`/api/bookmarks/youtube`, youtubeData, {
+      post(`api/bookmarks/youtube`, youtubeData, {
         headers: {
           Authorization: `Bearer ${token}`,
         },