[Task] 검색 입력 및 디바운스 처리

[DDINGJOO]

상위 Story

• [Story] 단어장 기능 구현 #62 [Story] 단어장 기능 구현

목표

단어 검색 입력창 및 디바운스 처리 구현

화면 구성

┌─────────────────────────────────────────────────────┐
│ 🔍 단어 검색 (영어/한국어)                           │
└─────────────────────────────────────────────────────┘

API 연동

• GET /vocab/words/search?q={query}

디바운스 로직

const useDebounce = (value, delay = 300) => {
  const [debouncedValue, setDebouncedValue] = useState(value)
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)
    
    return () => clearTimeout(timer)
  }, [value, delay])
  
  return debouncedValue
}

MUI 컴포넌트

• TextField
• InputAdornment (검색 아이콘)
• CircularProgress (검색 중)

완료 조건

• SearchInput 컴포넌트 구현
• useDebounce 훅 구현
• 검색 API 연동
• 검색 중 로딩 표시