91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 스크롤 표시 모드
|
||
|
|
*
|
||
|
|
* 가로 스크롤 + CSS scroll-snap으로 아이템 단위 스냅
|
||
|
|
* 터치 스와이프 네이티브 지원
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { useRef, useState, useEffect, useCallback } from "react";
|
||
|
|
|
||
|
|
// ===== Props =====
|
||
|
|
|
||
|
|
export interface ScrollModeProps {
|
||
|
|
/** 총 아이템 수 */
|
||
|
|
itemCount: number;
|
||
|
|
/** 페이지 인디케이터 표시 여부 */
|
||
|
|
showIndicator?: boolean;
|
||
|
|
/** 현재 인덱스에 해당하는 아이템 렌더링 */
|
||
|
|
renderItem: (index: number) => React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ===== 메인 컴포넌트 =====
|
||
|
|
|
||
|
|
export function ScrollModeComponent({
|
||
|
|
itemCount,
|
||
|
|
showIndicator = true,
|
||
|
|
renderItem,
|
||
|
|
}: ScrollModeProps) {
|
||
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
||
|
|
|
||
|
|
// 스크롤 위치로 현재 인덱스 계산
|
||
|
|
const handleScroll = useCallback(() => {
|
||
|
|
const el = scrollRef.current;
|
||
|
|
if (!el || !el.clientWidth) return;
|
||
|
|
const index = Math.round(el.scrollLeft / el.clientWidth);
|
||
|
|
setActiveIndex(Math.min(index, itemCount - 1));
|
||
|
|
}, [itemCount]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const el = scrollRef.current;
|
||
|
|
if (!el) return;
|
||
|
|
el.addEventListener("scroll", handleScroll, { passive: true });
|
||
|
|
return () => el.removeEventListener("scroll", handleScroll);
|
||
|
|
}, [handleScroll]);
|
||
|
|
|
||
|
|
if (itemCount === 0) {
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full items-center justify-center">
|
||
|
|
<span className="text-xs text-muted-foreground">아이템 없음</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full flex-col">
|
||
|
|
{/* 스크롤 영역 */}
|
||
|
|
<div
|
||
|
|
ref={scrollRef}
|
||
|
|
className="flex min-h-0 flex-1 snap-x snap-mandatory overflow-x-auto scrollbar-none"
|
||
|
|
>
|
||
|
|
{Array.from({ length: itemCount }).map((_, i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className="h-full w-full shrink-0 snap-center"
|
||
|
|
>
|
||
|
|
{renderItem(i)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 페이지 인디케이터 */}
|
||
|
|
{showIndicator && itemCount > 1 && (
|
||
|
|
<div className="flex items-center justify-center gap-1.5 py-1">
|
||
|
|
{Array.from({ length: itemCount }).map((_, i) => (
|
||
|
|
<span
|
||
|
|
key={i}
|
||
|
|
className={`h-1.5 rounded-full transition-all ${
|
||
|
|
i === activeIndex
|
||
|
|
? "w-4 bg-primary"
|
||
|
|
: "w-1.5 bg-muted-foreground/30"
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|