FE: [feat] axios 테스트 코드 작성 #34

src/frontend/eyesee-user/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "next": "15.0.2",
     "react": "19.0.0-rc-02c0e824-20241028",
     "react-dom": "19.0.0-rc-02c0e824-20241028"

src/frontend/eyesee-user/src/apis/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, type: string) {
+  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(type: string) {
+  const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_KEY,
+  });
+  return setInterceptors(instance, type);
+}
+
+/**
+ * 인증이 필요하지 않은 API 요청을 위한 Axios 인스턴스를 생성하는 함수
+ *
+ * @function createInstanceWithoutAuth
+ * @returns {AxiosInstance} 기본 설정만 된 Axios 인스턴스
+ *
+ * @description
+ * 이 함수는 기본 URL만 설정된 Axios 인스턴스를 생성합니다.
+ * 인증 토큰이 필요하지 않은 API 요청(예: 로그인, 회원가입 등)에 사용됩니다.
+ */
+function createInstanceWithoutAuth() {
+  const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_KEY,
+  });
+  return instance;
+}
+
+/**
+ * 인증이 필요한 API 요청에 사용할 Axios 인스턴스
+ * @const {AxiosInstance}
+ */
+export const api = createInstance("server");
+
+/**
+ * 인증이 필요하지 않은 API 요청에 사용할 Axios 인스턴스
+ * @const {AxiosInstance}
+ */
+export const apiWithoutAuth = createInstanceWithoutAuth();

src/frontend/eyesee-user/src/app/exam-room/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
+import { api } from "@/apis";
 
 const RealTimeVideoPage = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -51,30 +52,29 @@ const RealTimeVideoPage = () => {
     }
   };
 
-  // Blob 데이터를 서버에 전송하는 함수
+  // Blob 데이터를 서버에 전송하는 함수 (Axios 사용)
   const sendImageToServer = async (blob: Blob) => {
     const formData = new FormData();
 
     // JSON 데이터 생성
     const cheatingData = {
-      sessionId: 456, // 세션 ID
       userId: 123, // 사용자 ID
-      startTime: new Date().toISOString(), // 부정행위 발생 시간
+      sessionId: 456, // 세션 ID
+      cheatingTypeId: 789, // 부정행위 유형 ID
+      detectedTime: new Date().toISOString(), // 부정행위 발생 시간
     };
 
     // FormData에 이미지 및 JSON 추가
     formData.append("image", blob, "frame.jpg");
     formData.append("data", JSON.stringify(cheatingData)); // JSON 데이터 추가
 
     try {
-      const response = await fetch("/video-recording/start", {
-        method: "POST",
-        body: formData,
+      const response = await api.post("/video-recording/start", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
       });
-      if (!response.ok) {
-        throw new Error("이미지 전송 오류");
-      }
-      console.log("이미지 전송 성공");
+      console.log("이미지 전송 성공:", response.data);
     } catch (error) {
       console.error("이미지 전송 실패:", error);
     }