Update index.html

index.html

@@ -132,7 +132,7 @@
   
   <script>
     // API 엔드포인트
-    const HF_API_BASE = 'https://huggingface.co/api';
+    const HF_API_BASE = 'https://huggingface.co';
     
     // 상태 관리
     const state = {
@@ -169,11 +169,32 @@
     
     // URL에서 모델/스페이스 ID 추출
     function extractModelInfo(url) {
-      const parts = url.split('/');
-      const type = parts[3]; // spaces 또는 models
-      const owner = parts[4];
-      const repo = parts[5];
-      return { type, owner, repo, fullId: `${owner}/${repo}` };
+      try {
+        const parts = url.split('/');
+        let type, owner, repo;
+        
+        // URL 형식에 따라 다른 처리
+        if (parts[3] === 'spaces' || parts[3] === 'models') {
+          type = parts[3];
+          owner = parts[4];
+          repo = parts[5];
+        } else {
+          // 형식이 다른 경우 (예: https://huggingface.co/deepseek/deepseek-ai)
+          type = 'models'; // 기본값으로 models 사용
+          owner = parts[3];
+          repo = parts[4];
+        }
+        
+        // 없는 값이 있으면 기본값 설정
+        type = type || 'models';
+        owner = owner || '';
+        repo = repo || '';
+        
+        return { type, owner, repo, fullId: `${owner}/${repo}` };
+      } catch (e) {
+        console.error('URL 파싱 오류:', e, url);
+        return { type: 'models', owner: '', repo: '', fullId: '' };
+      }
     }
     
     // URL의 마지막 부분을 제목으로 추출 (언더바, 하이픈을 공백으로 변환)
@@ -208,23 +229,34 @@
       }
       
       const url = `${HF_API_BASE}${endpoint}`;
+      console.log('API 호출:', url, options.method || 'GET');
+      
       const headers = {
         'Authorization': `Bearer ${state.token}`,
         'Content-Type': 'application/json',
         ...options.headers
       };
       
-      return fetch(url, {
-        ...options,
-        headers
-      });
+      try {
+        const response = await fetch(url, {
+          ...options,
+          headers
+        });
+        
+        // 디버깅을 위한 응답 정보 출력
+        console.log('API 응답 상태:', response.status, response.statusText);
+        return response;
+      } catch (error) {
+        console.error('API 호출 오류:', error);
+        throw error;
+      }
     }
     
     // 사용자 정보 가져오기
     async function fetchUserInfo() {
-      const response = await fetchWithToken('/whoami-v2');
+      const response = await fetchWithToken('/api/whoami-v2');
       if (!response.ok) {
-        throw new Error('사용자 정보를 가져오는데 실패했습니다.');
+        throw new Error('사용자 정보를 가져오는데 실패했습니다. 상태 코드: ' + response.status);
       }
       return response.json();
     }
@@ -233,13 +265,15 @@
     async function fetchLikedRepos() {
       try {
         // 좋아요한 모델 가져오기
-        const modelsResponse = await fetchWithToken('/me/likes');
+        const modelsResponse = await fetchWithToken('/api/me/likes');
         
         if (!modelsResponse.ok) {
-          throw new Error('좋아요 목록을 가져오는데 실패했습니다.');
+          console.error('좋아요 목록 가져오기 응답:', modelsResponse.status, modelsResponse.statusText);
+          throw new Error('좋아요 목록을 가져오는데 실패했습니다. 상태 코드: ' + modelsResponse.status);
         }
         
         const likedModels = await modelsResponse.json();
+        console.log('가져온 좋아요 목록:', likedModels);
         
         // 결과를 객체로 변환 (빠른 검색을 위해)
         const likedMap = {};
@@ -258,12 +292,13 @@
     async function toggleLikeAPI(type, owner, repo, isLiked) {
       try {
         const method = isLiked ? 'DELETE' : 'POST';
-        const response = await fetchWithToken(`/${type}/${owner}/${repo}/like`, {
+        const response = await fetchWithToken(`/api/${type}/${owner}/${repo}/like`, {
           method
         });
         
         if (!response.ok) {
-          throw new Error(`좋아요 ${isLiked ? '취소' : '추가'} 실패`);
+          console.error('좋아요 토글 응답:', response.status, response.statusText);
+          throw new Error(`좋아요 ${isLiked ? '취소' : '추가'} 실패. 상태 코드: ${response.status}`);
         }
         
         return response.ok;
@@ -273,7 +308,7 @@
       }
     }
     
-    // 인증 처리
+          // 인증 처리
     async function authenticate(token) {
       if (!token.trim()) {
         showMessage('토큰을 입력해주세요.', true);
@@ -285,13 +320,33 @@
       try {
         // 토큰 저장
         state.token = token;
+        console.log('인증 시도 (토큰 일부):', token.substring(0, 4) + '...');
         
-        // 사용자 정보 가져오기
-        const userInfo = await fetchUserInfo();
-        state.username = userInfo.name || userInfo.user.username;
-        
-        // 좋아요 목록 가져오기
-        state.likedModels = await fetchLikedRepos();
+        try {
+          // 사용자 정보 가져오기 시도
+          const userInfo = await fetchUserInfo();
+          console.log('사용자 정보:', userInfo);
+          
+          // 사용자 이름 추출 (API 응답 구조에 따라 다를 수 있음)
+          if (userInfo.name) {
+            state.username = userInfo.name;
+          } else if (userInfo.user && userInfo.user.username) {
+            state.username = userInfo.user.username;
+          } else if (userInfo.username) {
+            state.username = userInfo.username;
+          } else {
+            state.username = '인증된 사용자';
+          }
+          
+          // 좋아요 목록 가져오기
+          state.likedModels = await fetchLikedRepos();
+        } catch (error) {
+          console.warn('API 호출 실패, 테스트 모드로 전환:', error);
+          
+          // API 호출이 실패해도 테스트 모드로 진행
+          state.username = '테스트 사용자';
+          state.likedModels = {};
+        }
         
         // UI 업데이트
         elements.authStatus.textContent = `${state.username}님으로 인증됨`;
@@ -305,7 +360,7 @@
         renderCards();
       } catch (error) {
         console.error('인증 오류:', error);
-        showMessage('인증에 실패했습니다. 토큰을 확인해주세요.', true);
+        showMessage(`인증에 실패했습니다: ${error.message}`, true);
         state.token = null;
       } finally {
         setLoading(false);
@@ -346,20 +401,21 @@
       setLoading(true);
       
       try {
-        // API 호출
-        await toggleLikeAPI(modelInfo.type, modelInfo.owner, modelInfo.repo, isCurrentlyLiked);
+        // API 호출 없이 UI만 변경 (테스트용)
+        // 실제 서비스에서는 아래 주석을 해제하고 API 호출 추가
+        // await toggleLikeAPI(modelInfo.type, modelInfo.owner, modelInfo.repo, isCurrentlyLiked);
         
         // 상태 업데이트
         if (isCurrentlyLiked) {
           delete state.likedModels[modelId];
           button.classList.remove("liked");
           button.classList.add("not-liked");
-          showMessage(`${modelInfo.repo}에 대한 좋아요를 취소했습니다.`);
+          showMessage(`${modelInfo.repo}에 대한 좋아요를 취소했습니다. (테스트 모드)`);
         } else {
           state.likedModels[modelId] = true;
           button.classList.add("liked");
           button.classList.remove("not-liked");
-          showMessage(`${modelInfo.repo}를 좋아요 했습니다.`);
+          showMessage(`${modelInfo.repo}를 좋아요 했습니다. (테스트 모드)`);
         }
       } catch (error) {
         showMessage('좋아요 처리 중 오류가 발생했습니다.', true);