Skip to content

[feat] 일반 단체채팅방 멤버 목록 조회 및 초대 기능 추가#294

Merged
ff1451 merged 3 commits intodevelopfrom
293-feat-일반-단체채팅방-멤버-목록-조회-및-초대-기능-추가
Apr 29, 2026

Hidden character warning

The head ref may contain hidden characters: "293-feat-\uc77c\ubc18-\ub2e8\uccb4\ucc44\ud305\ubc29-\uba64\ubc84-\ubaa9\ub85d-\uc870\ud68c-\ubc0f-\ucd08\ub300-\uae30\ub2a5-\ucd94\uac00"
Merged

[feat] 일반 단체채팅방 멤버 목록 조회 및 초대 기능 추가#294
ff1451 merged 3 commits intodevelopfrom
293-feat-일반-단체채팅방-멤버-목록-조회-및-초대-기능-추가

Conversation

@ff1451
Copy link
Copy Markdown
Collaborator

@ff1451 ff1451 commented Apr 29, 2026

✨ 요약

일반 단체채팅방 정보 화면에서 멤버 목록 조회 API를 연결했습니다.
기존 채팅방 추가 화면을 일반 단체채팅방 멤버 초대 플로우로 재사용할  있도록 분기했습니다.
헤더 인원 수와 정보 화면 라우트를 일반 단체채팅방 기준으로 연결했습니다.



😎 해결한 이슈



Summary by CodeRabbit

릴리스 노트

  • 새로운 기능
    • 기존 채팅방에 사용자를 초대할 수 있는 멤버 초대 기능이 추가되었습니다.
    • 채팅방 내 멤버 목록 조회 및 정확한 멤버 수 표시 기능이 개선되었습니다.
    • 채팅방 정보 페이지에서 멤버 추가 및 관리 기능이 강화되었습니다.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 29, 2026

Warning

Rate limit exceeded

@ff1451 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 28 minutes and 40 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5164f9ec-4749-4d33-a012-a7fcaee85845

📥 Commits

Reviewing files that changed from the base of the PR and between 5c01c44 and 404053a.

📒 Files selected for processing (11)
  • src/App.tsx
  • src/apis/chat/entity.ts
  • src/apis/chat/index.ts
  • src/apis/chat/mutations.ts
  • src/apis/chat/queries.ts
  • src/components/layout/Header/components/ChatHeader.tsx
  • src/components/layout/Header/headerConfig.ts
  • src/components/layout/Header/routeTitles.ts
  • src/pages/Chat/AddChatRoom.tsx
  • src/pages/Chat/ChatRoomInfo.tsx
  • src/pages/Chat/hooks/useChatMutations.ts

Walkthrough

이 변경은 일반 단체채팅방에서 멤버 목록 조회 및 초대 기능을 추가합니다. 새로운 API 엔드포인트(getChatRoomMembers, postChatRoomMembers)와 React Query 쿼리/뮤테이션을 구현하고, /chats/:chatRoomId/invite 라우트를 추가하여 기존 AddChatRoom 컴포넌트를 재사용합니다. 채팅방 정보 화면에서 멤버 목록을 조회 및 표시하며, ChatRoomInfo 컴포넌트와 AddChatRoom 컴포넌트를 수정하여 멤버 초대 플로우를 지원합니다.

Possibly related PRs

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목은 일반 단체채팅방 멤버 목록 조회 및 초대 기능 추가를 명확하게 설명하며, 변경 사항의 핵심을 잘 반영하고 있습니다.
Linked Issues check ✅ Passed PR은 이슈 #293의 모든 코딩 요구사항을 충족합니다: 멤버 목록 조회 API 연동, 정보 화면 멤버 표시, 초대 기능 및 화면 연결이 모두 구현되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 이슈 #293의 범위 내에 있으며, 멤버 조회/초대 기능 구현과 관련 라우팅 및 UI 업데이트만 포함되어 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 293-feat-일반-단체채팅방-멤버-목록-조회-및-초대-기능-추가

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
Review rate limit: 0/1 reviews remaining, refill in 28 minutes and 40 seconds.

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

@ff1451 ff1451 force-pushed the 293-feat-일반-단체채팅방-멤버-목록-조회-및-초대-기능-추가 branch from 5c01c44 to db5b10e Compare April 29, 2026 11:24
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (3)
src/components/layout/Header/components/ChatHeader.tsx (1)

30-34: 멤버 수 조회는 useSuspenseQuery로 맞추는 편이 좋습니다.

현재 useQuery라서 그룹 방에서 멤버 수가 잠깐 0으로 보일 수 있습니다. 이 화면은 이미 Suspense 아래라서 서버 상태도 suspense query로 통일하는 게 더 자연스럽습니다.

♻️ Proposed fix
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
@@
-  const { data: chatRoomMembersData } = useQuery(
+  const { data: chatRoomMembersData } = useSuspenseQuery(
     chatQueries.members(isGroup && chatRoom?.chatType === 'GROUP' ? numericRoomId : undefined)
   );
@@
-  const memberCount = chatRoom?.chatType === 'GROUP' ? (chatRoomMembersData?.members.length ?? 0) : clubMembers.length;
+  const memberCount = chatRoom?.chatType === 'GROUP' ? chatRoomMembersData.members.length : clubMembers.length;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/layout/Header/components/ChatHeader.tsx` around lines 30 - 34,
The member count is fetched with useQuery which can briefly show 0 in a
Suspense-wrapped screen; replace the useQuery call with useSuspenseQuery when
calling chatQueries.members (i.e., change the hook that produces
chatRoomMembersData to useSuspenseQuery and keep the same key/params logic),
update any imports to bring in useSuspenseQuery, and ensure the downstream
memberCount calculation still reads chatRoomMembersData?.members.length safely
(falling back to 0) so the component uses the suspense-backed data source
instead of the transient useQuery result.
src/pages/Chat/ChatRoomInfo.tsx (1)

2-4: 멤버 조회도 Suspense 쿼리로 맞춰주세요.

여기만 useQuery와 로컬 isPending 분기를 쓰면 같은 채팅 플로우 안에서 로딩/에러 처리 방식이 달라집니다. 이 화면도 useSuspenseQuery로 올리고 fallback은 상위 경계에 맡기는 편이 일관됩니다. As per coding guidelines 'Use React Query useSuspenseQuery for server state management'.

Also applies to: 135-137

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/Chat/ChatRoomInfo.tsx` around lines 2 - 4, The ChatRoomInfo
component currently uses useQuery and a local isPending branch for members;
replace that call with the React Query useSuspenseQuery variant and remove the
local loading/error conditional so the component relies on the upper
Suspense/ErrorBoundary fallback; specifically, swap the useQuery call that
fetches members (the invocation referencing chatQueries) to useSuspenseQuery (or
your app's wrapper hook) and delete the isPending-based rendering branch so
loading/error handling is delegated to the parent boundary.
src/pages/Chat/AddChatRoom.tsx (1)

2-5: 이 화면의 서버 상태도 Suspense 패턴으로 통일해주세요.

현재는 초대 목록과 기존 멤버 목록을 모두 useQuery로 받아서 로컬 로딩 분기를 직접 관리하고 있습니다. 이 플로우도 useSuspenseQuery로 맞춰야 페이지 단위 처리 방식이 일관됩니다. As per coding guidelines 'Use React Query useSuspenseQuery for server state management'.

Also applies to: 85-90

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/Chat/AddChatRoom.tsx` around lines 2 - 5, The component AddChatRoom
is using useQuery for server state (chatQueries.*) and local loading branches;
replace those with the project's useSuspenseQuery variant so the page uses the
Suspense pattern consistently: import and call useSuspenseQuery instead of
useQuery for the invitableUsers/invitableSections and existing members queries
(the chatQueries.* calls used in AddChatRoom), remove local isLoading/isFetching
conditional rendering and rely on a Suspense boundary around AddChatRoom, and
preserve options like keepPreviousData or query keys by passing the same
parameters into useSuspenseQuery; ensure any error boundaries remain intact and
adjust references to invitableUsersQuery / invitableSectionsQuery / membersQuery
used in AddChatRoom (also update the other queries referenced at lines ~85-90)
so they all use useSuspenseQuery.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/apis/chat/queries.ts`:
- Around line 41-52: Unify the validation for members(...) so queryKey, enabled,
and queryFn use the same check: use Number.isFinite(chatRoomId) as the canonical
truth test (instead of mixing truthy and != null). Update the queryKey to choose
chatQueryKeys.members(chatRoomId) only when Number.isFinite(chatRoomId)
(otherwise membersDisabled()), set enabled to Number.isFinite(chatRoomId), and
guard queryFn to throw or call getChatRoomMembers(chatRoomId) based on the same
Number.isFinite(chatRoomId) condition so all three (queryKey, enabled, queryFn)
are consistent.

In `@src/pages/Chat/AddChatRoom.tsx`:
- Around line 89-92: The invite flow allows selecting users before existing
members are loaded because currentRoomMemberIds is built from
chatRoomMembersData which can be undefined; update the logic in AddChatRoom so
when isInviteMode is true and chatRoomMembersData is not yet available (or query
isLoading), you show a loading/disabled state and avoid computing/using
currentRoomMemberIds and filteredSections until data arrives. Specifically,
guard the use of chatRoomMembersData/currentRoomMemberIds (created from
chatRoomMembersData?.members) and the selection logic that derives
filteredSections and the confirm button enabling (the code around
chatQueries.members, currentRoomMemberIds, filteredSections, and any
confirm/selection handlers) so selection UI and the confirm action are disabled
or replaced with a loader until members are loaded.

In `@src/pages/Chat/ChatRoomInfo.tsx`:
- Around line 160-174: isCurrentDisplayedMember currently infers the current
user from chatMessages (inferredCurrentUserId) and name matching
(currentUserNameMatchCount), which fails for users who haven't sent messages or
have duplicate names; change the logic to use authenticated userId from
currentUser (currentUser.userId) and the member.userId for primary comparison
inside isCurrentDisplayedMember, e.g. if currentUser?.userId is present return
member.userId === currentUser.userId (for both group and non-group cases), and
only fall back to comparing name and studentNumber when currentUser.userId is
unavailable; remove reliance on inferredCurrentUserId and chatMessages for
current-user detection.

---

Nitpick comments:
In `@src/components/layout/Header/components/ChatHeader.tsx`:
- Around line 30-34: The member count is fetched with useQuery which can briefly
show 0 in a Suspense-wrapped screen; replace the useQuery call with
useSuspenseQuery when calling chatQueries.members (i.e., change the hook that
produces chatRoomMembersData to useSuspenseQuery and keep the same key/params
logic), update any imports to bring in useSuspenseQuery, and ensure the
downstream memberCount calculation still reads
chatRoomMembersData?.members.length safely (falling back to 0) so the component
uses the suspense-backed data source instead of the transient useQuery result.

In `@src/pages/Chat/AddChatRoom.tsx`:
- Around line 2-5: The component AddChatRoom is using useQuery for server state
(chatQueries.*) and local loading branches; replace those with the project's
useSuspenseQuery variant so the page uses the Suspense pattern consistently:
import and call useSuspenseQuery instead of useQuery for the
invitableUsers/invitableSections and existing members queries (the chatQueries.*
calls used in AddChatRoom), remove local isLoading/isFetching conditional
rendering and rely on a Suspense boundary around AddChatRoom, and preserve
options like keepPreviousData or query keys by passing the same parameters into
useSuspenseQuery; ensure any error boundaries remain intact and adjust
references to invitableUsersQuery / invitableSectionsQuery / membersQuery used
in AddChatRoom (also update the other queries referenced at lines ~85-90) so
they all use useSuspenseQuery.

In `@src/pages/Chat/ChatRoomInfo.tsx`:
- Around line 2-4: The ChatRoomInfo component currently uses useQuery and a
local isPending branch for members; replace that call with the React Query
useSuspenseQuery variant and remove the local loading/error conditional so the
component relies on the upper Suspense/ErrorBoundary fallback; specifically,
swap the useQuery call that fetches members (the invocation referencing
chatQueries) to useSuspenseQuery (or your app's wrapper hook) and delete the
isPending-based rendering branch so loading/error handling is delegated to the
parent boundary.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 017794d4-7d68-4249-9e9d-201cc2a59948

📥 Commits

Reviewing files that changed from the base of the PR and between e2596e3 and 5c01c44.

📒 Files selected for processing (11)
  • src/App.tsx
  • src/apis/chat/entity.ts
  • src/apis/chat/index.ts
  • src/apis/chat/mutations.ts
  • src/apis/chat/queries.ts
  • src/components/layout/Header/components/ChatHeader.tsx
  • src/components/layout/Header/headerConfig.ts
  • src/components/layout/Header/routeTitles.ts
  • src/pages/Chat/AddChatRoom.tsx
  • src/pages/Chat/ChatRoomInfo.tsx
  • src/pages/Chat/hooks/useChatMutations.ts

Comment thread src/apis/chat/queries.ts Outdated
Comment thread src/pages/Chat/AddChatRoom.tsx Outdated
Comment thread src/pages/Chat/ChatRoomInfo.tsx Outdated
@ff1451 ff1451 added the ✨ Feature 기능 개발 label Apr 29, 2026
@ff1451 ff1451 self-assigned this Apr 29, 2026
@ff1451 ff1451 merged commit 5263d07 into develop Apr 29, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat] 일반 단체채팅방 멤버 목록 조회 및 초대 기능 추가

1 participant