[#103] Feat: 업로드한 짤 페이지에서 짤 get api 구현 및 적용 (#104)

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<number>({ url: `/v1/image/${imageId}` });
 };
 
-export const getMyLikedZzals = (offset: number) =>
+export const getMyLikedZzals = (page: number) =>
   http.get<GetMyLikedZzalsResponse>({
-    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<GetMyUploadedZzalsResponse>({
+    url: `/v1/image/upload?page=${page}&size=${PAGINATION_LIMIT}`,
   });
 
 export const getZzalDetails = (imageId: number) =>

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;

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 (
     <div className="flex w-full flex-col items-center">
@@ -13,6 +26,13 @@ const MyUploadedZzals = () => {
           <TagBadge key={tagId} content={tagName} isClickable className="mr-5pxr" />
         ))}
       </div>
+      <TagSearchForm />
+      <MasonryLayout className="mt-15pxr">
+        {zzals.map(({ imageId, path, title }) => (
+          <ZzalCard className="mb-10pxr" key={imageId} src={path} alt={title} />
+        ))}
+      </MasonryLayout>
+      <div ref={fetchMoreRef} />
     </div>
   );
 };

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;