[Feat] #69 룸메이트 요청 취소 기능 추가 - #76
Hidden character warning
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 38 minutes and 47 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
WalkthroughAPI에 취소 엔드포인트를 추가하고 cancel 훅을 작성한 뒤, ChatComposer에 취소·재전송 로직을 통합합니다. 메시지 타입/매핑을 확장하고 여러 채팅 메시지 렌더러를 외부 컴포넌트로 분리·추가했습니다. 마지막으로 ChatListPage 탭을 컴포넌트화하고 슬라이드 레이아웃으로 리팩토링합니다. Changes룸메이트 취소 기능 및 채팅 UI/탭 리팩토링
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
✅ CI 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다. |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
✅ CI 검증 결과✅ TypeScript: 통과 🚨 일부 검증이 실패했습니다. 수정 후 다시 확인해주세요. |
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/chat/hooks/useChatComposer.ts`:
- Around line 257-265: Add a guard and expose a canceling state to prevent
duplicate PATCH calls: before calling cancelRoommateApplication(...) check the
mutation's isPending (or a new local flag) and return early if true; derive and
return a new boolean like isCancelingInviteRequest from the mutation status
(mirroring isSendingInviteRequest) so the UI can disable the cancel button while
the request is inflight; ensure the existing onError and onSuccess handlers
still run (they should clear/update state via setLocalMessages and toasts) and
wire isCancelingInviteRequest into the component that triggers
cancelRoommateApplication to prevent rapid double-clicks.
- Around line 261-264: handleCancelInviteRequest currently finds the invite by
applicationId in the combined messages (baseMessages + localMessages) but
onSuccess only removes from localMessages via setLocalMessages and
useCancelRoommateApplication only invalidates chatQueryKeys.rooms(), which
leaves server-loaded baseMessages (from useChatMessages /
chatQueryKeys.messageList) showing the cancelled invite; update onSuccess in
useChatComposer to also invalidate the message list cache
(chatQueryKeys.messageList({ roomId, size })) via the query client so
useChatMessages refetches, and/or remove the message from baseMessages-aware
state (or trigger a refetch) instead of only calling setLocalMessages, and
extend useCancelRoommateApplication to invalidate chatQueryKeys.messageList for
the affected roomId so the UI reflects the cancellation.
In `@src/pages/chat/ChatListPage.tsx`:
- Around line 153-171: The tab panels inside ChatListPage are always mounted and
only visually hidden, which leaves focusable elements in inactive panels in the
accessibility/tab order; update the panel wrapper rendered in the CHAT_TABS.map
so each panel computes isActive = activeIndex === index and then apply
inert={!isActive} (React 19 boolean prop), aria-hidden={!isActive}, and
role="tabpanel" (and ensure each panel has an id and matches aria-labelledby on
the corresponding tab if present) to fully disable inactive panels; modify the
mapped div (the one wrapping ChatTabContent) to use the index or tab.key to
determine isActive and add these attributes accordingly.
🪄 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: 8d782173-ec4d-44a3-a6ec-ca026ce57137
📒 Files selected for processing (7)
src/api/applications.tssrc/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsxsrc/features/chat/hooks/index.tssrc/features/chat/hooks/useCancelRoommateApplication.tssrc/features/chat/hooks/useChatComposer.tssrc/features/chat/utils/chatRoomList.tssrc/pages/chat/ChatListPage.tsx
✅ CI 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다. |
✅ CI 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsx (1)
51-52: ⚡ Quick win
text-neutral-400대신 시맨틱 텍스트 토큰으로 톤 통일 권장
ChatRoommateRequestMessage.tsx취소 헤더(51-52)에서text-neutral-400을 쓰고 있는데, 이 값은src/index.css의--color-neutral-400기반이긴 합니다. 다만 같은 파일/레포에서 캡션/비활성 톤은text-text-caption/text-text-disabled를 주로 쓰므로, 해당 라벨과 아이콘도text-text-caption또는text-text-disabled로 교체해 일관성을 맞추세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsx` around lines 51 - 52, In ChatRoommateRequestMessage.tsx, update the cancelled header styling: replace the utility class text-neutral-400 on the CircleErrorIcon and the span label "요청 취소됨" with the project's semantic caption/disabled tokens (e.g., text-text-caption or text-text-disabled) so the icon and label use the same semantic tone as other captions/disabled text in the repo; locate the CircleErrorIcon usage and the span containing "요청 취소됨" and swap their className values accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/chat/components/chat-detail/ChatMessageItem.tsx`:
- Around line 101-112: The cancel message UI isn't receiving the sending flag,
so duplicate resend requests can be triggered; update the ChatMessageItem render
branch for message.type === "roommate_cancel" to pass the existing
isSendingResendRequest state/prop down into ChatRoommateCancelMessageItem (e.g.,
add isSendingResendRequest={isSendingResendRequest}) and ensure the
onResendInviteRequest handler (or onResend) checks/returns early when
isSendingResendRequest is true; also update ChatRoommateCancelMessageItem's
props/type to accept and use isSendingResendRequest to disable the resend
button/interaction in the cancel UI.
In `@src/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsx`:
- Around line 64-71: ChatRoommateRequestMessage currently renders the "다시 요청
보내기" Button for the roommate_cancel/variant="received" state regardless of
isSent, causing onResend (handleResendInviteRequest) to send a new invite for
received/cancelled messages; update ChatRoommateRequestMessage to conditionally
render the Button (or only pass onResend) when isSent is true (e.g., wrap the
Button in if (isSent) or set onResend={isSent ? onResend : undefined>) so only
sent messages can trigger a resend.
---
Nitpick comments:
In `@src/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsx`:
- Around line 51-52: In ChatRoommateRequestMessage.tsx, update the cancelled
header styling: replace the utility class text-neutral-400 on the
CircleErrorIcon and the span label "요청 취소됨" with the project's semantic
caption/disabled tokens (e.g., text-text-caption or text-text-disabled) so the
icon and label use the same semantic tone as other captions/disabled text in the
repo; locate the CircleErrorIcon usage and the span containing "요청 취소됨" and swap
their className values accordingly.
🪄 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: 13615b93-4598-4cb6-8903-8671e696043a
📒 Files selected for processing (19)
src/features/chat/components/chat-detail/ChatMessageItem.tsxsrc/features/chat/components/chat-detail/ChatMessageList.tsxsrc/features/chat/components/chat-detail/ChatRoommateAcceptMessageItem.tsxsrc/features/chat/components/chat-detail/ChatRoommateCancelMessageItem.tsxsrc/features/chat/components/chat-detail/ChatRoommateInviteMessage.tsxsrc/features/chat/components/chat-detail/ChatRoommateInviteMessageItem.tsxsrc/features/chat/components/chat-detail/ChatRoommateRejectMessageItem.tsxsrc/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsxsrc/features/chat/components/chat-detail/ChatRoommateRequestMessageItem.tsxsrc/features/chat/components/chat-detail/ChatTextMessageItem.tsxsrc/features/chat/hooks/useCancelRoommateApplication.tssrc/features/chat/hooks/useChatComposer.tssrc/features/chat/sections/chat-detail/ChatMessageListSection.tsxsrc/features/chat/types.tssrc/features/chat/utils/chatComposerMessages.tssrc/features/chat/utils/chatHistoryMessages.tssrc/features/chat/utils/webSocket.tssrc/pages/chat/ChatDetailPage.tsxsrc/pages/chat/ChatListPage.tsx
✅ Files skipped from review due to trivial changes (1)
- src/features/chat/utils/webSocket.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/features/chat/hooks/useCancelRoommateApplication.ts
- src/pages/chat/ChatListPage.tsx
✅ CI 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다. |
🗒️ PR 타입
🔗 관련 이슈
📌 작업사항
📸 스크린샷
요것도... 서버 켜지면 촬영하도록 하겠습니다ㅠㅠ
📣 기타사항 및 코멘트
✅ 체크리스트
Summary by CodeRabbit
새로운 기능
개선사항
버그 수정