diff --git a/src/components/suitable/SuitableSearch.tsx b/src/components/suitable/SuitableSearch.tsx index 1337ced..8b4a883 100644 --- a/src/components/suitable/SuitableSearch.tsx +++ b/src/components/suitable/SuitableSearch.tsx @@ -12,6 +12,15 @@ export default function SuitableSearch() { const { getSuitableCommCode, clearSuitableSearch } = useSuitable() const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore() + const handleInputChange = (value: string) => { + if (Array.from(value).length > 30) { + alert('検索ワードは最大30文字まで入力できます。') + setSearchValue(value.slice(0, 30)) + return + } + setSearchValue(value) + } + const handleInputSearch = async () => { if (!searchValue.trim()) { alert('屋根材の製品名を入力してください。') @@ -51,7 +60,7 @@ export default function SuitableSearch() { className="search-frame" placeholder="屋根材 製品名を入力してください." value={searchValue} - onChange={(e) => setSearchValue(e.target.value)} + onChange={(e) => handleInputChange(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { handleInputSearch()