Skip to content

feat: GroupSearch 로직 추가 적용, click 이벤트 적용#159

Merged
ho0010 merged 6 commits into
developfrom
feat/api-rooms
Aug 18, 2025
Merged

feat: GroupSearch 로직 추가 적용, click 이벤트 적용#159
ho0010 merged 6 commits into
developfrom
feat/api-rooms

Conversation

@ho0010

@ho0010 ho0010 commented Aug 18, 2025

Copy link
Copy Markdown
Collaborator

#️⃣연관된 이슈

[API] Rooms API 연동 #106

📝작업 내용

  • GroupSearch 로직 추가 적용
  • GroupCard click 이벤트 추가
  • GroupDetail 상태 반영 수정

Summary by CodeRabbit

  • 신기능
    • 그룹 카드 클릭 시 탭/상태에 따라 상세 페이지로 이동.
    • 검색 결과: 탭 표시 여부 제어, 항목 클릭 시 상세 페이지로 이동, 자동 검색/디바운스 입력, 최근 검색과의 전환, 로딩 메시지 추가, 뒤로가기 개선.
    • 내 그룹 모달: 로딩/에러 상태 표시.
  • 버그 수정
    • 그룹 상세 하단 버튼 제출 중 비활성화로 중복 요청 방지 및 상태 동기화 개선.
  • 스타일
    • 그룹 카드 크기 조정(최소 너비 확대, 높이 제약 해제).
    • 검색 결과 헤더/탭 표시 로직 조정 및 테마 색상 적용.
    • 모달 콘텐츠 하단 패딩 추가.

@vercel

vercel Bot commented Aug 18, 2025

Copy link
Copy Markdown

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

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

@coderabbitai

coderabbitai Bot commented Aug 18, 2025

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

Walkthrough

그룹 카드 스타일(크기) 조정, 내 그룹 모달에 카드 클릭 시 라우팅/에러·로딩 상태 및 데이터 변환 추가, 검색 결과 컴포넌트에 탭 표시/아이템 클릭 콜백 도입과 UI 조건부 렌더링 변경, 그룹 상세 하단 버튼에 isSubmitting 적용 및 조인/마감 흐름 정비, 그룹 검색의 상태 머신·디바운스·자동 검색/네비게이션 추가.

Changes

Cohort / File(s) Summary
GroupCard 스타일 조정
src/components/group/GroupCard.tsx
카드 min-width 208→232px로 변경, min-height 제거. 외부 API 변화 없음.
내 그룹 모달: 클릭 네비게이션/상태 관리
src/components/group/MyGroupModal.tsx
GroupCard 클릭 시 탭/상태에 따라 라우팅 추가, 로딩/에러 렌더링 도입, Room→Group 변환 로직 추가, 콘텐츠 패딩 수정.
검색 결과 컴포넌트 확장
src/components/search/GroupSearchResult.tsx
Props에 showTabs, onClickRoom 추가. 탭/헤더 조건부 렌더링, 아이템 클릭 콜백 호출, 스타일 색상 변경, EndText 제거, genre 매핑 안전화.
그룹 상세 버튼 제출 흐름
src/pages/groupDetail/GroupDetail.tsx
isSubmitting 추가로 중복 클릭 방지. 호스트 마감/비호스트 참여·취소 흐름에서 상태 업데이트 및 에러 처리 정리. 콘솔 로그 제거.
그룹 검색 상태 머신·디바운스/네비게이션
src/pages/groupSearch/GroupSearch.tsx
SearchStatus(idle/searching/searched) 도입, 디바운스 입력 처리, 자동 1페이지 조회, 페이지네이션 isFinalized 파생, 로딩 메시지 표시, 결과 클릭 시 상세로 네비게이션, props 변경에 맞춘 GroupSearchResult 사용.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant M as MyGroupModal
  participant R as Router
  U->>M: GroupCard 클릭
  M->>M: 탭/그룹상태 확인
  alt 모집중
    M->>R: navigate(/group/detail/:id)
  else 진행중 or isOnGoing
    M->>R: navigate(/group/detail/joined/:id)
  end
Loading
sequenceDiagram
  participant U as User
  participant S as GroupSearch
  participant API as getSearchRooms
  participant R as Router
  U->>S: 검색어 입력
  S->>S: status=searching (디바운스)
  S->>API: 1페이지 검색(isFinalized by status)
  API-->>S: 결과/nextCursor
  S->>S: status=searched, rooms 갱신
  U->>S: 결과 아이템 클릭
  S->>R: navigate(/group/detail/:id)
Loading
sequenceDiagram
  participant U as User
  participant D as GroupDetail
  participant API as postJoinRoom/postCloseRoom
  U->>D: 하단 버튼 클릭
  D->>D: isSubmitting=true
  alt Host(마감)
    D->>API: postCloseRoom(roomId)
    API-->>D: OK/에러
    D->>D: roomData 갱신 후 isSubmitting=false
  else 참여/취소
    D->>API: postJoinRoom(join|cancel)
    API-->>D: OK/에러
    D->>D: isJoining/인원수 갱신 후 isSubmitting=false
  end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Suggested labels

✨ Feature, 📬 API

Suggested reviewers

  • heeeeyong
  • ljh130334

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 b83b9a9 and 51d2f4c.

📒 Files selected for processing (5)
  • src/components/group/GroupCard.tsx (1 hunks)
  • src/components/group/MyGroupModal.tsx (4 hunks)
  • src/components/search/GroupSearchResult.tsx (5 hunks)
  • src/pages/groupDetail/GroupDetail.tsx (5 hunks)
  • src/pages/groupSearch/GroupSearch.tsx (5 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/api-rooms

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

@ho0010 ho0010 self-assigned this Aug 18, 2025
@ho0010 ho0010 added ✨ Feature 기능 개발 📬 API 서버 API 통신 labels Aug 18, 2025
@ho0010 ho0010 merged commit 4a387ad into develop Aug 18, 2025
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📬 API 서버 API 통신 ✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant