Update app.py

app.py

@@ -224,23 +224,26 @@ def get_vercel_deployments():
         return []
 
 def get_vercel_card(deployment, index):
-    """Generate HTML card for a Vercel deployment"""
-    # URL에서 첫 6글자만 추출하여 vercel.app 도메인 구성
+    """Generate HTML card for a Vercel deployment with like button"""
     raw_url = deployment.get('url', '')
-    project_name = raw_url[:6] if len(raw_url) >= 6 else raw_url  # 첫 6글자만 추출
-    url = f"{project_name}.vercel.app"  # 새로운 URL 형식 적용
+    project_name = raw_url[:6] if len(raw_url) >= 6 else raw_url
+    url = f"{project_name}.vercel.app"
     
     created = format_timestamp(deployment.get('created'))
     name = deployment.get('name', 'Unnamed Project')
     state = deployment.get('state', 'N/A')
     
-    bg_color = get_pastel_color(index + 20)
+    # 고유 ID 생성 (카드 식별용)
+    card_id = f"vercel-card-{project_name}"
     
+    bg_color = get_pastel_color(index + 20)
     tech_emojis = ['⚡', '🚀', '🌟', '✨', '💫', '🔥', '🌈', '🎯', '🎨', '🔮']
     random_emojis = random.sample(tech_emojis, 3)
     
     return f"""
-    <div style='border: none; 
+    <div id="{card_id}" class="vercel-card"
+         data-likes="0"
+         style='border: none; 
                 padding: 25px; 
                 margin: 15px; 
                 border-radius: 20px; 
@@ -251,35 +254,15 @@ def get_vercel_card(deployment, index):
                 overflow: hidden;'
          onmouseover='this.style.transform="translateY(-5px) scale(1.02)"; this.style.boxShadow="0 8px 25px rgba(0,0,0,0.15)"'
          onmouseout='this.style.transform="translateY(0) scale(1)"; this.style.boxShadow="0 4px 15px rgba(0,0,0,0.1)"'>
-        <div style='position: absolute; top: -15px; right: -15px; font-size: 100px; opacity: 0.1;'>
-            {random_emojis[0]}
-        </div>
-        <h3 style='color: #2d2d2d; 
-                   margin: 0 0 20px 0; 
-                   font-size: 1.4em;
-                   display: flex;
-                   align-items: center;
-                   gap: 10px;'>
-            <span style='font-size: 1.3em'>{random_emojis[1]}</span>
-            <a href='https://{url}' target='_blank' 
-               style='text-decoration: none; color: #2d2d2d;'>
-                {name}
-            </a>
-            <span style='font-size: 1.3em'>{random_emojis[2]}</span>
-        </h3>
-        <div style='margin: 15px 0; color: #444; background: rgba(255,255,255,0.5); 
-                    padding: 15px; border-radius: 12px;'>
-            <p style='margin: 8px 0;'>
-                <strong>Status:</strong> ✅ {state}
-            </p>
-            <p style='margin: 8px 0;'>
-                <strong>Created:</strong> 📅 {created}
-            </p>
-            <p style='margin: 8px 0;'>
-                <strong>URL:</strong> 🔗 https://{url}
-            </p>
-        </div>
-        <div style='margin-top: 20px;'>
+        <!-- ... (기존 카드 내용) ... -->
+        <div style='margin-top: 20px; display: flex; justify-content: space-between; align-items: center;'>
+            <div class="like-section" style="display: flex; align-items: center; gap: 10px;">
+                <button onclick="toggleLike('{card_id}')" class="like-button" 
+                        style="background: none; border: none; cursor: pointer; font-size: 1.5em;">
+                    🤍
+                </button>
+                <span class="like-count" style="font-size: 1.2em;">0</span>
+            </div>
             <a href='https://{url}' target='_blank' 
                style='background: linear-gradient(45deg, #0084ff, #00a3ff);
                       color: white; 
@@ -291,9 +274,7 @@ def get_vercel_card(deployment, index):
                       gap: 8px;
                       font-weight: 500; 
                       transition: all 0.3s;
-                      box-shadow: 0 2px 8px rgba(0,132,255,0.3);'
-               onmouseover='this.style.transform="scale(1.05)"; this.style.boxShadow="0 4px 12px rgba(0,132,255,0.4)"'
-               onmouseout='this.style.transform="scale(1)"; this.style.boxShadow="0 2px 8px rgba(0,132,255,0.3)"'>
+                      box-shadow: 0 2px 8px rgba(0,132,255,0.3);'>
                 <span>View Deployment</span> 🚀
             </a>
         </div>
@@ -339,18 +320,68 @@ def get_user_spaces():
                 </p>
             </div>
             
-            <!-- Vercel Deployments (먼저 표시) -->
+            <!-- Vercel Deployments -->
             <h3 style='color: #333; margin: 20px 0;'>⚡ Vercel Deployments</h3>
-            <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
+            <div id="vercel-container" style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
                 {"".join(get_vercel_card(dep, idx) for idx, dep in enumerate(vercel_deployments))}
             </div>
             
-            <!-- Hugging Face Spaces (나중에 표시) -->
+            <!-- Hugging Face Spaces -->
             <h3 style='color: #333; margin: 20px 0;'>🤗 Hugging Face Spaces</h3>
             <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
                 {"".join(get_space_card(space, idx) for idx, space in enumerate(user_spaces))}
             </div>
         </div>
+
+        <script>
+        // 좋아요 상태 로드
+        function loadLikes() {
+            const cards = document.querySelectorAll('.vercel-card');
+            cards.forEach(card => {
+                const cardId = card.id;
+                const likes = localStorage.getItem(cardId) || 0;
+                card.querySelector('.like-count').textContent = likes;
+                card.dataset.likes = likes;
+                updateLikeButton(card, likes > 0);
+            });
+            sortCards();
+        }
+        
+        // 좋아요 버튼 토글
+        function toggleLike(cardId) {
+            const card = document.getElementById(cardId);
+            const likeCount = parseInt(localStorage.getItem(cardId) || 0);
+            const newCount = likeCount > 0 ? 0 : 1;
+            
+            localStorage.setItem(cardId, newCount);
+            card.querySelector('.like-count').textContent = newCount;
+            card.dataset.likes = newCount;
+            updateLikeButton(card, newCount > 0);
+            
+            sortCards();
+        }
+        
+        // 좋아요 버튼 상태 업데이트
+        function updateLikeButton(card, isLiked) {
+            const button = card.querySelector('.like-button');
+            button.textContent = isLiked ? '❤️' : '🤍';
+        }
+        
+        // 카드 정렬
+        function sortCards() {
+            const container = document.getElementById('vercel-container');
+            const cards = Array.from(container.children);
+            
+            cards.sort((a, b) => {
+                return parseInt(b.dataset.likes) - parseInt(a.dataset.likes);
+            });
+            
+            cards.forEach(card => container.appendChild(card));
+        }
+        
+        // 페이지 로드 시 실행
+        document.addEventListener('DOMContentLoaded', loadLikes);
+        </script>
         """
 
         return html_content