[feat/api/chat/flow 35] 채팅 관련 기능 추가 #67
Merged
Conversation
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
✅ Deploy Preview for chatflow-project ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요! |
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds core chat functionality with optimistic updates, fixes socket reconnection issues, and refines sidebar channel navigation.
- Introduce
useMessageHistoryhook inChatPagefor fetching history and manage optimistic UI for sending messages. - Enhance
ChatMessageItemwith aMessageStatusindicator for pending/error states and fallback avatar icon. - Update sidebar components (
ServerChannelList,ChannelItem,ChannelCategory) to auto-navigate, support drag-and-drop viauseSortable, and route on click.
Reviewed Changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/view/pages/chat/components/message/ChatMessageItem.tsx | Add MessageStatus component, use fallback avatar icon |
| src/view/pages/chat/components/layout/ChatView.tsx | Refactor message list mapping, wrap each entry for date divider grouping |
| src/view/pages/chat/ChatPage.tsx | Fetch/manage message history, handle optimistic updates with sendMessage |
| src/view/layout/sidebar/components/channel/ServerChannelList.tsx | Auto-select first channel when none is specified |
| src/view/layout/sidebar/components/channel/InviteFriendModal.tsx | Style invite button, assign keys to list items correctly |
| src/view/layout/sidebar/components/channel/ChannelItem.tsx | Switch to useSortable for drag-and-drop, add click navigation |
| src/view/layout/sidebar/components/channel/ChannelCategory.tsx | Pass chatId prop, update DragEndEvent typing |
| src/view/layout/sidebar/components/channel/SidebarLayout.tsx | Extend sidebar layout to full height |
| <div ref={bottomRef} /> | ||
| </div> | ||
| return ( | ||
| <div key={`msg-${index}`}> |
There was a problem hiding this comment.
[nitpick] Using the array index for React keys can lead to rendering issues when the list changes. Use a stable identifier (e.g., msg.messageId or msg.tempId) for the key instead.
Suggested change
| <div key={`msg-${index}`}> | |
| <div key={msg.messageId}> |
Comment on lines
+98
to
113
| const msg: Omit<ChatMessage, 'messageId'> = { | ||
| sender: { | ||
| memberId: MY_ID, | ||
| username: 'tester', | ||
| avatarUrl: '', | ||
| name: "tester", | ||
| avatarUrl: "", | ||
| }, | ||
| content: text, | ||
| createdAt: new Date().toISOString(), | ||
| isUpdated: false, | ||
| isDeleted: false, | ||
| attachments: | ||
| imageUrls.length > 0 | ||
| ? imageUrls.map((url) => ({ type: 'image', url })) | ||
| : undefined, | ||
| ? imageUrls.map((url) => ({ type: "image" as const, url })) | ||
| : [], | ||
| }; | ||
|
|
||
| sendMessage(msg.content, msg.attachments); |
There was a problem hiding this comment.
This call duplicates the message send logic above in the try block, resulting in two publishes for the same input. Remove this redundant sendMessage invocation and the unused msg object definition.
src/view/layout/sidebar/components/channel/ServerChannelList.tsx
Outdated
Show resolved
Hide resolved
src/view/layout/sidebar/components/channel/InviteFriendModal.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요! |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요! |
1 similar comment
|
🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요! |
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
2 similar comments
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 제목
새로고침 시, 소켓 연결이 끊기는 문제, 스톰프 구독 끊기는 문제를 해결하였습니다.(그냥 에러나면 다시시도 붙임)
채팅관련 api들 연결을 붙이면서 서버 채널을 수정했습니다.
라우터로 채널 아이디 붙이기와 해당하는 서버 클릭 시 바로 기본 채널과 채팅 내역 불러오기를 추가하였습니다.
채팅 전송을 낙관적 업데이트로 넣었고, 현재는 스피너를 못찾아 모래시계가 뺑글뺑글 돌고 있는데 수정할 예정입니다.
채팅목록은 200이 뜨지만 데이터가 빈배열이 들어와 확인을 못했습니다. 아마 저장이 안되는 것 같군요,,,
따라서 수정 삭제와 스크롤에 따른 api는 연결이 아직 안된 상태이지만 금방 붙일 예정입니다.
(멘션도 다시 테스트 해야함!!)
✅ 요구사항
⭐ 시연
✅ 기능1
✅ 리뷰어가 알아야할 사항
✅ 체크리스트