feat: [삭제] 버튼을 누르면 게시물 삭제 확인하는 alert 창이 뜬다. (#171)

second-hand-team06 · Jun 28, 2023 · 6aee09a · 6aee09a
1 parent 0b539b4
commit 6aee09a
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx
@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { ICON_NAME } from '@constants/iconName';
+import { ICON_NAME } from '@constants/index';
 
 import Icon from '@components/common/Icon';
 import Modal from '@components/common/Modal';
+import Popup from '@components/common/Popup';
 import ModalPortal from '@components/ModalPortal';
 import * as S from './style';
 
@@ -14,6 +15,9 @@ interface ProductDetailHeaderProps {
 
 const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  const openPopup = () => setIsPopupOpen(true);
 
   const navigate = useNavigate();
 
@@ -27,12 +31,20 @@ const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => {
           <Icon name={ICON_NAME.ELLIPSIS} />
         </button>
       )}
+      {isPopupOpen && (
+        <ModalPortal>
+          <Popup text="정말로 해당 게시물을 삭제할 것입니까?">
+            <S.ClosePopupButton onClick={() => setIsPopupOpen(false)}>아니오</S.ClosePopupButton>
+            <S.DeletePostButton>예</S.DeletePostButton>
+          </Popup>
+        </ModalPortal>
+      )}
       {isModalOpen && (
         <ModalPortal>
           <Modal
             options={[
               { text: '게시글 수정', colorType: 'default', handler: () => console.log('게시글 수정') },
-              { text: '삭제', colorType: 'warning', handler: () => console.log('삭제') },
+              { text: '삭제', colorType: 'warning', handler: openPopup },
             ]}
             closeModalHandler={() => setIsModalOpen(false)}
           />