feat: useBodyScrollLock 훅 추가

Nexters · Feb 3, 2024 · 41ab6c7 · 41ab6c7
1 parent 6b76701
commit 41ab6c7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/apps/admin/src/components/SettlementDialogContent/index.tsx b/apps/admin/src/components/SettlementDialogContent/index.tsx
@@ -4,6 +4,7 @@ import { bankItems } from '~/constants/bankItems';
 
 import Styled from './SettlementDialogContent.styles';
 import { useState } from 'react';
+import { useBodyScrollLock } from '~/hooks/useBodyScrollLock';
 
 const titles = [
   '은행을 선택해 주세요.',
@@ -23,6 +24,9 @@ const SettlementDialogContent = ({ onClose }: Props) => {
   const [accountHolder, setAccountHolder] = useState<string>('');
   const [accountHolderError, setAccountHolderError] = useState<string | undefined>(undefined);
   const [accountNumberError, setAccountNumberError] = useState<string | undefined>(undefined);
+
+  useBodyScrollLock();
+
   return (
     <Styled.Container>
       <Styled.Title>{titles[currentStepIndex]}</Styled.Title>

diff --git a/apps/admin/src/hooks/useBodyScrollLock.ts b/apps/admin/src/hooks/useBodyScrollLock.ts
@@ -0,0 +1,11 @@
+import { useLayoutEffect } from 'react';
+
+export const useBodyScrollLock = () => {
+  useLayoutEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+};