diff --git a/src/apis/zzal.ts b/src/apis/zzal.ts index 805908d9..de10f93f 100644 --- a/src/apis/zzal.ts +++ b/src/apis/zzal.ts @@ -1,6 +1,7 @@ import { PostUploadZzalRequest, GetMyLikedZzalsResponse, + GetMyUploadedZzalsResponse, GetZzalDetailsResponse, GetZzalResponse, } from "@/types/zzal.dto"; @@ -26,9 +27,14 @@ export const deleteMyZzal = (imageId: number) => { return http.delete({ url: `/v1/image/${imageId}` }); }; -export const getMyLikedZzals = (offset: number) => +export const getMyLikedZzals = (page: number) => http.get({ - url: `/v1/image/like?page=${offset}&size=${PAGINATION_LIMIT}`, + url: `/v1/image/like?page=${page}&size=${PAGINATION_LIMIT}`, + }); + +export const getMyUploadedZzals = (page: number) => + http.get({ + url: `/v1/image/upload?page=${page}&size=${PAGINATION_LIMIT}`, }); export const getZzalDetails = (imageId: number) => diff --git a/src/hooks/api/zzal/useGetMyUploadedZzals.ts b/src/hooks/api/zzal/useGetMyUploadedZzals.ts new file mode 100644 index 00000000..d260c7a8 --- /dev/null +++ b/src/hooks/api/zzal/useGetMyUploadedZzals.ts @@ -0,0 +1,33 @@ +import { useSuspenseInfiniteQuery } from "@tanstack/react-query"; +import { getMyUploadedZzals } from "@/apis/zzal"; + +const useGetMyUploadedZzals = () => { + const { data, hasNextPage, isFetchingNextPage, fetchNextPage, ...rest } = + useSuspenseInfiniteQuery({ + queryKey: ["uploadedZzals"], + queryFn: ({ pageParam = 0 }) => getMyUploadedZzals(pageParam), + getNextPageParam: (lastPage, _allPages, lastPageParam) => { + if (!lastPage) return; + + return lastPageParam + 1; + }, + initialPageParam: 0, + }); + + const handleFetchNextPage = () => { + if (hasNextPage && !isFetchingNextPage) { + fetchNextPage(); + } + }; + + return { + zzals: data?.pages.flatMap((page) => page), + handleFetchNextPage, + hasNextPage, + isFetchingNextPage, + fetchNextPage, + ...rest, + }; +}; + +export default useGetMyUploadedZzals; diff --git a/src/routes/_layout-with-chat/my-uploaded-zzals/route.lazy.tsx b/src/routes/_layout-with-chat/my-uploaded-zzals/route.lazy.tsx index a323a3b5..6098f8c7 100644 --- a/src/routes/_layout-with-chat/my-uploaded-zzals/route.lazy.tsx +++ b/src/routes/_layout-with-chat/my-uploaded-zzals/route.lazy.tsx @@ -1,9 +1,22 @@ +import { useRef } from "react"; import { createLazyFileRoute } from "@tanstack/react-router"; -import TagBadge from "@/components/common/TagBadge"; import useGetTopTagsFromUploaded from "@/hooks/api/tag/useGetTopTagsFromUploaded"; +import useGetMyUploadedZzals from "@/hooks/api/zzal/useGetMyUploadedZzals"; +import useIntersectionObserver from "@/hooks/common/useIntersectionObserver"; +import TagSearchForm from "@/components/common/SearchTag/TagSearchForm"; +import TagBadge from "@/components/common/TagBadge"; +import MasonryLayout from "@/components/common/MasonryLayout"; +import ZzalCard from "@/components/common/ZzalCard"; const MyUploadedZzals = () => { const { topTags } = useGetTopTagsFromUploaded(); + const { zzals, handleFetchNextPage } = useGetMyUploadedZzals(); + const fetchMoreRef = useRef(null); + + useIntersectionObserver({ + target: fetchMoreRef, + handleIntersect: handleFetchNextPage, + }); return (
@@ -13,6 +26,13 @@ const MyUploadedZzals = () => { ))}
+ + + {zzals.map(({ imageId, path, title }) => ( + + ))} + +
); }; diff --git a/src/types/zzal.dto.ts b/src/types/zzal.dto.ts index 678faff9..5e551a3b 100644 --- a/src/types/zzal.dto.ts +++ b/src/types/zzal.dto.ts @@ -12,6 +12,12 @@ export interface GetMyLikedZzalsResponse { title: string; } +export interface GetMyUploadedZzalsResponse { + imageId: number; + title: string; + path: string; +} + export interface GetZzalResponse { pageParams: number[]; pages: GetZzalPagesResponse[][]; @@ -23,6 +29,7 @@ export interface GetZzalPagesResponse { path: string; imageLikeYn: boolean; } + export interface GetZzalDetailsResponse { imageId: number; imageTitle: string;