🔧 Fix : 채팅 및 버그 개선

🔧 Fix : 채팅 및 버그 개선

src/pages/ChatListPage/components/ChatCard.tsx

@@ -23,12 +23,9 @@ const ChatCard = (props: ChatCardProps) => {
     >
       <div className='flex w-full flex-col gap-[10px]'>
         <div className='flex items-center justify-between'>
-          <button
-            type='button'
-            className='flex items-center gap-1 text-sm font-medium'
-          >
+          <div className='flex items-center gap-1 text-sm font-medium'>
             {userName} <GrNext className='text-xs' />
-          </button>
+          </div>
           <span className='text-xs text-subfont'>
             {getDateFunction(chat.updatedAt)}
           </span>

src/pages/ChatListPage/hooks/useGetChatList.ts

@@ -10,7 +10,7 @@ const useGetChatList = () => {
     role === 'ROLE_USER' ? getChatListMember : getChatListBusiness;
   const { data, isLoading, isError } = useQuery<
     ChatListMember[] | ChatListBusiness[]
-  >({ queryKey, queryFn });
+  >({ queryKey, queryFn, refetchOnWindowFocus: true });
 
   return { data: data ?? [], isLoading, isError };
 };

src/pages/ChatListPage/index.tsx

@@ -6,7 +6,6 @@ import useGetChatList from './hooks/useGetChatList';
 
 const ChatListPage = () => {
   const { data } = useGetChatList();
-
   return (
     <>
       <MainLayout headerType='both'>

src/pages/ChatPage/components/MessageContainer.tsx

@@ -34,22 +34,25 @@ const MessageContainer = (props: MessageContainerProps) => {
     <>
       {messages &&
         messages.length > 0 &&
-        Object.entries(groupedMessages).map(([date, dateMessages]) => (
+        Object.entries(groupedMessages).map(([date, dateMessages], index) => (
           <div
-            key={date}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
             className='mb-4 mt-8 flex w-custom flex-col items-center justify-end gap-5'
           >
             <div className='text-xs text-subfont underline'>{date}</div>
 
-            {dateMessages.map((message) =>
+            {dateMessages.map((message, idx) =>
               message.sender === user ? (
                 <SendMessage
-                  key={message.timestamp}
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={idx}
                   message={message}
                 />
               ) : (
                 <ReceiveMessage
-                  key={message.timestamp}
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={idx}
                   message={message}
                 />
               ),

src/pages/ChatPage/components/ReceiveMessage.tsx

@@ -17,12 +17,7 @@ const ReceiveMessage = (props: ReceiveMessageProps) => {
         <div className='max-w-60 rounded-t-xl rounded-br-xl bg-[#EEEEEE] px-3 py-2 text-sm'>
           {message.content}
         </div>
-        <div>
-          {!message.isRead && (
-            <p className='text-start text-xs text-primary'>1</p>
-          )}
-          <p className='text-xs text-subfont'>{formattedTime}</p>
-        </div>
+        <p className='text-xs text-subfont'>{formattedTime}</p>
       </div>
     </div>
   );

src/pages/ChatPage/components/SendMessage.tsx

@@ -15,9 +15,9 @@ const SendMessage = (props: SendMessageProps) => {
     <div className='flex w-custom justify-end'>
       <div className='flex items-end gap-2'>
         <div>
-          {!message.isRead && (
+          {/* {!message.isRead && (
             <p className='text-end text-xs text-primary'>1</p>
-          )}
+          )} */}
           <p className='text-xs text-subfont'>{formattedTime}</p>
         </div>
         <div className='max-w-60 rounded-t-xl rounded-bl-xl bg-primary px-3 py-2 text-sm text-white'>

src/pages/ChatPage/index.tsx

@@ -16,6 +16,7 @@ import { getRole } from '@utils/auth';
 import { getUserData } from '@apis/member';
 import { getBusinessData } from '@apis/business';
 import { getDatetoLocalDate } from '@utils/formatTime';
+import { toast } from 'react-toastify';
 import MessageInput from './components/MessageInput';
 import MessageContainer from './components/MessageContainer';
 
@@ -52,34 +53,29 @@ const ChatPage = () => {
       const client = new Client({
         brokerURL: WS_URL,
         webSocketFactory: () => new SockJS(WS_URL),
-        debug: (str) => console.log(str),
         reconnectDelay: 5000, // 자동 재연결
       });
 
       // 구독
       client.onConnect = () => {
-        console.log('Connected');
-
         client.subscribe(`/sub/chat/${roomId}`, (message: IMessage) => {
           try {
             const newMessage = JSON.parse(message.body);
             setMessages((prevMessages) => [...prevMessages, newMessage]);
-            console.log('완료');
           } catch (error) {
-            console.error('오류가 발생했습니다:', error);
+            toast.error('오류가 발생했습니다.');
           }
         });
       };
 
       client.activate();
       setStompClient(client);
     } catch (err) {
-      console.error(err);
+      toast.error('오류가 발생했습니다.');
     }
   };
 
   const disConnect = () => {
-    console.log('연결끊기');
     // 연결 끊기
     if (stompClient === null) {
       return;
@@ -101,8 +97,6 @@ const ChatPage = () => {
         destination: '/pub/sendMessage',
         body: JSON.stringify(chatMessage),
       });
-      console.log(chatMessage);
-      console.log(messages);
     }
   };
 

src/pages/ModifySpace/components/RoomModify.tsx

@@ -102,7 +102,6 @@ const RoomModify = ({ room, updateRoomData, completeAdd }: RoomFormProps) => {
             ).then((roomImageS3URL) => uploadImageToS3(roomImageS3URL, file!)),
           ),
         );
-        console.log(room.roomName);
       } else {
         // 룸 수정
         await putRoom({

src/pages/ModifySpace/index.tsx

@@ -13,8 +13,6 @@ const ModifySpace = () => {
   const { workplaceId } = useParams() as { workplaceId: string };
   const { data: info } = useGetWorkPlaceInfo(Number(workplaceId));
   const { data: roomInfo } = useGetRoomListInfo(Number(workplaceId));
-  console.log(info);
-  console.log(roomInfo);
 
   // 공간 등록 + 룸 폼 상태관리
   const [spaceFormData, setSpaceFormData] = useState<Space>({
@@ -31,8 +29,6 @@ const ModifySpace = () => {
     rooms: [],
   });
 
-  console.log(spaceFormData);
-
   useEffect(() => {
     if (info && roomInfo) {
       const [basic, ...detailParts] = info.workplaceAddress.split(',');

src/pages/SearchResult/components/ResultBar.tsx

@@ -18,7 +18,8 @@ const ResultBar = () => {
     return newTimeArray;
   };
 
-  const formattedTime = setTimeArray(searchTime).join(' ~ ');
+  const formattedTime =
+    searchTime.length > 0 ? setTimeArray(searchTime).join(' ~ ') : '시간 선택';
 
   return (
     <div className='mx-auto mt-4 flex w-custom justify-center gap-1 rounded-full py-[18px] text-sm shadow-custom'>
@@ -27,7 +28,7 @@ const ResultBar = () => {
         className='w-16 overflow-hidden text-ellipsis whitespace-nowrap border-r-2 border-subfont pr-1 text-center'
         onClick={() => navigate('/search', { state: true })}
       >
-        {searchPlace}
+        {searchPlace.length > 0 ? searchPlace : '장소 선택'}
       </button>
       <button
         type='button'

src/pages/SearchResult/hooks/useGetSearchStudyRoom.ts

@@ -3,9 +3,21 @@ import { useQuery } from '@tanstack/react-query';
 import { SearchStudyRoom, SearchStudyRoomData } from '@typings/types';
 
 export const useGetSearchStudyRoom = (searchStudyRoom: SearchStudyRoom) => {
+  const { address, startDateTime, endDateTime, reservationCapacity } =
+    searchStudyRoom;
+  const isValidDateTime = (dateTime: string | undefined) =>
+    !!dateTime && !dateTime.includes('undefined');
+
+  const isQueryEnabled =
+    !!address &&
+    reservationCapacity > 0 &&
+    isValidDateTime(startDateTime) &&
+    isValidDateTime(endDateTime);
+
   const { data, isLoading, isError } = useQuery<SearchStudyRoomData[]>({
     queryKey: ['searchStudyRoom', searchStudyRoom.address],
     queryFn: () => postSearchStudyRoom(searchStudyRoom),
+    enabled: isQueryEnabled,
   });
 
   return { data: (data ?? []) as SearchStudyRoomData[], isLoading, isError };

src/pages/WriteReviewPage/index.tsx

@@ -19,7 +19,6 @@ const WriteReviewPage = () => {
   const location = useLocation();
   const reservationInfo: WriteReviewProps = { ...location.state };
   const { reservationId, workPlaceName } = reservationInfo;
-  console.log(reservationId);
 
   return (
     <MainLayout>