- )
+ );
}
-export default FloatingChat
+export default FloatingChat;
\ No newline at end of file
diff --git a/src/components/common/chat/FloatingChatButton.jsx b/src/components/common/chat/FloatingChatButton.jsx
index 81c8a8e..006ec9b 100644
--- a/src/components/common/chat/FloatingChatButton.jsx
+++ b/src/components/common/chat/FloatingChatButton.jsx
@@ -1,14 +1,21 @@
-import { Telegram } from '@mui/icons-material'
+import { Telegram } from '@mui/icons-material';
-const FloatingChatButton = ({ onClick }) => {
+const FloatingChatButton = ({ onClick, unreadCount }) => {
return (
- )
-}
+ );
+};
-export default FloatingChatButton
+export default FloatingChatButton;
\ No newline at end of file
diff --git a/src/components/dashboard/PriorityTasks.jsx b/src/components/dashboard/PriorityTasks.jsx
index 176f306..c70cbf8 100644
--- a/src/components/dashboard/PriorityTasks.jsx
+++ b/src/components/dashboard/PriorityTasks.jsx
@@ -150,7 +150,7 @@ function PriorityTasks({ selectedProjectId }) {
{/* 작업 목록 - 우선순위별 배경색 적용 */}
{priorityGroup.priorityDataList.slice(0, currentVisibleItems).map((task) => (
-
handleIssueClick(task.id)}
@@ -171,9 +171,10 @@ function PriorityTasks({ selectedProjectId }) {
))}
+
{/* 더 보기/더 적게 보기 버튼 */}
{hasMoreItems && (
-
handleShowMore(priorityGroup.priority)}
>
@@ -181,8 +182,9 @@ function PriorityTasks({ selectedProjectId }) {
)}
+
{hasLessItems && (
-
handleShowLess(priorityGroup.priority)}
>
diff --git a/src/hooks/chat/useChat.js b/src/hooks/chat/useChat.js
index a8efff9..7aa6206 100644
--- a/src/hooks/chat/useChat.js
+++ b/src/hooks/chat/useChat.js
@@ -23,8 +23,9 @@ export const useChat = () => {
const selectChatRoom = (chatRoom) => {
setSelectedChat(chatRoom)
setCurrentView('chat')
- // 채팅방 선택 시 읽음 처리
- markAsRead(chatRoom.id)
+ // 채팅방 선택 시 읽음 처리 (마지막 메시지 ID를 전달해야 함)
+ // TODO: ChatRoom.jsx에서 마지막 메시지 ID를 가져와 markAsRead 호출 시 전달하도록 수정 필요
+ markAsRead(chatRoom.id, null) // 임시로 null 전달
}
const backToList = () => {
@@ -43,26 +44,9 @@ export const useChat = () => {
const handleSendMessage = (e) => {
e.preventDefault()
if (message.trim() && selectedChat) {
- // Zustand store를 통해 메시지 전송
+ // Zustand store를 통해 메시지 전송 (WebSocket 사용)
sendMessage(selectedChat.id, message.trim())
setMessage('')
-
- // 시뮬레이션: 2초 후 상대방 응답
- setTimeout(() => {
- const responses = [
- '네, 알겠습니다!',
- '확인했습니다.',
- '좋은 아이디어네요.',
- '언제 시간 되시나요?',
- '회의실 예약해두겠습니다.'
- ]
- const randomResponse = responses[Math.floor(Math.random() * responses.length)]
-
- // 상대방 이름 (첫 번째 참가자를 상대방으로 가정)
- const otherParticipant = selectedChat.participants.find(p => p !== '현재사용자') || selectedChat.name
-
- useChatStore.getState().receiveMessage(selectedChat.id, randomResponse, otherParticipant)
- }, 2000)
}
}
diff --git a/src/hooks/chat/useFloatingChat.js b/src/hooks/chat/useFloatingChat.js
index e06393c..5e34656 100644
--- a/src/hooks/chat/useFloatingChat.js
+++ b/src/hooks/chat/useFloatingChat.js
@@ -1,64 +1,251 @@
-import { useChat } from './useChat'
-import { useChatRooms } from './useChatRooms'
-import { useEmployees } from './useEmployees'
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useAuth } from '../../hooks/useAuth';
+import useChatStore from '../../store/chatStore';
+import * as chatApi from '../../api/chatApi';
+import * as socketService from '../../api/socketService';
+import { useDebounce } from '../useDebounce';
export const useFloatingChat = () => {
- const chatHook = useChat()
- const chatRoomsHook = useChatRooms()
- const employeesHook = useEmployees()
-
- // 채팅방 생성 로직
- const handleSelectEmployee = (employee) => {
- const existingChat = chatRoomsHook.findExistingPrivateChat(employee.name)
-
- if (existingChat) {
- chatHook.selectChatRoom(existingChat)
- } else {
- const newChat = {
- id: Date.now(),
- name: employee.name,
- type: 'private',
- lastMessage: '새로운 채팅이 시작되었습니다.',
- lastTime: '방금',
- unreadCount: 0,
- participants: [employee.name]
- }
- chatRoomsHook.addChatRoom(newChat)
- chatHook.selectChatRoom(newChat)
+ const { user } = useAuth();
+ const {
+ chatRooms, setChatRooms, setMessages, addMessage, updateMessage,
+ setTotalUnreadCount, resetUnreadCount, setCurrentUser, removeChatRoom, totalUnreadCount
+ } = useChatStore();
+
+ // --- UI State ---
+ const [isOpen, setIsOpen] = useState(false);
+ const [currentView, setCurrentView] = useState('list');
+ const [selectedChat, setSelectedChat] = useState(null);
+ const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0, roomId: null });
+ const [isSocketConnected, setIsSocketConnected] = useState(false); // 소켓 연결 상태
+
+ // --- Form State ---
+ const [message, setMessage] = useState('');
+ const [searchTerm, setSearchTerm] = useState('');
+ const [employeeSearchTerm, setEmployeeSearchTerm] = useState('');
+ const [groupName, setGroupName] = useState('');
+
+ // --- Data State ---
+ const [allEmployees, setAllEmployees] = useState([]);
+ const [selectedEmployees, setSelectedEmployees] = useState([]);
+
+ const debouncedSearchTerm = useDebounce(employeeSearchTerm, 500);
+
+ // --- WebSocket Connection & Initial Data Fetching ---
+ useEffect(() => {
+ if (user) {
+ setCurrentUser(user);
+ // 로그인하면 바로 전체 안읽은 개수 가져오기 (REST API)
+ chatApi.fetchTotalUnreadCount().then(response => setTotalUnreadCount(response.data.data.totalUnreadCount));
+
+ // WebSocket 연결 시작
+ socketService.connectWebSocket(() => {
+ setIsSocketConnected(true); // 연결 성공 시 상태만 변경
+ });
+ }
+ return () => {
+ socketService.disconnectWebSocket();
+ setIsSocketConnected(false);
+ };
+ }, [user, setCurrentUser, setTotalUnreadCount]);
+
+ // --- WebSocket Subscriptions (연결 상태에 따라 구독) ---
+ useEffect(() => {
+ if (isSocketConnected) {
+ const subscription = socketService.subscribe('/topic/update', async (message) => {
+ try {
+ console.log('Received update message:', message);
+ const { totalUnreadCount, memberId } = message;
+ if (memberId === user?.id && totalUnreadCount !== undefined) {
+ setTotalUnreadCount(totalUnreadCount);
+ }
+ const response = await chatApi.fetchChatRooms();
+ const chatRoomsData = Array.isArray(response.data.data) ? response.data.data : [];
+ setChatRooms(chatRoomsData);
+ } catch (error) {
+ console.error('Failed to process update message or fetch chat rooms:', error);
+ }
+ });
+
+ return () => {
+ if (subscription) {
+ socketService.unsubscribe('/topic/update');
+ }
+ };
+ }
+ }, [isSocketConnected, setChatRooms, setTotalUnreadCount, user]);
+
+ // --- Chat Window Open Logic ---
+ useEffect(() => {
+ if (isOpen && user) {
+ chatApi.fetchChatRooms().then(response => {
+ const chatRoomsData = Array.isArray(response.data.data) ? response.data.data : [];
+ setChatRooms(chatRoomsData);
+ });
+ }
+ }, [isOpen, user, setChatRooms]);
+
+ // --- 이전 메시지 로딩 및 읽음 처리 ---
+ useEffect(() => {
+ if (selectedChat) {
+ chatApi.fetchMessages(selectedChat.id).then(response => {
+ const messages = response.data.data;
+ setMessages(selectedChat.id, messages);
+ if (messages && messages.length > 0 && selectedChat.unreadMessageCount > 0) {
+ const lastMessageId = messages[messages.length - 1].id;
+ chatApi.markAllAsRead(selectedChat.id, lastMessageId).then(() => {
+ chatApi.fetchTotalUnreadCount().then(res => setTotalUnreadCount(res.data.data.totalUnreadCount));
+ });
+ }
+ });
+ }
+ }, [selectedChat, setMessages, setTotalUnreadCount]);
+
+ // --- 실시간 메시지 구독 ---
+ useEffect(() => {
+ let subscription;
+ if (selectedChat && isSocketConnected) {
+ subscription = socketService.subscribeToChatRoom(selectedChat.id, (newMessage) => {
+ if (newMessage.type === 'DELETED') {
+ updateMessage(selectedChat.id, newMessage);
+ } else {
+ addMessage(selectedChat.id, newMessage);
+ }
+ });
}
- }
-
- const handleCreateGroupChat = () => {
- if (employeesHook.selectedEmployees.length === 1) {
- handleSelectEmployee(employeesHook.selectedEmployees[0])
- } else if (employeesHook.selectedEmployees.length > 1) {
- const groupName = employeesHook.selectedEmployees.map(emp => emp.name).join(', ')
- const newChat = {
- id: Date.now(),
- name: groupName,
- type: 'group',
- lastMessage: '그룹 채팅이 시작되었습니다.',
- lastTime: '방금',
- unreadCount: 0,
- participants: employeesHook.selectedEmployees.map(emp => emp.name)
+ return () => {
+ if (subscription && selectedChat) {
+ socketService.unsubscribe(`/topic/chatroom/${selectedChat.id}`);
}
- chatRoomsHook.addChatRoom(newChat)
- chatHook.selectChatRoom(newChat)
+ };
+ }, [selectedChat, isSocketConnected, addMessage, updateMessage]);
+
+ // --- Employee Search Logic ---
+ useEffect(() => {
+ if (currentView === 'createChat') {
+ const promise = debouncedSearchTerm ? chatApi.searchMembers(debouncedSearchTerm) : chatApi.fetchAllMembers();
+ promise.then(response => setAllEmployees(response.data.data));
}
- employeesHook.clearSelectedEmployees()
- }
+ }, [debouncedSearchTerm, currentView]);
+
+ // --- Event Handlers (이하 동일) ---
+ const toggleChat = () => setIsOpen(!isOpen);
+ const toggleMinimize = () => {
+ setIsOpen(false); // Close the chat window completely
+ };
+ const backToList = useCallback(() => {
+ setSelectedChat(null);
+ setCurrentView('list');
+ }, [setSelectedChat, setCurrentView]);
+
+ const selectChatRoom = (room) => {
+ setSelectedChat(room);
+ setCurrentView('chat');
+ resetUnreadCount(room.id);
+ };
const handleGoToCreateChat = () => {
- chatHook.goToCreateChat()
- employeesHook.clearSelectedEmployees()
- }
+ setSelectedEmployees([]);
+ setEmployeeSearchTerm('');
+ setGroupName('');
+ setCurrentView('createChat');
+ };
+
+ const handleToggleEmployee = (employee) => {
+ setSelectedEmployees(prev =>
+ prev.some(e => e.id === employee.id)
+ ? prev.filter(e => e.id !== employee.id)
+ : [...prev, employee]
+ );
+ };
+
+ const handleCreateGroupChat = async () => {
+ if (selectedEmployees.length === 0) return;
+ const memberIdList = selectedEmployees.map(e => e.id);
+ if (user && !memberIdList.includes(user.id)) {
+ memberIdList.push(user.id);
+ }
+ let roomName, type;
+ if (memberIdList.length <= 2 && selectedEmployees.length === 1) {
+ type = 'One_On_One';
+ roomName = selectedEmployees[0].name;
+ } else {
+ if (!groupName.trim()) { alert('그룹 채팅방 이름을 입력해주세요.'); return; }
+ type = 'Group';
+ roomName = groupName;
+ }
+ try {
+ console.log('--- Debugging Chat Room Creation ---');
+ console.log('Current User (creator):', user);
+ console.log('Selected Employees (from UI):', selectedEmployees);
+ console.log('memberIdList (sent to backend):', memberIdList);
+ console.log('Calculated roomName (for 1:1):', roomName);
+ console.log('Type:', type);
+ console.log('------------------------------------');
+ await chatApi.createChatRoom(memberIdList, roomName, type);
+ const response = await chatApi.fetchChatRooms();
+ const chatRoomsData = Array.isArray(response.data.data) ? response.data.data : [];
+ setChatRooms(chatRoomsData);
+ backToList();
+ } catch (error) {
+ console.error('Failed to create chat room:', error);
+ }
+ };
+
+ const handleContextMenu = useCallback((event, room) => {
+ event.preventDefault();
+ setContextMenu({ visible: true, x: event.clientX, y: event.clientY, roomId: room.id });
+ }, []);
+
+ const closeContextMenu = useCallback(() => {
+ setContextMenu(prev => ({ ...prev, visible: false }));
+ }, []);
+
+ const handleLeaveChatRoom = useCallback(async () => {
+ if (!contextMenu.roomId) return;
+ try {
+ await chatApi.leaveChatRoom(contextMenu.roomId);
+ removeChatRoom(contextMenu.roomId);
+ if (selectedChat?.id === contextMenu.roomId) {
+ backToList();
+ }
+ } catch (error) {
+ console.error("Failed to leave chat room:", error);
+ } finally {
+ closeContextMenu();
+ }
+ }, [contextMenu.roomId, selectedChat, removeChatRoom, backToList, closeContextMenu]);
+
+ const handleSendMessage = useCallback((e) => {
+ e.preventDefault();
+ if (!message.trim() || !selectedChat || !user) return;
+ const messageDto = {
+ chatRoomId: selectedChat.id,
+ senderId: user.id,
+ content: message,
+ type: 'TEXT'
+ };
+ socketService.sendMessage(messageDto);
+ setMessage('');
+ }, [message, selectedChat, user, setMessage]);
+
+ const filteredChatRooms = useMemo(() => {
+ const validChatRooms = Array.isArray(chatRooms) ? chatRooms : [];
+ return validChatRooms.filter(room =>
+ room.name?.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+ }, [chatRooms, searchTerm]);
+
+ useEffect(() => {
+ console.log('Filtered Chat Rooms Updated:', filteredChatRooms);
+ }, [filteredChatRooms]);
return {
- ...chatHook,
- ...chatRoomsHook,
- ...employeesHook,
- handleSelectEmployee,
- handleCreateGroupChat,
- handleGoToCreateChat
- }
-}
+ isOpen, message, setMessage, currentView, selectedChat, searchTerm, setSearchTerm,
+ employeeSearchTerm, setEmployeeSearchTerm, selectedEmployees, filteredEmployees: allEmployees,
+ groupName, setGroupName, filteredChatRooms, contextMenu, totalUnreadCount,
+ toggleChat, selectChatRoom, backToList, toggleMinimize, handleGoToCreateChat,
+ handleToggleEmployee, handleCreateGroupChat, handleContextMenu, closeContextMenu, handleLeaveChatRoom,
+ handleSendMessage
+ };
+};
\ No newline at end of file
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js
new file mode 100644
index 0000000..a645c77
--- /dev/null
+++ b/src/hooks/useDebounce.js
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce(value, delay) {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(() => {
+ // value가 변경된 후 delay 시간 뒤에 debouncedValue를 업데이트
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ // cleanup 함수: 이전 타이머를 제거하여 마지막 타이머만 실행되게 함
+ return () => {
+ clearTimeout(handler);
+ };
+ }, [value, delay]);
+
+ return debouncedValue;
+}
diff --git a/src/store/chatStore.js b/src/store/chatStore.js
index 9d20931..712e7c9 100644
--- a/src/store/chatStore.js
+++ b/src/store/chatStore.js
@@ -1,131 +1,218 @@
-import { create } from 'zustand'
-import { chatRoomsData } from '../data/chatRooms'
+import { create } from 'zustand';
+import SockJS from 'sockjs-client';
+import { Stomp } from '@stomp/stompjs';
-const useChatStore = create((set, get) => ({
- // 채팅방 목록
- chatRooms: chatRoomsData,
-
- // 각 채팅방의 메시지들 (chatRoomId를 key로 하는 객체)
- messages: {
- // 예시: { 1: [message1, message2], 2: [message3, message4] }
- },
+let stompClient = null;
+let subscriptions = {};
- // 현재 사용자 설정 (AuthContext에서 사용자 정보를 받아서 설정)
+const useChatStore = create((set, get) => ({
+ chatRooms: [],
+ messages: {},
+ totalUnreadCount: 0,
currentUser: null,
-
- // 현재 사용자 설정
- setCurrentUser: (user) => set({ currentUser: user }),
-
- // 채팅방 추가
- addChatRoom: (newChatRoom) => set((state) => ({
- chatRooms: [newChatRoom, ...state.chatRooms],
- messages: { ...state.messages, [newChatRoom.id]: [] }
- })),
-
- // 메시지 전송
- sendMessage: (chatRoomId, messageText) => {
- const { currentUser } = get()
- if (!currentUser) return null;
-
- const newMessage = {
- id: Date.now(),
- text: messageText,
- sender: currentUser.name,
- senderId: currentUser.id || currentUser.account_id,
- timestamp: new Date().toISOString(),
- type: 'text'
- }
+ isConnected: false,
+ setCurrentUser: (user) => {
+ set({ currentUser: user });
+
+ // Removed duplicate subscription logic to avoid redundancy
+ },
+ setChatRooms: (rooms) =>
set((state) => {
- const updatedMessages = {
- ...state.messages,
- [chatRoomId]: [...(state.messages[chatRoomId] || []), newMessage]
+ const prevChatRooms = Array.isArray(state.chatRooms) ? state.chatRooms : [];
+ if (!Array.isArray(rooms)) {
+ console.error('setChatRooms: rooms is not an array', rooms);
+ return state; // 상태를 변경하지 않음
}
- // 채팅방의 lastMessage도 업데이트
- const updatedChatRooms = state.chatRooms.map(room =>
- room.id === chatRoomId
- ? {
- ...room,
- lastMessage: messageText,
- lastTime: new Date().toLocaleTimeString('ko-KR', {
- hour: '2-digit',
- minute: '2-digit'
- })
- }
- : room
- )
-
+ const updatedRooms = rooms.map((newRoom) => {
+ const existingRoom = prevChatRooms.find((room) => room.id === newRoom.id);
+ return existingRoom ? { ...existingRoom, ...newRoom } : newRoom;
+ });
+
+ // Add any rooms that are in the current state but not in the new rooms
+ const mergedRooms = prevChatRooms.filter(
+ (room) => !rooms.some((newRoom) => newRoom.id === room.id)
+ );
+
+ return { chatRooms: [...updatedRooms, ...mergedRooms] };
+ }),
+ setMessages: (roomId, messages) =>
+ set((state) => ({
+ messages: { ...state.messages, [roomId]: messages },
+ })),
+ removeChatRoom: (roomId) =>
+ set((state) => ({
+ chatRooms: state.chatRooms.filter((room) => room.id !== roomId),
+ })),
+ setTotalUnreadCount: (count) => set({ totalUnreadCount: count }),
+ resetUnreadCount: (roomId) =>
+ set((state) => {
+ const roomToReset = state.chatRooms.find((room) => room.id === roomId);
+ if (!roomToReset || !roomToReset.unreadMessageCount) return {};
+ const countToSubtract = roomToReset.unreadMessageCount;
return {
- messages: updatedMessages,
- chatRooms: updatedChatRooms
+ chatRooms: state.chatRooms.map((room) =>
+ room.id === roomId ? { ...room, unreadMessageCount: 0 } : room
+ ),
+ totalUnreadCount: Math.max(0, state.totalUnreadCount - countToSubtract),
+ };
+ }),
+ getMessages: (chatRoomId) => get().messages[chatRoomId] || [],
+
+ connectWebSocket: (userId) => {
+ if (!userId) {
+ console.error('Cannot connect WebSocket: userId is missing.');
+ return;
+ }
+ if (stompClient && stompClient.connected) {
+ set({ isConnected: true });
+ get().unsubscribeAll();
+ return;
+ }
+ const socket = new SockJS('http://localhost:8081/ws/chat');
+ stompClient = Stomp.over(socket);
+ stompClient.connect({}, () => {
+ set({ isConnected: true });
+
+ // Subscribe to updates globally
+ if (!subscriptions.update) {
+ subscriptions.update = stompClient.subscribe(
+ `/topic/update`,
+ (message) => {
+ const updateData = JSON.parse(message.body);
+ const currentUser = get().currentUser;
+
+ if (currentUser && currentUser.id === updateData.memberId) {
+ set((state) => ({
+ chatRooms: state.chatRooms.map((room) =>
+ room.id === updateData.chatRoomId
+ ? {
+ ...room,
+ recentMessage: updateData.recentMessage,
+ unreadMessageCount: updateData.totalUnreadCount,
+ }
+ : room
+ ),
+ }));
+ }
+ }
+ );
}
- })
-
- return newMessage
+ }, () => {
+ set({ isConnected: false });
+ });
},
- // 특정 채팅방의 메시지 가져오기
- getMessages: (chatRoomId) => {
- const { messages } = get()
- return messages[chatRoomId] || []
+ disconnectWebSocket: () => {
+ if (stompClient) {
+ get().unsubscribeAll();
+ stompClient.disconnect(() => {
+ set({ isConnected: false });
+ });
+ }
},
- // 채팅방 찾기
- findChatRoom: (participantName) => {
- const { chatRooms } = get()
- return chatRooms.find(room =>
- room.type === 'private' &&
- room.participants.includes(participantName)
- )
+ subscribeToChatRoom: (chatRoomId) => {
+ get().unsubscribeAll();
+ if (chatRoomId) {
+ subscriptions.message = stompClient.subscribe(
+ `/topic/chatroom/${chatRoomId}`,
+ (message) => {
+ const chatMessage = JSON.parse(message.body);
+ get().addMessage(chatRoomId, chatMessage);
+ }
+ );
+ }
},
- // 받은 메시지 추가 (다른 사용자로부터)
- receiveMessage: (chatRoomId, messageText, senderName) => {
- const newMessage = {
- id: Date.now(),
- text: messageText,
- sender: senderName,
- senderId: senderName,
- timestamp: new Date().toISOString(),
- type: 'text'
+ subscribeToUpdates: () => {
+ if (!subscriptions.update) {
+ subscriptions.update = stompClient.subscribe(
+ `/topic/update`,
+ (message) => {
+ const updateData = JSON.parse(message.body);
+ const currentUser = get().currentUser;
+
+ if (currentUser && currentUser.id === updateData.memberId) {
+ set((state) => ({
+ chatRooms: state.chatRooms.map((room) =>
+ room.id === updateData.chatRoomId
+ ? {
+ ...room,
+ recentMessage: updateData.recentMessage,
+ unreadMessageCount: updateData.totalUnreadCount,
+ }
+ : room
+ ),
+ }));
+ }
+ }
+ );
}
+ },
- set((state) => {
- const updatedMessages = {
- ...state.messages,
- [chatRoomId]: [...(state.messages[chatRoomId] || []), newMessage]
+ unsubscribeAll: () => {
+ for (const key in subscriptions) {
+ if (subscriptions[key]) {
+ subscriptions[key].unsubscribe();
+ subscriptions[key] = null;
}
+ }
+ },
- const updatedChatRooms = state.chatRooms.map(room =>
- room.id === chatRoomId
- ? {
- ...room,
- lastMessage: messageText,
- lastTime: new Date().toLocaleTimeString('ko-KR', {
- hour: '2-digit',
- minute: '2-digit'
- }),
- unreadCount: room.unreadCount + 1
- }
- : room
- )
+ sendMessage: (roomId, content) => {
+ if (stompClient && stompClient.connected) {
+ const currentUser = get().currentUser;
+ if (!currentUser || !currentUser.id) return;
+ const chatMessage = {
+ chatRoomId: roomId,
+ senderId: currentUser.id,
+ senderName: currentUser.name,
+ content: content,
+ type: 'TEXT',
+ };
+ stompClient.send('/app/send', {}, JSON.stringify(chatMessage));
+ }
+ },
- return {
- messages: updatedMessages,
- chatRooms: updatedChatRooms
- }
- })
+ markAsRead: (roomId, messageId) => {
+ if (stompClient && stompClient.connected) {
+ const currentUser = get().currentUser;
+ if (!currentUser || !currentUser.id) return;
+ const messageReadRequest = {
+ memberId: currentUser.id,
+ chatRoomId: roomId,
+ messageId: messageId,
+ };
+ stompClient.send('/app/message/read', {}, JSON.stringify(messageReadRequest));
+ get().resetUnreadCount(roomId);
+ }
},
- // 읽음 처리
- markAsRead: (chatRoomId) => set((state) => ({
- chatRooms: state.chatRooms.map(room =>
- room.id === chatRoomId
- ? { ...room, unreadCount: 0 }
- : room
- )
- }))
-}))
-
-export default useChatStore
+ addMessage: (roomId, message) =>
+ set((state) => ({
+ messages: {
+ ...state.messages,
+ [roomId]: [...(state.messages[roomId] || []), message],
+ },
+ })),
+ updateMessage: (roomId, updatedMessage) =>
+ set((state) => ({
+ messages: {
+ ...state.messages,
+ [roomId]: state.messages[roomId].map((msg) => {
+ if (msg.id !== updatedMessage.id) return msg;
+ if (updatedMessage.readCountUpdater) {
+ return {
+ ...msg,
+ readCount: updatedMessage.readCountUpdater(msg.readCount),
+ };
+ }
+ return { ...msg, ...updatedMessage };
+ }),
+ },
+ })),
+}));
+
+export default useChatStore;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index e00942d..3d89bb1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,9 @@ export default defineConfig({
plugins: [react(),
tailwindcss(),
],
+ define: {
+ global: 'globalThis',
+ },
server: {
proxy: {
'/api': {