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 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 newDate = new Date(calendarViewDate);
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue