📅 해결 날짜: 2025년 7월 7일

🎯 핵심 문제: 헥토 PG 결제 완료 후 Invalid URL 에러 발생

⏱️ 해결 시간: 약 3시간의 디버깅 여정

🚨 문제 상황

에러 메시지

Runtime Error
TypeError: Invalid URL

Call Stack
new URL
node:internal/url (818:25)
handleAction
next/dist/src/server/app-render/action-handler.ts
renderToHTMLOrFlightImpl
next/dist/src/server/app-render/app-render.tsx
async doRender
node_modules/next/src/server/base-server.ts (2791:22)

발생 상황

• 헥토 PG 결제 완료 후 /service/apply-complete 페이지 접근 시 발생
• 결제는 정상적으로 처리되지만 완료 페이지에서 크래시
• 사용자가 결제 완료 확인을 할 수 없는 치명적 문제

🔍 디버깅 과정

1단계: 환경변수 설정 중복 문제 발견

문제점:

• config.tsx와 axios-config.ts에서 같은 환경변수를 중복 설정
• 하드코딩된 fallback 값들이 환경변수와 충돌

기존 코드:

// config.tsx
API_DOMAIN: process.env.NEXT_PUBLIC_API_DOMAIN || "<https://api-care-dev-334708545567.asia-northeast3.run.app>"

// axios-config.ts
baseURL: process.env.NEXT_PUBLIC_API_DOMAIN || "<https://api-care-dev-334708545567.asia-northeast3.run.app>"

해결 방법:

// config.tsx - 중앙 집중식 관리
const getEnvVar = (envVar: string | undefined, varName: string, defaultValue: string): string => {
  if (!envVar) {
    if (process.env.NODE_ENV === 'development') {
      console.warn(`⚠️ 환경변수 ${varName}가 설정되지 않았습니다. 기본값을 사용합니다: ${defaultValue}`);
    }
    return defaultValue;
  }
  return envVar;
};

// axios-config.ts - 환경변수 직접 사용
const API_DOMAIN = process.env.NEXT_PUBLIC_API_DOMAIN || "<https://api-care-dev-334708545567.asia-northeast3.run.app>";

2단계: 미들웨어 안전성 강화