feat: 일정 검색에 가상 스크롤 최적화 적용
- @tanstack/react-virtual 라이브러리 추가 - Schedule.jsx, AdminSchedule.jsx에 useVirtualizer 적용 - 검색 결과가 많아도 DOM에는 화면에 보이는 요소만 렌더링 - 스크롤 성능 대폭 향상
This commit is contained in:
parent
7192379eb0
commit
ad2d501c39
4 changed files with 250 additions and 161 deletions
28
frontend/package-lock.json
generated
28
frontend/package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.90.16",
|
||||
"@tanstack/react-virtual": "^3.13.18",
|
||||
"dayjs": "^1.11.19",
|
||||
"framer-motion": "^11.0.8",
|
||||
"lucide-react": "^0.344.0",
|
||||
|
|
@ -1160,6 +1161,33 @@
|
|||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-virtual": {
|
||||
"version": "3.13.18",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.18.tgz",
|
||||
"integrity": "sha512-dZkhyfahpvlaV0rIKnvQiVoWPyURppl6w4m9IwMDpuIjcJ1sD9YGWrt0wISvgU7ewACXx2Ct46WPgI6qAD4v6A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/virtual-core": "3.13.18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/virtual-core": {
|
||||
"version": "3.13.18",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.18.tgz",
|
||||
"integrity": "sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.20.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.90.16",
|
||||
"@tanstack/react-virtual": "^3.13.18",
|
||||
"dayjs": "^1.11.19",
|
||||
"framer-motion": "^11.0.8",
|
||||
"lucide-react": "^0.344.0",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
ChevronLeft, Search, ChevronDown, Bot, Tag, ArrowLeft, ExternalLink, Clock, Link2
|
||||
} from 'lucide-react';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
import Toast from '../../../components/Toast';
|
||||
|
|
@ -152,6 +153,7 @@ function AdminSchedule() {
|
|||
const { toast, setToast } = useToast();
|
||||
const scrollContainerRef = useRef(null);
|
||||
const SEARCH_LIMIT = 20; // 페이지당 20개
|
||||
const ITEM_HEIGHT = 100; // 각 아이템 높이 (px)
|
||||
|
||||
// Intersection Observer for infinite scroll
|
||||
const { ref: loadMoreRef, inView } = useInView({
|
||||
|
|
@ -533,6 +535,14 @@ function AdminSchedule() {
|
|||
});
|
||||
}, [isSearchMode, searchTerm, searchResults, schedules, selectedCategories, selectedDate]);
|
||||
|
||||
// 가상 스크롤 설정 (검색 모드에서만 활성화)
|
||||
const virtualizer = useVirtualizer({
|
||||
count: isSearchMode && searchTerm ? filteredSchedules.length : 0,
|
||||
getScrollElement: () => scrollContainerRef.current,
|
||||
estimateSize: () => ITEM_HEIGHT,
|
||||
overscan: 5, // 버퍼 아이템 수
|
||||
});
|
||||
|
||||
// 카테고리별 카운트 맵 (useMemo로 미리 계산) - 선택된 날짜 기준
|
||||
const categoryCounts = useMemo(() => {
|
||||
const source = (isSearchMode && searchTerm) ? searchResults : schedules;
|
||||
|
|
@ -1085,99 +1095,118 @@ function AdminSchedule() {
|
|||
className="flex-1 overflow-y-auto divide-y divide-gray-100 py-2"
|
||||
>
|
||||
{isSearchMode && searchTerm ? (
|
||||
/* 검색 모드: useInView 기반 무한 스크롤 */
|
||||
/* 검색 모드: 가상 스크롤 */
|
||||
<>
|
||||
{filteredSchedules.map((schedule, index) => (
|
||||
<motion.div
|
||||
key={`${schedule.id}-search-${index}`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: Math.min(index, 10) * 0.03 }}
|
||||
className="p-6 hover:bg-gray-50 transition-colors group"
|
||||
>
|
||||
<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">
|
||||
{new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
{new Date(schedule.date).getDate()}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{['일', '월', '화', '수', '목', '금', '토'][new Date(schedule.date).getDay()]}요일
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const schedule = filteredSchedules[virtualItem.index];
|
||||
if (!schedule) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-1.5 rounded-full flex-shrink-0 self-stretch"
|
||||
style={{ backgroundColor: getColorStyle(categories.find(c => c.id === schedule.category_id)?.color)?.style?.backgroundColor || '#6b7280' }}
|
||||
/>
|
||||
key={virtualItem.key}
|
||||
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="flex items-start gap-4">
|
||||
<div className="w-16 text-center flex-shrink-0">
|
||||
<div className="text-xs text-gray-400 mb-0.5">
|
||||
{new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
|
||||
</div>
|
||||
<div className="text-xl font-bold text-gray-900">
|
||||
{new Date(schedule.date).getDate()}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{['일', '월', '화', '수', '목', '금', '토'][new Date(schedule.date).getDay()]}요일
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-900">{decodeHtmlEntities(schedule.title)}</h3>
|
||||
<div className="flex items-center gap-3 mt-1 text-sm text-gray-500">
|
||||
{schedule.time && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={14} />
|
||||
{schedule.time.slice(0, 5)}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag size={14} />
|
||||
{categories.find(c => c.id === schedule.category_id)?.name || '미분류'}
|
||||
</span>
|
||||
{schedule.source_name && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Link2 size={14} />
|
||||
{schedule.source_name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{schedule.member_names && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{schedule.member_names.split(',').length >= 5 ? (
|
||||
<span className="px-2 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
프로미스나인
|
||||
</span>
|
||||
) : (
|
||||
schedule.member_names.split(',').map((name, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
{name.trim()}
|
||||
<div
|
||||
className="w-1 rounded-full flex-shrink-0 self-stretch"
|
||||
style={{ backgroundColor: getColorStyle(categories.find(c => c.id === schedule.category_id)?.color)?.style?.backgroundColor || '#6b7280' }}
|
||||
/>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 text-sm">{decodeHtmlEntities(schedule.title)}</h3>
|
||||
<div className="flex items-center gap-2 mt-1 text-xs text-gray-500">
|
||||
{schedule.time && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={12} />
|
||||
{schedule.time.slice(0, 5)}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag size={12} />
|
||||
{categories.find(c => c.id === schedule.category_id)?.name || '미분류'}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{schedule.source_name && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Link2 size={12} />
|
||||
{schedule.source_name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{schedule.member_names && (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{schedule.member_names.split(',').length >= 5 ? (
|
||||
<span className="px-1.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
프로미스나인
|
||||
</span>
|
||||
) : (
|
||||
schedule.member_names.split(',').map((name, i) => (
|
||||
<span key={i} className="px-1.5 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full">
|
||||
{name.trim()}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{schedule.source_url && (
|
||||
<a
|
||||
href={schedule.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-2 hover:bg-blue-100 rounded-lg transition-colors text-blue-500"
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
onClick={() => navigate(`/admin/schedule/${schedule.id}/edit`)}
|
||||
className="p-2 hover:bg-gray-200 rounded-lg transition-colors text-gray-500"
|
||||
>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openDeleteDialog(schedule)}
|
||||
className="p-2 hover:bg-red-100 rounded-lg transition-colors text-red-500"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{schedule.source_url && (
|
||||
<a
|
||||
href={schedule.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-1.5 hover:bg-blue-100 rounded-lg transition-colors text-blue-500"
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
onClick={() => navigate(`/admin/schedule/${schedule.id}/edit`)}
|
||||
className="p-1.5 hover:bg-gray-200 rounded-lg transition-colors text-gray-500"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openDeleteDialog(schedule)}
|
||||
className="p-1.5 hover:bg-red-100 rounded-lg transition-colors text-red-500"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 무한 스크롤 트리거 & 로딩 인디케이터 */}
|
||||
<div ref={loadMoreRef} className="py-4">
|
||||
|
|
@ -1186,9 +1215,9 @@ function AdminSchedule() {
|
|||
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{!hasNextPage && searchResults.length > 0 && (
|
||||
{!hasNextPage && filteredSchedules.length > 0 && (
|
||||
<div className="text-center text-sm text-gray-400">
|
||||
{searchResults.length} / {searchTotal}개 표시 (모두 로드됨)
|
||||
{filteredSchedules.length}개 표시 (모두 로드됨)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
|
|||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Clock, ChevronLeft, ChevronRight, ChevronDown, Tag, Search, ArrowLeft, Link2 } from 'lucide-react';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import { getTodayKST } from '../../../utils/date';
|
||||
import { getSchedules, getCategories, searchSchedules as searchSchedulesApi } from '../../../api/public/schedules';
|
||||
|
|
@ -42,6 +43,7 @@ function Schedule() {
|
|||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const SEARCH_LIMIT = 20; // 페이지당 20개
|
||||
const ITEM_HEIGHT = 120; // 각 아이템 높이 (px)
|
||||
|
||||
// Intersection Observer for infinite scroll
|
||||
const { ref: loadMoreRef, inView } = useInView({
|
||||
|
|
@ -83,6 +85,8 @@ function Schedule() {
|
|||
|
||||
const searchTotal = searchData?.pages?.[0]?.total || 0;
|
||||
|
||||
|
||||
|
||||
// Auto fetch next page when scrolled to bottom
|
||||
useEffect(() => {
|
||||
if (inView && hasNextPage && !isFetchingNextPage && isSearchMode && searchTerm) {
|
||||
|
|
@ -285,6 +289,14 @@ function Schedule() {
|
|||
});
|
||||
}, [schedules, selectedDate, currentYearMonth, selectedCategories, isSearchMode, searchTerm, searchResults]);
|
||||
|
||||
// 가상 스크롤 설정 (검색 모드에서만 활성화)
|
||||
const virtualizer = useVirtualizer({
|
||||
count: isSearchMode && searchTerm ? filteredSchedules.length : 0,
|
||||
getScrollElement: () => scrollContainerRef.current,
|
||||
estimateSize: () => ITEM_HEIGHT,
|
||||
overscan: 5, // 버퍼 아이템 수
|
||||
});
|
||||
|
||||
// 카테고리별 카운트 맵 (useMemo로 미리 계산) - 선택된 날짜 기준
|
||||
const categoryCounts = useMemo(() => {
|
||||
const source = (isSearchMode && searchTerm) ? searchResults : schedules;
|
||||
|
|
@ -820,84 +832,103 @@ function Schedule() {
|
|||
<div className="text-center py-20 text-gray-500">로딩 중...</div>
|
||||
) : filteredSchedules.length > 0 ? (
|
||||
isSearchMode && searchTerm ? (
|
||||
/* 검색 모드: useInView 기반 무한 스크롤 */
|
||||
/* 검색 모드: 가상 스크롤 */
|
||||
<>
|
||||
{filteredSchedules.map((schedule, index) => {
|
||||
const formatted = formatDate(schedule.date);
|
||||
const categoryColor = getCategoryColor(schedule.category_id);
|
||||
const categoryName = getCategoryName(schedule.category_id);
|
||||
<div
|
||||
style={{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const schedule = filteredSchedules[virtualItem.index];
|
||||
if (!schedule) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={`${schedule.id}-search-${index}`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: Math.min(index, 10) * 0.03 }}
|
||||
onClick={() => handleScheduleClick(schedule)}
|
||||
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
|
||||
>
|
||||
{/* 날짜 영역 */}
|
||||
const formatted = formatDate(schedule.date);
|
||||
const categoryColor = getCategoryColor(schedule.category_id);
|
||||
const categoryName = getCategoryName(schedule.category_id);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-24 flex flex-col items-center justify-center text-white py-6"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
key={virtualItem.key}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: `${virtualItem.size}px`,
|
||||
transform: `translateY(${virtualItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<span className="text-xs font-medium opacity-60">
|
||||
{new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
|
||||
</span>
|
||||
<span className="text-3xl font-bold">{formatted.day}</span>
|
||||
<span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
|
||||
</div>
|
||||
|
||||
{/* 스케줄 내용 */}
|
||||
<div className="flex-1 p-6 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg mb-2">{decodeHtmlEntities(schedule.title)}</h3>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-base text-gray-500">
|
||||
{schedule.time && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={16} className="opacity-60" />
|
||||
{schedule.time.slice(0, 5)}
|
||||
<div
|
||||
onClick={() => handleScheduleClick(schedule)}
|
||||
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer h-full"
|
||||
>
|
||||
{/* 날짜 영역 */}
|
||||
<div
|
||||
className="w-24 flex flex-col items-center justify-center text-white"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
>
|
||||
<span className="text-xs font-medium opacity-60">
|
||||
{new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag size={16} className="opacity-60" />
|
||||
{categoryName}
|
||||
</span>
|
||||
{schedule.source_name && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Link2 size={16} className="opacity-60" />
|
||||
{schedule.source_name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-3xl font-bold">{formatted.day}</span>
|
||||
<span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
|
||||
const memberList = memberNames.split(',').filter(name => name.trim());
|
||||
if (memberList.length === 0) return null;
|
||||
if (memberList.length === 5) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
<span className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
프로미스나인
|
||||
{/* 스케줄 내용 */}
|
||||
<div className="flex-1 p-4 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg mb-1">{decodeHtmlEntities(schedule.title)}</h3>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-base text-gray-500">
|
||||
{schedule.time && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={16} className="opacity-60" />
|
||||
{schedule.time.slice(0, 5)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{memberList.map((name, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
{name}
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag size={16} className="opacity-60" />
|
||||
{categoryName}
|
||||
</span>
|
||||
{schedule.source_name && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Link2 size={16} className="opacity-60" />
|
||||
{schedule.source_name}
|
||||
</span>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{(() => {
|
||||
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
|
||||
const memberList = memberNames.split(',').filter(name => name.trim());
|
||||
if (memberList.length === 0) return null;
|
||||
if (memberList.length === 5) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 mt-1">
|
||||
<span className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
프로미스나인
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 mt-1">
|
||||
{memberList.map((name, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
{name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 무한 스크롤 트리거 & 로딩 인디케이터 */}
|
||||
<div ref={loadMoreRef} className="py-4">
|
||||
|
|
@ -906,9 +937,9 @@ function Schedule() {
|
|||
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{!hasNextPage && searchResults.length > 0 && (
|
||||
{!hasNextPage && filteredSchedules.length > 0 && (
|
||||
<div className="text-center text-sm text-gray-400">
|
||||
{searchResults.length} / {searchTotal}개 표시 (모두 로드됨)
|
||||
{filteredSchedules.length}개 표시 (모두 로드됨)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue