From 45f7958619be91d11165d248c1df5b865d8aaa8f Mon Sep 17 00:00:00 2001
From: YouSooA <kinsk2839@naver.com>
Date: Wed, 28 Jun 2023 03:08:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Header=EC=9D=98=20[=EB=8D=94=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0]=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=ED=95=98=EB=A9=B4,=20modal=20=EC=B0=BD=EC=9D=B4=20=EB=82=98?=
 =?UTF-8?q?=ED=83=80=EB=82=9C=EB=8B=A4=20(#171)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProductDetailHeader/index.tsx             | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx
index fee076c5e..fa1a6a5c0 100644
--- a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx
+++ b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx
@@ -1,8 +1,11 @@
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ICON_NAME } from '@constants/iconName';
 
 import Icon from '@components/common/Icon';
+import Modal from '@components/common/Modal';
+import ModalPortal from '@components/ModalPortal';
 import * as S from './style';
 
 interface ProductDetailHeaderProps {
@@ -10,13 +13,31 @@ interface ProductDetailHeaderProps {
 }
 
 const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const navigate = useNavigate();
+
   return (
     <S.Header>
       <button onClick={() => navigate(-1)}>
         <Icon name={ICON_NAME.CHEVRON_LEFT} />
       </button>
-      {isSeller && <Icon name={ICON_NAME.ELLIPSIS} />}
+      {isSeller && (
+        <button onClick={() => setIsModalOpen(true)}>
+          <Icon name={ICON_NAME.ELLIPSIS} />
+        </button>
+      )}
+      {isModalOpen && (
+        <ModalPortal>
+          <Modal
+            options={[
+              { text: '게시글 수정', colorType: 'default', handler: () => console.log('게시글 수정') },
+              { text: '삭제', colorType: 'warning', handler: () => console.log('삭제') },
+            ]}
+            closeModalHandler={() => setIsModalOpen(false)}
+          />
+        </ModalPortal>
+      )}
     </S.Header>
   );
 };