// 1단계: HTMLElement를 상속받는 클래스 정의
class UserCard extends HTMLElement {
  constructor() {
    super(); // 반드시 super()를 먼저 호출해야 해!
    
    // 컴포넌트가 생성될 때 실행되는 코드
    console.log('UserCard 컴포넌트가 생성되었어요!');
  }
  
  // 컴포넌트가 DOM에 추가될 때 호출
  connectedCallback() {
    // 여기서 HTML 구조를 만들어줘
    this.innerHTML = `
      <div class="user-card">
        <h3>사용자 이름</h3>
        <p>사용자 설명이 들어갑니다.</p>
      </div>
    `;
  }
}

// 2단계: 커스텀 엘리먼트 등록
customElements.define('user-card', UserCard);

// 이제 HTML에서 이렇게 사용할 수 있어!
// <user-card></user-card>

class UserCard extends HTMLElement {
  // 감시할 속성 목록 정의
  static get observedAttributes() {
    return ['name', 'email', 'avatar'];
  }
  
  constructor() {
    super();
    this._name = '';
    this._email = '';
    this._avatar = '';
  }
  
  // 속성이 변경될 때마다 호출됨
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`${name} 속성이 ${oldValue}에서 ${newValue}로 변경됨`);
    
    switch(name) {
      case 'name':
        this._name = newValue;
        break;
      case 'email':
        this._email = newValue;
        break;
      case 'avatar':
        this._avatar = newValue;
        break;
    }
    
    this.render(); // 화면 업데이트
  }
  
  connectedCallback() {
    this.render();
  }
  
  render() {
    this.innerHTML = `
      <div class="user-card">
        <img src="${this._avatar}" alt="${this._name}">
        <h3>${this._name}</h3>
        <p>${this._email}</p>
      </div>
    `;
  }
}

customElements.define('user-card', UserCard);

// HTML에서 이렇게 사용!
// <user-card 
//   name="김개발" 
//   email="dev@example.com"
//   avatar="profile.jpg">
// </user-card>

class StyledButton extends HTMLElement {
  constructor() {
    super();
    
    // 섀도우 루트 생성 (mode: 'open' 또는 'closed')
    this.attachShadow({ mode: 'open' });
    
    // 섀도우 DOM 내부에 HTML과 스타일 추가
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <button class="btn">
        <slot>클릭하세요</slot>
      </button>
    `;
  }
}

customElements.define('styled-button', StyledButton);

class ProductCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <div class="card">
        <div class="header">
          <slot name="title">제품 이름</slot>
        </div>
        <div class="image">
          <slot name="image"></slot>
        </div>
        <div class="description">
          <slot name="description">제품 설명</slot>
        </div>
        <div class="footer">
          <slot name="price">가격</slot>
          <slot name="action">버튼</slot>
        </div>
      </div>
    `;
  }
}

customElements.define('product-card', ProductCard);

// HTML에서 이렇게 사용!
// <product-card>
//   <span slot="title">멋진 제품</span>
//   <img slot="image" src="product.jpg">
//   <p slot="description">이 제품은 정말 좋아요!</p>
//   <span slot="price">29,900원</span>
//   <button slot="action">구매하기</button>
// </product-card>

// HTML 파일에 템플릿 정의
<template id="user-card-template">
  <style>
    .user-card {
      display: flex;
      align-items: center;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin: 10px 0;
    }
    
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 15px;
    }
    
    .info h3 {
      margin: 0 0 5px 0;
      color: #333;
    }
    
    .info p {
      margin: 0;
      color: #666;
      font-size: 14px;
    }
  </style>
  
  <div class="user-card">
    <img class="avatar" src="" alt="">
    <div class="info">
      <h3 class="name"></h3>
      <p class="email"></p>
    </div>
  </div>
</template>

// JavaScript에서 템플릿 사용
class UserCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    // 템플릿 가져오기
    const template = document.getElementById('user-card-template');
    const content = template.content.cloneNode(true);
    
    // 섀도우 DOM에 추가
    this.shadowRoot.appendChild(content);
  }
  
  connectedCallback() {
    // 속성값으로 내용 업데이트
    const name = this.getAttribute('name') || '이름 없음';
    const email = this.getAttribute('email') || 'email@example.com';
    const avatar = this.getAttribute('avatar') || 'default-avatar.png';
    
    this.shadowRoot.querySelector('.name').textContent = name;
    this.shadowRoot.querySelector('.email').textContent = email;
    this.shadowRoot.querySelector('.avatar').src = avatar;
    this.shadowRoot.querySelector('.avatar').alt = name;
  }
}

customElements.define('user-card', UserCard);

// 부모 컴포넌트에서
<user-profile 
  name="김개발" 
  role="프론트엔드 개발자"
  level="5">
</user-profile>

// 자식 컴포넌트에서 받기
class UserProfile extends HTMLElement {
  static get observedAttributes() {
    return ['name', 'role', 'level'];
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    // 속성이 변경될 때마다 자동으로 호출됨
    this.render();
  }
}

// 자식 컴포넌트에서 이벤트 발생
class LikeButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <button id="likeBtn">❤️ 좋아요</button>
    `;
    
    this.shadowRoot.getElementById('likeBtn').addEventListener('click', () => {
      // 커스텀 이벤트 발생!
      this.dispatchEvent(new CustomEvent('like-clicked', {
        detail: { 
          timestamp: Date.now(),
          message: '좋아요를 눌렀어요!'
        },
        bubbles: true,    // 이벤트 버블링 허용
        composed: true    // 섀도우 DOM 경계를 넘어 전파
      }));
    });
  }
}

customElements.define('like-button', LikeButton);

// 부모에서 이벤트 수신
const likeBtn = document.querySelector('like-button');
likeBtn.addEventListener('like-clicked', (e) => {
  console.log('좋아요 이벤트 받음!', e.detail);
});

// 간단한 상태 관리 시스템
class StateManager {
  constructor() {
    this.state = {};
    this.listeners = {};
  }
  
  // 상태 설정
  setState(key, value) {
    this.state[key] = value;
    this.notify(key, value);
  }
  
  // 상태 가져오기
  getState(key) {
    return this.state[key];
  }
  
  // 변경 감지 등록
  subscribe(key, callback) {
    if (!this.listeners[key]) {
      this.listeners[key] = [];
    }
    this.listeners[key].push(callback);
    
    // 구독 취소 함수 반환
    return () => {
      this.listeners[key] = this.listeners[key].filter(cb => cb !== callback);
    };
  }
  
  // 리스너들에게 알림
  notify(key, value) {
    if (this.listeners[key]) {
      this.listeners[key].forEach(callback => callback(value));
    }
  }
}

// 전역 상태 관리자 생성
const appState = new StateManager();

// 컴포넌트에서 사용
class UserCounter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    // 초기 렌더링
    this.render();
    
    // 상태 변경 구독
    this.unsubscribe = appState.subscribe('userCount', (count) => {
      this.render();
    });
  }
  
  disconnectedCallback() {
    // 컴포넌트 제거 시 구독 취소
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }
  
  render() {
    const count = appState.getState('userCount') || 0;
    this.shadowRoot.innerHTML = `
      <div>현재 사용자: ${count}명</div>
    `;
  }
}

customElements.define('user-counter', UserCounter);

// 어디서든 상태 업데이트 가능
appState.setState('userCount', 42);

class ThemedButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <button>
        <slot>버튼</slot>
      </button>
    `;
  }
}

customElements.define('themed-button', ThemedButton);

// HTML/CSS에서 테마 커스터마이징
// <style>
//   .primary-theme {
//     --button-bg: #667eea;
//     --button-hover-bg: #5568d3;
//   }
//   
//   .danger-theme {
//     --button-bg: #f44336;
//     --button-hover-bg: #d32f2f;
//   }
//   
//   .custom-theme {
//     --button-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
//     --button-padding: 15px 30px;
//     --button-radius: 25px;
//   }
// </style>
//
// <themed-button class="primary-theme">기본 버튼</themed-button>
// <themed-button class="danger-theme">삭제</themed-button>
// <themed-button class="custom-theme">특별한 버튼</themed-button>

class SmartCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <slot></slot>
    `;
  }
}

customElements.define('smart-card', SmartCard);

class AdvancedCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <div class="card">
        <div class="header" part="header">
          <slot name="header"></slot>
        </div>
        <div class="content" part="content">
          <slot></slot>
        </div>
      </div>
    `;
  }
}

customElements.define('advanced-card', AdvancedCard);

// 외부 CSS에서 part 스타일링
// advanced-card::part(header) {
//   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
//   color: white;
// }

class OptimizedComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this._initialized = false;
  }
  
  static get observedAttributes() {
    return ['title', 'count'];
  }
  
  connectedCallback() {
    if (!this._initialized) {
      this.render();
      this._initialized = true;
    }
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    // 초기화 전이거나 값이 실제로 변경되지 않았으면 무시
    if (!this._initialized || oldValue === newValue) return;
    
    // 변경된 부분만 업데이트
    switch(name) {
      case 'title':
        this.updateTitle(newValue);
        break;
      case 'count':
        this.updateCount(newValue);
        break;
    }
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <div class="container">
        <div class="title">${this.getAttribute('title') || '제목'}</div>
        <div class="count">카운트: ${this.getAttribute('count') || '0'}</div>
      </div>
    `;
  }
  
  // 부분 업데이트 메서드
  updateTitle(title) {
    const titleEl = this.shadowRoot.querySelector('.title');
    if (titleEl) titleEl.textContent = title;
  }
  
  updateCount(count) {
    const countEl = this.shadowRoot.querySelector('.count');
    if (countEl) countEl.textContent = `카운트: ${count}`;
  }
}

customElements.define('optimized-component', OptimizedComponent);

// 템플릿 캐싱 유틸리티
class TemplateCache {
  constructor() {
    this.cache = new Map();
  }
  
  get(id) {
    if (!this.cache.has(id)) {
      const template = document.getElementById(id);
      if (template) {
        this.cache.set(id, template.content.cloneNode(true));
      }
    }
    return this.cache.get(id)?.cloneNode(true);
  }
}

const templateCache = new TemplateCache();

class CachedComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    // 캐시된 템플릿 사용
    const template = templateCache.get('my-template');
    if (template) {
      this.shadowRoot.appendChild(template);
    }
  }
}

customElements.define('cached-component', CachedComponent);

// 동적 컴포넌트 로딩
class LazyLoader {
  static async loadComponent(name, path) {
    // 이미 정의되어 있으면 스킵
    if (customElements.get(name)) {
      return;
    }
    
    try {
      // 동적으로 모듈 import
      await import(path);
      console.log(`${name} 컴포넌트 로드 완료!`);
    } catch (error) {
      console.error(`${name} 로드 실패:`, error);
    }
  }
}

// 사용 예시
document.addEventListener('DOMContentLoaded', async () => {
  // 뷰포트에 들어올 때 로드
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(async (entry) => {
      if (entry.isIntersecting) {
        const componentName = entry.target.tagName.toLowerCase();
        const componentPath = `./components/${componentName}.js`;
        
        await LazyLoader.loadComponent(componentName, componentPath);
        observer.unobserve(entry.target);
      }
    });
  });
  
  // 아직 정의되지 않은 커스텀 엘리먼트 관찰
  document.querySelectorAll(':not(:defined)').forEach(el => {
    observer.observe(el);
  });
});

class ListComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.render();
    
    // 각 버튼에 리스너를 다는 대신 컨테이너에 하나만!
    this.shadowRoot.querySelector('.list').addEventListener('click', (e) => {
      // 이벤트 위임으로 처리
      if (e.target.classList.contains('delete-btn')) {
        const id = e.target.dataset.id;
        this.deleteItem(id);
      } else if (e.target.classList.contains('edit-btn')) {
        const id = e.target.dataset.id;
        this.editItem(id);
      }
    });
  }
  
  render() {
    const items = this.getItems(); // 아이템 목록 가져오기
    
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <div class="list">
        ${items.map(item => `
          <div class="item">
            ${item.name}
            <button class="edit-btn" data-id="${item.id}">수정</button>
            <button class="delete-btn" data-id="${item.id}">삭제</button>
          </div>
        `).join('')}
      </div>
    `;
  }
  
  getItems() {
    // 실제로는 데이터 소스에서 가져옴
    return [
      { id: 1, name: '아이템 1' },
      { id: 2, name: '아이템 2' },
      { id: 3, name: '아이템 3' }
    ];
  }
  
  deleteItem(id) {
    console.log(`아이템 ${id} 삭제`);
    // 삭제 로직...
  }
  
  editItem(id) {
    console.log(`아이템 ${id} 수정`);
    // 수정 로직...
  }
}

customElements.define('list-component', ListComponent);

class ProperCleanup extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.intervalId = null;
    this.resizeHandler = null;
  }
  
  connectedCallback() {
    this.render();
    
    // 리사이즈 핸들러 등록
    this.resizeHandler = () => this.handleResize();
    window.addEventListener('resize', this.resizeHandler);
    
    // 인터벌 시작
    this.intervalId = setInterval(() => {
      this.updateTime();
    }, 1000);
  }
  
  disconnectedCallback() {
    // 정리 작업 필수!
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler);
    }
    
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    
    console.log('컴포넌트 정리 완료!');
  }
  
  handleResize() {
    // 리사이즈 처리...
  }
  
  updateTime() {
    // 시간 업데이트...
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <div>시간: <span id="time"></span></div>
    `;
  }
}

customElements.define('proper-cleanup', ProperCleanup);

// components/base/Button.js

/**
 * 재사용 가능한 버튼 컴포넌트
 * 
 * @element custom-button
 * 
 * @attr {string} variant - 버튼 스타일 (primary|secondary|danger)
 * @attr {string} size - 버튼 크기 (small|medium|large)
 * @attr {boolean} disabled - 비활성화 상태
 * @attr {boolean} loading - 로딩 상태
 * 
 * @fires button-click - 버튼 클릭 시 발생
 * 
 * @example
 * <custom-button variant="primary" size="large">
 *   클릭하세요
 * </custom-button>
 */
class CustomButton extends HTMLElement {
  // 관찰할 속성 정의
  static get observedAttributes() {
    return ['variant', 'size', 'disabled', 'loading'];
  }
  
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    // 내부 상태
    this._variant = 'primary';
    this._size = 'medium';
    this._disabled = false;
    this._loading = false;
  }
  
  // 속성 getter/setter
  get variant() { return this._variant; }
  set variant(value) {
    this.setAttribute('variant', value);
  }
  
  get size() { return this._size; }
  set size(value) {
    this.setAttribute('size', value);
  }
  
  get disabled() { return this._disabled; }
  set disabled(value) {
    if (value) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }
  
  get loading() { return this._loading; }
  set loading(value) {
    if (value) {
      this.setAttribute('loading', '');
    } else {
      this.removeAttribute('loading');
    }
  }
  
  connectedCallback() {
    this.render();
    this.attachEventListeners();
  }
  
  disconnectedCallback() {
    this.removeEventListeners();
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return;
    
    switch(name) {
      case 'variant':
        this._variant = newValue || 'primary';
        break;
      case 'size':
        this._size = newValue || 'medium';
        break;
      case 'disabled':
        this._disabled = newValue !== null;
        break;
      case 'loading':
        this._loading = newValue !== null;
        break;
    }
    
    this.updateButton();
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <button 
        class="${this._variant} ${this._size} ${this._loading ? 'loading' : ''}"
        ?disabled="${this._disabled || this._loading}"
      >
        ${this._loading ? '<span class="spinner"></span>' : ''}
        <slot></slot>
      </button>
    `;
  }
  
  updateButton() {
    const button = this.shadowRoot.querySelector('button');
    if (!button) return;
    
    // 클래스 업데이트
    button.className = `${this._variant} ${this._size} ${this._loading ? 'loading' : ''}`;
    button.disabled = this._disabled || this._loading;
    
    // 로딩 스피너 업데이트
    const existingSpinner = button.querySelector('.spinner');
    if (this._loading && !existingSpinner) {
      const spinner = document.createElement('span');
      spinner.className = 'spinner';
      button.insertBefore(spinner, button.firstChild);
    } else if (!this._loading && existingSpinner) {
      existingSpinner.remove();
    }
  }
  
  attachEventListeners() {
    this._handleClick = this.handleClick.bind(this);
    this.shadowRoot.querySelector('button')
      ?.addEventListener('click', this._handleClick);
  }
  
  removeEventListeners() {
    this.shadowRoot.querySelector('button')
      ?.removeEventListener('click', this._handleClick);
  }
  
  handleClick(e) {
    if (this._disabled || this._loading) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }
    
    // 커스텀 이벤트 발생
    this.dispatchEvent(new CustomEvent('button-click', {
      detail: {
        variant: this._variant,
        size: this._size,
        timestamp: Date.now()
      },
      bubbles: true,
      composed: true
    }));
  }
}

// 컴포넌트 등록
customElements.define('custom-button', CustomButton);

// 모듈로 export
export default CustomButton;

// React 컴포넌트에서 웹 컴포넌트 사용
import React, { useRef, useEffect } from 'react';
import './components/CustomButton'; // 웹 컴포넌트 import

function App() {
  const buttonRef = useRef(null);
  
  useEffect(() => {
    const button = buttonRef.current;
    
    // 이벤트 리스너 등록
    const handleButtonClick = (e) => {
      console.log('버튼 클릭!', e.detail);
    };
    
    button?.addEventListener('button-click', handleButtonClick);
    
    // 정리
    return () => {
      button?.removeEventListener('button-click', handleButtonClick);
    };
  }, []);
  
  const handleLoadingToggle = () => {
    const button = buttonRef.current;
    button.loading = !button.loading;
  };
  
  return (
    <div className="App">
      <h1>React + 웹 컴포넌트</h1>
      
      {/* 웹 컴포넌트 사용 */}
      <custom-button 
        ref={buttonRef}
        variant="primary"
        size="large"
      >
        클릭하세요
      </custom-button>
      
      <button onClick={handleLoadingToggle}>
        로딩 토글
      </button>
    </div>
  );
}

export default App;

<!-- Vue 컴포넌트 -->
<template>
  <div class="app">
    <h1>Vue + 웹 컴포넌트</h1>
    
    <!-- 웹 컴포넌트 사용 -->
    <custom-button
      ref="customButton"
      :variant="buttonVariant"
      :size="buttonSize"
      :loading="isLoading"
      @button-click="handleButtonClick"
    >
      {{ buttonText }}
    </custom-button>
    
    <button @click="toggleLoading">
      로딩 토글
    </button>
  </div>
</template>

<script>
import { ref } from 'vue';
import './components/CustomButton';

export default {
  name: 'App',
  setup() {
    const customButton = ref(null);
    const buttonVariant = ref('primary');
    const buttonSize = ref('large');
    const isLoading = ref(false);
    const buttonText = ref('클릭하세요');
    
    const handleButtonClick = (e) => {
      console.log('버튼 클릭!', e.detail);
    };
    
    const toggleLoading = () => {
      isLoading.value = !isLoading.value;
    };
    
    return {
      customButton,
      buttonVariant,
      buttonSize,
      isLoading,
      buttonText,
      handleButtonClick,
      toggleLoading
    };
  }
};
</script>

<script>
// Vue 설정에서 커스텀 엘리먼트 무시하도록 설정
// main.js 또는 vite.config.js
export default {
  compilerOptions: {
    isCustomElement: tag => tag.startsWith('custom-')
  }
}
</script>

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// 웹 컴포넌트 import
import './components/CustomButton';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 커스텀 엘리먼트 허용
})
export class AppModule { }

// app.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h1>Angular + 웹 컴포넌트</h1>
      
      <custom-button
        #customButton
        [attr.variant]="buttonVariant"
        [attr.size]="buttonSize"
        [attr.loading]="isLoading ? '' : null"
      >
        {{ buttonText }}
      </custom-button>
      
      <button (click)="toggleLoading()">
        로딩 토글
      </button>
    </div>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('customButton') customButton!: ElementRef;
  
  buttonVariant = 'primary';
  buttonSize = 'large';
  isLoading = false;
  buttonText = '클릭하세요';
  
  ngAfterViewInit() {
    // 이벤트 리스너 등록
    this.customButton.nativeElement.addEventListener('button-click', (e: any) => {
      console.log('버튼 클릭!', e.detail);
    });
  }
  
  toggleLoading() {
    this.isLoading = !this.isLoading;
  }
}

// 실전 예제: 제품 카드 컴포넌트
class ProductCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  static get observedAttributes() {
    return ['product-id', 'name', 'price', 'image', 'rating', 'in-stock'];
  }
  
  connectedCallback() {
    this.render();
    this.attachEventListeners();
  }
  
  render() {
    const productId = this.getAttribute('product-id');
    const name = this.getAttribute('name') || '제품명';
    const price = this.getAttribute('price') || '0';
    const image = this.getAttribute('image') || 'placeholder.jpg';
    const rating = parseFloat(this.getAttribute('rating')) || 0;
    const inStock = this.getAttribute('in-stock') !== 'false';
    
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <div class="product-card">
        <div class="image-container">
          <img class="product-image" src="${image}" alt="${name}">
          <span class="badge ${inStock ? 'in-stock' : 'out-of-stock'}">
            ${inStock ? '재고 있음' : '품절'}
          </span>
        </div>
        
        <div class="content">
          <h3 class="product-name">${name}</h3>
          
          <div class="rating">
            <span class="stars">${this.renderStars(rating)}</span>
            <span class="rating-value">${rating.toFixed(1)}</span>
          </div>
          
          <div class="price-container">
            <span class="price">${this.formatPrice(price)}원</span>
          </div>
          
          <div class="actions">
            <button 
              class="add-to-cart" 
              ${!inStock ? 'disabled' : ''}
              data-action="add-to-cart"
            >
              ${inStock ? '장바구니 담기' : '품절'}
            </button>
            <button 
              class="wishlist" 
              data-action="toggle-wishlist"
              title="위시리스트"
            >
              ♡
            </button>
          </div>
        </div>
      </div>
    `;
  }
  
  renderStars(rating) {
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 >= 0.5;
    let stars = '';
    
    for (let i = 0; i < fullStars; i++) {
      stars += '★';
    }
    if (hasHalfStar) {
      stars += '☆';
    }
    while (stars.length < 5) {
      stars += '☆';
    }
    
    return stars;
  }
  
  formatPrice(price) {
    return parseInt(price).toLocaleString('ko-KR');
  }
  
  attachEventListeners() {
    this.shadowRoot.querySelector('.add-to-cart')
      ?.addEventListener('click', () => this.handleAddToCart());
    
    this.shadowRoot.querySelector('.wishlist')
      ?.addEventListener('click', (e) => this.handleToggleWishlist(e));
  }
  
  handleAddToCart() {
    const productId = this.getAttribute('product-id');
    const name = this.getAttribute('name');
    const price = this.getAttribute('price');
    
    this.dispatchEvent(new CustomEvent('add-to-cart', {
      detail: { productId, name, price },
      bubbles: true,
      composed: true
    }));
    
    // 시각적 피드백
    this.showFeedback('장바구니에 추가되었습니다!');
  }
  
  handleToggleWishlist(e) {
    const button = e.target;
    const isActive = button.classList.toggle('active');
    button.textContent = isActive ? '♥' : '♡';
    
    const productId = this.getAttribute('product-id');
    
    this.dispatchEvent(new CustomEvent('toggle-wishlist', {
      detail: { productId, isActive },
      bubbles: true,
      composed: true
    }));
  }
  
  showFeedback(message) {
    // 토스트 메시지 표시 로직
    console.log(message);
  }
}

customElements.define('product-card', ProductCard);

// 사용 예시:
// <product-card
//   product-id="12345"
//   name="멋진 제품"
//   price="29900"
//   image="product.jpg"
//   rating="4.5"
//   in-stock="true"
// ></product-card>

// 디버깅을 위한 로깅 유틸리티
class ComponentLogger {
  constructor(componentName) {
    this.componentName = componentName;
    this.enabled = true; // 프로덕션에서는 false로
  }
  
  log(message, data = null) {
    if (!this.enabled) return;
    
    console.log(
      `%c[${this.componentName}]%c ${message}`,
      'color: #667eea; font-weight: bold',
      'color: inherit',
      data || ''
    );
  }
  
  warn(message, data = null) {
    if (!this.enabled) return;
    
    console.warn(`[${this.componentName}] ${message}`, data || '');
  }
  
  error(message, error = null) {
    if (!this.enabled) return;
    
    console.error(`[${this.componentName}] ${message}`, error || '');
  }
  
  group(label) {
    if (!this.enabled) return;
    console.group(`[${this.componentName}] ${label}`);
  }
  
  groupEnd() {
    if (!this.enabled) return;
    console.groupEnd();
  }
}

// 사용 예시
class DebuggableComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.logger = new ComponentLogger('DebuggableComponent');
  }
  
  connectedCallback() {
    this.logger.group('Lifecycle: connectedCallback');
    this.logger.log('컴포넌트가 DOM에 추가됨');
    this.logger.log('속성들', {
      name: this.getAttribute('name'),
      value: this.getAttribute('value')
    });
    this.render();
    this.logger.groupEnd();
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    this.logger.log(`속성 변경: ${name}`, {
      old: oldValue,
      new: newValue
    });
  }
  
  render() {
    try {
      this.logger.log('렌더링 시작');
      // 렌더링 로직...
      this.logger.log('렌더링 완료');
    } catch (error) {
      this.logger.error('렌더링 실패', error);
    }
  }
}

// Jest를 사용한 웹 컴포넌트 테스트
import './CustomButton';

describe('CustomButton', () => {
  let button;
  
  beforeEach(() => {
    // 각 테스트 전에 새 인스턴스 생성
    button = document.createElement('custom-button');
    document.body.appendChild(button);
  });
  
  afterEach(() => {
    // 테스트 후 정리
    document.body.removeChild(button);
  });
  
  test('컴포넌트가 정의되어 있어야 함', () => {
    expect(customElements.get('custom-button')).toBeDefined();
  });
  
  test('기본 variant는 primary여야 함', () => {
    expect(button.variant).toBe('primary');
  });
  
  test('variant 속성 변경이 반영되어야 함', () => {
    button.variant = 'secondary';
    expect(button.getAttribute('variant')).toBe('secondary');
  });
  
  test('disabled 상태에서 클릭 이벤트가 발생하지 않아야 함', () => {
    const clickHandler = jest.fn();
    button.addEventListener('button-click', clickHandler);
    
    button.disabled = true;
    button.shadowRoot.querySelector('button').click();
    
    expect(clickHandler).not.toHaveBeenCalled();
  });
  
  test('loading 상태에서 스피너가 표시되어야 함', async () => {
    button.loading = true;
    
    // 다음 틱까지 대기
    await new Promise(resolve => setTimeout(resolve, 0));
    
    const spinner = button.shadowRoot.querySelector('.spinner');
    expect(spinner).toBeTruthy();
  });
  
  test('버튼 클릭 시 커스텀 이벤트가 발생해야 함', () => {
    const clickHandler = jest.fn();
    button.addEventListener('button-click', clickHandler);
    
    button.shadowRoot.querySelector('button').click();
    
    expect(clickHandler).toHaveBeenCalled();
    expect(clickHandler.mock.calls[0][0].detail).toHaveProperty('timestamp');
  });
});

// 통합 테스트 예시
describe('CustomButton Integration', () => {
  test('여러 버튼이 독립적으로 동작해야 함', () => {
    const button1 = document.createElement('custom-button');
    const button2 = document.createElement('custom-button');
    
    document.body.appendChild(button1);
    document.body.appendChild(button2);
    
    button1.variant = 'primary';
    button2.variant = 'danger';
    
    expect(button1.variant).toBe('primary');
    expect(button2.variant).toBe('danger');
    
    document.body.removeChild(button1);
    document.body.removeChild(button2);
  });
});

// Cypress를 사용한 E2E 테스트
describe('Product Card E2E', () => {
  beforeEach(() => {
    cy.visit('/products');
  });
  
  it('제품 카드가 렌더링되어야 함', () => {
    cy.get('product-card').should('exist');
  });
  
  it('장바구니 버튼 클릭 시 이벤트가 발생해야 함', () => {
    cy.get('product-card')
      .shadow()
      .find('.add-to-cart')
      .click();
    
    cy.get('.toast-message')
      .should('contain', '장바구니에 추가되었습니다');
  });
  
  it('위시리스트 토글이 동작해야 함', () => {
    cy.get('product-card')
      .shadow()
      .find('.wishlist')
      .click()
      .should('have.class', 'active');
  });
  
  it('품절 상태에서 장바구니 버튼이 비활성화되어야 함', () => {
    cy.get('product-card[in-stock="false"]')
      .shadow()
      .find('.add-to-cart')
      .should('be.disabled');
  });
});

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/my-components.js',
      format: 'esm',
      sourcemap: true
    },
    {
      file: 'dist/my-components.min.js',
      format: 'esm',
      sourcemap: true,
      plugins: [terser()]
    },
    {
      file: 'dist/my-components.umd.js',
      format: 'umd',
      name: 'MyComponents',
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    postcss({
      inject: false,
      extract: false
    })
  ]
};

// package.json
{
  "name": "my-web-components",
  "version": "1.0.0",
  "main": "dist/my-components.js",
  "module": "dist/my-components.js",
  "unpkg": "dist/my-components.min.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  }
}

// 1. package.json 설정
{
  "name": "@mycompany/web-components",
  "version": "1.0.0",
  "description": "재사용 가능한 웹 컴포넌트 라이브러리",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist",
    "README.md"
  ],
  "keywords": [
    "web-components",
    "custom-elements",
    "ui-components"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/mycompany/web-components"
  },
  "license": "MIT"
}

// 2. README.md 작성
# My Web Components

재사용 가능한 웹 컴포넌트 라이브러리

## 설치

```bash
npm install @mycompany/web-components
```

## 사용법

```javascript
import '@mycompany/web-components';

// HTML에서 사용
<custom-button variant="primary">클릭</custom-button>
```

## 컴포넌트 목록

- CustomButton
- ProductCard
- UserProfile
- TabsComponent

// 3. NPM 배포
npm login
npm publish --access public

// unpkg나 jsdelivr을 통한 CDN 사용
<script type="module">
  import 'https://unpkg.com/@mycompany/web-components@1.0.0/dist/index.js';
</script>

// 또는
<script src="https://cdn.jsdelivr.net/npm/@mycompany/web-components@1.0.0/dist/index.umd.js"></script>

// 폴리필 사용하기
// 1. 설치
npm install @webcomponents/webcomponentsjs

// 2. HTML에 추가
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

// 3. 폴리필 로드 후 컴포넌트 로드
<script type="module">
  // 폴리필이 로드될 때까지 대기
  window.WebComponents = window.WebComponents || {};
  window.WebComponents.waitFor = window.WebComponents.waitFor || function(cb) {
    if (window.WebComponents.ready) {
      cb();
    } else {
      window.addEventListener('WebComponentsReady', cb);
    }
  };
  
  // 폴리필 준비 완료 후 컴포넌트 로드
  WebComponents.waitFor(() => {
    import('./my-components.js');
  });
</script>

// 4. 조건부 폴리필 로드 (더 효율적)
<script>
  // 웹 컴포넌트를 지원하는지 확인
  if (!window.customElements) {
    // 지원하지 않으면 폴리필 로드
    document.write('<script src="webcomponents-loader.js"><\/script>');
  }
</script>

class CompatibleComponent extends HTMLElement {
  constructor() {
    super();
    
    // Shadow DOM 지원 확인
    if (this.attachShadow) {
      this.attachShadow({ mode: 'open' });
      this.usingShadowDOM = true;
    } else {
      // Shadow DOM 미지원 시 일반 DOM 사용
      this.usingShadowDOM = false;
      console.warn('Shadow DOM이 지원되지 않습니다. 일반 DOM을 사용합니다.');
    }
  }
  
  connectedCallback() {
    this.render();
  }
  
  render() {
    const template = `
      <div class="component">
        <h3>호환 가능한 컴포넌트</h3>
        <p>Shadow DOM ${this.usingShadowDOM ? '사용' : '미사용'}</p>
      </div>
    `;
    
    if (this.usingShadowDOM) {
      this.shadowRoot.innerHTML = `
        <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
        ${template}
      `;
    } else {
      // Shadow DOM 없이 사용
      this.innerHTML = template;
      // 스타일은 외부 CSS로 처리
    }
  }
}

// Custom Elements 지원 확인
if (window.customElements) {
  customElements.define('compatible-component', CompatibleComponent);
} else {
  console.error('Custom Elements가 지원되지 않습니다. 폴리필을 로드하세요.');
}

// 이벤트 발생 기능을 제공하는 Mixin
const EventEmitterMixin = (Base) => class extends Base {
  emit(eventName, detail = {}) {
    this.dispatchEvent(new CustomEvent(eventName, {
      detail,
      bubbles: true,
      composed: true
    }));
  }
};

// 로딩 상태 관리 Mixin
const LoadingMixin = (Base) => class extends Base {
  constructor() {
    super();
    this._loading = false;
  }
  
  get loading() {
    return this._loading;
  }
  
  set loading(value) {
    this._loading = value;
    this.updateLoadingState();
  }
  
  updateLoadingState() {
    // 로딩 UI 업데이트
    const loadingEl = this.shadowRoot?.querySelector('.loading-indicator');
    if (loadingEl) {
      loadingEl.style.display = this._loading ? 'block' : 'none';
    }
  }
};

// Mixin 사용
class MyComponent extends LoadingMixin(EventEmitterMixin(HTMLElement)) {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  async fetchData() {
    this.loading = true;
    
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      
      // 이벤트 발생
      this.emit('data-loaded', { data });
    } catch (error) {
      this.emit('error', { error });
    } finally {
      this.loading = false;
    }
  }
}

customElements.define('my-component', MyComponent);

// 작은 컴포넌트들
class IconComponent extends HTMLElement {
  connectedCallback() {
    const type = this.getAttribute('type') || 'default';
    this.innerHTML = this.getIcon(type);
  }
  
  getIcon(type) {
    const icons = {
      'check': '✓',
      'close': '✕',
      'heart': '♥',
      'star': '★'
    };
    return icons[type] || '•';
  }
}

class BadgeComponent extends HTMLElement {
  connectedCallback() {
    this.style.cssText = `
      display: inline-block;
      padding: 4px 8px;
      background: #667eea;
      color: white;
      border-radius: 12px;
      font-size: 12px;
    `;
  }
}

// 큰 컴포넌트에서 조합
class NotificationCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    const type = this.getAttribute('type') || 'info';
    const message = this.getAttribute('message') || '';
    const badge = this.getAttribute('badge') || '';
    
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <div class="notification">
        <icon-component type="${type}"></icon-component>
        <span>${message}</span>
        ${badge ? `<badge-component>${badge}</badge-component>` : ''}
      </div>
    `;
  }
}

customElements.define('icon-component', IconComponent);
customElements.define('badge-component', BadgeComponent);
customElements.define('notification-card', NotificationCard);

// 컴포넌트 팩토리
class ComponentFactory {
  static create(tagName, attributes = {}, children = []) {
    const element = document.createElement(tagName);
    
    // 속성 설정
    Object.entries(attributes).forEach(([key, value]) => {
      if (typeof value === 'boolean') {
        if (value) element.setAttribute(key, '');
      } else {
        element.setAttribute(key, value);
      }
    });
    
    // 자식 요소 추가
    children.forEach(child => {
      if (typeof child === 'string') {
        element.appendChild(document.createTextNode(child));
      } else {
        element.appendChild(child);
      }
    });
    
    return element;
  }
  
  static createButton(text, variant = 'primary', onClick = null) {
    const button = this.create('custom-button', { variant }, [text]);
    
    if (onClick) {
      button.addEventListener('button-click', onClick);
    }
    
    return button;
  }
  
  static createCard(title, content, actions = []) {
    const titleEl = this.create('h3', {}, [title]);
    const contentEl = this.create('p', {}, [content]);
    const actionsContainer = this.create('div', { class: 'actions' }, actions);
    
    return this.create('product-card', {}, [
      titleEl,
      contentEl,
      actionsContainer
    ]);
  }
}

// 사용 예시
const saveButton = ComponentFactory.createButton(
  '저장',
  'primary',
  (e) => console.log('저장 클릭!', e.detail)
);

const cancelButton = ComponentFactory.createButton(
  '취소',
  'secondary',
  () => console.log('취소 클릭!')
);

const card = ComponentFactory.createCard(
  '제품 정보',
  '이 제품은 정말 좋습니다!',
  [saveButton, cancelButton]
);

document.body.appendChild(card);

// 반응형 속성 데코레이터 (TypeScript 스타일)
function reactive(target, propertyKey) {
  const privateKey = `_${propertyKey}`;
  
  Object.defineProperty(target, propertyKey, {
    get() {
      return this[privateKey];
    },
    set(value) {
      const oldValue = this[privateKey];
      this[privateKey] = value;
      
      // 값이 실제로 변경되었을 때만 업데이트
      if (oldValue !== value) {
        this.requestUpdate(propertyKey, oldValue, value);
      }
    },
    enumerable: true,
    configurable: true
  });
}

class ReactiveComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this._updateScheduled = false;
    this._changedProperties = new Map();
  }
  
  requestUpdate(property, oldValue, newValue) {
    this._changedProperties.set(property, { oldValue, newValue });
    
    if (!this._updateScheduled) {
      this._updateScheduled = true;
      
      // 다음 프레임에 업데이트 (배칭)
      requestAnimationFrame(() => {
        this.performUpdate();
        this._updateScheduled = false;
      });
    }
  }
  
  performUpdate() {
    // 변경된 속성들에 대해 업데이트 수행
    this._changedProperties.forEach((change, property) => {
      this.propertyChanged(property, change.oldValue, change.newValue);
    });
    
    this._changedProperties.clear();
    this.render();
  }
  
  propertyChanged(property, oldValue, newValue) {
    // 개별 속성 변경 처리
    console.log(`${property} 변경: ${oldValue} → ${newValue}`);
  }
  
  render() {
    // 렌더링 로직
  }
}

// 사용 예시
class CounterComponent extends ReactiveComponent {
  constructor() {
    super();
    this._count = 0;
    this._step = 1;
  }
  
  // reactive 속성들
  get count() { return this._count; }
  set count(value) {
    const oldValue = this._count;
    this._count = value;
    this.requestUpdate('count', oldValue, value);
  }
  
  get step() { return this._step; }
  set step(value) {
    const oldValue = this._step;
    this._step = value;
    this.requestUpdate('step', oldValue, value);
  }
  
  connectedCallback() {
    this.render();
    this.attachEventListeners();
  }
  
  render() {
    this.shadowRoot.innerHTML = `
      <style>.tx-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff;
padding:40px 30px;
border-radius:16px;
text-align:center;
margin-bottom:40px;
box-shadow:0 8px 24px rgba(102,126,234,0.25);}
.tx-intro{background:#f8f9fa;
padding:25px;
border-radius:12px;
margin:30px 0;
border-left:5px solid #667eea;}
.tx-section{margin:40px 0;}
.tx-highlight{background:linear-gradient(120deg,#fef6e4 0%,#f3e7ff 100%);
padding:20px;
border-radius:10px;
margin:25px 0;}
.tx-tip{background:#e8f5e9;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #4caf50;}
.tx-warning{background:#fff3e0;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #ff9800;}
.tx-point{background:#e3f2fd;
padding:18px;
border-radius:10px;
margin:20px 0;
border-left:4px solid #2196f3;}
.tx-table-wrap{overflow-x:auto;
margin:25px 0;}
.tx-table{width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.tx-table th{background:#667eea;
color:#fff;
padding:12px;
text-align:left;
font-weight:600;}
.tx-table td{padding:12px;
border-bottom:1px solid #e0e0e0;}
.tx-table tr:last-child td{border-bottom:none;}
.tx-svg-container{text-align:center;
margin:40px 0;}
.tx-concept-box{background:#fff;
padding:20px;
border-radius:12px;
margin:20px 0;
box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.tx-step{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}
.tx-benefit{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
padding:15px 20px;
border-radius:10px;
margin:15px 0;}</style>
      
      <div class="counter">
        <div class="count">${this.count}</div>
        <button id="decrease">-${this.step}</button>
        <button id="increase">+${this.step}</button>
      </div>
    `;
  }
  
  attachEventListeners() {
    this.shadowRoot.getElementById('increase')
      ?.addEventListener('click', () => {
        this.count += this.step;
      });
    
    this.shadowRoot.getElementById('decrease')
      ?.addEventListener('click', () => {
        this.count -= this.step;
      });
  }
}

customElements.define('counter-component', CounterComponent);