feat: 모바일 일정 검색 UX 개선
- 입력 시마다 검색 → 키패드 검색 버튼 눌러야 검색으로 변경 - searchInput과 searchTerm 분리 - type='search', enterKeyHint='search' 추가로 모바일 키보드 최적화 - 취소 버튼 잘림 현상 수정 (flex-shrink-0, min-w-0)
This commit is contained in:
parent
0efa0a8e5c
commit
b35dab5eea
1 changed files with 21 additions and 12 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue