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

@ -27,6 +27,32 @@ function MobileSchedule() {
const [calendarViewDate, setCalendarViewDate] = useState(() => new Date(selectedDate)); //
const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); //
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) => {
@ -257,7 +283,7 @@ function MobileSchedule() {
)}
</div>
<button
onClick={() => { setIsSearchMode(false); setSearchInput(''); setSearchTerm(''); }}
onClick={exitSearchMode}
className="text-sm text-gray-500 flex-shrink-0"
>
취소
@ -311,7 +337,7 @@ function MobileSchedule() {
<button onClick={() => changeCalendarMonth(1)} className="p-2">
<ChevronRight size={20} />
</button>
<button onClick={() => setIsSearchMode(true)} className="p-2">
<button onClick={enterSearchMode} className="p-2">
<Search size={20} />
</button>
</div>
@ -340,7 +366,7 @@ function MobileSchedule() {
<button onClick={() => changeMonth(1)} className="p-2">
<ChevronRight size={20} />
</button>
<button onClick={() => setIsSearchMode(true)} className="p-2">
<button onClick={enterSearchMode} className="p-2">
<Search size={20} />
</button>
</div>