diff --git a/client/src/components/sidebar/Sidebar.tsx b/client/src/components/sidebar/Sidebar.tsx index c3b218f1..c92fe3f5 100644 --- a/client/src/components/sidebar/Sidebar.tsx +++ b/client/src/components/sidebar/Sidebar.tsx @@ -1,4 +1,5 @@ import { motion } from "framer-motion"; +import { useState } from "react"; import { IconButton } from "@components/button/IconButton"; import { Modal } from "@components/modal/modal"; import { useModal } from "@components/modal/useModal"; @@ -34,6 +35,9 @@ export const Sidebar = ({ const { isOpen, openModal, closeModal } = useModal(); const { sendPageDeleteOperation, clientId } = useSocketStore(); + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const [pageToDelete, setPageToDelete] = useState(null); + const handlePageItemClick = (id: string) => { if (isMaxVisiblePage) { openModal(); @@ -63,6 +67,11 @@ export const Sidebar = ({ }); }; + const confirmPageDelete = (page: Page) => { + setPageToDelete(page); + setIsDeleteModalOpen(true); + }; + return ( handlePageItemClick(item.id)} - onDelete={() => handlePageDelete(item.id)} + onDelete={() => confirmPageDelete(item)} /> )) @@ -100,6 +109,7 @@ export const Sidebar = ({ +

최대 {MAX_VISIBLE_PAGE}개의 페이지만 표시할 수 있습니다 @@ -107,6 +117,27 @@ export const Sidebar = ({ 사용하지 않는 페이지는 닫아주세요.

+ + { + if (pageToDelete) { + handlePageDelete(pageToDelete.id); + setIsDeleteModalOpen(false); + setPageToDelete(null); + } + }} + secondaryButtonLabel="아니오" + secondaryButtonOnClick={() => { + setIsDeleteModalOpen(false); + setPageToDelete(null); + }} + > +

+ 정말 이 {pageToDelete?.title}을(를) 삭제하시겠습니까? +

+
); };