Merge pull request #163 from kakao-tech-campus-3rd-step3/fix/dev-proxy-config-error#162

[FIX] 개발 환경 프록시 순환 참조 문제 해결 및 설정 개선

Author: aaaaaattt

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

@@ -1,7 +1,7 @@
 import type { Comment } from '@/pages/admin/ApplicationDetail/types/comments';
 
 export const fetchComments = async (applicationId: number): Promise<Comment[]> => {
-  const url = `/api/applications/${applicationId}/comments`;
+  const url = `${import.meta.env.VITE_API_BASE_URL}/applications/${applicationId}/comments`;
   const response = await fetch(url);
 
   if (!response.ok) throw new Error('Failed to fetch comments');
@@ -13,7 +13,8 @@ export const createComment = async (
   content: string,
   rating: number,
 ): Promise<Comment> => {
-  const url = `/api/applications/${applicationId}/comments`;
+  const url = `${import.meta.env.VITE_API_BASE_URL}/applications/${applicationId}/comments`;
+
   const response = await fetch(url, {
     method: 'POST',
     headers: {
@@ -27,7 +28,7 @@ export const createComment = async (
 };
 
 export const deleteComment = async (applicationId: number, commentId: number): Promise<void> => {
-  const url = `/api/applications/${applicationId}/comments/${commentId}`;
+  const url = `${import.meta.env.VITE_API_BASE_URL}/applications/${applicationId}/comments/${commentId}`;
   const response = await fetch(url, {
     method: 'DELETE',
   });
@@ -41,7 +42,7 @@ export const updateComment = async (
   content: string,
   rating: number,
 ): Promise<Comment> => {
-  const url = `/api/applications/${applicationId}/comments/${commentId}`;
+  const url = `${import.meta.env.VITE_API_BASE_URL}/applications/${applicationId}/comments/${commentId}`;
   const response = await fetch(url, {
     method: 'PATCH',
     headers: {

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

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

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

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

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

@@ -1,7 +1,7 @@
 import type { ApplicantData } from '@/pages/admin/Dashboard/types/dashboard';
 
 export const fetchApplicants = async (clubId: number): Promise<ApplicantData[]> => {
-  const url = `/api/clubs/${clubId}/dashboard/applicants`;
+  const url = `${import.meta.env.VITE_API_BASE_URL}/clubs/${clubId}/dashboard/applicants`;
   const response = await fetch(url);
 
   if (!response.ok) {

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

@@ -1,7 +1,8 @@
 import type { DashboardSummary } from '@/pages/admin/Dashboard/types/dashboard';
 
 export const fetchDashboardSummary = async (clubId: number): Promise<DashboardSummary> => {
-  const response = await fetch(`/api/clubs/${clubId}/dashboard`);
+  const url = `${import.meta.env.VITE_API_BASE_URL}/clubs/${clubId}/dashboard`;
+  const response = await fetch(url);
 
   if (!response.ok) {
     throw new Error('대시보드 요약 정보를 불러오는 데 실패했습니다.');

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

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

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

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

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

@@ -6,6 +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?category=${filter}`);
+  const url = `${import.meta.env.VITE_API_BASE_URL}/clubs?category=${filter}`;
+  const response = await fetch(url);
+
   return await response.json();
 }

vite.config.ts

@@ -20,7 +20,7 @@ export default ({ mode }: ConfigEnv) => {
     server: {
       proxy: {
         '/api': {
-          target: env.VITE_API_BASE_URL,
+          target: env.VITE_PROXY_TARGET,
           changeOrigin: true,
           secure: false,
         },