feat : user, mypage api 연결

app/(docs)/docs/[title]/page.tsx

@@ -3,6 +3,7 @@ import { docsQuery } from "@/services/docs/docsQuery";
 import React from "react";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import getQueryClient from "@/app/getQueryClient";
+import Link from "next/link";
 import Docs from "./Docs";
 
 interface PageProps {
@@ -18,8 +19,18 @@ const Page = async ({ params: { title } }: PageProps) => {
   return (
     <Container title={docs.title} classify={docs.docsType}>
       {docs.docsType}
+      <Link
+        href={`/history/${title}`}
+        style={{
+          width: "fit-content",
+          padding: "20px",
+          color: "white",
+          background: "green",
+        }}
+      >
+        버전
+      </Link>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        {JSON.stringify(docs)}
         <Docs docs={docs} />
       </HydrationBoundary>
     </Container>

app/(history)/history/[title]/History.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const History = () => {
+  return <div>asd</div>;
+};
+
+export default History;

app/(history)/history/[title]/detail/[id]/HistoryDetail.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const HistoryDetail = () => {
+  return <div>asd</div>;
+};
+
+export default HistoryDetail;

app/(history)/history/[title]/detail/[id]/page.tsx

@@ -0,0 +1,29 @@
+import Container from "@/components/Container";
+import React from "react";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import getQueryClient from "@/app/getQueryClient";
+import { historyQuery } from "@/services/history/historyQuery";
+
+interface PageProps {
+  params: {
+    title: string;
+  };
+}
+
+const Page = async ({ params: { title } }: PageProps) => {
+  const queryClient = getQueryClient();
+  const history = await queryClient.fetchQuery(
+    historyQuery.getDetail(title, 0),
+  );
+
+  return (
+    <Container title={title} classify={title}>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {/* <History docs={docs} /> */}
+        {JSON.stringify(history)}
+      </HydrationBoundary>
+    </Container>
+  );
+};
+
+export default Page;

app/(history)/history/[title]/page.tsx

@@ -0,0 +1,39 @@
+import Container from "@/components/Container";
+import React from "react";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import getQueryClient from "@/app/getQueryClient";
+import { historyQuery } from "@/services/history/historyQuery";
+import Link from "next/link";
+
+interface PageProps {
+  params: {
+    title: string;
+  };
+}
+
+const Page = async ({ params: { title } }: PageProps) => {
+  const queryClient = getQueryClient();
+  const historyList = await queryClient.fetchQuery(historyQuery.getList(title));
+
+  return (
+    <Container title={title} classify={title}>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <Link
+          href={`/history/${title}/detail/0`}
+          style={{
+            width: "fit-content",
+            padding: "20px",
+            color: "white",
+            background: "green",
+          }}
+        >
+          버전디텔
+        </Link>
+        {/* <History docs={docs} /> */}
+        {JSON.stringify(historyList)}
+      </HydrationBoundary>
+    </Container>
+  );
+};
+
+export default Page;

app/(user)/mypage/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import Container from "@/components/Container";
+import React from "react";
+import getQueryClient from "@/app/getQueryClient";
+import { userQuery } from "@/services/user/userQuery";
+import { useUserService } from "@/services/user/useUserService";
+
+const Page = () => {
+  const { isSuccess, data } = useUserService();
+
+  return (
+    <Container title="마이페이지" classify="유저">
+      {isSuccess && JSON.stringify(data)}
+    </Container>
+  );
+};
+
+export default Page;

app/(user)/user/[id]/page.tsx

@@ -0,0 +1,26 @@
+import Container from "@/components/Container";
+import React from "react";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import getQueryClient from "@/app/getQueryClient";
+import { userQuery } from "@/services/user/userQuery";
+
+interface PageProps {
+  params: {
+    id: number;
+  };
+}
+
+const Page = async ({ params: { id } }: PageProps) => {
+  const queryClient = getQueryClient();
+  const user = await queryClient.fetchQuery(userQuery.getUser(id));
+
+  return (
+    <Container title={user.nickName} classify="유저">
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {JSON.stringify(user)}
+      </HydrationBoundary>
+    </Container>
+  );
+};
+
+export default Page;

services/docs/useDocsService.ts

@@ -1,18 +1,6 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { docsQuery } from "./docsQuery";
 
-export const useDocsList = ({ classify }: { classify: string }) => {
-  return useQuery(docsQuery.getList(classify));
-};
-
-export const useDocs = ({ title }: { title: string }) => {
-  return useQuery(docsQuery.getByTitle(title));
-};
-
-export const useSearch = ({ keyword }: { keyword: string }) => {
-  return useQuery(docsQuery.getByKeyword(keyword));
-};
-
 export const useCreateDocs = () => {
   return useMutation(docsQuery.create());
 };

services/history/HistoryService.ts

@@ -0,0 +1,13 @@
+import { HttpClient } from "@/apis/httpClient";
+
+class HistoryService extends HttpClient {
+  getList(title: string) {
+    return this.get(`/find/${title}/version`);
+  }
+
+  getDetail(title: string, id: number) {
+    return this.get(`/find/version/${title}/different/${id}`);
+  }
+}
+
+export default new HistoryService("api/docs");

services/history/historyQuery.ts

@@ -0,0 +1,19 @@
+import HistoryService from "./HistoryService";
+
+const queryKeys = {
+  list: (title: string) => ["history", title] as const,
+  detail: (title: string, id: number) =>
+    ["history", "detail", title, id] as const,
+};
+
+export const historyQuery = {
+  getList: (title: string) => ({
+    queryKey: queryKeys.list(title),
+    queryFn: () => HistoryService.getList(title).then((r) => r.data),
+  }),
+
+  getDetail: (title: string, id: number) => ({
+    queryKey: queryKeys.detail(title, id),
+    queryFn: () => HistoryService.getDetail(title, id).then((r) => r.data),
+  }),
+};

services/user/UserService.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from "@/apis/httpClient";
+import { TOKEN } from "@/constants/token.constant";
+import { Storage } from "@/storage";
+
+class UserService extends HttpClient {
+  getMyInfo() {
+    return this.get(`/`, {
+      headers: { Authorization: Storage.getItem(TOKEN.ACCESS) },
+    });
+  }
+
+  getUser(id: number) {
+    return this.get(`/id/${id}`);
+  }
+}
+
+export default new UserService("api/user");

services/user/useUserService.ts

@@ -0,0 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
+import { userQuery } from "./userQuery";
+
+export const useUserService = () => {
+  return useQuery(userQuery.getMyInfo());
+};

services/user/userQuery.ts

@@ -0,0 +1,18 @@
+import UserService from "./UserService";
+
+const queryKeys = {
+  mypage: ["mypage"] as const,
+  user: (id: number) => ["user", id] as const,
+};
+
+export const userQuery = {
+  getMyInfo: () => ({
+    queryKey: queryKeys.mypage,
+    queryFn: () => UserService.getMyInfo().then((r) => r.data),
+  }),
+
+  getUser: (id: number) => ({
+    queryKey: queryKeys.user(id),
+    queryFn: () => UserService.getUser(id).then((r) => r.data),
+  }),
+};