diff --git a/apps/client/src/widgets/home/components/info-section/info-section.tsx b/apps/client/src/widgets/home/components/info-section/info-section.tsx index 7a6f6848..4c4f9f54 100644 --- a/apps/client/src/widgets/home/components/info-section/info-section.tsx +++ b/apps/client/src/widgets/home/components/info-section/info-section.tsx @@ -34,7 +34,7 @@ export const InfoSection = () => { {homeCardConfig.map((card, index) => ( - + 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%', }} diff --git a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts index 12b48116..b082b16d 100644 --- a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts +++ b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts @@ -28,6 +28,10 @@ export const useCarouselTouch = ({ /** 누를 때 시작 위치 저장 */ const handlePointerDown = useCallback( (e: PointerEvent) => { + 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);