Update app.py

app.py

@@ -1,236 +1,175 @@
-"""
-Vibe Game Craft – NEW / BEST 탭을 ‘사이트 미러링’(iframe) 방식으로 보여주는 Gradio Space
-
-● Gradio 4.x 공용 API만 사용 – set_event_trigger 제거
-● Prev / Next 버튼으로 페이지 전환
-● os.getenv("SVR_TOKEN") 필수
-"""
-
-import os
-import time
-import json
-import requests
-import datetime
-import gradio as gr
-
-# ────────────────────────────────────────────────────────────────────────────────
+import os, time, json, datetime, requests, gradio as gr
+
+# ──────────────────────────────────────────────────────────
 # 1. Vercel API 설정
-VERCEL_API_TOKEN = os.getenv("SVR_TOKEN")          # ← 환경변수에서 읽음
+VERCEL_API_TOKEN = os.getenv("SVR_TOKEN")
+VERCEL_TEAM_ID   = os.getenv("VERCEL_TEAM_ID")  # 개인 계정이면 None
 if not VERCEL_API_TOKEN:
-    raise EnvironmentError("환경 변수 'SVR_TOKEN'이 설정되어 있지 않습니다!")
-VERCEL_API_URL  = "https://api.vercel.com/v9"
-HEADERS = {
-    "Authorization": f"Bearer {VERCEL_API_TOKEN}",
-    "Content-Type": "application/json",
-}
-
-# ────────────────────────────────────────────────────────────────────────────────
-# 2. 갤러리 설정
-BEST_GAMES_FILE = "best_games.json"
-GAMES_PER_PAGE  = 48
-
-# ────────────────────────────────────────────────────────────────────────────────
-# 3. BEST 탭 초기화 / 로드
-def initialize_best_games() -> None:
-    if not os.path.exists(BEST_GAMES_FILE):
-        sample = [
-            {
-                "title": "테트리스",
-                "description": "클래식 테트리스 게임",
-                "url": "https://tmkdop.vercel.app",
-                "timestamp": time.time(),
-            },
-            {
-                "title": "스네이크",
-                "description": "전통적인 스네이크 게임",
-                "url": "https://tmkdop.vercel.app",
-                "timestamp": time.time(),
-            },
-            {
-                "title": "팩맨",
-                "description": "고전 아케이드 게임",
-                "url": "https://tmkdop.vercel.app",
-                "timestamp": time.time(),
-            },
-        ]
-        json.dump(sample, open(BEST_GAMES_FILE, "w"), ensure_ascii=False, indent=2)
-
-def load_best_games() -> list:
+    raise EnvironmentError("SVR_TOKEN 환경변수를 설정하세요.")
+
+API_BASE = "https://api.vercel.com"
+HEADERS  = {"Authorization": f"Bearer {VERCEL_API_TOKEN}"}
+
+# ──────────────────────────────────────────────────────────
+# 2. BEST 탭 파일 / 상수
+BEST_FILE     = "best_games.json"
+CARDS_PER_PG  = 48
+
+def init_best():
+    if not os.path.exists(BEST_FILE):
+        json.dump([], open(BEST_FILE, "w"))
+
+def load_best():
     try:
-        return json.load(open(BEST_GAMES_FILE))
+        return json.load(open(BEST_FILE))
     except Exception:
         return []
 
-# ────────────────────────────────────────────────────────────────────────────────
-# 4. Vercel 최신 배포 가져오기
-def get_latest_deployments() -> list:
+# ──────────────────────────────────────────────────────────
+# 3. 모든 프로젝트 최신 배포 가져오기
+def fetch_deployments(limit=100):
     try:
-        resp = requests.get(
-            f"{VERCEL_API_URL}/deployments",
-            headers=HEADERS,
-            params={"limit": 100},
-            timeout=30,
-        )
-        resp.raise_for_status()
+        params = {"limit": limit}
+        if VERCEL_TEAM_ID:
+            params["teamId"] = VERCEL_TEAM_ID
+        r = requests.get(f"{API_BASE}/v13/deployments",
+                         headers=HEADERS, params=params, timeout=30)
+        r.raise_for_status()
+
         games = []
-        for d in resp.json().get("deployments", []):
+        for d in r.json().get("deployments", []):
             if d.get("state") != "READY":
                 continue
-            created_at = d.get("createdAt", time.time() * 1000)
-            ts = int(created_at / 1000) if isinstance(created_at, (int, float)) else int(
-                time.time()
-            )
-            games.append(
-                {
-                    "title": d.get("name", "게임"),
-                    "description": f"배포된 게임: {d.get('name')}",
-                    "url": f"https://{d.get('url')}",
-                    "timestamp": ts,
-                }
-            )
-        games.sort(key=lambda x: x["timestamp"], reverse=True)
-        return games
+            ts = int(d.get("createdAt", time.time()*1000) / 1000)
+            games.append({
+                "title"      : d.get("name", "(제목 없음)"),
+                "description": f"프로젝트: {d.get('name')}",
+                "url"        : f"https://{d.get('url')}",
+                "timestamp"  : ts,
+            })
+        return sorted(games, key=lambda x: x["timestamp"], reverse=True)
     except Exception as e:
         print("Vercel API 오류:", e)
         return []
 
-# ────────────────────────────────────────────────────────────────────────────────
-# 5. 페이지네이션
-def paginate(lst: list, page: int):
-    start = (page - 1) * GAMES_PER_PAGE
-    end   = start + GAMES_PER_PAGE
-    total = (len(lst) + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
-    return lst[start:end], total
+# ──────────────────────────────────────────────────────────
+def paginate(lst, page):
+    s = (page-1) * CARDS_PER_PG
+    e = s + CARDS_PER_PG
+    total = (len(lst) + CARDS_PER_PG - 1)//CARDS_PER_PG
+    return lst[s:e], total
 
-# ────────────────────────────────────────────────────────────────────────────────
-# 6. 갤러리 HTML (iframe 미러링)
-def generate_gallery_html(games: list, page: int, total_pages: int, tab_name: str) -> str:
-    if not games:
-        return "<div style='text-align:center;padding:60px;'>표시할 게임이 없습니다.</div>"
+# ──────────────────────────────────────────────────────────
+# 4. HTML 생성 (파스텔 스타일, 가로 100 %)
+def make_html(cards, page, total):
+    if not cards:
+        return "<div style='text-align:center;padding:80px;font-size:1.1rem;color:#555;'>표시할 배포가 없습니다.</div>"
 
     css = """
     <style>
-    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;margin-bottom:40px}
-    .item{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:.3s}
-    .item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.15)}
-    .hdr{padding:14px 18px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid #eee}
-    .ttl{margin:0;font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-    .meta{font-size:.85rem;color:#666;margin-top:4px}
-    .iframe-box{position:relative;width:100%;padding-top:60%;overflow:hidden}
-    .iframe-box iframe{position:absolute;top:0;left:0;width:142.857%;height:142.857%;
-                       transform:scale(.7);transform-origin:top left;border:0}
-    .footer{padding:10px 16px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);text-align:right}
-    .footer a{font-size:.85rem;font-weight:600;color:#2c5282;text-decoration:none}
-    .pg{display:flex;justify-content:center;gap:10px;margin-top:10px}
-    .pg button{border:1px solid #ddd;background:#fff;padding:6px 14px;border-radius:8px;cursor:pointer}
-    .pg button.active,.pg button:hover{background:#9c89b8;color:#fff;border-color:#9c89b8}
+    body{margin:0;padding:0;font-family:'Poppins',sans-serif;background:linear-gradient(135deg,#C5E8FF 0%,#FFD6E0 100%);}
+    .grid{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:60px}
+    .card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,.08);transition:.3s}
+    .card:hover{transform:translateY(-8px);box-shadow:0 25px 45px rgba(0,0,0,.12)}
+    .header{padding:24px 28px;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border-bottom:1px solid #eee}
+    .title{margin:0;font-size:1.25rem;font-weight:700;color:#333}
+    .date{font-size:.9rem;color:#777;margin-top:4px}
+    .frame{position:relative;width:100%;padding-top:56.25%;overflow:hidden}
+    .frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
+    .footer{padding:16px 28px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);text-align:right}
+    .link{font-size:.9rem;font-weight:600;color:#4a6dd8;text-decoration:none}
+    .pager{display:flex;justify-content:center;gap:16px;margin:20px 0}
+    .btn{border:none;background:#fff;padding:10px 24px;border-radius:12px;font-weight:600;
+         box-shadow:0 4px 12px rgba(0,0,0,.05);cursor:pointer;transition:.25s}
+    .btn:hover{background:#f1e8ff}
+    .btn:disabled{opacity:.4;cursor:default}
+    .count{font-size:.85rem;color:#555;text-align:center;margin-top:-4px}
     </style>
     """
+
     html = css + "<div class='grid'>"
-    for g in games:
-        date = datetime.datetime.fromtimestamp(g["timestamp"]).strftime("%Y-%m-%d")
+    for c in cards:
+        date = datetime.datetime.fromtimestamp(c["timestamp"]).strftime("%Y-%m-%d")
         html += f"""
-        <div class='item'>
-          <div class='hdr'>
-            <p class='ttl'>{g['title']}</p>
-            <div class='meta'>{date}</div>
+        <div class='card'>
+          <div class='header'>
+            <p class='title'>{c['title']}</p>
+            <p class='date'>{date}</p>
+          </div>
+          <div class='frame'>
+            <iframe src="{c['url']}" loading="lazy"
+                allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe>
+          </div>
+          <div class='footer'>
+            <a href="{c['url']}" target="_blank" class='link'>원본 사이트 ↗</a>
           </div>
-          <div class='iframe-box'><iframe src="{g['url']}" loading="lazy"
-            allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe></div>
-          <div class='footer'><a href="{g['url']}" target="_blank">원본 사이트 열기 ↗</a></div>
         </div>
         """
     html += "</div>"
-    # 페이지 번호(읽기 전용) – Prev/Next 는 Gradio에서 처리
-    html += f"<div style='text-align:center;margin-top:4px;font-size:.85rem;color:#666;'>Page {page} / {total_pages}</div>"
+    html += f"<p class='count'>Page {page} / {total}</p>"
     return html
 
-# ────────────────────────────────────────────────────────────────────────────────
-# 7. Gradio UI
-def create_gallery_interface():
-    initialize_best_games()
+# ──────────────────────────────────────────────────────────
+def build_app():
+    init_best()
 
-    with gr.Blocks(title="Vibe Game Craft") as demo:
-        gr.HTML("<h1 style='text-align:center;'>🎮 Vibe Game Craft</h1>")
+    with gr.Blocks(title="Vibe Game Craft", css="body{overflow-x:hidden;}") as demo:
+        gr.Markdown("<h1 style='text-align:center;padding:30px 0;color:#333;'>🎮 Vibe Game Craft</h1>")
 
         with gr.Row():
-            new_btn  = gr.Button("NEW", elem_id="new-btn")
-            best_btn = gr.Button("BEST", elem_id="best-btn")
-            refresh  = gr.Button("🔄 새로고침")
-            prev_btn = gr.Button("⬅️ Prev")
-            next_btn = gr.Button("Next ➡️")
-
-        # 상태
-        current_tab   = gr.State("new")   # "new" or "best"
-        new_page      = gr.State(1)
-        best_page     = gr.State(1)
-        gallery_html  = gr.HTML()
-
-        # NEW / BEST 렌더 함수
-        def render_new(page=1):
-            games, total = paginate(get_latest_deployments(), page)
-            return generate_gallery_html(games, page, total, "new"), "new", page
-
-        def render_best(page=1):
-            games, total = paginate(load_best_games(), page)
-            return generate_gallery_html(games, page, total, "best"), "best", page
-
-        # 버튼 이벤트
-        new_btn.click(fn=render_new,
-                      outputs=[gallery_html, current_tab, new_page])
-
-        best_btn.click(fn=render_best,
-                       outputs=[gallery_html, current_tab, best_page])
-
-        def refresh_gallery(tab, p_new, p_best):
-            if tab == "new":
-                return render_new(p_new)[0]
-            return render_best(p_best)[0]
-
-        refresh.click(fn=refresh_gallery,
-                      inputs=[current_tab, new_page, best_page],
-                      outputs=[gallery_html])
-
-        # Prev / Next
-        def prev_page(tab, p_new, p_best):
-            if tab == "new":
-                p_new = max(1, p_new - 1)
-                html, _, _ = render_new(p_new)
-                return html, p_new, p_best
-            p_best = max(1, p_best - 1)
-            html, _, _ = render_best(p_best)
-            return html, p_new, p_best
-
-        def next_page(tab, p_new, p_best):
-            if tab == "new":
-                games_total = len(get_latest_deployments())
-                max_pages   = (games_total + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
-                p_new = min(max_pages, p_new + 1)
-                html, _, _ = render_new(p_new)
-                return html, p_new, p_best
-            games_total = len(load_best_games())
-            max_pages   = (games_total + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
-            p_best = min(max_pages, p_best + 1)
-            html, _, _ = render_best(p_best)
-            return html, p_new, p_best
-
-        prev_btn.click(fn=prev_page,
-                       inputs=[current_tab, new_page, best_page],
-                       outputs=[gallery_html, new_page, best_page])
-
-        next_btn.click(fn=next_page,
-                       inputs=[current_tab, new_page, best_page],
-                       outputs=[gallery_html, new_page, best_page])
-
-        # 초기 NEW 탭 표시
-        demo.load(fn=render_new,
-                  outputs=[gallery_html, current_tab, new_page])
+            btn_new   = gr.Button("NEW", size="sm")
+            btn_best  = gr.Button("BEST", size="sm")
+            btn_prev  = gr.Button("⬅️ Prev", size="sm")
+            btn_next  = gr.Button("Next ➡️", size="sm")
+            btn_ref   = gr.Button("🔄 Reload", size="sm")
+
+        tab   = gr.State("new")
+        np    = gr.State(1)
+        bp    = gr.State(1)
+        out   = gr.HTML()
+
+        # 콜백  ────────────────────────────────────────────
+        def show_new(p=1):
+            cards, total = paginate(fetch_deployments(), p)
+            return make_html(cards, p, total), "new", p
+
+        def show_best(p=1):
+            cards, total = paginate(load_best(), p)
+            return make_html(cards, p, total), "best", p
+
+        def prev(t, cp_n, cp_b):
+            if t=="new":
+                cp_n = max(1, cp_n-1); html, _,_ = show_new(cp_n)
+                return html, cp_n, cp_b
+            cp_b = max(1, cp_b-1); html, _,_ = show_best(cp_b)
+            return html, cp_n, cp_b
+
+        def nxt(t, cp_n, cp_b):
+            if t=="new":
+                max_pg = (len(fetch_deployments())+CARDS_PER_PG-1)//CARDS_PER_PG
+                cp_n = min(max_pg, cp_n+1); html, _,_ = show_new(cp_n)
+                return html, cp_n, cp_b
+            max_pg = (len(load_best())+CARDS_PER_PG-1)//CARDS_PER_PG
+            cp_b = min(max_pg, cp_b+1); html, _,_ = show_best(cp_b)
+            return html, cp_n, cp_b
+
+        def refresh(t, cp_n, cp_b):
+            return show_new(cp_n)[0] if t=="new" else show_best(cp_b)[0]
+
+        # ⦿ 버튼 연결
+        btn_new.click(show_new,  outputs=[out, tab, np])
+        btn_best.click(show_best, outputs=[out, tab, bp])
+        btn_prev.click(prev, inputs=[tab, np, bp], outputs=[out, np, bp])
+        btn_next.click(nxt, inputs=[tab, np, bp], outputs=[out, np, bp])
+        btn_ref.click(refresh, inputs=[tab, np, bp], outputs=[out])
+
+        # 초기 로드
+        demo.load(show_new, outputs=[out, tab, np])
 
     return demo
 
-# ────────────────────────────────────────────────────────────────────────────────
-# 8. 전역 app (Spaces 자동 감지)
-app = create_gallery_interface()
+# ──────────────────────────────────────────────────────────
+app = build_app()
 
 if __name__ == "__main__":
     app.launch()