@designbasekorea/ui 0.1.42 → 0.1.44

package/dist/index.umd.js

@@ -8145,10 +8145,48 @@
                     })), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
     };
 
-    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
+    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
         const [internalValue, setInternalValue] = React.useState(defaultValue);
+        const [recentSearches, setRecentSearches] = React.useState([]);
+        const [showRecentSearches, setShowRecentSearches] = React.useState(false);
+        const [currentSuggestion, setCurrentSuggestion] = React.useState(0);
+        const [isFocused, setIsFocused] = React.useState(false);
         const inputRef = React.useRef(null);
+        const suggestionIntervalRef = React.useRef(null);
         const currentValue = value !== undefined ? value : internalValue;
+        // 최근 검색어 로드
+        React.useEffect(() => {
+            if (enableRecentSearches) {
+                try {
+                    const stored = localStorage.getItem(recentSearchesKey);
+                    if (stored) {
+                        setRecentSearches(JSON.parse(stored));
+                    }
+                }
+                catch (error) {
+                    console.warn('최근 검색어를 불러올 수 없습니다:', error);
+                }
+            }
+        }, [enableRecentSearches, recentSearchesKey]);
+        // 추천 검색어 롤링 (포커스 없이도 계속)
+        React.useEffect(() => {
+            if (suggestedSearches.length > 0 && !currentValue) {
+                suggestionIntervalRef.current = setInterval(() => {
+                    setCurrentSuggestion(prev => (prev + 1) % suggestedSearches.length);
+                }, suggestionRollingInterval);
+            }
+            else {
+                if (suggestionIntervalRef.current) {
+                    clearInterval(suggestionIntervalRef.current);
+                    suggestionIntervalRef.current = null;
+                }
+            }
+            return () => {
+                if (suggestionIntervalRef.current) {
+                    clearInterval(suggestionIntervalRef.current);
+                }
+            };
+        }, [suggestedSearches.length, currentValue, suggestionRollingInterval]);
         React.useEffect(() => {
             if (value !== undefined) {
                 setInternalValue(value);
@@ -8164,9 +8202,24 @@
             onChange?.('');
             inputRef.current?.focus();
         };
-        const handleSearch = () => {
-            if (currentValue.trim()) {
-                onSearch?.(currentValue.trim());
+        const handleSearch = (searchValue) => {
+            const searchTerm = searchValue || currentValue.trim();
+            if (searchTerm) {
+                onSearch?.(searchTerm);
+                // 최근 검색어 저장
+                if (enableRecentSearches) {
+                    const newRecentSearches = [
+                        searchTerm,
+                        ...recentSearches.filter(item => item !== searchTerm)
+                    ].slice(0, 10); // 최대 10개
+                    setRecentSearches(newRecentSearches);
+                    try {
+                        localStorage.setItem(recentSearchesKey, JSON.stringify(newRecentSearches));
+                    }
+                    catch (error) {
+                        console.warn('최근 검색어를 저장할 수 없습니다:', error);
+                    }
+                }
             }
         };
         const handleKeyDown = (e) => {
@@ -8175,6 +8228,49 @@
             }
             onKeyDown?.(e);
         };
+        const handleFocus = (e) => {
+            setIsFocused(true);
+            setShowRecentSearches(enableRecentSearches && recentSearches.length > 0);
+            onFocus?.(e);
+        };
+        const handleBlur = (e) => {
+            setIsFocused(false);
+            // 약간의 지연을 두어 클릭 이벤트가 처리되도록 함
+            setTimeout(() => {
+                setShowRecentSearches(false);
+            }, 200);
+            onBlur?.(e);
+        };
+        const handleRecentSearchClick = (searchTerm) => {
+            setInternalValue(searchTerm);
+            onChange?.(searchTerm);
+            setShowRecentSearches(false);
+            handleSearch(searchTerm);
+        };
+        const handleRemoveRecentSearch = (searchTerm) => {
+            const newRecentSearches = recentSearches.filter(item => item !== searchTerm);
+            setRecentSearches(newRecentSearches);
+            try {
+                localStorage.setItem(recentSearchesKey, JSON.stringify(newRecentSearches));
+            }
+            catch (error) {
+                console.warn('최근 검색어를 삭제할 수 없습니다:', error);
+            }
+        };
+        const handleClearAllRecentSearches = () => {
+            setRecentSearches([]);
+            try {
+                localStorage.removeItem(recentSearchesKey);
+            }
+            catch (error) {
+                console.warn('최근 검색어를 모두 삭제할 수 없습니다:', error);
+            }
+        };
+        const handleSuggestionClick = (suggestion) => {
+            setInternalValue(suggestion);
+            onChange?.(suggestion);
+            handleSearch(suggestion);
+        };
         const classes = clsx('designbase-search-bar', `designbase-search-bar--${size}`, `designbase-search-bar--${variant}`, {
             'designbase-search-bar--disabled': disabled,
             'designbase-search-bar--readonly': readOnly,
@@ -8185,7 +8281,13 @@
             'designbase-search-bar__input--disabled': disabled,
             'designbase-search-bar__input--readonly': readOnly,
         });
-        return (jsxRuntime.jsx("div", { className: classes, role: "search", children: jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...props }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }) }));
+        // 현재 플레이스홀더 (추천 검색어가 있으면 롤링)
+        const currentPlaceholder = suggestedSearches.length > 0 && !currentValue
+            ? suggestedSearches[currentSuggestion]
+            : placeholder;
+        return (jsxRuntime.jsxs("div", { className: classes, role: "search", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...props }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsxRuntime.jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onClick: handleClearAllRecentSearches, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsxRuntime.jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsxRuntime.jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsxRuntime.jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
+                                    'designbase-search-bar__suggestion-item--active': index === currentSuggestion
+                                }), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) })] }))] }));
     };
     SearchBar.displayName = 'SearchBar';