diff --git a/cardList.html b/cardList.html index 959f2b2..bdb5d59 100644 --- a/cardList.html +++ b/cardList.html @@ -465,30 +465,60 @@ if (searchInput && t.searchPlaceholder) searchInput.placeholder = t.searchPlaceholder; } - function getCardTotal(cardNumber) { - return cardList.filter((c) => c.Number === cardNumber).reduce((s, c) => s + c.count, 0); - } - // 전역 핸들러 window.handleCount = function (imgSrc, delta, event) { event.stopPropagation(); const card = cardList.find((c) => c.imgSrc === imgSrc); if (!card) return; - let didChange = false; - const currentTotal = getCardTotal(card.Number); + // 1. 데이터 업데이트 + const currentTotal = cardList.filter((c) => c.Number === card.Number).reduce((s, c) => s + c.count, 0); if (delta > 0 && currentTotal < (card.maxCount || 4)) { card.count++; - didChange = true; } else if (delta < 0 && card.count > 0) { card.count--; if (card.count === 0) card.key = false; - didChange = true; } - if (!didChange) return; + // 2. UI 업데이트 + const container = document.querySelector(`.cardContainer[data-imgsrc="${imgSrc}"]`); + if (container) { + const minusBtn = container.querySelector('.minusBtn'); + const plusBtn = container.querySelector('.plusBtn'); + const countSpan = container.querySelector('.countText'); + const keyBtn = container.querySelector('.keyBtn'); // 클래스로 직접 참조 + + if (countSpan) countSpan.textContent = card.count; + + // 마이너스 버튼 제어 + if (minusBtn) { + if (card.count > 0) { + minusBtn.classList.remove('invisible'); + minusBtn.classList.add('visible'); + } else { + minusBtn.classList.remove('visible'); + minusBtn.classList.add('invisible'); + } + } + + // 플러스 버튼 제어 (isMax 결과에 따라 즉시 반영) + if (plusBtn) { + if (isMax(card)) { + plusBtn.classList.remove('visible'); + plusBtn.classList.add('invisible'); + } else { + plusBtn.classList.remove('invisible'); + plusBtn.classList.add('visible'); + } + } + + // 키 버튼 상태 업데이트 + if (keyBtn) { + keyBtn.className = `keyBtn w-full py-1 rounded text-[9px] lg:text-[10px] font-bold border transition-all ${card.key && card.count > 0 ? 'bg-indigo-600 border-indigo-600 text-white shadow-md' : 'bg-white border-slate-200 text-slate-400'}`; + } + } + syncToStorageAndCounters(); - updateCardList(); }; window.handleKey = function (imgSrc, event) { @@ -503,12 +533,20 @@ card.key = true; } + const container = document.querySelector(`.cardContainer[data-imgsrc="${imgSrc}"]`); + if (container) { + // 특정 클래스(.keyBtn)를 가진 요소를 정확히 찾아 변경 + const keyBtn = container.querySelector('.keyBtn'); + if (keyBtn) { + keyBtn.className = `keyBtn w-full py-1 rounded text-[9px] lg:text-[10px] font-bold border transition-all ${card.key && card.count > 0 ? 'bg-indigo-600 border-indigo-600 text-white shadow-md' : 'bg-white border-slate-200 text-slate-400'}`; + } + } + syncToStorageAndCounters(); - updateCardList(); }; function isMax(card) { - return getCardTotal(card.Number) >= (card.maxCount || 4); + return cardList.filter((c) => c.Number === card.Number).reduce((s, c) => s + c.count, 0) >= (card.maxCount || 4); } function updateCardList() {