feat: 모바일 검색 뒤로가기 버튼 처리

- enterSearchMode()에서 history.pushState로 히스토리 상태 추가
- popstate 이벤트로 뒤로가기 시 검색 모드 종료
- 이전 페이지로 이동하지 않고 일정 화면으로 복귀
This commit is contained in:
caadiq 2026-01-10 10:28:21 +09:00
parent 0521e3d0ec
commit 83e3689f02

View file

@ -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>