[fix/stlye] build 오류 해결, 내 모임 스크롤 안생기게끔 해결

[hongik-luke]

📌 개요 (Summary)

• 변경 사항에 대한 간략한 요약을 적어주세요.
• 관련 이슈가 있다면 링크를 걸어주세요 (예: [fix] cicd / build 문제 #123).

🛠️ 변경 사항 (Changes)

• 새로운 기능 추가
• 버그 수정
• 코드 리팩토링
• 문서 업데이트
• 기타 (설명: )

📸 스크린샷 (Screenshots)

(UI 변경 사항이 있다면 첨부해주세요)

✅ 체크리스트 (Checklist)

• 빌드가 성공적으로 수행되었나요? (pnpm build)
• 린트 에러가 없나요? (pnpm lint)
• 불필요한 콘솔 로그나 주석을 제거했나요?

Summary by CodeRabbit

Release Notes

• New Features

  • Added step-by-step wizard for club creation with name validation, image uploads, and settings configuration.
  • Introduced club recommendations and infinite-scroll search with filtering options.
  • Added club join/apply functionality with modal submission flow.

• Style

  • Improved scrollbar visibility across UI elements with global scrollbar hiding utility.
  • Enhanced responsive image handling and container layouts.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
check-mo	Ready	Preview	Feb 26, 2026 2:30pm

[gemini-code-assist]

Summary of Changes

Hello @hongik-luke, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request primarily focuses on integrating the frontend with backend APIs for club management and search features, moving away from static dummy data. It introduces robust data fetching and mutation patterns using react-query, ensuring a more dynamic and responsive user experience. Additionally, it resolves a critical build configuration issue for S3 image loading and addresses a UI bug related to scrollbar visibility in the 'My Clubs' section, enhancing the overall stability and aesthetics of the application.

Highlights

• API Integration for Club Management: Replaced dummy data with actual API calls for club name duplication checks, club creation, image uploads, club recommendations, and club search.
• React Query Implementation: Utilized @tanstack/react-query for efficient data fetching, caching, and state management across club-related features.
• UI/UX Enhancements: Fixed a build error related to S3 image loading, resolved a scrolling issue in the 'My Clubs' section by hiding scrollbars, and refined UI components for club search and creation.
• Code Structure Improvement: Introduced new service and hook files to better organize API interactions and state logic.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• next.config.ts
  • Added pathname configuration for S3 image host to resolve potential image loading issues.
• src/app/globals.css
  • Implemented a no-scrollbar utility class to hide scrollbars across different browsers.
• src/app/groups/create/page.tsx
  • Refactored club creation logic to use react-query hooks for name checks, image uploads, and club submission, replacing mock functions with API calls.
• src/app/groups/groupSearchDummy.ts
  • Removed, as dummy data is no longer used for club search and recommendations.
• src/app/groups/page.tsx
  • Rewrote club search and recommendation display to fetch data from APIs using react-query and implemented infinite scrolling for search results.
• src/components/base-ui/Group-Search/search_club_apply_modal.tsx
  • Updated to reflect changes in ClubSummary type definition and refined UI elements.
• src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
  • Modified to handle ClubSummary type definition locally, added a safeImageSrc utility, and adjusted mobile/tablet UI for club list items.
• src/components/base-ui/Group-Search/search_mybookclub.tsx
  • Enhanced to display actual user's clubs fetched via API, including loading states and navigation to club detail pages.
• src/components/base-ui/home/home_bookclub.tsx
  • Applied no-scrollbar utility class to the club list.
• src/hooks/mutations/useCreateClubMutation.ts
  • Added new react-query mutations for uploading club images and creating clubs.
• src/hooks/mutations/useSearchClubMutations.ts
  • Added new react-query mutation for joining clubs.
• src/hooks/queries/useCreateClubQueries.ts
  • Added new react-query query for checking club name duplication.
• src/hooks/queries/useSearchClubQueries.ts
  • Added new react-query queries for fetching user's clubs, recommendations, and infinite club search.
• src/lib/api/endpoints/Clubs.ts
  • Defined new API endpoints for club-related operations.
• src/lib/api/endpoints/Image.ts
  • Defined new API endpoints for image upload operations.
• src/lib/api/endpoints/index.ts
  • Exported the newly defined Clubs and Image API endpoints.
• src/lib/api/types.ts
  • Introduced a generic ApiResponse type for consistent API response handling.
• src/services/clubService.ts
  • Expanded club service to include methods for checking name duplication, creating clubs, fetching recommendations, searching clubs, and joining clubs, all interacting with the new API endpoints.
• src/services/imageService.ts
  • Created a new image service for handling image uploads to S3 using presigned URLs.
• src/types/groups/clubCreate.ts
  • Defined new types for club creation requests and a utility for mapping book categories to API codes.
• src/types/groups/clubsearch.ts
  • Defined new types for club search parameters, results, recommendations, and join requests.
• src/utils/groupMapper.ts
  • Updated import paths for group-related types.

Activity

• The pull request was created by hongik-luke.
• The title indicates fixes for a build error and a UI styling issue.
• The description mentions bug fixes and code refactoring.
• Multiple new files were added for API integration, react-query hooks, and type definitions, indicating a significant architectural change.
• Existing files were modified to integrate these new API-driven functionalities and apply styling fixes.
• A dummy data file (groupSearchDummy.ts) was removed, confirming the transition to live data.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 126709a and cf28319.

📒 Files selected for processing (22)

• next.config.ts
• src/app/globals.css
• src/app/groups/create/page.tsx
• src/app/groups/groupSearchDummy.ts
• src/app/groups/page.tsx
• src/components/base-ui/Group-Search/search_club_apply_modal.tsx
• src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx
• src/components/base-ui/Group-Search/search_mybookclub.tsx
• src/components/base-ui/home/home_bookclub.tsx
• src/hooks/mutations/useCreateClubMutation.ts
• src/hooks/mutations/useSearchClubMutations.ts
• src/hooks/queries/useCreateClubQueries.ts
• src/hooks/queries/useSearchClubQueries.ts
• src/lib/api/endpoints/Clubs.ts
• src/lib/api/endpoints/Image.ts
• src/lib/api/endpoints/index.ts
• src/lib/api/types.ts
• src/services/clubService.ts
• src/services/imageService.ts
• src/types/groups/clubCreate.ts
• src/types/groups/clubsearch.ts
• src/utils/groupMapper.ts

---

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive API-driven club management system by refactoring the club creation wizard with server-side integrations (name validation, image upload, club creation), replacing dummy data with live API queries for club search and recommendations, and adding supporting hooks, services, endpoints, and types to enable these features.

Changes

Cohort / File(s)	Summary
Configuration & Styling next.config.ts, src/app/globals.css, src/components/base-ui/home/home_bookclub.tsx	Expanded image remote patterns to allow broader pathname access, added cross-browser no-scrollbar CSS utility, and applied no-scrollbar class to group list containers to hide scrollbars on overflow.
Club Creation Wizard Refactor src/app/groups/create/page.tsx	Replaced minimal self-contained logic with comprehensive API-driven wizard featuring server-side name validation, image upload, multi-step state management, and final club creation with success routing to /groups.
Club Search & Recommendations src/app/groups/page.tsx, src/app/groups/groupSearchDummy.ts	Removed hardcoded dummy data, refactored search page to fetch live data (my clubs, recommendations, infinite-scroll search results) with dynamic category/participant filtering and club join functionality with optimistic UI updates.
Search UI Components src/components/base-ui/Group-Search/search_club_apply_modal.tsx, src/components/base-ui/Group-Search/search_clublist/search_clublist_item.tsx, src/components/base-ui/Group-Search/search_mybookclub.tsx	Updated modal submit signature (club → clubId), introduced ClubSummary type with safe image handling, added isLoading prop and router navigation for my book club component, and standardized string quoting and styling.
React Query Hooks src/hooks/mutations/useCreateClubMutation.ts, src/hooks/mutations/useSearchClubMutations.ts, src/hooks/queries/useCreateClubQueries.ts, src/hooks/queries/useSearchClubQueries.ts	Added mutation hooks for club creation/image upload and club joining; added query hooks for name validation, my clubs, recommendations, and infinite-scroll search with proper cache keys and pagination support.
API Endpoints & Types src/lib/api/endpoints/Clubs.ts, src/lib/api/endpoints/Image.ts, src/lib/api/endpoints/index.ts, src/lib/api/types.ts	Introduced Clubs endpoint module (create, checkName, myClubs, recommendations, search, join), Image endpoint module with upload URL builder, and generic ApiResponse type for standardized API response structure.
Services src/services/clubService.ts, src/services/imageService.ts	Expanded clubService with name validation, creation, recommendations, search, and join methods; introduced imageService with presigned URL request and direct S3 upload via putToPresignedUrl helper for club image uploads.
Domain Types src/types/groups/clubCreate.ts, src/types/groups/clubsearch.ts, src/utils/groupMapper.ts	Added ClubLink and CreateClubRequest types with category code mapping utilities; introduced comprehensive DTO types for my clubs, recommendations, search results, filters, and join workflow; updated groupMapper import paths.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related issues

• [fix/style] build 오류 수정 및 내모임에서 생기는 스크롤 삭제 #142: Addresses adding and applying no-scrollbar CSS utility to hide scrollbars in the "my groups" UI section, which is directly implemented in this PR via globals.css and applied to home_bookclub and search_mybookclub components.

Possibly related PRs

• [feat 21] 모임 생성 UI + 모임 검색 UI 반응형 조절 #22: Modifies overlapping files including src/app/groups/create/page.tsx, src/app/groups/groupSearchDummy.ts, and shared UI components; this PR builds on and substantially refactors the earlier UI/structure introduced in that PR into a full API-driven architecture.
• 피드백 내용 수정 최신화 #100: Also modifies src/app/groups/create/page.tsx; while the earlier PR only changed styling classes, this PR completely rewrites the wizard flow and server integrations in the same file.

Poem

🐰 A wizard is born in the rabbit's domain,
With validation and uploads, no dummy refrain!
No scrollbars to see, just smooth flowing views,
Search clubs and join them—the API's good news!
Hop forward with React Query's cache so divine! ✨

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 142-fixs/tyle

---

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.}

[gemini-code-assist]

Code Review

이 PR은 모임 생성 및 검색 페이지에 실제 API를 연동하고, 관련 코드를 hooks, services, types로 분리하여 구조를 개선하는 작업을 포함합니다. 전반적으로 react-query를 사용한 데이터 페칭, 상태 관리, 에러 처리 등이 잘 구현되었습니다. 또한, next.config.ts의 이미지 경로 문제와 내 모임 컴포넌트의 스크롤 문제를 해결한 점도 좋습니다. 코드 품질 향상을 위해 몇 가지 개선점을 제안합니다.

[gemini-code-assist]

onSubmitSearch 함수에서 setAppliedParams를 호출하면 컴포넌트가 리렌더링되고, useInfiniteClubSearchQuery의 query key가 변경됩니다. React Query는 query key가 변경될 때 자동으로 데이터를 다시 가져오므로, refetchSearch()를 명시적으로 호출할 필요가 없습니다. 이 호출을 제거하면 코드가 더 간결해지고, 불필요한 중복 API 호출을 방지할 수 있습니다.

[gemini-code-assist]

safeImageSrc 함수 내의 src === "string" 체크는 API 응답 데이터에 문제가 있을 경우를 대비한 좋은 방어 코드입니다. 하지만 이는 근본적인 백엔드 데이터 문제를 가릴 수 있습니다. 백엔드에서 이미지 URL로 문자열 "string"이 반환되는 경우가 있는지 확인하고, 가능하다면 백엔드에서 수정하는 것이 더 바람직한 해결 방법입니다.