GetShitDone-2

<header class="header">
  <span>Just Do it!</span>
  <span class="header__menu">Menu</span>
</header>
<main class="main">
  <div class="create-container-button">+ Add Container</div>
</main>

connectedCallback() {
    // 1. create-container-button 클릭 시 컨테이너 생성
    const $createContainerButton = this.shadowRoot.querySelector(
      '.create-container-button'
    );
    const $appMain = this.shadowRoot.querySelector('.main');
    $createContainerButton.addEventListener('click', (event) => {
      const containerTitleInput = prompt(
        '💥 (띄어쓰기 없이)메모장 이름을 적어주세요.'
      )
        .split(' ')
        .join('');
      if (!containerTitleInput) return;
      const $newContainer = document.createElement('todo-container');
      $newContainer.dataset.containerTitle = containerTitleInput;

      // 추후 만들 todo-container 태그를 넣어준다
      $appMain.insertBefore($newContainer, $createContainerButton);

      // 1-1. 메모 컨테이너 5개 이상 시, Add column 삭제
      if ($appMain.children.length >= 6) {
        $createContainerButton.style.display = 'none';
      }
    });
  }

connectedCallback() {
  const containerTitle = this.dataset.containerTitle;
  const $toolBar = this.shadowRoot.querySelector('.todo-toolbar');
  $toolBar.dataset.containerTitle = containerTitle;
  const $note = this.shadowRoot.querySelector('.todo-note');
  $note.dataset.containerTitle = containerTitle;
  }

connectedCallback() {
    // 1. 툴바 + 버튼 클릭 시, note 열기/닫기
    const $openNoteButton = this.shadowRoot.querySelector('.open-note-button');
    const $todoNote = this.nextElementSibling;

    $openNoteButton.addEventListener('click', (event) => {
      if ($todoNote.style.display === 'none') {
        $todoNote.style.display = 'flex';
      } else {
        $todoNote.style.display = 'none';
      }
    });

    // 2. X 버튼 클릭 시, container 삭제
    const $deleteContainerButton = this.shadowRoot.querySelector(
      '.delete-container-button'
    );
    $deleteContainerButton.addEventListener('click', (event) => {
      if (!confirm('정말 삭제하시겠습니까?')) return;
      const containerTitle = this.dataset.containerTitle;
      const $todoApp = document.querySelector('todo-app');
      const $containerSelected = $todoApp.shadowRoot.querySelector(
        `[
            data-container-title=${containerTitle}
          ]`
      );
      console.log($containerSelected);
      $containerSelected.remove();

      // 2-1. 컨테이너 5개 미만일 때, add column 재생성
      const $appMain = $todoApp.shadowRoot.querySelector('.main');
      const $createContainerButton = $appMain.querySelector(
        '.create-container-button'
      );
      if ($createContainerButton.style.display === 'none') {
        $createContainerButton.style.display = 'block';
      }
    });

    // 3. add column 클릭 시 입력값을 name으로 갖는 container 생성
    const $containerName = this.shadowRoot.querySelector('.container-name');
    $containerName.textContent = this.dataset.containerTitle;
  }