diff --git a/public/favicon.ico b/public/favicon.ico index a0c8c2a4..1c88b1c9 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/components/Common/SocialLogin.tsx b/src/components/Common/SocialLogin.tsx index 98e15681..77f76157 100644 --- a/src/components/Common/SocialLogin.tsx +++ b/src/components/Common/SocialLogin.tsx @@ -11,19 +11,22 @@ const SocialLogin = () => { switch (platform) { case "google": - redirectUrl = await authService.googleLogin(); + // redirectUrl = await authService.googleLogin(); // 수정 필요 + alert("현재 개발 중입니다!"); break; case "kakao": redirectUrl = await authService.kakaoLogin(); + window.location.href = redirectUrl; + break; case "naver": redirectUrl = await authService.naverLogin(); + window.location.href = redirectUrl; + break; default: throw new Error("지원하지 않는 로그인 방식입니다."); } - - window.location.href = redirectUrl; } catch (error) { console.error(`${platform} 로그인 중 오류 발생`, error); alert(`${platform} 로그인에 실패했습니다. 다시 시도해주세요.`); diff --git a/src/features/ChattingForm.tsx b/src/features/ChattingForm.tsx index 3b284bbe..9e2e3d83 100644 --- a/src/features/ChattingForm.tsx +++ b/src/features/ChattingForm.tsx @@ -1,7 +1,7 @@ import Layout from "@/components/Common/Layout"; import Bubble from "@/components/Common/Bubble"; import { useCallback, useEffect, useRef, useState } from "react"; -import { useQuery } from "@tanstack/react-query"; +import { useQuery, useQueryClient } from "@tanstack/react-query"; import { ChatRoom, Message } from "@/types/chatData"; import { getAccessToken } from "@/utils/tokenUtils"; import { formatToDetailedDate } from "@/utils/formatDate"; @@ -36,6 +36,7 @@ export default function ChattingForm() { const [isFirstMessage, setIsFirstMessage] = useState(false); const [hasMoreMessages, setHasMoreMessages] = useState(true); const [messageToDelete, setMessageToDelete] = useState(null); + const [isMessageLoading, setIsMessageLoading] = useState(false); const messagesEndRef = useRef(null); const messagesContainerRef = useRef(null); @@ -51,6 +52,8 @@ export default function ChattingForm() { }, }); + const queryClient = useQueryClient(); + const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); @@ -83,6 +86,12 @@ export default function ChattingForm() { await handleFileUpload(selectedChatRoom.id, file, newMessage); } else { chatService.sendMessage(socket, selectedChatRoom.id, message.trim(), "TEXT"); + queryClient.setQueryData(["chatRooms"], (oldData: ChatRoom[] | undefined) => { + if (!oldData) return []; + return oldData.map((room) => + room.id === selectedChatRoom.id ? { ...room, lastChat: message.trim() } : room, + ); + }); setMessages((prevMessages) => [newMessage, ...prevMessages]); } @@ -169,6 +178,7 @@ export default function ChattingForm() { }, [selectedChatRoom, handleScroll]); const fetchMessages = async (chatRoomId: string, currentPage: number, isOldMessages = false) => { + setIsMessageLoading(true); try { const data = await chatService.getMessages(chatRoomId, currentPage, 10); if (data.length === 0) { @@ -199,6 +209,8 @@ export default function ChattingForm() { } } catch (error: any) { alert(error.message); + } finally { + setIsMessageLoading(false); } }; @@ -356,12 +368,20 @@ export default function ChattingForm() { const newSocket = chatService.connectWebSocket( accessToken, (newMessage: Message) => { - setMessages((prevMessages) => { - if (!prevMessages.find((msg) => msg.id === newMessage.id)) { - return [newMessage, ...prevMessages]; - } - return prevMessages; + queryClient.setQueryData(["chatRooms"], (oldData = []) => { + return oldData.map((room) => + room.id === newMessage.chatRoomId ? { ...room, lastChat: newMessage.content } : room, + ); }); + + if (newMessage.chatRoomId === selectedChatRoom?.id) { + setMessages((prevMessages) => { + if (!prevMessages.find((msg) => msg.id === newMessage.id)) { + return [newMessage, ...prevMessages]; + } + return prevMessages; + }); + } }, handleError, ); @@ -574,6 +594,11 @@ export default function ChattingForm() { className="h-[600px] overflow-y-auto mobile-tablet:h-[650px]" ref={messagesContainerRef} > + {isMessageLoading && ( +
+ 로딩중 +
+ )} {renderMessages()}