[260112]

- 코드 정리
- 클래스명 정리
- Bolt 테스트 모드 추가
- Nova 모드 추가

script.js

@@ -4,7 +4,7 @@ async function checkStatus() {
 
   cards.forEach(async (card) => {
     const url = card.getAttribute("data-url");
-    const dot = card.querySelector(".bolt.tr");
+    const dot = card.querySelector(".card__decor.card__decor--tr");
 
     try {
       const controller = new AbortController();
@@ -29,13 +29,30 @@ async function checkStatus() {
 checkStatus();
 setInterval(checkStatus, 300000);
 
+// 🔴 테스트 ON
+// const TEST_ONLY_SECOND_CARD = true;
+// 🟢 테스트 OFF
+const TEST_ONLY_SECOND_CARD = false;
+
 // bolt animation
 function startBoltAction() {
-  const allBolts = document.querySelectorAll(".bolt, .header-bolt");
+  let allBolts = [];
+
+  if (TEST_ONLY_SECOND_CARD) {
+    // 🔧 2번째 카드만 선택 (0-based index)
+    const secondCard = document.querySelectorAll(".card")[1];
+    if (!secondCard) return;
+
+    allBolts = secondCard.querySelectorAll(".card__decor");
+  } else {
+    // 🔹 전체 카드 대상
+    allBolts = document.querySelectorAll(".card__decor");
+  }
+
   if (allBolts.length === 0) return;
 
   const availableBolts = Array.from(allBolts).filter(
-    (bolt) => !bolt.classList.contains("bolt-acting")
+    (bolt) => !bolt.classList.contains("card__decor-acting")
   );
 
   if (availableBolts.length > 0) {
@@ -43,20 +60,17 @@ function startBoltAction() {
       availableBolts[Math.floor(Math.random() * availableBolts.length)];
 
     const baseRot =
-      randomBolt.getAttribute("data-rotate") ||
-      randomBolt.style.getPropertyValue("--r") ||
-      "0";
+      randomBolt.style.getPropertyValue("--r") || "0deg";
 
-    randomBolt.style.setProperty(
-      "--r",
-      baseRot.toString().replace("deg", "") + "deg"
-    );
+    randomBolt.style.setProperty("--r", baseRot);
 
-    randomBolt.classList.add("bolt-acting");
+    const BOLT_ANIMATION_DURATION = 16000; // CSS와 반드시 일치
+
+    randomBolt.classList.add("card__decor-acting");
 
     setTimeout(() => {
-      randomBolt.classList.remove("bolt-acting");
-    }, 8100);
+      randomBolt.classList.remove("card__decor-acting");
+    }, BOLT_ANIMATION_DURATION);
   }
 
   const nextInterval = Math.random() * 4000 + 3000;
@@ -66,3 +80,30 @@ function startBoltAction() {
 window.addEventListener("load", () => {
   setTimeout(startBoltAction, 2000);
 });
+
+// 나사 랜덤 각도 부연
+document.querySelectorAll('.card').forEach((card, cardIndex) => {
+  card.querySelectorAll('.card__decor').forEach((decor, decorIndex) => {
+
+    // -30 ~ 150 정도가 나사 느낌 제일 안정적
+    const angle = Math.floor(Math.random() * 180) - 30;
+
+    decor.style.setProperty('--r', `${angle}deg`);
+  });
+});
+
+window.addEventListener('keydown', (e) => {
+  const isMac = navigator.platform.toUpperCase().includes('MAC');
+
+  if (
+    isMac &&
+    e.metaKey &&
+    e.shiftKey &&
+    e.code === 'KeyD' &&
+    !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)
+  ) {
+    e.preventDefault();
+    document.body.classList.toggle('is-nova');
+  }
+});
+