모달 컴포넌트 구조 개선(issue #226)

src/components/common/modal/Modal.tsx

@@ -1,18 +1,20 @@
-import { useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { CheckCircleIcon } from '@heroicons/react/24/outline';
-import * as S from './Modal.styled';
 import ScrollPreventor from './ScrollPreventor';
-import ModalCloseButton from './ModalCloseButton';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
+import { ModalWrapper } from './ModalWrapper';
 
 interface ModalProps {
-  children: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
 }
 
-const Modal = ({ children, isOpen, onClose }: ModalProps) => {
+const Modal = ({
+  children,
+  isOpen,
+  onClose,
+}: PropsWithChildren<ModalProps>) => {
   const modalRefs = useOutsideClick(() => handleClose());
   const [isFadingOut, setIsFadingOut] = useState(false);
 
@@ -31,18 +33,18 @@ const Modal = ({ children, isOpen, onClose }: ModalProps) => {
 
   return createPortal(
     <ScrollPreventor>
-      <S.ModalContainer
-        $fadeOut={isFadingOut}
-        onAnimationEnd={handleAnimationEnd}
-      >
-        <S.ModalBody ref={modalRefs}>
-          <ModalCloseButton onClose={handleClose} />
-          <S.ModalIconWrapper>
-            <CheckCircleIcon />
-          </S.ModalIconWrapper>
-          <S.ModalContents>{children}</S.ModalContents>
-        </S.ModalBody>
-      </S.ModalContainer>
+      <ModalWrapper isOpen={isOpen} onClose={onClose}>
+        <ModalWrapper.Container
+          $fadeOut={isFadingOut}
+          onAnimationEnd={handleAnimationEnd}
+        >
+          <ModalWrapper.Body ref={modalRefs}>
+            <ModalWrapper.CloseButton onClose={handleClose} />
+            <ModalWrapper.ContentIcon Icon={<CheckCircleIcon />} />
+            <ModalWrapper.Contents>{children}</ModalWrapper.Contents>
+          </ModalWrapper.Body>
+        </ModalWrapper.Container>
+      </ModalWrapper>
     </ScrollPreventor>,
     document.body
   );

src/components/common/modal/ModalBody.tsx

@@ -0,0 +1,8 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import * as S from './Modal.styled';
+
+export const ModalBody = forwardRef<HTMLDivElement, PropsWithChildren>(
+  ({ children }, ref) => {
+    return <S.ModalBody ref={ref}>{children}</S.ModalBody>;
+  }
+);

src/components/common/modal/ModalContainer.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import * as S from './Modal.styled';
+interface ModalContainerProps {
+  $fadeOut: boolean;
+  onAnimationEnd: () => void;
+}
+
+export const ModalContainer = ({
+  $fadeOut,
+  onAnimationEnd,
+  children,
+}: PropsWithChildren<ModalContainerProps>) => {
+  return (
+    <S.ModalContainer $fadeOut={$fadeOut} onAnimationEnd={onAnimationEnd}>
+      {children}
+    </S.ModalContainer>
+  );
+};

src/components/common/modal/ModalContents.tsx

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import * as S from './Modal.styled';
+
+export const ModalContents = ({ children }: PropsWithChildren) => {
+  return <S.ModalContents>{children}</S.ModalContents>;
+};

src/components/common/modal/ModalIconWrapper.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import * as S from './Modal.styled';
+interface ModalContentIconProps {
+  Icon: ReactNode;
+}
+
+export const ModalContentIcon = ({ Icon }: ModalContentIconProps) => {
+  return <S.ModalIconWrapper>{Icon}</S.ModalIconWrapper>;
+};

src/components/common/modal/ModalProvider.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import {
+  ModalContext,
+  type ModalContextProps,
+} from '../../../context/ModalContext';
+
+export const ModalProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{ value: ModalContextProps }>) => {
+  return (
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
+  );
+};

src/components/common/modal/ModalWrapper.tsx

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react';
+import { ModalContextProps } from '../../../context/ModalContext';
+import { ModalProvider } from './ModalProvider';
+import ModalCloseButton from './ModalCloseButton';
+import { ModalContents } from './ModalContents';
+import { ModalContainer } from './ModalContainer';
+import { ModalBody } from './ModalBody';
+import { ModalContentIcon } from './ModalIconWrapper';
+
+export const ModalWrapper = ({
+  isOpen = false,
+  onClose = (event?: React.SyntheticEvent) => {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+  children,
+}: PropsWithChildren<Partial<ModalContextProps>>) => {
+  const modalProps: ModalContextProps = {
+    isOpen,
+    onClose,
+  };
+
+  return <ModalProvider value={modalProps}>{children}</ModalProvider>;
+};
+
+ModalWrapper.CloseButton = ModalCloseButton;
+ModalWrapper.Contents = ModalContents;
+ModalWrapper.Container = ModalContainer;
+ModalWrapper.Body = ModalBody;
+ModalWrapper.ContentIcon = ModalContentIcon;

src/context/ModalContext.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+export interface ModalContextProps {
+  isOpen: boolean;
+  onClose: (event?: React.SyntheticEvent) => void;
+}
+
+const defaultContext: Partial<ModalContextProps> = {
+  isOpen: false,
+  onClose: () => {},
+};
+
+export const ModalContext =
+  createContext<Partial<ModalContextProps>>(defaultContext);

src/mock/mockProjectDetail.json

@@ -9,7 +9,7 @@
   "authorId": 8,
   "views": 1,
   "isBeginner": true,
-  "isDone": true,
+  "isDone": false,
   "recruitmentEndDate": "2025-02-15T00:00:00.000Z",
   "recruitmentStartDate": "2025-01-06T00:00:00.000Z",
   "createdAt": "2025-01-06T07:05:01.000Z",