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 [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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue