feat: AdminSchedule.jsx에 동적 높이 가상 스크롤 적용
- measureElement와 data-index 추가 - 고정 높이 제거하여 내용에 맞게 자동 조절
This commit is contained in:
parent
4ecc16347c
commit
0efa0a8e5c
1 changed files with 6 additions and 5 deletions
|
|
@ -153,7 +153,7 @@ function AdminSchedule() {
|
|||
const { toast, setToast } = useToast();
|
||||
const scrollContainerRef = useRef(null);
|
||||
const SEARCH_LIMIT = 20; // 페이지당 20개
|
||||
const ITEM_HEIGHT = 100; // 각 아이템 높이 (px)
|
||||
const ESTIMATED_ITEM_HEIGHT = 100; // 아이템 추정 높이 (동적 측정)
|
||||
|
||||
// Intersection Observer for infinite scroll
|
||||
const { ref: loadMoreRef, inView } = useInView({
|
||||
|
|
@ -526,11 +526,11 @@ function AdminSchedule() {
|
|||
});
|
||||
}, [isSearchMode, searchTerm, searchResults, schedules, selectedCategories, selectedDate]);
|
||||
|
||||
// 가상 스크롤 설정 (검색 모드에서만 활성화)
|
||||
// 가상 스크롤 설정 (검색 모드에서만 활성화, 동적 높이 지원)
|
||||
const virtualizer = useVirtualizer({
|
||||
count: isSearchMode && searchTerm ? filteredSchedules.length : 0,
|
||||
getScrollElement: () => scrollContainerRef.current,
|
||||
estimateSize: () => ITEM_HEIGHT,
|
||||
estimateSize: () => ESTIMATED_ITEM_HEIGHT,
|
||||
overscan: 5, // 버퍼 아이템 수
|
||||
});
|
||||
|
||||
|
|
@ -1100,16 +1100,17 @@ function AdminSchedule() {
|
|||
return (
|
||||
<div
|
||||
key={virtualItem.key}
|
||||
ref={virtualizer.measureElement}
|
||||
data-index={virtualItem.index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: `${virtualItem.size}px`,
|
||||
transform: `translateY(${virtualItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<div className="p-4 hover:bg-gray-50 transition-colors group h-full border-b border-gray-100">
|
||||
<div className="p-5 hover:bg-gray-50 transition-colors group border-b border-gray-100">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-20 text-center flex-shrink-0">
|
||||
<div className="text-xs text-gray-400 mb-0.5">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue