Update app.py

app.py

@@ -172,6 +172,21 @@ if __name__ == '__main__':
       margin-bottom: 1rem;
     }
     
+    .stats-bar {
+      background-color: #e9f7ef;
+      padding: 1rem;
+      border-radius: 5px;
+      margin-bottom: 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .stats-bar .liked-count {
+      font-weight: bold;
+      color: #e74c3c;
+    }
+    
     .user-controls {
       display: flex;
       justify-content: space-between;
@@ -237,19 +252,43 @@ if __name__ == '__main__':
     }
     
     .card {
-      border: 1px solid #ccc;
-      border-radius: 5px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
       padding: 1rem;
       width: 300px;
-      box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       position: relative;
-      background-color: #f9f9f9;
+      background-color: #fff;
+      transition: all 0.3s ease;
+    }
+    
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    }
+    
+    .card.liked {
+      border-color: #e74c3c;
+      background-color: #fff9f9;
     }
     
     .card a {
       text-decoration: none;
-      color: #333;
+      color: #2980b9;
       word-break: break-all;
+      display: block;
+      margin-top: 0.5rem;
+    }
+    
+    .card a:hover {
+      text-decoration: underline;
+    }
+    
+    .card-title {
+      margin-top: 0;
+      color: #333;
+      font-size: 1.2rem;
+      padding-right: 30px; /* 좋아요 버튼 공간 확보 */
     }
     
     .like-button {
@@ -258,18 +297,40 @@ if __name__ == '__main__':
       right: 1rem;
       border: none;
       background: transparent;
-      font-size: 1.5rem;
+      font-size: 1.8rem;
       cursor: pointer;
-      transition: color 0.2s;
+      transition: all 0.2s;
+      z-index: 2;
+    }
+    
+    .like-button:hover {
+      transform: scale(1.2);
     }
     
     .like-button.liked {
-      color: red;
+      color: #e74c3c;
+      text-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
     }
     
     .like-button.not-liked {
+      color: #ccc;
+    }
+    
+    .like-label {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      background-color: #e74c3c;
       color: white;
-      -webkit-text-stroke: 1px #333;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      display: none;
+    }
+    
+    .card.liked .like-label {
+      display: block;
     }
     
     .status-message {
@@ -312,6 +373,23 @@ if __name__ == '__main__':
       margin-top: 1rem;
     }
     
+    .view-toggle {
+      margin-bottom: 1rem;
+      display: flex;
+      gap: 0.5rem;
+    }
+    
+    .view-toggle button {
+      background-color: #f8f9fa;
+      color: #333;
+      border: 1px solid #ddd;
+    }
+    
+    .view-toggle button.active {
+      background-color: #4CAF50;
+      color: white;
+    }
+    
     @media (max-width: 768px) {
       .user-controls {
         flex-direction: column;
@@ -325,6 +403,12 @@ if __name__ == '__main__':
       .card {
         width: 100%;
       }
+      
+      .stats-bar {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: flex-start;
+      }
     }
   </style>
 </head>
@@ -351,12 +435,19 @@ 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>
+    
     <div class="filter-controls">
       <label>
-        <input type="checkbox" id="showOnlyLiked" />
-        내가 좋아요한 URL만 보기
-      </label>
-      <label style="margin-left: 1rem;">
         <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" style="width: 250px;" />
       </label>
     </div>
@@ -378,17 +469,23 @@ if __name__ == '__main__':
       cardsContainer: document.getElementById('cardsContainer'),
       loadingIndicator: document.getElementById('loadingIndicator'),
       statusMessage: document.getElementById('statusMessage'),
-      showOnlyLiked: document.getElementById('showOnlyLiked'),
       searchInput: document.getElementById('searchInput'),
       loginSection: document.getElementById('loginSection'),
-      loggedInSection: document.getElementById('loggedInSection')
+      loggedInSection: document.getElementById('loggedInSection'),
+      statsBar: document.getElementById('statsBar'),
+      totalCount: document.getElementById('totalCount'),
+      likedCount: document.getElementById('likedCount'),
+      allViewBtn: document.getElementById('allViewBtn'),
+      likedViewBtn: document.getElementById('likedViewBtn')
     };
     
     // 애플리케이션 상태
     const state = {
       username: null,
       likedURLs: {},
-      isLoading: false
+      allURLs: [],
+      isLoading: false,
+      viewMode: 'all' // 'all' 또는 'liked'
     };
     
     // 로컬 스토리지 키
@@ -413,6 +510,15 @@ if __name__ == '__main__':
       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;
@@ -451,6 +557,7 @@ if __name__ == '__main__':
           elements.currentUser.textContent = data.username;
           elements.loginSection.style.display = 'none';
           elements.loggedInSection.style.display = 'block';
+          elements.statsBar.style.display = 'flex';
           
           // 로컬 스토리지에서 좋아요 정보 로드
           state.likedURLs = loadLikesFromStorage();
@@ -492,6 +599,7 @@ if __name__ == '__main__':
           elements.currentUser.textContent = state.username;
           elements.loginSection.style.display = 'none';
           elements.loggedInSection.style.display = 'block';
+          elements.statsBar.style.display = 'flex';
           
           showMessage(`${state.username}님으로 로그인되었습니다.`);
           
@@ -522,11 +630,13 @@ if __name__ == '__main__':
         if (data.success) {
           state.username = null;
           state.likedURLs = {};
+          state.allURLs = [];
           
           elements.currentUser.textContent = '로그인되지 않음';
           elements.tokenInput.value = '';
           elements.loginSection.style.display = 'block';
           elements.loggedInSection.style.display = 'none';
+          elements.statsBar.style.display = 'none';
           
           showMessage('로그아웃되었습니다.');
           
@@ -549,27 +659,13 @@ if __name__ == '__main__':
         const response = await fetch('/api/urls');
         const urls = await handleApiResponse(response);
         
-        // 필터링 적용
-        const showOnlyLiked = elements.showOnlyLiked.checked;
-        const searchText = elements.searchInput.value.toLowerCase();
+        state.allURLs = urls;
         
-        const filteredUrls = urls.filter(item => {
-          const { url, title } = item;
-          
-          // 좋아요 필터링
-          if (showOnlyLiked && !state.likedURLs[url]) {
-            return false;
-          }
-          
-          // 검색 필터링
-          if (searchText && !url.toLowerCase().includes(searchText) && !title.toLowerCase().includes(searchText)) {
-            return false;
-          }
-          
-          return true;
-        });
+        // 필터링 및 렌더링
+        filterAndRenderCards();
         
-        renderCards(filteredUrls);
+        // 좋아요 통계 업데이트
+        updateLikeStats();
       } catch (error) {
         console.error('URL 목록 로드 오류:', error);
         showMessage(`URL 로드 오류: ${error.message}`, true);
@@ -578,8 +674,32 @@ if __name__ == '__main__':
       }
     }
     
+    // 필터링 및 카드 렌더링
+    function filterAndRenderCards() {
+      const searchText = elements.searchInput.value.toLowerCase();
+      
+      // 필터링 적용
+      const filteredUrls = state.allURLs.filter(item => {
+        const { url, title } = item;
+        
+        // 좋아요 필터링 (좋아요만 보기 모드)
+        if (state.viewMode === 'liked' && !state.likedURLs[url]) {
+          return false;
+        }
+        
+        // 검색 필터링
+        if (searchText && !url.toLowerCase().includes(searchText) && !title.toLowerCase().includes(searchText)) {
+          return false;
+        }
+        
+        return true;
+      });
+      
+      renderCards(filteredUrls);
+    }
+    
     // 좋아요 토글
-    function toggleLike(url, button) {
+    function toggleLike(url, card) {
       if (!state.username) {
         showMessage('좋아요를 하려면 허깅페이스 API 토큰으로 인증이 필요합니다.', true);
         return;
@@ -594,22 +714,33 @@ if __name__ == '__main__':
         // 상태 토글
         if (isCurrentlyLiked) {
           delete state.likedURLs[url];
-          button.classList.remove('liked');
-          button.classList.add('not-liked');
+          card.classList.remove('liked');
+          const likeBtn = card.querySelector('.like-button');
+          if (likeBtn) {
+            likeBtn.classList.remove('liked');
+            likeBtn.classList.add('not-liked');
+          }
           showMessage('좋아요를 취소했습니다.');
         } else {
           state.likedURLs[url] = true;
-          button.classList.add('liked');
-          button.classList.remove('not-liked');
+          card.classList.add('liked');
+          const likeBtn = card.querySelector('.like-button');
+          if (likeBtn) {
+            likeBtn.classList.add('liked');
+            likeBtn.classList.remove('not-liked');
+          }
           showMessage('좋아요를 추가했습니다.');
         }
         
         // 로컬 스토리지에 저장
         saveLikesToStorage();
         
-        // 필터링된 경우 목록 다시 로드
-        if (elements.showOnlyLiked.checked) {
-          loadUrls();
+        // 좋아요 통계 업데이트
+        updateLikeStats();
+        
+        // 좋아요만 보기 모드인 경우 목록 다시 렌더링
+        if (state.viewMode === 'liked') {
+          filterAndRenderCards();
         }
       } catch (error) {
         console.error('좋아요 토글 오류:', error);
@@ -638,10 +769,17 @@ if __name__ == '__main__':
         
         // 카드 생성
         const card = document.createElement('div');
-        card.className = 'card';
+        card.className = `card ${isLiked ? 'liked' : ''}`;
+        
+        // 좋아요 라벨
+        const likeLabel = document.createElement('span');
+        likeLabel.className = 'like-label';
+        likeLabel.textContent = '좋아요';
+        card.appendChild(likeLabel);
         
         // 제목
         const titleEl = document.createElement('h3');
+        titleEl.className = 'card-title';
         titleEl.textContent = title;
         card.appendChild(titleEl);
         
@@ -656,10 +794,11 @@ if __name__ == '__main__':
         const likeBtn = document.createElement('button');
         likeBtn.className = `like-button ${isLiked ? 'liked' : 'not-liked'}`;
         likeBtn.textContent = '♥';
+        likeBtn.title = isLiked ? '좋아요 취소' : '좋아요';
         
         likeBtn.addEventListener('click', function(e) {
           e.preventDefault();
-          toggleLike(url, likeBtn);
+          toggleLike(url, card);
         });
         card.appendChild(likeBtn);
         
@@ -668,6 +807,18 @@ if __name__ == '__main__':
       });
     }
     
+    // 모드 변경 함수
+    function changeViewMode(mode) {
+      state.viewMode = mode;
+      
+      // 버튼 상태 업데이트
+      elements.allViewBtn.classList.toggle('active', mode === 'all');
+      elements.likedViewBtn.classList.toggle('active', mode === 'liked');
+      
+      // 카드 다시 렌더링
+      filterAndRenderCards();
+    }
+    
     // 이벤트 리스너 설정
     elements.loginButton.addEventListener('click', () => {
       login(elements.tokenInput.value);
@@ -682,14 +833,17 @@ if __name__ == '__main__':
       }
     });
     
-    // 필터링 이벤트 리스너
-    elements.showOnlyLiked.addEventListener('change', loadUrls);
+    // 검색 이벤트 리스너
     elements.searchInput.addEventListener('input', () => {
-      // 입력 지연 처리 (타이핑할 때마다 API 호출 방지)
+      // 입력 지연 처리 (타이핑할 때마다 필터링 방지)
       clearTimeout(state.searchTimeout);
-      state.searchTimeout = setTimeout(loadUrls, 300);
+      state.searchTimeout = setTimeout(filterAndRenderCards, 300);
     });
     
+    // 보기 모드 전환 버튼
+    elements.allViewBtn.addEventListener('click', () => changeViewMode('all'));
+    elements.likedViewBtn.addEventListener('click', () => changeViewMode('liked'));
+    
     // 초기화
     checkSessionStatus();
   </script>