Update app.py

app.py

@@ -2,6 +2,7 @@ from flask import Flask, render_template, request, jsonify, session
 import requests
 import os
 from datetime import timedelta
+import json
 
 app = Flask(__name__)
 app.secret_key = os.urandom(24)
@@ -103,6 +104,10 @@ def login():
     session['token'] = token
     session['username'] = username
     
+    # 사용자가 좋아요한 URL 상태를 세션에 초기화
+    if 'liked_urls' not in session:
+        session['liked_urls'] = {}
+    
     return jsonify({
         'success': True, 
         'username': username
@@ -112,6 +117,7 @@ def login():
 def logout():
     session.pop('token', None)
     session.pop('username', None)
+    session.pop('liked_urls', None)
     return jsonify({'success': True})
 
 @app.route('/api/urls', methods=['GET'])
@@ -124,18 +130,68 @@ def get_urls():
         if not model_info:
             continue
         
+        # 사용자의 좋아요 상태 확인
+        is_liked = False
+        if 'liked_urls' in session and url in session['liked_urls']:
+            is_liked = True
+        
         results.append({
             'url': url,
             'title': title,
-            'model_info': model_info
+            'model_info': model_info,
+            'is_liked': is_liked
         })
     
     return jsonify(results)
 
+@app.route('/api/toggle-like', methods=['POST'])
+def toggle_like():
+    if 'username' not in session:
+        return jsonify({'success': False, 'message': '로그인이 필요합니다.'})
+    
+    data = request.json
+    url = data.get('url')
+    
+    if not url:
+        return jsonify({'success': False, 'message': 'URL이 필요합니다.'})
+    
+    # 세션에서 좋아요 정보 가져오기
+    liked_urls = session.get('liked_urls', {})
+    
+    # 좋아요 상태 토글
+    if url in liked_urls:
+        del liked_urls[url]
+        is_liked = False
+        message = '좋아요를 취소했습니다.'
+    else:
+        liked_urls[url] = True
+        is_liked = True
+        message = '좋아요를 추가했습니다.'
+    
+    # 세션에 좋아요 정보 업데이트
+    session['liked_urls'] = liked_urls
+    
+    return jsonify({
+        'success': True,
+        'is_liked': is_liked,
+        'message': message
+    })
+
+@app.route('/api/get-likes', methods=['GET'])
+def get_likes():
+    if 'username' not in session:
+        return jsonify({'success': False, 'message': '로그인이 필요합니다.'})
+    
+    liked_urls = session.get('liked_urls', {})
+    return jsonify({
+        'success': True,
+        'liked_urls': liked_urls
+    })
+
 @app.route('/api/session-status', methods=['GET'])
 def session_status():
     return jsonify({
-        'logged_in': 'token' in session,
+        'logged_in': 'username' in session,
         'username': session.get('username')
     })
 
@@ -157,6 +213,7 @@ if __name__ == '__main__':
       margin: 0;
       padding: 0;
       color: #333;
+      background-color: #f4f5f7;
     }
     
     .container {
@@ -166,25 +223,11 @@ if __name__ == '__main__':
     }
     
     .header {
-      background-color: #f0f0f0;
-      padding: 1rem;
-      border-radius: 5px;
-      margin-bottom: 1rem;
-    }
-    
-    .stats-bar {
-      background-color: #e9f7ef;
+      background-color: #fff;
       padding: 1rem;
-      border-radius: 5px;
+      border-radius: 8px;
       margin-bottom: 1rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    
-    .stats-bar .liked-count {
-      font-weight: bold;
-      color: #e74c3c;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     
     .user-controls {
@@ -195,16 +238,20 @@ if __name__ == '__main__':
     }
     
     .filter-controls {
-      background-color: #f8f9fa;
+      background-color: #fff;
       padding: 1rem;
-      border-radius: 5px;
+      border-radius: 8px;
       margin-bottom: 1rem;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
     
     input[type="password"],
     input[type="text"] {
       padding: 0.5rem;
-      border: 1px solid #ccc;
+      border: 1px solid #ddd;
       border-radius: 4px;
       margin-right: 5px;
     }
@@ -216,6 +263,7 @@ if __name__ == '__main__':
       border: none;
       border-radius: 4px;
       cursor: pointer;
+      transition: background-color 0.2s;
     }
     
     button:hover {
@@ -268,8 +316,19 @@ if __name__ == '__main__':
     }
     
     .card.liked {
-      border-color: #e74c3c;
-      background-color: #fff9f9;
+      border-color: #ff4757;
+      background-color: #ffebee;
+    }
+    
+    .card-header {
+      margin-bottom: 0.5rem;
+      padding-right: 40px; /* 좋아요 버튼 공간 */
+    }
+    
+    .card-title {
+      font-size: 1.2rem;
+      margin: 0 0 0.5rem 0;
+      color: #333;
     }
     
     .card a {
@@ -277,30 +336,29 @@ if __name__ == '__main__':
       color: #2980b9;
       word-break: break-all;
       display: block;
-      margin-top: 0.5rem;
+      font-size: 0.9rem;
     }
     
     .card a:hover {
       text-decoration: underline;
     }
     
-    .card-title {
-      margin-top: 0;
-      color: #333;
-      font-size: 1.2rem;
-      padding-right: 30px; /* 좋아요 버튼 공간 확보 */
-    }
-    
     .like-button {
       position: absolute;
       top: 1rem;
       right: 1rem;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
       border: none;
       background: transparent;
-      font-size: 1.8rem;
+      font-size: 1.5rem;
       cursor: pointer;
-      transition: all 0.2s;
-      z-index: 2;
+      transition: all 0.3s ease;
+      color: #ddd;
     }
     
     .like-button:hover {
@@ -308,46 +366,54 @@ if __name__ == '__main__':
     }
     
     .like-button.liked {
-      color: #e74c3c;
-      text-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
+      color: #ff4757;
     }
     
-    .like-button.not-liked {
-      color: #ccc;
-    }
-    
-    .like-label {
+    .like-badge {
       position: absolute;
-      top: 10px;
-      left: 10px;
-      background-color: #e74c3c;
+      top: -5px;
+      left: -5px;
+      background-color: #ff4757;
       color: white;
-      padding: 2px 8px;
-      border-radius: 10px;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
       font-size: 0.7rem;
       font-weight: bold;
+    }
+    
+    .like-status {
+      background-color: #fff;
+      padding: 1rem;
+      border-radius: 8px;
+      margin-bottom: 1rem;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       display: none;
     }
     
-    .card.liked .like-label {
-      display: block;
+    .like-status strong {
+      color: #ff4757;
     }
     
     .status-message {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
       padding: 1rem;
-      border-radius: 4px;
-      margin-bottom: 1rem;
+      border-radius: 8px;
       display: none;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      z-index: 1000;
+      max-width: 300px;
     }
     
     .success {
-      background-color: #dff0d8;
-      color: #3c763d;
+      background-color: #4CAF50;
+      color: white;
     }
     
     .error {
-      background-color: #f2dede;
-      color: #a94442;
+      background-color: #f44336;
+      color: white;
     }
     
     .loading {
@@ -356,40 +422,51 @@ if __name__ == '__main__':
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: rgba(255, 255, 255, 0.7);
+      background-color: rgba(255, 255, 255, 0.8);
       display: none;
       justify-content: center;
       align-items: center;
       z-index: 1000;
-      font-size: 1.5rem;
     }
     
-    .login-section {
-      margin-top: 1rem;
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #3498db;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
     }
     
-    .logged-in-section {
-      display: none;
-      margin-top: 1rem;
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
     }
     
-    .view-toggle {
-      margin-bottom: 1rem;
+    .filter-toggle {
       display: flex;
-      gap: 0.5rem;
     }
     
-    .view-toggle button {
-      background-color: #f8f9fa;
+    .filter-toggle button {
+      margin-right: 0.5rem;
+      background-color: #f0f0f0;
       color: #333;
-      border: 1px solid #ddd;
     }
     
-    .view-toggle button.active {
+    .filter-toggle button.active {
       background-color: #4CAF50;
       color: white;
     }
     
+    .login-section {
+      margin-top: 1rem;
+    }
+    
+    .logged-in-section {
+      display: none;
+      margin-top: 1rem;
+    }
+    
     @media (max-width: 768px) {
       .user-controls {
         flex-direction: column;
@@ -400,14 +477,16 @@ if __name__ == '__main__':
         margin-bottom: 1rem;
       }
       
-      .card {
-        width: 100%;
+      .filter-controls {
+        flex-direction: column;
       }
       
-      .stats-bar {
-        flex-direction: column;
-        gap: 0.5rem;
-        align-items: flex-start;
+      .filter-controls > div {
+        margin-bottom: 0.5rem;
+      }
+      
+      .card {
+        width: 100%;
       }
     }
   </style>
@@ -435,26 +514,25 @@ if __name__ == '__main__':
       </div>
     </div>
     
-    <!-- 좋아요 통계 및 표시 토글 -->
-    <div id="statsBar" class="stats-bar" style="display: none;">
-      <div>
-        총 <span id="totalCount">0</span>개 중 <span id="likedCount" class="liked-count">0</span>개 좋아요 함
-      </div>
-      <div class="view-toggle">
-        <button id="allViewBtn" class="active">전체 보기</button>
-        <button id="likedViewBtn">좋아요만 보기</button>
-      </div>
+    <div id="likeStatus" class="like-status">
+      <div id="likeStatsText">총 <span id="totalUrlCount">0</span>개 중 <strong><span id="likedUrlCount">0</span>개</strong>의 URL을 좋아요 했습니다.</div>
     </div>
     
     <div class="filter-controls">
-      <label>
-        <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" style="width: 250px;" />
-      </label>
+      <div>
+        <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" style="width: 300px;" />
+      </div>
+      <div class="filter-toggle">
+        <button id="allUrlsBtn" class="active">전체 보기</button>
+        <button id="likedUrlsBtn">좋아요만 보기</button>
+      </div>
     </div>
     
     <div id="statusMessage" class="status-message"></div>
     
-    <div id="loadingIndicator" class="loading">처리 중...</div>
+    <div id="loadingIndicator" class="loading">
+      <div class="spinner"></div>
+    </div>
     
     <div id="cardsContainer" class="cards-container"></div>
   </div>
@@ -472,11 +550,11 @@ if __name__ == '__main__':
       searchInput: document.getElementById('searchInput'),
       loginSection: document.getElementById('loginSection'),
       loggedInSection: document.getElementById('loggedInSection'),
-      statsBar: document.getElementById('statsBar'),
-      totalCount: document.getElementById('totalCount'),
-      likedCount: document.getElementById('likedCount'),
-      allViewBtn: document.getElementById('allViewBtn'),
-      likedViewBtn: document.getElementById('likedViewBtn')
+      likeStatus: document.getElementById('likeStatus'),
+      totalUrlCount: document.getElementById('totalUrlCount'),
+      likedUrlCount: document.getElementById('likedUrlCount'),
+      allUrlsBtn: document.getElementById('allUrlsBtn'),
+      likedUrlsBtn: document.getElementById('likedUrlsBtn')
     };
     
     // 애플리케이션 상태
@@ -488,37 +566,6 @@ if __name__ == '__main__':
       viewMode: 'all' // 'all' 또는 'liked'
     };
     
-    // 로컬 스토리지 키
-    function getLikesStorageKey(username) {
-      return `hf_local_likes_${username}`;
-    }
-    
-    // 로컬 스토리지에서 좋아요 정보 로드
-    function loadLikesFromStorage() {
-      if (!state.username) return {};
-      
-      const key = getLikesStorageKey(state.username);
-      const savedLikes = localStorage.getItem(key);
-      return savedLikes ? JSON.parse(savedLikes) : {};
-    }
-    
-    // 로컬 스토리지에 좋아요 정보 저장
-    function saveLikesToStorage() {
-      if (!state.username) return;
-      
-      const key = getLikesStorageKey(state.username);
-      localStorage.setItem(key, JSON.stringify(state.likedURLs));
-    }
-    
-    // 좋아요 통계 업데이트
-    function updateLikeStats() {
-      const totalCount = state.allURLs.length;
-      const likedCount = Object.keys(state.likedURLs).length;
-      
-      elements.totalCount.textContent = totalCount;
-      elements.likedCount.textContent = likedCount;
-    }
-    
     // 로딩 상태 표시 함수
     function setLoading(isLoading) {
       state.isLoading = isLoading;
@@ -546,6 +593,15 @@ if __name__ == '__main__':
       return response.json();
     }
     
+    // 좋아요 통계 업데이트
+    function updateLikeStats() {
+      const totalCount = state.allURLs.length;
+      const likedCount = Object.keys(state.likedURLs).length;
+      
+      elements.totalUrlCount.textContent = totalCount;
+      elements.likedUrlCount.textContent = likedCount;
+    }
+    
     // 세션 상태 확인
     async function checkSessionStatus() {
       try {
@@ -557,10 +613,10 @@ if __name__ == '__main__':
           elements.currentUser.textContent = data.username;
           elements.loginSection.style.display = 'none';
           elements.loggedInSection.style.display = 'block';
-          elements.statsBar.style.display = 'flex';
+          elements.likeStatus.style.display = 'block';
           
-          // 로컬 스토리지에서 좋아요 정보 로드
-          state.likedURLs = loadLikesFromStorage();
+          // 좋아요 목록 가져오기
+          await getLikedUrls();
           
           // URL 목록 로드
           loadUrls();
@@ -570,6 +626,23 @@ if __name__ == '__main__':
       }
     }
     
+    // 좋아요 URL 가져오기
+    async function getLikedUrls() {
+      try {
+        const response = await fetch('/api/get-likes');
+        const data = await handleApiResponse(response);
+        
+        if (data.success) {
+          state.likedURLs = data.liked_urls || {};
+          return true;
+        }
+      } catch (error) {
+        console.error('좋아요 목록 가져오기 오류:', error);
+      }
+      
+      return false;
+    }
+    
     // 로그인 처리
     async function login(token) {
       if (!token.trim()) {
@@ -593,16 +666,16 @@ if __name__ == '__main__':
         if (data.success) {
           state.username = data.username;
           
-          // 로컬 스토리지에서 좋아요 정보 로드
-          state.likedURLs = loadLikesFromStorage();
-          
           elements.currentUser.textContent = state.username;
           elements.loginSection.style.display = 'none';
           elements.loggedInSection.style.display = 'block';
-          elements.statsBar.style.display = 'flex';
+          elements.likeStatus.style.display = 'block';
           
           showMessage(`${state.username}님으로 로그인되었습니다.`);
           
+          // 좋아요 목록 가져오기
+          await getLikedUrls();
+          
           // URL 목록 로드
           loadUrls();
         } else {
@@ -636,7 +709,7 @@ if __name__ == '__main__':
           elements.tokenInput.value = '';
           elements.loginSection.style.display = 'block';
           elements.loggedInSection.style.display = 'none';
-          elements.statsBar.style.display = 'none';
+          elements.likeStatus.style.display = 'none';
           
           showMessage('로그아웃되었습니다.');
           
@@ -659,8 +732,16 @@ if __name__ == '__main__':
         const response = await fetch('/api/urls');
         const urls = await handleApiResponse(response);
         
+        // URL 및 좋아요 상태 저장
         state.allURLs = urls;
         
+        // 서버에서 받은 좋아요 상태 업데이트
+        urls.forEach(item => {
+          if (item.is_liked) {
+            state.likedURLs[item.url] = true;
+          }
+        });
+        
         // 필터링 및 렌더링
         filterAndRenderCards();
         
@@ -699,7 +780,7 @@ if __name__ == '__main__':
     }
     
     // 좋아요 토글
-    function toggleLike(url, card) {
+    async function toggleLike(url, card) {
       if (!state.username) {
         showMessage('좋아요를 하려면 허깅페이스 API 토큰으로 인증이 필요합니다.', true);
         return;
@@ -708,39 +789,47 @@ if __name__ == '__main__':
       setLoading(true);
       
       try {
-        // 현재 좋아요 상태 확인
-        const isCurrentlyLiked = state.likedURLs[url] || false;
+        const response = await fetch('/api/toggle-like', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ url })
+        });
+        
+        const data = await handleApiResponse(response);
         
-        // 상태 토글
-        if (isCurrentlyLiked) {
-          delete state.likedURLs[url];
-          card.classList.remove('liked');
-          const likeBtn = card.querySelector('.like-button');
-          if (likeBtn) {
-            likeBtn.classList.remove('liked');
-            likeBtn.classList.add('not-liked');
+        if (data.success) {
+          // 좋아요 상태 업데이트
+          if (data.is_liked) {
+            state.likedURLs[url] = true;
+            card.classList.add('liked');
+            const likeBtn = card.querySelector('.like-button');
+            if (likeBtn) likeBtn.classList.add('liked');
+            const likeBadge = document.createElement('div');
+            likeBadge.className = 'like-badge';
+            likeBadge.textContent = '좋아요';
+            card.appendChild(likeBadge);
+          } else {
+            delete state.likedURLs[url];
+            card.classList.remove('liked');
+            const likeBtn = card.querySelector('.like-button');
+            if (likeBtn) likeBtn.classList.remove('liked');
+            const likeBadge = card.querySelector('.like-badge');
+            if (likeBadge) card.removeChild(likeBadge);
           }
-          showMessage('좋아요를 취소했습니다.');
-        } else {
-          state.likedURLs[url] = true;
-          card.classList.add('liked');
-          const likeBtn = card.querySelector('.like-button');
-          if (likeBtn) {
-            likeBtn.classList.add('liked');
-            likeBtn.classList.remove('not-liked');
+          
+          showMessage(data.message);
+          
+          // 좋아요 통계 업데이트
+          updateLikeStats();
+          
+          // 좋아요만 보기 모드인 경우 목록 다시 필터링
+          if (state.viewMode === 'liked') {
+            filterAndRenderCards();
           }
-          showMessage('좋아요를 추가했습니다.');
-        }
-        
-        // 로컬 스토리지에 저장
-        saveLikesToStorage();
-        
-        // 좋아요 통계 업데이트
-        updateLikeStats();
-        
-        // 좋아요만 보기 모드인 경우 목록 다시 렌더링
-        if (state.viewMode === 'liked') {
-          filterAndRenderCards();
+        } else {
+          showMessage(data.message || '좋아요 처리에 실패했습니다.', true);
         }
       } catch (error) {
         console.error('좋아요 토글 오류:', error);
@@ -771,49 +860,60 @@ if __name__ == '__main__':
         const card = document.createElement('div');
         card.className = `card ${isLiked ? 'liked' : ''}`;
         
-        // 좋아요 라벨
-        const likeLabel = document.createElement('span');
-        likeLabel.className = 'like-label';
-        likeLabel.textContent = '좋아요';
-        card.appendChild(likeLabel);
+        // 카드 헤더
+        const cardHeader = document.createElement('div');
+        cardHeader.className = 'card-header';
         
         // 제목
         const titleEl = document.createElement('h3');
         titleEl.className = 'card-title';
         titleEl.textContent = title;
-        card.appendChild(titleEl);
+        cardHeader.appendChild(titleEl);
+        
+        card.appendChild(cardHeader);
         
         // URL 링크
         const linkEl = document.createElement('a');
-        linkEl.href = url;
+
+
+linkEl.href = url;
         linkEl.textContent = url;
         linkEl.target = '_blank';
         card.appendChild(linkEl);
         
-        // 좋아요 버튼 (♥ 아이콘)
+        // 좋아요 버튼
         const likeBtn = document.createElement('button');
-        likeBtn.className = `like-button ${isLiked ? 'liked' : 'not-liked'}`;
-        likeBtn.textContent = '♥';
+        likeBtn.className = `like-button ${isLiked ? 'liked' : ''}`;
+        likeBtn.innerHTML = '♥';
         likeBtn.title = isLiked ? '좋아요 취소' : '좋아요';
         
-        likeBtn.addEventListener('click', function(e) {
+        likeBtn.addEventListener('click', (e) => {
           e.preventDefault();
           toggleLike(url, card);
         });
+        
         card.appendChild(likeBtn);
         
+        // 좋아요 배지 (좋아요 상태일 때만)
+        if (isLiked) {
+          const likeBadge = document.createElement('div');
+          likeBadge.className = 'like-badge';
+          likeBadge.textContent = '좋아요';
+          card.appendChild(likeBadge);
+        }
+        
         // 카드 추가
         elements.cardsContainer.appendChild(card);
       });
     }
     
-    // 모드 변경 함수
+    // 뷰 모드 변경
     function changeViewMode(mode) {
       state.viewMode = mode;
       
-      // 버튼 상태 업데이트
-      elements.allViewBtn.classList.toggle('active', mode === 'all');
-      elements.likedViewBtn.classList.toggle('active', mode === 'liked');
+      // 버튼 활성화 상태 업데이트
+      elements.allUrlsBtn.classList.toggle('active', mode === 'all');
+      elements.likedUrlsBtn.classList.toggle('active', mode === 'liked');
       
       // 카드 다시 렌더링
       filterAndRenderCards();
@@ -835,14 +935,14 @@ if __name__ == '__main__':
     
     // 검색 이벤트 리스너
     elements.searchInput.addEventListener('input', () => {
-      // 입력 지연 처리 (타이핑할 때마다 필터링 방지)
+      // 디바운싱 (입력 지연 처리)
       clearTimeout(state.searchTimeout);
       state.searchTimeout = setTimeout(filterAndRenderCards, 300);
     });
     
-    // 보기 모드 전환 버튼
-    elements.allViewBtn.addEventListener('click', () => changeViewMode('all'));
-    elements.likedViewBtn.addEventListener('click', () => changeViewMode('liked'));
+    // 필터 버튼 이벤트 리스너
+    elements.allUrlsBtn.addEventListener('click', () => changeViewMode('all'));
+    elements.likedUrlsBtn.addEventListener('click', () => changeViewMode('liked'));
     
     // 초기화
     checkSessionStatus();
@@ -852,4 +952,4 @@ if __name__ == '__main__':
 ''')
     
     # 허깅페이스 스페이스에서는 7860 포트 사용
-    app.run(host='0.0.0.0', port=7860)
+    app.run(host='0.0.0.0', port=7860)