Search - FE14-Part4-Team5/global-nomad GitHub Wiki
κ²μ κ³΅ν΅ μ»΄ν¬λνΈμ λλ€.
interface SearchProps {
explaination?: string;
placeholder?: string;
onSearch?: (query: string) => void; // κ²μ λ²νΌ ν΄λ¦ μ νΈμΆλλ ν¨μ
buttonText?: string;
}
-
onSearch
ν¨μ λΆλΆμ΄ λ©μΈ propsκ° λ κ±°μμ. search λ²νΌμ λλ μ λ e.target.value κ°μΌλ‘ μΆμ λ κ°μΌλ‘ νΉμ μ νμ μ ννλ λ‘μ§μ λ겨μ€λλ€.
const handleSearch = (query: string) => {
console.log('κ²μμ΄:', query);
// μ¬κΈ°μ μ€μ κ²μ λ‘μ§μ΄λ API νΈμΆ λ£μ΄μΌ ν΄μ..!
};
return (
<div>
<Search onSearch={handleSearch} />
</div>
);
/>
κΈ°μ‘΄μ λ§λ€μ΄μ§ κ³΅ν΅ μ»΄ν¬λνΈλ₯Ό μ΅λν νμ© νλ©΄μ λΆνμν props μ λ¬μ΄ μκ²λ λ§μ μκ°μ νλ©΄μ λ§λ€μλλ°, μ μ μ¬νκ² λ³΅μ‘ν΄μ§λλΌκ΅¬μ. μ¬μ΄μ¦κ° λ€λ₯Έ κ±Έ μΌμΌμ΄ className propsλ‘ νμ₯ν΄μ λ°μμ€μλ λ무 λ¦¬ν΄ λλΉ κ³Όν 리μμ€λ₯Ό ν¬μνλ λλμ΄ λ€μμ΅λλ€. κ·Όλ° μμμ 보λκΉ μ¬μ΄μ¦λ₯Ό propsλ‘ λ°μ§ μκ³ , λ°μνμΌλ‘ μ¬μ΄μ¦κ° λ¬λΌμ§λ λΆλΆμ μΆ©λΆν ν΄κ²°ν μ μμ κ² κ°λλΌκ΅¬μ. κ·Έλμ νμ΄μ§μμ μμλ₯Ό μ μ νλ―μ΄ λ§λ€μμ΅λλ€.. μ¬λ¬λΆλ€μ λμμ΄ νμν΄μ ννν π
μ§κΈ λ보기 μμ΄μ½μ΄λ κ²μνκΈ° λ²νΌμ input μμ λ£μ΄μΌ νλλ°, input μμ μμλ₯Ό λ£μΌλ €λ©΄ absoluteλ₯Ό μ΄μ©ν΄μ λΆλͺ¨ μμμ μλμ μμΉλ‘ λ£μ΄μΌ νλλΌκ΅¬μ. 머리λ₯Ό κ΅΄λ €κ°λ©° μκ°μ ν΄λ³΄μμ§λ§ μ΅μ’ μ μΌλ‘ μ€ν¨ν΄μ μ΄ λ°©λ²μ μ ννλλ°, μ΄ λ°©ν₯μ±μ΄ λ§λμ§ νμ μ΄ λ€μ§ μμ΅λλ€ γ γ μ΄κ²λ λμμ μ£Όμ ¨μΌλ©΄ ν©λλ€ π