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