From 138da2f2f58c59658e1e7588c636fe55a0b01984 Mon Sep 17 00:00:00 2001
From: nocheol <qkdl60@gmail.com>
Date: Sun, 3 Mar 2024 14:52:11 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20#485=20-=20modal=20?=
 =?UTF-8?q?=EC=97=AD=ED=95=A0=EB=B3=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/plans/[planId]/hooks/usePlanPage.tsx |  2 +-
 src/app/plans/[planId]/page.tsx              | 32 +++++-----
 src/components/Popover/Popover.tsx           | 66 ++++++++++++++++++++
 src/components/Popover/index.ts              |  1 +
 src/components/index.ts                      |  1 +
 5 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Popover/Popover.tsx
 create mode 100644 src/components/Popover/index.ts

diff --git a/src/app/plans/[planId]/hooks/usePlanPage.tsx b/src/app/plans/[planId]/hooks/usePlanPage.tsx
index 2f0c6923..3e85a3e9 100644
--- a/src/app/plans/[planId]/hooks/usePlanPage.tsx
+++ b/src/app/plans/[planId]/hooks/usePlanPage.tsx
@@ -53,8 +53,8 @@ export default function usePlanPage(planId: string) {
     isEditable,
     isMyPlan,
     currentURL,
+    modalContainer,
     handleCopyLink,
     handleDeletePlan,
-    modalContainer,
   };
 }
diff --git a/src/app/plans/[planId]/page.tsx b/src/app/plans/[planId]/page.tsx
index d3897c49..033a8fe5 100644
--- a/src/app/plans/[planId]/page.tsx
+++ b/src/app/plans/[planId]/page.tsx
@@ -5,9 +5,9 @@ import {
   Icon,
   KakaoShareButton,
   ModalBasic,
+  Popover,
   ReadOnlyPlan,
 } from '@/components';
-import ModalTriggerButton from '@/components/ModalTriggerButton/ModalTriggerButton';
 import classNames from 'classnames';
 import Link from 'next/link';
 import NotPublic from './_components/NotPublic/NotPublic';
@@ -24,8 +24,8 @@ export default function PlanIdPage({ params }: { params: { planId: string } }) {
     isAccessible,
     isEditable,
     currentURL,
-    handleCopyLink,
     modalContainer,
+    handleCopyLink,
     handleDeletePlan,
   } = usePlanPage(params.planId);
 
@@ -54,18 +54,22 @@ export default function PlanIdPage({ params }: { params: { planId: string } }) {
                     {isEditable && (
                       <div className="plan__header--buttons">
                         <Link href={`/plans/edit/${planId}`}>수정</Link>|
-                        <ModalTriggerButton
-                          container={modalContainer.current}
-                          renderModalContent={(onClickNo) => (
-                            <ModalBasic
-                              onClickYes={handleDeletePlan}
-                              onClickNo={onClickNo}
-                              confirmSentense="삭제 하기">
-                              정말 해당 계획을 삭제하시겠습니까 ?
-                            </ModalBasic>
-                          )}>
-                          <span>삭제</span>
-                        </ModalTriggerButton>
+                        <Popover.Main>
+                          <Popover.Trigger>
+                            <span>삭제</span>
+                          </Popover.Trigger>
+                          <Popover.ModalContent
+                            container={modalContainer.current}>
+                            {(onClickNo) => (
+                              <ModalBasic
+                                onClickYes={handleDeletePlan}
+                                onClickNo={onClickNo}
+                                confirmSentense="삭제 하기">
+                                정말 해당 계획을 삭제하시겠습니까 ?
+                              </ModalBasic>
+                            )}
+                          </Popover.ModalContent>
+                        </Popover.Main>
                       </div>
                     )}
                   </ReadOnlyPlan>
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
new file mode 100644
index 00000000..97c4d5bf
--- /dev/null
+++ b/src/components/Popover/Popover.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import {
+  ReactElement,
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { Modal } from '..';
+
+const contextDefaultValue = {
+  isModalOpen: false,
+  handleOpenModal: () => {},
+  handleCloseModal: () => {},
+};
+//popover 안에서 공유할 값을 context를 통해서 공유한다.
+const PopoverContext = createContext<{
+  isModalOpen: boolean;
+  handleOpenModal: () => void;
+  handleCloseModal: () => void;
+}>(contextDefaultValue);
+
+const Main = ({ children }: { children: ReactNode }) => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => setIsModalOpen(false);
+  return (
+    <PopoverContext.Provider
+      value={{
+        isModalOpen,
+        handleOpenModal,
+        handleCloseModal,
+      }}>
+      {children}
+    </PopoverContext.Provider>
+  );
+};
+//popover의 trigger역할
+const Trigger = ({ children }: { children: ReactNode }) => {
+  const contextValue = useContext(PopoverContext);
+
+  return <div onClick={contextValue.handleOpenModal}>{children}</div>;
+};
+//실제 모달이 들어올 컴포넌트 현재 modal 구현상 render함수를 받고 있다.
+const ModalContent = ({
+  container,
+  children,
+}: {
+  container: HTMLDivElement | null;
+  children: (onClickNo: () => void) => ReactElement;
+}) => {
+  const contextValue = useContext(PopoverContext);
+  return (
+    <>
+      {contextValue.isModalOpen &&
+        createPortal(
+          <Modal>{children(contextValue.handleCloseModal)}</Modal>,
+          container!,
+        )}
+    </>
+  );
+};
+
+export { ModalContent, Trigger, Main };
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
new file mode 100644
index 00000000..6b99fc38
--- /dev/null
+++ b/src/components/Popover/index.ts
@@ -0,0 +1 @@
+export * as Popover from './Popover';
diff --git a/src/components/index.ts b/src/components/index.ts
index 1c60852e..138bae4a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -35,3 +35,4 @@ export { default as ToTopFloatingButton } from '@/components/ToTopFloatingButton
 export { default as WritableRemindItem } from '@components/RemindItem/WritableRemindItem/WritableRemindItem';
 export { default as ReadOnlyPlan } from '@components/ReadOnlyPlan/ReadOnlyPlan';
 export { default as WrongApproach } from '@components/WrongApproach/WrongApproach';
+export { Popover } from '@components/Popover';