Refactor(apps): 주최 공지 이미지 슬라이드 스와이프 개선 (#336)

* refactor: 스와이프 감도 개선

* feat: clear 함수 추가

* feat: 공연 이미지 수정/삭제 기능 추가

* Revert "feat: 공연 이미지 수정/삭제 기능 추가"

This reverts commit 4a740d2.

* Revert "feat: clear 함수 추가"

This reverts commit a8142b4.

* refactor: 캐러셀 스와이프 개선

* refactor: 스와이프 성능 개선

* fix: 인디케이터 흔들림 개선

---------

Co-authored-by: eunkr82 <eun.kr82@gmail.com>

Author: jisooooooooooo

packages/compositions/src/notice-image-carousel/notice-image-carousel.css.ts

@@ -17,16 +17,21 @@ export const imageItem = style({
   flexShrink: 0,
   width: '100%',
   listStyle: 'none',
+  scrollSnapAlign: 'start',
+  scrollSnapStop: 'always',
 });
 
 export const imageTrack = style({
   display: 'flex',
   overflowX: 'auto',
+  overflowY: 'hidden',
   padding: 0,
   margin: 0,
+  touchAction: 'pan-y pinch-zoom',
   scrollSnapType: 'x mandatory',
-  scrollBehavior: 'smooth',
   scrollbarWidth: 'none',
+  overscrollBehaviorX: 'contain',
+  WebkitOverflowScrolling: 'touch',
   selectors: {
     '&::-webkit-scrollbar': {
       display: 'none',

packages/shared/src/hooks/use-draggable-carousel.ts

@@ -1,10 +1,11 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { MouseEvent, TouchEvent, UIEvent } from 'react';
 
 interface DragState {
   isPointerDown: boolean;
   startX: number;
   startScrollLeft: number;
+  deltaX: number;
 }
 
 interface UseDraggableCarouselParams {
@@ -15,16 +16,58 @@ const INITIAL_DRAG_STATE: DragState = {
   isPointerDown: false,
   startX: 0,
   startScrollLeft: 0,
+  deltaX: 0,
 };
+const SWIPE_THRESHOLD_RATIO = 0.2;
 
-const getSnapScrollLeft = (element: HTMLElement) => {
-  if (element.clientWidth === 0) {
+const getStartIndex = (startScrollLeft: number, clientWidth: number) => {
+  if (clientWidth === 0) {
     return 0;
   }
 
-  return (
-    Math.round(element.scrollLeft / element.clientWidth) * element.clientWidth
-  );
+  return Math.round(startScrollLeft / clientWidth);
+};
+
+const getMovedRatio = (deltaX: number, clientWidth: number) => {
+  if (clientWidth === 0) {
+    return 0;
+  }
+
+  return Math.abs(deltaX) / clientWidth;
+};
+
+const getSwipeDirection = (deltaX: number) => {
+  if (deltaX > 0) {
+    return -1;
+  }
+
+  if (deltaX < 0) {
+    return 1;
+  }
+
+  return 0;
+};
+
+const getNextIndex = ({
+  clientWidth,
+  deltaX,
+  itemCount,
+  startScrollLeft,
+}: {
+  clientWidth: number;
+  deltaX: number;
+  itemCount: number;
+  startScrollLeft: number;
+}) => {
+  const startIndex = getStartIndex(startScrollLeft, clientWidth);
+  const movedRatio = getMovedRatio(deltaX, clientWidth);
+
+  if (movedRatio < SWIPE_THRESHOLD_RATIO) {
+    return startIndex;
+  }
+
+  const direction = getSwipeDirection(deltaX);
+  return Math.min(Math.max(startIndex + direction, 0), itemCount - 1);
 };
 
 export const useDraggableCarousel = ({
@@ -34,6 +77,9 @@ export const useDraggableCarousel = ({
   const [isDragging, setIsDragging] = useState(false);
   const trackRef = useRef<HTMLUListElement | null>(null);
   const dragStateRef = useRef<DragState>(INITIAL_DRAG_STATE);
+  const currentPageRef = useRef(1);
+  const rafRef = useRef<number | null>(null);
+  const lockedPageRef = useRef<number | null>(null);
   const isIndicatorVisible = itemCount > 1;
 
   const handleScroll = (event: UIEvent<HTMLUListElement>) => {
@@ -42,25 +88,72 @@ export const useDraggableCarousel = ({
       return;
     }
 
-    setCurrentPage(Math.round(scrollLeft / clientWidth) + 1);
+    const nextPage = Math.round(scrollLeft / clientWidth) + 1;
+
+    if (dragStateRef.current.isPointerDown) {
+      return;
+    }
+
+    if (lockedPageRef.current !== null && lockedPageRef.current !== nextPage) {
+      return;
+    }
+
+    if (lockedPageRef.current === nextPage) {
+      lockedPageRef.current = null;
+    }
+
+    if (currentPageRef.current === nextPage) {
+      return;
+    }
+
+    currentPageRef.current = nextPage;
+    setCurrentPage(nextPage);
   };
 
   const startDrag = (startX: number, startScrollLeft: number) => {
     dragStateRef.current = {
       isPointerDown: true,
       startX,
       startScrollLeft,
+      deltaX: 0,
     };
     setIsDragging(true);
   };
 
+  const scrollToIndex = (index: number) => {
+    if (!trackRef.current) {
+      return;
+    }
+
+    const nextIndex = Math.min(Math.max(index, 0), itemCount - 1);
+    const { clientWidth } = trackRef.current;
+    const nextPage = nextIndex + 1;
+
+    lockedPageRef.current = nextPage;
+    currentPageRef.current = nextPage;
+    setCurrentPage(nextPage);
+    trackRef.current.scrollTo({
+      left: nextIndex * clientWidth,
+      behavior: 'smooth',
+    });
+  };
+
   const updateDrag = (currentX: number, element: HTMLUListElement) => {
     if (!dragStateRef.current.isPointerDown) {
       return;
     }
 
     const deltaX = currentX - dragStateRef.current.startX;
-    element.scrollLeft = dragStateRef.current.startScrollLeft - deltaX;
+    dragStateRef.current.deltaX = deltaX;
+
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+    }
+
+    rafRef.current = requestAnimationFrame(() => {
+      element.scrollLeft = dragStateRef.current.startScrollLeft - deltaX;
+      rafRef.current = null;
+    });
   };
 
   const handleMouseDown = (event: MouseEvent<HTMLUListElement>) => {
@@ -94,11 +187,20 @@ export const useDraggableCarousel = ({
       return;
     }
 
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+
     if (trackRef.current) {
-      trackRef.current.scrollTo({
-        left: getSnapScrollLeft(trackRef.current),
-        behavior: 'smooth',
+      const { clientWidth } = trackRef.current;
+      const nextIndex = getNextIndex({
+        clientWidth,
+        deltaX: dragStateRef.current.deltaX,
+        itemCount,
+        startScrollLeft: dragStateRef.current.startScrollLeft,
       });
+      scrollToIndex(nextIndex);
     }
 
     dragStateRef.current = INITIAL_DRAG_STATE;
@@ -113,6 +215,14 @@ export const useDraggableCarousel = ({
     endDrag();
   };
 
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+
   return {
     currentPage,
     handleMouseDown,