fix: #11 바텀시트 z-index, 훅 ref 옵셔널 체이닝

depromeet · Jul 26, 2024 · 6e66378 · 6e66378
1 parent fca84dc
commit 6e66378
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/component/BottomSheet/BottomSheet.tsx b/src/component/BottomSheet/BottomSheet.tsx
@@ -34,6 +34,7 @@ export function BottomSheet({ title, contents, handler = false, sheetHeight = 34
           transform: translate3d(-50%, -50%, 0);
           background-color: ${bottomSheetState ? `rgba(24, 24, 24, 60%)` : `transparent`};
           transition: 0.4s all;
+          z-index: 10001;
 
           ${!bottomSheetState &&
           css`

diff --git a/src/hooks/useBottomSheet.ts b/src/hooks/useBottomSheet.ts
@@ -96,7 +96,7 @@ export const useSetBottomSheet = ({ handler, sheetHeight }: Pick<BottomSheetType
         if (nextSheetY >= MAX_Y) nextSheetY = MAX_Y;
         if (Math.abs(nextSheetY - MAX_Y) > (sheetHeight as number)) return;
 
-        sheet.current!.style.setProperty("transform", `translate3d(-50%, ${nextSheetY - MAX_Y}px, 0)`);
+        sheet.current?.style.setProperty("transform", `translate3d(-50%, ${nextSheetY - MAX_Y}px, 0)`);
       } else {
         document.body.style.overflowY = "hidden";
       }
@@ -113,12 +113,12 @@ export const useSetBottomSheet = ({ handler, sheetHeight }: Pick<BottomSheetType
           if (method === "touch") {
             if (content.current!.scrollTop !== 0 && content.current!.contains(<Node>e.target)) return;
           }
-          sheet.current!.style.setProperty("transform", "translate3d(-50%, 0, 0)");
+          sheet.current?.style.setProperty("transform", "translate3d(-50%, 0, 0)");
           closeBottomSheet();
         }
 
         if (touchMove.movingDirection === "up") {
-          sheet.current!.style.setProperty("transform", `translate3d(-50%, -${sheetHeight}px, 0)`);
+          sheet.current?.style.setProperty("transform", `translate3d(-50%, -${sheetHeight}px, 0)`);
         }
       }
       metrics.current = {
@@ -146,26 +146,26 @@ export const useSetBottomSheet = ({ handler, sheetHeight }: Pick<BottomSheetType
     const handleTouchMove = (e: TouchEvent) => handleMove(e, "touch");
     const handleTouchEnd = (e: TouchEvent) => handleEnd(e, "touch");
 
-    sheet.current!.addEventListener("mousedown", handleMouseDown);
-    sheet.current!.addEventListener("touchstart", handleTouchStart);
-    sheet.current!.addEventListener("touchmove", handleTouchMove);
-    sheet.current!.addEventListener("touchend", handleTouchEnd);
+    sheet.current?.addEventListener("mousedown", handleMouseDown);
+    sheet.current?.addEventListener("touchstart", handleTouchStart);
+    sheet.current?.addEventListener("touchmove", handleTouchMove);
+    sheet.current?.addEventListener("touchend", handleTouchEnd);
 
     return () => {
-      sheet.current!.removeEventListener("mousedown", handleMouseDown);
-      sheet.current!.removeEventListener("touchstart", handleTouchStart);
-      sheet.current!.removeEventListener("touchmove", handleTouchMove);
-      sheet.current!.removeEventListener("touchend", handleTouchEnd);
+      sheet.current?.removeEventListener("mousedown", handleMouseDown);
+      sheet.current?.removeEventListener("touchstart", handleTouchStart);
+      sheet.current?.removeEventListener("touchmove", handleTouchMove);
+      sheet.current?.removeEventListener("touchend", handleTouchEnd);
     };
   }, []);
 
   useEffect(() => {
     const handleTouchStart = () => {
       metrics.current.isContentAreaTouched = true;
     };
-    content.current!.addEventListener("touchstart", handleTouchStart);
+    content.current?.addEventListener("touchstart", handleTouchStart);
 
-    return () => content.current!.removeEventListener("touchstart", handleTouchStart);
+    return () => content.current?.removeEventListener("touchstart", handleTouchStart);
   }, []);
 
   useEffect(() => {