Merge pull request #312 from prgrms-web-devcourse-final-project/fix/modal-scroll-lock

[fix] 모달시트 열릴 때 배경 스크롤 방지 처리 추가

Author: kangsuyeong

src/layouts/ModalSheetLayoutTemp.tsx

@@ -1,6 +1,7 @@
 import BackLink from '@/components/modalSheet/BackLink';
 import CardDetailMoreMenu from '@/components/modalSheet/CardDetailMoreMenu';
 import { motion } from 'framer-motion';
+import { useEffect } from 'react';
 
 interface ModalSheetLayoutProps {
   children: React.ReactNode;
@@ -15,6 +16,16 @@ function ModalSheetLayoutTemp({ children, isOwnPost }: ModalSheetLayoutProps) {
     exit: { opacity: 0, y: -200 },
   };
 
+  useEffect(() => {
+    // 모달이 열릴 때
+    document.documentElement.style.overflow = 'hidden';
+
+    return () => {
+      // 모달이 닫힐 때
+      document.documentElement.style.overflow = '';
+    };
+  }, []);
+
   return (
     <motion.div
       className="fixed inset-0 z-50 flex items-center justify-center"
@@ -24,7 +35,7 @@ function ModalSheetLayoutTemp({ children, isOwnPost }: ModalSheetLayoutProps) {
       variants={modalVariants}
       transition={{ duration: 0.3 }}
     >
-      <div className="max-w-[600px] w-full h-screen flex flex-col bg-white rounded-lg card-shadow border border-gray-5 overflow-y-auto scroll">
+      <div className="max-w-[600px] w-full h-screen flex flex-col bg-white rounded-lg card-shadow border border-gray-5">
         {/* 헤더 */}
         <div className="sticky top-0 flex h-[60px] items-center px-4 justify-between bg-white">
           <BackLink />

src/styles/index.css

@@ -4,5 +4,5 @@
 @import '@styles/scrollbar.css';
 
 html {
-  overflow-y: scroll; /* 항상 스크롤바 공간 확보 (윈도우에서 효과적) */
+  scrollbar-gutter: stable;
 }