diff --git a/src/apis/project/getAllProjects.ts b/src/apis/project/getAllProjects.ts index 627a940a..905662d3 100644 --- a/src/apis/project/getAllProjects.ts +++ b/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,9 +25,9 @@ export const getAllProjects = async ( sortOption, isReleased, lastProjectId, - lastProject, + lastOrderCount, search, - skills, + skill, }: getAllProjectsType, config: AxiosRequestConfig = { headers: { @@ -25,29 +35,40 @@ export const getAllProjects = async ( }, }, ) => { - 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( ENDPOINTS.GET_ALL_PROJECTS, { ...config, - params: { - sort: sortOption, - isReleased, - pageSize: 10, - lastProjectId, - lastOrderCount, - search, - skill: skills, - }, + params, }, ) return data diff --git a/src/components/TechStackFilter/TechStackFilter.tsx b/src/components/TechStackFilter/TechStackFilter.tsx index 207d3254..914f88a4 100644 --- a/src/components/TechStackFilter/TechStackFilter.tsx +++ b/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 ( - - + - { - return ( - - {filterSelectedId(techStacks, selectedStacks).map( - (techStack) => { - return ( - - } - label={techStack.name} - onClick={() => onAppendStack(techStack)} - key={techStack.name} - /> - ) - }, - )} - - ) - }} - /> - - - {selectedStacks.map((stack) => ( - - } - onClickCloseButton={() => onDeleteStack(stack)} + borderColor="grey.200" + height="12.8rem" + marginTop="3rem"> + + { + return ( + + {filterSelectedId(techStacks, selectedStacks).map( + (techStack) => { + return ( + + } + label={techStack.name} + onClick={() => onAppendStack(techStack)} + key={techStack.name} + /> + ) + }, + )} + + ) + }} /> - ))} - - + + + {selectedStacks.map((stack) => ( + + } + onClickCloseButton={() => onDeleteStack(stack)} + /> + ))} + + + ) } diff --git a/src/pages/HomePage/components/ProjectListSection/ProjectListSection.tsx b/src/pages/HomePage/components/ProjectListSection/ProjectListSection.tsx index 2708035b..3fa1b930 100644 --- a/src/pages/HomePage/components/ProjectListSection/ProjectListSection.tsx +++ b/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("createdAt") - const queryClient = useQueryClient() const [skills, setSkills] = useState([]) + 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) => { 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([]) const debounceTechFilter = useDebounce(() => { setSkills(selectedStacks.map((skill) => skill.name)) + setPageInfo({ lastOrderCount: null, lastProjectId: null }) refetchAllProject() }, 500) @@ -103,7 +128,7 @@ const ProjectListSection = () => { /> diff --git a/src/pages/HomePage/hooks/queries/useAllProjectQuery.ts b/src/pages/HomePage/hooks/queries/useAllProjectQuery.ts index 35b5fb41..15ce4116 100644 --- a/src/pages/HomePage/hooks/queries/useAllProjectQuery.ts +++ b/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, diff --git a/src/pages/ProjectListPage/ProjectListPage.tsx b/src/pages/ProjectListPage/ProjectListPage.tsx index c5080b7f..c2b146c9 100644 --- a/src/pages/ProjectListPage/ProjectListPage.tsx +++ b/src/pages/ProjectListPage/ProjectListPage.tsx @@ -5,8 +5,6 @@ import { useLocation, useNavigate, useSearchParams } from "react-router-dom" 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" @@ -16,8 +14,6 @@ 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 ResultInfo from "./components/ResultInfo/ResultInfo" import SearchBarSection from "./components/SearchBarSection/SearchBarSection" @@ -30,51 +26,50 @@ const ProjectListPage = () => { const [isLargerThan1200] = useMediaQuery("(min-width: 1200px)") - const [isReleased, setIsReleased] = useState(false) - const [sortOption, setSortOption] = useState("createdAt") - const queryClient = useQueryClient() const { ref, inView } = useInView({ threshold: 0 }) const [skills, setSkills] = useState([]) + const [isReleased, setIsReleased] = useState(false) + const [sortOption, setSortOption] = useState("createdAt") + const [pageInfo, setPageInfo] = useState<{ + lastProjectId: number | null + lastOrderCount: number | null + }>({ lastProjectId: null, lastOrderCount: null }) + const { - allProjectList, + pageData, isAllProjectLoading, refetchAllProject, fetchNextPage, - isRefetching, isFetchingNextPage, + isRefetching, } = useAllProjectQuery({ sortOption, isReleased, - search, - skills: skills.join(","), + 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 handleSelect = (e: ChangeEvent) => { 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 }) - if (isReleased) { - refetchAllProject() - } else { - queryClient.removeQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] }) - queryClient.refetchQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] }) - } + refetchAllProject() } useEffect(() => { @@ -127,7 +122,7 @@ const ProjectListPage = () => { @@ -144,7 +139,7 @@ const ProjectListPage = () => { handleSelect={handleSelect} />