feat: 모바일 일정 검색 UX 개선

- 입력 시마다 검색 → 키패드 검색 버튼 눌러야 검색으로 변경
- searchInput과 searchTerm 분리
- type='search', enterKeyHint='search' 추가로 모바일 키보드 최적화
- 취소 버튼 잘림 현상 수정 (flex-shrink-0, min-w-0)
This commit is contained in:
caadiq 2026-01-10 10:05:56 +09:00
parent 0efa0a8e5c
commit b35dab5eea

View file

@ -12,7 +12,8 @@ function MobileSchedule() {
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [isSearchMode, setIsSearchMode] = useState(false); const [isSearchMode, setIsSearchMode] = useState(false);
const [searchTerm, setSearchTerm] = useState(''); const [searchInput, setSearchInput] = useState(''); //
const [searchTerm, setSearchTerm] = useState(''); //
const [showCalendar, setShowCalendar] = useState(false); const [showCalendar, setShowCalendar] = useState(false);
const [calendarViewDate, setCalendarViewDate] = useState(() => new Date(selectedDate)); // const [calendarViewDate, setCalendarViewDate] = useState(() => new Date(selectedDate)); //
const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); // const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); //
@ -199,26 +200,34 @@ function MobileSchedule() {
{/* 툴바 (헤더 + 날짜 선택기) */} {/* 툴바 (헤더 + 날짜 선택기) */}
<div className="mobile-toolbar-schedule shadow-sm z-50"> <div className="mobile-toolbar-schedule shadow-sm z-50">
{isSearchMode ? ( {isSearchMode ? (
<div className="flex items-center gap-2 px-4 py-3"> <div className="flex items-center gap-3 px-4 py-3">
<div className="flex-1 flex items-center gap-2 bg-gray-100 rounded-full px-4 py-2"> <div className="flex-1 flex items-center gap-2 bg-gray-100 rounded-full px-4 py-2 min-w-0">
<Search size={18} className="text-gray-400" /> <Search size={18} className="text-gray-400 flex-shrink-0" />
<input <input
type="text" type="search"
inputMode="search"
enterKeyHint="search"
placeholder="일정 검색..." placeholder="일정 검색..."
value={searchTerm} value={searchInput}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchInput(e.target.value)}
className="flex-1 bg-transparent outline-none text-sm" onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
setSearchTerm(searchInput);
}
}}
className="flex-1 bg-transparent outline-none text-sm min-w-0"
autoFocus autoFocus
/> />
{searchTerm && ( {searchInput && (
<button onClick={() => setSearchTerm('')}> <button onClick={() => { setSearchInput(''); setSearchTerm(''); }} className="flex-shrink-0">
<X size={18} className="text-gray-400" /> <X size={18} className="text-gray-400" />
</button> </button>
)} )}
</div> </div>
<button <button
onClick={() => { setIsSearchMode(false); setSearchTerm(''); }} onClick={() => { setIsSearchMode(false); setSearchInput(''); setSearchTerm(''); }}
className="text-sm text-gray-500 flex-shrink-0 whitespace-nowrap" className="text-sm text-gray-500 flex-shrink-0"
> >
취소 취소
</button> </button>