Feat: 매칭 대기화면 전환 및 채팅방 참가 로직 추가

src/components/chat/bottomMenu/index.tsx

@@ -33,10 +33,10 @@ const BottomMenu = ({
   const { user } = useUserStore();
   const accountNumber = user?.accountNumber || '계좌번호 없음';
 
-  messages.forEach((message) => {
-    if (message.topic === 'match_room_created') {
+  messages.forEach((eventMessage) => {
+    if (eventMessage.message.topic === 'match_room_created') {
       const userId = localStorage.getItem('userId');
-      setIsOwner(userId === String(message.roomMasterId));
+      setIsOwner(userId === String(eventMessage.message.roomMasterId));
     }
   });
 

src/components/notification/FriendRequestNotification.tsx

@@ -3,6 +3,8 @@ import { useToast } from '@/contexts/ToastContext';
 import useAcceptFriend from '@/hooks/mutations/useAcceptFriend';
 import useDeleteFriend from '@/hooks/mutations/useDeleteFriend';
 import useDeleteNotification from '@/hooks/mutations/useDeleteNotification';
+import { NotificationResponse } from '@gachTaxi-types';
+import { InfiniteData, useQueryClient } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
 
 interface FriendRequestNotificationProps {
@@ -20,8 +22,27 @@ const FriendRequestNotification = ({
   const { mutate: deleteNotification } = useDeleteNotification();
   const { mutate: acceptFriend } = useAcceptFriend();
   const { mutate: rejectFriend } = useDeleteFriend();
+  const queryClient = useQueryClient();
+
+  // 낙관적 업데이트용 함수
+  const handleQueryData = () => {
+    queryClient.setQueryData(
+      ['notification'],
+      (oldData: InfiniteData<NotificationResponse['data']>) => ({
+        ...oldData,
+        pages: oldData.pages.map((page) => ({
+          ...page,
+          response: page.response.filter(
+            (notification) => notification.notificationId !== notificationId,
+          ),
+        })),
+      }),
+    );
+  };
 
   const acceptFriendRequest = () => {
+    handleQueryData();
+
     acceptFriend(senderId, {
       onSuccess: (response) => {
         openToast(response.message, 'success');
@@ -32,7 +53,22 @@ const FriendRequestNotification = ({
     });
   };
 
+  const handleDeleteNotification = () => {
+    handleQueryData();
+
+    deleteNotification(notificationId, {
+      onSuccess: (response) => {
+        openToast(response.message, 'success');
+      },
+      onError: (error) => {
+        openToast(error.message, 'error');
+      },
+    });
+  };
+
   const rejectFriendRequest = () => {
+    handleQueryData();
+
     rejectFriend(senderId, {
       onSuccess: (response) => {
         openToast(response.message, 'success');
@@ -61,14 +97,7 @@ const FriendRequestNotification = ({
         if (!isOverThreshold) return;
 
         if (isOverThreshold) {
-          deleteNotification(notificationId, {
-            onSuccess: (response) => {
-              openToast(response.message, 'success');
-            },
-            onError: (error) => {
-              openToast(error.message, 'error');
-            },
-          });
+          handleDeleteNotification();
         }
       }}
     >

src/components/notification/MatchingNotification.tsx

@@ -1,6 +1,4 @@
 import RouteSettingIcon from '@/assets/icon/smallRouteChangeIcon.svg?react';
-import LinkIcon from '@/assets/icon/agreeLinkIcon.svg?react';
-import { Link } from 'react-router-dom';
 import { MatchStartPayload } from '@gachTaxi-types';
 import formatToKoreanTime from '@/utils/formatToKoreanTIme';
 import { motion } from 'framer-motion';
@@ -25,7 +23,7 @@ const MatchingNotification = ({
 
   return (
     <motion.div
-      className="min-h-[144px] h-[144px] bg-secondary rounded-box p-vertical flex flex-col gap-2 w-full"
+      className="min-h-[120px] h-[120spx] bg-secondary rounded-box p-vertical flex flex-col gap-2 w-full"
       drag="x"
       dragElastic={0.4}
       dragConstraints={{ left: 0, right: 0 }}
@@ -70,16 +68,6 @@ const MatchingNotification = ({
           </p>
         </div>
       </div>
-
-      <div className="w-full flex justify-end items-center">
-        <Link
-          to=""
-          className="underline font-medium text-captionHeader flex gap-2 items-center text-primary"
-        >
-          자세히보기
-          <LinkIcon fill="#08F283" />
-        </Link>
-      </div>
     </motion.div>
   );
 };

src/components/notification/index.tsx

@@ -4,7 +4,7 @@ import MatchingNotification from '@/components/notification/MatchingNotification
 import useNotification from '@/hooks/queries/useNotification';
 import { useIntersectionObserver } from '@/store/useIntersectionObserver';
 import SpinnerIcon from '@/assets/icon/spinnerIcon.svg?react';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 
 const NotificationList = () => {
   const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
@@ -22,28 +22,34 @@ const NotificationList = () => {
     <div className="flex flex-col gap-4 w-full h-full flex-1">
       <AnimatePresence>
         {notificationList.length > 0 ? (
-          notificationList.map((notification) =>
-            notification.type === 'FRIEND_REQUEST' ? (
-              <FriendRequestNotification
-                key={notification.notificationId}
-                notificationId={notification.notificationId}
-                senderId={notification.payload.senderId}
-                content={notification.content}
-              />
-            ) : (
-              <MatchingNotification
-                key={notification.notificationId}
-                notificationId={notification.notificationId}
-                content={notification.content}
-                createdAt={notification.createdAt}
-                payload={notification.payload}
-              />
-            ),
-          )
+          notificationList.map((notification) => (
+            <motion.div
+              key={notification.notificationId}
+              layout
+              exit={{ opacity: 0, height: 0 }}
+            >
+              {notification.type === 'FRIEND_REQUEST' ||
+              notification.type === 'MATCH_INVITE' ? (
+                <FriendRequestNotification
+                  notificationId={notification.notificationId}
+                  senderId={notification.payload.senderId}
+                  content={notification.content}
+                />
+              ) : (
+                <MatchingNotification
+                  notificationId={notification.notificationId}
+                  content={notification.content}
+                  createdAt={notification.createdAt}
+                  payload={notification.payload}
+                />
+              )}
+            </motion.div>
+          ))
         ) : (
           <EmptyView>알림이 없습니다.</EmptyView>
         )}
       </AnimatePresence>
+
       {isFetchingNextPage && (
         <SpinnerIcon width={36} height={36} className="mx-auto spinner mt-5" />
       )}

src/components/toast/index.tsx

@@ -34,7 +34,11 @@ const Toast = ({ type, children, fn }: ToastProps) => {
         damping: 14,
       }}
       onAnimationStart={handleFnByAnimationStateExit}
-      className={`p-vertical h-full w-fit max-h-[48px] max-w-[400px] z-[1000] bg-toastColor absolute bottom-20 rounded-[10px] text-white text-captionHeader font-medium truncate flex items-center justify-center`}
+      className={`
+        p-vertical h-full w-fit max-h-[48px] max-w-[400px] 
+        z-[1000] bg-toastColor fixed bottom-20 left-1/2 transform -translate-x-1/2 
+        rounded-[10px] text-white text-captionHeader font-medium truncate flex items-center justify-center
+      `}
     >
       {type === 'success' ? '✅ ' : '🚫 '}
       {children}

src/hooks/queries/useInfiniteScroll.ts

@@ -12,7 +12,7 @@ const useInfiniteScroll = <T>({
   queryKey,
   fetchFunction,
   initialPageParam = 0,
-  staleTime = 30000,
+  staleTime = 1000,
 }: UseInfiniteScrollQueryProps<T>) => {
   return useSuspenseInfiniteQuery({
     queryKey,

src/index.css

@@ -43,7 +43,7 @@
       transform: rotate(0deg);
     }
     100% {
-      transform: rotate(360deg);
+      transform: rotate(-360deg);
     }
   }
 }

src/pages/matching/index.tsx

@@ -4,6 +4,8 @@ import useSSEStore from '@/store/useSSEStore';
 import useTimerStore from '@/store/useTimerStore';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import CircleIcon from '@/assets/icon/matching-loading/circleIcon.svg?react';
+import TaxiIcon from '@/assets/icon/matching-loading/taxiSideIcon.svg?react';
 
 const MatchingInfoPage = () => {
   const { reset } = useTimerStore();
@@ -22,7 +24,7 @@ const MatchingInfoPage = () => {
 
   useEffect(() => {
     messages.forEach((eventMessage) => {
-      switch (eventMessage.topic) {
+      switch (eventMessage.eventType) {
         case 'match_member_joined':
           setRoomCapacity((prev) => Math.max(prev + 1, 4));
           break;
@@ -33,7 +35,7 @@ const MatchingInfoPage = () => {
 
         case 'match_room_created':
           setRoomCapacity((prev) => Math.max(prev + 1, 4));
-          setRoomId(eventMessage.roomId);
+          setRoomId(eventMessage.message.roomId);
           setRoomStatus('matching');
           break;
 
@@ -56,17 +58,20 @@ const MatchingInfoPage = () => {
               가치 탈 사람 <br />
               찾는중...
             </p>
-            <span className="font-medium text-captionHeader">
+            <p className="font-medium text-captionHeader text-center">
               {roomCapacity}/4
-            </span>
+            </p>
           </div>
         )}
       </div>
       <div
-        className={` w-full flex justify-center flex-col gap-2 items-center ${roomStatus === 'searching' ? 'flex-grow' : ''}`}
+        className={` w-full flex justify-center flex-col gap-2 items-center ${roomStatus === 'searching' ? 'flex-grow mb-[100px]' : 'mb-20'}`}
       >
         <Timer />
-        <>택시아이콘자리</>
+        <div className="relative">
+          <CircleIcon className="spinner" />
+          <TaxiIcon className="z-10 absolute top-10 right-5" />
+        </div>
       </div>
       {roomStatus === 'matching' && (
         <div className=" w-full mb-4">