feat: 모임 생성 시 책 선택에서 모임 책 탭 숨김 처리

[ljh130334]

#️⃣ 연관된 이슈

#289

📝 작업 내용

모임 만들기 시 책 선택 바텀 시트에서 "모임 책" 탭을 제거하고, "저장한 책" 탭만 표시되도록 개선했습니다.

주요 변경사항

1️⃣ BookSearchTabs 컴포넌트 개선

• showGroupTab prop 추가 (기본값: true)
• "모임 책" 탭을 조건부로 렌더링하도록 수정
• 기존 다른 페이지에서는 기본값으로 두 탭 모두 표시

2️⃣ useBookSearch 훅 파라미터 추가

• showGroupTab 파라미터 추가하여 모임 책 관련 로직 제어
• 모임 책 탭이 숨겨진 경우에도 기존 로직은 모두 유지 (다른 페이지 호환성)
• 초기 데이터 로드 시 showGroupTab 값에 따라 조건부 로드

3️⃣ BookSearchBottomSheet 컴포넌트 업데이트

• showGroupTab prop 추가하여 상위 컴포넌트에서 제어 가능하도록 수정
• 하위 컴포넌트(BookSearchTabs, useBookSearch)에 prop 전달

4️⃣ CreateGroup 페이지 적용

• BookSearchBottomSheet에 showGroupTab={false} 전달
• 모임 생성 시에만 "저장한 책" 탭만 표시

변경된 파일

• src/components/common/BookSearchBottomSheet/BookSearchTabs.tsx
• src/components/common/BookSearchBottomSheet/useBookSearch.ts
• src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx
• src/pages/group/CreateGroup.tsx

기능 영향 범위

• ✅ 모임 생성 페이지: "저장한 책" 탭만 표시
• ✅ 기타 페이지: 기존처럼 "저장한 책", "모임 책" 탭 모두 표시
• ✅ 저장한 책 표시 및 무한 스크롤 정상 작동
• ✅ 모임 책 표시 및 무한 스크롤 정상 작동 (showGroupTab=true인 경우)
• ✅ 책 검색 기능 정상 작동
• ✅ 기존 코드 호환성 유지 (기본값으로 모든 기능 동작)

Summary by CodeRabbit

새로운 기능

• 도서 검색 화면에서 그룹 탭을 선택적으로 표시하거나 숨길 수 있도록 개선되었습니다. 일부 페이지에서는 그룹 탭이 기본적으로 비활성화됩니다.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
thip	Ready	Preview	Comment	Oct 31, 2025 7:42am

[coderabbitai]

Walkthrough

북 검색 기능에 showGroupTab 선택적 속성을 추가하여 그룹 탭의 조건부 렌더링 및 데이터 로딩을 제어합니다. CreateGroup 페이지에서는 이 속성을 false로 설정하여 그룹 탭을 숨깁니다.

Changes

Cohort / File(s)	Change Summary
BookSearchBottomSheet 컴포넌트 확장 src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx, src/components/common/BookSearchBottomSheet/BookSearchTabs.tsx, src/components/common/BookSearchBottomSheet/useBookSearch.ts	showGroupTab 선택적 부울 속성을 추가하여 그룹 탭의 렌더링 및 데이터 로딩을 제어합니다. 각 계층에서 prop을 스레딩하고, useBookSearch 훅에서 그룹 데이터 로딩을 가드 처리합니다.
CreateGroup 페이지 업데이트 src/pages/group/CreateGroup.tsx	BookSearchBottomSheet 컴포넌트에 showGroupTab={false}를 전달하여 그룹 탭을 비활성화합니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• 일관된 패턴의 prop 추가로 동일한 구조가 여러 파일에 반복되며, 변경 범위가 명확하고 제한적입니다.

Possibly related issues

• [FIX] 10월 5주차 QA 사항 - 지현 #289: 동일한 컴포넌트(BookSearchBottomSheet, BookSearchTabs, useBookSearch)에 영향을 미치며, 그룹 탭 처리 방식의 추가 제어를 구현합니다.

Possibly related PRs

• feat: 저장한 책 또는 참여 중 모임의 책 조회 API 연동 #121: 동일한 컴포넌트와 훅에 showGroupTab prop을 추가하여 조건부 렌더링 및 로딩을 제어합니다.
• fix: 책 검색 모달 탭 유지 및 무한스크롤 기능 추가 #166: 동일한 훅 파일을 수정하며 useBookSearch의 API를 변경하므로 잠재적 충돌 가능성이 있습니다.

Suggested labels

✨ Feature

Suggested reviewers

• heeeeyong
• ho0010

Poem

🐰 그룹 탭을 숨기려면 플래그를 설정하면 돼,
showGroupTab이 false일 땐 보여주지 않고 말야.
각 계층에서 prop을 쓱 내려보내고,
데이터 로딩도 똑똑하게 제어해,
깔끔한 변화로 기능을 완성했네! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	PR 제목 "feat: 모임 생성 시 책 선택에서 모임 책 탭 숨김 처리"는 변경 세트의 주요 의도를 명확하게 설명합니다. 제목은 CreateGroup 페이지에서 BookSearchBottomSheet에 showGroupTab={false}를 전달하여 모임 책 탭을 조건부로 숨기는 핵심 변경과 정확히 일치합니다. 제목은 구체적이고 간결하며, 개발자가 코드 히스토리를 스캔할 때 이 PR의 목적을 쉽게 이해할 수 있습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch qa/jihyeon

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira 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 63c2bc6 and c29acee.

📒 Files selected for processing (4)

• src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx (3 hunks)
• src/components/common/BookSearchBottomSheet/BookSearchTabs.tsx (1 hunks)
• src/components/common/BookSearchBottomSheet/useBookSearch.ts (6 hunks)
• src/pages/group/CreateGroup.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

src/components/common/BookSearchBottomSheet/BookSearchTabs.tsx (1)

src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts (1)

• TabContainer (104-109)

src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx (1)

src/components/common/BookSearchBottomSheet/useBookSearch.ts (1)

• useBookSearch (7-303)

🔇 Additional comments (7)

src/components/common/BookSearchBottomSheet/BookSearchTabs.tsx (1)

8-21: LGTM! 깔끔한 조건부 렌더링 구현

showGroupTab prop의 추가와 조건부 렌더링이 잘 구현되었습니다. 기본값 true로 하위 호환성을 유지하면서, 그룹 탭만 선택적으로 숨길 수 있도록 되어 있습니다.

src/pages/group/CreateGroup.tsx (1)

245-250: LGTM! 그룹 생성 플로우에 적절한 UX 개선

모임 생성 시 모임 책 탭을 숨기는 것은 논리적으로 타당합니다. 모임을 만들 때는 책을 선택해서 모임을 생성하는 것이므로, 이미 존재하는 "모임 책"을 보여주는 것은 맥락에 맞지 않습니다.

src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx (3)

18-21: LGTM! Prop 전달 구조 정확함

showGroupTab prop이 올바르게 정의되었고 기본값 true로 하위 호환성이 보장됩니다.

---

41-41: LGTM! 훅에 prop 정확히 전달

useBookSearch 훅에 showGroupTab 파라미터가 올바르게 전달되어 데이터 로딩 로직이 제어됩니다.

---

113-113: LGTM! 탭 컴포넌트에 prop 정확히 전달

BookSearchTabs에 showGroupTab prop이 올바르게 전달되어 UI 렌더링이 제어됩니다.

src/components/common/BookSearchBottomSheet/useBookSearch.ts (2)

7-7: LGTM! 훅 시그니처 확장 적절함

showGroupTab 파라미터 추가로 그룹 데이터 로딩을 제어할 수 있게 되었고, 기본값 true로 하위 호환성이 유지됩니다.

---

251-257: LGTM! 초기 데이터 로딩 로직 정확함

loadInitialData에서 showGroupTab이 false일 때 그룹 책을 로드하지 않도록 조건이 추가되어, 불필요한 API 호출을 방지합니다.

현재 구현은 의도한 사용 사례(CreateGroup에서 showGroupTab={false} 전달)에 잘 작동합니다. 그룹 탭이 렌더링되지 않으므로 사용자가 UI를 통해 그룹 탭으로 전환할 수 없습니다.

선택사항으로, 더 방어적인 코드를 원한다면 handleTabChange 함수(lines 238-248)에도 가드를 추가할 수 있습니다:

 const handleTabChange = async (tab: TabType) => {
+  // Prevent switching to group tab if it's hidden
+  if (tab === 'group' && !showGroupTab) {
+    return;
+  }
+
   setActiveTab(tab);
   setError(null);

   // 탭 변경 시 해당 탭의 데이터가 없으면 API 호출
   if (tab === 'saved' && savedBooks.length === 0) {
     await fetchSavedBooks();
   } else if (tab === 'group' && groupBooks.length === 0) {
     await fetchGroupBooks();
   }
 };

다만 현재 설계상 그룹 탭이 UI에서 렌더링되지 않으면 사용자가 이 함수를 호출할 수 없으므로, 이 가드는 필수는 아닙니다.

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[heeeeyong]

LGTM~