feat: 모바일 검색 뒤로가기 버튼 처리
- enterSearchMode()에서 history.pushState로 히스토리 상태 추가 - popstate 이벤트로 뒤로가기 시 검색 모드 종료 - 이전 페이지로 이동하지 않고 일정 화면으로 복귀
This commit is contained in:
parent
0521e3d0ec
commit
83e3689f02
1 changed files with 29 additions and 3 deletions
|
|
@ -28,6 +28,32 @@ function MobileSchedule() {
|
||||||
const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); // 달력 년월 선택 모드
|
const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); // 달력 년월 선택 모드
|
||||||
const contentRef = useRef(null); // 스크롤 초기화용
|
const contentRef = useRef(null); // 스크롤 초기화용
|
||||||
|
|
||||||
|
// 검색 모드 진입 함수 (history 상태 추가)
|
||||||
|
const enterSearchMode = () => {
|
||||||
|
setIsSearchMode(true);
|
||||||
|
window.history.pushState({ searchMode: true }, '');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 검색 모드 종료 함수
|
||||||
|
const exitSearchMode = () => {
|
||||||
|
setIsSearchMode(false);
|
||||||
|
setSearchInput('');
|
||||||
|
setSearchTerm('');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 뒤로가기 버튼 처리
|
||||||
|
useEffect(() => {
|
||||||
|
const handlePopState = (e) => {
|
||||||
|
if (isSearchMode) {
|
||||||
|
// 검색 모드에서 뒤로가기 시 검색 모드 종료
|
||||||
|
exitSearchMode();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('popstate', handlePopState);
|
||||||
|
return () => window.removeEventListener('popstate', handlePopState);
|
||||||
|
}, [isSearchMode]);
|
||||||
|
|
||||||
// 달력 월 변경 함수
|
// 달력 월 변경 함수
|
||||||
const changeCalendarMonth = (delta) => {
|
const changeCalendarMonth = (delta) => {
|
||||||
const newDate = new Date(calendarViewDate);
|
const newDate = new Date(calendarViewDate);
|
||||||
|
|
@ -257,7 +283,7 @@ function MobileSchedule() {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => { setIsSearchMode(false); setSearchInput(''); setSearchTerm(''); }}
|
onClick={exitSearchMode}
|
||||||
className="text-sm text-gray-500 flex-shrink-0"
|
className="text-sm text-gray-500 flex-shrink-0"
|
||||||
>
|
>
|
||||||
취소
|
취소
|
||||||
|
|
@ -311,7 +337,7 @@ function MobileSchedule() {
|
||||||
<button onClick={() => changeCalendarMonth(1)} className="p-2">
|
<button onClick={() => changeCalendarMonth(1)} className="p-2">
|
||||||
<ChevronRight size={20} />
|
<ChevronRight size={20} />
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => setIsSearchMode(true)} className="p-2">
|
<button onClick={enterSearchMode} className="p-2">
|
||||||
<Search size={20} />
|
<Search size={20} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -340,7 +366,7 @@ function MobileSchedule() {
|
||||||
<button onClick={() => changeMonth(1)} className="p-2">
|
<button onClick={() => changeMonth(1)} className="p-2">
|
||||||
<ChevronRight size={20} />
|
<ChevronRight size={20} />
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => setIsSearchMode(true)} className="p-2">
|
<button onClick={enterSearchMode} className="p-2">
|
||||||
<Search size={20} />
|
<Search size={20} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue