Merge pull request #218 from SCBJ-7/feature/#217-carousel

[#217] carousel 모바일 터치 이벤트 제한
SCBJ-7 · Jan 25, 2024 · e3b5f17 · e3b5f17
2 parents a5bc1f5 + 95e1335
commit e3b5f17
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/pages/homePage/itemCarousel/ItemCarousel.style.ts b/src/pages/homePage/itemCarousel/ItemCarousel.style.ts
@@ -17,7 +17,7 @@ export const CarouselContainer = styled.div<{
   overflow: hidden;
   cursor: grab;
 
-  /* touch-action: pan-y; */
+  touch-action: pan-y;
 `;
 
 export const SliderWrapper = styled.div`

diff --git a/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx b/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
@@ -27,11 +27,14 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
     navigate(PATH.DETAIL_ROOM(hotel[num].id));
   };
 
-  //정렬 수정
+  // 터치 이벤트 제한
   return (
     <S.LocaleWrapper $display={hotel ? "block" : "none"}>
       {hotel[0] && (
-        <S.ItemUnit onClick={() => onClickHandler(0)}>
+        <S.ItemUnit
+          onClick={() => onClickHandler(0)}
+          onTouchStart={(e) => e.preventDefault()}
+        >
           <img src={hotel[0].imageUrl} onClick={() => onClickHandler(0)} />
           <div className="item-info">
             <div className="hotel_title">
@@ -52,7 +55,10 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
         </S.ItemUnit>
       )}
       {hotel[1] && (
-        <S.ItemUnit onClick={() => onClickHandler(1)}>
+        <S.ItemUnit
+          onClick={() => onClickHandler(1)}
+          onTouchStart={(e) => e.preventDefault()}
+        >
           <img src={hotel[1].imageUrl} onClick={() => onClickHandler(0)} />
           <div className="item-info">
             <div className="hotel_title">