v4.0.0: 회원·덱 API, 인증 UI, 프로필 및 레이아웃 통일

Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다.

Co-authored-by: Cursor <cursoragent@cursor.com>

integrations/example.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>UADECK API 연동 예제</title>
+        <style>
+            body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
+            input { width: 100%; padding: 0.5rem; margin: 0.5rem 0 1rem; box-sizing: border-box; }
+            button { padding: 0.5rem 1rem; cursor: pointer; }
+            pre { background: #f1f5f9; padding: 1rem; overflow: auto; font-size: 12px; border-radius: 8px; }
+            .card { display: flex; gap: 0.5rem; align-items: center; margin: 0.25rem 0; font-size: 13px; }
+            .card img { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; }
+        </style>
+    </head>
+    <body>
+        <h1>UADECK API 연동 예제</h1>
+        <p>공유 링크 또는 shareCode로 덱을 불러옵니다.</p>
+
+        <label>API Base URL</label>
+        <input type="text" id="baseUrl" value="/api/v1" />
+
+        <label>공유 링크 또는 코드</label>
+        <input type="text" id="shareInput" placeholder="https://uniare.sori.studio/d/x7Kp9m2Q 또는 x7Kp9m2Q" />
+
+        <button type="button" id="loadBtn">덱 불러오기</button>
+
+        <h2>결과</h2>
+        <pre id="jsonOut">—</pre>
+        <div id="cardList"></div>
+
+        <script src="./uadeck-deck-client.js"></script>
+        <script>
+            document.getElementById('loadBtn').addEventListener('click', async () => {
+                const baseUrl = document.getElementById('baseUrl').value.trim();
+                const input = document.getElementById('shareInput').value.trim();
+                const client = new UaDeckDeckClient({ baseUrl });
+
+                try {
+                    const deck = await client.fetchFromUrl(input);
+                    document.getElementById('jsonOut').textContent = JSON.stringify(deck, null, 2);
+                    document.getElementById('cardList').innerHTML = deck.cards
+                        .map(
+                            (c) => `
+                        <div class="card">
+                            <img src="${c.imageUrl}" alt="" onerror="this.style.display='none'" />
+                            <span>${c.number} ×${c.count}${c.key ? ' ★' : ''}</span>
+                        </div>`,
+                        )
+                        .join('');
+                } catch (err) {
+                    document.getElementById('jsonOut').textContent = 'Error: ' + err.message;
+                    document.getElementById('cardList').innerHTML = '';
+                }
+            });
+        </script>
+    </body>
+</html>