design: 모달 활성화 시, 스크롤이 안되도록 수정

Author: AAminha

src/components/ModalOverlay.tsx

@@ -1,10 +1,28 @@
+import { useEffect } from 'react';
+
+import { getScrollbarWidth } from '@/utils/getScrollbarWidth';
+
 interface ModalOverlayProps {
   closeOnOutsideClick?: boolean;
-  children: React.ReactElement;
+  children: React.ReactNode;
   onClose?: () => void;
 }
 
 const ModalOverlay = ({ closeOnOutsideClick = false, children, onClose }: ModalOverlayProps) => {
+  useEffect(() => {
+    const scrollbarWidth = getScrollbarWidth();
+    const header = document.querySelector('header');
+
+    document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+    document.body.classList.add('modal-open');
+    if (header) header.classList.add('modal-open');
+
+    return () => {
+      document.documentElement.style.setProperty('--scrollbar-width', '0px');
+      document.body.classList.remove('modal-open');
+    };
+  }, []);
+
   const handleClickOutside = () => {
     if (closeOnOutsideClick && onClose) {
       onClose();

src/styles/utilities.css

@@ -1,8 +1,4 @@
 /* Tailwind에서 기본적으로 제공하지 않는 추가 유틀리티 클래스 정의 */
-/* import congratThemeFrame from '@/assets/images/congrat-theme-frame.png';
-import fieldThemeFrame from '@/assets/images/field-theme-frame.png';
-import skyThemeFrame from '@/assets/images/sky-theme-frame.png';
-import vintageThemeFrame from '@/assets/images/vintage-theme-frame.png'; */
 
 @layer utilities {
   /* 편지지 줄 css */
@@ -63,4 +59,9 @@ import vintageThemeFrame from '@/assets/images/vintage-theme-frame.png'; */
     right: 8%; /* 수평 중앙 정렬 */
     transform: translateX(-50%);
   }
+
+  .modal-open {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width, 0px);
+  }
 }

src/utils/getScrollbarWidth.ts

@@ -0,0 +1,18 @@
+let scrollbarWidth: number | undefined;
+
+export const getScrollbarWidth = () => {
+  if (scrollbarWidth !== undefined) return scrollbarWidth;
+
+  const container = document.createElement('div');
+
+  document.body.appendChild(container);
+  container.style.overflow = 'scroll';
+
+  const inner = document.createElement('div');
+  container.appendChild(inner);
+
+  scrollbarWidth = container.offsetWidth - inner.offsetWidth;
+  document.body.removeChild(container);
+
+  return scrollbarWidth;
+};