시간표 페이지 퍼블리싱

package.json

@@ -20,6 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "axios": "^1.4.0",
     "babel-plugin-styled-components": "^2.1.4",
+    "dayjs": "^1.11.9",
     "dotenv": "^16.3.1",
     "eslint": "^8.26.0",
     "eslint-config-next": "13.0.0",

src/apis/error/throwAxiosError.ts

@@ -0,0 +1,17 @@
+import { isAxiosError } from "axios";
+
+const throwAxiosError = (err: unknown) => {
+  if (!isAxiosError(err))
+    return {
+      data: "",
+      status: "",
+      message: "",
+    };
+
+  const data = err?.response?.data;
+  const { code, status, message } = data;
+
+  return { code, message, status };
+};
+
+export default throwAxiosError;

src/apis/httpClient/httpClient.ts

@@ -0,0 +1,142 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
+import { requestInterceptors, responseInterceptors } from "@/apis/interceptor";
+import Storage from "@/apis/storage";
+import refreshToken from "@/apis/token/refreshToken";
+import TOKEN from "@/global/constants/token.constant";
+
+export interface HttpClientConfig {
+  baseURL?: string;
+  timeout?: number;
+  headers?: { Authorization?: string };
+}
+
+export class HttpClient {
+  private api: AxiosInstance;
+
+  private static clientConfig: HttpClientConfig;
+
+  constructor(url: string, axiosConfig: HttpClientConfig) {
+    this.api = axios.create({
+      ...axiosConfig,
+      baseURL: `${axiosConfig.baseURL}${url}`,
+    });
+    HttpClient.clientConfig = { headers: { Authorization: "" } };
+    this.setting();
+  }
+
+  get(requestConfig?: AxiosRequestConfig) {
+    return this.api.get("", { ...HttpClient.clientConfig, ...requestConfig });
+  }
+
+  getById(requestConfig?: AxiosRequestConfig) {
+    return this.api.get("/:id", {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  getByTitle(url: string, requestConfig?: AxiosRequestConfig) {
+    return this.api.get(`/${url}`, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  getInQuery(
+    param: string,
+    data: string | number,
+    requestConfig?: AxiosRequestConfig,
+  ) {
+    return this.api.get(`?${param}=${data}`, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  post(data: unknown, requestConfig?: AxiosRequestConfig) {
+    return this.api.post("", data, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  postInQuery(
+    param: string,
+    data: unknown,
+    requestConfig?: AxiosRequestConfig,
+  ) {
+    return this.api.post(`?${param}=${data}`, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  put(data: unknown, requestConfig?: AxiosRequestConfig) {
+    return this.api.put("", data, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  putByTitle(title: string, data: unknown, requestConfig?: AxiosRequestConfig) {
+    return this.api.put(`/${title}`, data, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  delete(requestConfig?: AxiosRequestConfig) {
+    return this.api.delete("", {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  deleteById(id: number, requestConfig?: AxiosRequestConfig) {
+    return this.api.delete(`/${id}`, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
+  private setting() {
+    HttpClient.setCommonInterceptors(this.api);
+    // const queryClient = new QueryClient();
+
+    this.api.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        // queryClient.invalidateQueries("getUser");
+        refreshToken();
+        return Promise.reject(error);
+      },
+    );
+  }
+
+  static setAccessToken() {
+    const accessToken = Storage.getItem(TOKEN.ACCESS);
+    HttpClient.clientConfig.headers = {
+      ...HttpClient.clientConfig.headers,
+      Authorization: accessToken || undefined,
+    };
+  }
+
+  static removeAccessToken() {
+    Storage.setItem(TOKEN.ACCESS, "");
+  }
+
+  private static setCommonInterceptors(instance: AxiosInstance) {
+    instance.interceptors.request.use(requestInterceptors as never);
+    instance.interceptors.response.use(responseInterceptors);
+  }
+}
+
+export const axiosConfig: HttpClientConfig = {
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+  timeout: 10000,
+};
+
+export default {
+  oauth: new HttpClient("api/auth/oauth/bsm", axiosConfig),
+  user: new HttpClient("api/user", axiosConfig),
+};

src/apis/httpClient/index.ts

@@ -1,129 +1,3 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
-import { requestInterceptors, responseInterceptors } from "@/apis/interceptor";
-import Storage from "@/apis/storage";
-import refreshToken from "@/apis/token/refreshToken";
-import { QueryClient } from "react-query";
+import httpClient from "./httpClient";
 
-export interface HttpClientConfig {
-  baseURL?: string;
-  timeout?: number;
-  headers?: { Authorization?: string };
-}
-
-export class HttpClient {
-  private api: AxiosInstance;
-
-  private static clientConfig: HttpClientConfig;
-
-  constructor(url: string, axiosConfig: HttpClientConfig) {
-    this.api = axios.create({
-      ...axiosConfig,
-      baseURL: `${axiosConfig.baseURL}${url}`,
-    });
-    HttpClient.clientConfig = { headers: { Authorization: "" } };
-    this.setting();
-  }
-
-  get(requestConfig?: AxiosRequestConfig) {
-    return this.api.get("", { ...HttpClient.clientConfig, ...requestConfig });
-  }
-
-  getById(requestConfig?: AxiosRequestConfig) {
-    return this.api.get("/:id", {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  getByTitle(url: string, requestConfig?: AxiosRequestConfig) {
-    return this.api.get(`/${url}`, {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  getInQuery(
-    param: string,
-    data: string | number,
-    requestConfig?: AxiosRequestConfig,
-  ) {
-    return this.api.get(`?${param}=${data}`, {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  post(data: unknown, requestConfig?: AxiosRequestConfig) {
-    return this.api.post("", data, {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  put(data: unknown, requestConfig?: AxiosRequestConfig) {
-    return this.api.put("", data, {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  putByTitle(title: string, data: unknown, requestConfig?: AxiosRequestConfig) {
-    return this.api.put(`/${title}`, data, {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  delete(requestConfig?: AxiosRequestConfig) {
-    return this.api.delete("", {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  deleteById(id: number, requestConfig?: AxiosRequestConfig) {
-    return this.api.delete(`/${id}`, {
-      ...HttpClient.clientConfig,
-      ...requestConfig,
-    });
-  }
-
-  private setting() {
-    HttpClient.setCommonInterceptors(this.api);
-    const queryClient = new QueryClient();
-
-    this.api.interceptors.response.use(
-      (response) => response,
-      (error) => {
-        // const { status, code } = error.response.data
-        // if (status === 403 && code === exception.code.TOKEN_403_3) Storage.delItem('refresh_token')
-        Storage.delItem("access_token");
-        queryClient.invalidateQueries("getUser");
-        refreshToken();
-        return Promise.reject(error);
-      },
-    );
-  }
-
-  static setAccessToken() {
-    const accessToken = Storage.getItem("access_token");
-    HttpClient.clientConfig.headers = {
-      ...HttpClient.clientConfig.headers,
-      Authorization: accessToken || undefined,
-    };
-  }
-
-  static removeAccessToken() {
-    Storage.setItem("access_token", "");
-  }
-
-  private static setCommonInterceptors(instance: AxiosInstance) {
-    instance.interceptors.request.use(requestInterceptors as any);
-    instance.interceptors.response.use(responseInterceptors);
-  }
-}
-
-export const axiosConfig: HttpClientConfig = {
-  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
-  timeout: 10000,
-};
+export default httpClient;

src/apis/interceptor/index.ts

@@ -1,14 +1,15 @@
 import Storage from "@/apis/storage";
 import { AxiosRequestConfig, AxiosResponse } from "axios";
 import refreshToken from "@/apis/token/refreshToken";
-import exception from "@/global/constants/exception.constant";
+import ERROR from "@/global/constants/error.constant";
+import TOKEN from "@/global/constants/token.constant";
 
 export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
-  if (!Storage.getItem("access_token") && Storage.getItem("refresh_token"))
+  if (!Storage.getItem(TOKEN.ACCESS) && Storage.getItem(TOKEN.REFRESH))
     refreshToken();
 
   if (requestConfig.headers) {
-    requestConfig.headers.Authorization = Storage.getItem("access_token");
+    requestConfig.headers.Authorization = Storage.getItem(TOKEN.ACCESS);
   }
 
   const urlParams = requestConfig.url?.split("/:") || [];
@@ -31,7 +32,7 @@ export const requestInterceptors = (requestConfig: AxiosRequestConfig) => {
 };
 
 export const responseInterceptors = (originalResponse: AxiosResponse) => {
-  if (originalResponse.status !== exception.status.SUCCESS) refreshToken();
+  if (originalResponse.status !== ERROR.STATUS.SUCCESS) refreshToken();
 
   return {
     ...originalResponse,

src/apis/token/refreshToken.ts

@@ -1,16 +1,18 @@
 import axios from "axios";
 import Storage from "@/apis/storage";
+import TOKEN from "@/global/constants/token.constant";
 
 const refreshToken = async () => {
+  // fix 필요
   try {
     const res = (
       await axios.put("/auth/refresh/access", {
-        refresh_token: Storage.getItem("refresh_token"),
+        refresh_token: Storage.getItem(TOKEN.REFRESH),
       })
     ).data;
-    Storage.setItem("access_token", res.accessToken);
+    Storage.setItem(TOKEN.ACCESS, res.accessToken);
   } catch (err) {
-    Storage.delItem("refresh_token");
+    Storage.delItem(TOKEN.REFRESH);
   }
 };
 

src/app/calender/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import CalenderPage from "@/page/calender";
+
+const Calender = () => {
+  return <CalenderPage />;
+};
+
+export default Calender;

src/app/oauth/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import OAuthPage from "@/page/oauth";
+
+const OAuth = () => {
+  return <OAuthPage />;
+};
+
+export default OAuth;

src/app/timetable/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import TimeTablePage from "@/page/timetable";
+
+const TimeTable = () => {
+  return <TimeTablePage />;
+};
+
+export default TimeTable;