diff --git a/frontend/src/pages/mobile/public/Schedule.jsx b/frontend/src/pages/mobile/public/Schedule.jsx index 839517e..40c18d3 100644 --- a/frontend/src/pages/mobile/public/Schedule.jsx +++ b/frontend/src/pages/mobile/public/Schedule.jsx @@ -33,6 +33,8 @@ function MobileSchedule() { const [originalSearchQuery, setOriginalSearchQuery] = useState(''); // 필터링용 원본 쿼리 const [suggestions, setSuggestions] = useState([]); // 추천 검색어 목록 const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false); + const [lastSearchTerm, setLastSearchTerm] = useState(''); // 마지막 검색어 (복원용) + const [showSuggestionsScreen, setShowSuggestionsScreen] = useState(false); // 추천 검색어 화면 표시 여부 // 검색 모드 진입 함수 (history 상태 추가) const enterSearchMode = () => { @@ -46,22 +48,37 @@ function MobileSchedule() { setSearchInput(''); setOriginalSearchQuery(''); setSearchTerm(''); + setLastSearchTerm(''); setShowSuggestions(false); + setShowSuggestionsScreen(false); setSelectedSuggestionIndex(-1); }; + // 추천 검색어 화면 숨기고 검색 결과로 돌아가기 + const hideSuggestionsScreen = () => { + setShowSuggestionsScreen(false); + setSearchInput(lastSearchTerm); // 검색어 복원 + setOriginalSearchQuery(lastSearchTerm); + }; + // 뒤로가기 버튼 처리 useEffect(() => { const handlePopState = (e) => { if (isSearchMode) { - // 검색 모드에서 뒤로가기 시 검색 모드 종료 - exitSearchMode(); + // 추천 검색어 화면이고 검색 결과가 있으면 → 검색 결과로 돌아가기 + if (showSuggestionsScreen && searchTerm) { + hideSuggestionsScreen(); + window.history.pushState({ searchMode: true }, ''); + } else { + // 그 외에는 검색 모드 종료 + exitSearchMode(); + } } }; window.addEventListener('popstate', handlePopState); return () => window.removeEventListener('popstate', handlePopState); - }, [isSearchMode]); + }, [isSearchMode, showSuggestionsScreen, searchTerm, lastSearchTerm]); // 달력 월 변경 함수 const changeCalendarMonth = (delta) => { @@ -111,15 +128,16 @@ function MobileSchedule() { // 검색어 변경 시 스크롤 위치 초기화 useEffect(() => { - if (searchTerm) { - // virtualizer 스크롤 초기화 - virtualizer.scrollToOffset(0); - // DOM 스크롤도 초기화 (fallback) - if (scrollContainerRef.current) { - scrollContainerRef.current.scrollTop = 0; - } + if (searchTerm && !showSuggestionsScreen) { + // 약간의 지연 후 스크롤 초기화 (렌더링 완료 후) + requestAnimationFrame(() => { + virtualizer.scrollToOffset(0); + if (scrollContainerRef.current) { + scrollContainerRef.current.scrollTop = 0; + } + }); } - }, [searchTerm]); + }, [searchTerm, showSuggestionsScreen]); useEffect(() => { if (inView && hasNextPage && !isFetchingNextPage && isSearchMode && searchTerm) { @@ -326,14 +344,18 @@ function MobileSchedule() { setSearchInput(e.target.value); setOriginalSearchQuery(e.target.value); setShowSuggestions(true); + setShowSuggestionsScreen(true); setSelectedSuggestionIndex(-1); }} - onFocus={() => setShowSuggestions(true)} + onFocus={() => { + setShowSuggestions(true); + setShowSuggestionsScreen(true); + }} onKeyDown={(e) => { if (e.key === 'ArrowDown') { e.preventDefault(); - const newIndex = selectedSuggestionIndex < suggestions.length - 1 - ? selectedSuggestionIndex + 1 + const newIndex = selectedSuggestionIndex < suggestions.length - 1 + ? selectedSuggestionIndex + 1 : 0; setSelectedSuggestionIndex(newIndex); if (suggestions[newIndex]) { @@ -341,8 +363,8 @@ function MobileSchedule() { } } else if (e.key === 'ArrowUp') { e.preventDefault(); - const newIndex = selectedSuggestionIndex > 0 - ? selectedSuggestionIndex - 1 + const newIndex = selectedSuggestionIndex > 0 + ? selectedSuggestionIndex - 1 : suggestions.length - 1; setSelectedSuggestionIndex(newIndex); if (suggestions[newIndex]) { @@ -350,11 +372,14 @@ function MobileSchedule() { } } else if (e.key === 'Enter') { e.preventDefault(); - if (selectedSuggestionIndex >= 0 && suggestions[selectedSuggestionIndex]) { - setSearchInput(suggestions[selectedSuggestionIndex]); - setSearchTerm(suggestions[selectedSuggestionIndex]); - } else if (searchInput.trim()) { - setSearchTerm(searchInput); + const term = selectedSuggestionIndex >= 0 && suggestions[selectedSuggestionIndex] + ? suggestions[selectedSuggestionIndex] + : searchInput.trim(); + if (term) { + setSearchInput(term); + setSearchTerm(term); + setLastSearchTerm(term); // 검색어 저장 + setShowSuggestionsScreen(false); } setShowSuggestions(false); setSelectedSuggestionIndex(-1); @@ -366,14 +391,15 @@ function MobileSchedule() { autoFocus={!searchTerm} /> {searchInput && ( - - ))} + {yearRange.map(y => { + const isCurrentYear = y === new Date().getFullYear(); + return ( + + ); + })} {/* 월 선택 */}
- {Array.from({ length: 12 }, (_, i) => i + 1).map(m => ( - - ))} + {Array.from({ length: 12 }, (_, i) => i + 1).map(m => { + const today = new Date(); + const isCurrentMonth = year === today.getFullYear() && m === today.getMonth() + 1; + return ( + + ); + })}
) : (