fix(mobile-schedule): 카테고리 칩 자동 숨김 제거
스크롤 방향 감지 자동 숨김이 sticky 바의 transform 전환과 충돌해 리스트 상단에서 위로 스크롤 시 떨림 발생. 항상 보이는 단순 sticky 칩 바로 변경. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
f6ba4c8183
commit
01cf1cfe9a
1 changed files with 1 additions and 22 deletions
|
|
@ -381,24 +381,6 @@ function MobileSchedule() {
|
||||||
return schedules.filter((s) => selectedCategories.includes(s.category_id));
|
return schedules.filter((s) => selectedCategories.includes(s.category_id));
|
||||||
}, [schedules, selectedCategories]);
|
}, [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()];
|
const getDayName = (date) => ['일', '월', '화', '수', '목', '금', '토'][date.getDay()];
|
||||||
|
|
||||||
|
|
@ -829,10 +811,7 @@ function MobileSchedule() {
|
||||||
<>
|
<>
|
||||||
{/* 카테고리 필터 칩 (스크롤 방향 감지 자동 숨김) */}
|
{/* 카테고리 필터 칩 (스크롤 방향 감지 자동 숨김) */}
|
||||||
{monthCategories.length > 0 && (
|
{monthCategories.length > 0 && (
|
||||||
<div
|
<div className="sticky top-0 z-20 bg-white -mx-4 px-4 -mt-4 pt-4 pb-3">
|
||||||
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
|
<div
|
||||||
className="flex overflow-x-auto scrollbar-hide gap-1.5"
|
className="flex overflow-x-auto scrollbar-hide gap-1.5"
|
||||||
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue