refactor: modal 오픈시에 scroll 방지

woowacourse-teams · Sep 21, 2023 · 49a3ad4 · 49a3ad4
1 parent aedd7f7
commit 49a3ad4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/frontend/src/components/@common/Modal/index.tsx b/frontend/src/components/@common/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, forwardRef } from 'react';
+import { PropsWithChildren, forwardRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { CloseButton, ModalBox, ModalContent } from './Modal.style';
 
@@ -13,6 +13,14 @@ const Modal = forwardRef<HTMLDialogElement, ModalProps>(function Modal(
 ) {
   const root = document.getElementById('modal-root') ?? document.body;
 
+  useEffect(() => {
+    if (!isOpen) {
+      document.body.style.position = 'relative';
+      return;
+    }
+    document.body.style.position = 'fixed';
+  }, [isOpen]);
+
   return createPortal(
     isOpen && (
       <ModalBox aria-modal="true" ref={ref}>

diff --git a/frontend/src/style/Global.style.ts b/frontend/src/style/Global.style.ts
@@ -17,6 +17,7 @@ export const GlobalStyle = createGlobalStyle`
   html,
   body {
     scrollbar-width: none;
+    width: 100%;
     font-size: 62.5%;
   }