적용 코드
<CustomMainHeader />
JavaScript
복사
컴포넌트 구현 코드
export default function CustomMainHeader() {
const [searchBox, setSearchBox] = useState('searchBox');
const [closeBtn, setCloseBtn] = useState('closeBtn');
const [searchBtn, setSearchBtn] = useState('searchBtn');
const searchRef = useRef(null);
const [searchValue, setSearchValue] = useState('');
const HandleSearchValue = () => {
setSearchValue(searchRef.current.value);
};
searchUser(searchValue);
console.log(searchValue);
const HandleSearchBtn = () => {
setSearchBox('searchBox active');
setCloseBtn('closeBtn active');
setSearchBtn('searchBtn active');
};
const HandleCloseBtn = () => {
setSearchBox('searchBox');
setCloseBtn('closeBtn');
setSearchBtn('searchBtn');
setSearchValue('');
};
return (
<Header>
<Section>
<h2>INATON 피드</h2>
<div className="search">
<span className="icon">
<i
name="search-outline"
onClick={HandleSearchBtn}
className={searchBtn}>
<img src="assets/icon/search.png" alt="" />
</i>
<i
name="close-outline"
onClick={HandleCloseBtn}
className={closeBtn}>
<img src="assets/icon/icon-delete-black.png" alt="" />
</i>
</span>
</div>
<div className={searchBox}>
<input
onChange={HandleSearchValue}
ref={searchRef}
value={searchValue}
type="text"
placeholder="Search here..."
/>
</div>
</Section>
</Header>
);
}
JavaScript
복사
