[Refactor/#156/home and list page] 더보기, 무한스크롤 로직 수정

src/apis/project/getAllProjects.ts

@@ -7,6 +7,16 @@ import { ENDPOINTS } from "@constants/endPoints"
 
 import { baseInstance } from "../axiosInstance"
 
+interface paramsType {
+  sort: "createdAt" | "like" | "view"
+  isReleased: boolean
+  pageSize: number
+  lastProjectId?: number
+  lastOrderCount?: number
+  search?: string
+  skill?: string
+}
+
 /**
  * @brief 전체 프로젝트 목록을 가져옵니다
  */
@@ -15,39 +25,50 @@ export const getAllProjects = async (
     sortOption,
     isReleased,
     lastProjectId,
-    lastProject,
+    lastOrderCount,
     search,
-    skills,
+    skill,
   }: getAllProjectsType,
   config: AxiosRequestConfig = {
     headers: {
       Authorization: `Bearer ${authToken.getAccessToken()}`,
     },
   },
 ) => {
-  let lastOrderCount
-  if (sortOption !== "createdAt") {
-    lastOrderCount =
-      sortOption === "like"
-        ? lastProject?.likeCount
-        : sortOption === "view"
-          ? lastProject?.viewCount
-          : null
+  //console.log(lastOrderCount, lastProjectId)
+  const params: paramsType = {
+    sort: sortOption,
+    isReleased,
+    pageSize: 24,
+  }
+
+  if (skill) {
+    params.skill = skill
+  }
+
+  if (search) {
+    params.search = search
+  }
+
+  if (lastProjectId && !lastOrderCount && sortOption === "createdAt") {
+    params.lastProjectId = lastProjectId
+  }
+
+  if (sortOption !== "createdAt" && lastOrderCount && lastProjectId) {
+    params.lastOrderCount = lastOrderCount
+    params.lastProjectId = lastProjectId
+  }
+
+  if (!isReleased) {
+    params.isReleased = isReleased
   }
 
+  //console.log(lastProjectId, lastOrderCount)
   const { data } = await baseInstance.get<getAllProjectsResponseType>(
     ENDPOINTS.GET_ALL_PROJECTS,
     {
       ...config,
-      params: {
-        sort: sortOption,
-        isReleased,
-        pageSize: 10,
-        lastProjectId,
-        lastOrderCount,
-        search,
-        skill: skills,
-      },
+      params,
     },
   )
   return data

src/components/TechStackFilter/TechStackFilter.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image } from "@chakra-ui/react"
+import { Box, Center, Flex, Image } from "@chakra-ui/react"
 import { Skill } from "api-models"
 
 import CloseButtonTag from "@components/Tag/components/CloseButtonTag"
@@ -19,63 +19,69 @@ const TechStackFilter = ({
   onDeleteStack,
 }: TechStackFilterProps) => {
   return (
-    <Flex marginTop="3rem">
-      <Box
-        flex="0 0 30rem"
+    <Center>
+      <Flex
+        width="80%"
+        borderRadius="0.5rem"
         border="1px solid"
-        borderColor="grey.200">
-        <StackSearchBox
-          showAll={false}
-          render={({ techStacks }) => {
-            return (
-              <Box
-                paddingTop="1rem"
-                height="10rem"
-                overflow="auto">
-                {filterSelectedId(techStacks, selectedStacks).map(
-                  (techStack) => {
-                    return (
-                      <CommonTag
-                        m="0.25rem"
-                        leftElement={
-                          <Image
-                            src={techStack.iconImageUrl}
-                            boxSize={8}
-                          />
-                        }
-                        label={techStack.name}
-                        onClick={() => onAppendStack(techStack)}
-                        key={techStack.name}
-                      />
-                    )
-                  },
-                )}
-              </Box>
-            )
-          }}
-        />
-      </Box>
-      <Box
-        flexWrap="nowrap"
-        flex="1 1 auto"
-        border="1px solid"
-        borderColor="grey.200">
-        {selectedStacks.map((stack) => (
-          <CloseButtonTag
-            m="0.3rem"
-            key={stack.name}
-            label={stack.name}
-            leftElement={
-              <Image
-                src={stack.iconImageUrl}
-                boxSize={8}
-              />
-            }
-            onClickCloseButton={() => onDeleteStack(stack)}
+        borderColor="grey.200"
+        height="12.8rem"
+        marginTop="3rem">
+        <Box flex="0 0 30rem">
+          <StackSearchBox
+            inputProps={{ borderBottom: "1px solid", borderColor: "gray.200" }}
+            render={({ techStacks }) => {
+              return (
+                <Box
+                  height="10rem"
+                  paddingTop="1rem"
+                  overflow="auto">
+                  {filterSelectedId(techStacks, selectedStacks).map(
+                    (techStack) => {
+                      return (
+                        <CommonTag
+                          m="0.25rem"
+                          leftElement={
+                            <Image
+                              src={techStack.iconImageUrl}
+                              boxSize={8}
+                            />
+                          }
+                          label={techStack.name}
+                          onClick={() => onAppendStack(techStack)}
+                          key={techStack.name}
+                        />
+                      )
+                    },
+                  )}
+                </Box>
+              )
+            }}
           />
-        ))}
-      </Box>
-    </Flex>
+        </Box>
+        <Box
+          flexWrap="nowrap"
+          flex="1 1 auto"
+          overflow="auto"
+          borderLeft="1px solid"
+          borderColor="gray.200">
+          {selectedStacks.map((stack) => (
+            <CloseButtonTag
+              m="0.3rem"
+              key={stack.name}
+              label={stack.name}
+              leftElement={
+                <Image
+                  src={stack.iconImageUrl}
+                  boxSize={8}
+                />
+              }
+              onClickCloseButton={() => onDeleteStack(stack)}
+            />
+          ))}
+        </Box>
+      </Flex>
+    </Center>
   )
 }
 

src/pages/HomePage/components/ProjectListSection/ProjectListSection.tsx

@@ -3,8 +3,6 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react"
 import { Container, Stack, useMediaQuery } from "@chakra-ui/react"
 import { Skill } from "api-models"
 
-import { useQueryClient } from "@tanstack/react-query"
-
 import ProjectFilter from "@components/ProjectFilter/ProjectFilter"
 import ProjectList from "@components/ProjectList/ProjectList"
 import TechStackFilter from "@components/TechStackFilter/TechStackFilter"
@@ -14,59 +12,86 @@ import { useDebounce } from "@hooks/useDebounce"
 import { useAllProjectQuery } from "@pages/HomePage/hooks/queries/useAllProjectQuery"
 import { SortSelectType } from "@pages/HomePage/types/type"
 
-import { QUERYKEY } from "@constants/queryKey"
-
 import MoreButton from "../MoreButton/MoreButton"
 
 const ProjectListSection = () => {
   const [isLargerThan1200] = useMediaQuery("(min-width: 1200px)")
   const [isReleased, setIsReleased] = useState(false)
   const [sortOption, setSortOption] = useState<SortSelectType>("createdAt")
-  const queryClient = useQueryClient()
   const [skills, setSkills] = useState<string[]>([])
+  const [pageInfo, setPageInfo] = useState<{
+    lastProjectId: number | null
+    lastOrderCount: number | null
+  }>({ lastProjectId: null, lastOrderCount: null })
 
   const {
-    allProjectList,
+    pageData,
     isAllProjectLoading,
     refetchAllProject,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
     isRefetching,
-  } = useAllProjectQuery({ sortOption, isReleased, skills: skills.join(",") })
+  } = useAllProjectQuery({
+    sortOption,
+    isReleased,
+    lastProjectId: pageInfo.lastProjectId,
+    lastOrderCount: pageInfo.lastOrderCount,
+    skill: skills.join(","),
+  })
 
   const isLoading = isAllProjectLoading || isRefetching
-  const projectCount = allProjectList
-    ? allProjectList.pages[0].totalElements
-    : 0
+  const projectCount = pageData ? pageData.pages[0].totalElements : 0
+  const lastProject = pageData && pageData.pages[0].content.at(-1)
 
   const handleSelect = (e: ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value as SortSelectType
-
     if (value !== sortOption) {
+      setPageInfo({ lastOrderCount: null, lastProjectId: null })
+
       setSortOption(value)
-      queryClient.removeQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
-      queryClient.refetchQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
+
+      refetchAllProject()
     }
   }
 
   const handleChange = () => {
     setIsReleased(!isReleased)
+    setPageInfo({ lastOrderCount: null, lastProjectId: null })
 
-    queryClient.removeQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
-    queryClient.refetchQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
+    refetchAllProject()
   }
 
   const loadMoreProjects = useCallback(() => {
-    if (hasNextPage && !isFetchingNextPage) {
+    if (isFetchingNextPage) {
+      return
+    }
+
+    if (lastProject && hasNextPage) {
+      setPageInfo(() => {
+        if (sortOption === "createdAt") {
+          return { lastProjectId: lastProject.id, lastOrderCount: null }
+        } else {
+          console.log(sortOption, lastProject.id)
+          return {
+            lastProjectId: lastProject.id,
+            lastOrderCount:
+              sortOption === "like"
+                ? lastProject.likeCount
+                : lastProject.viewCount,
+          }
+        }
+      })
+
       fetchNextPage()
     }
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage])
+  }, [lastProject, hasNextPage, isFetchingNextPage, fetchNextPage, sortOption])
 
   const [selectedStacks, setSelectedStacks] = useState<Skill[]>([])
 
   const debounceTechFilter = useDebounce(() => {
     setSkills(selectedStacks.map((skill) => skill.name))
+    setPageInfo({ lastOrderCount: null, lastProjectId: null })
 
     refetchAllProject()
   }, 500)
@@ -103,7 +128,7 @@ const ProjectListSection = () => {
         />
         <ProjectList
           projectCount={projectCount}
-          projects={allProjectList}
+          projects={pageData}
           isLoading={isLoading}
         />
       </Stack>

src/pages/HomePage/hooks/queries/useAllProjectQuery.ts

@@ -9,10 +9,10 @@ import { QUERYKEY } from "@constants/queryKey"
 export const useAllProjectQuery = ({
   sortOption,
   isReleased,
-  lastProjectId = null,
-  lastProject = undefined,
+  lastProjectId,
+  lastOrderCount,
   search,
-  skills,
+  skill,
 }: getAllProjectsType) => {
   const {
     data,
@@ -28,30 +28,28 @@ export const useAllProjectQuery = ({
       sortOption,
       isReleased,
       lastProjectId,
-      lastProject,
+      lastOrderCount,
       search,
-      skills,
+      skill,
     ],
-    queryFn: () =>
+    queryFn: ({ pageParam }) =>
       getAllProjects({
         sortOption,
         isReleased,
-        lastProjectId,
-        lastProject,
+        lastProjectId: pageParam,
+        lastOrderCount,
         search,
-        skills,
+        skill,
       }),
     initialPageParam: 0,
-    getNextPageParam: (lastPage) => (
-      (lastProject = lastPage.content[lastPage.numberOfElements - 1]),
-      (lastProjectId = lastPage.hasNext
+    getNextPageParam: (lastPage) =>
+      lastPage.hasNext
         ? lastPage.content[lastPage.numberOfElements - 1].id
-        : null)
-    ),
+        : null,
   })
 
   return {
-    allProjectList: data,
+    pageData: data,
     isAllProjectLoading: isLoading,
     refetchAllProject: refetch,
     fetchNextPage,