react_basic/src/components/common/searchBar/CommonSearchBar.tsx
2025-12-16 23:31:17 +09:00

49 lines
1.8 KiB
TypeScript

// import { useState } from 'react'
// import { useRecoilState } from 'recoil'
import iconImage from '@/assets/images/icon-search.svg'
// import { searchState } from '@/recoil/atoms/searchState'
// import { pageState } from '@/recoil/atoms/pageState'
import styles from './CommonSearchBar.module.scss'
function CommonSearchBar() {
// const [, setSearch] = useRecoilState(searchState)
// const [, setPage] = useRecoilState(pageState)
// const [text, setText] = useState('')
// const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
// setText(event.target.value)
// }
// const onSearch = () => {
// if (text === '') {
// // input 태그 안에 빈 값으로 검색하였을 때 => searching default value
// setSearch('Korea')
// setPage(1)
// } else {
// setSearch(text) // 작성한 Input Value 값 할당
// setPage(1)
// }
// }
// const handleKeyDown = (event: React.KeyboardEvent) => {
// if (event.key === 'Enter') {
// if (text === '') {
// // input 태그 안에 빈 값으로 검색하였을 때 => searching default value
// setSearch('Korea')
// setPage(1)
// } else {
// setSearch(text) // 작성한 Input Value 값 할당
// setPage(1)
// }
// }
// }
return (
<div className={styles.searchBar}>
<div className={styles.searchBar__search}>
<input type="text" placeholder="찾으실 이미지를 검색하세요." className={styles.searchBar__search__input} /*value={text} onChange={onChange} onKeyDown={handleKeyDown} */ />
<img src={iconImage} alt="" /* onClick={onSearch} */ />
</div>
</div>
)
}
export default CommonSearchBar