From 25dd6396f338abab11859ad331c9d4bb942c9208 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?=
 =?UTF-8?q?=E1=86=AB?= <rhymint@gmail.com>
Date: Wed, 25 Sep 2024 16:54:52 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20NumberKeyboardBottomSheet=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=EC=9D=84=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=ED=96=88?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C,=20=EB=92=B7=20=EC=98=81=EC=97=AD?=
 =?UTF-8?q?=EC=9D=B4=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=90=98=EB=8D=98=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NumberKeyboardBottomSheet.tsx             |  9 +++++-
 .../useNumberKeyboardBottomSheet.ts           | 32 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Design/components/NumberKeyboard/useNumberKeyboardBottomSheet.ts

diff --git a/client/src/components/Design/components/NumberKeyboard/NumberKeyboardBottomSheet.tsx b/client/src/components/Design/components/NumberKeyboard/NumberKeyboardBottomSheet.tsx
index 45b51ba8f..404a53d2b 100644
--- a/client/src/components/Design/components/NumberKeyboard/NumberKeyboardBottomSheet.tsx
+++ b/client/src/components/Design/components/NumberKeyboard/NumberKeyboardBottomSheet.tsx
@@ -1,21 +1,26 @@
 import {css} from '@emotion/react';
 import {createPortal} from 'react-dom';
+import {useEffect, useRef} from 'react';
 
 import {useTheme} from '@components/Design/theme/HDesignProvider';
 
 import FixedButton from '../FixedButton/FixedButton';
 
 import NumberKeyboard, {NumberKeyboardProps} from './NumberKeyboard';
+import useNumberKeyboardBottomSheet from './useNumberKeyboardBottomSheet';
 
 interface Props extends NumberKeyboardProps {
-  isOpened?: boolean;
+  isOpened: boolean;
   onClose: () => void;
 }
 
 const NumberKeyboardBottomSheet = ({isOpened, onClose, ...props}: Props) => {
   const {theme} = useTheme();
+  const {bottomSheetRef} = useNumberKeyboardBottomSheet({isOpened});
+
   return createPortal(
     <div
+      ref={bottomSheetRef}
       css={css`
         position: fixed;
         padding-bottom: 6.25rem;
@@ -26,6 +31,8 @@ const NumberKeyboardBottomSheet = ({isOpened, onClose, ...props}: Props) => {
         gap: 1rem;
         bottom: 0;
         background-color: ${theme.colors.white};
+        z-index: 20;
+        touch-action: none;
 
         transform: ${isOpened ? 'translate3d(0, 0, 0)' : 'translate3d(0, 100%, 0)'};
         transition: 0.2s ease-in-out;
diff --git a/client/src/components/Design/components/NumberKeyboard/useNumberKeyboardBottomSheet.ts b/client/src/components/Design/components/NumberKeyboard/useNumberKeyboardBottomSheet.ts
new file mode 100644
index 000000000..28e5cc6a3
--- /dev/null
+++ b/client/src/components/Design/components/NumberKeyboard/useNumberKeyboardBottomSheet.ts
@@ -0,0 +1,32 @@
+import {useEffect, useRef} from 'react';
+
+interface Props {
+  isOpened: boolean;
+}
+
+const useNumberKeyboardBottomSheet = ({isOpened}: Props) => {
+  const bottomSheetRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const bottomSheet = bottomSheetRef.current;
+    if (!bottomSheet) return;
+
+    const preventScroll = (e: TouchEvent) => {
+      if (bottomSheet.contains(e.target as Node)) {
+        e.preventDefault();
+      }
+    };
+
+    if (isOpened) {
+      document.addEventListener('touchmove', preventScroll, {passive: false});
+    }
+
+    return () => {
+      document.removeEventListener('touchmove', preventScroll);
+    };
+  }, [isOpened]);
+
+  return {bottomSheetRef};
+};
+
+export default useNumberKeyboardBottomSheet;