uniare.sori.studio/integrations/example.html

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>UNIARE 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>UNIARE 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>