feat: 프로젝트 리스트 무한스크롤 적용 (#1270)

* feat: 프로젝트 리스트 무한스크롤 적용 * chore: 미사용 코드 제거 * feat: 프로젝트 전체 갯수 부활
sopt-makers · Jan 19, 2024 · ba56acc · ba56acc
1 parent f56e696
commit ba56acc
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 44 deletions.
diff --git a/src/api/endpoint/projects/getProjects.ts b/src/api/endpoint/projects/getProjects.ts
@@ -0,0 +1,42 @@
+import { QS } from '@toss/utils';
+import { z } from 'zod';
+
+import { createEndpoint } from '@/api/typedAxios';
+
+export interface ProjectsRequestParams {
+  limit?: number;
+  cursor?: number;
+  name?: string;
+}
+
+const LinkSchema = z.object({
+  linkId: z.number(),
+  linkTitle: z.string(),
+  linkUrl: z.string(),
+});
+
+const ProjectSchema = z.object({
+  id: z.number(),
+  name: z.string(),
+  generation: z.number(),
+  category: z.string(),
+  serviceType: z.array(z.string()),
+  summary: z.string(),
+  detail: z.string(),
+  logoImage: z.string(),
+  thumbnailImage: z.string(),
+  links: z.array(LinkSchema),
+});
+
+export const getProjects = (params: ProjectsRequestParams) =>
+  createEndpoint({
+    request: {
+      method: 'GET',
+      url: 'api/v1/projects',
+      data: QS.create({ params }),
+    },
+    serverResponseScheme: z.object({
+      projectList: z.array(ProjectSchema),
+      hasNext: z.boolean(),
+    }),
+  });
diff --git a/src/api/endpoint_LEGACY/hooks/projects.ts b/src/api/endpoint_LEGACY/hooks/projects.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { getMemberProfileById } from '@/api/endpoint_LEGACY/members';
-import { getProjectById, getProjects } from '@/api/endpoint_LEGACY/projects';
+import { getProjectById } from '@/api/endpoint_LEGACY/projects';
 
 // project id로 조회
 export const useGetProjectById = (id?: string) => {
@@ -25,14 +25,3 @@ export const useGetProjectById = (id?: string) => {
     },
   });
 };
-
-// project 전체 조회
-export const useGetProjects = () => {
-  return useQuery({
-    queryKey: ['getProjects'],
-    queryFn: async () => {
-      const data = await getProjects();
-      return data;
-    },
-  });
-};
diff --git a/src/api/endpoint_LEGACY/projects/index.ts b/src/api/endpoint_LEGACY/projects/index.ts
@@ -1,5 +1,7 @@
+import { QS } from '@toss/utils';
+
 import { axiosInstance } from '@/api';
-import { ProjectDetail, ProjectInput } from '@/api/endpoint_LEGACY/projects/type';
+import { ProjectDetail, ProjectInput, ProjectsRequestParams } from '@/api/endpoint_LEGACY/projects/type';
 
 // project id로 조회
 export const getProjectById = async (id: string) => {
@@ -12,12 +14,11 @@ export const getProjectById = async (id: string) => {
 };
 
 // project 전체 조회
-export const getProjects = async () => {
-  const { data } = await axiosInstance.request<ProjectDetail[]>({
+export const getProjects = async (params: ProjectsRequestParams) => {
+  const { data } = await axiosInstance.request<{ projectList: ProjectDetail[]; hasNext: boolean; totalCount: number }>({
     method: 'GET',
-    url: 'api/v1/projects',
+    url: `api/v1/projects${QS.create(params)}`,
   });
-
   return data;
 };
 

diff --git a/src/api/endpoint_LEGACY/projects/type.ts b/src/api/endpoint_LEGACY/projects/type.ts
@@ -1,5 +1,11 @@
 import { PROJECT_CATEGORY } from '@/components/projects/constants';
 
+export interface ProjectsRequestParams {
+  limit?: number;
+  cursor?: number;
+  name?: string;
+}
+
 export type ProjectDetail = {
   id: number;
   name: string;

diff --git a/src/components/projects/main/ProjectList.tsx b/src/components/projects/main/ProjectList.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import { ImpressionArea } from '@toss/impression-area';
 import { uniqBy as _uniqBy } from 'lodash-es';
 import Link from 'next/link';
 
@@ -15,19 +16,11 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
 const ProjectList = () => {
-  const { data: projects, isLoading } = useGetProjectListQuery();
+  const { data, isLoading, fetchNextPage } = useGetProjectListQuery({
+    limit: 20,
+  });
   const { logClickEvent } = useEventLogger();
 
-  // 최신순
-  const sortedProjects = projects && [...projects].sort((a, b) => b.id - a.id);
-
-  const uniqueProjects =
-    sortedProjects &&
-    sortedProjects.filter((project, index) => {
-      const latestProjectIndex = sortedProjects.findIndex(({ name }) => name === project.name);
-      return latestProjectIndex === index;
-    });
-
   return (
     <StyledContainer>
       <StyledContent>
@@ -50,7 +43,7 @@ const ProjectList = () => {
           </Responsive>
         </TopWrapper>
         <LengthWrapper>
-          {uniqueProjects && <StyledLength typography='SUIT_18_M'>{uniqueProjects.length}개의 프로젝트</StyledLength>}
+          {data?.pages && <StyledLength typography='SUIT_18_M'>{data.pages[0].totalCount}개의 프로젝트</StyledLength>}
           <ProjectMobileUploadButton
             onClick={() =>
               logClickEvent('projectUpload', {
@@ -62,18 +55,14 @@ const ProjectList = () => {
             <IconPen />
           </ProjectMobileUploadButton>
         </LengthWrapper>
-        {!isLoading && uniqueProjects == null ? (
+        {!isLoading && data?.pages == null ? (
           <StyledNoData>현재 등록된 프로젝트가 없습니다.</StyledNoData>
         ) : (
           <StyledGridContainer>
-            {uniqueProjects?.map((project) => (
-              <ProjectCard
-                key={project.id}
-                {...project}
-                // FIXME: 서버쪽에서 link가 중복으로 내려오는 이슈가 있어 임시처리합니다.
-                links={_uniqBy(project.links, 'linkId')}
-              />
-            ))}
+            {data?.pages.map((page) =>
+              page.projectList.map((project) => <ProjectCard key={project.id} {...project} />),
+            )}
+            <ImpressionArea onImpressionStart={fetchNextPage} />
           </StyledGridContainer>
         )}
       </StyledContent>

diff --git a/src/components/projects/upload/hooks/useGetProjectListQuery.ts b/src/components/projects/upload/hooks/useGetProjectListQuery.ts
@@ -1,13 +1,25 @@
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { getProjects } from '@/api/endpoint_LEGACY/projects';
+import { ProjectsRequestParams } from '@/api/endpoint_LEGACY/projects/type';
 
-export const getProjectListQueryKey = () => ['getProjectListQuery'];
+export const getProjectListQueryKey = (params: ProjectsRequestParams = {}) => ['getProjectListQuery', params];
 
-const useGetProjectListQuery = () => {
-  return useQuery({
-    queryKey: getProjectListQueryKey(),
-    queryFn: getProjects,
+const useGetProjectListQuery = (params: ProjectsRequestParams = {}) => {
+  return useInfiniteQuery({
+    queryKey: getProjectListQueryKey(params),
+    queryFn: ({ pageParam = 0 }) =>
+      getProjects({
+        ...params,
+        cursor: pageParam,
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.hasNext) {
+        return undefined;
+      }
+      return lastPage.projectList[lastPage.projectList.length - 1].id;
+    },
   });
 };