🐛Fix: 로그인 후 에러

prgrms-web-devcourse-final-project · Dec 9, 2024 · b40cdf8 · b40cdf8
1 parent 8631612
commit b40cdf8
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,14 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 // import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { RouterProvider } from 'react-router-dom'
 import styled, { ThemeProvider } from 'styled-components'
 import PWABadge from '~/PWABadge'
 import { router } from '~/router'
 import GlobalStyle from '~/styles/globalStyle'
 import { darkTheme, lightTheme } from '~/styles/theme'
+import PageLoader from '~components/PageLoader'
 import PushNotification from '~components/PushNotification'
 
 const queryClient = new QueryClient()
@@ -30,7 +31,9 @@ function App() {
             </button>
             <GlobalStyle />
             <MobileContainer>
-              <RouterProvider router={router} />
+              <Suspense fallback={<PageLoader />}>
+                <RouterProvider router={router} />
+              </Suspense>
               <PushNotification />
             </MobileContainer>
             <PWABadge />

diff --git a/src/apis/chatRoom/useChatList.ts b/src/apis/chatRoom/useChatList.ts
@@ -1,9 +1,9 @@
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import { fetchChatRoomList } from '~apis/chatRoom/fetchChatRoomList'
 import { queryKey } from '~constants/queryKey'
 
 export default function useChatList() {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: queryKey.social.chatRoomList(),
     queryFn: () => fetchChatRoomList().then(res => res.data),
   })

diff --git a/src/apis/chatRoom/useFriendList.ts b/src/apis/chatRoom/useFriendList.ts
@@ -1,9 +1,9 @@
-import { useQuery } from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import { fetchFriendList } from '~apis/friend/fetchFriendList'
 import { queryKey } from '~constants/queryKey'
 
 export default function useFriendList() {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: queryKey.social.friendList(),
     queryFn: () => fetchFriendList().then(res => res.data),
   })

diff --git a/src/pages/SocialPage/components/FriendChatList/index.tsx b/src/pages/SocialPage/components/FriendChatList/index.tsx
@@ -14,7 +14,9 @@ function FriendList() {
 
   return (
     <S.FriendChatList>
-      {friendList?.map(friendInfo => <FriendItem key={friendInfo.memberId} {...friendInfo} />)}
+      {[...friendList].reverse().map(friendInfo => (
+        <FriendItem key={friendInfo.memberId} {...friendInfo} />
+      ))}
     </S.FriendChatList>
   )
 }
@@ -24,7 +26,9 @@ function ChatList() {
 
   return (
     <S.FriendChatList>
-      {chatList?.map(chatInfo => <ChatItem key={chatInfo.chatRoomId} {...chatInfo} />)}
+      {[...chatList].reverse().map(chatInfo => (
+        <ChatItem key={chatInfo.chatRoomId} {...chatInfo} />
+      ))}
     </S.FriendChatList>
   )
 }

diff --git a/src/router.tsx b/src/router.tsx
@@ -6,19 +6,29 @@ import GlobalHookContainer from '~components/GlobalHookContainer'
 import PageLoader from '~components/PageLoader'
 import ModalContainer from '~modals/ModalContainer'
 import * as Pages from './components/LazyComponents'
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+import ErrorFallback from '~components/ErrorFallback'
 
 export const router = createBrowserRouter([
   {
     path: '/',
     element: (
       <WebSocketProvider>
-        <GlobalHookContainer>
-          <Suspense fallback={<PageLoader />}>
-            <Outlet />
-          </Suspense>
-          <Footer />
-          <ModalContainer />
-        </GlobalHookContainer>
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <GlobalHookContainer>
+              <ErrorBoundary FallbackComponent={ErrorFallback} onReset={reset}>
+                <Suspense fallback={<PageLoader />}>
+                  <Outlet />
+                </Suspense>
+              </ErrorBoundary>
+
+              <Footer />
+              <ModalContainer />
+            </GlobalHookContainer>
+          )}
+        </QueryErrorResetBoundary>
       </WebSocketProvider>
     ),
     children: [