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

perf: AdminSchedule 달력 렌더링 성능 최적화

Browse source 
- scheduleDateMap useMemo로 O(1) 조회 구현
- hasSchedule, getScheduleColor 함수 배열 순회 제거
This commit is contained in:
caadiq 2026-01-09 17:53:58 +09:00
parent 4619d101f0
commit 494c2a9d6d
1 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -80,9 +80,9 @@ function AdminSchedule() {
} }
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]); }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]);
// selectedDate가 undefined이면 오늘 날짜로 초기화 (null은 전체보기이므로 유지) // selectedDate가 없으면 오늘 날짜로 초기화
useEffect(() => { useEffect(() => {
if (selectedDate === undefined) { if (!selectedDate) {
setSelectedDate(getTodayKST()); setSelectedDate(getTodayKST());
} }
}, []); }, []);
@ -166,22 +166,28 @@ function AdminSchedule() {
return colors[color] || 'bg-gray-100 text-gray-700'; return colors[color] || 'bg-gray-100 text-gray-700';
}; };
// 해당 날짜에 일정이 있는지 확인 // 일정 날짜별 맵 (O(1) 조회용) - 성능 최적화
const scheduleDateMap = useMemo(() => {
const map = new Map();
schedules.forEach(s => {
const dateStr = formatDate(s.date);
if (!map.has(dateStr)) {
map.set(dateStr, s);
}
});
return map;
}, [schedules]);
// 해당 날짜에 일정이 있는지 확인 (O(1))
const hasSchedule = (day) => { const hasSchedule = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
return schedules.some(s => { return scheduleDateMap.has(dateStr);
const scheduleDate = formatDate(s.date);
return scheduleDate === dateStr;
});
}; };
// 해당 날짜의 첫 번째 일정 카테고리 색상 // 해당 날짜의 첫 번째 일정 카테고리 색상 (O(1))
const getScheduleColor = (day) => { const getScheduleColor = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const schedule = schedules.find(s => { const schedule = scheduleDateMap.get(dateStr);
const scheduleDate = formatDate(s.date);
return scheduleDate === dateStr;
});
if (!schedule) return null; if (!schedule) return null;
const cat = categories.find(c => c.id === schedule.category_id); const cat = categories.find(c => c.id === schedule.category_id);
return cat?.color || '#4A7C59'; return cat?.color || '#4A7C59';