84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
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 - 화살표 클릭 시 실행될 콜백 함수
|
|
* @returns 이벤트 리스너 제거 함수
|
|
*/
|
|
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')
|
|
|
|
const prevHandler = () => handleArrowClick('prev', splide, onArrowClick)
|
|
const nextHandler = () => handleArrowClick('next', splide, onArrowClick)
|
|
|
|
if (prevArrow) {
|
|
prevArrow.addEventListener('click', prevHandler)
|
|
}
|
|
|
|
if (nextArrow) {
|
|
nextArrow.addEventListener('click', nextHandler)
|
|
}
|
|
|
|
// 이벤트 리스너 제거 함수 반환
|
|
return () => {
|
|
if (prevArrow) {
|
|
prevArrow.removeEventListener('click', prevHandler)
|
|
}
|
|
if (nextArrow) {
|
|
nextArrow.removeEventListener('click', nextHandler)
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
calculateTargetIndex,
|
|
handleArrowClick,
|
|
addArrowClickListeners
|
|
}
|
|
}
|
|
|