Search - FE14-Part4-Team5/global-nomad GitHub Wiki

Search

검색 곡톡 μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€.


βœ… Props

interface SearchProps {
  explaination?: string;
  placeholder?: string;
  onSearch?: (query: string) => void; // 검색 λ²„νŠΌ 클릭 μ‹œ ν˜ΈμΆœλ˜λŠ” ν•¨μˆ˜
  buttonText?: string;
}

πŸ”„ λ™μž‘ 방식

  • onSearch ν•¨μˆ˜ 뢀뢄이 메인 propsκ°€ 될 κ±°μ—μš”. search λ²„νŠΌμ„ λˆŒλ €μ„ λ•Œ e.target.value κ°’μœΌλ‘œ μΆ”μ λœ κ°’μœΌλ‘œ νŠΉμ • μ œν’ˆμ„ μ„ νƒν•˜λŠ” λ‘œμ§μ„ λ„˜κ²¨μ€λ‹ˆλ‹€.

🧾 μ‚¬μš© μ˜ˆμ‹œ

image

   const handleSearch = (query: string) => {
    console.log('검색어:', query);
    // μ—¬κΈ°μ„œ μ‹€μ œ 검색 λ‘œμ§μ΄λ‚˜ API 호좜 λ„£μ–΄μ•Ό ν•΄μš”..!
  };

  return (
    <div>
      <Search onSearch={handleSearch} />
    </div>
  );
/>

etc.

문제 1. ꡬ쑰에 λŒ€ν•œ 어렀움

기쑴에 λ§Œλ“€μ–΄μ§„ 곡톡 μ»΄ν¬λ„ŒνŠΈλ₯Ό μ΅œλŒ€ν•œ ν™œμš© ν•˜λ©΄μ„œ λΆˆν•„μš”ν•œ props 전달이 μ—†κ²Œλ” λ§Žμ€ 생각을 ν•˜λ©΄μ„œ λ§Œλ“€μ—ˆλŠ”λ°, 점점 μ‹¬ν•˜κ²Œ λ³΅μž‘ν•΄μ§€λ”λΌκ΅¬μš”. μ‚¬μ΄μ¦ˆκ°€ λ‹€λ₯Έ κ±Έ 일일이 className props둜 ν™•μž₯ν•΄μ„œ λ°›μ•„μ˜€μžλ‹ˆ λ„ˆλ¬΄ 리턴 λŒ€λΉ„ κ³Όν•œ λ¦¬μ†ŒμŠ€λ₯Ό νˆ¬μžν•˜λŠ” λŠλ‚Œμ΄ λ“€μ—ˆμŠ΅λ‹ˆλ‹€. 근데 μ‹œμ•ˆμ„ λ³΄λ‹ˆκΉŒ μ‚¬μ΄μ¦ˆλ₯Ό props둜 λ°›μ§€ μ•Šκ³ , λ°˜μ‘ν˜•μœΌλ‘œ μ‚¬μ΄μ¦ˆκ°€ λ‹¬λΌμ§€λŠ” 뢀뢄을 μΆ©λΆ„νžˆ ν•΄κ²°ν•  수 μžˆμ„ 것 κ°™λ”λΌκ΅¬μš”. κ·Έλž˜μ„œ νŽ˜μ΄μ§€μ—μ„œ μš”μ†Œλ₯Ό μ œμž‘ ν•˜λ“―μ΄ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.. μ—¬λŸ¬λΆ„λ“€μ˜ 도움이 ν•„μš”ν•΄μš” 흑흑흑 😭

문제 2. absolute 배치

μ§€κΈˆ 돋보기 μ•„μ΄μ½˜μ΄λž‘ κ²€μƒ‰ν•˜κΈ° λ²„νŠΌμ„ input μ•ˆμ— λ„£μ–΄μ•Ό ν•˜λŠ”λ°, input μ•ˆμ— μš”μ†Œλ₯Ό λ„£μœΌλ €λ©΄ absoluteλ₯Ό μ΄μš©ν•΄μ„œ λΆ€λͺ¨ μš”μ†Œμ˜ μƒλŒ€μ  μœ„μΉ˜λ‘œ λ„£μ–΄μ•Ό ν•˜λ”λΌκ΅¬μš”. 머리λ₯Ό κ΅΄λ €κ°€λ©° 생각을 ν•΄λ³΄μ•˜μ§€λ§Œ μ΅œμ’…μ μœΌλ‘  μ‹€νŒ¨ν•΄μ„œ 이 방법을 μ„ νƒν–ˆλŠ”λ°, 이 λ°©ν–₯성이 λ§žλŠ”μ§€ 확신이 λ“€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€ γ… γ…  이것도 도움을 μ£Όμ…¨μœΌλ©΄ ν•©λ‹ˆλ‹€ 😭

⚠️ **GitHub.com Fallback** ⚠️