From a6b0eef2dc4a1598d0aa4da4b12d6d345eee639a Mon Sep 17 00:00:00 2001 From: collie-jun <167491677+collie-jun@users.noreply.github.com> Date: Mon, 30 Sep 2024 21:20:01 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Feat:=20=EC=B1=84=ED=8C=85=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20footer=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/chatPage/chatListPage.jsx | 56 +++++++++++-------- .../src/pages/schedulePage/schedulePage.jsx | 2 +- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/travelday-fe/src/pages/chatPage/chatListPage.jsx b/travelday-fe/src/pages/chatPage/chatListPage.jsx index 5f6bd60..960cde7 100644 --- a/travelday-fe/src/pages/chatPage/chatListPage.jsx +++ b/travelday-fe/src/pages/chatPage/chatListPage.jsx @@ -4,10 +4,12 @@ import BottomNav from '../../components/shared/bottomNav.js'; import Header from '../../components/shared/header.js'; import { useNavigate } from 'react-router-dom'; import axiosInstance from '../../utils/axiosInstance'; +import Footer from '../../components/footer/footer.js'; const ChatListPage = () => { const [chatRooms, setChatRooms] = useState([]); const [searchTerm, setSearchTerm] = useState(''); + const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추가 const navigate = useNavigate(); useEffect(() => { @@ -42,7 +44,7 @@ const ChatListPage = () => { // 3. 채팅방 목록에 마지막 메시지 추가 const formattedChatRooms = rooms.map((room) => { - const lastMessageData = lastMessages.find(msg => msg.travelRoomId === room.id); + const lastMessageData = lastMessages.find(msg => msg.travelRoomId === room.id); return { id: room.id, @@ -59,10 +61,10 @@ const ChatListPage = () => { } } catch (error) { console.error('채팅방 불러오기 중 오류 발생:', error); + } finally { + setIsLoading(false); // 로딩 완료 } }; - - const handleChatRoomClick = (roomId) => { navigate(`/chat/${roomId}`); @@ -115,25 +117,28 @@ const ChatListPage = () => { - {filteredChatRooms.length > 0 ? ( - filteredChatRooms.map((room) => ( - handleChatRoomClick(room.id)}> - - {room.name} - {room.participants} - - - {truncateMessage(room.lastMessage, 20)} - - {room.timestamp && {formatTime(new Date(room.timestamp))}} - - - )) + {isLoading ? ( // 로딩 중일 때 Loading 표시 + Loading... ) : ( - 채팅방이 없습니다. + filteredChatRooms.length > 0 ? ( + filteredChatRooms.map((room) => ( + handleChatRoomClick(room.id)}> + + {room.name} + {room.participants} + + + {truncateMessage(room.lastMessage, 20)} + {room.timestamp && {formatTime(new Date(room.timestamp))}} + + + )) + ) : ( + 채팅방이 없습니다. + ) )} - +