diff --git a/components/rooms/RoomChatroom/ChatMessage.test.tsx b/components/rooms/RoomChatroom/ChatMessage.test.tsx
index 0b748f49..61d96a16 100644
--- a/components/rooms/RoomChatroom/ChatMessage.test.tsx
+++ b/components/rooms/RoomChatroom/ChatMessage.test.tsx
@@ -3,19 +3,18 @@ import { render, screen } from "@testing-library/react";
import ChatMessage, { ChatMessageProps } from "./ChatMessage";
import { TEXT_COLORS_CLASS } from "./ChatMessage";
-const TEST_USER_MESSAGE_PROPS: ChatMessageProps = {
- from: "USER",
+const TEST_USER_MESSAGE_PROPS = {
+ from: { id: "test_user", nickname: "test_nickname" },
content: "test textContent",
- user: { id: "a", nickname: "testName" },
timestamp: new Date().toISOString(),
- to: "LOBBY",
+ target: "LOBBY",
};
const TEST_SYSTEM_MESSAGE_PROPS: ChatMessageProps = {
from: "SYSTEM",
content: "test textContent",
timestamp: new Date().toISOString(),
- to: "ALL",
+ target: "LOBBY",
};
describe("ChatMessage", () => {
@@ -48,7 +47,7 @@ describe("ChatMessage", () => {
);
expect(baseElement.textContent).toMatch(
- TEST_USER_MESSAGE_PROPS.user!.nickname
+ TEST_USER_MESSAGE_PROPS.from.nickname
);
});
});
diff --git a/components/rooms/RoomChatroom/ChatMessage.tsx b/components/rooms/RoomChatroom/ChatMessage.tsx
index ac954650..63a8a601 100644
--- a/components/rooms/RoomChatroom/ChatMessage.tsx
+++ b/components/rooms/RoomChatroom/ChatMessage.tsx
@@ -11,7 +11,7 @@ function ChatMessage(props: MessageType): JSX.Element {
const textColorClass =
props.from === "SYSTEM" ? TEXT_COLORS_CLASS.SYSTEM : TEXT_COLORS_CLASS.USER;
- const senderText = props.from === "USER" ? props.user?.nickname + ": " : "";
+ const senderText = props.from === "SYSTEM" ? "" : props.from.nickname + ": ";
return (
diff --git a/components/rooms/RoomChatroom/RoomChatroom.tsx b/components/rooms/RoomChatroom/RoomChatroom.tsx
index 94e16b98..8ed65f22 100644
--- a/components/rooms/RoomChatroom/RoomChatroom.tsx
+++ b/components/rooms/RoomChatroom/RoomChatroom.tsx
@@ -28,7 +28,7 @@ export default function RoomChatroom({ roomId }: RoomChatroom) {
// update message list while received new message from websocket
useEffect(() => {
if (!lastMessage || !roomId) return;
- if (lastMessage.to === roomId || lastMessage.to === "ALL") {
+ if (lastMessage.target === `ROOM_${roomId}`) {
setMessageList((prev) => [...prev, lastMessage]);
}
}, [lastMessage, roomId]);
@@ -53,9 +53,9 @@ export default function RoomChatroom({ roomId }: RoomChatroom) {
function handleSubmitText() {
if (!inputValue) return;
- const data: Pick = {
+ const data: Pick = {
content: inputValue,
- to: roomId,
+ target: `ROOM_${roomId}`,
};
sendChatMessage(data);
setInputValue("");
diff --git a/components/rooms/RoomChatroom/index.ts b/components/rooms/RoomChatroom/index.ts
index 10a4bed6..56ee5472 100644
--- a/components/rooms/RoomChatroom/index.ts
+++ b/components/rooms/RoomChatroom/index.ts
@@ -1,30 +1,19 @@
-import { RoomInfo } from "@/requests/rooms";
import { UserInfo } from "@/requests/users";
import RoomChatroom from "./RoomChatroom";
type User = Pick;
export type MessageType = {
- /**
- * The source of the message (always "USER" for user messages).
- */
- from: "USER" | "SYSTEM";
- /**
- * The user who sent the message.
- */
- user?: User;
- /**
- * The content of the user message.
- */
+ /** The source of the message. */
+ from: "SYSTEM" | User;
+ /** The content of the user message. */
content: string;
- /**
- * The timestamp of the message.
+ /** The recipient of the message.
+ * @ "LOBBY" | "ROOM_[:roomId]" -
*/
+ target: string;
+ /** The timestamp of the message. */
timestamp: string;
- /**
- * {"ALL" | "LOBBY" | User["id"] | RoomInfo.Room["id"]} to - The recipient of the message.
- */
- to: "ALL" | "LOBBY" | User["id"] | RoomInfo.Room["id"];
};
export default RoomChatroom;
diff --git a/containers/provider/ChatroomProvider.tsx b/containers/provider/ChatroomProvider.tsx
index f6bb8af1..ea4ad8ca 100644
--- a/containers/provider/ChatroomProvider.tsx
+++ b/containers/provider/ChatroomProvider.tsx
@@ -35,15 +35,13 @@ function useChatroomCore() {
/**
* Sends a chat message to the server.
* @param {string} message.content - The content of the message.
- * @param {string} message.to - The target roomId of the message.
+ * @param {string} message.target - The target chatroomId of the message.
*/
const sendChatMessage = useCallback(
- (message: Pick) => {
+ (message: Pick) => {
if (!currentUser) return;
- const payload: MessageType = {
- from: "USER",
- user: { id: currentUser.id, nickname: currentUser.nickname },
- timestamp: new Date().toISOString(),
+ const payload: Omit = {
+ from: { id: currentUser.id, nickname: currentUser.nickname },
...message,
};
if (socket) {
diff --git a/pages/api/mock/socketio.ts b/pages/api/mock/socketio.ts
index fac1b7e8..64fc025d 100644
--- a/pages/api/mock/socketio.ts
+++ b/pages/api/mock/socketio.ts
@@ -122,7 +122,10 @@ const socketio = async (req: NextApiRequest, res: NextApiResponseServerIO) => {
default:
break;
}
- io.emit(SOCKET_EVENT.CHAT_MESSAGE, message);
+ io.emit(SOCKET_EVENT.CHAT_MESSAGE, {
+ ...message,
+ timestamp: new Date().toISOString(),
+ });
});
socket.on(SOCKET_EVENT.DISCONNECT, () => {
// eslint-disable-next-line no-console