[DP-403] 검색 오버레이 실시간 검색 결과 아코디언 UI 구현

[uiuuoq]

연결된 Jira 티켓

• DP-403

작업 내용

• 홈 검색 오버레이에서 입력 시 실시간 검색 결과 표시 (debounce 300ms)
• 2글자 이상 입력 시 검색 결과 영역으로 전환, 미입력 시 트렌드 영역 복귀
• 검색 결과 아코디언 UI — 한 번에 하나만 열림, 재클릭 시 닫힘
• 검색바 X 버튼으로 입력 한 번에 초기화
• 검색 결과 로딩/에러/empty 상태 UI 구현 (API 연동 대비)

주요 변경점

• types/search.ts — SearchResultItem 인터페이스 추가
  (id/title/sourceName/publishedAt/thumbnailUrl/summary/tags/url)
• lib/mock/home-search-results.ts — 검색 전용 mock 15개 + searchMockResults(query) 함수 (title·summary·tags
  전체 검색, publishedAt 최신순 정렬)
• HomeSearchResultAccordionItem.tsx — 닫힘(sourceName 배지·제목·날짜·ChevronDown) / 열림(썸네일·요약·태그·전체
  글 보기) 아코디언 아이템
• HomeSearchResultsSection.tsx — "검색 결과 (N)" 헤더 + 아코디언 목록 + isLoading 스켈레톤 + isError 메시지 +
  empty 처리
• HomeSearchOverlay.tsx — debouncedQuery/activeItemId 상태 추가, debounce effect(검색어 변경 시 아코디언
  초기화 포함), isSearching 분기, 검색바 X 버튼

테스트 방법

1. /home 진입 후 검색 오버레이 열기
2. 1글자 입력 시 트렌드 영역 유지 확인
3. 2글자 이상 입력 시 300ms 후 검색 결과 영역으로 전환 확인
4. "검색 결과 (N)" 카운트 정확한지 확인
5. 아코디언 클릭 → 열림 / 재클릭 → 닫힘 / 다른 항목 클릭 → 기존 닫히고 새 항목 열림
6. X 버튼 클릭 시 입력 초기화 및 트렌드 영역 복귀 확인
7. 검색 결과 없는 키워드 입력 시 "검색 결과가 없습니다." 표시 확인
8. 트렌딩 키워드 클릭 시 검색바에 키워드 입력되고 검색 결과 표시 확인

AI 사용 여부

• Claude Code 사용

체크리스트

• 빌드/테스트 확인
• 리뷰어 지정
• 라벨 지정