refactor: reconstruct modal directory structure

- move ModalPortal and ModalWindow to @common
- move provider to hook
- combine ModalWindow and ModalPortal in ModalProvider

Refs: #649 (comment)

frontend/.storybook/preview.js

@@ -3,10 +3,10 @@ import axios from "axios";
 import { initializeWorker, mswDecorator } from "msw-storybook-addon";
 import "../src/api/api";
 import "../src/App.css";
+import { ModalProvider } from "../src/hooks/useModalContext";
 import { RecruitmentContext } from "../src/hooks/useRecruitmentContext";
 import { UserInfoContext } from "../src/hooks/useUserInfoContext";
 import { recruitmentDummy, userInfoDummy } from "../src/mock/dummy";
-import ModalProvider from "../src/provider/ModalProvider";
 import { recruitmentFilter } from "../src/provider/RecruitmentProvider";
 import TokenProvider from "../src/provider/TokenProvider";
 

frontend/src/App.js

@@ -22,7 +22,7 @@ import SignUp from "./pages/SignUp/SignUp";
 import RecruitmentProvider from "./provider/RecruitmentProvider";
 import TokenProvider from "./provider/TokenProvider";
 import UserInfoProvider from "./provider/UserInfoProvider";
-import ModalProvider from "./provider/ModalProvider";
+import { ModalProvider } from "./hooks/useModalContext";
 
 const App = () => {
   return (

frontend/src/components/Modal/ModalPortal/ModalPortal.tsx → frontend/src/components/@common/ModalPortal/ModalPortal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { ModalContextValue } from "../../../provider/ModalProvider";
+import { ModalContextValue } from "../../../hooks/useModalContext";
 import styles from "./ModalPortal.module.css";
 
 type ModalPortalProps = {
@@ -35,6 +35,7 @@ const ModalPortal = ({ children, closeModal }: ModalPortalProps) => {
         }}
       >
         <div className={styles["dimmer-box"]} onClick={closeModal} />
+
         {children}
       </div>,
       ref.current

frontend/src/components/Modal/ModalWindow/ModalWindow.stories.tsx → frontend/src/components/@common/ModalWindow/ModalWindow.stories.tsx

@@ -1,6 +1,4 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import useModalContext from "../../../hooks/useModalContext";
-import Button, { BUTTON_VARIANT } from "../../@common/Button/Button";
 import ModalWindow from "./ModalWindow";
 
 export default {
@@ -9,29 +7,14 @@ export default {
 } as ComponentMeta<typeof ModalWindow>;
 
 const Template: ComponentStory<typeof ModalWindow> = (args) => {
-  const { Modal, openModal } = useModalContext();
-
-  return (
-    <div style={{ height: "200vh", backgroundColor: "white", padding: "1rem" }}>
-      <Button
-        type="button"
-        variant={BUTTON_VARIANT.CONTAINED}
-        cancel={false}
-        className
-        onClick={openModal}
-      >
-        open modal
-      </Button>
-      <Modal>
-        <ModalWindow {...args} />
-      </Modal>
-    </div>
-  );
+  return <ModalWindow {...args} />;
 };
 
 export const Default = Template.bind({});
 
-Default.args = {};
+Default.args = {
+  children: "modal text",
+};
 
 export const LongContent = Template.bind({});
 

frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.module.css → frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  overflow: hidden;
 }
 
 .title {

frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.stories.tsx → frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.stories.tsx

@@ -1,14 +1,14 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import useModalContext from "../../../hooks/useModalContext";
-import Button, { BUTTON_VARIANT } from "../../@common/Button/Button";
-import ApplicationPreviewModalWindow from "./ApplicationPreviewModalWindow";
+import useModalContext from "../../hooks/useModalContext";
+import Button, { BUTTON_VARIANT } from "../@common/Button/Button";
+import ApplicationPreviewModal from "./ApplicationPreviewModal";
 
 export default {
-  title: "components/ApplicationPreviewModalWindow",
-  component: ApplicationPreviewModalWindow,
-} as ComponentMeta<typeof ApplicationPreviewModalWindow>;
+  title: "components/ApplicationPreviewModal",
+  component: ApplicationPreviewModal,
+} as ComponentMeta<typeof ApplicationPreviewModal>;
 
-const Template: ComponentStory<typeof ApplicationPreviewModalWindow> = (args) => {
+const Template: ComponentStory<typeof ApplicationPreviewModal> = (args) => {
   const { Modal, openModal } = useModalContext();
 
   return (
@@ -23,7 +23,7 @@ const Template: ComponentStory<typeof ApplicationPreviewModalWindow> = (args) =>
         open modal
       </Button>
       <Modal>
-        <ApplicationPreviewModalWindow {...args} />
+        <ApplicationPreviewModal {...args} />
       </Modal>
     </div>
   );

frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.tsx → frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.tsx

@@ -1,11 +1,10 @@
 import { ChangeEvent, useState } from "react";
-import useModalContext from "../../../hooks/useModalContext";
-import Button, { BUTTON_VARIANT } from "../../@common/Button/Button";
-import styles from "./ApplicationPreviewModalWindow.module.css";
-import ModalWindow from "../ModalWindow/ModalWindow";
-import CheckBox from "../../form/CheckBox/CheckBox";
-import { RecruitmentItem } from "../../../../types/domains/recruitments";
-import { Answer, ApplicationForm } from "../../../../types/domains/applicationForms";
+import useModalContext from "../../hooks/useModalContext";
+import Button, { BUTTON_VARIANT } from "../@common/Button/Button";
+import styles from "./ApplicationPreviewModal.module.css";
+import CheckBox from "../form/CheckBox/CheckBox";
+import { RecruitmentItem } from "../../../types/domains/recruitments";
+import { Answer, ApplicationForm } from "../../../types/domains/applicationForms";
 
 type ApplicationPreviewModalWindowProps = {
   recruitmentItems: RecruitmentItem[];
@@ -14,7 +13,7 @@ type ApplicationPreviewModalWindowProps = {
   onClickConfirmButton: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-const ApplicationPreviewModalWindow = ({
+const ApplicationPreviewModal = ({
   recruitmentItems,
   answers,
   referenceUrl,
@@ -33,7 +32,7 @@ const ApplicationPreviewModalWindow = ({
   };
 
   return (
-    <ModalWindow className={styles.box}>
+    <div className={styles.box}>
       <h2 id="dialogTitle" className={styles.title}>
         지원서 미리보기
       </h2>
@@ -97,8 +96,8 @@ const ApplicationPreviewModalWindow = ({
           제출
         </Button>
       </div>
-    </ModalWindow>
+    </div>
   );
 };
 
-export default ApplicationPreviewModalWindow;
+export default ApplicationPreviewModal;

frontend/src/hooks/useModalContext.tsx

@@ -1,8 +1,49 @@
-import { useContext, createContext } from "react";
+import React, { useState, useContext, createContext } from "react";
+import ModalWindow from "../components/@common/ModalWindow/ModalWindow";
+import ModalPortal from "../components/@common/ModalPortal/ModalPortal";
 import { ERROR_MESSAGE } from "../constants/messages";
-import { ModalContextValue } from "../provider/ModalProvider";
 
-export const ModalContext = createContext<ModalContextValue | null>(null);
+export type ModalContextValue = {
+  Modal: (props: { children: NonNullable<React.ReactNode> }) => JSX.Element | null;
+  openModal: () => void;
+  closeModal: () => void;
+};
+
+type ModalProviderProps = { children: React.ReactNode };
+
+const ModalContext = createContext<ModalContextValue | null>(null);
+
+export const ModalProvider = ({ children }: ModalProviderProps) => {
+  const [isModalOpened, setIsModalOpened] = useState(false);
+
+  const openModal: ModalContextValue["openModal"] = () => {
+    document.body.style.overflow = "hidden";
+    setIsModalOpened(true);
+  };
+
+  const closeModal: ModalContextValue["closeModal"] = () => {
+    document.body.style.overflow = "auto";
+    setIsModalOpened(false);
+  };
+
+  const Modal: ModalContextValue["Modal"] = ({ children, ...props }) => {
+    if (isModalOpened) {
+      return (
+        <ModalPortal closeModal={closeModal} {...props}>
+          <ModalWindow>{children}</ModalWindow>
+        </ModalPortal>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <ModalContext.Provider value={{ Modal, openModal, closeModal }}>
+      {children}
+    </ModalContext.Provider>
+  );
+};
 
 const useModalContext = () => {
   const modalContext = useContext(ModalContext);

frontend/src/pages/ApplicationRegister/ApplicationRegister.js

@@ -9,7 +9,7 @@ import MessageTextarea from "../../components/@common/MessageTextarea/MessageTex
 import MessageTextInput from "../../components/@common/MessageTextInput/MessageTextInput";
 import CheckBox from "../../components/form/CheckBox/CheckBox";
 import Form from "../../components/form/Form/Form";
-import ApplicationPreviewModalWindow from "../../components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow";
+import ApplicationPreviewModal from "../../components/ApplicationPreviewModal/ApplicationPreviewModal";
 import RecruitmentItem from "../../components/RecruitmentItem/RecruitmentItem";
 import { FORM } from "../../constants/form";
 import { SUCCESS_MESSAGE } from "../../constants/messages";
@@ -198,7 +198,7 @@ const ApplicationRegister = () => {
         </Form>
       </Container>
       <Modal>
-        <ApplicationPreviewModalWindow
+        <ApplicationPreviewModal
           recruitmentItems={recruitmentItems}
           answers={form[APPLICATION_REGISTER_FORM_NAME.ANSWERS]}
           referenceUrl={form[APPLICATION_REGISTER_FORM_NAME.REFERENCE_URL]}