[feat] 사용자 채팅방 이름 변경 및 채팅방 나가기 기능 추가#258
Open
ParkSungju01 wants to merge 5 commits intodevelopfrom
Hidden character warning
The head ref may contain hidden characters: "255-feat-\ucc44\ud305\ubc29-\uc0ad\uc81c-\ubc0f-\uc774\ub984-\ubcc0\uacbd-\uae30\ub2a5-\ucd94\uac00"
Open
Conversation
Contributor
Walkthrough채팅방 이름 변경 및 삭제 기능이 추가되었습니다. API에 Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/pages/Chat/index.tsx (1)
13-14: 상대경로 import를@/*alias로 통일해 주세요.해당 파일의 신규 import는 프로젝트 alias 규칙과 맞추는 것이 좋습니다.
As per coding guidelines
**/*.{ts,tsx}: "Use@/*alias for import paths instead of relative paths".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Chat/index.tsx` around lines 13 - 14, The imports in this file use relative paths; update them to the project alias style by replacing './components/ChatRoomContextMenu' and './hooks/useChat' with the '@/pages/Chat/components/ChatRoomContextMenu' and '@/pages/Chat/hooks/useChat' (or the correct alias-targeted paths for these modules) so that ChatRoomContextMenu and useChat are imported via the `@/`* alias consistent with the repo rule for .ts/.tsx imports.src/apis/chat/index.ts (1)
53-66: 신규 API 응답 타입을 명시해주세요.
apiClient.patch/apiClient.delete의 응답 타입이 빠져 있어 호출부 타입 안정성이 약해집니다.src/apis/chat/entity.ts에 도메인 응답 타입을 정의하고 제네릭으로 연결하는 게 좋습니다.As per coding guidelines
src/apis/**: "요청/응답 타입이 명시되어 있는지" andsrc/apis/**/*.ts: "Define API response types in the domain-specificentity.tsfile".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/apis/chat/index.ts` around lines 53 - 66, patchChatRoomName and deleteChatRoom call apiClient.patch/delete without specifying response generics, reducing type safety; update these functions to import the appropriate response types from src/apis/chat/entity.ts (e.g., ChatRoomNamePatchResponse, ChatRoomDeleteResponse) and pass them as generics to apiClient.patch and apiClient.delete respectively so the returned Promise is strongly typed (refer to functions patchChatRoomName and deleteChatRoom and the domain types in entity.ts).
🤖 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/pages/Chat/components/ChatRoomContextMenu.tsx`:
- Around line 23-34: The calculated menuWidth/menuHeight (and menuItemHeight)
used for adjustedX/adjustedY do not match the hardcoded class sizes w-[161px]
h-[159px], causing incorrect positioning; either make the numeric constants
equal to the CSS sizes or (better) measure the rendered element using menuRef
(e.g., in a useLayoutEffect) and compute menuWidth/menuHeight from
menuRef.current.getBoundingClientRect() before computing adjustedX/adjustedY so
the positioning uses the actual rendered width/height; update references to
menuWidth, menuHeight, and menuItemHeight (or remove menuItemHeight if measuring
full height) and ensure the position math uses the measured values.
In `@src/pages/Chat/index.tsx`:
- Around line 319-320: The menu entry with label '알림 끄기' is a no-op; either wire
it to the actual mute toggling function or remove/hide it. Locate the menu items
array in Chat/index.tsx where { label: '알림 끄기', onClick: () => {} } is defined
and change onClick to call the existing toggleMute(...) helper (passing the
current chat id or chat object and then closing the menu), or conditionally
filter out this item when toggleMute is not available/ready so the inert action
never appears to users.
- Around line 295-299: When applying the room name change in the onClick handler
for changeRoomName, normalize newRoomName by trimming whitespace and send an
explicit empty string (or the server's default signal) if the trimmed result is
empty; i.e., compute a normalizedName = newRoomName.trim() and pass
normalizedName === '' ? '' : normalizedName to updateRoomName({ chatRoomId:
roomId, name: normalizedName }) while still calling setChangeRoomName(null) as
before, referencing the changeRoomName, setChangeRoomName, updateRoomName and
newRoomName symbols.
- Around line 267-271: The click handler currently calls
deleteChatRoom(leaveRoom.roomId) without awaiting or handling the Promise (using
setLeaveRoom and leaveRoom); update the handler to guard for leaveRoom, then
call the async deleteChatRoom via await inside an async function or use
.then/.catch to handle success and failure, and ensure you reset
setLeaveRoom(null) only on success or always as desired while logging or
displaying errors on rejection (reference functions/variables: setLeaveRoom,
leaveRoom, deleteChatRoom).
---
Nitpick comments:
In `@src/apis/chat/index.ts`:
- Around line 53-66: patchChatRoomName and deleteChatRoom call
apiClient.patch/delete without specifying response generics, reducing type
safety; update these functions to import the appropriate response types from
src/apis/chat/entity.ts (e.g., ChatRoomNamePatchResponse,
ChatRoomDeleteResponse) and pass them as generics to apiClient.patch and
apiClient.delete respectively so the returned Promise is strongly typed (refer
to functions patchChatRoomName and deleteChatRoom and the domain types in
entity.ts).
In `@src/pages/Chat/index.tsx`:
- Around line 13-14: The imports in this file use relative paths; update them to
the project alias style by replacing './components/ChatRoomContextMenu' and
'./hooks/useChat' with the '@/pages/Chat/components/ChatRoomContextMenu' and
'@/pages/Chat/hooks/useChat' (or the correct alias-targeted paths for these
modules) so that ChatRoomContextMenu and useChat are imported via the `@/`* alias
consistent with the repo rule for .ts/.tsx imports.
🪄 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: 05358e60-3c01-40b7-bcba-07f0adef8238
📒 Files selected for processing (8)
src/apis/chat/index.tssrc/apis/chat/mutations.tssrc/pages/Chat/components/ChatRoomContextMenu.tsxsrc/pages/Chat/hooks/useChat.tssrc/pages/Chat/hooks/useChatMutations.tssrc/pages/Chat/index.tsxsrc/utils/hooks/useLongPress.tssrc/utils/hooks/useOutsideTapDismiss.ts
Comment on lines
+319
to
+320
| { label: '알림 끄기', onClick: () => {} }, | ||
| { |
Contributor
There was a problem hiding this comment.
동작 없는 메뉴 액션은 제거하거나 실제 기능에 연결해 주세요.
'알림 끄기'가 no-op이라 사용자 입장에서 오작동처럼 보입니다. toggleMute에 연결하거나, 준비 전이면 메뉴에서 숨기는 편이 낫습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Chat/index.tsx` around lines 319 - 320, The menu entry with label
'알림 끄기' is a no-op; either wire it to the actual mute toggling function or
remove/hide it. Locate the menu items array in Chat/index.tsx where { label: '알림
끄기', onClick: () => {} } is defined and change onClick to call the existing
toggleMute(...) helper (passing the current chat id or chat object and then
closing the menu), or conditionally filter out this item when toggleMute is not
available/ready so the inert action never appears to users.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/pages/Chat/index.tsx (1)
324-324:⚠️ Potential issue | 🟡 Minor'알림 끄기' 메뉴가 동작하지 않습니다.
빈
onClick핸들러가 있어 사용자에게 오작동처럼 보입니다. 실제 기능에 연결하거나 메뉴에서 숨겨 주세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Chat/index.tsx` at line 324, The menu entry with label '알림 끄기' currently has an empty onClick (() => {}) which makes it nonfunctional; replace the empty handler with the real notification toggle or disable action (e.g., call the existing toggleNotifications(), setNotificationsEnabled(false), or props.onToggleNotifications() used elsewhere in Chat/index.tsx), or if no such handler exists, remove or conditionally hide the '알림 끄기' menu item so it is not shown to users.
🧹 Nitpick comments (1)
src/pages/Chat/index.tsx (1)
252-254: 타이포그래피 토큰 사용을 권장합니다.
text-[16px],text-[14px]대신text-sub1,text-body2등 시맨틱 타이포그래피 유틸리티를 사용하면 일관성을 유지할 수 있습니다. As per coding guidelines, "Use semantic typography utilities (text-h1,text-body1, etc.) before custom styles".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Chat/index.tsx` around lines 252 - 254, The paragraph elements in the Chat component use hardcoded size utilities (`text-[16px]` and `text-[14px]`) which violates the typography token guideline; update the className on the first <p> (currently using `text-[16px] font-bold`) to use the semantic token `text-sub1` (and keep `font-bold` if needed) and update the second <p> (currently `text-[14px]`) to use `text-body2` (or your project's equivalent semantic token) so the component (leaveRoom modal JSX) uses semantic typography utilities instead of custom pixel classes.
🤖 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/pages/Chat/index.tsx`:
- Around line 87-89: The useLongPress hook currently reads e.clientX/e.clientY
inside the setTimeout callback which can be invalidated; instead use the stored
coordinates in startPointRef.current when invoking onLongPress. Modify the timer
callback code in useLongPress (the block that sets timerRef.current and
didLongPressRef.current) to check startPointRef.current and call
onLongPress(startPointRef.current.x, startPointRef.current.y), then call
clearTimer(); ensure you keep references to timerRef, didLongPressRef,
startPointRef, onLongPress and clearTimer unchanged elsewhere.
- Around line 267-275: The click handler clears leaveRoom before checking it, so
deleteChatRoom never runs; capture the current room into a local variable (e.g.,
const room = leaveRoom) or check leaveRoom before calling setLeaveRoom(null),
then if room exists call await deleteChatRoom(room.roomId) inside the try/catch
and only after successful (or attempted) deletion call setLeaveRoom(null);
update the onClick handler that references setLeaveRoom, leaveRoom, and
deleteChatRoom accordingly.
---
Duplicate comments:
In `@src/pages/Chat/index.tsx`:
- Line 324: The menu entry with label '알림 끄기' currently has an empty onClick (()
=> {}) which makes it nonfunctional; replace the empty handler with the real
notification toggle or disable action (e.g., call the existing
toggleNotifications(), setNotificationsEnabled(false), or
props.onToggleNotifications() used elsewhere in Chat/index.tsx), or if no such
handler exists, remove or conditionally hide the '알림 끄기' menu item so it is not
shown to users.
---
Nitpick comments:
In `@src/pages/Chat/index.tsx`:
- Around line 252-254: The paragraph elements in the Chat component use
hardcoded size utilities (`text-[16px]` and `text-[14px]`) which violates the
typography token guideline; update the className on the first <p> (currently
using `text-[16px] font-bold`) to use the semantic token `text-sub1` (and keep
`font-bold` if needed) and update the second <p> (currently `text-[14px]`) to
use `text-body2` (or your project's equivalent semantic token) so the component
(leaveRoom modal JSX) uses semantic typography utilities instead of custom pixel
classes.
🪄 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: aa8166e1-9dc8-426d-9dbd-65189df0f771
📒 Files selected for processing (2)
src/pages/Chat/components/ChatRoomContextMenu.tsxsrc/pages/Chat/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/Chat/components/ChatRoomContextMenu.tsx
Comment on lines
+87
to
+89
| const longPress = useLongPress({ | ||
| onLongPress: (x: number, y: number) => onLongPress(x, y, room), | ||
| }); |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# useLongPress 훅의 setTimeout 콜백 확인
cat src/utils/hooks/useLongPress.tsRepository: BCSDLab/KONECT_FRONT_END
Length of output: 2291
useLongPress 훅의 이벤트 객체 참조 버그
setTimeout 콜백에서 e.clientX/e.clientY를 직접 참조하는 것은 위험합니다. 이벤트 핸들러 반환 후 React의 이벤트 객체가 무효화되므로 좌표가 NaN이 됩니다. 이미 저장된 startPointRef.current.x/y를 사용하도록 수정하세요:
timerRef.current = setTimeout(() => {
didLongPressRef.current = true;
if (startPointRef.current) {
onLongPress(startPointRef.current.x, startPointRef.current.y);
}
clearTimer();
}, delay);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Chat/index.tsx` around lines 87 - 89, The useLongPress hook
currently reads e.clientX/e.clientY inside the setTimeout callback which can be
invalidated; instead use the stored coordinates in startPointRef.current when
invoking onLongPress. Modify the timer callback code in useLongPress (the block
that sets timerRef.current and didLongPressRef.current) to check
startPointRef.current and call onLongPress(startPointRef.current.x,
startPointRef.current.y), then call clearTimer(); ensure you keep references to
timerRef, didLongPressRef, startPointRef, onLongPress and clearTimer unchanged
elsewhere.
Comment on lines
+267
to
+275
| onClick={async () => { | ||
| setLeaveRoom(null); | ||
| if (!leaveRoom) return; | ||
| try { | ||
| await deleteChatRoom(leaveRoom.roomId); | ||
| } catch (error) { | ||
| console.error('Error leaving chat room:', error); | ||
| } | ||
| }} |
Contributor
There was a problem hiding this comment.
leaveRoom을 null로 설정한 후 사용하고 있어 삭제가 실행되지 않습니다.
Line 268에서 setLeaveRoom(null) 호출 후 Line 269에서 leaveRoom을 체크하면 항상 null이므로 deleteChatRoom이 호출되지 않습니다.
🐛 수정 예시
onClick={async () => {
- setLeaveRoom(null);
if (!leaveRoom) return;
+ const roomId = leaveRoom.roomId;
+ setLeaveRoom(null);
try {
- await deleteChatRoom(leaveRoom.roomId);
+ await deleteChatRoom(roomId);
} catch (error) {
console.error('Error leaving chat room:', error);
}
}}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Chat/index.tsx` around lines 267 - 275, The click handler clears
leaveRoom before checking it, so deleteChatRoom never runs; capture the current
room into a local variable (e.g., const room = leaveRoom) or check leaveRoom
before calling setLeaveRoom(null), then if room exists call await
deleteChatRoom(room.roomId) inside the try/catch and only after successful (or
attempted) deletion call setLeaveRoom(null); update the onClick handler that
references setLeaveRoom, leaveRoom, and deleteChatRoom accordingly.
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.
✨ 요약
😎 해결한 이슈
close #255
✅ 작업 내용
🧪 테스트
pnpm lintSummary by CodeRabbit