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()