[260111] 프로젝트 이전 및 초기화

2026-01-11 21:02:18 +09:00
commit 4564805a2b
8874 changed files with 95182 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="style/output.css" rel="stylesheet">
+  <script src="/script/navigation.js"></script>
+  <title>UADECK V2</title>
+  <meta property="og:type" content="article">
+  <meta property="og:title" content="유니온 아레나 덱빌더">
+  <meta property="og:description"
+    content="자신만의 덱을 만들고, 다른 플레이어들과 공유해보세요. 아이디어를 조합하고, 당신만의 전략으로 아레나를 완성하세요.">
+  <meta property="og:image" content="https://uniare.zenncloud.com/images/logo_unionarena.png">
+  <meta property="og:url" content="https://uniare.zenncloud.com/">
+
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="유니온 아레나 덱빌더">
+  <meta name="twitter:description"
+    content="자신만의 덱을 만들고, 다른 플레이어들과 공유해보세요. 아이디어를 조합하고, 당신만의 전략으로 아레나를 완성하세요.">
+  <meta name="twitter:image" content="https://uniare.zenncloud.com/images/logo_unionarena.png">
+</head>
+
+<body class="bg-white">
+  <!-- 언어 선택 버튼 추가 -->
+  <div class="language-selector flex justify-end gap-2 p-4">
+    <button type="button" onclick="changeLanguage('ko')"
+      class="rounded px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 cursor-pointer"
+      id="lang-ko">
+      한국어
+    </button>
+    <button type="button" onclick="changeLanguage('ja')"
+      class="rounded px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 cursor-pointer"
+      id="lang-ja">
+      日本語
+    </button>
+    <button type="button" onclick="changeLanguage('en')"
+      class="rounded px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 cursor-pointer"
+      id="lang-en">
+      English
+    </button>
+  </div>
+  <div id="app" class="card-series-list">
+    <div class="w-full px-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mx-auto mb-12 pt-4 pb-12">
+    </div>
+  </div>
+  <script type="module">
+    async function loadSeriesList() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const lang = urlParams.get('lang') || 'ko';
+
+      try {
+        const response = await fetch(`./i18n/translations.${lang}.json`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const translations = await response.json();
+
+        if (!translations || !translations.series || Object.keys(translations.series).length === 0) {
+          throw new Error(`No series data found for language: ${lang}`);
+        }
+
+        const seriesTitles = translations.series;
+        const container = document.querySelector('.w-full.px-8.grid');
+        container.innerHTML = ''; // 기존 내용 초기화
+
+        Object.entries(seriesTitles).forEach(([key, name]) => {
+          const button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 break-all text-balance cursor-pointer';
+          button.textContent = name;
+          button.id = `series-${key}`;
+          button.addEventListener('click', () => {
+            const encodedSeriesKey = encodeURIComponent(key);
+            const encodedSeriesName = encodeURIComponent(name);
+            window.location.href = `cardList.html?series=${encodedSeriesKey}&seriesName=${encodedSeriesName}&lang=${lang}`; // lang 파라미터 추가
+          });
+          container.appendChild(button);
+        });
+
+        // 현재 선택된 언어 버튼 스타일 업데이트
+        document.querySelectorAll('.language-selector button').forEach(btn => {
+          btn.classList.remove('bg-gray-100');
+        });
+        document.getElementById(`lang-${lang}`).classList.add('bg-gray-100');
+
+      } catch (error) {
+        console.error('Error loading series list:', error);
+        const container = document.querySelector('.w-full.px-8.grid');
+        container.innerHTML = `<div class="col-span-full text-center text-red-500">
+          ${error.message || `Failed to load content for language: ${lang}`}
+        </div>`;
+      }
+    }
+
+    // 언어 변경 함수 수정
+    window.changeLanguage = function (lang) {
+      localStorage.setItem('lang', lang);
+      const currentUrl = new URL(window.location.href);
+      currentUrl.searchParams.set('lang', lang);
+      window.history.pushState({}, '', currentUrl.toString());
+      loadSeriesList();
+    }
+
+    // 브라우저 뒤로가기/앞으로가기 처리
+    window.addEventListener('popstate', () => {
+      loadSeriesList();
+    });
+
+    // 초기 로드
+    loadSeriesList();
+  </script>
+</body>
+
+</html>