diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index 165021423..4870be163 100644 --- a/frontend/.storybook/preview.js +++ b/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"; diff --git a/frontend/src/App.js b/frontend/src/App.js index eb21c5478..b678f6859 100644 --- a/frontend/src/App.js +++ b/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 ( diff --git a/frontend/src/components/Modal/ModalPortal/ModalPortal.module.css b/frontend/src/components/@common/ModalPortal/ModalPortal.module.css similarity index 100% rename from frontend/src/components/Modal/ModalPortal/ModalPortal.module.css rename to frontend/src/components/@common/ModalPortal/ModalPortal.module.css diff --git a/frontend/src/components/Modal/ModalPortal/ModalPortal.tsx b/frontend/src/components/@common/ModalPortal/ModalPortal.tsx similarity index 94% rename from frontend/src/components/Modal/ModalPortal/ModalPortal.tsx rename to frontend/src/components/@common/ModalPortal/ModalPortal.tsx index ad4fa4ff0..4b0f96ae1 100644 --- a/frontend/src/components/Modal/ModalPortal/ModalPortal.tsx +++ b/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) => { }} >
+ {children}
, ref.current diff --git a/frontend/src/components/Modal/ModalWindow/ModalWindow.module.css b/frontend/src/components/@common/ModalWindow/ModalWindow.module.css similarity index 100% rename from frontend/src/components/Modal/ModalWindow/ModalWindow.module.css rename to frontend/src/components/@common/ModalWindow/ModalWindow.module.css diff --git a/frontend/src/components/Modal/ModalWindow/ModalWindow.stories.tsx b/frontend/src/components/@common/ModalWindow/ModalWindow.stories.tsx similarity index 80% rename from frontend/src/components/Modal/ModalWindow/ModalWindow.stories.tsx rename to frontend/src/components/@common/ModalWindow/ModalWindow.stories.tsx index 53f3af879..3ef98f2b5 100644 --- a/frontend/src/components/Modal/ModalWindow/ModalWindow.stories.tsx +++ b/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; const Template: ComponentStory = (args) => { - const { Modal, openModal } = useModalContext(); - - return ( -
- - - - -
- ); + return ; }; export const Default = Template.bind({}); -Default.args = {}; +Default.args = { + children: "modal text", +}; export const LongContent = Template.bind({}); diff --git a/frontend/src/components/Modal/ModalWindow/ModalWindow.tsx b/frontend/src/components/@common/ModalWindow/ModalWindow.tsx similarity index 100% rename from frontend/src/components/Modal/ModalWindow/ModalWindow.tsx rename to frontend/src/components/@common/ModalWindow/ModalWindow.tsx diff --git a/frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.module.css b/frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.module.css similarity index 97% rename from frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.module.css rename to frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.module.css index 43fc37b07..3d881559d 100644 --- a/frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.module.css +++ b/frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.module.css @@ -2,6 +2,7 @@ display: flex; flex-direction: column; gap: 1.5rem; + overflow: hidden; } .title { diff --git a/frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.stories.tsx b/frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.stories.tsx similarity index 93% rename from frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.stories.tsx rename to frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.stories.tsx index 540ac6329..fbfbdddf5 100644 --- a/frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.stories.tsx +++ b/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; + title: "components/ApplicationPreviewModal", + component: ApplicationPreviewModal, +} as ComponentMeta; -const Template: ComponentStory = (args) => { +const Template: ComponentStory = (args) => { const { Modal, openModal } = useModalContext(); return ( @@ -23,7 +23,7 @@ const Template: ComponentStory = (args) => open modal - + ); diff --git a/frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.tsx b/frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.tsx similarity index 82% rename from frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.tsx rename to frontend/src/components/ApplicationPreviewModal/ApplicationPreviewModal.tsx index e1de11a5b..1bdf83d1a 100644 --- a/frontend/src/components/Modal/ApplicationPreviewModalWindow/ApplicationPreviewModalWindow.tsx +++ b/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; }; -const ApplicationPreviewModalWindow = ({ +const ApplicationPreviewModal = ({ recruitmentItems, answers, referenceUrl, @@ -33,7 +32,7 @@ const ApplicationPreviewModalWindow = ({ }; return ( - +

지원서 미리보기

@@ -97,8 +96,8 @@ const ApplicationPreviewModalWindow = ({ 제출
- + ); }; -export default ApplicationPreviewModalWindow; +export default ApplicationPreviewModal; diff --git a/frontend/src/hooks/useModalContext.tsx b/frontend/src/hooks/useModalContext.tsx index 3e19e034b..a2de8eedb 100644 --- a/frontend/src/hooks/useModalContext.tsx +++ b/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(null); +export type ModalContextValue = { + Modal: (props: { children: NonNullable }) => JSX.Element | null; + openModal: () => void; + closeModal: () => void; +}; + +type ModalProviderProps = { children: React.ReactNode }; + +const ModalContext = createContext(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 ( + + {children} + + ); + } + + return null; + }; + + return ( + + {children} + + ); +}; const useModalContext = () => { const modalContext = useContext(ModalContext); diff --git a/frontend/src/pages/ApplicationRegister/ApplicationRegister.js b/frontend/src/pages/ApplicationRegister/ApplicationRegister.js index b49438b16..17f04d8b1 100644 --- a/frontend/src/pages/ApplicationRegister/ApplicationRegister.js +++ b/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 = () => { - }) => JSX.Element | null; - openModal: () => void; - closeModal: () => void; -}; - -type ModalProviderProps = { children: React.ReactNode }; - -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"] = (props) => { - if (isModalOpened) { - return ; - } - - return null; - }; - - return ( - - {children} - - ); -}; - -export default ModalProvider;