refactor: 검색조건 컴포넌트 분리

src/components/suitable/Suitable.tsx

@@ -3,30 +3,13 @@
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import SuitableList from './SuitableList'
+import SuitableSearch from './SuitableSearch'
 import { useSuitable } from '@/hooks/useSuitable'
-import { useSuitableStore } from '@/store/useSuitableStore'
-import type { CommCode } from '@/types/CommCode'
-import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export default function Suitable() {
   const [reference, setReference] = useState(true)
-  const [searchValue, setSearchValue] = useState('')
 
   const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
-  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
-
-  const handleInputSearch = async () => {
-    if (!searchValue.trim()) {
-      alert('屋根材の製品名を入力してください。')
-      return
-    }
-    setSearchKeyword(searchValue)
-  }
-
-  const handleInputClear = () => {
-    setSearchValue('')
-    clearSuitableSearch({ items: true, keyword: true})
-  }
 
   useEffect(() => {
     getSuitableCommCode()
@@ -37,34 +20,7 @@ export default function Suitable() {
 
   return (
     <div className="border-frame">
-      <div className="sale-form-bx">
+      <SuitableSearch />
-        <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
-          <option value="">屋根材を選択してください.</option>
-          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATERIAL_GROUP)?.map((category: CommCode, index: number) => (
-            <option key={index} value={category.code}>
-              {category.codeJp}
-            </option>
-          ))}
-        </select>
-      </div>
-      <div className="sale-form-bx">
-        <div className="search-input">
-          <input
-            type="text"
-            className="search-frame"
-            placeholder="屋根材 製品名を入力してください."
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                handleInputSearch()
-              }
-            }}
-          />
-          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
-          <button className="search-icon" onClick={handleInputSearch} />
-        </div>
-      </div>
       <div className="compliance-check-wrap">
         <div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
           <div className="check-name-wrap">

src/components/suitable/SuitableSearch.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import type { CommCode } from '@/types/CommCode'
+import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
+
+export default function SuitableSearch() {
+  const [searchValue, setSearchValue] = useState('')
+
+  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
+  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
+
+  const handleInputSearch = async () => {
+    if (!searchValue.trim()) {
+      alert('屋根材の製品名を入力してください。')
+      return
+    }
+    setSearchKeyword(searchValue)
+  }
+
+  const handleInputClear = () => {
+    setSearchValue('')
+    clearSuitableSearch({ items: true, keyword: true })
+  }
+
+  useEffect(() => {
+    getSuitableCommCode()
+    return () => {
+      clearSuitableSearch({ items: true, category: true, keyword: true })
+    }
+  }, [])
+
+  return (
+    <>
+      <div className="sale-form-bx">
+        <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
+          <option value="">屋根材を選択してください.</option>
+          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATERIAL_GROUP)?.map((category: CommCode, index: number) => (
+            <option key={index} value={category.code}>
+              {category.codeJp}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="sale-form-bx">
+        <div className="search-input">
+          <input
+            type="text"
+            className="search-frame"
+            placeholder="屋根材 製品名を入力してください."
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleInputSearch()
+              }
+            }}
+          />
+          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
+          <button className="search-icon" onClick={handleInputSearch} />
+        </div>
+      </div>
+    </>
+  )
+}