"링크가 안 눌려요!" - 이벤트 버블링으로 인한 링크 클릭 문제 해결하기

const initElements = () => {
  // ❌ 문제: 모든 [data-category] 요소를 선택
  elements.categoryTabs = document.querySelectorAll('[data-category]');
  elements.subcategoryTabs = document.querySelectorAll('[data-subcategory]');
};

const tabs = {
  initCategoryTabs: () => {
    elements.categoryTabs.forEach(tab => {
      tab.addEventListener('click', (e) => {
        e.preventDefault();  // 👈 기본 동작 차단!
        const category = tab.getAttribute('data-category');
        tabs.selectCategory(category);
      });
    });
  }
};

// 선택되는 요소들:
const selectedElements = [
  <button class="category-tab" data-category="all">전체</button>,     // ✅ 의도한 대상
  <button class="category-tab" data-category="guides">가이드</button>, // ✅ 의도한 대상
  <button class="category-tab" data-category="react">React</button>,   // ✅ 의도한 대상
  <li class="category-post-item" data-category="guides">...</li>,     // ❌ 의도하지 않은 대상!
  <li class="category-post-item" data-category="react">...</li>,      // ❌ 의도하지 않은 대상!
  <li class="category-post-item" data-category="guides">...</li>,     // ❌ 의도하지 않은 대상!
  // ... 수십 개의 리스트 아이템들
];

// 캡처링 단계에서 링크 클릭 감지
document.addEventListener('click', (e) => {
  const link = e.target.closest('.category-post-link');
  if (link) {
    console.log('🔗 링크 클릭됨!', {
      href: link.href,
      target: e.target,
      defaultPrevented: e.defaultPrevented  // preventDefault 호출 여부
    });
  }
}, true);  // true = 캡처링 단계에서 실행

// 실제로 선택된 탭 요소들을 확인
const tabs = document.querySelectorAll('[data-category]');
console.log('선택된 탭 개수:', tabs.length);
console.log('선택된 요소들:', tabs);

// 이벤트가 어떤 경로로 전파되는지 확인
document.addEventListener('click', (e) => {
  console.log('이벤트 경로:', e.composedPath());
}, true);

const initElements = () => {
  // ✅ 해결: .category-tab 클래스가 있는 요소만 선택
  elements.categoryTabs = document.querySelectorAll('.category-tab[data-category]');
  elements.subcategoryTabs = document.querySelectorAll('.category-tab[data-subcategory]');
};

// ❌ 너무 포괄적 (서울시에 사는 모든 사람)
const elements = document.querySelectorAll('[data-category]');

// ✅ 충분히 구체적 (서울시 강남구 테헤란로에 사는 사람)
const elements = document.querySelectorAll('.category-tab[data-category]');

// ❌ 나쁜 예: 속성만으로 선택
const buttons = document.querySelectorAll('[data-action]');
// 문제: data-action을 가진 모든 요소 선택 (button, div, span, li 등)

// ✅ 좋은 예: 클래스 + 속성 조합
const buttons = document.querySelectorAll('.action-btn[data-action]');
// 장점: action-btn 클래스를 가진 요소만 선택

// ✅ 좋은 예: 특정 컨테이너 내에서만 선택
const buttons = document.querySelectorAll('.toolbar [data-action]');
// 장점: toolbar 내부의 요소만 선택

// ✅ 좋은 예: 태그 + 클래스 + 속성
const buttons = document.querySelectorAll('button.action-btn[data-action]');
// 장점: 가장 구체적 (하지만 과도하게 구체적일 필요는 없음)

const initElements = () => {
  elements.categoryTabs = document.querySelectorAll('.category-tab[data-category]');

  // 디버그 모드에서 검증
  if (CONFIG.DEBUG) {
    console.group('📋 Elements Initialized');
    console.log('탭 개수:', elements.categoryTabs.length);

    // 각 요소 확인
    elements.categoryTabs.forEach((tab, index) => {
      console.log(`Tab ${index}:`, {
        className: tab.className,
        tagName: tab.tagName,
        dataset: tab.dataset
      });
    });

    console.groupEnd();
  }
};

// ❌ 기존 방식: 각 요소에 리스너 등록
elements.categoryTabs.forEach(tab => {
  tab.addEventListener('click', handleTabClick);
});

// ✅ 이벤트 위임: 컨테이너에 하나의 리스너만 등록
document.querySelector('.category-tabs').addEventListener('click', (e) => {
  // 정확히 버튼 클릭만 처리
  const tab = e.target.closest('.category-tab');
  if (!tab) return;  // 버튼이 아니면 무시

  e.preventDefault();
  const category = tab.getAttribute('data-category');
  tabs.selectCategory(category);
});

// 캡처링 단계에서 이벤트 경로 확인
document.addEventListener('click', (e) => {
  console.log('이벤트 경로:', e.composedPath().map(el => {
    if (el.tagName) {
      return `<${el.tagName.toLowerCase()}${el.className ? '.' + el.className.split(' ').join('.') : ''}>`;
    }
    return el;
  }));
}, true);

document.addEventListener('click', (e) => {
  console.log('클릭된 요소 (target):', e.target);
  console.log('현재 핸들러의 요소 (currentTarget):', e.currentTarget);
  console.log('preventDefault 호출됨?', e.defaultPrevented);
}, true);

// 예시
<div class="container">  👈 currentTarget (리스너가 여기 등록됨)
  <button>
    <span>클릭</span>  👈 target (실제로 클릭한 요소)
  </button>
</div>

// 콘솔에서 직접 실행
const tabs1 = document.querySelectorAll('[data-category]');
const tabs2 = document.querySelectorAll('.category-tab[data-category]');

console.log('모든 data-category:', tabs1.length);
console.log('탭 버튼만:', tabs2.length);

// 차이점 확인
console.log('차이:', tabs1.length - tabs2.length, '개');

// 각 요소 확인
console.group('tabs1 (모든 요소)');
tabs1.forEach(el => console.log(el.className, el.tagName));
console.groupEnd();

console.group('tabs2 (버튼만)');
tabs2.forEach(el => console.log(el.className, el.tagName));
console.groupEnd();

// 이벤트 버블링 중지
element.addEventListener('click', (e) => {
  e.stopPropagation();  // 부모로 버블링되지 않음
  // 처리 로직
});

// ❌ 위험: 너무 포괄적
const buttons = document.querySelectorAll('[data-action]');

// ✅ 안전: 클래스와 조합
const buttons = document.querySelectorAll('.btn[data-action]');

// ❌ 약함
const tabs = document.querySelectorAll('[data-category]');

// ✅ 강함
const tabs = document.querySelectorAll('.category-tab[data-category]');

// ✅ 매우 강함 (필요시)
const tabs = document.querySelectorAll('.tabs-container > .category-tab[data-category]');

const initElements = () => {
  elements.tabs = document.querySelectorAll('.category-tab[data-category]');

  // 프로덕션에서도 간단한 검증
  if (elements.tabs.length === 0) {
    console.warn('⚠️  경고: 카테고리 탭을 찾을 수 없습니다.');
  }

  // 개발 중에는 상세 검증
  if (CONFIG.DEBUG) {
    console.log('탭 개수:', elements.tabs.length);
    elements.tabs.forEach((tab, i) => {
      console.log(`Tab ${i}:`, tab.className, tab.tagName);
    });
  }
};

// 이벤트 위임으로 활용하기
document.querySelector('.category-tabs').addEventListener('click', (e) => {
  const tab = e.target.closest('.category-tab');
  if (!tab) return;

  // 버튼만 처리
  handleTabClick(tab);
});

// 디버깅을 위한 헬퍼 함수
const debugEventPath = (e) => {
  console.group('🔍 Event Debug');
  console.log('Target:', e.target);
  console.log('CurrentTarget:', e.currentTarget);
  console.log('DefaultPrevented:', e.defaultPrevented);
  console.log('Path:', e.composedPath().slice(0, 5));
  console.groupEnd();
};

// 사용
element.addEventListener('click', (e) => {
  if (CONFIG.DEBUG) debugEventPath(e);
  // 처리 로직
});