Merge pull request #290 from Team-TenTen/feature/#289/spaces-get-api

스페이스 필터 조회 로직 수정

src/app/page.tsx

@@ -1,14 +1,9 @@
 'use client'
 
-import {
-  CategoryList,
-  Dropdown,
-  LinkItem,
-  SpaceList,
-  Spinner,
-} from '@/components'
+import { CategoryList, Dropdown, LinkItem, Spinner } from '@/components'
 import FloatingButton from '@/components/FloatingButton/FloatingButton'
 import { ChipColors } from '@/components/common/Chip/Chip'
+import MainSpaceList from '@/components/common/MainSpaceList/MainSpaceList'
 import { useCategoryParam, useSortParam } from '@/hooks'
 import useGetPopularLinks from '@/hooks/useGetPopularLinks'
 import { fetchGetSpaces } from '@/services/space/spaces'
@@ -77,7 +72,7 @@ export default function Home() {
                 onChange={handleCategoryChange}
               />
             </div>
-            <SpaceList
+            <MainSpaceList
               queryKey="main"
               sort={sort ?? ''}
               category={category ?? ''}

src/components/SpaceList/hooks/useMainSpacesQuery.ts

@@ -0,0 +1,77 @@
+import { PAGE_SIZE } from '@/constants'
+import { SpaceResBody } from '@/types'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { SpaceListProps } from '../SpaceList'
+
+interface MainSpacePageType {
+  metaData?: {
+    hasNext: boolean
+    lastId: number
+    lastFavoriteCount: number
+  }
+  responses: SpaceResBody[]
+}
+
+const useMainSpacesQuery = ({
+  queryKey,
+  memberId,
+  sort,
+  category,
+  keyword,
+  fetchFn,
+}: SpaceListProps) => {
+  const sortValue =
+    queryKey === 'main' || queryKey === 'search'
+      ? sort === 'favorite'
+        ? 'favorite_count'
+        : 'created_at'
+      : undefined
+  const categoryValue = category === 'all' ? '' : category.toUpperCase()
+  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
+    queryKey: [
+      'spaces',
+      queryKey,
+      {
+        ...(memberId && { memberId: memberId }),
+        ...(sortValue && { sort: sortValue }),
+        category: categoryValue,
+        keyword,
+      },
+    ],
+    queryFn: ({ pageParam }) =>
+      fetchFn({
+        memberId,
+        lastFavoriteCount: pageParam.lastFavoriteCount,
+        lastSpaceId: pageParam.lastSpaceId,
+        pageSize: PAGE_SIZE,
+        sort: sortValue,
+        filter: categoryValue,
+        keyWord: keyword,
+      }),
+    initialPageParam: { lastSpaceId: undefined, lastFavoriteCount: undefined },
+    getNextPageParam: (
+      lastPage: MainSpacePageType,
+    ):
+      | {
+          lastSpaceId: number | undefined
+          lastFavoriteCount: number | undefined
+        }
+      | undefined => {
+      return lastPage.metaData?.hasNext
+        ? {
+            lastSpaceId: lastPage.metaData.lastId,
+            lastFavoriteCount: lastPage.metaData.lastFavoriteCount,
+          }
+        : undefined
+    },
+  })
+
+  return {
+    spaces: data,
+    fetchNextPage,
+    hasNextPage,
+    isSpacesLoading: isLoading,
+  }
+}
+
+export default useMainSpacesQuery

src/components/common/MainSpaceList/MainSpaceList.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { Fragment } from 'react'
+import { NONE_SEARCH_RESULT } from '@/components/SpaceList/constants'
+import useMainSpacesQuery from '@/components/SpaceList/hooks/useMainSpacesQuery'
+import { CATEGORIES_RENDER } from '@/constants'
+import useInfiniteScroll from '@/hooks/useInfiniteScroll'
+import { SearchSpaceReqBody, SpaceResBody } from '@/types'
+import { Spinner } from '../..'
+import Space from '../Space/Space'
+
+export interface SpaceListProps {
+  memberId?: number
+  queryKey: string
+  sort?: string
+  category: string
+  keyword?: string
+  fetchFn: ({
+    memberId,
+    pageNumber,
+    lastFavoriteCount,
+    lastSpaceId,
+    pageSize,
+    sort,
+    filter,
+    keyWord,
+  }: SearchSpaceReqBody) => Promise<any>
+}
+
+const MainSpaceList = ({
+  queryKey,
+  memberId,
+  sort,
+  category,
+  keyword,
+  fetchFn,
+}: SpaceListProps) => {
+  const { spaces, fetchNextPage, hasNextPage, isSpacesLoading } =
+    useMainSpacesQuery({
+      queryKey,
+      memberId,
+      sort,
+      category,
+      keyword,
+      fetchFn,
+    })
+
+  const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
+
+  return isSpacesLoading ? (
+    <Spinner />
+  ) : (
+    <>
+      <ul className="flex flex-col gap-y-2 px-4 pt-2">
+        {spaces?.pages[0].responses.length
+          ? spaces?.pages.map((group, i) => (
+              <Fragment key={i}>
+                {group.responses?.map((space: SpaceResBody) => (
+                  <li key={space.spaceId}>
+                    <Space
+                      userName={space.ownerNickName}
+                      spaceId={space.spaceId}
+                      type="Card"
+                      spaceName={space.spaceName}
+                      spaceImage={space.spaceImagePath}
+                      description={space.description}
+                      category={CATEGORIES_RENDER[space.category]}
+                      scrap={space.scrapCount}
+                      favorite={space.favoriteCount}
+                    />
+                  </li>
+                ))}
+              </Fragment>
+            ))
+          : !isSpacesLoading && (
+              <div className="py-5 text-center text-sm font-medium text-gray9">
+                {NONE_SEARCH_RESULT}
+              </div>
+            )}
+
+        <div ref={target}></div>
+      </ul>
+    </>
+  )
+}
+
+export default MainSpaceList

src/services/space/spaces.ts

@@ -2,15 +2,19 @@ import { SearchSpaceReqBody, SpaceInviteResBody } from '@/types'
 import { apiClient } from '../apiServices'
 
 const fetchGetSpaces = async ({
-  pageNumber,
+  lastSpaceId,
+  lastFavoriteCount,
   pageSize,
   sort,
   filter,
 }: SearchSpaceReqBody) => {
   const path = '/api/spaces'
   const params = {
-    pageNumber: pageNumber.toString(),
     pageSize: pageSize.toString(),
+    ...(lastSpaceId !== undefined && { lastSpaceId: lastSpaceId.toString() }),
+    ...(lastFavoriteCount !== undefined && {
+      lastFavoriteCount: lastFavoriteCount.toString(),
+    }),
     ...(sort && { sort: sort }),
     filter: filter,
   }
@@ -25,7 +29,7 @@ const fetchGetSpaces = async ({
 }
 
 const fetchSearchSpaces = async ({
-  pageNumber,
+  pageNumber = 0,
   pageSize,
   sort,
   filter,
@@ -51,7 +55,7 @@ const fetchSearchSpaces = async ({
 
 const fetchSearchMySpaces = async ({
   memberId,
-  pageNumber,
+  pageNumber = 0,
   pageSize,
   filter,
   keyWord,

src/services/user/profile/favorites.ts

@@ -2,7 +2,7 @@ import { apiClient } from '@/services/apiServices'
 import { SearchSpaceReqBody } from '@/types'
 
 const fetchGetMyFavoriteSpaces = async ({
-  pageNumber,
+  pageNumber = 0,
   pageSize,
   keyWord,
   filter,

src/types/index.ts

@@ -112,7 +112,9 @@ export interface UserDetailInfo {
 // 검색 req body
 export interface SearchSpaceReqBody {
   memberId?: number
-  pageNumber: number
+  pageNumber?: number
+  lastSpaceId?: number
+  lastFavoriteCount?: number
   pageSize: number
   sort?: string
   keyWord?: string