fix: 방 전체 조회 및 검색 페이지 오류 수정 (#208)

* feat: 루틴페이지 에러바운더리 추가

* feat: api 호출 params 생성 로직 수정

* feat: 에러 바운더리 추가

src/RoomSlide/components/RoomSlide.tsx

@@ -1,8 +1,10 @@
 import { Suspense } from 'react';
+import { ErrorBoundary } from '@suspensive/react';
 import { DAY_TYPE } from '../constants/dayType';
 import RoomData from './RoomData';
 import RoomDataFallback from './RoomDataFallback';
 import { Deffered } from '@/shared/Deffered';
+import { NetworkFallback } from '@/shared/ErrorBoundary';
 import { DayType } from '@/core/types/Room';
 
 interface RoomSlideProps {
@@ -19,15 +21,17 @@ const RoomSlide = ({ roomType }: RoomSlideProps) => {
           {START} ~ {END}시
         </div>
       </div>
-      <Suspense
-        fallback={
-          <Deffered>
-            <RoomDataFallback />
-          </Deffered>
-        }
-      >
-        <RoomData dayType={roomType} />
-      </Suspense>
+      <ErrorBoundary fallback={<NetworkFallback />}>
+        <Suspense
+          fallback={
+            <Deffered>
+              <RoomDataFallback />
+            </Deffered>
+          }
+        >
+          <RoomData dayType={roomType} />
+        </Suspense>
+      </ErrorBoundary>
     </div>
   );
 };

src/core/api/functions/roomAPI.ts

@@ -57,6 +57,7 @@ const roomAPI = {
   },
 
   getRoomsAll: async (params?: RoomsRequestParams) => {
+    console.log(params);
     return await baseInstance.get<TotalRooms>('/rooms', { params });
   }
 };

src/core/api/queries/useSearchRooms.ts

@@ -1,5 +1,5 @@
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
-import { RoomSelectType } from '@/core/types';
+import { RoomSelectType, RoomsRequestParams } from '@/core/types';
 import roomAPI from '../functions/roomAPI';
 
 const useSearchRooms = ({
@@ -12,8 +12,16 @@ const useSearchRooms = ({
   return useSuspenseInfiniteQuery({
     queryKey: ['rooms', roomType, keyword],
 
-    queryFn: ({ pageParam }) =>
-      roomAPI.getRoomsAll({ roomType, roomId: pageParam, keyword }),
+    queryFn: ({ pageParam }) => {
+      const params: RoomsRequestParams = { roomType };
+      if (pageParam > 0) {
+        params.roomId = pageParam;
+      }
+      if (keyword) {
+        params.keyword = keyword;
+      }
+      return roomAPI.getRoomsAll(params);
+    },
 
     initialPageParam: 0,
 

src/pages/SearchPage.tsx

@@ -1,9 +1,11 @@
 import { Suspense, useState } from 'react';
+import { ErrorBoundary } from '@suspensive/react';
 import { RoomSelectType } from '@/core/types';
 import { KeywordContext } from '@/RoomSearch';
 import { SearchBar, Selection, ResultList } from '@/RoomSearch';
 import { Deffered } from '@/shared/Deffered';
 import ResultListFallback from '@/RoomSearch/components/ResultListFallback';
+import { NetworkFallback } from '@/shared/ErrorBoundary';
 
 const SearchPage = () => {
   const [roomType, setRoomType] = useState<RoomSelectType>('all');
@@ -22,18 +24,20 @@ const SearchPage = () => {
           />
         </div>
         <div className="h-full overflow-y-auto px-5 py-4">
-          <Suspense
-            fallback={
-              <Deffered>
-                <ResultListFallback size={10} />
-              </Deffered>
-            }
-          >
-            <ResultList
-              roomType={roomType}
-              keyword={keyword}
-            />
-          </Suspense>
+          <ErrorBoundary fallback={<NetworkFallback />}>
+            <Suspense
+              fallback={
+                <Deffered>
+                  <ResultListFallback size={10} />
+                </Deffered>
+              }
+            >
+              <ResultList
+                roomType={roomType}
+                keyword={keyword}
+              />
+            </Suspense>
+          </ErrorBoundary>
         </div>
       </div>
     </KeywordContext.Provider>