From b35dab5eea30b997e7b7a7a0b1301a598d959e6b Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sat, 10 Jan 2026 10:05:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=20=EA=B2=80=EC=83=89=20UX=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 입력 시마다 검색 → 키패드 검색 버튼 눌러야 검색으로 변경
- searchInput과 searchTerm 분리
- type='search', enterKeyHint='search' 추가로 모바일 키보드 최적화
- 취소 버튼 잘림 현상 수정 (flex-shrink-0, min-w-0)
---
 frontend/src/pages/mobile/public/Schedule.jsx | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/mobile/public/Schedule.jsx b/frontend/src/pages/mobile/public/Schedule.jsx
index 76918b8..144a825 100644
--- a/frontend/src/pages/mobile/public/Schedule.jsx
+++ b/frontend/src/pages/mobile/public/Schedule.jsx
@@ -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>