GetShitDone-4(final)

// 1) 아이템 즉, 메모가 존재하는 메모장끼리 드래그 앤 드랍
// todoItem.js
this.setAttribute('draggable', 'true');

// 드래그 시작 시
this.addEventListener('dragstart', (event) => {
  const containerTitle = event.target.dataset.containerTitle;
  const $todoApp = document.querySelector('todo-app');
  const $targetContainer = $todoApp.shadowRoot.querySelector(
    `[data-container-title=${containerTitle}]`,
  );
  const $targetList = $targetContainer.shadowRoot.querySelector('todo-list');
  // ⭐ already 클래스는 왜 있을까? 아래에서 그 이유가 나온다!!
  event.target.classList.add('drag-target', 'already');
  $targetList.classList.add('drag-target');
  $targetContainer.classList.add('drag-target');
});

this.addEventListener('drop', (event) => {
  event.preventDefault();
  event.stopPropagation();
  // dragstart 발생 시, 더해준 drag-target으로 drag중인 요소 정보를 가져온다.
  const $todoApp = document.querySelector('todo-app');
  const $targetContainer = $todoApp.shadowRoot.querySelector('.drag-target');
  const $targetList = $targetContainer.shadowRoot.querySelector('.drag-target');
  const $targetItem = $targetList.shadowRoot.querySelector('.drag-target');
  // 드래그 했으니 지운다.
  $targetItem.remove();

  // 이 아래는 드랍하게 될 Item(메모 요소)의 절반 중앙 윗부분이면 위로, 아랫부분이면 아래로 drop되도록
  // drop되는 노드의 중앙의 clientY와 drop 이벤트 발생 지점의 clientY를 비교하여
  // 구분해서 드랍을 해주었다.
  const dropTargetClientTop = event.target.getBoundingClientRect().top;
  const dropTargetClientBottom = event.target.getBoundingClientRect().bottom;
  const dropTargetClientMiddle = (dropTargetClientTop + dropTargetClientBottom) / 2;
  if (event.clientY < dropTargetClientMiddle) {
    event.target.parentNode.insertBefore($targetItem, event.target);
  } else {
    event.target.parentNode.insertBefore($targetItem, event.target.nextElementSibling);
  }
  $targetItem.dataset.containerTitle = event.target.dataset.containerTitle;

  // drag & drop 후 각각의 메모장에서 -1, +1 count 해주기
  const $targetToolbar = $targetContainer.shadowRoot.querySelector('todo-toolbar');
  const $noteCountBefore = $targetToolbar.shadowRoot.querySelector('.count-item');
  $noteCountBefore.textContent = +$noteCountBefore.textContent - 1;

  const $noteCountAfter = document
    .querySelector('todo-app')
    .shadowRoot.querySelector(
      `[
            data-container-title=${event.target.dataset.containerTitle}
          ]`,
    )
    .shadowRoot.querySelector('todo-toolbar')
    .shadowRoot.querySelector('.count-item');
  $noteCountAfter.textContent = +$noteCountAfter.textContent + 1;

  // drag & drop 기록 남겨주기
  const $record = document.createElement('div');
  $record.className = 'record';
  $record.innerHTML = `<span class="record-important">@Jayden</span> moved <span class="record-item">${$targetItem.dataset.itemTitle}</span> to <span class="record-container">${event.target.dataset.containerTitle}</span> from <span class="record-container">${$targetContainer.dataset.containerTitle}</span>`;

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

  // drop 후 drag target에 추가했던 클래스는 지워준다.
  $targetContainer.classList.remove('drag-target');
  $targetList.classList.remove('drag-target');
  $targetItem.classList.remove('drag-target');
});

// dragstart 이벤트 시 already라는 클래스를 같이 추가해주었다.
event.target.classList.add('drag-target', 'already');

connectedCallback() {
    // drag & drop된 태그는 .already가 존재하기에 바로 return된다.
    if (this.className) return;
}

// todoList.js
connectedCallback() {
    this.addEventListener('dragover', (event) => {
      event.preventDefault();
    });

    this.addEventListener('drop', (event) => {
      event.preventDefault();
      const $todoApp = document.querySelector('todo-app');
      const $targetContainer =
        $todoApp.shadowRoot.querySelector('.drag-target');
      const $targetList =
        $targetContainer.shadowRoot.querySelector('todo-list');
      const $targetItem = $targetList.shadowRoot.querySelector('.drag-target');
      $targetItem.remove();
      event.target.shadowRoot.appendChild($targetItem);
      $targetItem.dataset.containerTitle = event.target.dataset.containerTitle;

      const $targetToolbar =
        $targetContainer.shadowRoot.querySelector('todo-toolbar');
      const $noteCountBefore =
        $targetToolbar.shadowRoot.querySelector('.count-item');
      $noteCountBefore.textContent = +$noteCountBefore.textContent - 1;

      const $noteCountAfter =
        event.target.previousElementSibling.previousElementSibling.shadowRoot.querySelector(
          '.count-item'
        );
      $noteCountAfter.textContent = +$noteCountAfter.textContent + 1;

      const $record = document.createElement('div');
      $record.className = 'record';
      $record.innerHTML = `<span class="record-important">@Jayden</span> moved <span class="record-item">${$targetItem.dataset.itemTitle}</span> to <span class="record-container">${event.target.dataset.containerTitle}</span> from <span class="record-container">${$targetContainer.dataset.containerTitle}</span>`;

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

      $targetContainer.classList.remove('drag-target');
      $targetList.classList.remove('drag-target');
      $targetItem.classList.remove('drag-target');
    });
  }