feat: 모바일 일정 날짜 변경 시 스크롤 맨 위로 초기화
- contentRef 추가하여 mobile-content 요소 참조 - selectedDate 변경 시 useEffect로 scrollTop = 0 설정
This commit is contained in:
parent
d0b78f0b5d
commit
578ab25568
1 changed files with 9 additions and 1 deletions
|
|
@ -15,6 +15,7 @@ function MobileSchedule() {
|
||||||
const [showCalendar, setShowCalendar] = useState(false);
|
const [showCalendar, setShowCalendar] = useState(false);
|
||||||
const [calendarViewDate, setCalendarViewDate] = useState(() => new Date(selectedDate)); // 달력 뷰 날짜
|
const [calendarViewDate, setCalendarViewDate] = useState(() => new Date(selectedDate)); // 달력 뷰 날짜
|
||||||
const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); // 달력 년월 선택 모드
|
const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); // 달력 년월 선택 모드
|
||||||
|
const contentRef = useRef(null); // 스크롤 초기화용
|
||||||
|
|
||||||
// 달력 월 변경 함수
|
// 달력 월 변경 함수
|
||||||
const changeCalendarMonth = (delta) => {
|
const changeCalendarMonth = (delta) => {
|
||||||
|
|
@ -97,6 +98,13 @@ function MobileSchedule() {
|
||||||
setCalendarViewDate(newDate);
|
setCalendarViewDate(newDate);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 날짜 변경 시 스크롤 맨 위로 초기화
|
||||||
|
useEffect(() => {
|
||||||
|
if (contentRef.current) {
|
||||||
|
contentRef.current.scrollTop = 0;
|
||||||
|
}
|
||||||
|
}, [selectedDate]);
|
||||||
|
|
||||||
|
|
||||||
// 캘린더가 열릴 때 배경 스크롤 방지
|
// 캘린더가 열릴 때 배경 스크롤 방지
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -422,7 +430,7 @@ function MobileSchedule() {
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
|
|
||||||
{/* 컨텐츠 영역 */}
|
{/* 컨텐츠 영역 */}
|
||||||
<div className="mobile-content">
|
<div className="mobile-content" ref={contentRef}>
|
||||||
<div className="px-4 pt-4 pb-4">
|
<div className="px-4 pt-4 pb-4">
|
||||||
{isSearchMode && searchTerm ? (
|
{isSearchMode && searchTerm ? (
|
||||||
// 검색 결과
|
// 검색 결과
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue