[강영훈] Week 20

package.json

@@ -9,14 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.35.1",
+    "@tanstack/react-query-devtools": "^5.35.1",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "next": "^13.5.6",
     "react": "^18",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.2"
+    "react-hook-form": "^7.51.4"
   },
   "devDependencies": {
     "@types/node": "^20",

pages/_app.tsx

@@ -1,6 +1,17 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "@/styles/global.css";
 import type { AppProps } from "next/app";
 
+const queryClient = new QueryClient();
+
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+      <div style={{ fontSize: "24px" }}>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </div>
+    </QueryClientProvider>
+  );
 }

pages/api/NavBarApi.ts

@@ -0,0 +1,17 @@
+import { DEFAULT_PROFILE } from "@/src/util/constant";
+import instance from "@/pages/api/instance";
+
+export const getUser = async () => {
+  const response = await instance.get("users");
+  const data = response?.data[0];
+  const userData = data
+    ? {
+        id: data.id,
+        name: data.name,
+        email: data.email,
+        profileImageSource: data.image_source || DEFAULT_PROFILE,
+      }
+    : null;
+
+  return userData;
+};

pages/api/folderPageApi.ts

@@ -0,0 +1,15 @@
+import instance from "@/pages/api/instance";
+import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
+
+export const getFolderData = async () => {
+  const response = await instance.get("folders");
+  return response;
+};
+
+export const getLinks = async (folderId: number = 0) => {
+  const folderQuery = folderId === 0 ? "" : `folders/${folderId}/`;
+  const response = await instance.get(`${folderQuery}links`);
+  const data = mapFolderFromLink(response.data);
+
+  return data;
+};

pages/api/instance.ts

@@ -0,0 +1,20 @@
+import axios, { AxiosInstance } from "axios";
+
+const instance: AxiosInstance = axios.create({
+  baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1/",
+});
+
+const getToken = () => {
+  if (typeof window !== undefined) {
+    const token = window.localStorage.getItem("accessToken");
+    return token;
+  }
+  return "";
+};
+
+instance.interceptors.request.use((config) => {
+  config.headers.Authorization = `Bearer ${getToken()}`;
+  return config;
+});
+
+export default instance;

pages/api/sharedPageApi.ts

@@ -0,0 +1,17 @@
+import instance from "@/pages/api/instance";
+import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
+
+export const getFolder = async (id: number) => {
+  const response = await instance.get(`folders/${id}`);
+  return response;
+};
+export const getFolderOwner = async (id: number) => {
+  const response = await instance.get(`users/${id}`);
+  return response.data;
+};
+
+export const getLinksByFolderId = async (folderId: number) => {
+  const response = await instance.get(`folders/${folderId}/links`);
+  const data = mapFolderFromLink(response.data?.data);
+  return data;
+};

pages/api/signPageApi.ts

@@ -0,0 +1,24 @@
+import instance from "@/pages/api/instance";
+
+export interface FormValue {
+  email: string;
+  password: string;
+  passwordConfirm?: string;
+}
+
+export const postUserInfo = async (data: FormValue) => {
+  const response = await instance.post("auth/sign-in", data);
+  return response;
+};
+
+export const postCreateAccount = async (data: FormValue) => {
+  const response = await instance.post("auth/sign-up", data);
+  console.log(response);
+
+  return response;
+};
+
+export const postCheckEmail = async (emailData: FormValue) => {
+  const response = await instance.post("users/check-email", emailData);
+  return response;
+};