Merge pull request #133 from collie-jun/main

Feat: 채팅방 스켈레톤 관련 에러 해결
100-hours-a-week · Oct 3, 2024 · c63ab5e · c63ab5e
2 parents 3c9710f + 603b1f1
commit c63ab5e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 28 deletions.
diff --git 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 = () => {
         </SearchContainer>
 
         <ChatList>
-          {filteredChatRooms.length > 0 ? (
-            filteredChatRooms.map((room) => (
-              <ChatRoomItem key={room.id} onClick={() => handleChatRoomClick(room.id)}>
-                <RoomHeader>
-                  <RoomName>{room.name}</RoomName>
-                  <Participants>{room.participants}</Participants>
-                </RoomHeader>
-                <MessageContainer>
-                <LastMessage>{truncateMessage(room.lastMessage, 20)}</LastMessage>
-
-                  {room.timestamp && <Timestamp>{formatTime(new Date(room.timestamp))}</Timestamp>} 
-                </MessageContainer>
-              </ChatRoomItem>
-            ))
+          {isLoading ? ( // 로딩 중일 때 Loading 표시
+            <LoadingMessage>Loading...</LoadingMessage>
           ) : (
-            <NoChatRooms>채팅방이 없습니다.</NoChatRooms>
+            filteredChatRooms.length > 0 ? (
+              filteredChatRooms.map((room) => (
+                <ChatRoomItem key={room.id} onClick={() => handleChatRoomClick(room.id)}>
+                  <RoomHeader>
+                    <RoomName>{room.name}</RoomName>
+                    <Participants>{room.participants}</Participants>
+                  </RoomHeader>
+                  <MessageContainer>
+                    <LastMessage>{truncateMessage(room.lastMessage, 20)}</LastMessage>
+                    {room.timestamp && <Timestamp>{formatTime(new Date(room.timestamp))}</Timestamp>} 
+                  </MessageContainer>
+                </ChatRoomItem>
+              ))
+            ) : (
+              <NoChatRooms>채팅방이 없습니다.</NoChatRooms>
+            )
           )}
-
         </ChatList>
+        <Footer />
         <BottomPadding />
       </ChatListContainer>
 
@@ -181,7 +186,6 @@ const PageTitle = styled.h1`
   margin-top: 50px;
 `;
 
-
 const SearchContainer = styled.div`
   padding: 10px;
   background-color: #ffffff;
@@ -213,6 +217,7 @@ const ChatList = styled.div`
   flex-direction: column;
   align-items: center;
   padding: 15px; 
+  min-height: 300px;
 
   &::-webkit-scrollbar {
     display: none;
@@ -283,7 +288,15 @@ const NoChatRooms = styled.div`
   font-size: 16px;
 `;
 
+const LoadingMessage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  color: #999;
+  font-size: 16px;
+`;
+
 const BottomPadding = styled.div`
   height: 80px;
-
-`
+`
diff --git a/travelday-fe/src/pages/chatPage/chatPage.jsx b/travelday-fe/src/pages/chatPage/chatPage.jsx
@@ -107,6 +107,8 @@ const ChatPage = ({roomId,isSimple}) => {
       });
 
       if (response.status === 200) {
+        console.log('유저 정보 받아왔다!',response);
+        console.log('포챠코 아이디:',userId);
         const fetchedNickname = response.data.data.nickname;
         const fetchedUserId = response.data.data.userId; // userId도 함께 저장
         setNickname(fetchedNickname); // 닉네임 설정
@@ -412,14 +414,17 @@ const ChatPage = ({roomId,isSimple}) => {
         )}
 
         <MessageList ref={messageListRef} style={{paddingTop:'100px'}}>
-          {isLoading || messages.length === 0  ? (
+          {isLoading ? (
             // 로딩 중일 때 스켈레톤을 3개 표시
             <>
               <SkeletonChat />    
               <SkeletonText>채팅을 불러오고 있습니다...</SkeletonText>
               <SkeletonChat />
               <SkeletonChat />
             </>
+          ) : messages.length === 0 ? (
+            // 메시지가 없을 때 빈 메시지 표시
+            <NoMessagesText>아직 채팅이 없습니다. 첫 번째 메시지를 보내보세요!</NoMessagesText>
           ) : (
             messages.map((message, index) => {
               const previousMessage = messages[index - 1];
@@ -462,6 +467,7 @@ const ChatPage = ({roomId,isSimple}) => {
         </MessageList>
 
 
+
         {toastVisible && <ToastMessage>최대 입력은 500자까지 가능합니다</ToastMessage>}
         <MessageInputContainer>
 
@@ -834,4 +840,10 @@ const SkeletonText = styled.p`
   font-size: 16px;
   color: #333;
   margin-bottom: 20px;
-`;
+`;
+
+const NoMessagesText = styled.div`
+  text-align: center;
+  color: #888;
+  margin-top: 20px;
+`;
diff --git a/travelday-fe/src/pages/mainPage/mainDetailPage.jsx b/travelday-fe/src/pages/mainPage/mainDetailPage.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import axios from 'axios';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import Header from '../../components/shared/header.js'; 
@@ -11,6 +10,7 @@ import PriceIcon from '../../images/filter/price.png';
 import ScheduleIcon from '../../images/footer/schedule.png';
 import PplIcon from '../../images/main/detail/ppl.png';
 import axiosInstance from "../../utils/axiosInstance";
+import { useNavigate } from 'react-router-dom';
 
 const airportNames = {
   PQC: '푸꾸옥 국제공항',
@@ -146,6 +146,7 @@ const MainDetailPage = () => {
   const { id } = useParams(); 
   const { t } = useTranslation();
   const [flight, setFlight] = useState(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     axiosInstance.get(`/api/flights/lowestPrice/list`)
@@ -177,7 +178,7 @@ const MainDetailPage = () => {
 
   return (
     <PageContainer>
-      <Header />
+     <Header showBackButton={true} onBackClick={() => navigate(-1)} />
       <Content>
         {image ? <StyledImage src={image} alt={`Image ${id}`} /> : <p>{t('imageNotFound')}</p>}
         <FlightItem>

diff --git a/travelday-fe/src/pages/resultPage/flightDetailPage.jsx b/travelday-fe/src/pages/resultPage/flightDetailPage.jsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import Header from '../../components/shared/header.js'; 
 import BottomNav from '../../components/shared/bottomNav.js';  
 import { images } from '../../data/mainPage.js'; 
+import { useNavigate } from 'react-router-dom';
 import TakeoffIcon from '../../images/filter/takeoff.png';
 import PriceIcon from '../../images/filter/price.png';
 import ScheduleIcon from '../../images/footer/schedule.png';
@@ -147,6 +148,7 @@ const FlightDetailPage = () => {
   const { id } = useParams(); 
   const { t } = useTranslation();
   const [flight, setFlight] = useState(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     axiosInstance.get(`/api/flights/lowestPrice/list`)
@@ -194,9 +196,10 @@ const FlightDetailPage = () => {
 
   const priceInKRW = convertToKRW(parseFloat(price.grandTotal), price.currency);
 
+
   return (
     <PageContainer>
-      <Header />
+      <Header showBackButton={true} onBackClick={() => navigate(-1)} />
       <Content>
         <FlightItem>
           <SectionTitle>

diff --git a/travelday-fe/src/pages/schedulePage/schedulePage.jsx b/travelday-fe/src/pages/schedulePage/schedulePage.jsx
@@ -6,7 +6,7 @@ import ScheduleList from '../../components/schedulePage/scheduleList';
 import { useNavigate } from 'react-router-dom';
 import Footer from '../../components/footer/footer.js';
 import axiosInstance from '../../utils/axiosInstance.js';
-import backgroundVideo from '../../images/schedule/null.mp4'; // 비디오 파일의 경로를 import로 수정
+import backgroundVideo from '../../images/schedule/null.mp4'; 
 
 const SchedulePage = () => {
   const [schedules, setSchedules] = useState([]);