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() {