Fix(bds): 캐러셀 컴포넌트 IOS, And 대응 (#477)

Author: minjeoong

apps/client/src/widgets/home/components/info-section/info-section.tsx

@@ -34,7 +34,7 @@ export const InfoSection = () => {
       </div>
       <Carousel slidesPerView={4.5} autoPlay className={styles.homeCardList}>
         {homeCardConfig.map((card, index) => (
-          <Carousel.Item key={index} style={{ width: 'auto' }}>
+          <Carousel.Item key={index}>
             <HomeCard
               icon={
                 <img

packages/bds-ui/src/components/carousel/carousel.css.ts

@@ -9,6 +9,8 @@ export const container = style({
   height: '100%',
   overflowX: 'scroll',
   userSelect: 'none',
+  WebkitOverflowScrolling: 'touch',
+  touchAction: 'pan-x',
 });
 
 export const slideContainer = style({
@@ -20,6 +22,7 @@ export const slideContainer = style({
   gap: '1rem',
   userSelect: 'none',
   WebkitUserSelect: 'none',
+  touchAction: 'pan-x',
 });
 
 export const slide = style({

packages/bds-ui/src/components/carousel/carousel.tsx

@@ -134,7 +134,7 @@ const Carousel = ({
       if (autoSlideWidth > 0 && containerWidth > 0) {
         const config: CarouselControllerConfig = {
           totalItems,
-          slidesPerView: 1, // 항상 1개씩 이동
+          slidesPerView: 1,
           slideWidth: (autoSlideWidth / containerWidth) * 100,
           infinite: effectiveInfinite,
         };
@@ -370,8 +370,10 @@ const Carousel = ({
             transform: getTransform(),
             transition: isDragging
               ? 'none'
-              : 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-            cursor: isDragging ? 'grabbing' : 'pointer',
+              : autoPlay
+                ? 'none'
+                : 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            cursor: isDragging ? 'grabbing' : 'grab',
             height: maxSlideHeight ? `${maxSlideHeight}px` : 'auto',
             width: isAutoMode ? 'max-content' : '100%',
           }}

packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts

@@ -28,6 +28,10 @@ export const useCarouselTouch = ({
   /** 누를 때 시작 위치 저장 */
   const handlePointerDown = useCallback(
     (e: PointerEvent<Element>) => {
+      if (e.pointerType === 'touch') {
+        e.preventDefault();
+      }
+
       setIsDragging(true);
       setStartX(e.clientX);
       setDragOffset(0);
@@ -49,6 +53,10 @@ export const useCarouselTouch = ({
         return;
       }
 
+      if (e.pointerType === 'touch') {
+        e.preventDefault();
+      }
+
       const dragDiff = startX - e.clientX;
       const diff = Math.abs(dragDiff);
 
@@ -74,12 +82,22 @@ export const useCarouselTouch = ({
         return;
       }
 
-      if (!autoPlay) {
-        if (hasMoved) {
-          const diff = startX - e.clientX;
-          const containerWidth = e.currentTarget.clientWidth || 1;
-          const dragOffsetPercent = (diff / containerWidth) * 100;
+      const diff = startX - e.clientX;
+      const containerWidth = e.currentTarget.clientWidth || 1;
+      const dragOffsetPercent = (diff / containerWidth) * 100;
+
+      if (autoPlay) {
+        const newState = controller.handleDragEnd(
+          carouselState,
+          dragOffsetPercent,
+          {
+            isAutoPlay: true,
+          },
+        );
 
+        onStateUpdate(newState);
+      } else {
+        if (hasMoved) {
           const newState = controller.handleDragEnd(
             carouselState,
             dragOffsetPercent,
@@ -94,20 +112,6 @@ export const useCarouselTouch = ({
             clickTarget.click();
           }
         }
-      } else {
-        const diff = startX - e.clientX;
-        const containerWidth = e.currentTarget.clientWidth || 1;
-        const dragOffsetPercent = (diff / containerWidth) * 100;
-
-        const newState = controller.handleDragEnd(
-          carouselState,
-          dragOffsetPercent,
-          {
-            isAutoPlay: true,
-          },
-        );
-
-        onStateUpdate(newState);
       }
 
       setIsDragging(false);