🔧 feat: api 통신 위한 axios instance 설정 추가 #1

src/api/index.ts

@@ -0,0 +1,76 @@
+import { getAccessToken } from '@/utils/auth';
+import axios, { AxiosInstance } from 'axios';
+
+/**
+ * Axios 인스턴스에 인터셉터를 설정하는 함수
+ *
+ * @function setInterceptors
+ * @param {AxiosInstance} instance - 인터셉터를 설정할 Axios 인스턴스
+ * @returns {AxiosInstance} 인터셉터가 설정된 Axios 인스턴스
+ *
+ * @description
+ * 이 함수는 요청 인터셉터를 설정하여 각 API 요청에 인증 토큰을 추가합니다.
+ * 클라이언트 사이드에서만 토큰을 추가하며, 서버 사이드 렌더링 시에는 토큰을 추가하지 않습니다.
+ */
+function setInterceptors(instance: AxiosInstance) {
+  instance.interceptors.request.use(
+    (config) => {
+      if (typeof window !== 'undefined' && config.headers) {
+        config.headers.Authorization = `Bearer ${getAccessToken()}`;
+      }
+      return config;
+    },
+    (error) => {
+      return Promise.reject(error);
+    },
+  );
+
+  return instance;
+}
+
+/**
+ * 인증이 필요한 API 요청을 위한 Axios 인스턴스를 생성하는 함수
+ *
+ * @function createInstance
+ * @returns {AxiosInstance} 인터셉터가 설정된 Axios 인스턴스
+ *
+ * @description
+ * 이 함수는 기본 URL이 설정된 Axios 인스턴스를 생성하고,
+ * setInterceptors 함수를 통해 인증 토큰을 자동으로 추가하는 인터셉터를 설정합니다.
+ */
+function createInstance() {
+  const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_URL,
+  });
+  return setInterceptors(instance);
+}
+
+/**
+ * 인증이 필요하지 않은 API 요청을 위한 Axios 인스턴스를 생성하는 함수
+ *
+ * @function createInstanceWithoutAuth
+ * @returns {AxiosInstance} 기본 설정만 된 Axios 인스턴스
+ *
+ * @description
+ * 이 함수는 기본 URL만 설정된 Axios 인스턴스를 생성합니다.
+ * 인증 토큰이 필요하지 않은 API 요청(예: 로그인, 회원가입 등)에 사용됩니다.
+ */
+// Todo: .env 파일에서 환경변수로 api 주소를 가져오고 있지만, 서버 주소가 나오면 env 파일 없이도 사용 가능하게 수정해야 함.
+function createInstanceWithoutAuth() {
+  const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_URL,
+  });
+  return instance;
+}
+
+/**
+ * 인증이 필요한 API 요청에 사용할 Axios 인스턴스
+ * @const {AxiosInstance}
+ */
+export const api = createInstance();
+
+/**
+ * 인증이 필요하지 않은 API 요청에 사용할 Axios 인스턴스
+ * @const {AxiosInstance}
+ */
+export const apiWithoutAuth = createInstanceWithoutAuth();

src/utils/auth.ts

@@ -0,0 +1,23 @@
+export const setAccessToken = (token: string | null) => {
+  localStorage.setItem('authorization', token || '');
+};
+
+/**
+ * 로컬 스토리지에서 인증 토큰을 가져오는 함수
+ *
+ * @function getAccessToken
+ * @returns {string | null} 저장된 인증 토큰 또는 null
+ *
+ * @description
+ * 이 함수는 로컬 스토리지에서 'authorization' 키로 저장된 인증 토큰을 반환합니다.
+ * 토큰이 없는 경우 null을 반환합니다.
+ */
+// @utils/auth.ts
+export const getAccessToken = () => {
+  return localStorage.getItem('authorization');
+};
+
+
+export const deleteAccessToken = () => {
+  localStorage.removeItem('authorization');
+};