Implement comprehensive API configuration system - replace hardcoded URLs with environment-aware configuration

Amelia-Shin · Amelia-Shin · commit 12309613f25d · 2025-08-15T06:46:37.000+09:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,55 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+          
+      - name: Install dependencies
+        run: npm ci
+        
+      - name: Build with environment variables
+        env:
+          VITE_API_BASE_URL: https://dummyjson.com
+        run: npm run build
+        
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/src/entities/post/api/PostAPI.ts b/src/entities/post/api/PostAPI.ts
@@ -1,41 +1,28 @@
-import { ApiClient } from "../../../shared/api/api"
+import { ApiService } from "../../../shared/api/services"
 import { Post, PostItem, CreatePost, UpdatePost, Tag } from "../model/types"
 
 /**
- * PostAPI 클래스는 ApiClient를 상속받아 기본 경로를 설정하고,
- * 각 메서드에 대한 요청을 처리합니다.
+ * PostAPI 클래스는 ApiService를 사용하여 게시글 관련 API 요청을 처리합니다.
  */
-class PostAPI extends ApiClient {
+class PostAPI extends ApiService {
   constructor() {
     super("/posts")
   }
 
   /**
    * 게시글 목록 조회
-   * @param limit - 한 페이지에 표시할 게시글 수
-   * @param skip - 건너뛸 게시글 수
-   * @param sortBy - 정렬 기준
-   * @param order - 정렬 순서
-   * @returns 게시글 목록
    */
-  async getPosts(limit: number, skip: number, sortBy?: string, order?: string): Promise<Post> {
-    const params = new URLSearchParams()
-    params.append("limit", limit.toString())
-    params.append("skip", skip.toString())
-    if (sortBy) params.append("sortBy", sortBy)
-    if (order) params.append("order", order)
-
-    return await this.get(`?${params.toString()}`)
+  async getPosts(
+    limit: number, 
+    skip: number, 
+    sortBy?: string, 
+    order?: string
+  ): Promise<Post> {
+    return this.get<Post>("", { limit, skip, sortBy, order })
   }
 
   /**
    * 검색어로 게시글 목록 조회
-   * @param searchQuery - 검색어
-   * @param limit - 한 페이지에 표시할 게시글 수
-   * @param skip - 건너뛸 게시글 수
-   * @param sortBy - 정렬 기준
-   * @param order - 정렬 순서
-   * @returns 검색 결과
    */
   async getPostsBySearch(
     searchQuery: string,
@@ -44,69 +31,59 @@ class PostAPI extends ApiClient {
     sortBy?: string,
     order?: string,
   ): Promise<Post> {
-    const params = new URLSearchParams()
-    params.append("q", searchQuery)
-    params.append("limit", limit.toString())
-    params.append("skip", skip.toString())
-    if (sortBy) params.append("sortBy", sortBy)
-    if (order) params.append("order", order)
-
-    return await this.get(`/search?${params.toString()}`)
+    return this.get<Post>("/search", { 
+      q: searchQuery, 
+      limit, 
+      skip, 
+      sortBy, 
+      order 
+    })
   }
 
   /**
    * 태그 목록 조회
-   * @returns 태그 목록
    */
   async getTags(): Promise<Tag[]> {
-    return await this.get("/tags")
+    return this.get<Tag[]>("/tags")
   }
 
   /**
    * 태그로 게시글 목록 조회
-   * @param tag - 태그
-   * @param limit - 한 페이지에 표시할 게시글 수
-   * @param skip - 건너뛸 게시글 수
-   * @param sortBy - 정렬 기준
-   * @param order - 정렬 순서
-   * @returns 태그 결과
    */
-  async getPostsByTag(tag: string, limit: number, skip: number, sortBy?: string, order?: string): Promise<Post> {
-    const params = new URLSearchParams()
-    params.append("limit", limit.toString())
-    params.append("skip", skip.toString())
-    if (sortBy) params.append("sortBy", sortBy)
-    if (order) params.append("order", order)
-
-    return await this.get(`/tag/${tag}?${params.toString()}`)
+  async getPostsByTag(
+    tag: string, 
+    limit: number, 
+    skip: number, 
+    sortBy?: string, 
+    order?: string
+  ): Promise<Post> {
+    return this.get<Post>(`/tag/${tag}`, { 
+      limit, 
+      skip, 
+      sortBy, 
+      order 
+    })
   }
 
   /**
    * 게시글 추가
-   * @param post - 추가할 게시글 정보
-   * @returns 추가된 게시글 정보
    */
   async createPost(post: CreatePost): Promise<PostItem> {
-    return await this.post("/add", post)
+    return this.post<PostItem, CreatePost>("/add", post)
   }
 
   /**
    * 게시글 업데이트
-   * @param id - 게시글 ID
-   * @param post - 수정할 게시글 정보
-   * @returns 수정된 게시글 정보
    */
   async updatePost(id: number, post: Partial<UpdatePost>): Promise<PostItem> {
-    return await this.put(`/${id}`, post)
+    return this.put<PostItem, Partial<UpdatePost>>(`/${id}`, post)
   }
 
   /**
    * 게시글 삭제
-   * @param id - 게시글 ID
-   * @returns 삭제 성공 여부
    */
   async deletePost(id: number): Promise<void> {
-    return await this.delete(`/${id}`)
+    return this.delete<void>(`/${id}`)
   }
 }
 
diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts
@@ -1,12 +1,13 @@
-// GitHub Pages 배포 환경 감지
-const isGitHubPages = window.location.hostname === 'amelia-shin.github.io'
+import { getApiConfig, buildApiUrl } from './config'
 
-// GitHub Pages에서는 전체 URL, 개발환경에서는 상대 경로
-const BASE_URL = isGitHubPages ? "https://dummyjson.com" : ""
+// API 설정 가져오기
+const apiConfig = getApiConfig()
 
 export const api = {
-  get: <T>(path: string, init?: RequestInit) =>
-    fetch(`${BASE_URL}${path}`, { ...init }).then((r) => r.json() as Promise<T>),
+  get: <T>(path: string, init?: RequestInit) => {
+    const url = buildApiUrl(path, apiConfig)
+    return fetch(url, { ...init }).then((r) => r.json() as Promise<T>)
+  },
   // post/put/delete 등...
 }
 
@@ -45,19 +46,7 @@ export class ApiClient {
    * @returns 전체 URL
    */
   private buildUrl(path: string): string {
-    // GitHub Pages 배포 환경 감지
-    const isGitHubPages = window.location.hostname === 'amelia-shin.github.io'
-    
-    // GitHub Pages에서는 전체 URL 사용
-    if (isGitHubPages) {
-      return `https://dummyjson.com${this.basePath}${path}`
-    }
-    
-    // 개발 환경에서는 상대 경로 사용
-    if (this.basePath.startsWith("/api")) {
-      return this.basePath + path
-    }
-    return "/api" + this.basePath + path
+    return buildApiUrl(`${this.basePath}${path}`, apiConfig)
   }
 
   /**
diff --git a/src/shared/api/config.ts b/src/shared/api/config.ts
@@ -0,0 +1,71 @@
+/**
+ * API 설정 관리
+ * 환경별로 다른 API 엔드포인트를 동적으로 설정
+ */
+
+export interface ApiConfig {
+  baseUrl: string
+  useProxy: boolean
+  timeout: number
+}
+
+/**
+ * 환경별 API 설정을 가져옵니다
+ */
+export function getApiConfig(): ApiConfig {
+  // 1. 환경 변수 우선 (가장 명시적)
+  if (import.meta.env.VITE_API_BASE_URL) {
+    return {
+      baseUrl: import.meta.env.VITE_API_BASE_URL,
+      useProxy: false,
+      timeout: 10000
+    }
+  }
+
+  // 2. 런타임 환경 감지
+  const hostname = window.location.hostname
+  const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1'
+  const isGitHubPages = hostname.includes('github.io')
+  const isVercel = hostname.includes('vercel.app')
+  const isNetlify = hostname.includes('netlify.app')
+
+  // 3. 환경별 기본 설정
+  if (isLocalhost) {
+    // 로컬 개발 환경: Vite proxy 사용
+    return {
+      baseUrl: '',
+      useProxy: true,
+      timeout: 10000
+    }
+  }
+
+  if (isGitHubPages || isVercel || isNetlify) {
+    // 정적 호스팅 환경: 실제 API 서버 사용
+    return {
+      baseUrl: 'https://dummyjson.com',
+      useProxy: false,
+      timeout: 15000
+    }
+  }
+
+  // 4. 기본값 (fallback)
+  return {
+    baseUrl: '',
+    useProxy: true,
+    timeout: 10000
+  }
+}
+
+/**
+ * API URL을 생성합니다
+ */
+export function buildApiUrl(path: string, config: ApiConfig): string {
+  if (config.useProxy) {
+    // 프록시 사용 (개발 환경)
+    return path.startsWith('/api') ? path : `/api${path}`
+  }
+  
+  // 전체 URL 사용 (프로덕션 환경)
+  const cleanPath = path.startsWith('/') ? path : `/${path}`
+  return `${config.baseUrl}${cleanPath}`
+}
diff --git a/src/shared/api/services.ts b/src/shared/api/services.ts
