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

script/loading.js

@@ -0,0 +1,4 @@
+        // 로딩스피너
+        document.addEventListener("DOMContentLoaded", (event) => {
+            document.getElementById("loading-screen").style.display = "none"; // 로딩 완료 후 숨김
+        });

script/navigation.js

@@ -0,0 +1,117 @@
+function redirectToHomeAndRefresh() {
+    localStorage.clear();
+    window.location.href = '/';
+}
+
+
+// 페이지 로드 시 네비게이션 생성 및 이벤트 핸들러 등록
+document.addEventListener('DOMContentLoaded', () => {
+    createNavigation();
+    setupEventListeners();
+});
+
+// 네비게이션 생성
+function createNavigation() {
+    const nav = document.createElement('nav');
+    nav.className = 'navigation';
+    nav.id = 'nav';
+    nav.innerHTML = `
+        <div>
+            <div class="mx-auto max-w-6xl px-4 py-4 sm:px-8 lg:max-w-7xl lg:px-12">
+                <div class="greetings">
+                    <div class="flex justify-between select-none">
+                        <h1 class="text-4xl text-red-600 font-extrabold cursor-pointer" onclick="redirectToHomeAndRefresh()">
+                            UNION ARENA
+                            <div style="color: black" id="customTitle">Deck Builder</div>
+                        </h1>
+                        <!-- <div class="menu" onclick="toggleMobileMenu()">
+                             <div class="hambergerIcon bg-black" id="hambergerIcon"></div>
+                         </div> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    document.body.prepend(nav); // body의 가장 첫 번째 자식으로 네비게이션 추가
+
+    // 오버레이 메뉴 추가
+    const overlayMenu = document.createElement('div');
+    overlayMenu.id = 'overlay-menu';
+    overlayMenu.className = 'fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 hidden';
+    overlayMenu.innerHTML = `
+        <div class="flex flex-col items-center justify-center h-full">
+            <div class="overlay-content bg-white p-6 rounded-lg shadow-lg">
+                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToCardSeries()">
+                    <span data-i18n="selectTitle"></span>
+                </div>
+                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToDeckHistory()">
+                    <span data-i18n="myDeckHistory"></span>
+                </div>
+                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToChangeLanguage()">
+                    Language
+                </div>
+                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToPreset()">
+                    <span data-i18n="metaDeck"></span>
+                </div>
+                <div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToMyCardsDatabase()">
+                    My Database
+                </div>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlayMenu); // body의 마지막 자식으로 오버레이 메뉴 추가
+}
+
+// 이벤트 핸들러 등록
+function setupEventListeners() {
+    // 필요한 경우 추가적인 이벤트 핸들러 등록
+}
+
+function redirectToHomeAndRefresh() {
+    const keysToRemove = Object.keys(localStorage).filter(key => key !== 'lang');
+    keysToRemove.forEach(key => localStorage.removeItem(key));
+    // localStorage.clear();
+    window.location.href = '/';
+}
+
+function toggleMobileMenu() {
+    const menuIcon = document.getElementById('hambergerIcon');
+    menuIcon.classList.toggle('open');
+    menuIcon.classList.toggle('bg-red-600');
+    const overlayMenu = document.getElementById("overlay-menu");
+    overlayMenu.classList.toggle("hidden");
+}
+
+function goToCardSeries() {
+    window.location.href = "index.html"; // 작품 선택 페이지로 이동
+    toggleMobileMenu();
+}
+
+function goToDeckHistory() {
+    window.location.href = "deckHistory.html"; // 덱 기록 페이지로 이동
+    toggleMobileMenu();
+}
+
+function goToChangeLanguage() {
+    // 언어 변경 페이지로 이동 (페이지가 없으면 기능 구현 필요)
+    toggleMobileMenu();
+}
+
+function goToPreset() {
+    window.location.href = "preset.html"; // 메타 덱 페이지로 이동
+    toggleMobileMenu();
+}
+
+function goToMyCardsDatabase() {
+    window.location.href = "myDatabase.html"; // 내 카드 데이터베이스 페이지로 이동
+    toggleMobileMenu();
+}
+
+
+
+// function toggleMobileMenu() {
+//     const menuIcon = document.getElementById('hambergerIcon');
+//     menuIcon.classList.toggle('open');
+//     menuIcon.classList.toggle('bg-red-600');
+// }
+