Skip to content

[Feat] #69 룸메이트 요청 취소 기능 추가 - #76

Merged
hdg0116 merged 11 commits into
developfrom
feat/#69-룸메이트-요청-취소-기능-추가
May 29, 2026

Hidden character warning

The head ref may contain hidden characters: "feat/#69-\ub8f8\uba54\uc774\ud2b8-\uc694\uccad-\ucde8\uc18c-\uae30\ub2a5-\ucd94\uac00"
Merged

hdg0116 merged 11 commits into
developfrom
feat/#69-룸메이트-요청-취소-기능-추가

Conversation

@hdg0116

@hdg0116 hdg0116 commented May 28, 2026

Copy link
Copy Markdown
Collaborator

🗒️ PR 타입

  • 기능 추가
  • 기능 삭제
  • 버그 수정
  • 코드 리팩토링
  • 문서 수정
  • 의존성, 환경 변수, 빌드 관련 코드 업데이트

🔗 관련 이슈


📌 작업사항

  • PATCH /applications/{applicationId}/cancel API 함수 추가 (cancelRoommateApplication)
  • useCancelRoommateApplication mutation hook 생성 (성공 시 채팅방 목록 쿼리 invalidate)
  • handleCancelInviteRequest에서 취소 API 실제 호출 연결
  • applicationId 없을 경우 에러 토스트 표시
  • API 성공 시 로컬 메시지 제거 및 성공 토스트 표시
  • API 실패 시 에러 토스트 표시

📸 스크린샷

요것도... 서버 켜지면 촬영하도록 하겠습니다ㅠㅠ


📣 기타사항 및 코멘트


✅ 체크리스트

  • 로컬에서 빌드 및 테스트 완료
  • Label 지정 완료
  • 리뷰어 지정 완료
  • 코드 리뷰 반영 완료

Summary by CodeRabbit

  • 새로운 기능

    • 룸메이트 신청 취소와 재전송 기능이 채팅에서 지원됩니다.
    • 채팅 메시지 타입별(초대/취소/수락/거절/일반) UI가 개선되어 더 명확하게 표시됩니다.
    • 채팅 목록이 탭별로 분리되어 탭 단위 무한스크롤이 동작합니다.
  • 개선사항

    • 초대/수락 관련 메시지 안내 문구가 사용자 친화적으로 다듬어졌습니다.
    • 초대 취소 버튼의 비활성화 상태가 반영됩니다.
  • 버그 수정

    • 채팅 시간 파싱 로직을 개선해 한국 시간대 기준으로 정확한 시간이 표시됩니다.

Review Change Stack

@hdg0116
hdg0116 requested a review from nabbang6 May 28, 2026 20:23
@hdg0116 hdg0116 self-assigned this May 28, 2026
@hdg0116 hdg0116 added ✨ Feature 기능 개발 🔗 API API 관련 작업 labels May 28, 2026
@vercel

vercel Bot commented May 28, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
bangjjack-frontend-dev Ready Ready Preview, Comment May 29, 2026 8:42pm

@coderabbitai

coderabbitai Bot commented May 28, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@hdg0116, we couldn't start this review because you've reached your PR review rate limit.

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 @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 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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8fc5419e-1165-4445-9aab-054ae6640fca

📥 Commits

Reviewing files that changed from the base of the PR and between 7c0fc47 and e04da09.

📒 Files selected for processing (5)
  • src/features/chat/components/chat-detail/ChatMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatMessageList.tsx
  • src/features/chat/components/chat-detail/ChatRoommateCancelMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsx
  • src/features/chat/sections/chat-detail/ChatMessageListSection.tsx

Walkthrough

API에 취소 엔드포인트를 추가하고 cancel 훅을 작성한 뒤, ChatComposer에 취소·재전송 로직을 통합합니다. 메시지 타입/매핑을 확장하고 여러 채팅 메시지 렌더러를 외부 컴포넌트로 분리·추가했습니다. 마지막으로 ChatListPage 탭을 컴포넌트화하고 슬라이드 레이아웃으로 리팩토링합니다.

Changes

룸메이트 취소 기능 및 채팅 UI/탭 리팩토링

Layer / File(s) Summary
취소 API 및 커스텀 훅 구성
src/api/applications.ts, src/features/chat/hooks/useCancelRoommateApplication.ts, src/features/chat/hooks/index.ts
/applications/{applicationId}/cancel 경로와 cancelRoommateApplication 추가. useCancelRoommateApplication 훅은 해당 API를 호출하고 성공 시 채팅 쿼리 캐시(chatQueryKeys.rooms(), chatQueryKeys.messages())를 무효화합니다.
ChatComposer 통합 및 페이지 연동
src/features/chat/hooks/useChatComposer.ts, src/pages/chat/ChatDetailPage.tsx, src/features/chat/sections/chat-detail/ChatMessageListSection.tsx
useChatComposer에 cancel 훅을 연결해 handleCancelInviteRequest를 API 기반 취소로 변경하고 handleResendInviteRequest를 추가합니다. ChatDetailPage와 ChatMessageListSection에 취소/재전송 상태 및 핸들러를 전달합니다.
메시지 타입·매핑 확장
src/features/chat/types.ts, src/features/chat/utils/chatComposerMessages.ts, src/features/chat/utils/chatHistoryMessages.ts, src/features/chat/utils/webSocket.ts
APPLICATION_CANCELLED 서버 타입, roommate_cancel 클라이언트 메시지 타입과 데이터 구조를 추가하고, 수신·히스토리 매핑 및 유효 메시지 목록을 확장합니다.
채팅 메시지 렌더러 리팩토링
src/features/chat/components/chat-detail/* (여러 신규/수정 컴포넌트)
ChatMessageItem이 전용 ChatRoommate*MessageItem/ChatTextMessageItem으로 위임되며, roommate_invite/roommate_request/roommate_cancel 등 취소·재전송·disabled 흐름을 지원하는 프레젠테이션 컴포넌트들이 추가/수정되었습니다. 관련 props 타입이 확장됩니다.
ChatListPage 탭 리팩토링 및 날짜 파싱 수정
src/pages/chat/ChatListPage.tsx, src/features/chat/utils/chatRoomList.ts
탭별 데이터 페칭·무한 스크롤을 ChatTabContent로 분리하고 탭 콘텐츠를 translateX 기반 슬라이드 레이아웃으로 변경했습니다. 채팅방 날짜 파싱에서 UTC Z 대신 +09:00 오프셋을 사용하도록 수정했습니다.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Possibly related PRs

  • Bangjjack/Bangjjack-Frontend#66: 룸메이트 신청 처리 및 채팅 연계 로직과 관련된 이전 변경과 직접적인 코드 레벨 연계가 있습니다.
  • Bangjjack/Bangjjack-Frontend#55: 채팅 UI 및 useChatComposer 기반 흐름을 확장하는 PR로 본 PR의 취소/재전송 통합과 연관됩니다.
  • Bangjjack/Bangjjack-Frontend#22: 채팅 프레젠테이션 컴포넌트의 초기 구현과 본 PR의 UI 확장이 코드적으로 맞물릴 가능성이 높습니다.

Suggested reviewers

  • nabbang6
🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check ❓ Inconclusive ChatListPage의 탭 구조 리팩토링과 chatRoomList.ts의 날짜 파싱 로직 변경이 이슈 #69의 요청 취소 기능 추가와 직접적인 관련이 있는지 불명확합니다. ChatListPage 탭 리팩토링과 날짜 파싱 변경이 요청 취소 기능과의 관계를 설명하거나, 별도 이슈로 분리하는 것을 검토하세요.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목은 '룸메이트 요청 취소 기능 추가'로 변경사항의 주요 목표를 명확하게 반영하고 있습니다.
Description check ✅ Passed PR 설명은 템플릿의 대부분 항목을 작성했으나, 스크린샷 항목이 불완전하고 '기타사항 및 코멘트' 섹션이 비어있습니다.
Linked Issues check ✅ Passed PR의 모든 주요 변경사항(API 함수 추가, mutation hook 생성, 취소 로직 통합, 토스트 메시지 처리)이 이슈 #69의 '룸메이트 요청 취소 기능 추가' 요구사항을 충족합니다.

✏️ 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 feat/#69-룸메이트-요청-취소-기능-추가

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

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

@github-actions

Copy link
Copy Markdown

✅ CI 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다.

@hdg0116

hdg0116 commented May 29, 2026

Copy link
Copy Markdown
Collaborator Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented May 29, 2026

Copy link
Copy Markdown
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@hdg0116 hdg0116 changed the title [feat] #69 룸메이트 요청 취소 기능 추가 [Feat] #69 룸메이트 요청 취소 기능 추가 May 29, 2026
@hdg0116

hdg0116 commented May 29, 2026

Copy link
Copy Markdown
Collaborator Author

@coderabbitai full review

@coderabbitai

coderabbitai Bot commented May 29, 2026

Copy link
Copy Markdown
✅ Actions performed

Full review triggered.

@nabbang6 nabbang6 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

고생하셨습니당!!! 코드 상으로 크게 문제되어 보이는 건 없어보여서 바로 머지해주셔도 될 것 같아욤
근데 코드래빗이 왜 저럴까요...리밋 걸렷나...

@github-actions

Copy link
Copy Markdown

✅ CI 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 실패
Build: 통과

🚨 일부 검증이 실패했습니다. 수정 후 다시 확인해주세요.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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

📥 Commits

Reviewing files that changed from the base of the PR and between 1f940b4 and d99c26c.

📒 Files selected for processing (7)
  • src/api/applications.ts
  • src/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsx
  • src/features/chat/hooks/index.ts
  • src/features/chat/hooks/useCancelRoommateApplication.ts
  • src/features/chat/hooks/useChatComposer.ts
  • src/features/chat/utils/chatRoomList.ts
  • src/pages/chat/ChatListPage.tsx

Comment thread src/features/chat/hooks/useChatComposer.ts
Comment thread src/features/chat/hooks/useChatComposer.ts
Comment thread src/pages/chat/ChatListPage.tsx
@github-actions

Copy link
Copy Markdown

✅ CI 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다.

@github-actions

Copy link
Copy Markdown

✅ CI 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다.

…tend into feat/#69-룸메이트-요청-취소-기능-추가

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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

📥 Commits

Reviewing files that changed from the base of the PR and between d99c26c and 7c0fc47.

📒 Files selected for processing (19)
  • src/features/chat/components/chat-detail/ChatMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatMessageList.tsx
  • src/features/chat/components/chat-detail/ChatRoommateAcceptMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatRoommateCancelMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatRoommateInviteMessage.tsx
  • src/features/chat/components/chat-detail/ChatRoommateInviteMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatRoommateRejectMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatRoommateRequestMessage.tsx
  • src/features/chat/components/chat-detail/ChatRoommateRequestMessageItem.tsx
  • src/features/chat/components/chat-detail/ChatTextMessageItem.tsx
  • src/features/chat/hooks/useCancelRoommateApplication.ts
  • src/features/chat/hooks/useChatComposer.ts
  • src/features/chat/sections/chat-detail/ChatMessageListSection.tsx
  • src/features/chat/types.ts
  • src/features/chat/utils/chatComposerMessages.ts
  • src/features/chat/utils/chatHistoryMessages.ts
  • src/features/chat/utils/webSocket.ts
  • src/pages/chat/ChatDetailPage.tsx
  • src/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

Comment thread src/features/chat/components/chat-detail/ChatMessageItem.tsx
@github-actions

Copy link
Copy Markdown

✅ CI 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다.

@hdg0116
hdg0116 merged commit 097eb34 into develop May 29, 2026
4 checks passed
@hdg0116
hdg0116 deleted the feat/#69-룸메이트-요청-취소-기능-추가 branch May 29, 2026 20:43
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.

[Feat] #69 룸메이트 요청 취소 기능 추가

2 participants