refactor: initialize modal root in modal portal

- create modal root at initial rendering - set ref initial value as null Refs: #649 (comment) #649 (comment)
woowacourse · Oct 10, 2022 · e53b044 · e53b044
1 parent 9fd2363
commit e53b044
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 52 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -26,57 +26,54 @@ import ModalProvider from "./provider/ModalProvider";
 
 const App = () => {
   return (
-    <>
-      <TokenProvider>
-        <RecruitmentProvider>
-          <ModalProvider>
-            <BrowserRouter>
-              <Header />
-              <main className="main">
-                <ScrollToTop>
-                  <Routes>
-                    <Route path={PATH.HOME} element={<Recruits />} />
-                    <Route path={PATH.RECRUITS} element={<Recruits />} />
-                    <Route path={PATH.SIGN_UP} element={<SignUp />} />
-                    <Route path={PATH.LOGIN} element={<Login />} />
-                    <Route path={PATH.FIND_PASSWORD} element={<PasswordFind />} />
-                    <Route path={PATH.FIND_PASSWORD_RESULT} element={<PasswordFindResult />} />
-                    <Route element={<PrivateRoute />}>
-                      <Route path={PATH.APPLICATION_FORM} element={<ApplicationRegister />} />
-                      <Route path={PATH.EDIT_PASSWORD} element={<PasswordEdit />} />
-                      <Route path={PATH.MY_APPLICATION} element={<MyApplication />} />
-                      <Route path={PATH.ASSIGNMENT} element={<AssignmentSubmit />} />
-                    </Route>
+    <TokenProvider>
+      <RecruitmentProvider>
+        <ModalProvider>
+          <BrowserRouter>
+            <Header />
+            <main className="main">
+              <ScrollToTop>
+                <Routes>
+                  <Route path={PATH.HOME} element={<Recruits />} />
+                  <Route path={PATH.RECRUITS} element={<Recruits />} />
+                  <Route path={PATH.SIGN_UP} element={<SignUp />} />
+                  <Route path={PATH.LOGIN} element={<Login />} />
+                  <Route path={PATH.FIND_PASSWORD} element={<PasswordFind />} />
+                  <Route path={PATH.FIND_PASSWORD_RESULT} element={<PasswordFindResult />} />
+                  <Route element={<PrivateRoute />}>
+                    <Route path={PATH.APPLICATION_FORM} element={<ApplicationRegister />} />
+                    <Route path={PATH.EDIT_PASSWORD} element={<PasswordEdit />} />
+                    <Route path={PATH.MY_APPLICATION} element={<MyApplication />} />
+                    <Route path={PATH.ASSIGNMENT} element={<AssignmentSubmit />} />
+                  </Route>
 
-                    <Route element={<PrivateRoute />}>
-                      <Route
-                        path={PATH.MY_PAGE}
-                        element={
-                          <UserInfoProvider>
-                            <MyPage />
-                          </UserInfoProvider>
-                        }
-                      />
-                      <Route
-                        path={PATH.EDIT_MY_PAGE}
-                        element={
-                          <UserInfoProvider>
-                            <MyPageEdit />
-                          </UserInfoProvider>
-                        }
-                      />
-                    </Route>
-                  </Routes>
-                </ScrollToTop>
-              </main>
-              <Footer />
-              <InquiryFloatingButton />
-            </BrowserRouter>
-          </ModalProvider>
-        </RecruitmentProvider>
-      </TokenProvider>
-      <div id="modal-root" />
-    </>
+                  <Route element={<PrivateRoute />}>
+                    <Route
+                      path={PATH.MY_PAGE}
+                      element={
+                        <UserInfoProvider>
+                          <MyPage />
+                        </UserInfoProvider>
+                      }
+                    />
+                    <Route
+                      path={PATH.EDIT_MY_PAGE}
+                      element={
+                        <UserInfoProvider>
+                          <MyPageEdit />
+                        </UserInfoProvider>
+                      }
+                    />
+                  </Route>
+                </Routes>
+              </ScrollToTop>
+            </main>
+            <Footer />
+            <InquiryFloatingButton />
+          </BrowserRouter>
+        </ModalProvider>
+      </RecruitmentProvider>
+    </TokenProvider>
   );
 };
 

diff --git a/frontend/src/components/Modal/ModalPortal/ModalPortal.tsx b/frontend/src/components/Modal/ModalPortal/ModalPortal.tsx
@@ -8,13 +8,20 @@ type ModalPortalProps = React.PropsWithChildren<{
 }>;
 
 const ModalPortal = ({ children, closeModal }: ModalPortalProps) => {
-  const ref = useRef<Element | null>();
+  const ref = useRef<Element | null>(null);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
 
-    const modalRoot = document.getElementById("modal-root");
+    let modalRoot = document.getElementById("modal-root");
+
+    if (!modalRoot) {
+      modalRoot = document.createElement("div");
+      modalRoot.id = "modal-root";
+      document.body.appendChild(modalRoot);
+    }
+
     ref.current = modalRoot;
   }, []);