모달에서 ScrollSnapContainer의 스와이프가 동작하는 오류 수정

client/src/components/CafeDetailBottomSheet.tsx

@@ -2,6 +2,7 @@ import { Suspense, useEffect } from 'react';
 import { BsBoxArrowUpRight, BsGeoAlt, BsX } from 'react-icons/bs';
 import { styled } from 'styled-components';
 import useCafeMenus from '../hooks/useCafeMenus';
+import useScrollSnapGuard from '../hooks/useScrollSnapGuard';
 import type { Theme } from '../styles/theme';
 import type { Cafe } from '../types';
 import CafeMenuMiniList from './CafeMenuMiniList';
@@ -14,6 +15,7 @@ type CafeDetailBottomSheetProps = {
 
 const CafeDetailBottomSheet = (props: CafeDetailBottomSheetProps) => {
   const { cafe, onClose } = props;
+  const scrollSnapGuardHandlers = useScrollSnapGuard();
 
   useEffect(() => {
     document.addEventListener('click', onClose);
@@ -26,7 +28,7 @@ const CafeDetailBottomSheet = (props: CafeDetailBottomSheetProps) => {
   };
 
   return (
-    <Container onClick={handlePreventClickPropagation} role="dialog" aria-modal="true">
+    <Container onClick={handlePreventClickPropagation} role="dialog" aria-modal="true" {...scrollSnapGuardHandlers}>
       <CloseButton>
         <CloseIcon onClick={onClose} />
       </CloseButton>

client/src/components/CafeMenuBottomSheet.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { BsX } from 'react-icons/bs';
 import { styled } from 'styled-components';
 import useCafeMenus from '../hooks/useCafeMenus';
+import useScrollSnapGuard from '../hooks/useScrollSnapGuard';
 import type { Theme } from '../styles/theme';
 import type { Cafe } from '../types';
 import Resource from '../utils/Resource';
@@ -20,6 +21,7 @@ const CafeMenuBottomSheet = (props: CafeMenuBottomSheetProps) => {
     data: { menus, menuBoards },
   } = useCafeMenus(cafe.id);
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+  const scrollSnapGuardHandlers = useScrollSnapGuard();
 
   useEffect(() => {
     document.addEventListener('click', onClose);
@@ -37,7 +39,7 @@ const CafeMenuBottomSheet = (props: CafeMenuBottomSheetProps) => {
   return (
     <>
       {createPortal(
-        <Container onClick={handlePreventClickPropagation}>
+        <Container onClick={handlePreventClickPropagation} {...scrollSnapGuardHandlers}>
           <CloseButton>
             <CloseIcon onClick={onClose} />
           </CloseButton>

client/src/components/ImageModal.tsx

@@ -1,6 +1,7 @@
 import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
 import { styled } from 'styled-components';
+import useScrollSnapGuard from '../hooks/useScrollSnapGuard';
 import Resource from '../utils/Resource';
 
 type ImageModalProps = {
@@ -11,6 +12,7 @@ type ImageModalProps = {
 const ImageModal = (props: ImageModalProps) => {
   const { imageUrls, onClose } = props;
   const [activeImage, setActiveImage] = useState(imageUrls[0]);
+  const scrollSnapGuardHandlers = useScrollSnapGuard();
 
   const handleContainerClick: MouseEventHandler = (event) => {
     if (event.currentTarget !== event.target) return;
@@ -19,7 +21,7 @@ const ImageModal = (props: ImageModalProps) => {
   };
 
   return (
-    <Container>
+    <Container {...scrollSnapGuardHandlers}>
       <ActiveImageContainer onClick={handleContainerClick}>
         <ActiveImage src={Resource.getImageUrl({ size: 'original', filename: activeImage })} />
       </ActiveImageContainer>

client/src/hooks/useScrollSnapGuard.ts

@@ -0,0 +1,31 @@
+import type { EventHandler, SyntheticEvent } from 'react';
+import { useCallback, useMemo } from 'react';
+
+/**
+ * ScrollSnapContainer의 하위 요소에서 열린 모달에서 스크롤 혹은 스와이프를 할 시
+ * ScrollSnapContainer에 전파되어 스와이프가 동작하는 문제가 발생합니다.
+ * ScrollSnapContainer의 스와이프가 동작하지 않도록 갖가지 이벤트의 propagation을 막아주는 훅입니다.
+ */
+const useScrollSnapGuard = () => {
+  const preventPropagation: EventHandler<SyntheticEvent> = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
+  const handlers = useMemo(
+    () => ({
+      onTouchStart: preventPropagation,
+      onTouchMove: preventPropagation,
+      onTouchEnd: preventPropagation,
+      onMouseDown: preventPropagation,
+      onMouseMove: preventPropagation,
+      onMouseUp: preventPropagation,
+      onMouseLeave: preventPropagation,
+      onWheel: preventPropagation,
+    }),
+    [preventPropagation],
+  );
+
+  return handlers;
+};
+
+export default useScrollSnapGuard;