+
+ {
+ setSearchInput(e.target.value);
+ setOriginalSearchQuery(e.target.value);
+ setShowSuggestions(true);
+ setSelectedSuggestionIndex(-1);
+ }}
+ onFocus={() => setShowSuggestions(true)}
+ onKeyDown={(e) => {
+ // 필터링은 원본 쿼리 기준으로 유지
+ const dummySuggestions = ['성수기', '성수기 이채영', '이채영 먹방', 'NOW TOMORROW', '하얀 그리움', '콘서트', '월드투어'].filter(s =>
+ s.toLowerCase().includes(originalSearchQuery.toLowerCase())
+ ).slice(0, 7);
+
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ const newIndex = selectedSuggestionIndex < dummySuggestions.length - 1
+ ? selectedSuggestionIndex + 1
+ : 0;
+ setSelectedSuggestionIndex(newIndex);
+ if (dummySuggestions[newIndex]) {
+ setSearchInput(dummySuggestions[newIndex]);
+ }
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ const newIndex = selectedSuggestionIndex > 0
+ ? selectedSuggestionIndex - 1
+ : dummySuggestions.length - 1;
+ setSelectedSuggestionIndex(newIndex);
+ if (dummySuggestions[newIndex]) {
+ setSearchInput(dummySuggestions[newIndex]);
+ }
+ } else if (e.key === 'Enter') {
+ if (selectedSuggestionIndex >= 0 && dummySuggestions[selectedSuggestionIndex]) {
+ setSearchInput(dummySuggestions[selectedSuggestionIndex]);
+ setSearchTerm(dummySuggestions[selectedSuggestionIndex]);
+ } else if (searchInput.trim()) {
+ setSearchTerm(searchInput);
+ }
+ setShowSuggestions(false);
+ setSelectedSuggestionIndex(-1);
+ } else if (e.key === 'Escape') {
+ setIsSearchMode(false);
+ setSearchInput('');
+ setOriginalSearchQuery('');
+ setSearchTerm('');
+ setShowSuggestions(false);
+ setSelectedSuggestionIndex(-1);
+ setSearchResults([]);
+ }
+ }}
+ className="flex-1 bg-transparent focus:outline-none text-gray-700 placeholder-gray-400"
+ />
+
+
+
+ {/* 검색어 추천 드롭다운 */}
+ {showSuggestions && originalSearchQuery.length > 0 && (
+
+ {(() => {
+ const dummySuggestions = ['성수기', '성수기 이채영', '이채영 먹방', 'NOW TOMORROW', '하얀 그리움', '콘서트', '월드투어'].filter(s =>
+ s.toLowerCase().includes(originalSearchQuery.toLowerCase())
+ ).slice(0, 7);
+
+ if (dummySuggestions.length === 0) {
+ return (
+
+ 추천 검색어가 없습니다
+
+ );
+ }
+
+ return dummySuggestions.map((suggestion, index) => (
+
+ ));
+ })()}
+
+ )}
+