Merge pull request #57 from Team-INSERT/feat/history

feat : history 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;

services/docs/useDocsService.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { docsQuery } from "./docsQuery";
 
 export const useDocsList = ({ classify }: { classify: string }) => {

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),
+  }),
+};