search 지우기 버튼 추가 input 변경

src/components/PublishList/PublishList.tsx

@@ -213,7 +213,11 @@ export default function PublishList (){
                     <td className='c'>
                       지붕재 적합성 상세 팝업 포함
                     </td>
-                    <td className='c'>
+                    <td className='c red'>
+                      <ul>
+                        <li>2025/05/13</li>
+                        <li>* Search Input 지우기 버튼 추가가</li>
+                      </ul>
                     </td>
                     <td className='c red'>2025/05/08</td>
                   </tr>

src/components/roofcompliance/RoofCompliance.tsx

@@ -5,6 +5,13 @@ import RoofComplianceCheckData from "./RoofComplianceCheckData";
 
 export default function RoofCompliance(){
   const [reference, setReference] = useState(false);
+    const [searchValue, setSearchValue] = useState(''); //search 데이터 유무
+
+  //search 데이터 value 추가
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { 
+    setSearchValue(e.target.value);
+  };
+  
   return(
     <div className="border-frame">
       <div className="sale-form-bx">
@@ -18,7 +25,9 @@ export default function RoofCompliance(){
       </div>
       <div className="sale-form-bx">
         <div className="search-input">
-          <input type="text" className="search-frame" placeholder="屋根材 製品名を入力してください."/>
+          <input type="text" className="search-frame" value={searchValue} onChange={handleChange} placeholder="Search"/>
+          {/*input에 데이터 있으면 삭제버튼 보임 */}
+          {searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
           <button className="search-icon"></button>
         </div>
       </div>