[Fix] #73 룸메이트 매칭/채팅 흐름 개선 및 채팅방 자동 생성 처리 - #74
Merged
Hidden character warning
The head ref may contain hidden characters: "fix/#73-\ub8f8\uba54\uc774\ud2b8-\ub9e4\uce6d-\uc2dc-\ucc44\ud305\ubc29-\uc0dd\uc131\ub418\uac8c-\uc218\uc815"
Merged
Conversation
- ChatListItemSkeleton 컴포넌트 추가 및 배럴 export - ChatListPage: isPending 시 로딩 텍스트 → ChatListItemSkeleton 5개 - ChatDetailPage: chatDetail 없을 때 null 반환 → 헤더·메시지·입력바 스켈레톤
- PostDetailInfoCard: onAuthorClick prop 추가, 아바타를 버튼으로 감싸 클릭 가능하게 처리 - PostDetailContent: 작성자 아바타 클릭 → /roommate/:authorId 이동 - RoommateList: onProfileClick prop 추가, 아바타 클릭 시 행 이벤트와 분리(stopPropagation) - PostDetailRoommatesCard: 아바타 클릭 → /roommate/:userId, 행 클릭은 기존 룸메이트 목록 페이지 유지 - RoommateListContent: 아바타 클릭 → /roommate/:userId, 행 클릭은 기존 체크리스트 선택 유지
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 34 minutes and 31 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 (4)
워크스루이 PR은 매칭 확정 시 자동으로 1:1 채팅방을 생성하고 이를 위해 채팅 관련 책임을 컴포넌트 간 재분배합니다. 프로필 클릭 네비게이션을 추가하고, 로딩 상태에 스켈레톤 UI를 적용하여 사용자 경험을 개선합니다. 변경사항매칭 및 채팅 통합 흐름
🎯 4 (Complex) | ⏱️ ~45 minutes 관련 PRs
제안 레이블
제안 검수자
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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: 통과 🎉 모든 검증을 통과했습니다. |
hdg0116
approved these changes
May 28, 2026
hdg0116
left a comment
hdg0116
left a comment
Collaborator
There was a problem hiding this comment.
악 너무 수고하셨습니다ㅠㅠ 제 부분까지 작업해주셔서... 항상 너무 감사해요😭 저도 빠르게 수정해서 작업 마무리하겠습니다ㅠㅠ 바로 머지하셔도 될 것 같아요!!
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/features/board/components/roommate/RoommateList.tsx (1)
35-54:⚠️ Potential issue | 🟠 Major | ⚡ Quick win중첩된
<button>구조를 분리해주세요.
src/features/board/components/roommate/RoommateList.tsx에서 행 클릭용<button>(onMemberClick) 안에 아바타용 또 다른<button>(onProfileClick)이 중첩되어 있어 invalid HTML/접근성(키보드 포커스·클릭 동작) 문제가 생길 수 있습니다.stopPropagation()만으로는 해결되지 않으니, 바깥 래퍼를div/li등으로 바꾸고 “행 선택”과 “아바타 클릭”을 형제 요소로 분리해주세요.🤖 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/board/components/roommate/RoommateList.tsx` around lines 35 - 54, The outer clickable row in RoommateList.tsx currently uses a <button> that wraps another <button> (ProfileAvatar), causing invalid HTML and accessibility issues; change the outer element (the one using onMemberClick and isSelected) from a <button> to a non-interactive container (e.g., <div> or <li> with appropriate role/aria-selected) so the inner avatar can remain a clickable <button> that calls onProfileClick; ensure the outer container's onClick still calls onMemberClick, update className usage (cn and isSelected) to preserve visual styles, and if needed add role="button" and tabIndex={0} plus keyboard handlers to the outer container to maintain keyboard accessibility.
🤖 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/board/components/roommate/RoommateListContent.tsx`:
- Around line 134-145: The current code passes targetUserId={effectiveUserId ??
0} and allows onMatchConfirm to navigate even when effectiveUserId is null;
change the guard in RoommateListContent so that if effectiveUserId is falsy you
either (a) do not render MatchActionBar (or MatchActionBarContainer) or (b)
render it with a disabledMessage prop and disabled state, and ensure
onMatchConfirm does nothing when effectiveUserId is null; specifically update
the usage sites of effectiveUserId, onMatchConfirm, targetUserId, targetUsername
and targetProfileImage to avoid sending 0/empty values and only call
navigate(`/posts/${postId}/matching-report`, { state: { targetUserId:
effectiveUserId, ... } }) when effectiveUserId is present.
In `@src/features/chat/components/chat-list/ChatListItem.tsx`:
- Around line 72-73: In ChatListItem (the Skeleton usages), replace the
arbitrary height utilities `h-[18px]` and `h-[14px]` with the project's
design-token Tailwind height classes (e.g., the h- tokens defined in
src/index.css) so the Skeleton components use token-based heights; update the
two Skeleton className strings (`"h-[18px] w-24"` and `"mt-100 h-[14px] w-36"`)
to use the corresponding token classes (and remove the arbitrary bracketed
values and the incorrect `mt-100` if it’s also non-token) so they conform to the
design token rule.
In `@src/features/roommate/components/MatchingReportContent.tsx`:
- Around line 16-29: MatchingReportContent stopped using roommateId so flows
that pass only roommateId leave targetUserId undefined and disable the match
button; restore using roommateId as a fallback wherever targetUserId is used. In
MatchingReportContent (props and places referencing
targetUserId/targetUsername/targetProfileImage and functions like
handleMatchClick and the match button disabled check), use targetUserId ??
roommateId (and similarly fallback for username/profile image if needed) when
computing the target user id/props and when deciding button disabled state so
the roommate-profile-only flow works again.
In `@src/features/roommate/components/MismatchedItemsCard.tsx`:
- Line 19: In MismatchedItemsCard.tsx the DeleteIcon is using an arbitrary
Tailwind class `size-[16px]`; replace that arbitrary value with the project’s
design-token class defined in src/index.css (the same token used for other icons
in the repo) — update the DeleteIcon’s className to use the corresponding token
(e.g., the project’s standard icon size token) instead of `size-[16px]` so it
conforms to the token-based Tailwind rules.
In `@src/features/roommate/components/RoommateProfileContent.tsx`:
- Around line 125-135: The routing state and props for the matching/chat target
currently only use userProfile and can be undefined at load; update the
onMatchConfirm navigate state and the props targetUsername and
targetProfileImage to fall back to profile values (e.g., use
userProfile?.username ?? profile?.username and userProfile?.profileImage ??
profile?.profileImage) so targetUsername/targetProfileImage and state always
have a value; keep targetUserId as before (roommateId ?? 0) and apply these
fallbacks in the component where onMatchConfirm, targetUserId, targetUsername,
and targetProfileImage are set.
---
Outside diff comments:
In `@src/features/board/components/roommate/RoommateList.tsx`:
- Around line 35-54: The outer clickable row in RoommateList.tsx currently uses
a <button> that wraps another <button> (ProfileAvatar), causing invalid HTML and
accessibility issues; change the outer element (the one using onMemberClick and
isSelected) from a <button> to a non-interactive container (e.g., <div> or <li>
with appropriate role/aria-selected) so the inner avatar can remain a clickable
<button> that calls onProfileClick; ensure the outer container's onClick still
calls onMemberClick, update className usage (cn and isSelected) to preserve
visual styles, and if needed add role="button" and tabIndex={0} plus keyboard
handlers to the outer container to maintain keyboard accessibility.
🪄 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: 94473b98-7dea-4556-a990-1d7358d6e5a5
⛔ Files ignored due to path filters (1)
src/assets/icons/ic-delete.svgis excluded by!**/*.svg
📒 Files selected for processing (19)
src/features/board/components/post/PostDetailBottomBar.tsxsrc/features/board/components/post/PostDetailContent.tsxsrc/features/board/components/post/PostDetailInfoCard.tsxsrc/features/board/components/post/PostDetailRoommatesCard.tsxsrc/features/board/components/roommate/MatchActionBar.tsxsrc/features/board/components/roommate/RoommateList.tsxsrc/features/board/components/roommate/RoommateListContent.tsxsrc/features/chat/components/chat-detail/ChatRoommateRejectMessage.tsxsrc/features/chat/components/chat-list/ChatListItem.tsxsrc/features/chat/components/index.tssrc/features/chat/index.tssrc/features/chat/sections/chat-detail/ChatMessageListSection.tsxsrc/features/roommate/components/MatchingReportContent.tsxsrc/features/roommate/components/MismatchedItemsCard.tsxsrc/features/roommate/components/RoommateProfileContent.tsxsrc/pages/MatchingReportPage.tsxsrc/pages/PostMatchingReportPage.tsxsrc/pages/chat/ChatDetailPage.tsxsrc/pages/chat/ChatListPage.tsx
Comment on lines
+72
to
+73
| <Skeleton className="h-[18px] w-24" /> | ||
| <Skeleton className="mt-100 h-[14px] w-36" /> |
There was a problem hiding this comment.
스켈레톤 높이에 임의값([]) 사용은 디자인 토큰 규칙 위반입니다.
h-[18px], h-[14px] 대신 토큰 기반 높이 유틸리티로 바꿔 주세요.
수정 예시
- <Skeleton className="h-[18px] w-24" />
- <Skeleton className="mt-100 h-[14px] w-36" />
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="mt-100 h-3.5 w-36" />As per coding guidelines **/*.tsx: Use Tailwind CSS with design tokens from src/index.css and avoid arbitrary values.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Skeleton className="h-[18px] w-24" /> | |
| <Skeleton className="mt-100 h-[14px] w-36" /> | |
| <Skeleton className="h-4 w-24" /> | |
| <Skeleton className="mt-100 h-3.5 w-36" /> |
🤖 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-list/ChatListItem.tsx` around lines 72 -
73, In ChatListItem (the Skeleton usages), replace the arbitrary height
utilities `h-[18px]` and `h-[14px]` with the project's design-token Tailwind
height classes (e.g., the h- tokens defined in src/index.css) so the Skeleton
components use token-based heights; update the two Skeleton className strings
(`"h-[18px] w-24"` and `"mt-100 h-[14px] w-36"`) to use the corresponding token
classes (and remove the arbitrary bracketed values and the incorrect `mt-100` if
it’s also non-token) so they conform to the design token rule.
| <Card className="gap-300 rounded-medium border-0 bg-bg-secondary px-400 py-450 shadow-none"> | ||
| <div className="flex items-center gap-[6px]"> | ||
| <DeleteIcon aria-hidden="true" className="size-[16px]" /> | ||
| <DeleteIcon aria-hidden="true" className="size-[16px] text-state-error-2" /> |
There was a problem hiding this comment.
아이콘 크기 클래스의 임의값(size-[16px])을 토큰 기반으로 교체해 주세요.
변경 라인에 포함된 임의값은 디자인 토큰 규칙과 충돌합니다.
수정 예시
- <DeleteIcon aria-hidden="true" className="size-[16px] text-state-error-2" />
+ <DeleteIcon aria-hidden="true" className="size-4 text-state-error-2" />As per coding guidelines **/*.tsx: Use Tailwind CSS with design tokens from src/index.css and avoid arbitrary values.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <DeleteIcon aria-hidden="true" className="size-[16px] text-state-error-2" /> | |
| <DeleteIcon aria-hidden="true" className="size-4 text-state-error-2" /> |
🤖 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/roommate/components/MismatchedItemsCard.tsx` at line 19, In
MismatchedItemsCard.tsx the DeleteIcon is using an arbitrary Tailwind class
`size-[16px]`; replace that arbitrary value with the project’s design-token
class defined in src/index.css (the same token used for other icons in the repo)
— update the DeleteIcon’s className to use the corresponding token (e.g., the
project’s standard icon size token) instead of `size-[16px]` so it conforms to
the token-based Tailwind rules.
✅ CI 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다. |
10 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🗒️ PR 타입
🔗 관련 이슈
📌 작업사항
채팅방 생성 로직 연결
MatchActionBar내부에서 직접createChatRoom호출 및 채팅방으로 이동 처리 (onChatConfirmprop 제거)MatchingReportPage("매칭하기" 버튼) 및PostMatchingReportPage에createChatRoom연결MatchingReportContent에targetUserId/targetUsername/targetProfileImageprops 추가PostDetailBottomBar,RoommateListContent,RoommateProfileContent)채팅 UI 개선
ChatMatchCard를 모집글 채팅(recruitTitle존재 시)에만 노출ChatListItemSkeleton5개로 교체chatDetail미수신 시null반환 → 헤더·메시지·입력바 스켈레톤으로 교체프로필 사진 클릭 이동
PostDetailInfoCard작성자 아바타 클릭 →/roommate/:authorId이동RoommateList에onProfileClickprop 추가, 아바타 클릭과 행 클릭 이벤트 분리(stopPropagation)PostDetailRoommatesCard/RoommateListContent아바타 클릭 →/roommate/:userId이동📸 스크린샷
2026-05-29.025420.mp4
📣 기타사항 및 코멘트
스켈레톤 UI도 겸사겸사 적용해주다보니 또 파일 변경 수가... 저렇게 되엇는데...
스켈레톤 관련 변경사항은 제외하고 봐주셔도 괜찮습니당 b
✅ 체크리스트
Summary by CodeRabbit
릴리스 노트
New Features
Improvements