feat: BookSearchBottomSheet 실제 검색 API 연동

[ljh130334]

#️⃣ 연관된 이슈

생략

📝 작업 내용

BookSearchBottomSheet 컴포넌트의 검색 기능을 실제 API와 연동하도록 개선했습니다. 기존에는 검색 버튼 클릭 시 단순히 console.log만 출력하고 있었으나, 이제 실제 책 검색 API를 호출하여 검색 결과를 표시합니다.

🕸️ 주요 변경사항

1. 실제 검색 API 연동: getSearchBooks API를 사용하여 실제 책 검색이 가능하도록 구현했습니다. 기존 Search 페이지에서 사용하고 있는 검증된 검색 로직을 참고하여 동일한 API 호출 방식을 적용했습니다.
2. 디바운싱 적용: 사용자가 검색어를 입력할 때마다 즉시 API를 호출하지 않고 300ms 지연 후 자동으로 검색하도록 디바운싱을 적용하여 성능을 최적화했습니다. 이를 통해 불필요한 API 호출을 방지하고 사용자 경험을 개선했습니다.
3. 검색 상태 관리 개선: 검색 모드와 저장된 책 탭 모드를 명확히 분리했습니다. 검색어가 있을 때는 검색 결과를 표시하고, 검색어가 없을 때는 기존의 저장된 책/모임 책 탭을 표시하도록 로직을 개선했습니다.
4. 검색 버튼 기능 구현: 기존에 console.log('검색:', searchQuery)만 출력하던 handleSearch 함수를 실제 검색을 수행하도록 수정했습니다. 이제 검색 버튼 클릭 시와 Enter 키 입력 시 모두 정상적으로 검색이 동작합니다.
5. 타입 안정성 강화: SearchedBook 타입을 추가로 import하고, 검색 결과를 Book 타입으로 변환하는 함수를 구현하여 기존 BookList 컴포넌트와의 호환성을 유지했습니다.

기술적 세부사항

• useBookSearch 훅에 검색 관련 상태(searchResults, searchTimeoutId) 추가
• performSearch 함수를 통해 실제 API 호출 및 에러 처리 구현
• handleSearchQueryChange 함수에서 디바운싱 로직 구현
• useEffect를 통한 메모리 누수 방지(타이머 정리)

Summary by CodeRabbit

• New Features
  • 책 검색 바텀시트에 전체 텍스트 검색을 도입하여 원하는 책을 빠르게 찾을 수 있습니다.
  • 검색어 입력 시 디바운싱으로 불필요한 요청을 줄이고 더 부드러운 검색 경험을 제공합니다.
  • 검색 결과가 목록으로 표시되며, 로딩 상태와 오류 상태가 명확하게 안내됩니다.
  • 검색 중에는 기존 탭이 숨겨져 결과에 집중할 수 있습니다.
  • 빈 검색어일 때는 기존 저장/그룹 책 목록이 표시됩니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

• BookSearchBottomSheet now triggers actual searches via a new performSearch method exposed by useBookSearch.
• useBookSearch adds debounced full-text search with API calls, result conversion, search state, and mode toggling; cleans up timers on unmount.
• Public API changes: setSearchQuery now accepts a string; new performSearch(query) is exposed.

Changes

Cohort / File(s)	Summary
Bottom sheet wiring src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx	Replaces console logging with conditional performSearch invocation on non-empty trimmed queries; integrates with updated hook API.
Search hook overhaul src/components/common/BookSearchBottomSheet/useBookSearch.ts	Adds debounced search flow using getSearchBooks; introduces searchResults state, loading/error handling, and cleanup; maps SearchedBook to Book; toggles UI mode (search vs saved/group); updates API: setSearchQuery(query: string) and new performSearch(query: string): Promise.

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant BottomSheet as BookSearchBottomSheet
  participant Hook as useBookSearch
  participant API as getSearchBooks
  participant Conv as convertToSearchedBooks
  participant State as State/UI

  User->>BottomSheet: Type query
  BottomSheet->>Hook: setSearchQuery(query)
  Hook->>Hook: Debounce timer
  Hook->>Hook: performSearch(trimmedQuery)
  Hook->>API: fetch results
  API-->>Hook: results
  Hook->>Conv: convert results
  Conv-->>Hook: SearchedBook[]
  Hook->>State: update searchResults, loading=false
  State-->>BottomSheet: render search mode list

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• feat: 저장한 책 또는 참여 중 모임의 책 조회 API 연동 #121 — Prior introduction of useBookSearch; this PR modifies its public API and integrates search triggering in the bottom sheet.

Poem

토끼는 귀를 쫑긋, “검색!” 하고 뛰네 🐇
로그 대신 바람처럼 쿼리를 띄우네
딱-딱-딱, 디바운스 북 소리 가볍게—
결과를 모아 책장을 펼치네 📚
새 갈림길, 저장 혹은 검색의 길—
오늘도 빠르게, 정확히, 힙하게!

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 4e3b679 and 3cbf785.

📒 Files selected for processing (2)

• src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx (2 hunks)
• src/components/common/BookSearchBottomSheet/useBookSearch.ts (6 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/search-hotfix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thip	Ready	Preview	Comment	Aug 18, 2025 3:54pm