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

fix(mobile-schedule): 카테고리 칩 자동 숨김 제거

Browse source 
스크롤 방향 감지 자동 숨김이 sticky 바의 transform 전환과
충돌해 리스트 상단에서 위로 스크롤 시 떨림 발생.
항상 보이는 단순 sticky 칩 바로 변경.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-06-01 15:04:45 +09:00
parent f6ba4c8183
commit 01cf1cfe9a
1 changed files with 1 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/pages/mobile/schedule/Schedule.jsx
View file

@ -381,24 +381,6 @@ function MobileSchedule() {
return schedules.filter((s) => selectedCategories.includes(s.category_id));
}, [schedules, selectedCategories]);
// 카테고리 칩 자동 숨김 (스크롤 방향 감지: 내리면 숨김, 올리면 보임)
const [chipsVisible, setChipsVisible] = useState(true);
const lastScrollYRef = useRef(0);
useEffect(() => {
const container = document.querySelector('.mobile-content');
if (!container) return;
const onScroll = () => {
const y = container.scrollTop;
const last = lastScrollYRef.current;
if (y < 16) setChipsVisible(true);
else if (y > last + 6) setChipsVisible(false);
else if (y < last - 6) setChipsVisible(true);
lastScrollYRef.current = y;
};
container.addEventListener('scroll', onScroll, { passive: true });
return () => container.removeEventListener('scroll', onScroll);
}, []);
// 요일 이름
const getDayName = (date) => ['일', '월', '화', '수', '목', '금', '토'][date.getDay()];
@ -829,10 +811,7 @@ function MobileSchedule() {
<>
{/* 카테고리 필터 칩 (스크롤 방향 감지 자동 숨김) */}
{monthCategories.length > 0 && (
<div
className="sticky top-0 z-20 bg-white -mx-4 px-4 -mt-4 pt-4 pb-3 transition-transform duration-300 ease-out"
style={{ transform: chipsVisible ? 'translateY(0)' : 'translateY(-130%)' }}
>
<div className="sticky top-0 z-20 bg-white -mx-4 px-4 -mt-4 pt-4 pb-3">
<div
className="flex overflow-x-auto scrollbar-hide gap-1.5"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}