현재 API url에 맞게 msw 개선

frontend/src/apis/apiClient.ts

@@ -1,21 +1,13 @@
 import { ApiError } from '@_utils/customError/ApiError';
-import { getLastDarakbangId } from '@_common/lastDarakbangManager';
 import { getToken } from '@_utils/tokenManager';
+import { addBaseUrl } from './endPoints';
 
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 
 const DEFAULT_HEADERS = {
   'Content-Type': 'application/json',
 };
 
-const BASE_URL = `${process.env.BASE_URL}/v1`;
-
-function addBaseUrl(endpoint: string, isNeedLastDarakbang: boolean = false) {
-  if (isNeedLastDarakbang)
-    endpoint = '/darakbang/' + (getLastDarakbangId() || 0) + endpoint;
-  return BASE_URL + endpoint;
-}
-
 function getHeaders(isRequiredAuth: boolean) {
   const headers = new Headers(DEFAULT_HEADERS);
   if (isRequiredAuth) {

frontend/src/apis/endPoints.ts

@@ -1,16 +1,39 @@
-const getEndpoint = (string: string) => {
-  return `${process.env.BASE_URL}/${string}`;
-};
+import { getLastDarakbangId } from '@_common/lastDarakbangManager';
 
+const BASE_URL = `${process.env.BASE_URL}/v1`;
+export function addBaseUrl(
+  endpoint: string,
+  isNeedLastDarakbang: boolean = false,
+) {
+  if (isNeedLastDarakbang)
+    endpoint = '/darakbang/' + (getLastDarakbangId() || 0) + endpoint;
+  return BASE_URL + endpoint;
+}
+const API_URL = {
+  darakbang: {
+    role: addBaseUrl('/role', true),
+    mine: addBaseUrl('/darakbang/mine', false),
+    name: addBaseUrl('', true),
+  },
+  moim: addBaseUrl('/moim', true),
+  moims: addBaseUrl('/moim', true),
+  auth: addBaseUrl('/auth', true),
+  chamyo: addBaseUrl('/chamyo', true),
+  chat: addBaseUrl('/chat', true),
+  zzim: addBaseUrl('/zzim', true),
+  interest: addBaseUrl('/interest', true),
+  please: addBaseUrl('/please', true),
+  notification: addBaseUrl('/notification', true),
+};
 const ENDPOINTS = {
-  moim: getEndpoint('v1/moim'),
-  moims: getEndpoint('v1/moim'),
-  auth: getEndpoint('v1/auth'),
-  chamyo: getEndpoint('v1/chamyo'),
-  chat: getEndpoint('v1/chat'),
-  zzim: getEndpoint('v1/zzim'),
-  interest: getEndpoint('v1/interest'),
-  please: getEndpoint('v1/please'),
-  notification: getEndpoint('v1/notification'),
+  moim: 'moim',
+  moims: 'moim',
+  auth: 'auth',
+  chamyo: 'chamyo',
+  chat: 'chat',
+  zzim: 'zzim',
+  interest: 'interest',
+  please: 'please',
+  notification: 'notification',
 };
-export default ENDPOINTS;
+export { ENDPOINTS, API_URL };

frontend/src/common/lastDarakbangManager.tsx

@@ -6,6 +6,6 @@ export const setLastDarakbangId = (lastDarakbangId: number): void => {
 
 export const getLastDarakbangId = () => {
   const lastDarakbangId = localStorage.getItem(LAST_DARAKBANG_ID_KEY);
-  if (!lastDarakbangId) return null;
+  if (!lastDarakbangId || process.env.MSW === 'true') return null;
   return +lastDarakbangId;
 };

frontend/src/mocks/handler/interestHandler.ts

@@ -1,4 +1,4 @@
-import ENDPOINTS from '@_apis/endPoints';
+import { API_URL } from '@_apis/endPoints';
 import { http, HttpResponse } from 'msw';
 import { updatePlease } from './mockPleases';
 
@@ -8,7 +8,7 @@ interface InterestRequestBody {
 }
 
 export const interestHandler = [
-  http.post(`${ENDPOINTS.interest}`, async ({ request }) => {
+  http.post(`${API_URL.interest}`, async ({ request }) => {
     const { pleaseId, isInterested } =
       (await request.json()) as InterestRequestBody;
     updatePlease(pleaseId, isInterested);

frontend/src/mocks/handler/loginHandler.ts

@@ -0,0 +1,18 @@
+import { API_URL } from '@_apis/endPoints';
+import { HttpResponse, http } from 'msw';
+
+export const notificationHandler = [
+  http.get(`${API_URL.notification}/mine`, () => {
+    return HttpResponse.json({
+      data: {
+        notifications: [
+          {
+            type: 'MOIM_CREATED',
+            createdAt: '1시간전',
+            message: '테스트',
+          },
+        ],
+      },
+    });
+  }),
+];

frontend/src/mocks/handler/moimHandler.ts

@@ -1,9 +1,8 @@
+import { API_URL } from '@_apis/endPoints';
 import { HttpResponse, http } from 'msw';
 
-import ENDPOINTS from '@_apis/endPoints';
-
 export const moimHandler = [
-  http.get(`${ENDPOINTS.moims}`, () => {
+  http.get(API_URL.moim, () => {
     return HttpResponse.json({
       data: {
         moims: [
@@ -146,7 +145,7 @@ export const moimHandler = [
       },
     });
   }),
-  http.get(`${ENDPOINTS.moims}/1`, () => {
+  http.get(`${API_URL.moims}/1`, () => {
     return HttpResponse.json({
       data: {
         moimId: 1,
@@ -215,7 +214,7 @@ export const moimHandler = [
       },
     });
   }),
-  http.get(`${ENDPOINTS.chamyo}/all`, () => {
+  http.get(`${API_URL.chamyo}/all`, () => {
     return HttpResponse.json({
       data: {
         chamyos: [
@@ -238,18 +237,49 @@ export const moimHandler = [
       },
     });
   }),
-  http.get(`${ENDPOINTS.zzim}/mine`, () => {
+  http.get(`${API_URL.zzim}/mine`, () => {
     return HttpResponse.json({
       data: {
         isZzimed: false,
       },
     });
   }),
-  http.get(`${ENDPOINTS.chamyo}/mine`, () => {
+  http.get(`${API_URL.chamyo}/mine`, () => {
     return HttpResponse.json({
       data: {
         role: 'MOIMER',
       },
     });
   }),
+  http.get(API_URL.darakbang.role, () => {
+    return HttpResponse.json({
+      data: {
+        role: 'MANAGE',
+      },
+    });
+  }),
+  http.get(API_URL.darakbang.name, () => {
+    return HttpResponse.json({
+      data: {
+        name: 'sdfada',
+      },
+    });
+  }),
+
+  http.get(API_URL.darakbang.mine, () => {
+    return HttpResponse.json({
+      data: {
+        darakbangResponses: [
+          {
+            darakbandId: 0,
+            name: '우아한테크코스',
+          },
+          {
+            darakbandId: 1,
+            name: 'Leets',
+          },
+        ],
+      },
+    });
+  }),
 ];

frontend/src/mocks/handler/notificationHandler.ts

@@ -1,9 +1,8 @@
+import { API_URL } from '@_apis/endPoints';
 import { HttpResponse, http } from 'msw';
 
-import ENDPOINTS from '@_apis/endPoints';
-
 export const notificationHandler = [
-  http.get(`${ENDPOINTS.notification}/mine`, () => {
+  http.get(`${API_URL.notification}/mine`, () => {
     return HttpResponse.json({
       data: {
         notifications: [

frontend/src/mocks/handler/pleaseHandler.ts

@@ -1,9 +1,9 @@
-import ENDPOINTS from '@_apis/endPoints';
+import { API_URL } from '@_apis/endPoints';
 import { http, HttpResponse } from 'msw';
 import { pleasesData } from './mockPleases';
 
 export const pleaseHandler = [
-  http.get(`${ENDPOINTS.please}`, () => {
+  http.get(`${API_URL.please}`, () => {
     return HttpResponse.json({
       data: {
         pleases: pleasesData,

frontend/src/pages/HomePage/HomePage.tsx

@@ -41,8 +41,12 @@ export default function HomePage() {
     };
     const queryString = new URLSearchParams(params).toString();
     const kakaoOAuthUrl = `${requestUrl}?${queryString}`;
-
-    window.location.href = kakaoOAuthUrl;
+    console.log(process.env.MSW);
+    if (process.env.MSW == 'true') {
+      window.location.href = 'http://localhost:8081/kakao-o-auth?code=1';
+    } else {
+      window.location.href = kakaoOAuthUrl;
+    }
   };
 
   return (

frontend/webpack.common.js

@@ -17,6 +17,7 @@ module.exports = {
   devServer: {
     historyApiFallback: true,
     open: true,
+    port:8081
   },
   plugins: [
     new HtmlWebpackPlugin({