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

fix: 가상 스크롤 버그 수정

Browse source 
- searchSchedules 미정의 오류 수정 (setSearchTerm만 사용)
- Schedule.jsx 항목 간 여백 추가 (ITEM_HEIGHT 136px)
This commit is contained in:
caadiq 2026-01-10 09:40:40 +09:00
parent ad2d501c39
commit 043f8b465d
2 changed files with 7 additions and 18 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

@ -345,15 +345,6 @@ function AdminSchedule() {
fetchSchedules(); fetchSchedules();
}, [year, month]); }, [year, month]);
// 검색 모드로 돌아왔을 때 검색 결과 다시 로드
useEffect(() => {
if (isSearchMode && searchTerm) {
searchSchedules(searchTerm);
}
}, []); // 컴포넌트 마운트 시에만
// 스크롤 위치 복원 // 스크롤 위치 복원
useEffect(() => { useEffect(() => {
if (scrollContainerRef.current && scrollPosition > 0) { if (scrollContainerRef.current && scrollPosition > 0) {
@ -986,7 +977,6 @@ function AdminSchedule() {
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
setSearchTerm(searchInput); setSearchTerm(searchInput);
searchSchedules(searchInput);
} else if (e.key === 'Escape') { } else if (e.key === 'Escape') {
setIsSearchMode(false); setIsSearchMode(false);
setSearchInput(''); setSearchInput('');
@ -999,7 +989,6 @@ function AdminSchedule() {
<button <button
onClick={() => { onClick={() => {
setSearchTerm(searchInput); setSearchTerm(searchInput);
searchSchedules(searchInput);
}} }}
disabled={searchLoading} disabled={searchLoading}
className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50" className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"

14
frontend/src/pages/pc/public/Schedule.jsx
View file

@ -43,7 +43,7 @@ function Schedule() {
const [searchInput, setSearchInput] = useState(''); const [searchInput, setSearchInput] = useState('');
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const SEARCH_LIMIT = 20; // 페이지당 20개 const SEARCH_LIMIT = 20; // 페이지당 20개
const ITEM_HEIGHT = 120; // 각 아이템 높이 (px) const ITEM_HEIGHT = 136; // 각 아이템 높이 (120px) + 간격 (16px)
// Intersection Observer for infinite scroll // Intersection Observer for infinite scroll
const { ref: loadMoreRef, inView } = useInView({ const { ref: loadMoreRef, inView } = useInView({
@ -721,7 +721,6 @@ function Schedule() {
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
setSearchTerm(searchInput); setSearchTerm(searchInput);
searchSchedules(searchInput);
} else if (e.key === 'Escape') { } else if (e.key === 'Escape') {
setIsSearchMode(false); setIsSearchMode(false);
setSearchInput(''); setSearchInput('');
@ -735,7 +734,6 @@ function Schedule() {
<button <button
onClick={() => { onClick={() => {
setSearchTerm(searchInput); setSearchTerm(searchInput);
searchSchedules(searchInput);
}} }}
disabled={searchLoading} disabled={searchLoading}
className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50" className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
@ -861,10 +859,11 @@ function Schedule() {
transform: `translateY(${virtualItem.start}px)`, transform: `translateY(${virtualItem.start}px)`,
}} }}
> >
<div <div className="pb-4">
onClick={() => handleScheduleClick(schedule)} <div
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer h-full" onClick={() => handleScheduleClick(schedule)}
> className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer h-[120px]"
>
{/* 날짜 영역 */} {/* 날짜 영역 */}
<div <div
className="w-24 flex flex-col items-center justify-center text-white" className="w-24 flex flex-col items-center justify-center text-white"
@ -924,6 +923,7 @@ function Schedule() {
); );
})()} })()}
</div> </div>
</div>
</div> </div>
</div> </div>
); );