Merge pull request #155 from kakao-tech-campus-3rd-step3/feat/dev-cors-proxy#154

[FEAT] Vite 프록시 도입을 통한 개발 환경 개선 및 API 호출 리팩터링 (#154)

Author: kanghaeun

src/pages/admin/ApplicationDetail/api/comments.ts

@@ -1,9 +1,10 @@
 import type { Comment } from '@/pages/admin/ApplicationDetail/types/comments';
 
 export const fetchComments = async (applicationId: number): Promise<Comment[]> => {
-  const response = await fetch(
-    import.meta.env.VITE_API_BASE_URL + `/applications/${applicationId}/comments`,
-  );
+  const url = `/api/applications/${applicationId}/comments`;
+  const response = await fetch(url);
+
+  if (!response.ok) throw new Error('Failed to fetch comments');
   return await response.json();
 };
 
@@ -12,26 +13,26 @@ export const createComment = async (
   content: string,
   rating: number,
 ): Promise<Comment> => {
-  const response = await fetch(
-    import.meta.env.VITE_API_BASE_URL + `/applications/${applicationId}/comments`,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ content, rating }),
+  const url = `/api/applications/${applicationId}/comments`;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
     },
-  );
+    body: JSON.stringify({ content, rating }),
+  });
+
+  if (!response.ok) throw new Error('Failed to create comment');
   return await response.json();
 };
 
 export const deleteComment = async (applicationId: number, commentId: number): Promise<void> => {
-  await fetch(
-    import.meta.env.VITE_API_BASE_URL + `/applications/${applicationId}/comments/${commentId}`,
-    {
-      method: 'DELETE',
-    },
-  );
+  const url = `/api/applications/${applicationId}/comments/${commentId}`;
+  const response = await fetch(url, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) throw new Error('Failed to delete comment');
 };
 
 export const updateComment = async (
@@ -40,15 +41,15 @@ export const updateComment = async (
   content: string,
   rating: number,
 ): Promise<Comment> => {
-  const response = await fetch(
-    import.meta.env.VITE_API_BASE_URL + `/applications/${applicationId}/comments/${commentId}`,
-    {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ content, rating }),
+  const url = `/api/applications/${applicationId}/comments/${commentId}`;
+  const response = await fetch(url, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
     },
-  );
+    body: JSON.stringify({ content, rating }),
+  });
+
+  if (!response.ok) throw new Error('Failed to update comment');
   return await response.json();
 };

src/pages/admin/ApplicationDetail/api/detailApplication.ts

@@ -4,21 +4,26 @@ export const fetchDetailApplication = async (
   clubId: number,
   applicantId: number,
 ): Promise<DetailApplication> => {
-  const response = await fetch(
-    import.meta.env.VITE_API_BASE_URL + `/clubs/${clubId}/applicants/${applicantId}/application`,
-  );
+  const url = `/api/clubs/${clubId}/applicants/${applicantId}/application`;
+  const response = await fetch(url);
+
+  if (!response.ok) throw new Error('지원서 상세 정보를 가져오지 못했습니다');
   return await response.json();
 };
 
 export const updateApplicationStatus = async (
   applicationId: number,
   status: DetailApplication['status'],
-): Promise<void> => {
-  await fetch(import.meta.env.VITE_API_BASE_URL + `/applications/${applicationId}`, {
+): Promise<unknown> => {
+  const url = `/api/applications/${applicationId}`;
+  const response = await fetch(url, {
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ status }),
   });
+
+  if (!response.ok) throw new Error('지원서 상태를 업데이트하지 못했습니다');
+  return await response.json();
 };

src/pages/admin/ClubDetailEdit/api/clubDetailEdit.ts

@@ -1,30 +1,30 @@
 import type { ClubDetailEdit } from '../types/clubDetailEdit';
 
-const BASE_URL = import.meta.env.VITE_API_BASE_URL;
-
 export const fetchClubDetailEdit = async (clubId: string | number): Promise<ClubDetailEdit> => {
-  const res = await fetch(`${BASE_URL}/clubs/${clubId}`);
-  if (!res.ok) {
+  const url = `/api/clubs/${clubId}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
     throw new Error('동아리 상세 수정 데이터를 가져오는데 실패했습니다.');
   }
-  return res.json() as Promise<ClubDetailEdit>;
+  return response.json() as Promise<ClubDetailEdit>;
 };
-
 export const updateClubDetailEdit = async (
   clubId: string | number,
   updatedData: Partial<ClubDetailEdit>,
 ): Promise<ClubDetailEdit> => {
-  const res = await fetch(`${BASE_URL}/clubs/${clubId}`, {
+  const url = `/api/clubs/${clubId}`;
+  const response = await fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(updatedData),
   });
 
-  if (!res.ok) {
+  if (!response.ok) {
     throw new Error('동아리 상세 정보를 수정하는데 실패했습니다.');
   }
 
-  return res.json() as Promise<ClubDetailEdit>;
+  return response.json() as Promise<ClubDetailEdit>;
 };

src/pages/admin/Dashboard/api/applicant.ts

@@ -1,20 +1,13 @@
-import type {
-  ApplicantData,
-  ApplicationFilterOption,
-} from '@/pages/admin/Dashboard/types/dashboard';
+import type { ApplicantData } from '@/pages/admin/Dashboard/types/dashboard';
 
-export const fetchApplicants = async (
-  clubId: number,
-  status?: ApplicationFilterOption,
-): Promise<ApplicantData[]> => {
-  const url = new URL(
-    import.meta.env.VITE_API_BASE_URL + `/clubs/${clubId}/applicants`,
-    window.location.origin,
-  );
-  if (status && status !== 'ALL') {
-    url.searchParams.set('status', status);
+export const fetchApplicants = async (clubId: number): Promise<ApplicantData[]> => {
+  const url = `/api/clubs/${clubId}/dashboard/applicants`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`HTTP ${response.status}: ${errorText}`);
   }
 
-  const response = await fetch(url.toString());
   return await response.json();
 };

src/pages/admin/Dashboard/hooks/useApplicants.ts

@@ -12,7 +12,7 @@ export const useApplicants = (
 ): UseApiQueryResult<ApplicantData[]> => {
   const { data, isLoading, error } = useQuery({
     queryKey: ['applicants', clubId, status],
-    queryFn: () => fetchApplicants(clubId, status),
+    queryFn: () => fetchApplicants(clubId),
     staleTime: 1000 * 60 * 2,
   });
 

src/pages/user/Apply/api/apply.ts

@@ -6,7 +6,10 @@ import type {
 } from '@/pages/user/Apply/type/apply.ts';
 
 export const fetchApplicationForm = async (Id: number): Promise<ApplicationForm> => {
-  const response = await fetch(import.meta.env.VITE_API_BASE_URL + `/clubs/${Id}/apply`);
+  const url = `/api/clubs/${Id}/apply`;
+  const response = await fetch(url);
+
+  if (!response.ok) throw new Error('지원서 양식을 가져오지 못했습니다');
   return await response.json();
 };
 
@@ -17,16 +20,16 @@ export const postApplicationForm = async (
 ): Promise<ApplicationFormRequest> => {
   const applicationDto = applicationFormDto(formData, questionArray);
 
-  const response = await fetch(
-    import.meta.env.VITE_API_BASE_URL + `/clubs/${clubId}/apply-submit`,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(applicationDto),
+  const url = `/api/clubs/${clubId}/apply-submit`;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
     },
-  );
+    body: JSON.stringify(applicationDto),
+  });
+
+  if (!response.ok) throw new Error('지원서 양식을 제출하지 못했습니다');
   return await response.json();
 };
 

src/pages/user/ClubDetail/api/clubDetail.ts

@@ -1,9 +1,11 @@
 import type { ClubDetail } from '../types/clubDetail';
 
-const BASE_URL = import.meta.env.VITE_API_BASE_URL;
-
 export const fetchClubDetail = async (clubId: string | number): Promise<ClubDetail> => {
-  const res = await fetch(`${BASE_URL}/clubs/${clubId}`);
-  if (!res.ok) throw new Error('동아리 상세 정보를 가져오는데 실패했습니다.');
-  return res.json() as Promise<ClubDetail>;
+  const url = `/api/clubs/${clubId}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error('동아리 상세 정보를 가져오는데 실패했습니다.');
+  }
+  return response.json() as Promise<ClubDetail>;
 };

src/pages/user/Main/api/club.ts

@@ -6,8 +6,8 @@ export type ClubResponse = {
 };
 
 export async function getClubsByCategory(filter: ClubCategoryEng): Promise<ClubResponse> {
-  const response = await fetch(
-    import.meta.env.VITE_API_BASE_URL + `/clubs/search/category?category=${filter}`,
-  );
+  const url = `/api/clubs?category=${filter}`;
+  const response = await fetch(url);
+
   return await response.json();
 }

vite.config.ts

@@ -1,18 +1,30 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv, type ConfigEnv } from 'vite';
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    react({
-      babel: {
-        plugins: ['@emotion/babel-plugin'],
+export default ({ mode }: ConfigEnv) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  return defineConfig({
+    plugins: [
+      react({
+        babel: {
+          plugins: ['@emotion/babel-plugin'],
+        },
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': '/src',
       },
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': '/src',
     },
-  },
-});
+    server: {
+      proxy: {
+        '/api': {
+          target: env.VITE_API_BASE_URL,
+          changeOrigin: true,
+          secure: false,
+        },
+      },
+    },
+  });
+};