Merge branch 'feature/20251001-gil' into feature/20250910-all

layers/composables/useSplideArrow.ts

@@ -0,0 +1,68 @@
+import type { Splide as SplideType } from '@splidejs/splide'
+
+/**
+ * Splide 슬라이더의 화살표 클릭 로직을 처리하는 composable
+ */
+export const useSplideArrow = () => {
+  /**
+   * 화살표 클릭 시 슬라이드 인덱스를 계산하는 함수
+   * @param direction - 이동 방향 ('prev' | 'next')
+   * @param splide - Splide 인스턴스
+   * @returns 다음 슬라이드 인덱스
+   */
+  const calculateTargetIndex = (direction: 'prev' | 'next', splide: SplideType): number => {
+    const currentIndex = splide.index
+    const totalSlides = splide.length
+    
+    if (direction === 'next') {
+      return currentIndex + 1 >= totalSlides ? 0 : currentIndex + 1
+    } else {
+      return currentIndex - 1 < 0 ? totalSlides - 1 : currentIndex - 1
+    }
+  }
+
+  /**
+   * 화살표 클릭 핸들러
+   * @param direction - 이동 방향
+   * @param splide - Splide 인스턴스
+   * @param onArrowClick - 화살표 클릭 시 실행될 콜백 함수
+   */
+  const handleArrowClick = (
+    direction: 'prev' | 'next', 
+    splide: SplideType, 
+    onArrowClick?: (direction: 'prev' | 'next', targetIndex: number) => void
+  ) => {
+    const targetIndex = calculateTargetIndex(direction, splide)
+    
+    if (onArrowClick) {
+      onArrowClick(direction, targetIndex)
+    }
+  }
+
+  /**
+   * 화살표 버튼에 클릭 이벤트 리스너를 추가하는 함수
+   * @param splide - Splide 인스턴스
+   * @param onArrowClick - 화살표 클릭 시 실행될 콜백 함수
+   */
+  const addArrowClickListeners = (
+    splide: SplideType, 
+    onArrowClick?: (direction: 'prev' | 'next', targetIndex: number) => void
+  ) => {
+    const prevArrow = splide.root.querySelector('.arrow-prev')
+    const nextArrow = splide.root.querySelector('.arrow-next')
+    
+    if (prevArrow) {
+      prevArrow.addEventListener('click', () => handleArrowClick('prev', splide, onArrowClick))
+    }
+    
+    if (nextArrow) {
+      nextArrow.addEventListener('click', () => handleArrowClick('next', splide, onArrowClick))
+    }
+  }
+
+  return {
+    calculateTargetIndex,
+    handleArrowClick,
+    addArrowClickListeners
+  }
+}