[#90] Feat: 업로드한 짤 페이지 추천 태그 api 구현 및 적용 (#95)

src/apis/tag.ts

@@ -1,5 +1,9 @@
 import http from "@/apis/core";
-import { GetTagsResponse, GetTopTagsFromLikedResponse } from "@/types/tag.dto";
+import {
+  GetTagsResponse,
+  GetTopTagsFromUploadedResponse,
+  GetTopTagsFromLikedResponse,
+} from "@/types/tag.dto";
 
 export const getSearchTag = (tag: string) =>
   http.get<GetTagsResponse>({
@@ -9,6 +13,11 @@ export const getSearchTag = (tag: string) =>
     },
   });
 
+export const getTopTagsFromUploaded = () =>
+  http.get<GetTopTagsFromUploadedResponse>({
+    url: "/v1/tag/me/upload",
+  });
+
 export const getTopTagsFromLiked = () =>
   http.get<GetTopTagsFromLikedResponse>({
     url: "/v1/tag/me/like",

src/hooks/api/tag/useGetTopTagsFromUploaded.ts

@@ -0,0 +1,16 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getTopTagsFromUploaded } from "@/apis/tag";
+
+const useGetTopTagsFromUploaded = () => {
+  const { data, ...rest } = useSuspenseQuery({
+    queryKey: ["topTagsFromUploaded"],
+    queryFn: getTopTagsFromUploaded,
+  });
+
+  return {
+    topTags: data,
+    ...rest,
+  };
+};
+
+export default useGetTopTagsFromUploaded;

src/routeTree.gen.ts

@@ -16,9 +16,9 @@ import { Route as rootRoute } from "./routes/__root"
 import { Route as LayoutWithChatImport } from "./routes/_layout-with-chat"
 import { Route as UploadZzalIndexImport } from "./routes/upload-zzal/index"
 import { Route as LayoutWithChatIndexImport } from "./routes/_layout-with-chat/index"
+import { Route as LayoutWithChatMyUploadedZzalsRouteImport } from "./routes/_layout-with-chat/my-uploaded-zzals/route"
 import { Route as LayoutWithChatMyLikedZzalsRouteImport } from "./routes/_layout-with-chat/my-liked-zzals/route"
 import { Route as AdminReportsIndexImport } from "./routes/admin/reports/index"
-import { Route as LayoutWithChatMyUploadedZzalIndexImport } from "./routes/_layout-with-chat/my-uploaded-zzal/index"
 import { Route as AdminReportsImageIdIndexImport } from "./routes/admin/reports/$imageId/index"
 
 // Create Virtual Routes
@@ -44,6 +44,16 @@ const LayoutWithChatIndexRoute = LayoutWithChatIndexImport.update({
   getParentRoute: () => LayoutWithChatRoute,
 } as any)
 
+const LayoutWithChatMyUploadedZzalsRouteRoute =
+  LayoutWithChatMyUploadedZzalsRouteImport.update({
+    path: "/my-uploaded-zzals",
+    getParentRoute: () => LayoutWithChatRoute,
+  } as any).lazy(() =>
+    import("./routes/_layout-with-chat/my-uploaded-zzals/route.lazy").then(
+      (d) => d.Route,
+    ),
+  )
+
 const LayoutWithChatMyLikedZzalsRouteRoute =
   LayoutWithChatMyLikedZzalsRouteImport.update({
     path: "/my-liked-zzals",
@@ -59,12 +69,6 @@ const AdminReportsIndexRoute = AdminReportsIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const LayoutWithChatMyUploadedZzalIndexRoute =
-  LayoutWithChatMyUploadedZzalIndexImport.update({
-    path: "/my-uploaded-zzal/",
-    getParentRoute: () => LayoutWithChatRoute,
-  } as any)
-
 const AdminReportsAdminReportsPendingComponentRoute =
   AdminReportsAdminReportsPendingComponentImport.update({
     path: "/admin/reports/AdminReports",
@@ -93,6 +97,10 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof LayoutWithChatMyLikedZzalsRouteImport
       parentRoute: typeof LayoutWithChatImport
     }
+    "/_layout-with-chat/my-uploaded-zzals": {
+      preLoaderRoute: typeof LayoutWithChatMyUploadedZzalsRouteImport
+      parentRoute: typeof LayoutWithChatImport
+    }
     "/_layout-with-chat/": {
       preLoaderRoute: typeof LayoutWithChatIndexImport
       parentRoute: typeof LayoutWithChatImport
@@ -105,10 +113,6 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof AdminReportsAdminReportsPendingComponentImport
       parentRoute: typeof rootRoute
     }
-    "/_layout-with-chat/my-uploaded-zzal/": {
-      preLoaderRoute: typeof LayoutWithChatMyUploadedZzalIndexImport
-      parentRoute: typeof LayoutWithChatImport
-    }
     "/admin/reports/": {
       preLoaderRoute: typeof AdminReportsIndexImport
       parentRoute: typeof rootRoute
@@ -125,8 +129,8 @@ declare module "@tanstack/react-router" {
 export const routeTree = rootRoute.addChildren([
   LayoutWithChatRoute.addChildren([
     LayoutWithChatMyLikedZzalsRouteRoute,
+    LayoutWithChatMyUploadedZzalsRouteRoute,
     LayoutWithChatIndexRoute,
-    LayoutWithChatMyUploadedZzalIndexRoute,
   ]),
   UploadZzalIndexRoute,
   AdminReportsAdminReportsPendingComponentRoute,

src/routes/_layout-with-chat/my-uploaded-zzals/route.lazy.tsx

@@ -0,0 +1,24 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import TagSearchForm from "@/components/common/SearchTag/TagSearchForm";
+import TagBadge from "@/components/common/TagBadge";
+import useGetTopTagsFromUploaded from "@/hooks/api/tag/useGetTopTagsFromUploaded";
+
+const MyUploadedZzals = () => {
+  const { topTags } = useGetTopTagsFromUploaded();
+
+  return (
+    <div className="flex w-full flex-col items-center">
+      <div className="mb-10pxr min-w-650pxr pl-10pxr">
+        <div className="mb-8pxr font-semibold">내가 가장 많이 사용한 태그</div>
+        {topTags.map(({ tagId, tagName }) => (
+          <TagBadge key={tagId} content={tagName} isClickable className="mr-5pxr" />
+        ))}
+      </div>
+      <TagSearchForm />
+    </div>
+  );
+};
+
+export const Route = createLazyFileRoute("/_layout-with-chat/my-uploaded-zzals")({
+  component: MyUploadedZzals,
+});

src/routes/_layout-with-chat/my-uploaded-zzal/index.tsx → src/routes/_layout-with-chat/my-uploaded-zzals/route.tsx

@@ -1,9 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-const MyUploadedZzal = () => {
-  return <div>업로드 한 짤 페이지</div>;
+const PendingComponent = () => {
+  return <div>pending</div>;
 };
 
-export const Route = createFileRoute("/_layout-with-chat/my-uploaded-zzal/")({
-  component: MyUploadedZzal,
+export const Route = createFileRoute("/_layout-with-chat/my-uploaded-zzals")({
+  pendingComponent: PendingComponent,
 });

src/types/tag.dto.ts

@@ -2,4 +2,6 @@ import { Tag } from "./tag";
 
 export type GetTagsResponse = Tag[];
 
+export type GetTopTagsFromUploadedResponse = Tag[];
+
 export type GetTopTagsFromLikedResponse = Tag[];