[feat/api/chat/FLOW-35] 메시지 불러오기, 전송중, 전송, 참여 멤버 리슽 다이얼로그, 멘션 추가(각각, everyone) #69

xeunnie · 2025-07-11T13:02:36Z

💡 PR 제목

✅ 요구사항

메시지 불러오기, 전송 중, 전송, 참여 멤버 리스트 다이얼로그 추가, 멘션 기능 추가

⭐ 시연

✅ 기능1

✅ 리뷰어가 알아야할 사항

✅ 체크리스트

자신의 코드에 대한 리뷰를 진행했습니다
실행 후 심각한 버그나 경고문이 없음을 확인했습니다
이해하기 어려운 부분에 적절한 주석을 첨부했습니다
요구사항 변경, 레이아웃 변경 등 변경사항을 문서에 반영했습니다

netlify · 2025-07-11T13:02:45Z

✅ Deploy Preview for chatflow-project ready!

Name	Link
🔨 Latest commit	`b1a9774`
🔍 Latest deploy log	https://app.netlify.com/projects/chatflow-project/deploys/68710d09921ccd0008dc07a2
😎 Deploy Preview	https://deploy-preview-69--chatflow-project.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2025-07-11T13:02:45Z

🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요!

github-actions · 2025-07-11T13:03:43Z

CI Status Report

검사 결과

Lint: ❌ failure
Format: ❌ failure
Build: ✅ success

❌ 일부 검사가 실패했습니다.

Copilot

Pull Request Overview

This PR adds messaging features including fetching message history, displaying send status indicators, a member list dialog, and support for @-mentions.

Enhanced ChatMessageItem to parse and highlight mentions and show pending/error status.
Added ChatMembersDialog and integrated it via the Users icon in ChannelHeader.
Refactored ChatInput to trigger and insert @-mentions, and updated ChatPage to handle mentions in outgoing messages.

Reviewed Changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/view/pages/chat/components/message/ChatMessageItem.tsx	Added `mentions` prop, `parseMentions` helper, and revamped status indicator UI
src/view/pages/chat/components/layout/ChatView.tsx	Updated props to include categories, passed empty mentions array (placeholder)
src/view/pages/chat/components/layout/ChatMembersDialog.tsx	New component for displaying and searching channel members
src/view/pages/chat/components/layout/ChatInput.tsx	Refactored input to support @-mention dropdown and mapping
src/view/pages/chat/components/layout/ChannelHeader.tsx	Integrated `ChatMembersDialog` and added channel icon display
src/view/pages/chat/ChatPage.tsx	Wired up mentions flow end-to-end, improved loading/error states
src/service/feature/chat/type/messages.ts	Introduced new `Chat` interface
src/service/feature/chat/api/chatAPI.ts	Adjusted API return handling, added logging
src/service/feature/common/axios/axiosInstance.ts	Switched base domain to HTTP URL

Comments suppressed due to low confidence (2)

src/service/feature/chat/type/messages.ts:1

The Chat interface doesn't include a mentions field. You may want to add mentions?: string[]; to align with the schema and component props.

export interface Chat {

src/view/pages/chat/components/message/ChatMessageItem.tsx:118

There appears to be an extra closing tag, which can break the JSX structure. Please remove the redundant closing tag.

    </div>

Copilot · 2025-07-11T13:05:06Z

src/view/pages/chat/components/message/ChatMessageItem.tsx


-export const ChatMessageItem = ({ msg, isMine, showMeta }: Props) => {
+const parseMentions = (text: string, mentions: string[]) => {
+  return text.split(/(\@[^\s]+)/g).map((part, index) => {


[nitpick] The parseMentions function returns a mix of React elements and plain strings without keys for string parts, which can cause key warnings. Consider wrapping string parts in a with a key.

Copilot · 2025-07-11T13:05:06Z

src/view/pages/chat/components/layout/ChatView.tsx

+  messages: Chat[];
  myId: string;
+  categories: CategoryView
 }) => {


The categories prop is declared in the type but not destructured from the component's parameters, so it will always be undefined. Include categories in the destructuring pattern.

src/view/pages/chat/components/layout/ChatView.tsx

Copilot · 2025-07-11T13:05:07Z

src/view/pages/chat/components/layout/ChatView.tsx

+import {CategoryView} from "@service/feature/channel/types/channel.ts";

 export const ChatView = ({messages = [], myId }: {
-  messages: ChatMessage[];
+  messages: Chat[];
  myId: string;
+  categories: CategoryView


The CategoryView import isn't used in this file. Consider removing it or using it in the component.

src/view/pages/chat/components/layout/ChatView.tsx

Copilot · 2025-07-11T13:05:07Z

src/view/pages/chat/components/message/ChatMessageItem.tsx

  msg: ChatMessage;
  isMine: boolean;
  showMeta: boolean;
+  mentions: string[];


The mentions prop is defined as an array of usernames, but ChatPage currently populates msg.mentions with IDs. Consider aligning the prop type or passing usernames so parseMentions can match correctly.

src/service/feature/chat/api/chatAPI.ts

Copilot · 2025-07-11T13:05:08Z

src/service/feature/common/axios/axiosInstance.ts


 const API_CONFIG = {
-  BASE_DOMAIN: 'https://flowchat.shop:30200',
+  BASE_DOMAIN: 'http://flowchat.shop:30100',


Using HTTP for the base API domain may expose data in transit. Consider switching to HTTPS for production endpoints.

Suggested change

BASE_DOMAIN: 'http://flowchat.shop:30100',

BASE_DOMAIN: process.env.API_BASE_URL || 'http://localhost:30100',

Copilot · 2025-07-11T13:05:08Z

src/view/pages/chat/components/layout/ChatView.tsx

  const messageList = Array.isArray(messages) ? messages : [];
+  console.log("messageList", messageList);

  const shouldShowDateDivider = (currentMsg: ChatMessage, prevMsg?: ChatMessage) => {


The shouldShowDateDivider callback refers to ChatMessage but your ChatView is consuming the Chat type. Update the parameter types to use Chat.

Suggested change

const shouldShowDateDivider = (currentMsg: ChatMessage, prevMsg?: ChatMessage) => {

const shouldShowDateDivider = (currentMsg: Chat, prevMsg?: Chat) => {

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions · 2025-07-11T13:09:01Z

🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요!

github-actions · 2025-07-11T13:09:10Z

🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요!

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions · 2025-07-11T13:09:32Z

🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요!

github-actions · 2025-07-11T13:09:39Z

🛠 PR 검사를 시작합니다. 잠시만 기다려 주세요!

github-actions · 2025-07-11T13:09:56Z

CI Status Report

검사 결과

Lint: ❌ failure
Format: ❌ failure
Build: ✅ success

❌ 일부 검사가 실패했습니다.

github-actions · 2025-07-11T13:10:04Z

CI Status Report

검사 결과

Lint: ❌ failure
Format: ❌ failure
Build: ✅ success

❌ 일부 검사가 실패했습니다.

github-actions · 2025-07-11T13:10:28Z

CI Status Report

검사 결과

Lint: ❌ failure
Format: ❌ failure
Build: ✅ success

❌ 일부 검사가 실패했습니다.

github-actions · 2025-07-11T13:10:36Z

CI Status Report

검사 결과

Lint: ❌ failure
Format: ❌ failure
Build: ✅ success

❌ 일부 검사가 실패했습니다.

xeunnie added 4 commits June 28, 2025 22:48

FLOW-35: 메시지 전송 오류 수정, 두번 저장 수정

03bd958

FLOW-35: 멘션 완료

22e80aa

feat(chat): 메시지 불러오기, 전송중, 전송, 참여 멤버 리슽 다이얼로그, 멘션 추가(각각, everyone)

f20d10b

Merge remote-tracking branch 'origin/develop' into feat/api/chat/FLOW-35

7717604

xeunnie added this to the API milestone Jul 11, 2025

xeunnie requested review from Copilot and dbswl701 July 11, 2025 13:02

xeunnie self-assigned this Jul 11, 2025

xeunnie added the API 백엔드 연결 label Jul 11, 2025

Copilot AI reviewed Jul 11, 2025

View reviewed changes

xeunnie and others added 2 commits July 11, 2025 22:08

Update src/view/pages/chat/components/layout/ChatView.tsx

75451e2

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/view/pages/chat/components/layout/ChatView.tsx

c5a0e7c

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

xeunnie and others added 2 commits July 11, 2025 22:09

Update src/service/feature/chat/api/chatAPI.ts

ac7c407

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/view/pages/chat/components/layout/ChatView.tsx

b1a9774

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

xeunnie merged commit 2a5e88d into develop Jul 11, 2025
4 of 5 checks passed

	BASE_DOMAIN: 'http://flowchat.shop:30100',
	BASE_DOMAIN: process.env.API_BASE_URL \|\| 'http://localhost:30100',

	const shouldShowDateDivider = (currentMsg: ChatMessage, prevMsg?: ChatMessage) => {
	const shouldShowDateDivider = (currentMsg: Chat, prevMsg?: Chat) => {

[feat/api/chat/FLOW-35] 메시지 불러오기, 전송중, 전송, 참여 멤버 리슽 다이얼로그, 멘션 추가(각각, everyone) #69

[feat/api/chat/FLOW-35] 메시지 불러오기, 전송중, 전송, 참여 멤버 리슽 다이얼로그, 멘션 추가(각각, everyone) #69

Uh oh!

Conversation

xeunnie commented Jul 11, 2025

💡 PR 제목

✅ 요구사항

⭐ 시연

✅ 기능1

✅ 리뷰어가 알아야할 사항

✅ 체크리스트

Uh oh!

netlify bot commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for chatflow-project ready!

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

github-actions bot commented Jul 11, 2025

CI Status Report

검사 결과

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

github-actions bot commented Jul 11, 2025

CI Status Report

검사 결과

Uh oh!

github-actions bot commented Jul 11, 2025

CI Status Report

검사 결과

Uh oh!

github-actions bot commented Jul 11, 2025

CI Status Report

검사 결과

Uh oh!

github-actions bot commented Jul 11, 2025

CI Status Report

검사 결과

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

netlify bot commented Jul 11, 2025 •

edited

Loading