Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aaaaaattt merged 2 commits into from
Oct 12, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fee4119
fix: server.proxy.target이 VITE_PROXY_TARGET을 참조하도록 수정
kanghaeun Oct 12, 2025
1891f7d
refactor: 상대경로에서 절대경로로 수정
kanghaeun Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/pages/admin/ApplicationDetail/api/comments.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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: {
Expand All @@ -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',
});
Expand All @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/admin/ApplicationDetail/api/detailApplication.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('지원서 상세 정보를 가져오지 못했습니다');
Expand All @@ -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: {
Expand Down
5 changes: 3 additions & 2 deletions src/pages/admin/ClubDetailEdit/api/clubDetailEdit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/admin/Dashboard/api/applicant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
3 changes: 2 additions & 1 deletion src/pages/admin/Dashboard/api/dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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('대시보드 요약 정보를 불러오는 데 실패했습니다.');
Expand Down
4 changes: 2 additions & 2 deletions src/pages/user/Apply/api/apply.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('지원서 양식을 가져오지 못했습니다');
Expand All @@ -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: {
Expand Down
9 changes: 4 additions & 5 deletions src/pages/user/ClubDetail/api/clubDetail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>;
};
4 changes: 3 additions & 1 deletion src/pages/user/Main/api/club.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Oct 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

함수 반환 타입으로 Promise<ClubResponse>가 명시되어 있지만, response.json()은 Promise<any>를 반환하므로 타입 안정성이 떨어질 수 있습니다. 다른 API 파일(예: src/pages/user/ClubDetail/api/clubDetail.ts)에서는 as Promise<Type>과 같이 명시적 타입 캐스팅을 사용하고 있습니다. 코드베이스 전체의 일관성과 타입 안정성을 위해 아래와 같이 수정하는 것을 제안합니다.

이러한 변경을 타입 캐스팅이 누락된 다른 API 호출 함수(예: fetchComments in comments.ts, fetchDetailApplication in detailApplication.ts 등)에도 일관되게 적용하는 것을 고려해 보세요.

Suggested change
return await response.json();
return response.json() as Promise<ClubResponse>;

}
2 changes: 1 addition & 1 deletion vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default ({ mode }: ConfigEnv) => {
server: {
proxy: {
'/api': {
target: env.VITE_API_BASE_URL,
target: env.VITE_PROXY_TARGET,
Copy link

@coderabbitai coderabbitai bot Oct 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify environment variable configuration.

The proxy target change correctly addresses the circular reference issue. However, ensure that .env.development defines both VITE_PROXY_TARGET (pointing to the actual backend server) and VITE_API_BASE_URL (likely set to /api to trigger the proxy in development).

Run the following script to verify the environment configuration:

🏁 Script executed:

#!/bin/bash
# Description: Verify .env.development exists and contains required variables

if [ -f ".env.development" ]; then
  echo "=== .env.development contents ==="
  cat .env.development
  echo ""
  
  # Check for required variables
  if grep -q "VITE_PROXY_TARGET" .env.development; then
    echo "✓ VITE_PROXY_TARGET is defined"
  else
    echo "✗ VITE_PROXY_TARGET is NOT defined"
  fi
  
  if grep -q "VITE_API_BASE_URL" .env.development; then
    echo "✓ VITE_API_BASE_URL is defined"
  else
    echo "✗ VITE_API_BASE_URL is NOT defined"
  fi
else
  echo "✗ .env.development file not found"
fi

Length of output: 33

🏁 Script executed:

#!/bin/bash
# List all environment configuration files and check for required variables
echo "=== Env files found ==="
ls -1 .env* 2>/dev/null || echo "No .env files found"

for file in .env*; do
  if [ -f "$file" ]; then
    echo ""
    echo "=== Checking $file ==="
    grep -H "VITE_PROXY_TARGET" "$file" || echo "✗ VITE_PROXY_TARGET not found in $file"
    grep -H "VITE_API_BASE_URL" "$file" || echo "✗ VITE_API_BASE_URL not found in $file"
  fi
done

Length of output: 43

Enforce definition or fallback for VITE_PROXY_TARGET and VITE_API_BASE_URL
No .env files were found — both variables are undefined at runtime, so the dev proxy will fail. Either supply a .env.* with these keys or add a default/fallback in vite.config.ts.

🤖 Prompt for AI Agents 
In vite.config.ts around line 23, VITE_PROXY_TARGET (and similarly
VITE_API_BASE_URL) may be undefined at runtime because no .env files were
loaded; update the config to provide safe fallbacks or fail fast: read the env
variables and assign sensible defaults (or throw a clear error) before using
them in the dev proxy and base URL, e.g. ensure target = env.VITE_PROXY_TARGET
?? 'http://localhost:3000' and base = env.VITE_API_BASE_URL ?? '/api' (or
validate and exit with a helpful message if you require explicit values).

changeOrigin: true,
secure: false,
},
Expand Down