♻️ : #485 - modal 역할별 컴포넌트 분리

src/app/plans/[planId]/hooks/usePlanPage.tsx

@@ -53,8 +53,8 @@ export default function usePlanPage(planId: string) {
     isEditable,
     isMyPlan,
     currentURL,
+    modalContainer,
     handleCopyLink,
     handleDeletePlan,
-    modalContainer,
   };
 }

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>

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 };

src/components/Popover/index.ts

@@ -0,0 +1 @@
+export * as Popover from './Popover';

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';