search 지우기 버튼 추가 input 변경

This commit is contained in:
김창수 2025-05-13 16:51:58 +09:00
parent 896d89a51c
commit 9a9cc85420
2 changed files with 15 additions and 2 deletions

View File

@ -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>

View File

@ -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>