1. 라우팅 최적화

2. API 호출 병렬 처리
3. UI개선 - 로딩 경험 개선
4. 반응형 디자인
5. API 통신 특이사항 - URL 구성 로직의 잠재적 위험 해결

src/api.js

@@ -4,20 +4,19 @@ const API_BASE = import.meta.env.VITE_API_BASE || "";
 const toApiUrl = (path) => {
   if (!API_BASE) return path;
 
-  const baseClean = API_BASE.replace(/\/+$/, "");
-  const baseForJoin = `${baseClean}/`;
-  const normalizedPath = path.startsWith("/") ? path.slice(1) : path;
-  let pathForJoin = normalizedPath;
-
-  if (baseClean.endsWith("/api") && normalizedPath.startsWith("api/")) {
-    pathForJoin = normalizedPath.slice(4);
-  }
-
   try {
-    const baseUrl = new URL(baseForJoin, window.location.origin);
-    return new URL(pathForJoin, baseUrl).toString();
+    const base = new URL(API_BASE, window.location.origin);
+    // Ensure base pathname ends with '/' if it's not the root or if likely intended as a directory
+    if (!base.pathname.endsWith('/')) {
+        base.pathname += '/';
+    }
+    
+    // Remove leading slash from path to avoid double slashes when joining
+    const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+    
+    return new URL(cleanPath, base).toString();
   } catch (error) {
-    console.warn("Invalid VITE_API_BASE, falling back to relative URL.", error);
+    console.error("Invalid VITE_API_BASE configuration:", error);
     return path;
   }
 };