caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- measureElement와 data-index 추가
- 고정 높이 제거하여 내용에 맞게 자동 조절
This commit is contained in:
caadiq 2026-01-10 09:52:34 +09:00
parent 4ecc16347c
commit 0efa0a8e5c
1 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/pages/pc/admin/AdminSchedule.jsx
View file

@ -153,7 +153,7 @@ function AdminSchedule() {
const { toast, setToast } = useToast(); const { toast, setToast } = useToast();
const scrollContainerRef = useRef(null); const scrollContainerRef = useRef(null);
const SEARCH_LIMIT = 20; // 페이지당 20개 const SEARCH_LIMIT = 20; // 페이지당 20개
const ITEM_HEIGHT = 100; // 각 아이템 높이 (px) const ESTIMATED_ITEM_HEIGHT = 100; // 아이템 추정 높이 (동적 측정)
// Intersection Observer for infinite scroll // Intersection Observer for infinite scroll
const { ref: loadMoreRef, inView } = useInView({ const { ref: loadMoreRef, inView } = useInView({
@ -526,11 +526,11 @@ function AdminSchedule() {
}); });
}, [isSearchMode, searchTerm, searchResults, schedules, selectedCategories, selectedDate]); }, [isSearchMode, searchTerm, searchResults, schedules, selectedCategories, selectedDate]);
// 가상 스크롤 설정 (검색 모드에서만 활성화) // 가상 스크롤 설정 (검색 모드에서만 활성화, 동적 높이 지원)
const virtualizer = useVirtualizer({ const virtualizer = useVirtualizer({
count: isSearchMode && searchTerm ? filteredSchedules.length : 0, count: isSearchMode && searchTerm ? filteredSchedules.length : 0,
getScrollElement: () => scrollContainerRef.current, getScrollElement: () => scrollContainerRef.current,
estimateSize: () => ITEM_HEIGHT, estimateSize: () => ESTIMATED_ITEM_HEIGHT,
overscan: 5, // 버퍼 아이템 수 overscan: 5, // 버퍼 아이템 수
}); });
@ -1100,16 +1100,17 @@ function AdminSchedule() {
return ( return (
<div <div
key={virtualItem.key} key={virtualItem.key}
ref={virtualizer.measureElement}
data-index={virtualItem.index}
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: '100%',
height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}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="flex items-start gap-4">
<div className="w-20 text-center flex-shrink-0"> <div className="w-20 text-center flex-shrink-0">
<div className="text-xs text-gray-400 mb-0.5"> <div className="text-xs text-gray-400 mb-0.5">