GetShitDone-3

connectedCallback() {
    // 1. Add 버튼 클릭 시 새로운 메모 생성
    const $noteAddButton = this.shadowRoot.querySelector('.note-add-button');
    const $noteInput = this.shadowRoot.querySelector('.note-input');
    $noteAddButton.addEventListener('click', (event) => {
      // 1-1. input이 없을 때는 메모 생성 막기
      if (!$noteInput.value) return;

      const $todoItem = document.createElement('todo-item');
      $todoItem.dataset.containerTitle = this.dataset.containerTitle;
      $todoItem.dataset.itemTitle = $noteInput.value;
      this.nextElementSibling.shadowRoot.append($todoItem);

      // 1-2. 메모 갯수 더하기
      const $noteCount =
        this.previousElementSibling.shadowRoot.querySelector('.count-item');
      $noteCount.textContent = +$noteCount.textContent + 1;

      // 1-3. Add 버튼 비활성화
      $noteAddButton.style.opacity = '50%';

      // 1-4. Add 사용자 활동 기록
      const $record = document.createElement('div');
      $record.className = 'record';
      $record.innerHTML = `<span class="record-important">@Jayden</span> added <span class="record-important">${$noteInput.value}</span> to <b>${this.dataset.containerTitle}</b>`;

      const now = Date.now();
      $record.dataset.timeMakeNote = now;
      activityLog.push($record);

      // 1-5. Add 버튼 클릭 후 입력칸 초기화
      $noteInput.value = '';
    });
      // 2. Cancel 버튼 클릭 시 todoNote 닫기
      const $noteCancelButton = this.shadowRoot.querySelector(
        '.note-cancel-button'
      );
      $noteCancelButton.addEventListener('click', (event) => {
        this.style.display = 'none';

        // 2-1. 메모 닫은 후 입력칸 초기화
        $noteInput.value = '';
      });

      // 3. 메모 입력 시 Add 버튼 활성화
      $noteInput.addEventListener('input', (event) => {
        $noteAddButton.style.opacity =
          event.target.value.length === 0 ? '50%' : '100%';
      });
    }

connectedCallback() {
    // 1. item이 생성되고 DOM에 추가될 때 그 안에 텍스트를 바꿔주기
    this.shadowRoot.querySelector('.item-content').textContent =
      this.dataset.itemTitle;
    // 추가) 모달 창 input value에도 같은 값 할당
    this.shadowRoot.querySelector('.modal-input').value =
      this.dataset.itemTitle;

    // 2. item X button 클릭 시 item 삭제 및 count 빼기
    const $itemDeleteButton = this.shadowRoot.querySelector(
      '.item-delete-button'
    );
    $itemDeleteButton.addEventListener('click', (event) => {
      // 2-0. 컨펌 메시지 false인 경우 early return
      if (!confirm('선택하신 카드를 삭제하시겠습니까?')) return;

      // 2-1. item 삭제
      this.remove();

      // 2-2. count 빼기
      // ✅다시: shadow dom 바깥으로 가는 다른 루트는 없는지 확인
      const containerTitle = this.dataset.containerTitle;
      const $noteCount = document
        .querySelector('todo-app')
        .shadowRoot.querySelector(
          `[
            data-container-title=${containerTitle}
          ]`
        )
        .shadowRoot.querySelector('todo-toolbar')
        .shadowRoot.querySelector('.count-item');
      $noteCount.textContent = +$noteCount.textContent - 1;

      // 2-3. 활동 기록에 삭제 활동 추가
      const $record = document.createElement('div');
      $record.className = 'record';
      $record.innerHTML = `<span class="record-important">@Jayden</span> deleted <span class="record-important">${this.dataset.itemTitle}</span> from <b>${this.dataset.containerTitle}</b>`;

      const now = Date.now();
      $record.dataset.timeMakeNote = now;
      activityLog.push($record);
    });

    // 3. 아이템 더블 클릭 시 수정 모달 생성
    this.addEventListener('dblclick', (event) => {
      this.shadowRoot.querySelector('.item-modal-outer').style.display =
        'block';
      this.shadowRoot.querySelector('.item-modal-inner').style.display = 'flex';
    });

    // 4. 모달 창 X 클릭 시 모달 닫기
    const $modalCloseButton = this.shadowRoot.querySelector(
      '.modal-close-button'
    );
    const $modalInner = this.shadowRoot.querySelector('.item-modal-inner');
    const $modalOuter = this.shadowRoot.querySelector('.item-modal-outer');

    $modalCloseButton.addEventListener('click', (event) => {
      $modalInner.style.display = 'none';
      $modalOuter.style.display = 'none';
      $modalInner.querySelector('.modal-input').value = this.dataset.itemTitle;
    });

    // 5. 모달 창 save button 클릭 시 내용 변경
    const $modalSaveButton =
      this.shadowRoot.querySelector('.modal-save-button');
    const $modalInput = this.shadowRoot.querySelector('.modal-input');
    const $itemContent = this.shadowRoot.querySelector('.item-content');
    $modalSaveButton.addEventListener('click', (event) => {
      $modalInner.style.display = 'none';
      $modalOuter.style.display = 'none';

      // 5-1. 활동 기록에 수정 활동 추가
      const $record = document.createElement('div');
      $record.className = 'record';
      $record.innerHTML = `<span class="record-important">@Jayden</span> changed <b>${$itemContent.textContent}</b> to <span class="record-important">${$modalInput.value}</span> in <b>${this.dataset.containerTitle}</b>`;

      const now = Date.now();
      $record.dataset.timeMakeNote = now;
      activityLog.push($record);

      $itemContent.textContent = $modalInput.value;
    });
}