(#0) 모달 오픈 시 스크롤 방지

src/core/components/Modal/ModalPopUp/index.tsx

@@ -1,24 +1,29 @@
 import clsx from "clsx";
 import { PropsWithChildren, forwardRef } from "react";
 
+import { useBlockScrollingEffect } from "@/hooks/effects/useBlockScrollingEffect";
 import Section from "../../Section";
 import ModalBase from "../ModalBase";
 import { ModalPopUpProps } from "./types";
 
 const ModalPopUp = forwardRef((
     {
+      isOpen,
       children,
       ...props
     }: PropsWithChildren<ModalPopUpProps>,
     ref: React.Ref<HTMLDialogElement>,
   ) => {
   const { target, className, ...rest } = props;
 
+  useBlockScrollingEffect(isOpen);
+
   return (
     <ModalBase
       target = {target ?? "modal"}
       ref = {ref}
       variants = "modal"
+      isOpen = {isOpen}
       {...rest}
     >
       <Section

src/hooks/effects/useBlockScrollingEffect.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+export const useBlockScrollingEffect = (deps: boolean) => {
+  useEffect(() => {
+    if (deps) {
+      document.body.classList.add("overflow-hidden");
+    } else {
+      document.body.classList.remove("overflow-hidden");
+    }
+
+    return () => document.body.classList.remove("overflow-hidden");
+  }, [deps]);
+};

src/hooks/useEffectClickOutSide.ts → src/hooks/effects/useClickOutSideEffect.ts

@@ -1,6 +1,6 @@
 import { RefObject, useEffect } from "react";
 
-const useEffectClickOutSide = (ref: RefObject<Element>, onClose?: () => void) => {
+const useClickOutSideEffect = (ref: RefObject<Element>, onClose?: () => void) => {
   useEffect(() => {
     const onClickOutSide = (e: MouseEvent) => {
       if (!ref.current || ref.current.contains(e.target as Node)) return;
@@ -14,4 +14,4 @@ const useEffectClickOutSide = (ref: RefObject<Element>, onClose?: () => void) =>
   }, [ref.current]);
 };
 
-export default useEffectClickOutSide;
+export default useClickOutSideEffect;

src/hooks/useClickOutSide.ts

@@ -1,10 +1,10 @@
 import { useRef } from "react";
-import useEffectClickOutSide from "./useEffectClickOutSide";
+import useClickOutSideEffect from "./effects/useClickOutSideEffect";
 
 const useClickOutside = <T extends Element>(onClose?: () => void) => {
   const contentRef = useRef<T | null>(null);
 
-  useEffectClickOutSide(contentRef, onClose);
+  useClickOutSideEffect(contentRef, onClose);
 
   return { contentRef };
 };