Merge pull request #211 from DevKor-github/fix/modal-scroll

fix: Modal 열렸을 때 스크롤 방지
DevKor-github · Sep 29, 2024 · efd8976 · efd8976
2 parents d6d5de6 + a2c9e6b
commit efd8976
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/components/RankModal/RankModal.tsx b/components/RankModal/RankModal.tsx
@@ -1,7 +1,9 @@
 'use client';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+
 import { Flex } from '@/libs/design-system/flex';
 import { Icon } from '@/libs/design-system/icons';
-import styled from 'styled-components';
 import Backdrop from '../Backdrop';
 import { useRankShare } from './useRankShare';
 import RankCard from './RankCard';
@@ -13,6 +15,14 @@ interface ShareModalProps {
 
 export function RankModal({ isModalOpen = true, onClose }: ShareModalProps) {
   const { imgSrc, rankInfo, isFetchLoading, imageRef, shareRef, shareImage } = useRankShare();
+
+  useEffect(() => {
+    document.body.style.cssText = `overflow: hidden;`;
+    return () => {
+      document.body.style.cssText = `overflow: auto;`;
+    };
+  }, []);
+
   return (
     <>
       {isModalOpen && !isFetchLoading && rankInfo && imgSrc && (

diff --git a/components/ShareModal/ShareModal.tsx b/components/ShareModal/ShareModal.tsx
@@ -1,8 +1,10 @@
 'use client';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+
 import { Flex } from '@/libs/design-system/flex';
 import { Icon } from '@/libs/design-system/icons';
 import PredictionCard from './PredictionCard';
-import styled from 'styled-components';
 import Backdrop from '../Backdrop';
 import { useCardShare } from './useCardShare';
 
@@ -15,6 +17,13 @@ export function ShareModal({ isModalOpen = true, onClose }: ShareModalProps) {
   const { shareImage, shareRef, imageRef, profile, scoreData, isLoading, isFetchLoading, imgSrc, predictionResult } =
     useCardShare();
 
+  useEffect(() => {
+    document.body.style.cssText = `overflow: hidden;`;
+    return () => {
+      document.body.style.cssText = `overflow: auto;`;
+    };
+  }, []);
+
   return (
     <>
       {isModalOpen && scoreData && profile && !isFetchLoading && predictionResult && imgSrc && (