feat: AdminSchedule.jsx에 동적 높이 가상 스크롤 적용

- measureElement와 data-index 추가
- 고정 높이 제거하여 내용에 맞게 자동 조절
This commit is contained in:
caadiq 2026-01-10 09:52:34 +09:00
parent 4ecc16347c
commit 0efa0a8e5c

View file

@ -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">