From 41ab6c73a61dbb12016b01371e4b65a800d2d80b Mon Sep 17 00:00:00 2001
From: Minsu Kim <alstn2468_@naver.com>
Date: Sun, 4 Feb 2024 02:51:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20useBodyScrollLock=20=ED=9B=85=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SettlementDialogContent/index.tsx  |  4 ++++
 apps/admin/src/hooks/useBodyScrollLock.ts             | 11 +++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 apps/admin/src/hooks/useBodyScrollLock.ts

diff --git a/apps/admin/src/components/SettlementDialogContent/index.tsx b/apps/admin/src/components/SettlementDialogContent/index.tsx
index aba806d7..10c0cac7 100644
--- 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
new file mode 100644
index 00000000..1443b747
--- /dev/null
+++ 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;
+    };
+  }, []);
+};